/* =============================================
   BASE & PAPIER
============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --paper:      #f4edd8;
    --paper-mid:  #ece1c2;
    --paper-dark: #d9ceaf;
    --ink:        #1c1208;
    --ink2:       #2e200e;
    --red:        #8b1a1a;
    --gold:       #7a5c1e;
    --gold-light: #b8924a;
    --rule:       #c0a060;
    --rule-light: rgba(160,120,40,0.25);
    --muted:      #5a4020;
}

body {
    background: var(--paper-dark);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
    min-height: 100vh;
    font-family: 'IM Fell English', Georgia, serif;
    color: var(--ink);
    padding: 2rem 1rem 4rem;
}

/* =============================================
   CONTENEUR JOURNAL
============================================= */
.journal-container {
    max-width: 860px;
    margin: 0 auto;
    background: var(--paper);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    box-shadow: 0 6px 48px rgba(0,0,0,0.35), 0 1px 4px rgba(0,0,0,0.2);
    padding: 0;
}

/* =============================================
   EN-TÊTE — IDENTIQUE À L'ORIGINAL
============================================= */

/* Nouveau conteneur pour aligner logo + titre */
.header-main {
    display: flex;
    align-items: center;    /* Aligne verticalement au centre */
    justify-content: center; /* Centre l'ensemble dans la page */
    gap: 20px;               /* Espace entre le logo et le titre */
    padding: 2rem 2rem 0rem;
}

/* On ajuste la classe .logo existante */
.logo {
    padding: 0;             /* On retire le padding qui n'est plus nécessaire ici */
    text-align: left;       /* Aligne l'image à gauche du conteneur flex */
}

/* On ajuste le titre pour qu'il ne force plus le centrage seul */
.journal-container > .header-main > h1 {
    font-family: "Special Elite", system-ui;
    font-size: clamp(2.4rem, 7vw, 4.2rem);
    text-align: left;       /* Le texte s'aligne à gauche, contre le logo */
    padding: 0;             /* On retire les paddings latéraux gênants */
    margin: 0;
}

.logo img {
    width: 150px;
    height: 150px;
    object-fit: contain;
    filter: sepia(60%) brightness(0.55) contrast(1.2);
    opacity: 0.85;
}

/* Titre principal */
.journal-container > h1 {
    font-family: "Special Elite", system-ui;
    font-size: clamp(2.4rem, 7vw, 4.2rem);
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    color: var(--ink);
    line-height: 1;
    padding: 0 2rem;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.12);
}

/* Sous-titre "Journal Hebdomadaire — date" */
.subtitle {
    font-family: 'IM Fell English', Georgia, serif;
    font-style: italic;
    font-size: 1rem;
    text-align: center;
    color: var(--muted);
    letter-spacing: 0.06em;
    padding: 0.3rem 2rem 0;
}

/* "Toute la vérité ! Ou presque..." */
.journal-container > h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.15rem;
    font-weight: 700;
    font-style: italic;
    text-align: center;
    color: var(--red);
    letter-spacing: 0.04em;
    padding: 0.4rem 2rem 0;
}

/* Filets décoratifs encadrant l'en-tête */
.header-rules {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 0.7rem 2rem 0;
}
.rule-thick { border: none; border-top: 3px double var(--ink); }
.rule-thin  { border: none; border-top: 1px solid var(--rule); }

/* Bandeau de méta-infos (Vol., N°, Prix...) */
.masthead-ribbon {
    background: var(--ink);
    color: rgba(255,255,255,0.6);
    font-family: 'Special Elite', monospace;
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 6px 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    flex-wrap: wrap;
    margin-top: 0.6rem;
}
.ribbon-sep { color: var(--gold-light); opacity: 0.7; }

/* =============================================
   IMAGE CENTRALE (bannière illustrée)
============================================= */
.image-center {
    text-align: center;
    margin-top: 20px;
    border: 3px inset black;
    background: var(--paper);
    height: 200px;
    overflow: hidden;
}

.image-center img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-1930 {
    filter: grayscale(100%) contrast(140%) brightness(90%);
    background: url("https://www.transparenttextures.com/patterns/asfalt-light.png");
}

.IMG-Rubrique {
    filter: grayscale(90%) contrast(100%) brightness(90%);
    background: url("https://www.transparenttextures.com/patterns/asfalt-light.png");
    width: 100%;
    height: auto;
    cursor: zoom-in;margin-bottom: 0.8rem;
}

.IMG-Rubrique-l {
    filter: grayscale(90%) contrast(100%) brightness(90%);
    background: url("https://www.transparenttextures.com/patterns/asfalt-light.png");
    width: 100%;
    height: auto;
    cursor: zoom-in;
}

.IMG-article {
    filter: grayscale(90%) contrast(100%) brightness(90%);
    background: url("https://www.transparenttextures.com/patterns/asfalt-light.png");
    width: 100%;
    height: auto;
    margin-bottom: 0;
    cursor: zoom-in;
}

.IMG-article-small-left {
    filter: grayscale(90%) contrast(100%) brightness(90%);
    background: url("https://www.transparenttextures.com/patterns/asfalt-light.png");
    width: 50%;
    height: auto;
    margin: 0 1rem 0.6rem 0;
    float: left;
    cursor: zoom-in;
}

.IMG-article-small-right {
    filter: grayscale(90%) contrast(100%) brightness(90%);
    background: url("https://www.transparenttextures.com/patterns/asfalt-light.png");
    width: 50%;
    height: auto;
    margin: 0 0 0.6rem 1rem;
    float: right;
    cursor: zoom-in;
}

/* =============================================
   RÈGLE SÉPARATRICE AVANT LE CORPS
============================================= */
.body-rules {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 1rem 2rem 0;
}

/* =============================================
   CORPS — SECTIONS
============================================= */
.page-body {
    padding: 0 2rem 2rem;
}

/* Titre de section */
.section {
    margin-top: 1.4rem;
}

.section > h3,
.section-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    text-align: center;
    color: var(--ink);
    border-top: 3px double var(--ink);
    border-bottom: 3px double var(--ink);
    padding: 4px 0;
    margin-bottom: 0.9rem;
}

/* Image principale d'article */
.article-princip {
    float: right;
    width: 38%;
    max-width: 280px;
    margin: 0 0 0.8rem 1.2rem;
    filter: grayscale(90%) contrast(100%) brightness(90%);
    background: url("https://www.transparenttextures.com/patterns/asfalt-light.png");
    cursor: zoom-in;
}

/* Lettre capitulaire */
.article-body > p:first-of-type::first-letter,
.section > p:first-of-type::first-letter {
    float: left;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 3.4rem;
    font-weight: 900;
    line-height: 0.72;
    margin: 0.04em 0.1em 0 0;
    color: var(--ink);
}

.author {
    font-family: 'Special Elite', monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted);
    margin-bottom: 0.4rem;
}

.citation {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 0.9rem;
    font-style: italic;
    color: var(--muted);
    margin-top: 0.4rem;
    margin-bottom: 0.8rem;
    cursor: pointer;
}

.citation.highlight {
    color: var(--red);
    font-weight: 700;
    text-shadow: 1px 1px 0 rgba(255,0,0,0.15);
}

.citation_special {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 0.9rem;
    font-style: italic;
    text-shadow: 1px 1px 0 rgba(255, 0, 0, 0.133);
    margin-top: 0.4rem;
    margin-bottom: 0.8rem;
    border-left: 3px solid var(--red);
    padding-left: 1rem;
    background-color: rgba(255, 0, 0, 0.05);
} 

.list_p {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--ink2);
    margin-left: 1.4rem;
    margin-bottom: 0.6em;
}

.list_np {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--ink2);
    margin-left: 1.4rem;
    margin-bottom: 0.6em;
}

.leave-website {
    font-family: 'Special Elite', monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--red);
    margin-top: 0.8rem;
    margin-bottom: 0.4rem;
}

.hidding-msg {
  font-family: 'Special Elite', monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--red);
  margin-top: 0.8rem;
  margin-bottom: 0.4rem;
  opacity: 0.7;
}

.note_p {
    font-family: 'IM Fell English', Georgia, serif; /* Même police que le reste du texte */
    font-size: 0.7rem; /* Très petit */
    font-style: italic; /* Italique */
    color: var(--muted); /* Couleur discrète (comme tes citations) */
    line-height: 1.4; /* Un peu serré pour gagner de la place */
    text-align: left; /* Aligné à gauche (ou "justify" si tu préfères) */
    margin-top: 0.4em; /* Espacement réduit avant la note */
    margin-bottom: 0.4em; /* Espacement réduit après la note */
    padding-left: 0.5em; /* Petit décalage à gauche pour aérer */
    hyphens: auto; /* Césure automatique si besoin */
}

/* Texte courant */
.section p,
.article-body p,
.column p {
    font-family: 'IM Fell English', Georgia, serif;
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--ink2);
    text-align: justify;
    hyphens: auto;
    margin-bottom: 0.6em;
}

/* Filet après la zone article principal */
.section-rule {
    border: none;
    border-top: 1px solid var(--rule);
    margin: 1rem 0;
    clear: both;
}

/* Colonnes */
.columns {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: 0;
    margin-top: 0.5rem;
}
.col-divider {
    background: var(--rule);
    margin: 0 1.2rem;
}
.column:first-child { padding-right: 0.5rem; }
.column:last-child  { padding-left: 0.5rem; }

.column h4 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1rem;
    font-weight: 700;
    font-style: italic;
    color: var(--ink);
    border-bottom: 1px solid var(--rule-light);
    padding-bottom: 3px;
    margin-bottom: 0.5rem;
    margin-top: 0.9rem;
}
.column h4:first-child { margin-top: 0; }

/* Encadré */
.infobox {
    border: 2px solid var(--ink);
    padding: 0.7rem 0.9rem;
    margin: 0.9rem 0;
    background: var(--paper-mid);
    clear: both;
}
.infobox-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 0.85rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-align: center;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 4px;
    margin-bottom: 6px;
    color: var(--ink);
}

/* =============================================
   BOÎTE QUESTION-RÉPONSE (inspirée de l'infobox)
============================================= */
.qr-box {
    border: 2px solid var(--ink);
    padding: 0.7rem 0.9rem;
    margin: 0.9rem 0;
    background: var(--paper-mid);
    clear: both;
}

.qr-box-title img {
    width: 1em;
    height: 1em;
    object-fit: cover; /* Remplace 'contain' pour éviter les marges internes */
    vertical-align: baseline;
    margin: 0 0.1em;
    filter: grayscale(90%) contrast(100%) brightness(90%);

    /* Bordure collée */
    border: 1px solid var(--ink);
    display: inline-block;
    line-height: 1;
    background: var(--paper); /* Fond pour combler les éventuels pixels transparents */

    cursor: pointer;
}

.qr-box-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 0.85rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-align: center;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 4px;
    margin-bottom: 6px;
    color: var(--ink);
}

.qr-question {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 0.9rem;
    font-weight: 700;
    font-style: italic;
    color: var(--ink);
    margin-bottom: 0.4rem;
    line-height: 1.4;
}

.qr-answer {
    font-family: 'IM Fell English', Georgia, serif;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--ink2);
    margin-bottom: 0.6em;
    text-align: justify;
    hyphens: auto;
}

.qr-separator {
    border: none;
    border-top: 1px solid var(--rule-light);
    margin: 0.5rem 0;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

/* Citation mise en valeur */
.pullquote {
    border-top: 3px double var(--ink);
    border-bottom: 3px double var(--ink);
    padding: 0.7rem 1rem;
    margin: 1rem 0;
    text-align: center;
    clear: both;
    cursor: pointer;
}

.pullquote.highlight {
    border-color: var(--red);
    color: var(--red);
    font-weight: 700;
    text-shadow: 1px 1px 0 rgba(255, 0, 0, 0.432);
}

.pullquote p {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 1.05rem !important;
    font-style: italic;
    font-weight: 700;
    color: var(--ink) !important;
    line-height: 1.35 !important;
    text-align: center !important;
}
.pullquote p::first-letter { float: none; font-size: inherit; line-height: inherit; margin: 0; }

.legende_IMG {
    font-family: 'IM Fell English', Georgia, serif;
    font-size: 0.75rem;
    font-style: italic;
    color: var(--muted);
    text-align: center;
    margin-top: -0.4rem;
    margin-bottom: 0;
}

.censored {
    /* Masquage visuel */
    background-color: black;
    color: transparent; /* Texte transparent */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

    /* Empêche le surlignage pendant la sélection */
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;

    /* Conserve l'espace occupé par le texte */
    white-space: pre; /* Préserve les espaces et sauts de ligne */
    display: inline-block;
    position: relative;
    cursor: default;
}

/* Barre noire pour simuler la censure */
.censored::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: black;
    z-index: 1;
    pointer-events: none; /* Permet de cliquer à travers (optionnel) */
}

/* Style pour le texte barré */
.barred-text {
    position: relative;
    display: inline; /* Pour que le texte reste dans le flux */
    color: var(--ink2); /* Couleur du texte (optionnel) */
}

.barred-text::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%; /* Positionne la ligne au milieu du texte */
    height: 1px; /* Épaisseur de la barre */
    background: var(--ink); /* Couleur de la barre */
    transform: translateY(-50%); /* Centre verticalement la barre */
}

/* =============================================
   MODAL POUR AGRANDIR LES IMAGES
============================================= */
#image-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

#image-modal img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    cursor: default;
    filter: grayscale(90%) contrast(100%) brightness(90%);
    background: url("https://www.transparenttextures.com/patterns/asfalt-light.png");
}

.close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.8);
    color: var(--ink);
    border: none;
    padding: 10px 15px;
    font-size: 24px;
    cursor: pointer;
    border-radius: 5px;
    z-index: 1001;
}

.close-btn:hover {
    background: rgba(255, 255, 255, 1);
}

/* Ornement */
.orn {
    text-align: center;
    color: var(--gold);
    font-size: 1rem;
    margin: 1rem 0 0.2rem;
    letter-spacing: 0.3em;
}

/* =============================================
   PIED DE PAGE
============================================= */
.footer {
    background: var(--ink);
    color: rgba(255,255,255,0.5);
    text-align: center;
    padding: 0.7rem 2rem;
    font-family: 'Special Elite', monospace;
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-top: 1.5rem;
}

/* =============================================
   RESPONSIVE
============================================= */
@media (max-width: 600px) {
    .header-main { flex-direction: column; gap: 12px; }
    .header-main > h1 { display: none; }
    body { padding: 0.5rem 0.25rem 3rem; }
    .page-body, .logo, .image-center, .body-rules,
    .header-rules, .masthead-ribbon { padding-left: 1rem; padding-right: 1rem; }
    .journal-container > h1, .journal-container > h2, .subtitle { padding-left: 1rem; padding-right: 1rem; }
    .columns { grid-template-columns: 1fr; }
    .col-divider { display: none; }
    .column:first-child { padding-right: 0; border-bottom: 1px solid var(--rule); padding-bottom: 1rem; margin-bottom: 1rem; }
    .column:last-child { padding-left: 0; }
    .article-princip { float: none; width: 100%; max-width: 100%; margin: 0 0 1rem; }
}