@font-face {
    font-family:'Montserrat';
    src: url('/font/Montserrat-Black.woff2') format('woff2'),
        url('/font/Montserrat-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family:'Montserrat';
    src: url('/font/Montserrat-BlackItalic.woff2') format('woff2'),
        url('/font/Montserrat-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}


@font-face {
    font-family:'Montserrat';
    src: url('/font/Montserrat-Bold.woff2') format('woff2'),
        url('/font/Montserrat-Bold.woff') format('woff');
    font-weight:700;
    font-style:normal;
    font-display:swap;
}

@font-face {
    font-family:'Montserrat';
    src: url('/font/Montserrat-BoldItalic.woff2') format('woff2'),
        url('/font/Montserrat-BoldItalic.woff') format('woff');
    font-weight:700;
    font-style:italic;
    font-display:swap;
}

@font-face {
    font-family:'Montserrat';
    src: url('/font/Montserrat-Italic.woff2') format('woff2'),
        url('/font/Montserrat-Italic.woff') format('woff');
    font-weight:400;
    font-style:italic;
    font-display:swap;
}
@font-face {
    font-family:'Montserrat';
    src: url('/font/Montserrat-Regular.woff2') format('woff2'),
        url('/font/Montserrat-Regular.woff') format('woff');
    font-weight:400;
    font-style:normal;
    font-display:swap;
}
@font-face {
    font-family:'Montserrat';
    src: url('/font/Montserrat-Light.woff2') format('woff2'),
        url('/font/Montserrat-Light.woff') format('woff');
    font-weight:300;
    font-style:normal;
    font-display:swap;
}

@font-face {
    font-family:'Montserrat';
    src: url('/font/Montserrat-LightItalic.woff2') format('woff2'),
        url('/font/Montserrat-LightItalic.woff') format('woff');
    font-weight:300;
    font-style:italic;
    font-display:swap;
}

html{font-size:106%}
html,body{margin:0}
.auteur,html{box-sizing:border-box}


:root {
    --bg-main-color:#F5F5F5;
    --main-color:#443858
    ; /*header bg, h1,h2*/
    --secondary-color:#3C766E; /*h3,links,labelsummary bg*/
    --light-accent:#d1e4df;/*opensummary-bg*/
    --dark-accent:#20433e;         /*h4, summary open*/
    --accent-color:#514361;/*link-glossaire;h5, faqh4*/
     --accent-color-2:#82798c;
    --link-hover-color:#89b9b1;
}

.header,.main{overflow:hidden;margin:0 auto}
.article,.article-bg,.header,.main{margin:0 auto}
.article-bg{position:relative}
.main{align-items:center;justify-content:center}
body{
    font-family:"Montserrat",Calibri,Arial,sans-serif;
    text-align:left;
    padding:0;
	background-color:var(--bg-main-color);
    background-image:url('illustrations/seo-fresque-part1.jpg'),url('illustrations/seo-fresque-part2.jpg');
    background-image:url('illustrations/seo-fresque-part1.avif'),url('illustrations/seo-fresque-part2.avif');
    background-position:top left,top right;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size:auto 100vh
}

.header{
	display:flex;
	background-color:var(--main-color);
	color:#fff;
	height:20vw;
	min-height:5rem;
	width:100%;
	padding:0;
	align-items:center
}
.a-header,.a-header:hover{
	text-decoration:none;
	color:#fff;
    display:flex;
    align-items:center;
    width:100%
}
.a-header p{
	position:relative;
    text-align:left;
    margin-left:12.5%;
    margin-right:auto;
	font-weight:700;
	font-size:clamp(0.9rem, 5vw, 4rem)
}
.img-header{
	bottom:0;
	float:right;
	width:30vw;
	height:auto
}

.article-bg{
    width:75vw;
    background-color:var(--bg-main-color);
    padding-bottom:15vh
}
.article{
    display:flow-root;
    width:45vw;
    font-size:clamp(0.95rem, 1rem, 1.05rem);
    line-height:1.65em
}

h1, h2,h3,details p{line-height:1.25em}
h1,h2,.header p{font-weight:700}
h1,.subtitle,.intro,figcaption{text-align:center}
h1{
    color:var(--main-color);
    font-size:clamp(1.75rem, 5vw, 3.5rem);
    padding-top:clamp(1em, 1.5em, 2em)
}
h2{
    color:var(--main-color);
    padding:1.25em 0 0;
    font-size:clamp(1.4rem, 3vw, 2em)
}
h3,.subtitle {
    font-size:clamp(1.2rem, 2vw, 1.5rem);
    font-weight:700
}
h3{
    padding-top:1.25em;
    color:var(--secondary-color)
}
h4{
    color:var(--dark-accent);
    font-weight:700;
    font-size:clamp(1.05rem, 1.35vw, 1.25rem);
    margin-bottom:.25rem
}

h5{
    color:var(--accent-color);
    font-weight:700;
    font-size:clamp(1rem, 1.3vw, 1.2rem);
}

.glossaire {text-decoration:none;
color:var(--accent-color);
font-weight:700;}

.glossaire:hover {
color:var(--accent-color-2)}

.auteur h3,.intro{color:var(--secondary-color)}

.asterix,.intro,figcaption,.sources p{font-size:clamp(.85rem, 1vw, .9rem)}
.figcaption{margin-bottom:1rem;margin-top:.25rem;font-weight:300;}
.asterix{border:1px solid var(--secondary-color);padding:.5em}
.intro{padding:5vw}

ul{
    list-style-type:disc;
    padding:0 0 1.5em 2em;
    font-size:clamp(0.95rem, 1.25vw, 1.15rem);
    line-height:1.65em
}

li {padding:0 0 1em 0;}
li::marker{color:var(--secondary-color)}
a,details a:hover{color:var(--secondary-color)}
a:hover{color:var(--link-hover-color)}
.footer a,details a,details a:hover{text-decoration:none}

.sources{padding:2vh 0 7vh 0}

.section-a-propos{padding:5vh 0 10vh 0}
.section-a-propos li{padding:0 0 0.5em 0}

.auteur{
    margin:0 auto;
    max-width:60vw;
    min-height:24vw;
    padding:1rem;
    border:3px solid var(--secondary-color);
    border-radius:8px
}
.auteurimg{
    float:left;
    width:20vw;
    height:20vw;
    padding-right:2vh;
    align-self:center;
    transition:transform .3s ease-in-out
}
.auteurimg:hover{transform:scale(.975)}
.auteur h3{
    margin:0 auto;
    padding:0;
    font-weight:700;
    font-size:clamp(1.25rem, 2vw, 2.5rem)
}
.p-auteur{line-height:1.5em;font-size:1rem}

details{
    display:absolute;
    color:#fff;
    position:fixed;
    padding:1vw;
    top:1vh;
    left:0;
    background-color:var(--secondary-color);
    border-radius:0 5px 5px 0;
    transition:.2s ease-in-out;
	z-index:999;
}
details a,details[open]{color:var(--dark-accent)}
details[closed]{min-width:auto;max-width:1.4em;padding:.6em}
details[open]{
    overflow:auto;
    max-width:30vw;
    background-color:var(--light-accent);
    height:94vh
}
details[closed] summary{writing-mode:vertical-rl;text-orientation:upright}
details[open] summary{writing-mode:horizontal-tb;}
details p{font-size:clamp(.8rem, 1vw, 1.1rem)}
.summary{font-size:clamp(0.95rem, 1.55vw, 1.1rem)}
.title{font-weight:700;margin-top:1.5em;margin-bottom:.7em}
.sub{margin:0 0 .5em;padding-left:0em}
.sub:before{
    content:"•";
    padding:0.1em;
    font-size:1.25em;
}
summary::marker{content:""}
summary::-webkit-details-marker{display:none}
summary:hover{cursor:pointer}


figure {
    margin:0 auto;
    padding: 1.5rem 0 1.5rem 0;
}
.blogpictures,.footer{width:100%;text-align:center}
.blogpictures{display:flex;right:0;height:auto}
.footer{
    display:inline-block;
    font-size:clamp(0.8rem, 1vw, 0.9rem);
    min-height:12vh;
    background-color:#333;
    color:#fff;
    align-content:center;
    justify-content:center
}
.footer a{color:#fff}

.blog-divider-brown{
    position:absolute;
    left:1.5vw;
    background-image:url('../images/patterns/pattern-brown.svg');
    background-repeat:round;
    background-size:5vh;
    height:5vh;
    width:72vw;
    margin:0 auto
}
.blog-divider-purple{
    position:absolute;
    left:1.5vw;
    background-image:url('../images/patterns/pattern-brown.svg');
    background-repeat:round;
    background-size:5vh;
    height:5vh;
    width:72vw;
    margin:0 auto
}

#bouton-scroll{
    position:fixed;
    bottom:13vh;
    right:1vw;
    width:40px;
    height:40px;
    cursor:pointer;
    background-image:url('/images/patterns/uparrow.svg');
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    opacity:.75;
    transition:opacity .3s ease-in-out
}
#bouton-scroll:hover{opacity:1}

#button-glossary{
    position:fixed;
    bottom:13vh;
    left:1vw;
    width:50px;
    height:50px;
    cursor:pointer;
    background-image:url('/images/icones/glossaire.jpg');
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    border-radius:1rem;
}

@media screen and (max-width:400px){
    .auteur{
        box-sizing:border-box;
        margin:0 auto;
        max-width:60vw;
        padding:.5rem
    }
    .auteurimg{
        float:none;
        display:block;
        width:50vw;
        height:50vw;
        padding:2vw;
        align-self:center;
        transition:transform .3s ease-in-out
    }
    .auteur h3{text-align:center}

    body{
        background-image:url('illustrations/fresque-mobile.jpg');
        background-image:url('illustrations/fresque-mobile.avif');
        background-position:top;
        background-repeat:repeat;
        background-attachment:fixed;
        background-size:100vw auto
    }
    .article-bg{margin-top:10vh;width:80vw}
    .article{width:60vw}
    .ul{padding:0 0 1em 1em}
    .subtitle,.intro{display:none}

    .details[closed] summary::marker{content:"\25B8"}
    .details[open] summary::marker{content:"\25C0"}
    .details[open]{max-width:90vw;min-width:auto}
}
.faq h3{color:var(--accent-color); font-size:clamp(1rem, 1.3vw, 1.2rem);}
/*** COMPARATIVE GRID ***/
.comparative-grid-container {
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(200px));
    gap:1rem; 
    margin:1rem 0;
}

.comparative-card {
    border:1px solid var(--dark-accent);
    box-shadow:0 2px 5px rgba(0,0,0,0.1);
    border-radius:5px;
    overflow:hidden; 
    display:flex;
    flex-direction:column; 
    height:100%;
}

.solution-header {
    background-color:var(--dark-accent); 
    padding:15px 10px;
    text-align:center;
    font-weight:bold;
    font-size:1.1em;
    flex-shrink:0; 
    color:#fff;
}

.grid-content {
    display:grid;
    grid-template-columns:1fr 1fr; 
    flex-grow:1; 
}

.advantage-list, .inconvenient-list {
    padding:1rem;
    border-left:1px solid var(--light-accent);
}
.advantage-list {
    border-left:none; 
}

.advantage-title {color:var(--secondary-color);} 
.inconvenient-title {color:var(--accent-color);} 

.comparative-card p {
    margin:5px 0;
    padding-left:15px;
    position:relative;
}
.comparative-card p:before {
    content:"•";
    position:absolute;
    left:0;
    font-weight:bold;
    color:var(--dark-accent);
}

@media screen and (max-width: 968px) {
    .comparative-grid-container {
        grid-template-columns:1fr;
    }

    .grid-content {
        grid-template-columns:1fr;
    }
    
    .advantage-list, .inconvenient-list {
        border-left:none; 
        border-bottom:1px solid var(--accent-color); 
    }
    .inconvenient-list {
        border-bottom:none; 
    }
}