html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* FONT */

.playfair-<uniquifier> {
	font-family: "Playfair", serif;
	font-optical-sizing: auto;
	font-weight: <weight>;
	font-style: normal;
	font-variation-settings:
	"wdth" 100;
}
h1, h2, h3, H4 {
	font-family: 'PlayFair Display', serif;
}

/* ------------------------------------------------------- */


body {
	/* background-color: #D6DAD7; */
	background-color: white;
	font-family: "Playfair", serif;
	font-optical-sizing: auto;
	font-weight: <weight>;
	font-style: normal;
	font-variation-settings:
	"wdth" 100;
	color: #1E1E1E;
}
#container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

#content {
	margin: auto;
}


h1{
	font-weight: 400;
	margin:  auto 0 7px auto;
}

strong {
	font-weight: 600;
	color: #1E1E1E;
}

em {
	font-style: italic;
}
.uppercaseNumbers {
	-moz-font-feature-settings: "lnum";
	-webkit-font-feature-settings: "lnum";
	font-feature-settings: "lnum";
}

/* MEDIA QUERIES */

/* Big screens */
@media screen and (min-width: 601px) {
    body { font-size: 1.2em; }
    #nom { font-size: 2.2em; margin-bottom: 0.5em;}
    #logo, #logo2 { font-size: 4vw; }
    .description { margin:  auto 0 1.0vw auto;}
    .biography { width: 580px; margin: auto;}
    .close { margin: 2vw 0 3vw 0; }
    .actualite-content,  .detail-actualite{line-height: 1.3em}
    #container-infos { 
        flex-direction: row; 
        position: relative; /* Assurez-vous que l'élément parent est correctement positionné */
    }

    #content-infos { width: 800px; }
    
    /* Portrait sticky uniquement sur desktop */
    #portrait {
        flex-grow: 1;
        align-self: flex-start;
        width: 70%;
        top: 20px; /* Distance par rapport au haut de l'écran */
        z-index: 10; /* Assurez-vous que l'image reste au-dessus des autres éléments */
        position: -webkit-sticky; /* Pour Safari */
        position: sticky; /* Pour les autres navigateurs */
    }

    #portrait img {
        width: 100%;
        margin: 0 0 3% 0;
        border-radius: 8px; /* Ajustez selon vos préférences */
    }

    .biography h1, .gros-titre { font-size: 1.8em;}
}

/* Small screens */
@media screen and (max-width: 600px) {
    body { font-size: 4.5vw;}
    #nom { font-size: 8vw; margin-bottom: 3.0vw;}
    #logo, #logo2 { font-size: 8vw; }
    .description { margin:  auto 0 2.0vw auto;}
    .biography {margin: auto; padding: 3.5vw 0 10vw 0;}
    .biography p, .actualite-content {line-height: 1.4em;}
    .close { margin: 20px 0 8vw 0;}
    #container-infos { flex-direction: column; }
    #content-infos { width: 80%; }

    /* Portrait statique sur mobile */
    #portrait img { 
        margin: 30px 4% 0 0; 
        position: static; /* Désactivez sticky pour mobile */
    }

    .biography h1, .gros-titre  { font-size: 6vw;}
}


/* -------------- */

#nom {letter-spacing: 0.02em;}

.description {
	font-family: "Playfair", serif;;
	font-weight: 400;
	line-height: 1.35em;
	letter-spacing: 0.02em;
}

#header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: baseline;
	margin:  10px 20px 10px 20px;
}

a {
	color: #1E1E1E;
	text-decoration: none;
}
a:hover {
	color: #FC6951;
	border-bottom: 1px solid #FC6951;
}

#content {
	text-align: center;
}

#logo {
	font-family: 'PlayFair Display', serif;
	font-weight: 700;
	text-align: left;
	display: inline-block;

}
#logo2 {
	font-family: 'PlayFair Display', serif;
	font-weight: 400;
	text-align: left;
	display: inline-block;
}
#footer {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin:  10px 20px 20px 20px;
}

#footer hr {
	margin: 10px 20px 0 6px ;
	border:  0.5px solid #1E1E1E;
	width: 100%;
}

.TitreArticle {
	font-size: 20px;
	line-height: 28px;
}

.publication {
	
}


/* Popup box BEGIN ----------------------*/
#content-infos {
	margin: auto;
}

#container-infos {
	display: flex;
	column-gap: 40px;
	padding-bottom: 60px;
}

#portrait {
	flex-grow: 1;
	align-self: flex-start;
	width: 70%;
	top: 20px; /* Distance par rapport au haut de l'écran */
	z-index: 10; /* Assurez-vous que l'image reste au-dessus des autres éléments */
}
#portrait img {
	width: 100%;
	margin: 0 0 3% 0;
	border-radius: 8px; /* Ajustez la valeur selon vos préférences */
}

.close {
	border-bottom:  1px solid #1E1E1E;
	display: inline-block;
}

.biography {
	flex-grow: 1;
}

.biography h1, .gros-titre {
	font-weight: 700;
	margin-bottom: 0.6em;
}
.biography h2 {
	margin-bottom: 1.2em;
}

.biography p {
	margin-bottom: 0.8em;
	line-height: 1.6em;
}

.menu {
	display: flex;
	column-gap: 20px;
}

.readingText {
	font-size: 1.0em;
	line-height: 1.6em;
}

.readingText h1 {
	font-size: 1.6em;
	line-height: 2.2em;
}

.readingText h2 {
	font-size: 1.4em;
	line-height: 2.0em;
	margin-bottom: 0.4em;
}

.readingText p {
	margin-bottom: 1.0em;
}
/* Popup box END ----------------------*/

/* Actualités ----------------------*/


.actualite {
	padding: 0 0 48px 0;
	margin:  44px 0 0 0;
	border-bottom: 1px solid #BCBCBC;
}

.actualite h1 {
	font-size: 21px;
	line-height: 28px;
}

.detail-actualite {
	margin: 0.6em 0 0.5em 0;
	color: #7a7a7a;
}

.actualite .actualite-content {
	color: #606060;
	margin-bottom: 20px;
}


/* Style pour le bouton */
.btn-lire {
	color: #606060;
	border-bottom: 1px solid #606060;
	display: inline-block;
	position: relative;
}


.btn-lire:hover {
	color: #FC6951;
	border-bottom: 1px solid #FC6951;
	display: inline-block;
}

.btn-lire:hover::before {
	color: #FC6951; /* Le symbole change de couleur au survol */
}