/***************************************
***************************************

CSS Marvelous Wombat 2026
"Portfolio" de Marine Karmowski, post-AI era.
Copie si tu veux, ça me fera plaisir.
J'ai commencé ce framework en 2018... je voulais 
en faire un gros site avec des livres interactifs.
J'ai fini par me dire que c'était le pire business plan 
et j'ai laissé tomber aussi mon layout, qui était quand même cool.
8 ans après j'me trouve bonne finalement. Donc prends en si tu veux.
Comme si ma job intéressais quelqu'un anyway ahaha 
(cry laughing in millenial despair)

***************************************
***************************************/

/** Import marvelous typography **/

@import url('../styles/fonts/Boska/css/Boska.css');/*so much beauty...*/
@import url('../styles/fonts/Stardom/css/stardom.css');/*so much beauty...*/
@import url('../styles/fonts/Satoshi/css/satoshi.css');/*so much beauty...*/

/*** Général ***/

*{
    margin:0; 
    padding:0;
    font-size:100%;
    font-family: 'Satoshi-Medium', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    box-sizing:border-box;
    color: #3e3e3e;
}
body{ background: #ece8e5; }

::selection, .tiq{ background: #4c52fe; color: #ece8e5;}
::selection{ color: #ece8e5;}
/*.tiq{color: #ece8e5;}*/

hr{clear: both;}

.clear{clear: both;}


/*** Header / Footer ***/

.cover{ 
    background: #151515; 
    width: 100%; height: auto; 
    max-height: 800px; min-height: 50vh;
    position: absolute; top:0;
    z-index: -1;
}

.lang { 
    position: absolute; 
    top: 5px; right: 15px;
}
.lang a{ color:white; font-size: 12px;}


#signature{ background: white; width: 100%; overflow: hidden;}
#signature img{ 
    width: 200px;
    height: auto;
    float: right;
    background: linear-gradient( #ff00ff, #000000, #00ffcc ), black;
}

footer{
    background: #151515;
    min-height:400px;
    border: 1px solid white;
    border-right-color: cyan; 
    border-bottom-color: cyan;
}
footer .card{
    padding: 20px 30px 50px;
    max-width: 320px;
}
footer .preFoot{
    background: mintcream;
    width: 100%;
    margin: 0;
    padding: 0;
}
footer h1{
    padding: 5px; 
    font-size: 14px; 
    font-style: italic; 
    border: none;
}
footer p {
    color: #a3a3a3!important;
    display: block; 
    margin-top: 10px; 
    text-align: left;
}
footer p::first-line{
    font-size: 14px; font-style: normal;
}
footer h2, footer h3, footer h4, footer h5, footer h6, footer p{
    padding: 5px; 
    font-size: 10px; 
    font-style: italic; 
    border: none;
}

.logo{ 
    width: 150px; height: 150px; 
    padding: 10px; 
    margin: 0 auto;
    display: block;
}
.logo img{
    max-width: 50px; 
    margin: 0 auto;
} 
/***** Sections le fun *******/

.litterature, .footer{
    background: snow;
    margin: 40px auto 0;
    width: 100%;
}
.litterature{
    max-width:1024px; overflow: hidden;
}

.marketing{
    width: 100%;
    min-height: 50vh;
    overflow: hidden;    
    padding: 2%;
    background: #f1ff41;
}
.marketing section{
    border: 0 solid white;
    background: white;
    border-radius: 20px;
    width: 100%;
}

.marketing h1{
    font-family: 'Boska-Bold', Georgia, 'Times New Roman', Times, serif!important;
    font-size: 13.5em;
    line-height: 0.7em;
    padding: 100px;
    overflow-wrap: anywhere;
}

/*** Traitement du texte TITRES ***/
h1, h2, h3{
    text-align:center;
    padding: 1%; 
    width:100%;
}
h1{ font-size:3.5em; /*border-color: #00ffcc;*/}
h2{ font-size:2.5em; /*border-color: #ff00ff;*/}
h3{ font-size:2em; /*border-color: #fcff00;*/}
h4{
    text-align: center;
    font-size: 1.5em; 
    font-style: italic;
}

.numeroH{
    border: 4px solid;
    display: block;
    width: 90px;
    border-radius: 100%;
    height: 90px;
    text-align: center;
    line-height: 1em;
    margin: 0 0 0 -20px !important;
}



.litterature h1, .litterature h2, .litterature  h3{
    overflow:hidden;
    text-align:center;
    padding: 1%; width:100%; 
    margin-bottom: 0.5em!important;
    min-height:1.5em; clear:both;
    border-left:0.4rem solid #3e3e3e;
    background: snow; position: relative; z-index: 4;
}

/***** Traitement du texte *****/

p{/*général*/
    overflow:hidden;
    width:100%;
    display: block;
    margin: 0 auto 4%;
    padding: 0 3% 0; 
    max-width: 800px;
    font-size:1em;
    line-height: 1.5em;
    letter-spacing:0.05em;
    text-align: justify;
}

.p-tsd{/*standard = général + color*/
    color: #414141!important;
}

.p-bigHype{/*not enough hype to be a title though*/
    font-size:1.5em;
}

.centered{
    text-align: center;
}

.leftAligned{
    text-align: left;
}

.rightCentred{
    text-align: right;
}

blockquote{/*cute « » for cuties */
    clear: both;
    display: block;
    font-size: 1.1em;
    font-style: italic;
    margin: -20px auto 20px;
    max-width: 40em;
    padding: 20px;
    border: none;
    /*text-indent: -0.7em;*/
}
blockquote::before{ content: "« "; }
blockquote::after{ content: " »"; }
blockquote::before, blockquote::after{ color: #00ffcc; }

.italic{font-style:italic;}

.legend::after{content:"↵"; margin-left: 10px;}
.legend, .didascalie{
    overflow:hidden;
    width:100%;
    max-width: 100%;
    font-size:12px;
    font-style: italic;
    margin: -38px 0 20px;
    padding:10px;
    text-align:right;
    border-bottom: 1px dotted #ece8e5;
}
.didascalie, .didascalie p{
    border: none!important;
}

.misEnValeur{
    background: #ece8e5;
    margin: 0 1em 1em 0!important;
    overflow: inherit!important;
    height: auto!important;
    border-top: 2px solid black;
    border-right: 1px solid #00ffcc;
}
.misEnValeur p{
    margin: 0 0 20px;
    padding: 5%;
    max-width: 100%;
    letter-spacing: 0.05em;
    line-height: 1.5em;
    text-align: left;
    color: darkgray;
    text-shadow: 1px 1px 0px white;
}
.misEnValeur + div {
    padding: 5%;
    text-align: justify; 
}
.misEnValeur + div > p{
    display: contents!important;
}

.tiq{
    padding: 5px 8px;
    margin: 20px auto;
    width: auto; max-width: fit-content;
    text-align: center;
}

#fin{
    width: 200px;
    font-size: 2.5em;
    margin: 0 auto;
    padding-bottom: 50px;
    text-align: center;
    text-transform: uppercase;
}




/*** Traitement des images - GLOBAL ***/

.illus{
    margin-bottom: 4%;
    overflow: hidden;
}

.f-right{float: right!important;}
.intext{ margin: 0.3em 1em 0 -1.65em !important;}
.bckImg{
    background-attachment: fixed!important;
    background-size: cover!important;
    background-position: top center!important;
}

.max30,.max20,.max10,
.large30,.large20,.large10,
.demi30,.demi20,.demi10,
.encart30,.encart20,.encart10{
    display:block; overflow:hidden;
    margin:0; padding:0;
    float:left;
    object-fit: cover;
    position:relative;
    z-index:4;
}


img.max30 , img.max20 , img.max10, div.max30 , div.max20 , div.max10{width:100%; min-width: 480px;}/*100%*/
img.large30, img.large20, img.large10, div.large30, div.large20, div.large10{width:75%; min-width: 360px;}/*75%*/
img.demi30, img.demi20, img.demi10, div.demi30, div.demi20, div.demi10{width:50%; min-width: 240px;}/*50%*/
img.encart30, img.encart20, img.encart10, div.encart30, div.encart20, div.encart10{width:25%; min-width: 120px;}/*25%*/

img.max30,  img.large30,  img.demi30,  img.encart30, div.max30,  div.large30,  div.demi30,  div.encart30{height:480px;}/*30em*/
img.max20,  img.large20,  img.demi20,  img.encart20, div.max20,  div.large20,  div.demi20,  div.encart20{height:320px;}/*20em*/
img.max10,  img.large10,  img.demi10,  img.encart10, div.max10,  div.large10,  div.demi10,  div.encart10{height:160px;}/*10em*/


/********* RESPONSIVE ***********/

@media screen and (max-width: 530px){
    /*body{border-top: 10px solid greenyellow;}*/

}


/* RESPONSIVE BABE UwU */

@media (min-width: 700px)/* menu haut pied de page*/
.footer-top {
    padding: 1.7em 0;
}

footer *{color: white; font-size: 0.9em; text-align: left;}

ul.footer-social li {
    margin: 0.5rem 0 0 1.5rem;
}
.footer-social a {
    background-color: #00ffcc;
    height: 3rem;
    width: 3rem;
}
.social-icons a, #site-footer button:not(.toggle), #site-footer .button, #site-footer .faux-button, #site-footer .wp-block-button__link, #site-footer .wp-block-file__button, #site-footer input[type="button"], #site-footer input[type="reset"], #site-footer input[type="submit"] {
    background-color: #00ffcc;
}

.social-icons a {
    align-items: center;
    background: transparent;
    border-radius: 50%;
    color: #fff;
    display: flex;
    height: 4.4rem;
    justify-content: center;
    padding: 0;
    text-decoration: none;
    transition: transform 0.15s ease-in-out;
    width: 4.4rem;
}

/* POST page */

.powered-by-wordpress{display:none;}

@media (min-width: 700px){
    .post-inner {
        padding-top: inherit;
    }    
    .entry-content {
        font-size: inherit;
    }
   .entry-content h1, .entry-content h2, .entry-content h3 {
    margin: 0;
    } 
    .entry-content p, .entry-content li {
        line-height: inherit;
    }
    .entry-content p, .entry-content li {
        line-height: inherit;
    }

}

.post-inner {
    padding-top: inherit;
    margin: -220px auto 0;
    width: 100%;
    max-width: 1024px;
}

.entry-content {
    letter-spacing:  inherit;
}
.entry-content {
    line-height:  inherit;
}
.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
    max-width: inherit;
    width: inherit;
}

entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 {
    margin:0;
}


/* hr */

cite, figcaption, .wp-caption-text, .post-meta, .entry-content .wp-block-archives li, .entry-content .wp-block-categories li, .entry-content .wp-block-latest-posts li, .wp-block-latest-comments__comment-date, .wp-block-latest-posts__post-date, .wp-block-embed figcaption, .wp-block-image figcaption, .wp-block-pullquote cite, .comment-metadata, .comment-respond .comment-notes, .comment-respond .logged-in-as, .pagination .dots, .entry-content hr:not(.has-background), hr.styled-separator, :root .has-secondary-color {
    color: #ece8e5;
}

/* background page accueil */
.home *{ color:#666; }

.titreHome{
    color: white !important;
    text-shadow: 1px 1px #00ffcc; !important;
    padding: 5px 8px !important;
    margin: 20px auto !important;
    width: auto !important;
    max-width: fit-content !important;
}


.entry-header{
    opacity: 0.85;
    position: relative;
    z-index: -2;
}

@media (min-width: 700px)
.footer-credits {
    display: flex;
    width: 200px;
}