/* ==========================================================================
   SUR PIÈCES — identité « dossier d'instruction »
   Surcouche chargée après built/screen.css. Fond papier, chiffres géants,
   tampons PIÈCE N°, surligneur fluo. Desktop + mobile.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Polices auto-hébergées (RGPD : aucun appel à Google Fonts)
   -------------------------------------------------------------------------- */

@font-face {
    font-family: "Archivo Black";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/archivo-black-latin-400-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Space Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/space-mono-latin-400-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Space Mono";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/space-mono-latin-700-normal.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   1. Variables : encre, papier, surligneur, couleurs de rubriques
   -------------------------------------------------------------------------- */

:root {
    --sp-ink: #14203c;
    --sp-ink-soft: #59617a;
    --sp-paper: #f4f2ec;
    --sp-paper-line: #d8d4c8;
    --sp-white: #fffdf8;
    --sp-fluo: #ffe14d;
    --sp-orange: #e8971f;

    /* Rubriques actives */
    --sp-finances: #1e2a4a;
    --sp-justice: #8a2140;
    --sp-institutions: #1c5c46;

    /* Rubriques futures, déjà câblées */
    --sp-geopolitique: #145a74;
    --sp-histoire: #6b4a1f;
    --sp-culture: #5b2a86;
    --sp-europe: #1f3a8a;
    --sp-environnement: #2f6b1f;
    --sp-sante: #a34216;
    --sp-education: #83651b;

    --sp-rubrique: var(--sp-ink); /* couleur courante, surchargée par tag */

    --sp-display: "Archivo Black", "Arial Black", sans-serif;
    --sp-mono: "Space Mono", "Courier New", monospace;
}

/* Attribution de la couleur de rubrique via les classes tag-{slug} de Ghost.
   Fonctionne sur les cartes (.gh-card), les articles (.gh-article) et le body. */
.tag-finances-publiques { --sp-rubrique: var(--sp-finances); }
.tag-justice { --sp-rubrique: var(--sp-justice); }
.tag-institutions { --sp-rubrique: var(--sp-institutions); }
.tag-geopolitique { --sp-rubrique: var(--sp-geopolitique); }
.tag-histoire { --sp-rubrique: var(--sp-histoire); }
.tag-culture { --sp-rubrique: var(--sp-culture); }
.tag-europe { --sp-rubrique: var(--sp-europe); }
.tag-environnement { --sp-rubrique: var(--sp-environnement); }
.tag-sante { --sp-rubrique: var(--sp-sante); }
.tag-education { --sp-rubrique: var(--sp-education); }

/* --------------------------------------------------------------------------
   2. Fond papier + typographie de base
   -------------------------------------------------------------------------- */

html { font-size: 57.5%; }

body {
    color: var(--sp-ink);
    background-color: var(--sp-paper);
}

/* On préserve le confort de lecture des billets malgré le dézoom */
.gh-article .gh-content { font-size: 1.8rem; }

/* Le surligneur : à appliquer sur <mark> ou .sp-hl */
mark,
.sp-hl {
    padding: 0 3px;
    color: inherit;
    background: linear-gradient(transparent 55%, var(--sp-fluo) 55%);
}

/* Le tampon PIÈCE N° */
.sp-stamp {
    display: inline-block;
    padding: 3px 10px;
    font-family: var(--sp-mono);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--sp-rubrique);
    text-transform: uppercase;
    border: 1.5px solid var(--sp-rubrique);
    border-radius: 2px;
    transform: rotate(-1.5deg);
}

.gh-card:nth-child(even) .sp-stamp { transform: rotate(1deg); }

/* Métadonnées en machine à écrire */
.sp-meta {
    font-family: var(--sp-mono);
    font-size: 1.2rem;
    color: var(--sp-ink-soft);
    text-transform: lowercase;
}

/* --------------------------------------------------------------------------
   3. En-tête : logo, nav, recherche, Soutenir, S'abonner
   -------------------------------------------------------------------------- */

.gh-head {
    background-color: var(--sp-paper);
}

body:not(.is-head-stacked) .gh-head-inner {
    border-bottom: 2px solid var(--sp-ink);
}

.gh-head-logo {
    font-family: var(--sp-display);
    letter-spacing: 0.02em;
    color: var(--sp-ink);
}

/* Logo image : taille maîtrisée, la loupe reste cliquable au-dessus */
.gh-head-logo img {
    display: block;
    width: auto !important;
    max-width: min(320px, 60vw);
    max-height: 44px !important;
}

.gh-head .gh-search {
    position: relative;
    z-index: 5;
}

@media (max-width: 767px) {
    .gh-head-logo img { max-height: 36px !important; }
}

.gh-head-menu .nav a {
    font-weight: 500;
    color: var(--sp-ink);
}

.gh-head-menu .nav a:hover {
    background: linear-gradient(transparent 60%, var(--sp-fluo) 60%);
    opacity: 1;
}

.gh-head .gh-btn.gh-primary-btn {
    font-family: var(--sp-mono);
    font-weight: 700;
    color: var(--sp-paper);
    background-color: var(--sp-ink);
    border-radius: 2px;
}

.gh-head .gh-btn.gh-primary-btn:hover {
    background-color: var(--sp-orange);
    color: var(--sp-ink);
}

/* Lien Soutenir (Buy Me a Coffee ou autre) */
.sp-support-link {
    color: var(--sp-ink) !important;
    padding: 0 3px;
    font-family: var(--sp-mono);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--sp-ink);
    text-decoration: none;
    white-space: nowrap;
    background: linear-gradient(transparent 55%, var(--sp-fluo) 55%);
}

.sp-support-link:hover {
    background: var(--sp-fluo);
}

/* --------------------------------------------------------------------------
   4. Page d'accueil : la une « dossier du jour »
   -------------------------------------------------------------------------- */

.sp-une {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px 48px;
    align-items: center;
    padding: 32px 0 36px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--sp-paper-line);
}

.sp-une.sp-une-with-image {
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 460px);
}

.sp-une.sp-has-figure { grid-template-columns: minmax(0, 1fr); }
.sp-une.sp-has-figure .sp-une-visual { display: none; }

@media (max-width: 900px) {
    .sp-une.sp-une-with-image { grid-template-columns: minmax(0, 1fr); }
}

.sp-une-head {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 18px;
}

.sp-une .sp-figure {
    margin: 0 0 12px;
    font-family: var(--sp-display);
    font-size: clamp(4.8rem, 9vw, 9.6rem);
    line-height: 0.95;
    color: var(--sp-rubrique);
    overflow-wrap: anywhere;
}

.sp-une-title {
    max-width: 720px;
    margin: 0 0 12px;
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.sp-une-title a {
    color: var(--sp-ink);
}

.sp-une-title a:hover .sp-une-title-text,
.sp-une-title a:hover {
    background: linear-gradient(transparent 80%, var(--sp-fluo) 80%);
}

.sp-une-excerpt {
    max-width: 640px;
    margin: 0;
    font-size: 1.7rem;
    line-height: 1.5;
    color: var(--sp-ink-soft);
}

.sp-une-image {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--sp-paper-line);
    border-radius: 4px;
}

.sp-une-image img { display: block; width: 100%; }

/* --------------------------------------------------------------------------
   5. Cartes du fil : le chiffre ou l'image ouvre la carte
   -------------------------------------------------------------------------- */

.gh-topic-grid .gh-topic-content {
    gap: 0;
    border-top: 2px solid var(--sp-ink);
}

.gh-card {
    border-bottom: 1px solid var(--sp-paper-line);
}

.gh-topic-grid .gh-card-link {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 24px 24px 22px;
    transition: background-color 0.2s ease;
}

.gh-topic-grid .gh-card-link:hover {
    background-color: var(--sp-white);
}

.gh-topic-grid .gh-card:nth-child(odd) {
    border-right: 1px solid var(--sp-paper-line);
}

/* Le chiffre en tête de carte (rempli par surpieces.js) */
.sp-card-figure {
    margin: 14px 0 10px;
    font-family: var(--sp-display);
    font-size: 4rem;
    line-height: 1;
    color: var(--sp-rubrique);
    overflow-wrap: anywhere;
}

/* L'image, si la carte n'a pas de chiffre : pleine largeur, format 16/9 */
.gh-topic-grid .gh-card-image {
    order: 2;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    margin: 14px 0 4px;
    overflow: hidden;
    border: 1px solid var(--sp-paper-line);
    border-radius: 4px;
}

.gh-topic-grid .gh-card-image::before { display: none !important; }

.gh-topic-grid .gh-card-image img {
    position: static !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gh-card.sp-has-figure .gh-card-image { display: none; }

.gh-card-image img { transition: transform 0.4s ease; }
.gh-card-link:hover .gh-card-image img { transform: scale(1.03); }

.gh-topic-grid .gh-card-wrapper { display: contents; }

.gh-card-header { order: 3; }

.gh-card-title {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--sp-ink);
    background-image: linear-gradient(var(--sp-fluo), var(--sp-fluo));
    background-repeat: no-repeat;
    background-position: 0 88%;
    background-size: 0% 40%;
    transition: background-size 0.25s ease;
}

.gh-card-link:hover .gh-card-title {
    opacity: 1 !important;
    background-size: 100% 40%;
}

.gh-card-excerpt {
    order: 4;
    margin-top: 8px;
    font-size: 1.45rem;
    line-height: 1.5;
    color: var(--sp-ink-soft);
}

.gh-card-footer {
    order: 5;
    margin-top: 12px;
    font-family: var(--sp-mono);
    font-size: 1.15rem;
    color: var(--sp-ink-soft);
    text-transform: lowercase;
}

.gh-card .sp-stamp { order: 1; align-self: flex-start; }

/* Titre des sections rubriques */
.gh-topic-grid .gh-topic-name,
.gh-topic-grid .gh-topic-name a {
    font-family: var(--sp-mono);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--sp-ink);
}

.gh-topic-grid .gh-topic-name {
    padding-bottom: 10px;
    margin-bottom: 0;
}

.gh-topic-grid + .gh-topic-grid,
.sp-newsletter + .gh-topic-grid {
    margin-top: 72px;
}

.gh-topic-footer {
    padding-top: 14px;
    margin-top: 0;
    border-top: none;
}

.gh-topic-link {
    padding: 0 3px;
    font-family: var(--sp-mono);
    font-size: 1.3rem;
    font-weight: 700;
    background: linear-gradient(transparent 55%, var(--sp-fluo) 55%);
}

/* --------------------------------------------------------------------------
   6. Bandeau newsletter (accueil + fin de billet)
   -------------------------------------------------------------------------- */

.sp-newsletter {
    padding: 36px 32px;
    margin-top: 72px;
    background-color: var(--sp-ink);
    border-radius: 4px;
}

.sp-newsletter-title {
    margin: 0 0 8px;
    font-family: var(--sp-display);
    font-size: 2.4rem;
    color: var(--sp-paper);
}

.sp-newsletter-title .sp-hl {
    color: var(--sp-ink);
    background: linear-gradient(transparent 15%, var(--sp-fluo) 15%);
}

.sp-newsletter-text {
    max-width: 520px;
    margin: 0 0 20px;
    font-size: 1.5rem;
    line-height: 1.5;
    color: #aab8d8;
}

.sp-newsletter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 520px;
}

.sp-newsletter-form input[type="email"] {
    flex: 1;
    min-width: 220px;
    padding: 12px 16px;
    font-family: var(--sp-mono);
    font-size: 1.4rem;
    color: var(--sp-ink);
    background-color: var(--sp-paper);
    border: none;
    border-radius: 2px;
    outline: none;
}

.sp-newsletter-form input[type="email"]:focus-visible {
    outline: 2px solid var(--sp-fluo);
}

.sp-newsletter-form button {
    padding: 12px 22px;
    font-family: var(--sp-mono);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--sp-ink);
    cursor: pointer;
    background-color: var(--sp-fluo);
    border: none;
    border-radius: 2px;
    transition: background-color 0.2s ease;
}

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

.sp-newsletter-form .message-success,
.sp-newsletter-form .message-error {
    width: 100%;
    font-family: var(--sp-mono);
    font-size: 1.3rem;
    color: var(--sp-paper);
    display: none;
}

form[data-members-form].success .message-success,
form[data-members-form].error .message-error { display: block; }

/* --------------------------------------------------------------------------
   7. Page billet
   -------------------------------------------------------------------------- */

.sp-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 4px;
    pointer-events: none;
}

.sp-progress-bar {
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--sp-rubrique, var(--sp-orange));
    transform: scaleX(0);
    transform-origin: left;
}

.gh-article-header .sp-stamp { margin-bottom: 18px; }

.gh-article-title {
    letter-spacing: -0.01em;
    color: var(--sp-ink);
}

.gh-article-excerpt { color: var(--sp-ink-soft); }

.gh-article .gh-article-meta,
.gh-article .gh-article-date,
.gh-article .gh-article-length,
.gh-article .gh-card-date {
    font-family: var(--sp-mono);
    text-transform: lowercase;
}

/* Callouts Ghost = « À retenir » */
.gh-content .kg-callout-card {
    background-color: var(--sp-white);
    border: 1px solid var(--sp-paper-line);
    border-left: 4px solid var(--sp-fluo);
    border-radius: 0 4px 4px 0;
}

/* Bordereau des pièces (bloc sources) : carte HTML class="sp-sources" */
.gh-content .sp-sources {
    padding: 26px 30px;
    margin-top: 48px;
    background-color: var(--sp-white);
    border: 1.5px solid var(--sp-ink);
    border-radius: 3px;
}

.gh-content .sp-sources > h2,
.gh-content .sp-sources > h3 {
    margin: 0 0 14px;
    font-family: var(--sp-mono);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gh-content .sp-sources ol,
.gh-content .sp-sources ul {
    padding-left: 20px;
    margin: 0;
}

.gh-content .sp-sources li {
    margin-bottom: 8px;
    font-size: 1.5rem;
    line-height: 1.5;
}

/* Liens du corps de texte */
.gh-content a:not(.kg-btn):not(.kg-bookmark-container) {
    text-decoration-color: var(--sp-orange);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.gh-content a:not(.kg-btn):not(.kg-bookmark-container):hover {
    background: linear-gradient(transparent 70%, var(--sp-fluo) 70%);
}

/* Chiffres en gras dans le corps : encre de la rubrique */
.gh-content strong { color: var(--sp-rubrique); }

/* --------------------------------------------------------------------------
   8. Pages statiques (Éditorial, À propos, Soutenir…)
   -------------------------------------------------------------------------- */

.page-template .gh-article-title { font-size: 3.6rem; }

.page-template .gh-content > blockquote {
    font-family: var(--sp-mono);
    border-left: 4px solid var(--sp-fluo);
}

/* --------------------------------------------------------------------------
   9. Pages rubriques (tag.hbs)
   -------------------------------------------------------------------------- */

.sp-rubrique-head {
    padding: 44px 0 32px;
    border-bottom: 2px solid var(--sp-rubrique);
}

.sp-rubrique-name {
    margin: 0 0 10px;
    font-family: var(--sp-display);
    font-size: clamp(3.2rem, 6vw, 5.6rem);
    line-height: 1;
    color: var(--sp-rubrique);
    text-transform: uppercase;
}

.sp-rubrique-description {
    max-width: 620px;
    font-size: 1.6rem;
    line-height: 1.5;
    color: var(--sp-ink-soft);
}

/* --------------------------------------------------------------------------
   10. Pied de page
   -------------------------------------------------------------------------- */

.gh-foot {
    padding-top: 48px;
    padding-bottom: 36px;
    margin-top: 96px;
    color: #aab8d8;
    background-color: var(--sp-ink);
}

.gh-foot a { color: var(--sp-paper); }
.gh-foot a:hover { color: var(--sp-fluo); }
.gh-foot .nav a { font-family: var(--sp-mono); font-size: 1.3rem; }

.gh-foot .gh-copyright {
    font-family: var(--sp-mono);
    font-size: 1.2rem;
    color: #8b96b5;
}

.gh-foot .gh-social-links a svg { fill: var(--sp-paper); }
.gh-foot .gh-social-links a:hover svg { fill: var(--sp-fluo); }

.sp-foot-tagline {
    margin-bottom: 20px;
    font-family: var(--sp-mono);
    font-size: 1.3rem;
    color: #aab8d8;
}

/* --------------------------------------------------------------------------
   11. Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .sp-une { padding: 28px 0 26px; }
    .sp-une-title { font-size: 2.2rem; }
    .sp-une-excerpt { font-size: 1.5rem; }

    .gh-topic-grid .gh-topic-content { grid-template-columns: 1fr; }
    .gh-topic-grid .gh-card:nth-child(odd) { border-right: none; }
    .gh-topic-grid .gh-card-link { padding: 20px 4px 18px; }
    .sp-card-figure { font-size: 3.4rem; }

    .sp-newsletter { padding: 28px 20px; margin-top: 56px; }
    .sp-newsletter-form button { width: 100%; }

    .gh-foot { margin-top: 64px; }
}

/* Le burger et le menu mobile héritent du thème Headline (main.min.js) */
.gh-burger::before,
.gh-burger::after {
    background-color: var(--sp-ink);
}

/* --------------------------------------------------------------------------
   12. Mouvement doux + accessibilité
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .sp-reveal {
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.45s ease, transform 0.45s ease;
    }

    .sp-reveal.sp-revealed {
        opacity: 1;
        transform: translateY(0);
    }
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--sp-orange);
    outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   13. Partage social (aucun compte requis) + soutien en fin de billet
   -------------------------------------------------------------------------- */

.sp-share {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 22px 0;
    margin-top: 40px;
    border-top: 2px solid var(--sp-ink);
}

.sp-share-label {
    margin-right: 6px;
    font-family: var(--sp-mono);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sp-share a,
.sp-share button {
    padding: 7px 14px;
    font-family: var(--sp-mono);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--sp-ink);
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: 1.5px solid var(--sp-ink);
    border-radius: 2px;
    transition: background-color 0.15s ease;
}

.sp-share a:hover,
.sp-share button:hover {
    background-color: var(--sp-fluo);
}

.sp-share [data-sp-native] { display: none; }

.sp-support-strip {
    padding: 18px 22px;
    margin-top: 20px;
    font-size: 1.5rem;
    background-color: var(--sp-white);
    border: 1px solid var(--sp-paper-line);
    border-radius: 4px;
}

.sp-support-strip a {
    padding: 0 3px;
    font-family: var(--sp-mono);
    font-weight: 700;
    background: linear-gradient(transparent 55%, var(--sp-fluo) 55%);
}

.sp-support-strip a:hover { background: var(--sp-fluo); }

/* Page 404 : pièce introuvable */
.sp-error {
    padding: 96px 0 64px;
    text-align: center;
}

.sp-error-code {
    font-family: var(--sp-display);
    font-size: clamp(8rem, 18vw, 16rem);
    line-height: 1;
    color: var(--sp-ink);
}

.sp-error-text {
    max-width: 460px;
    margin: 16px auto 28px;
    font-size: 1.7rem;
    color: var(--sp-ink-soft);
}

/* --------------------------------------------------------------------------
   14. Tableaux dans les billets : lisibles, complets, identité du site
   -------------------------------------------------------------------------- */

.gh-content table {
    width: 100%;
    margin: 32px 0;
    font-size: 1.4rem;
    line-height: 1.45;
    border-collapse: collapse;
    background-color: var(--sp-white);
    border: 1.5px solid var(--sp-ink);
}

.gh-content table th {
    padding: 12px 14px;
    font-family: var(--sp-mono);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--sp-paper);
    text-align: left;
    text-transform: uppercase;
    background-color: var(--sp-ink);
}

.gh-content table td {
    padding: 11px 14px;
    vertical-align: top;
    white-space: normal;
    overflow-wrap: break-word;
    hyphens: none;
    min-width: 90px;
    border-top: 1px solid var(--sp-paper-line);
}

.gh-content table tr:nth-child(even) td {
    background-color: var(--sp-paper);
}

.gh-content table td:first-child {
    font-weight: 600;
}

/* Sur petit écran : défilement horizontal propre plutôt que texte broyé */
@media (max-width: 700px) {
    .gh-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

}

/* --------------------------------------------------------------------------
   15. Flèches de navigation rapide (billets) : haut / bas
   -------------------------------------------------------------------------- */

.sp-scrollnav {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.sp-scrollnav.sp-visible {
    opacity: 1;
    pointer-events: auto;
}

.sp-scrollnav button {
    width: 44px;
    height: 44px;
    font-family: var(--sp-mono);
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    color: var(--sp-ink);
    cursor: pointer;
    background-color: var(--sp-paper);
    border: 1.5px solid var(--sp-ink);
    border-radius: 3px;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.sp-scrollnav button:hover {
    background-color: var(--sp-fluo);
    transform: translateY(-1px);
}

@media (max-width: 767px) {
    .sp-scrollnav { right: 14px; bottom: 14px; }
    .sp-scrollnav button { width: 40px; height: 40px; }
}