/*
Theme Name: NC Archive
Description: Canevas "blog-archive à l'ancienne" — tout le flux chronologique des articles sur l'accueil, colonne de lecture + sidebar (à propos, catégories, archives par mois), aucune section marketing. Un des canevas de la fabrique de sites NC ECOM.
Author: NC ECOM
Version: 1.0
Text Domain: nc-archive
*/

/* ==========================================================================
   Variables (repli par défaut ; surchargées par site via functions.php)
   ========================================================================== */
:root {
    --color-primary: #3F5D52;
    --color-primary-hover: #33493F;
    --color-heading: #211F1B;
    --color-text: #3A362F;
    --color-background: #E9EAE2;
    --color-secondary-background: #F6F5F0;
    --color-border: #D6D2C4;
    --color-secondary-border: #C7C2B0;
    --color-accent: #8C4A32;
    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'Lora', serif;
    --font-mono: 'Space Mono', monospace;

    --container-width: 1160px;
    --content-width: 700px;
    --radius: 2px;
    --shadow: 0 1px 3px rgba(33, 31, 27, 0.08);

    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 3rem;
    --space-xl: 4rem;

    --bp-mobile: 900px;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
/* overflow-x:hidden UNIQUEMENT sur html, jamais sur body : un overflow non
   "visible" sur body (ou tout autre ancêtre réel) crée un contexte de
   défilement séparé de la fenêtre, qui casse position:sticky pour tout ce
   qu'il contient — constaté en production (la sidebar collante d'ardlime.com
   ne collait plus du tout après l'ajout de cette règle sur body). html est
   traité à part par les navigateurs (propagation au viewport lui-même, pas
   un vrai conteneur de scroll imbriqué), donc sans danger pour sticky.
   Le panneau de préférences cookies du plugin CookieYes (.cky-preference-
   center) contient un sous-bloc à largeur fixe façon desktop (~845px,
   jamais recalculé tant que le panneau n'a pas été ouvert une première
   fois) qui déborde de SON PROPRE conteneur .cky-modal — on le clippe
   directement, plus fiable sur tous les navigateurs mobiles que de compter
   uniquement sur le garde-fou général. */
html { scroll-behavior: smooth; overflow-x: hidden; }
.cky-consent-container, .cky-modal, .cky-preference-center {
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
}
body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-background);
    line-height: 1.65;
    font-size: 1.05rem;
    /* Un mot ou une URL trop long (sans espace ni tiret) dans un article
       publié via l'API ne doit jamais pouvoir forcer une colonne à
       s'élargir au-delà de l'écran — coupe le mot plutôt que de déborder. */
    overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }
/* display:block + overflow-x:auto sur un <table> brut (contenu d'article,
   pas de wrapper HTML possible en CSS pur) : un tableau à plusieurs
   colonnes peut être trop large pour l'écran sans qu'aucune colonne ne
   puisse raisonnablement rétrécir plus. Sans ça, il ne fait plus déborder
   TOUTE la page (grâce au garde-fou overflow-x plus haut) mais ses
   dernières colonnes deviendraient invisibles, coupées net. Ce défilement
   ne concerne que le tableau lui-même (comportement standard attendu),
   pas la page entière. */
table { display: block; max-width: 100%; overflow-x: auto; }
a { color: var(--color-primary); }
a:hover { color: var(--color-primary-hover); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-heading);
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 0.6rem;
    letter-spacing: -0.01em;
}
h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 700; }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.7rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.screen-reader-text {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}

/* Ligne méta façon horodatage de vieux moteur de blog — signature du
   canevas : monospace, petites capitales, séparateurs par point médian.
   Utilisée sous CHAQUE titre (flux, archive, article) pour cet effet
   "logiciel de blog d'époque", jamais comme simple décoration. */
.entry-byline {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text);
    opacity: 0.65;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.3rem 0 0.9rem;
}
.entry-byline a { color: inherit; text-decoration: none; }
.entry-byline a:hover { color: var(--color-accent); text-decoration: underline; }
.entry-byline .sep { opacity: 0.5; }

/* ==========================================================================
   Boutons
   ========================================================================== */
.btn {
    display: inline-block;
    padding: 0.75rem 1.6rem;
    border-radius: var(--radius);
    font-weight: 600;
    font-family: var(--font-heading);
    font-size: 1rem;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn--accent, .btn--primary { background: var(--color-primary); color: #fff; }
.btn--accent:hover, .btn--primary:hover { background: var(--color-primary-hover); color: #fff; }
.btn--light {
    background: transparent;
    color: var(--color-heading);
    border-color: var(--color-border);
}
.btn--light:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ==========================================================================
   En-tête — logo/tagline, menu et recherche sur une ligne, fond papier
   (pas de bandeau sombre : ce canevas garde tout dans la même teinte
   sobre du reste du site, cohérent avec l'esprit "carnet").
   ========================================================================== */
.site-header {
    background: var(--color-secondary-background);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 100;
}
.site-header__masthead {
    padding: 1rem 1.5rem;
    max-width: var(--container-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}
/* min-width:0 + max-width bornée : sans ça, un tagline un peu long (texte
   libre généré par l'IA, longueur imprévisible) grandit sans limite dans ce
   groupe flex et pousse le menu, qui déborde alors visuellement (constaté
   en capture — items de nav coupés des deux côtés). Tronqué en points de
   suspension plutôt que jamais coupé au hasard. */
.site-branding { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; min-width: 0; flex: 0 1 auto; }
.site-branding img { max-height: 40px; width: auto; flex-shrink: 0; }
.site-branding__group { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; max-width: 260px; }
.site-branding__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--color-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.site-branding__tagline {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text);
    opacity: 0.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-header__tools { flex: 0 0 auto; display: flex; align-items: center; gap: 0.25rem; }
.header-search { position: relative; }
.header-search__toggle {
    background: none; border: none; cursor: pointer; color: var(--color-heading);
    padding: 0.4rem; display: flex; align-items: center;
}
.header-search__toggle svg { width: 20px; height: 20px; }
.header-search__form {
    display: none; position: absolute; top: calc(100% + 0.5rem); right: 0;
    background: var(--color-secondary-background); border: 1px solid var(--color-border);
    border-radius: var(--radius); padding: 0.75rem; width: 280px; z-index: 10;
}
.header-search__form.is-open { display: flex; gap: 0.5rem; }
.header-search__form input[type="search"] {
    flex: 1; padding: 0.6rem 0.8rem; border: 1px solid var(--color-secondary-border);
    border-radius: var(--radius); font-family: inherit;
}
.header-search__form button {
    background: var(--color-primary); color: #fff; border: none;
    border-radius: var(--radius); padding: 0 1rem; cursor: pointer;
}

.primary-nav { flex: 1 1 auto; min-width: 0; }
.primary-nav ul {
    display: flex; justify-content: center; list-style: none; margin: 0; padding: 0;
    flex-wrap: nowrap; overflow-x: auto;
}
.primary-nav a {
    display: block; color: var(--color-heading); font-family: var(--font-heading);
    font-weight: 600; font-size: 0.98rem; text-decoration: none; white-space: nowrap;
    padding: 0.6rem 0.9rem; border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.primary-nav a:hover { color: var(--color-primary); border-color: var(--color-primary); }

.mobile-nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.4rem; }
.mobile-nav-toggle svg { width: 24px; height: 24px; color: var(--color-heading); }
.primary-nav__close { display: none; }

@media (max-width: 900px) {
    .primary-nav {
        display: none; position: fixed; inset: 0; z-index: 300;
        background: var(--color-heading); flex-direction: column;
        align-items: center; justify-content: center; padding: 2rem;
    }
    .primary-nav.is-open { display: flex; }
    .primary-nav__close {
        display: flex; position: absolute; top: 1.25rem; right: 1.25rem;
        background: none; border: none; color: #fff; padding: 0.5rem;
    }
    .primary-nav__close svg { width: 26px; height: 26px; }
    .primary-nav ul { flex-direction: column; gap: 0.25rem; padding: 0; text-align: center; overflow: visible; }
    .primary-nav a { font-size: 1.4rem; padding: 0.85rem 0; color: #fff; }
    .primary-nav a:hover { color: var(--color-accent); border-color: transparent; }
    .site-header__masthead { flex-wrap: nowrap; gap: 0.75rem; padding: 0.85rem 1rem; }
    .site-branding img { max-height: 32px; }
    .site-branding__title { font-size: 1.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .site-branding__tagline { display: none; }
    .mobile-nav-toggle { display: flex; }
    body.nav-is-open { overflow: hidden; }
}

/* ==========================================================================
   Sections génériques (pages de contenu assemblées par l'IA)
   ========================================================================== */
.section { padding: var(--space-xl) 0; border-top: 1px solid var(--color-border); }
main > .section:first-child { border-top: none; }
main > .section.page-title { padding-bottom: var(--space-md); }
.section-title {
    font-size: clamp(1.3rem, 2.6vw, 1.6rem);
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-accent);
    display: inline-block;
    margin-bottom: 1.75rem;
}

.hero {
    position: relative;
    min-height: 320px;
    display: flex;
    align-items: flex-end;
    color: #fff;
    background-color: var(--color-heading);
    background-size: cover;
    background-position: center;
}
.hero__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0.1) 100%);
}
.hero__content { position: relative; z-index: 1; max-width: var(--content-width); padding: var(--space-lg) 1.5rem; }
.hero h1 { color: #fff; }
.hero p { color: rgba(255,255,255,0.9); margin-bottom: 1.5rem; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: center; }
.split img { border-radius: var(--radius); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ==========================================================================
   Grilles de cartes (utilisées par les sections IA génériques hors accueil)
   ========================================================================== */
.card-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); }
.card {
    background: var(--color-secondary-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    flex: 0 1 300px;
    min-width: 260px;
}
.card img { width: 100%; height: 180px; object-fit: cover; }
.card__body { padding: 1.1rem 1.3rem 1.4rem; }
.card__tag { margin-bottom: 0.6rem; }
.card__title { margin: 0.4rem 0 0.3rem; font-size: 1.1rem; }
.card__title a { color: var(--color-heading); text-decoration: none; }
.card__title a:hover { color: var(--color-primary); }
.card__meta { font-size: 0.78rem; opacity: 0.6; margin: 0; font-family: var(--font-mono); }
.card__text { font-size: 0.92rem; margin: 0.5rem 0 0; }
.card--solid {
    display: flex; align-items: center; justify-content: flex-start; min-height: 90px;
    text-decoration: none; background: var(--color-secondary-background);
    border-top: 3px solid var(--color-accent);
}
.card--solid .card__body { padding: 1rem 1.3rem; text-align: left; }
.card-grid--n2 > .card { flex: 1 1 380px; max-width: 500px; }
.card-grid--n4 > .card, .card-grid--n4 > li { flex: 1 1 240px; max-width: 330px; }

.wp-block-latest-posts.wp-block-latest-posts__list {
    display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md);
    list-style: none; margin: 0; padding: 0;
}
.wp-block-latest-posts__list > li {
    background: var(--color-secondary-background); border: 1px solid var(--color-border);
    border-radius: var(--radius); overflow: hidden; padding-bottom: 1.1rem;
    flex: 0 1 300px; min-width: 260px;
}
.wp-block-latest-posts__featured-image { margin: 0 0 1rem; overflow: hidden; }
.wp-block-latest-posts__featured-image img { width: 100%; height: 180px; object-fit: cover; }
.wp-block-latest-posts__post-title {
    display: block; font-family: var(--font-heading); font-weight: 600; font-size: 1.1rem;
    text-decoration: none; color: var(--color-heading); margin: 0 1.3rem 0.3rem;
}
.wp-block-latest-posts__post-date { display: block; font-family: var(--font-mono); font-size: 0.75rem; opacity: 0.6; margin: 0 1.3rem; }

/* ==========================================================================
   Formulaire de contact (Contact Form 7)
   ========================================================================== */
.wpcf7-form p { margin-bottom: 1.3rem; }
.wpcf7-form label { display: block; font-weight: 600; margin-bottom: 0.4rem; color: var(--color-heading); font-family: var(--font-heading); }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
    width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--color-border);
    border-radius: var(--radius); font-family: inherit; font-size: 1rem; background: var(--color-secondary-background);
}
.wpcf7-form textarea { min-height: 160px; resize: vertical; }
.wpcf7-form input[type="submit"] {
    background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius);
    padding: 0.8rem 2rem; font-weight: 600; font-family: var(--font-heading); font-size: 1rem;
    cursor: pointer; transition: background-color 0.15s ease;
}
.wpcf7-form input[type="submit"]:hover { background: var(--color-primary-hover); }
.wpcf7-not-valid-tip { color: #a13a2b; font-size: 0.85rem; margin-top: 0.3rem; }
.wpcf7-response-output { border-radius: var(--radius); padding: 1rem; margin-top: 1.5rem; border: 1px solid var(--color-border); }
.nc-hp-field { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; margin: 0; }

/* ==========================================================================
   Flux de l'accueil (front-page.php) — colonne de lecture + sidebar,
   entrées séparées par un simple filet, pas de cartes à ombre : l'esprit
   "carnet/journal", pas "portail d'actu".
   ========================================================================== */
.stream-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: var(--space-xl);
    align-items: start;
    max-width: var(--container-width);
}
@media (max-width: 900px) {
    .stream-layout { grid-template-columns: 1fr; }
}
/* min-width:0 sur l'item de grille : sans ça, un item de grille refuse par
   défaut de rétrécir sous la largeur intrinsèque de son contenu (piège
   classique de CSS Grid — min-width:auto implicite), donc un mot un peu
   long dans un article suffisait à élargir toute la grille au-delà de
   l'écran sur mobile (scroll horizontal signalé par l'utilisateur, pas
   corrigé par le garde-fou overflow-x seul puisque le contenu était
   réellement mis en page plus large, pas juste débordant visuellement). */
.entry-stream { min-width: 0; }
.sidebar { min-width: 0; }

/* Contenu INTÉGRAL par entrée (pas un extrait) : structure verticale
   classique comme sur single.php, pas la vignette flottante à côté d'un
   court texte de la première version — ça ne fonctionne plus dès qu'il y a
   un article entier dessous (retour utilisateur explicite : "je parlais de
   les afficher entièrement"). */
.stream-entry { padding: var(--space-lg) 0; border-top: 1px solid var(--color-border); }
.entry-stream .stream-entry:first-child { border-top: none; padding-top: 0; }
.stream-entry__thumb { margin: 1rem 0 var(--space-md); border-radius: var(--radius); overflow: hidden; }
.stream-entry__thumb img { width: 100%; }
.stream-entry__title { margin: 0 0 0.2rem; font-size: clamp(1.25rem, 2.4vw, 1.55rem); }
.stream-entry__title a { color: var(--color-heading); text-decoration: none; }
.stream-entry__title a:hover { color: var(--color-primary); }
.stream-entry__content { margin-top: 1rem; }
.stream-entry__more {
    display: inline-block;
    margin-top: var(--space-sm);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: none;
}

.stream-pagination {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
    font-family: var(--font-heading);
    font-weight: 600;
}
.stream-pagination a { text-decoration: none; }
.stream-pagination a:hover { color: var(--color-primary); }
.stream-pagination span.disabled { opacity: 0.35; }

/* Sidebar : blocs empilés, sans carte/ombre — juste un filet supérieur et
   un titre en majuscules monospace, façon widget de blog d'époque. Collée
   au scroll (position:sticky) : avec le contenu intégral de chaque article
   sur l'accueil, la page devient très longue, la sidebar doit donc suivre
   plutôt que disparaître après le premier article (demande utilisateur).
   align-self:start est nécessaire ici : par défaut une grille étire ses
   items sur toute la hauteur de la ligne, ce qui annulerait tout effet de
   sticky (la boîte ferait déjà toute la hauteur du flux). top correspond à
   la hauteur du header sticky (~4.5rem) + un peu d'air. */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    align-self: start;
    position: sticky;
    top: 5rem;
}
@media (max-width: 900px) {
    .sidebar { position: static; top: auto; }
}
.widget { padding-top: 0; }
.widget__title {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-heading);
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 0.5rem;
    margin: 0 0 1rem;
    display: inline-block;
}
.widget__about-text { font-size: 0.95rem; }
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li {
    padding: 0.5rem 0;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.92rem;
}
.widget li:first-child { border-top: none; padding-top: 0; }
.widget li a { color: var(--color-text); text-decoration: none; }
.widget li a:hover { color: var(--color-primary); }
.widget li .count { font-family: var(--font-mono); opacity: 0.55; font-size: 0.82rem; white-space: nowrap; }

/* ==========================================================================
   Contenu générique (pages, articles)
   ========================================================================== */
.single-content, .archive-results, .no-results { padding: var(--space-lg) 0; }
.single-content .container, .archive-results .container { max-width: var(--content-width); }
.entry-title { font-size: 2.1rem; margin-bottom: 0.2rem; }
.entry-featured-image { margin-bottom: var(--space-md); border-radius: var(--radius); overflow: hidden; }
.entry-featured-image img { width: 100%; }
.entry-content :is(h2, h3) { margin-top: 2rem; }
.container > :is(h2, h3):not(:first-child) { margin-top: 2rem; }

/* ==========================================================================
   Pied de page
   ========================================================================== */
.site-footer {
    background: var(--color-heading);
    color: rgba(255, 255, 255, 0.8);
    padding: var(--space-lg) 0 var(--space-md);
    border-top: 3px solid var(--color-accent);
}
.footer-menu ul {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 2rem;
    list-style: none; margin: 0 0 var(--space-md); padding: 0;
}
.footer-menu a { color: #fff; opacity: 0.85; text-decoration: none; font-family: var(--font-heading); font-weight: 600; }
.footer-menu a:hover { opacity: 1; text-decoration: underline; }
.site-footer__copyright { text-align: center; font-family: var(--font-mono); font-size: 0.78rem; opacity: 0.6; }

/* ==========================================================================
   Recherche / archives / 404
   ========================================================================== */
.archive-header, .search-header { padding: var(--space-lg) 0 var(--space-sm); max-width: var(--content-width); }
.no-results { text-align: center; }

/* ==========================================================================
   Apparition au scroll
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}