:root {
    /*
     * Palette Cyberzen v6.
     *
     * Les six variables --color-* ci-dessous sont celles déjà consommées
     * dans le reste de la feuille : les remapper suffit à faire évoluer
     * l'ensemble du thème vers la nouvelle identité visuelle. Les tokens
     * --color-cream / --color-ink / etc. étendent la palette pour les
     * composants à venir (badges, panneaux) sans les appliquer ici.
     */
    --color-background: #fbf7f1;
    --color-surface: #ffffff;
    --color-text: #17302c;
    --color-muted: #47605b;
    --color-primary: #0e6157;
    --color-primary-hover: #0a453e;
    --color-border: rgb(23 48 44 / 14%);

    --color-cream: #fbf7f1;
    --color-ink: #17302c;
    --color-teal: #0e6157;
    --color-teal-dark: #0a453e;
    --color-teal-light: #2f8f80;
    --color-sage: #dcece5;
    --color-sage-deep: #c3ded3;
    --color-sand: #f4ebdd;
    --color-apricot: #e8a87c;
    --color-apricot-dark: #b8683a;
    --color-warn: #a13a1c;
    --color-warn-background: #fdf0e8;
    --color-ok: #2c6b46;

    --content-width: 72rem;
    --reading-width: 42rem;

    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-5: 3rem;

    /* Cible tactile minimale (44px) : reprend le haut de l'échelle
       d'espacement v6, consommé par les boutons et les liens de
       navigation pour rester accessible au doigt comme à la souris. */
    --tap-target-min: 2.75rem;

    /*
     * Échelle de rayons v6 : 14 / 24 / 36 / 48 px, plus un rayon plein
     * pour les éléments pilule (boutons, pastilles, champs). --radius
     * reste la valeur par défaut consommée par les éléments encore non
     * migrés vers un rayon spécifique ; elle correspond au premier
     * cran de l'échelle (encadrés internes).
     */
    --radius: 0.875rem;
    --radius-sm: 0.875rem;
    --radius-md: 1.5rem;
    --radius-lg: 2.25rem;
    --radius-xl: 3rem;
    --radius-pill: 999px;

    /* Ombres v6 : réservées aux cartes et panneaux des phases suivantes. */
    --shadow-soft: 0 0.125rem 0.25rem rgb(23 48 44 / 4%),
        0 0.875rem 2rem -1rem rgb(23 48 44 / 22%);
    --shadow-lift: 0 0.25rem 0.5rem rgb(23 48 44 / 5%),
        0 1.875rem 3.75rem -1.5rem rgb(23 48 44 / 30%);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--color-background);
    color: var(--color-text);
    line-height: 1.6;
    font-family:
        var(
            --gh-font-body,
            system-ui,
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            sans-serif
        );
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family:
        var(
            --gh-font-heading,
            system-ui,
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            sans-serif
        );
    line-height: 1.2;
    font-weight: 700;
}

h1 {
    margin-block: 0 var(--space-2);
    font-size: clamp(2rem, 1.5rem + 2.2vw, 3.625rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

h2 {
    margin-block: var(--space-4) var(--space-2);
    font-size: clamp(1.5rem, 1.3rem + 1vw, 2.125rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

h3 {
    margin-block: var(--space-3) var(--space-1);
    font-size: 1.4375rem;
    font-weight: 800;
    letter-spacing: -0.025em;
}

h4,
h5,
h6 {
    margin-block: var(--space-3) var(--space-1);
    font-size: 1.0625rem;
}

p {
    margin-block: 0 var(--space-2);
}

ul,
ol {
    margin-block: 0 var(--space-2);
    padding-inline-start: var(--space-3);
}

blockquote {
    margin-inline: 0;
    margin-block: 0 var(--space-2);
    padding-inline-start: var(--space-2);
    border-inline-start: 0.25rem solid var(--color-border);
    color: var(--color-muted);
}

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875em;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    padding: 0.125em 0.375em;
}

pre {
    margin-block: 0 var(--space-2);
    padding: var(--space-2);
    overflow-x: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

pre code {
    padding: 0;
    border: 0;
    background: none;
}

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

figure {
    margin: 0;
}

input,
textarea,
select {
    font: inherit;
    color: inherit;
}

a {
    color: var(--color-primary);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.15em;
}

a:hover {
    color: var(--color-primary-hover);
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 0.1875rem solid var(--color-primary);
    outline-offset: 0.1875rem;
}

/*
 * Boutons et CTA
 *
 * .button          : base structurelle, à combiner avec un modificateur
 * .button-primary  : action principale (défaut de .button et de <button>)
 * .button-secondary: action secondaire, contour
 *
 * .kg-btn est le bouton généré par l'éditeur Ghost (cartes bookmark/CTA) ;
 * il partage la même base visuelle que .button-primary.
 */
button,
.button,
.kg-btn,
.pagination .older-posts,
.pagination .newer-posts {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--tap-target-min);
    padding: 0.625rem 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: 0.9375rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

button,
.button,
.button-primary,
.kg-btn {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-surface);
}

button:hover,
.button:hover,
.button-primary:hover,
.kg-btn:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-surface);
}

.button-secondary,
.pagination .older-posts,
.pagination .newer-posts {
    background: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.button-secondary:hover,
.button-secondary:focus-visible,
.pagination .older-posts:hover,
.pagination .older-posts:focus-visible,
.pagination .newer-posts:hover,
.pagination .newer-posts:focus-visible {
    background: var(--color-primary);
    color: var(--color-surface);
}

.content-wrapper {
    width: min(100% - 2rem, var(--content-width));
    margin-inline: auto;
}

/*
 * Grille éditoriale Ghost
 *
 * full : largeur maximale de la page
 * wide : illustrations et cartes larges
 * main : colonne de lecture
 */
.gh-canvas {
    display: grid;
    grid-template-columns:
        [full-start] minmax(1rem, 1fr)
        [wide-start] minmax(0, 9rem)
        [main-start] minmax(0, var(--reading-width))
        [main-end] minmax(0, 9rem)
        [wide-end] minmax(1rem, 1fr)
        [full-end];
}

.gh-canvas > * {
    grid-column: main;
    min-width: 0;
}

.gh-canvas > .kg-width-wide {
    grid-column: wide;
}

.gh-canvas > .kg-width-full {
    grid-column: full;
}

.gh-canvas > .kg-width-full img,
.gh-canvas > .kg-width-wide img {
    width: 100%;
}

.gh-content {
    font-size: 1.0625rem;
    line-height: 1.75;
}

.gh-content :where(h2, h3, h4) {
    margin-block: var(--space-4) var(--space-1);
}

.gh-content :where(p, ul, ol, figure) {
    margin-block: 0 var(--space-2);
}

.gh-content img {
    border-radius: var(--radius);
}

.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0.75rem 1rem;
    background: var(--color-text);
    color: var(--color-surface);
    transform: translateY(-150%);
}

.skip-link:focus {
    transform: translateY(0);
}

.site-header {
    padding-block: var(--space-3);
    background: var(--color-cream);
    border-bottom: 1px solid var(--color-border);
}

.site-header .content-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.site-header-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.member-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.member-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-pill);
    background: var(--color-sage);
    color: var(--color-teal-dark);
    font-size: 0.75rem;
    font-weight: 800;
}

.member-badge-paid {
    background: var(--color-teal);
    color: var(--color-surface);
}

.site-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text);
    text-decoration: none;
}

.site-logo img {
    height: 3rem;
    width: auto;
}

.site-logo-mark {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-teal);
}

.site-logo-text {
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
}

.site-header nav .nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-header nav .nav a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-target-min);
    padding-inline: 0.25rem;
    color: var(--color-text);
    font-weight: 700;
    text-decoration: none;
}

.site-header nav .nav a:hover,
.site-header nav .nav a:focus-visible {
    color: var(--color-primary);
}

/* nav-current : classe native ajoutée par le helper {{navigation}} de
   Ghost sur le lien de la page courante. Couleur + soulignement pour
   ne pas reposer sur la seule couleur. */
.site-header nav .nav a.nav-current {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 0.25rem;
}

.site-footer {
    margin-block-start: var(--space-5);
    padding-block: var(--space-4);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    background: var(--color-ink);
    color: rgb(255 255 255 / 75%);
    font-size: 0.9375rem;
}

.site-footer p {
    margin: 0;
}

.site-footer p + p,
.site-footer nav + p {
    margin-block-start: var(--space-1);
}

.site-footer-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-1);
    padding: 0;
    list-style: none;
}

.site-footer-nav a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-target-min);
    color: rgb(255 255 255 / 75%);
    text-decoration: none;
}

.site-footer-nav a:hover,
.site-footer-nav a:focus-visible {
    color: var(--color-surface);
}

/* Le panneau de pied de page est sombre : le contour de focus générique
   (teal foncé) n'y est pas assez lisible, on le remplace par la variante
   claire de la palette réservée aux accents sur fond sombre. */
.site-footer a:focus-visible {
    outline-color: var(--color-teal-light);
}

.home-hero {
    position: relative;
    overflow: hidden;
    padding-block: var(--space-5) var(--space-4);
    text-align: center;
}

/* Halo décoratif discret, dans l'esprit v6 ("halos doux") : purement
   visuel (::before, hors de l'arbre d'accessibilité), contenu par
   overflow: hidden pour ne jamais provoquer de défilement horizontal. */
.home-hero::before {
    content: "";
    position: absolute;
    top: -4rem;
    right: -3rem;
    width: 18rem;
    height: 18rem;
    z-index: -1;
    border-radius: var(--radius-pill);
    background: radial-gradient(
        circle at 35% 35%,
        rgb(220 236 229 / 90%),
        rgb(244 235 221 / 45%) 60%,
        rgb(251 247 241 / 0%) 72%
    );
}

.home-hero-lede {
    max-width: var(--reading-width);
    margin-inline: auto;
    color: var(--color-muted);
    font-size: 1.125rem;
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
}

.home-section {
    margin-block-end: var(--space-5);
}

.home-section-header {
    margin-block-end: var(--space-3);
}

.home-section-header p {
    margin: 0;
    color: var(--color-muted);
}

.home-topics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.home-newsletter,
.home-support {
    padding: var(--space-4);
    border-radius: var(--radius-xl);
    text-align: center;
}

/* Panneaux pleine largeur en aplat de couleur : pas d'ombre dessus,
   conformément au design system v6. */
.home-newsletter {
    background: var(--color-sand);
}

.home-support {
    background: var(--color-sage);
}

.home-newsletter .home-section-header,
.home-support .home-section-header {
    margin-block-end: var(--space-2);
}

.page-header {
    margin-block-end: var(--space-4);
}

.page-header p {
    color: var(--color-muted);
}

.article-header {
    margin-block-end: var(--space-4);
}

.article-excerpt,
.page-excerpt {
    color: var(--color-muted);
    font-size: 1.25rem;
}

/* Image principale d'un article, d'une page ou d'un tag : même traitement
   visuel partout, ratio intrinsèque préservé (pas de recadrage). */
.feature-image {
    margin-block-end: var(--space-4);
}

.feature-image img {
    border-radius: var(--radius-md);
}

.feature-image figcaption {
    margin-block-start: var(--space-1);
    color: var(--color-muted);
    font-size: 0.875rem;
    text-align: center;
}

/*
 * Panneau « contenu réservé » (partials/content-cta.hbs) : la logique
 * d'accès (test sur @member / @member.paid / visibility) reste dans le
 * partial, seul l'habillage change ici. Traitement à part, dans
 * l'esprit v6, pour bien signaler la coupure éditoriale.
 */
.access-message {
    margin-block-start: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--color-ink);
    color: rgb(255 255 255 / 86%);
}

.access-message h2 {
    color: var(--color-surface);
}

.access-message p:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.access-message .button-secondary {
    border-color: rgb(255 255 255 / 35%);
    color: var(--color-surface);
}

.access-message .button-secondary:hover,
.access-message .button-secondary:focus-visible {
    background: rgb(255 255 255 / 12%);
    color: var(--color-surface);
}

.access-message .button-primary {
    background: var(--color-cream);
    color: var(--color-ink);
}

.access-message .button-primary:hover {
    background: var(--color-surface);
}

.access-message a:focus-visible {
    outline-color: var(--color-teal-light);
}

.post-meta {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.9375rem;
}

.post-meta-separator {
    margin-inline: 0.375em;
}

/*
 * Pages d'erreur (error.hbs, error-4xx.hbs, error-5xx.hbs et les
 * gabarits par code). Le code HTTP est affiché via .badge (pastille
 * déjà utilisée pour les catégories d'articles) plutôt qu'en gros
 * chiffre : il doit rester visible sans dominer le message. Le H1
 * hérite donc du style de titre standard du thème, sans traitement
 * dédié.
 */
.error-content {
    padding-block: var(--space-5) var(--space-4);
    text-align: center;
}

.error-content .badge {
    margin-block-end: var(--space-2);
}

.post-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    gap: var(--space-3);
}

.post-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.post-card:hover {
    box-shadow: var(--shadow-lift);
    transform: translateY(-0.25rem);
}

/*
 * Ratio recadré volontairement pour une grille de cartes visuellement
 * régulière. object-fit: cover préserve le ratio intrinsèque de l'image
 * source (pas de déformation), il en recadre seulement le dépassement.
 */
.post-card-image {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--radius-md);
}

.post-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.post-card-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow-wrap: anywhere;
}

.post-card-content .post-meta {
    margin-top: auto;
    padding-top: var(--space-1);
    border-top: 1px solid var(--color-border);
    font-size: 0.8125rem;
}

/*
 * Pastille de catégorie, mutualisée entre les cartes (post-card.hbs)
 * et l'en-tête d'article (post.hbs).
 */
.badge {
    display: inline-block;
    /* Volontairement plus serré que le gap image/contenu (--space-2) :
       le tag fonctionne comme un « kicker » éditorial accolé à son
       titre, le vrai temps de pause visuel reste après l'image. */
    margin: 0 0 var(--space-1);
    padding: 0.3125rem 0.6875rem;
    border-radius: var(--radius-pill);
    background: var(--color-sage);
    color: var(--color-teal-dark);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.badge a {
    color: inherit;
    text-decoration: none;
}

.badge a:hover {
    text-decoration: underline;
}

/* Le titre de carte est un h2 ou un h3 selon le contexte appelant
   (voir headingLevel dans partials/post-card.hbs). Sa taille est fixée
   ici plutôt qu'héritée de l'échelle globale h2/h3 : une carte garde le
   même gabarit de titre quel que soit son niveau de titre sémantique. */
.post-card :is(h2, h3) {
    margin: 0 0 var(--space-1);
    font-size: 1.375rem;
}

.post-card :is(h2, h3) a {
    color: var(--color-text);
    text-decoration: none;
}

.post-card :is(h2, h3) a:hover,
.post-card :is(h2, h3) a:focus-visible {
    color: var(--color-primary);
}

/*
 * Classe dédiée plutôt que « .post-card p » : un sélecteur générique
 * sur tous les <p> de la carte entrait en conflit de spécificité avec
 * .badge (lui-même un <p>), qui perdait margin/color/font-size au
 * profit de cette règle malgré un ordre de déclaration plus tardif.
 */
.post-card-excerpt {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.9375rem;
}

/* Structure générée par le helper natif {{pagination}} de Ghost. */
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-block-start: var(--space-4);
    padding-block-start: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.pagination .older-posts {
    order: 1;
}

.pagination .newer-posts {
    order: 3;
    margin-inline-start: auto;
}

.pagination .page-number {
    order: 2;
    flex-basis: 100%;
    text-align: center;
    color: var(--color-muted);
    font-size: 0.9375rem;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (max-width: 48rem) {
    .gh-canvas {
        grid-template-columns:
            [full-start wide-start] 1rem
            [main-start] minmax(0, 1fr)
            [main-end] 1rem
            [wide-end full-end];
    }
}