/* Font Face Declarations */
@font-face {
    font-family: 'Barlow Condensed';
    src: url('../fonts/BarlowCondensed-Light.ttf') format('truetype');
    font-weight: 300;
}

@font-face {
    font-family: 'Barlow Condensed';
    src: url('../fonts/BarlowCondensed-Regular.ttf') format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: 'Barlow Condensed';
    src: url('../fonts/BarlowCondensed-SemiBold.ttf') format('truetype');
    font-weight: 600;
}

@font-face {
    font-family: 'Barlow Condensed';
    src: url('../fonts/BarlowCondensed-Bold.ttf') format('truetype');
    font-weight: 700;
}

@font-face {
    font-family: 'Helvetica Neue LT Std';
    src: url('../fonts/HelveticaNeueLTStd-Blk.otf') format('opentype');
    font-weight: 900;
}

@font-face {
    font-family: 'Helvetica Neue LT Std';
    src: url('../fonts/HelveticaNeueLTStd-BlkIt.otf') format('opentype');
    font-weight: 900;
    font-style: italic;
}

/* Color Variables */
:root {
    /* Ghost custom font support */
    --gh-font-heading: 'Barlow Condensed', sans-serif;
    --gh-font-body: 'Rockwell', serif;

    --color-primary: rgb(206, 15, 63); /* Primary red for general use */
    --color-secondary: rgb(235, 92, 46); /* Secondary orange for general use */
    --color-revue: rgb(206, 15, 63); /* Red for revue tag */
    --color-articles: rgb(235, 92, 46); /* Orange for articles tag */
    --color-evenements: rgb(251, 186, 0); /* Yellow for événements tag */
    --color-archives: rgb(0, 144, 177); /* Blue for archives tag */
    --color-hier: rgb(201, 51, 121); /* Pink for hier tag */
    --color-ouverture: rgb(63, 149, 50); /* Green for ouverture tag */
    --color-recit: rgb(220, 0, 122); /* Magenta for récit tag */
    --color-suivre: rgb(136, 176, 39); /* Light green for suivre tag */
    --color-text: #1a1a1a;
    --color-text-light: #666;
    --color-bg: #ffffff;
    --color-border: #e5e5e5;
}

/* Reset and Base Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
}

body {
    font-family: 'Rockwell', serif;
    font-size: 1.6rem;
    line-height: 1.8;
    color: var(--color-text);
    background-color: var(--color-bg);
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

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

/* Layout */
.site-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-main {
    flex: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem 4rem;
    width: 100%;
}

/* Header and Navigation */
.site-header {
    padding: 4rem 2rem 2rem; /* Reduced bottom padding */
    text-align: center;
    background: white;
    margin-top: 3rem; /* Added vertical margin before logo */
}

.site-logo {
    max-width: 850px;
    height: auto;
    margin: 0 auto 3rem;
}

.site-logo a {
    display: block;
}

.site-logo img {
    width: 100%;
    height: auto;
}

.site-nav {
    text-align: center;
    padding: 2rem 0;
}

.site-nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.site-nav a {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 1.8rem;
    padding: 1rem 2rem;
    background: var(--color-primary);
    border: 2px solid var(--color-primary);
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s;
    display: inline-block;
}

.site-nav a:hover {
    background: white;
    color: var(--color-primary);
    text-decoration: none;
}

.site-nav .nav-current a {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: white;
}

/* Post List - Single Column Layout */
.post-list {
    max-width: 75rem; /* Smaller overall width */
    margin: 2rem auto 0; /* Reduced top margin */
}

.post-item {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-bottom: 4rem; /* Increased from 2rem to add more space between posts */
    position: relative; /* For absolute positioning of tag */
    overflow: visible;
}

.post-item-image {
    width: 100%;
    height: auto;
    background: #fff;
    display: block;
    flex-shrink: 0;
    margin-bottom: 0;
    position: relative;
    /*z-index: 3; /* Above the post background shape */
}

.post-item-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.post-item-image a {
    display: block;
    width: 100%;
}

.post-item-content {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    padding: 1rem 2rem 2rem 1rem; /* Reduced left padding from 2rem to 1rem */
    margin-top: 0;
    position: relative;
}

.post-item-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-left: 3rem; /* Push content to the right to avoid polygon */
    position: relative;
    z-index: 3;
}

.post-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    gap: 2rem; /* Added padding between title and date */
}

.post-item-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 3.5rem; /* Increased from 3rem */
    line-height: 1.2;
    text-transform: uppercase;
    flex: 1;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Allow up to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    position: relative;
}

.post-item-title a {
    color: var(--color-text);
    text-decoration: none;
}

.post-item-title a:hover {
    opacity: 0.8;
    text-decoration: none;
}

/* Tag-based color coding */
.tag-revue .post-item-title a {
    color: var(--color-revue); /* Red for revue */
}

.tag-articles .post-item-title a {
    color: var(--color-articles); /* Orange for articles */
}

.tag-evenements .post-item-title a {
    color: var(--color-evenements); /* Yellow for événements */
}

.tag-archives .post-item-title a {
    color: var(--color-archives); /* Blue for archives */
}

.tag-hier .post-item-title a {
    color: var(--color-hier); /* Pink for hier */
}

.tag-ouverture .post-item-title a {
    color: var(--color-ouverture); /* Green for ouverture */
}

.tag-recit .post-item-title a {
    color: var(--color-recit); /* Magenta for récit */
}

.tag-suivre .post-item-title a {
    color: var(--color-suivre); /* Light Green for suivre */
}

.post-item-excerpt {
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-weight: 900;
    font-size: 3.7rem;
    line-height: 1.5;
    color: var(--color-text-light);
    text-transform: none;
    white-space: pre-line; /* Preserve line breaks from Ghost */
    position: relative;
    z-index: 2; /* Above the background shape */
    max-width: 70%; /* Cap width to prevent overlap with tag */
}

.post-item-meta {
    flex-shrink: 0;
}

.post-item-date {
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-weight: 900;
    font-size: 1.4rem;
    text-transform: uppercase;
    color: var(--color-text-light);
    letter-spacing: 0.05em;
}

/* Algorithmique-style tag in bottom right corner */
.post-item-tag {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-weight: 900;
    font-size: 2.4rem; /* Increased from 1.1rem for better readability */
    text-transform: lowercase;
    letter-spacing: -0.05em; /* Negative spacing to make letters collide */
    color: white;
    background-color: var(--color-text-light);
    padding: 0.8rem 1rem;
    opacity: 0.8;
    line-height: 1;
    display: inline-block;
}

/* Tag color variants matching the title colors */
.tag-revue .post-item-tag {
    background-color: var(--color-revue); /* Red for revue */
}

.tag-articles .post-item-tag {
    background-color: var(--color-articles); /* Orange for articles */
}

.tag-evenements .post-item-tag {
    background-color: var(--color-evenements); /* Yellow for événements */
}

.tag-archives .post-item-tag {
    background-color: var(--color-archives); /* Blue for archives */
}

.tag-hier .post-item-tag {
    background-color: var(--color-hier); /* Pink for hier */
}

.tag-ouverture .post-item-tag {
    background-color: var(--color-ouverture); /* Green for ouverture */
}

.tag-recit .post-item-tag {
    background-color: var(--color-recit); /* Magenta for récit */
}

.tag-suivre .post-item-tag {
    background-color: var(--color-suivre); /* Light Green for suivre */
}

/* Remove title-specific shape - using post-wide shape instead */

/* Title-specific background colors removed - using post-wide shape instead */

/* Typography according to guidelines */
.post-content {
    font-family: 'Rockwell', serif;
    font-size: 1.7rem; /* 8.5pt = ~1.7rem */
    line-height: 1.95rem; /* 9.75pt = ~1.95rem */
}

h1, .h1 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600; /* semibold */
    font-size: 6.1rem !important; /* 41pts */
    line-height: 1.1 !important;
    color: var(--color-primary);
    margin-bottom: 2rem;
}

h2, .h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600; /* semibold */
    font-size: 3.9rem; /* 36pts - 50% larger */
    line-height: 1.4;
    color: var(--color-text);
    margin: 3rem 0 1.5rem;
}

.chapo, .post-excerpt {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 300;
    font-size: 2.2rem;
    line-height: 2.4rem;
    color: var(--color-text-light);
    margin-bottom: 2rem;
}

.signature {
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-weight: 900;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
}

/* Blockquotes and Citations */
blockquote {
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 1.7rem;
    line-height: 1.7rem;
    color: var(--color-text);
    border-left: 4px solid var(--color-primary);
    padding-left: 2rem;
    margin: 2rem 0;
}

/* Single Post */
.post-full {
    max-width: 80rem;
    margin: 0 auto;
}

.post-full-header {
    margin-bottom: 4rem;
}

.post-full-tags {
    margin-bottom: 1rem;
}

.post-full-tags a {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    text-transform: uppercase;
    color: var(--color-primary);
    text-decoration: none;
}

.post-full-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 4.1rem;
    line-height: 1.1;
    color: var(--color-primary);
    margin-bottom: 2rem;
}

.post-full-custom-excerpt {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 300;
    font-size: 1.7rem;
    line-height: 1.7;
    color: var(--color-text-light);
}

.post-full-byline {
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.post-full-image {
    margin: 4rem 0; /* Remove horizontal margins, keep vertical spacing */
    max-width: 100%; /* Full width to match text content */
    width: 100%;
}

.post-full-image img {
    width: 100%;
    height: auto;
}

/* Content Typography */
.post-content {
    text-align: justify;
}

.post-content p {
    margin-bottom: 1rem;
}

.post-content h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 3.6rem; /* 36pts - 50% larger */
    margin: 3rem 0 1.5rem;
}

h3, .h3, .post-content h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 300; /* light */
    font-size: 1.9rem; /* 19pts - larger than body text */
    line-height: 1.95rem; /* Same as post-content paragraphs */
    color: var(--color-text);
    margin: 0 0 2rem; /* Same vertical spacing as body paragraphs */
}

/* Ghost Callout Cards */
.kg-callout-card,
.post-content .kg-callout-card,
.kg-callout-card-blue,
.kg-callout-card-white,
.kg-callout-card-grey,
.kg-callout-card-red,
.kg-callout-card-pink,
.kg-callout-card-purple,
.kg-callout-card-yellow,
.kg-callout-card-green,
.kg-callout-card-accent {
    background: transparent !important;
    border: none !important;
    padding: 1rem 0 !important; /* Reduced by 50% from 2rem */
}

.kg-callout-card .kg-callout-text,
.post-content .kg-callout-card .kg-callout-text,
.kg-callout-card-blue .kg-callout-text,
.kg-callout-card-white .kg-callout-text,
.kg-callout-card-grey .kg-callout-text,
.kg-callout-card-red .kg-callout-text,
.kg-callout-card-pink .kg-callout-text,
.kg-callout-card-purple .kg-callout-text,
.kg-callout-card-yellow .kg-callout-text,
.kg-callout-card-green .kg-callout-text,
.kg-callout-card-accent .kg-callout-text {
    font-family: 'Helvetica Neue LT Std', sans-serif !important;
    font-weight: 900 !important; /* 96 black */
    font-size: 2.7rem !important; /* 42pts - 100% larger (double) */
    line-height: 2.9rem !important; /* 44pts - proportional increase */
    text-transform: lowercase !important; /* force lowercase */
    color: var(--color-primary) !important;
}

.post-content ul,
.post-content ol {
    margin: 2rem 0;
    padding-left: 2rem;
}

.post-content li {
    margin-bottom: 0.5rem;
}

.post-content strong {
    font-weight: 700;
}

.post-content em {
    font-style: italic;
}

/* Drop Cap */
.post-content > p.has-drop-cap {
    --drop-cap-lines: 5; /* default fallback */
}

.post-content > p.has-drop-cap:first-letter {
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-weight: 900;
    float: left;
    font-size: calc(1.6rem * var(--drop-cap-lines) * 1.8); /* dynamic lines * body font size * line height */
    line-height: calc(1.6rem * var(--drop-cap-lines) * 1.8 * 0.85); /* slightly compressed line height */
    padding-right: 0.8rem;
    margin-top: 0;
    color: var(--color-primary);
    initial-letter: var(--drop-cap-lines); /* CSS property for drop cap spanning dynamic lines */
}

/* Fallback for when JS doesn't run */
.post-content > p:first-of-type:first-letter {
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-weight: 900;
    float: left;
    font-size: calc(1.6rem * 3 * 1.8); /* default 3 lines */
    line-height: calc(1.6rem * 3 * 1.8 * 0.85);
    padding-right: 0.8rem;
    margin-top: 0;
    color: var(--color-primary);
}

/* Footer and Newsletter */
.site-footer {
    background: #f8f8f8;
    border-top: 1px solid var(--color-border);
    margin-top: 6rem;
}

.newsletter-section {
    max-width: 80rem;
    margin: 0 auto;
    padding: 4rem 2rem;
    text-align: center;
}

.newsletter-section h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 300; /* light - matching h3 style */
    font-size: 1.9rem; /* 19pts - matching h3 style */
    color: var(--color-text);
    margin-bottom: 1rem;
}

.newsletter-section p {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 300;
    font-size: 1.6rem;
    color: var(--color-text-light);
    margin-bottom: 2rem;
}

.newsletter-form {
    display: flex;
    justify-content: center;
    gap: 1rem;
    max-width: 50rem;
    margin: 0 auto;
}

.newsletter-form input[type="email"] {
    flex: 1;
    padding: 1.2rem 1.5rem;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.6rem;
    border: 1px solid var(--color-border);
    border-radius: 0;
}

.newsletter-form button {
    padding: 1.2rem 3rem;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 1.6rem;
    text-transform: uppercase;
    background: var(--color-primary);
    color: white;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
}

.newsletter-form button:hover {
    background: var(--color-secondary);
}

.contact-info {
    max-width: 80rem;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
    border-top: 1px solid var(--color-border);
}

.contact-info p {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.4rem;
    color: var(--color-text-light);
}

.site-footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
    font-size: 1.3rem;
    color: var(--color-text-light);
}

/* Koenig Editor Classes (required by Ghost) */
.kg-width-wide {
    position: relative;
    width: 85vw;
    min-width: 100%;
    margin: auto calc(50% - 50vw);
    transform: translateX(calc(50vw - 50%));
}

.kg-width-full {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.kg-card {
    margin: 3rem 0;
}

.kg-image-card img {
    width: 100%;
    height: auto;
}

.kg-gallery-container {
    display: flex;
    flex-direction: column;
    margin: 3rem 0;
}

.kg-gallery-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
}

.kg-gallery-image img {
    display: block;
    margin: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Text Blocks for Ghost Editor */
.text-block-primary {
    background: rgba(206, 15, 63, 0.05);
    border-left: 4px solid var(--color-primary);
    padding: 2rem;
    margin: 2rem 0;
}

.text-block-secondary {
    background: rgba(235, 92, 46, 0.05);
    border-left: 4px solid var(--color-secondary);
    padding: 2rem;
    margin: 2rem 0;
}

.text-highlight {
    background: linear-gradient(180deg, transparent 60%, rgba(206, 15, 63, 0.2) 60%);
    padding: 0 0.2em;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-top: 6rem;
    padding: 2rem;
}

.pagination a {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    padding: 1rem 2rem;
    background: var(--color-primary);
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    transition: background 0.3s;
}

.pagination a:hover {
    background: var(--color-secondary);
    text-decoration: none;
}

.page-number {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    color: var(--color-text-light);
}

/* Responsive */
@media (max-width: 768px) {
    .site-logo {
        max-width: 300px; /* Smaller on mobile */
    }

    .site-nav ul {
        flex-direction: column;
        gap: 1rem;
    }

    .post-item-content {
        flex-direction: column;
        padding: 2rem;
    }

    .post-item-header {
        flex-direction: column;
        gap: 1rem;
    }

    .post-item-meta {
        text-align: left;
    }

    .post-item-title {
        font-size: 1.6rem;
        white-space: normal; /* Allow wrapping on mobile */
    }

    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-form input[type="email"],
    .newsletter-form button {
        width: 100%;
    }
}

/* Triangular background behind entire post */
.post-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 15%; /* Span portion of post width */
    height: 100%;
    background: var(--color-text-light);
    /*clip-path: polygon(0 0, 1% 0, 30% 100%, 0% 100%);*/
    clip-path: polygon(0 0, 28% 0, 11% 100%, 0% 100%);

    z-index: 2; /* Above content but behind text */
}

/* Update z-index for text content */
.post-item-content {
    position: relative;
    z-index: 2; /* Above the background shape */
}

/* Tag-specific colors for post background shape */
.tag-revue::before {
    background: var(--color-revue); /* Red for revue */
}

.tag-articles::before {
    background: var(--color-articles); /* Orange for articles */
}

.tag-evenements::before {
    background: var(--color-evenements); /* Yellow for événements */
}

.tag-archives::before {
    background: var(--color-archives); /* Blue for archives */
}

.tag-hier::before {
    background: var(--color-hier); /* Pink for hier */
}

.tag-ouverture::before {
    background: var(--color-ouverture); /* Green for ouverture */
}

.tag-recit::before {
    background: var(--color-recit); /* Magenta for récit */
}

.tag-suivre::before {
    background: var(--color-suivre); /* Light Green for suivre */
}

/* Text justification only for pages */
.page-qui-sommes-nous .post-content {
    text-align: justify;
}

/* Two-column layout for about page */
.page-qui-sommes-nous .post-full {
    display: flex;
    flex-direction: column;
}

.page-qui-sommes-nous .post-full-content {
    display: flex;
    gap: 4rem;
    align-items: center;
}

.page-qui-sommes-nous .post-full-image {
    flex: 0 0 45%; /* Take 45% width, don't grow or shrink */
    margin: 0; /* Remove default margins */
}

.page-qui-sommes-nous .post-content {
    flex: 1; /* Take remaining space */
}

/* Back home link */
.back-home {
    margin-bottom: 2rem;
}

.back-home a {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 1.6rem;
    color: var(--color-primary);
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.3s;
}

.back-home a:hover {
    color: var(--color-secondary);
    text-decoration: none;
}

/* Pagination */
.pagination {
    max-width: 80rem;
    margin: 4rem auto;
    padding: 0 2rem;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.pagination a {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 1.6rem;
    color: var(--color-primary);
    background: white;
    padding: 0.8rem 1.6rem;
    border: 2px solid var(--color-primary);
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s;
    display: inline-block;
}

.pagination a:hover {
    background: var(--color-primary);
    color: white;
    text-decoration: none;
}

/* Required Koenig Editor classes */
.kg-width-wide {
    width: 85vw;
    min-width: 100%;
}

.kg-width-full {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

/* Ghost font variables */
:root {
    --gh-font-heading: 'Barlow Condensed', sans-serif;
    --gh-font-body: 'Helvetica Neue LT Std', sans-serif;
}

/* Responsive: stack on mobile */
@media (max-width: 768px) {
    .page-qui-sommes-nous .post-full-content {
        flex-direction: column;
        gap: 2rem;
    }

    .page-qui-sommes-nous .post-full-image {
        flex: none;
        width: 100%;
    }
}