@font-face {
    font-family: "playfair_displayregular";
    src: url('font/playfairdisplay-regular.woff2') format('woff2'),
         url('font/playfairdisplay-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "playfair_displayblack";
    src: url('font/playfairdisplay-black.woff2') format('woff2'),
         url('font/playfairdisplay-black.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
 @font-face {
    font-family: "playfair_display_scbold";
    src: url('font/playfairdisplaysc-bold.woff2') format('woff2'),
         url('font/playfairdisplaysc-bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/* Règles de dimensionnement des boîtes */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Retirer le rembourrage (zone de remplissage) par défaut */
ul[class],
ol[class] {
	padding: 0;
}

/* Retirer les marges par défaut */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
	margin: 0;
}

/* Définir les défauts élémentaires du corps */
body {
	min-height: 100vh;
	scroll-behavior: smooth;
	text-rendering: optimizeSpeed;
	line-height: 1.5;
    font: inherit;
    font-size: 100%; 
}
html {
  /* Keep text scaling on mobile sane; do not disable user scaling behaviors */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Improve readability without taking control away from components */
  line-height: 1.5;
  /* Respect user’s font settings; set a system-first fallback */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

/* Retirer les styles de liste sur les éléments ul, ol qui ont un attribut class */
ul[class],
ol[class] {
	list-style: none;
}

/* Les éléments a qui n'ont pas de classes reçoivent les styles par défaut */
a:not([class]) {
	text-decoration-skip-ink: auto;
}
/* Rendre l'utilisation d'images plus simple */
img {
	max-width: 100%;
	display: block;
     height: auto;
}
/* Cadence et rythme naturels pour les éléments enfants d'éléments article par défaut */
article > * + * {
	margin-top: 1em;
}
/* Hérite les règles typographiques pour les éléments input et button */
input,
button,
textarea,
select {
	font: inherit;
    }
/* Retire toutes les animations et transition pour les personnes qui préfèrent ne pas les voir */
@media (prefers-reduced-motion: reduce) {
	    * {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	    }
    }   

/*** Page ***/

body{
    max-width: 3840px;
    margin: 0 auto;
    font-family: "playfair_displayregular", serif;
    font-size: 1.5rem;
    }

img{
    margin: 0 auto; 
    }
h1, h2{
    color: #387070;
    font-weight:400;
    font-family: "playfair_display_scbold", serif;
    }
h1{
    font-size: 2.5rem;
    margin: 1rem 0 2rem;
}
h2{ 
    font-size: 2rem; 
}

.header-txt, .main, .footer{max-width: 2014px; margin: 0 auto;}
.logo{background: center / contain no-repeat url(img/Image-Principale.jpg)}

.center{
    text-align: center;
    }
.center.title{
    padding: 1.5rem 0 2rem;
    }
.base, .illus, .deco, .manga{
    margin: 2rem 11.5rem 4rem;
    }
.footer{
    font-weight:400;
     margin: 2rem auto;
    text-align:center;
    }
.foot-link{
    color: #387070;
    }
.foot-link:hover, .foot-link:active{
    color: #2b6c69;
    }
p{
    margin-bottom: 1rem;
    } 
@media screen and (max-width: 1000px){
    body{font-size: 1rem;}
    .header-txt, .base, .illus, .deco, .manga{
        margin-right: 1.5rem;
        margin-left: 1.5rem;
    }
}  
@media screen and (min-width: 1001px){
   body{font-size: 1.5rem}
   h1{font-size:2.7rem}
   
    header h1, header p { 
        padding-left: 1rem; padding-right: 1rem;
        }
    .base, .illus, .deco, .manga{
        margin-right: 6rem;
        margin-left: 6rem;
    }
    .center.title{
    padding-top: .5rem;
    }
}