@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800&family=EB+Garamond:wght@400;600&display=swap');
html,body{margin:0;padding:0}
body{background:url('background_papier.png') center top/cover no-repeat fixed;color:#222;font-family:'EB Garamond',serif}
.newspaper{max-width:1450px;margin:10px auto;padding:20px 70px;background:transparent}
nav{display:flex;justify-content:center;gap:20px;border-top:4px double #222;border-bottom:4px double #222;padding:8px 0;margin-bottom:18px}
nav a{text-decoration:none;color:#111;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.masthead h1,.headline h2,h3{font-family:'Cinzel',serif;text-transform:uppercase;letter-spacing:2px}
.masthead{border:4px double #222;padding:10px;margin-bottom:12px;text-align:center}
.headline{text-align:center;border-bottom:3px solid #222;margin-bottom:20px}
.columns{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px}
.article{font-size:1.15rem;line-height:1.5;text-align:justify}
.article{border-left:1px solid #333;padding-left:18px}
.article:first-child{border-left:none;padding-left:0}
.dropcap:first-letter{font-size:3.8rem;float:left;line-height:.8;padding-right:6px;font-family:'Cinzel',serif}
.photo-main,.photo-inline{border:4px double #222;padding:8px;min-height:220px;margin:15px 0}
.rule{border-top:4px double #222;margin:12px 0}
footer{border-top:4px double #222;text-align:center;padding:10px;margin-top:20px}


/* Responsive */
*{box-sizing:border-box}

img{max-width:100%;height:auto}

@media (max-width: 1024px){
  .newspaper{padding:20px 30px}
  .columns{grid-template-columns:1fr 1fr;gap:20px}
}

@media (max-width: 768px){
  .newspaper{padding:15px}
  nav{
    flex-wrap:wrap;
    gap:10px;
  }
  nav a{
    font-size:.9rem;
  }
  .columns{
    grid-template-columns:1fr;
    gap:15px;
  }
  .article{
    border-left:none;
    padding-left:0;
    border-top:1px solid #333;
    padding-top:12px;
  }
  .article:first-child{
    border-top:none;
    padding-top:0;
  }
  .photo-main,.photo-inline{
    min-height:140px;
  }
  .masthead h1{
    font-size:2rem;
  }
  .headline h2{
    font-size:1.5rem;
  }
}

@media (max-width: 480px){
  .newspaper{padding:10px}
  body{
    background-attachment:scroll;
  }
  nav a{
    display:block;
    width:100%;
    text-align:center;
  }
  .article{
    font-size:1rem;
  }
  .dropcap:first-letter{
    font-size:2.8rem;
  }
}

.journal-top{text-align:center;border-top:2px solid #333;border-bottom:2px solid #333;padding:10px 0;margin:15px 0}
.journal-meta{display:flex;justify-content:space-between;font-size:.8rem;margin-bottom:10px}
.journal-title{font-size:5rem;font-weight:bold;font-style:italic;line-height:1}
.journal-subtitle{font-size:1.1rem;letter-spacing:1px;margin-top:8px}
@media(max-width:768px){
 .journal-meta{display:block;text-align:center}
 .journal-meta span{display:block;margin:2px 0}
 .journal-title{font-size:3rem}
 .journal-subtitle{font-size:.9rem}
}


/* Ajustements style journal ancien */
.photo-main{
    border:none !important;
    padding:0 !important;
    min-height:0 !important;
    background:none !important;
    text-align:center;
    font-style:italic;
}

.journal-top{
    border-top:3px double #222;
    border-bottom:3px double #222;
    padding:6px 0 12px;
}

.journal-title{
    font-family:'Cinzel',serif;
    font-size:7rem;
    letter-spacing:1px;
}

.columns{
    border-top:1px solid #444;
    padding-top:15px;
}

.article h3{
    font-size:2.4rem;
    margin:.2em 0;
}