/* =========================================================
ABOUT PAGE
========================================================= */

.about_page{
    max-width:1440px;
    margin:0 auto;
    padding:60px 30px 100px;
}

.contact_container{
    max-width:1000px;
    margin:0 auto;
}

/* =========================================================
HEADER
========================================================= */

.categorie_header{
    max-width:1200px;
    margin:-40px auto 80px;
    padding:0 40px;
    text-align:center;
}

.categorie_title{
    margin:0;
    font-family:Georgia, serif;
    font-size:38px;
    font-weight:400;
    color:#111;
    letter-spacing:4px;
    text-transform:uppercase;
}

.categorie_description{
    max-width:760px;
    margin:35px auto 0;
    font-size:18px;
    line-height:1.8;
    font-weight:300;
    color:#444;
}

/* =========================================================
COVER
========================================================= */

.article_cover{
    margin-bottom:70px;
    overflow:hidden;
}

.article_cover img{
    display:block;
    width:100%;
    height:auto;
    object-fit:cover;
}

/* =========================================================
CONTENT
========================================================= */

.content_body{
    max-width:760px;
    margin:0 auto;
}

.ql-snow{
    border:none !important;
}

.ql-editor{
    padding:0 !important;
    overflow:visible;

    font-family:Georgia, serif;
    font-size:18px;
    line-height:1.9;
    color:#555;
}

.about_chapo{
    margin-bottom:45px;
    font-size:21px;
    line-height:1.9;
    color:#444;
}

/* =========================================================
HEADINGS
========================================================= */

.ql-editor h1{
    margin:60px 0 25px;
    font-size:48px;
    line-height:1.15;
    font-weight:700;
    color:#111;
}

.ql-editor h2{
    margin:55px 0 22px;
    font-size:36px;
    line-height:1.2;
    font-weight:700;
    color:#111;
}

.ql-editor h3{
    margin:45px 0 18px;
    font-size:30px;
    line-height:1.25;
    font-weight:700;
    color:#111;
}

.ql-editor h4{
    margin:40px 0 15px;
    font-size:24px;
    line-height:1.3;
    font-weight:700;
    color:#111;
}

.ql-editor h5{
    margin:35px 0 12px;
    font-size:20px;
    font-weight:700;
    color:#111;
}

.ql-editor h6{
    margin:30px 0 10px;
    font-size:18px;
    font-weight:700;
    color:#111;
}

/* =========================================================
TEXT
========================================================= */

.ql-editor p{
    margin:0 0 22px;
    font-size:18px;
    line-height:1.9;
    color:#555;
}

.ql-editor strong{
    font-weight:700;
    color:#111;
}

.ql-editor em{
    font-style:italic;
}

.ql-editor u{
    text-decoration:underline;
}

.ql-editor s{
    text-decoration:line-through;
}

/* =========================================================
LINKS
========================================================= */

.ql-editor a{
    color:#111;
    text-decoration:underline;
    transition:.25s;
}

.ql-editor a:hover{
    opacity:.7;
}

/* =========================================================
LISTS
========================================================= */

.ql-editor ul,
.ql-editor ol{
    margin:0 0 30px;
    padding-left:30px;
}

.ql-editor li{
    margin-bottom:10px;
    line-height:1.9;
    color:#555;
}

.ql-editor li::marker{
    color:#111;
}

/* =========================================================
BLOCKQUOTE
========================================================= */

.ql-editor blockquote{
    margin:50px 0;
    padding:10px 0 10px 28px;
    border-left:4px solid #111;
    font-size:24px;
    line-height:1.8;
    font-style:italic;
    color:#444;
}

/* =========================================================
IMAGES
========================================================= */

.ql-editor img{
    display:block;
    max-width:100%;
    width:100%;
    height:auto;
    margin:45px auto;
}

/* =========================================================
VIDEO
========================================================= */

.ql-editor iframe{
    display:block;
    width:100%;
    aspect-ratio:16/9;
    height:auto;
    border:none;
    margin:45px auto;
}

/* =========================================================
TABLES
========================================================= */

.ql-editor table{
    width:100%;
    margin:40px 0;
    border-collapse:collapse;
}

.ql-editor th,
.ql-editor td{
    padding:12px;
    border:1px solid #ddd;
    text-align:left;
}

.ql-editor th{
    background:#f5f5f5;
    color:#111;
}

/* =========================================================
CODE
========================================================= */

.ql-editor pre{
    margin:35px 0;
    padding:20px;
    overflow:auto;
    border-radius:8px;
    background:#111;
    color:#fff;
}

.ql-editor code{
    font-family:Consolas, monospace;
    font-size:15px;
}

/* =========================================================
HR
========================================================= */

.ql-editor hr{
    margin:50px 0;
    border:none;
    border-top:1px solid #ddd;
}

/* =========================================================
ALIGNMENTS
========================================================= */

.ql-align-center{
    text-align:center;
}

.ql-align-right{
    text-align:right;
}

.ql-align-justify{
    text-align:justify;
}

/* =========================================================
INDENTS
========================================================= */

.ql-indent-1{padding-left:3em;}
.ql-indent-2{padding-left:6em;}
.ql-indent-3{padding-left:9em;}
.ql-indent-4{padding-left:12em;}
.ql-indent-5{padding-left:15em;}
.ql-indent-6{padding-left:18em;}
.ql-indent-7{padding-left:21em;}
.ql-indent-8{padding-left:24em;}

/* =========================================================
TEXT SIZES
========================================================= */

.ql-size-small{
    font-size:.85em;
}

.ql-size-large{
    font-size:1.5em;
}

.ql-size-huge{
    font-size:2.2em;
}

/* =========================================================
FONTS
========================================================= */

.ql-font-serif{
    font-family:Georgia, serif;
}

.ql-font-monospace{
    font-family:Consolas, monospace;
}

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

@media (max-width:768px){

    .about_page{
        padding:40px 20px 80px;
    }

    .categorie_header{
        margin:0 auto 60px;
        padding:0 24px;
    }

    .categorie_title{
        font-size:clamp(38px,12vw,60px);
        line-height:.95;
    }

    .categorie_description{
        margin-top:28px;
        font-size:18px;
        line-height:1.7;
    }

    .about_chapo{
        font-size:19px;
    }

    .ql-editor{
        font-size:17px;
    }

    .ql-editor h1{
        font-size:38px;
    }

    .ql-editor h2{
        font-size:30px;
    }

    .ql-editor h3{
        font-size:26px;
    }

    .ql-editor h4{
        font-size:22px;
    }

    .ql-editor blockquote{
        font-size:21px;
    }
}

@media (max-width:480px){

    .about_page{
        padding:30px 16px 70px;
    }

    .categorie_title{
        font-size:34px;
    }

    .categorie_description{
        font-size:17px;
    }

    .about_chapo{
        font-size:18px;
    }

    .ql-editor{
        font-size:16px;
    }

    .ql-editor h1{
        font-size:32px;
    }

    .ql-editor h2{
        font-size:26px;
    }

    .ql-editor h3{
        font-size:22px;
    }

    .ql-editor h4{
        font-size:20px;
    }

    .ql-editor blockquote{
        font-size:18px;
        padding-left:20px;
    }
}