:root{
  --black:#040404;
  --paper:#f1eadb;
  --paper-dark:#e0d7c7;
  --ink:#161616;
  --muted:#5a554d;
  --line:rgba(0,0,0,.34);
  --cyan:#18cddd;
  --orange:#b96822;
}

*{box-sizing:border-box}

body{
  margin:0;
  min-height:100vh;
background:
  radial-gradient(circle at top left, rgba(210,205,195,.18), transparent 34%),
  radial-gradient(circle at bottom right, rgba(185,104,34,.08), transparent 32%),
  linear-gradient(135deg,#020202,#111216 55%,#050505);
  color:var(--ink);
  font-family: Georgia, "Times New Roman", serif;
}

/* INDEX */

.home-page .stage{
  min-height:auto;
  padding-bottom:10px;
}

.home-page .paper{
  padding-bottom:22px;
}

.home-page .headline p{
  columns:1;
  font-size:18px;
}

.home-page .front-layout{
  border-bottom:none;
  padding-bottom:0;
}

.home-page .site-footer{
  margin-top:4px;
  padding-top:8px;
  padding-bottom:10px;
}

/* BOUTON INDEX */

.home-enter-wrapper{
  margin-top:45px;
}

.home-enter-btn{
  display:block;
position:relative;
left:180px;
  width:100%;
  max-width:360px;

  padding:15px 22px;

  font-size:14px;
  letter-spacing:.14em;
  text-transform:uppercase;

  border:1px solid rgba(0,0,0,.7);

  background:#111;
  color:#f5f5f5;

  transition:.18s ease;
}

.home-enter-btn:hover{
  transform:translateY(-1px);
  background:#1a1a1a;
}

@media (max-width:860px){
.home-page .home-enter-wrapper{
width:100%;
display:flex;
justify-content:center;
}
.home-page .home-enter-btn{
position:relative;
left:0 !important;
margin-left:0 !important;
}
}


/* LOGO */

.logo-title{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    width: 100%;
}

.site-logo{
    max-width: 960px;
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.stage{
  min-height:100vh;
  padding:24px;
}

.header{
  max-width:1240px;
  margin:0 auto 18px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  color:#f5f5f5;
  font-family:Arial,Helvetica,sans-serif;
}

.brand{
  font-size:26px;
  font-weight:800;
  letter-spacing:.08em;
}

.tagline{
  margin-top:5px;
  color:#a9b4b7;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.16em;
}

/* EDITION N° */

.edition{
  color:#C28A4A;
  border:1px solid rgba(200,135,58,.45);
  border-radius:999px;
  padding:8px 13px;
  font-size:12px;
  letter-spacing:.12em;
}

.edition-selector{
  position:relative;
  display:inline-block;
}

.edition-btn{
  color:#c28a4a;
  border:1px solid rgba(213,158,58,.45);
  border-radius:999px;
  padding:8px 13px;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  background:transparent;
  cursor:pointer;
}

.edition-menu{
  position:absolute;
  top:100%;
  right:0;
  min-width:160px;
  background:#f5f0e8;
  border:1px solid rgba(213,158,58,.45);
  border-radius:14px;
  display:none;
  flex-direction:column;
  overflow:hidden;
  z-index:1000;
}

.edition-menu a{
  padding:11px 14px;
  color:#3a2a1d;
  text-decoration:none;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.edition-menu a:hover{
  background:rgba(213,158,58,.12);
}

.edition-selector:hover .edition-menu{
  display:flex;
}

/* PAPIER */

.paper{
  max-width:1240px;
  margin:0 auto;
  background:
    linear-gradient(90deg, rgba(0,0,0,.035) 1px, transparent 1px) 0 0 / 8px 8px,
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.85), transparent 42%),
    linear-gradient(180deg,#faf4e7,var(--paper) 58%,var(--paper-dark));
  border:1px solid rgba(255,255,255,.26);
  border-radius:8px;
  box-shadow:
    0 34px 100px rgba(0,0,0,.68),
    inset 0 0 70px rgba(97,70,36,.12);
  padding:34px;
  position:relative;
  overflow:hidden;
}

.paper:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  opacity:.45;
}

.masthead{
  text-align:center;
  border-bottom:4px double var(--line);
  margin-bottom:24px;
  padding-bottom:18px;
}

/* SEPARATEUR */

.rule{display:none;}
.rule.double{margin-top:14px}

.masthead h1{
  margin:8px 0 4px;
  font-size:clamp(54px,10vw,132px);
  line-height:.82;
  letter-spacing:-.095em;
  text-transform:uppercase;
}

.masthead p{
  margin:0;
  color:var(--muted);
  font-family:Arial,Helvetica,sans-serif;
  font-size:13px;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.front-layout{
  display:grid;
  grid-template-columns:1.58fr .86fr;
  gap:24px;
  border-bottom:1px solid var(--line);
  padding-bottom:24px;
}

.clickable{cursor:pointer;transition:.18s ease}
.clickable:hover{transform:translateY(-2px);filter:contrast(1.08)}

.meta{
  font-family:Arial,Helvetica,sans-serif;
  color:var(--orange);
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:10px;
}

.headline{
  padding-right:24px;
  border-right:1px solid var(--line);
}

.headline h2{
  margin:0;
  font-size:clamp(42px,6.7vw,82px);
  line-height:.88;
  letter-spacing:-.06em;
}

.headline p{
  columns:2;
  column-gap:30px;
  margin:22px 0 0;
  font-size:20px;
  line-height:1.48;
}

.right-news{display:grid;gap:20px}
.news-card{
  border-bottom:1px solid var(--line);
  padding-bottom:18px;
}

.news-card.no-line{
    border-bottom: none;
}

.news-card h3,.mini h3,.submit h3{
  margin:0 0 9px;
  font-size:29px;
  line-height:.98;
  letter-spacing:-.035em;
}
.news-card p,.mini p,.submit p{
  color:#3e3931;
  line-height:1.5;
}

.bottom-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:24px;
}
.bottom-grid article{
  border-right:1px solid var(--line);
  padding-right:22px;
}

.prenom-input{
  width:100%;
  border:1px solid var(--line);
  background:rgba(255,255,255,.42);
  color:var(--ink);
  padding:12px;
  font-family:Arial,Helvetica,sans-serif;
  margin-bottom:10px;
  box-sizing:border-box;
}

.bottom-grid article:last-child{border-right:0}

textarea{
  width:100%;
  min-height:95px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.42);
  color:var(--ink);
  padding:12px;
  font-family:Arial,Helvetica,sans-serif;
  resize:vertical;
}

/* BOUTON */

button{
  margin-top:11px;
  border:1px solid #111;
  background:#111;
  color:#fff;
  padding:11px 16px;
  border-radius:4px;
  cursor:pointer;
  font-family:Arial,Helvetica,sans-serif;
  font-weight:700;
}

.hidden{display:none}

.back{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--line);
  margin:0 0 20px;
}

.opened{
  display:grid;
  grid-template-columns:1.18fr .82fr;
  gap:30px;
}

/* ARTICLE */

.article-main{
  border-right:1px solid var(--line);
  padding-right:30px;
}

.article-main h2{
  margin:0 0 24px;
  font-size:clamp(42px,6vw,82px);
  line-height:.89;
  letter-spacing:-.065em;
}

.article-body p{
  font-size:18px;
  line-height:1.75;
  margin:0 0 16px;
  padding:7px;
  border-radius:4px;
  cursor:pointer;
}

.article-meta{
  margin-top:28px;
  padding-top:0;
  border-top:none;
  font-size:10px;
color:#5F6366;
letter-spacing:.4px;
text-align:right;
opacity:.95;
}

.article-body p:hover{
  background:rgba(24,205,221,.16);
}

.discussion{
  font-family:Arial,Helvetica,sans-serif;
}

.discussion h3{
  margin:0 0 11px;
  color:var(--orange);
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
}

blockquote{
  margin:0 0 24px;
  padding:14px;
  border-left:4px solid var(--cyan);
  background:rgba(24,205,221,.13);
  font-style:italic;
}

.responses{
  display:grid;
  gap:14px;
  margin-top:18px;
}
.response{
  border-top:1px solid var(--line);
  padding-top:12px;
}
.response strong{color:var(--orange)}
.response .quote{
  color:#0a6d77;
  border-left:2px solid var(--cyan);
  padding-left:10px;
  margin:7px 0 9px;
  font-size:13px;
}

/* SUJETS PROPOSÉS CSS */

.sujet-box{
background:#f4efe6;
border:1px solid rgba(0,0,0,0.08);
border-radius:8px;
overflow:hidden;
margin-top:12px;
display:flex;
flex-direction:column;
}

.sujet-line{
border:none;
border-bottom:1px solid rgba(0,0,0,0.06);
padding:10px 12px;
font-size:13px;
font-family:inherit;
background:transparent;
outline:none;
color:#222;
}

.sujet-article{
border:none;
padding:12px;
min-height:70px;
resize:vertical;
font-size:13px;
font-family:inherit;
background:transparent;
outline:none;
color:#222;
}

/* COPYRIGHT */

.site-footer{
text-align:center;
margin-top:12px;
padding:20px 10px;
font-size:12px;
color:#a9b4b7;
letter-spacing:.5px;
}

.footer-link{
color:#C28A4A;
text-decoration:none;
transition:.2s ease;
}

.footer-link:hover{
opacity:.8;
}

/* RESPONSIVE */

@media(max-width:860px){
  .stage{padding:12px}
  .header{flex-direction:column;align-items:flex-start;gap:10px}
  .paper{padding:18px}
  .front-layout,.bottom-grid,.opened{grid-template-columns:1fr}
  .headline,.article-main,.bottom-grid article{
    border-right:0;
    padding-right:0;
    border-bottom:1px solid var(--line);
    padding-bottom:18px;
  }
  .headline p{columns:1;font-size:17px}
  .masthead h1{font-size:52px}
}

@media (max-width: 600px) {
  .edition-selector {
    position: relative;
  }

  .edition-menu {
    top: 100%;
    right: -45px;
    left: auto;
    transform: none;

    width: 160px;
    min-width: 160px;
    z-index: 99999;
  }
}

/* PHP */

.response form{
  margin-bottom:24px;
}

/* PHILO PUB */

body.philopub-page .tagline{
  font-size:12px !important;
}

body.philopub-page .meta{
  font-size:16px !important;
letter-spacing:1px;
}

body.philopub-page .headline p{
  font-size:21px !important;
  line-height:1.4 !important;
}

body.philopub-page .news-card p,
body.philopub-page .mini p,
body.philopub-page .submit p{
  font-size:19px !important;
  line-height:1.35 !important;
}

@media print{

body.philopub-page .tagline{
  font-size:8.5px !important;
}

body.philopub-page .meta{
  font-size:12px !important;
letter-spacing:1px;
}
  body.philopub-page .headline p{
    font-size:17px !important;
    line-height:1.4 !important;
  }

  body.philopub-page .news-card p,
  body.philopub-page .mini p,
  body.philopub-page .submit p{
    font-size:13px !important;
    line-height:1.35 !important;
  }

  body.philopub-page .headline h2{
    font-size:54px !important;
    line-height:1.05 !important;
  }

  body.philopub-page h3{
    font-size:28px !important;
    line-height:1.08 !important;
  }
}


/* ADMIN / MODERATION */

.admin-masthead{
  margin-bottom:0;
}

.admin-masthead + .response{
  border-top:none;
  margin-top:18px;
  padding-top:0;
}

.response form{
  margin-bottom:24px;
}

/* PAGE ACCES MODERATION */

.login-panel{
  max-width:360px;
  margin:36px auto 0;
  text-align:center;
}

.login-panel form{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

.login-panel .prenom-input{
  width:100%;
  max-width:420px;
}

.login-error{
  color:var(--orange);
  font-weight:bold;
  margin-bottom:14px;
}