/* ==========================================================
   CONSEIL EN DIRECT
   MENTIONS LÉGALES
   Complément de /css/styles.css
========================================================== */


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

.legal-hero{
    position:relative;
    overflow:hidden;
    background:var(--navy);
    color:#fff;
    border-bottom:5px solid var(--signal);
}

.legal-hero-container{
    position:relative;
    min-height:520px;
    display:flex;
    align-items:center;
    padding-top:85px;
    padding-bottom:90px;
}

.legal-hero-copy{
    position:relative;
    z-index:2;
    width:min(780px,75%);
}

.legal-kicker{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:28px;
    color:#ff7059;
    font-size:.98rem;
    font-weight:900;
    letter-spacing:.17em;
    text-transform:uppercase;
}

.legal-kicker::before{
    content:"";
    display:block;
    width:42px;
    height:3px;
    flex:0 0 42px;
    background:var(--signal);
}

.legal-hero h1{
    margin:0;
    color:#fff;
    font-size:clamp(4rem,8vw,7.3rem);
    line-height:.82;
    font-weight:950;
    letter-spacing:-.075em;
}

.legal-hero h1 em{
    display:block;
    margin-top:.12em;
    color:#ff7059;
    font-family:Georgia,"Times New Roman",serif;
    font-size:.68em;
    font-weight:400;
    line-height:1;
    letter-spacing:-.055em;
}

.legal-hero p{
    max-width:680px;
    margin:38px 0 0;
    padding-left:22px;
    border-left:1px solid rgba(255,255,255,.35);
    color:rgba(255,255,255,.72);
    font-size:1.08rem;
    line-height:1.7;
}

.legal-hero-word{
    position:absolute;
    right:-30px;
    bottom:-35px;
    color:rgba(255,255,255,.045);
    font-size:clamp(9rem,20vw,18rem);
    font-weight:950;
    line-height:.75;
    letter-spacing:-.11em;
    pointer-events:none;
    user-select:none;
}


/* ==========================================================
   LAYOUT
========================================================== */

.legal-section{
    background:var(--paper);
}

.legal-layout{
    display:grid;
    grid-template-columns:minmax(210px,.4fr) minmax(0,1.6fr);
    gap:clamp(50px,7vw,110px);
    align-items:start;
    padding-top:90px;
    padding-bottom:110px;
}


/* ==========================================================
   SOMMAIRE
========================================================== */

.legal-summary{
    position:sticky;
    top:125px;
    padding-top:20px;
    border-top:4px solid var(--signal);
}

.legal-summary-title{
    display:block;
    margin-bottom:18px;
    color:var(--ink);
    font-size:.94rem;
    font-weight:900;
    letter-spacing:.15em;
    text-transform:uppercase;
}

.legal-summary nav{
    display:flex;
    flex-direction:column;
}

.legal-summary a{
    position:relative;
    padding:11px 0 11px 18px;
    border-bottom:1px solid var(--line);
    color:var(--ink-soft);
    font-size:1rem;
    font-weight:750;
    line-height:1.35;
    text-decoration:none;
    transition:
        color .2s ease,
        padding-left .2s ease;
}

.legal-summary a::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    width:6px;
    height:6px;
    background:var(--signal);
    transform:translateY(-50%);
}

.legal-summary a:hover,
.legal-summary a:focus-visible{
    padding-left:23px;
    color:var(--signal);
}


/* ==========================================================
   BLOCS
========================================================== */

.legal-content{
    min-width:0;
}

.legal-block{
    position:relative;
    margin:0 0 62px;
    padding:0 0 62px;
    border-bottom:1px solid var(--line);
    scroll-margin-top:120px;
}

.legal-block:last-child{
    margin-bottom:0;
    padding-bottom:0;
    border-bottom:0;
}

.legal-number{
    display:block;
    margin-bottom:12px;
    color:var(--signal);
    font-family:"Courier New",monospace;
    font-size:1rem;
    font-weight:900;
    letter-spacing:.12em;
}

.legal-block h2{
    margin:0 0 30px;
    color:var(--ink);
    font-size:clamp(2.1rem,4vw,3.5rem);
    font-weight:900;
    line-height:.95;
    letter-spacing:-.055em;
}

.legal-block h3{
    margin:38px 0 14px;
    color:var(--ink);
    font-size:1.4rem;
    font-weight:900;
    letter-spacing:-.025em;
}

.legal-block p{
    max-width:900px;
    margin:0 0 20px;
    color:var(--ink-soft);
    font-size:1.06rem;
    line-height:1.75;
}

.legal-block p:last-child{
    margin-bottom:0;
}

.legal-block p strong{
    color:var(--ink);
}

.legal-block a{
    color:var(--ink);
    font-weight:800;
    text-decoration-color:var(--signal);
    text-decoration-thickness:2px;
    text-underline-offset:4px;
}

.legal-block a:hover,
.legal-block a:focus-visible{
    color:var(--signal);
}


/* ==========================================================
   FICHES D'INFORMATIONS
========================================================== */

.legal-infos{
    display:grid;
    grid-template-columns:1fr 1fr;
    margin-top:32px;
    border-top:1px solid var(--ink);
}

.legal-info{
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:0;
    padding:20px 20px 20px 0;
    border-bottom:1px solid var(--line);
}

.legal-info:nth-child(odd):not(.legal-info-full){
    padding-right:35px;
    border-right:1px solid var(--line);
}

.legal-info:nth-child(even){
    padding-left:35px;
}

.legal-info-full{
    grid-column:1 / -1;
}

.legal-info span{
    color:var(--ink-soft);
    font-size:.92rem;
    font-weight:700;
}

.legal-info strong{
    color:var(--ink);
    font-size:1.08rem;
    line-height:1.45;
    overflow-wrap:anywhere;
}

.legal-info strong a{
    color:inherit;
}


/* ==========================================================
   LISTE
========================================================== */

.legal-list{
    max-width:850px;
    margin:24px 0 30px;
    padding:0;
    list-style:none;
}

.legal-list li{
    position:relative;
    margin:0;
    padding:10px 0 10px 30px;
    border-bottom:1px solid var(--line);
    color:var(--ink-soft);
    font-size:1.05rem;
    line-height:1.6;
}

.legal-list li:first-child{
    border-top:1px solid var(--line);
}

.legal-list li::before{
    content:"";
    position:absolute;
    left:3px;
    top:1.45em;
    width:10px;
    height:3px;
    background:var(--signal);
}


/* ==========================================================
   NOTE
========================================================== */

.legal-note{
    display:flex;
    flex-direction:column;
    gap:5px;
    max-width:850px;
    margin-top:35px;
    padding:24px 28px;
    border-left:5px solid var(--signal);
    background:var(--paper-2);
}

.legal-note strong{
    color:var(--ink);
    font-size:1.05rem;
}

.legal-note span{
    color:var(--ink-soft);
    line-height:1.6;
}

.legal-update{
    margin-top:35px!important;
    padding-top:20px;
    border-top:1px solid var(--line);
    color:var(--ink)!important;
    font-weight:800;
}


/* ==========================================================
   THÈME SOMBRE
========================================================== */

html[data-theme="dark"] .legal-hero{
    background:#080f19;
}

html[data-theme="dark"] .legal-infos{
    border-top-color:rgba(255,255,255,.35);
}


/* ==========================================================
   TABLETTE
========================================================== */

@media(max-width:1050px){

    .legal-hero-container{
        min-height:470px;
        padding-top:75px;
        padding-bottom:80px;
    }

    .legal-hero-copy{
        width:85%;
    }

    .legal-layout{
        grid-template-columns:210px minmax(0,1fr);
        gap:50px;
        padding-top:75px;
        padding-bottom:90px;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:760px){

    .legal-hero-container{
        min-height:0;
        padding-top:60px;
        padding-bottom:65px;
    }

    .legal-hero-copy{
        width:100%;
    }

    .legal-kicker{
        margin-bottom:24px;
        font-size:.88rem;
        line-height:1.4;
    }

    .legal-hero h1{
        font-size:clamp(3.3rem,17vw,4.7rem);
    }

    .legal-hero p{
        margin-top:30px;
        font-size:1rem;
    }

    .legal-hero-word{
        right:-10px;
        bottom:-15px;
        font-size:7rem;
    }

    .legal-layout{
        display:block;
        padding-top:55px;
        padding-bottom:75px;
    }

    .legal-summary{
        position:static;
        margin-bottom:65px;
    }

    .legal-summary nav{
        display:grid;
        grid-template-columns:1fr 1fr;
        column-gap:22px;
    }

    .legal-block{
        margin-bottom:48px;
        padding-bottom:48px;
        scroll-margin-top:100px;
    }

    .legal-block h2{
        margin-bottom:25px;
        font-size:clamp(2.15rem,10vw,3rem);
    }

    .legal-block p,
    .legal-list li{
        font-size:1rem;
    }

    .legal-infos{
        display:block;
    }

    .legal-info,
    .legal-info:nth-child(odd):not(.legal-info-full),
    .legal-info:nth-child(even){
        padding:17px 0;
        border-right:0;
    }

    .legal-info span{
        color:var(--signal);
    }

}


/* ==========================================================
   PETITS MOBILES
========================================================== */

@media(max-width:480px){

    .legal-summary nav{
        grid-template-columns:1fr;
    }

    .legal-hero h1{
        font-size:3.2rem;
    }

    .legal-hero-word{
        font-size:5.8rem;
    }

    .legal-note{
        padding:21px;
    }

}