/* ============================================================
   QR V26 : système de design partagé
   Revue design sept. 2026
   ------------------------------------------------------------
   Chargé après les feuilles historiques et juste avant
   style-video.css. Contient :
     - les jetons (couleurs, largeurs, rythme)
     - le clin d'oeil dev, le fil d'ariane, la carte d'article
     - l'en-tête d'archive, la page, la recherche
     - la barre d'édition
   Aucune règle n'a été supprimée dans les anciens fichiers.
   ============================================================ */


/* ------------------------------------------------------------
   0. JETONS
   ------------------------------------------------------------ */

:root {
    --qr-measure:  700px;   /* colonne de lecture */
    --qr-hero-v:   500px;
    --qr-hero-h:   880px;   /* en-tête large */
    --qr-wide:    1120px;   /* grilles et pied d'article */

    --qr-ink:     #131313;
    --qr-ink-2:   #5c5c5c;
    --qr-ink-3:   #9b9b9b;
    --qr-line:    #e5e5e5;
    --qr-accent:  #0bd65f;
    --qr-dark:    #0d0d0d;
    --qr-warn:    #e0a800;

    --qr-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --qr-radius: 14px;

    --qr-s1: 8px;
    --qr-s2: 16px;
    --qr-s3: 26px;
    --qr-s4: 44px;
    --qr-s5: 72px;
    --qr-s6: 110px;
}

/* Un seul fond de page.
   Avant : style-v25.css déclarait un mode sombre, l'annulait deux
   lignes plus bas avec background:#222, et le CSS en dur du header
   remettait du blanc. Trois déclarations qui se contredisaient. */
html,
body {
    background: #fff;
}


/* ------------------------------------------------------------
   1. LE CLIN D'OEIL DEV
   Les repères < if title: /> sont volontaires : c'est une
   signature. On leur donne un vrai traitement typographique.
   ------------------------------------------------------------ */

.qr-devmark {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin: 0 0 var(--qr-s1);
    padding: 0;
    font-family: var(--qr-mono);
    font-size: 0.74rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--qr-ink-3);
    user-select: none;
    transition: color 0.25s ease;
}

.qr-devmark-chevron {
    color: var(--qr-accent);
    opacity: 0.65;
    transition: opacity 0.25s ease;
}

.qr-devmark-word::after {
    content: ":";
    color: var(--qr-ink-3);
}

/* Au survol de la section, le repère s'allume. */
.qr-devmark:hover,
section:hover > .qr-devmark,
header:hover > .qr-devmark {
    color: var(--qr-ink-2);
}

.qr-devmark:hover .qr-devmark-chevron {
    opacity: 1;
}


/* ------------------------------------------------------------
   2. FIL D'ARIANE
   ------------------------------------------------------------ */

.qr-breadcrumb-v26 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 var(--qr-s2);
    font-family: var(--qr-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--qr-ink-3);
}

.qr-breadcrumb-v26.is-centered {
    justify-content: center;
}

.qr-breadcrumb-v26 a {
    color: var(--qr-ink-3);
    text-decoration: none;
    transition: color 0.2s ease;
}

.qr-breadcrumb-v26 a:hover {
    color: var(--qr-accent);
    text-decoration: none;
}

.qr-breadcrumb-v26 .qr-breadcrumb-sep {
    color: var(--qr-line);
}

.qr-breadcrumb-v26 .qr-breadcrumb-current {
    color: var(--qr-ink-2);
    max-width: 44ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ------------------------------------------------------------
   3. LA CARTE D'ARTICLE
   Un seul composant pour toutes les listes du site.
   ------------------------------------------------------------ */

.qr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--qr-s4) var(--qr-s3);
    max-width: 1280px;   /* plus large que le texte : 4 cartes par rangée */
    margin: 0 auto;
    padding: 0 20px;
    list-style: none;
}

.qr-grid--wide {
    max-width: 1320px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.qr-card {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

.qr-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.qr-card-link:hover {
    text-decoration: none;
}

.qr-card-media {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    transition: transform 0.25s ease;
}

.qr-card-link:hover .qr-card-media {
    transform: translateY(-3px);
}

.qr-card-media .qr-video-frame {
    border-radius: 10px;
    border: 1px solid var(--qr-line);
}

/* Motif fenêtre quand il n'y a ni vidéo ni image : on garde
   l'identité du site plutôt qu'un rectangle vide. */
.qr-card-window {
    display: flex;
    flex-direction: column;
    aspect-ratio: var(--qr-video-ratio, 16 / 9);
    border: 1px solid var(--qr-line);
    border-radius: 10px;
    background: #fafafa;
    overflow: hidden;
}

.qr-card-window .fenetre-top {
    flex: 0 0 auto;
    padding: 2px 6px;
    border-bottom: 1px solid var(--qr-line);
    font-size: 0.7rem;
    letter-spacing: 2px;
    color: var(--qr-ink-3);
    background: #f2f2f2;
}

.qr-card-window-body {
    flex: 1 1 auto;
    padding: 12px 14px;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--qr-ink-2);
    overflow: hidden;
}

.qr-card-body {
    padding: var(--qr-s1) 2px 0;
}

.qr-card-title {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.32;
    color: var(--qr-ink);
    text-wrap: pretty;
    transition: color 0.2s ease;
}

.qr-card-link:hover .qr-card-title {
    color: var(--qr-accent);
}

.qr-card-sub,
.qr-card-excerpt {
    margin: 4px 0 0;
    padding: 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--qr-ink-2);
}

.qr-card-excerpt {
    color: var(--qr-ink-3);
}

.qr-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--qr-s1);
    margin-top: auto;
    padding: var(--qr-s1) 2px 0;
    font-family: var(--qr-mono);
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    color: var(--qr-ink-3);
}

.qr-card-type {
    color: var(--qr-accent);
}


/* ------------------------------------------------------------
   4. EN-TÊTE D'ARCHIVE
   ------------------------------------------------------------ */

.qr-archive-head {
    max-width: 780px;
    margin: 0 auto;
    padding: var(--qr-s5) 20px var(--qr-s4);
    text-align: center;
}

.qr-archive-head .qr-devmark {
    margin-bottom: var(--qr-s2);
}

.qr-archive-title {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: clamp(1.7rem, 4.2vw, 2.6rem);
    line-height: 1.12;
    letter-spacing: -0.015em;
    font-weight: 700;
    color: var(--qr-ink);
    text-wrap: balance;
}

.qr-archive-desc {
    margin: var(--qr-s2) auto 0;
    max-width: 62ch;
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--qr-ink-2);
}

.qr-archive-desc p {
    margin: 0 0 0.7em;
    padding: 0;
}

.qr-archive-count {
    margin: var(--qr-s3) 0 0;
    padding-top: var(--qr-s2);
    border-top: 1px solid var(--qr-line);
    font-family: var(--qr-mono);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    color: var(--qr-ink-3);
}


/* ------------------------------------------------------------
   5. ARTICLE CLASSIQUE : la cover dans l'en-tête
   Avant, une bande de 60vh poussait tout le contenu vers le bas.
   ------------------------------------------------------------ */

.qr-watch-cover {
    display: block;
    margin: var(--qr-s3) 0 0;
    overflow: hidden;
    border-radius: var(--qr-radius);
    background: #f4f4f4;
    box-shadow: 0 18px 50px -24px rgba(19, 19, 19, 0.35);
}

.qr-watch-cover img {
    display: block;
    width: 100%;
    height: auto;
}

/* Compétences affichées sur les projets web. */
.qr-watch-skills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--qr-s1);
    margin-top: var(--qr-s3);
}

.qr-watch-skills .qr-devmark {
    width: 100%;
    justify-content: center;
    margin-bottom: 2px;
}

.qr-watch-skills a {
    padding: 4px 12px;
    border: 1px solid var(--qr-line);
    border-radius: 40px;
    font-family: var(--qr-mono);
    font-size: 0.7rem;
    color: var(--qr-ink-2);
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.qr-watch-skills a:hover {
    border-color: var(--qr-accent);
    color: var(--qr-accent);
    text-decoration: none;
}

/* Les repères dev dans l'en-tête sont centrés comme le reste. */
.qr-watch-hero > .qr-devmark,
.qr-page-hero > .qr-devmark {
    display: flex;
    justify-content: center;
    margin-bottom: var(--qr-s2);
}

.qr-watch-body > .qr-devmark,
.qr-page-body > .qr-devmark {
    margin-bottom: var(--qr-s2);
}

.qr-page-cover .qr-devmark {
    justify-content: center;
    width: 100%;
    margin-bottom: var(--qr-s1);
}

/* Cover pleine largeur : réservée aux articles où tu l'as
   explicitement choisie (cover-full-style, cover-psd-style). */
.qr-cover-bleed {
    width: 100%;
    margin: 0 0 var(--qr-s4);
}

.qr-cover-bleed img {
    display: block;
    width: 100%;
    height: auto;
}


/* ------------------------------------------------------------
   6. PAGES
   ------------------------------------------------------------ */

.qr-page {
    padding: 0 20px;
}

.qr-page-hero {
    max-width: 780px;
    margin: 0 auto;
    padding-top: var(--qr-s5);
    text-align: center;
}

.qr-page-title {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: clamp(1.7rem, 4.2vw, 2.6rem);
    line-height: 1.12;
    letter-spacing: -0.015em;
    font-weight: 700;
    color: var(--qr-ink);
    text-wrap: balance;
}

.qr-page-body {
    max-width: var(--qr-measure);
    margin: var(--qr-s5) auto 0;
    font-size: 1.0625rem;
    line-height: 1.68;
    color: #1f1f1f;
    text-wrap: pretty;
}

.qr-page-body > * { max-width: 100%; }
.qr-page-body p { margin: 0 0 1.35em; padding: 0; }

.qr-page-body h2,
.qr-page-body h3 {
    padding: 0;
    border: 0;
    color: var(--qr-ink);
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.qr-page-body h2 { margin: var(--qr-s5) 0 var(--qr-s2); font-size: 1.55rem; line-height: 1.22; font-weight: 700; }
.qr-page-body h3 { margin: var(--qr-s4) 0 var(--qr-s1); font-size: 1.2rem; line-height: 1.3; font-weight: 600; }

.qr-page-body img,
.qr-page-body iframe,
.qr-page-body video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.qr-page-body figure { margin: var(--qr-s4) 0; }

.qr-page-body ul,
.qr-page-body ol { margin: 0 0 1.35em 1.1em; padding: 0; }
.qr-page-body li { list-style-type: disc; margin: 0.35em 0; }
.qr-page-body ol li { list-style-type: decimal; }

.qr-page-cover {
    max-width: var(--qr-hero-h);
    margin: var(--qr-s4) auto 0;
}

.qr-page-cover img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--qr-radius);
}


/* ------------------------------------------------------------
   7. PAGE DE RECHERCHE
   ------------------------------------------------------------ */

.qr-search {
    padding: 0 20px var(--qr-s6);
}

.qr-search-hero {
    max-width: 780px;
    margin: 0 auto;
    padding-top: var(--qr-s5);
    text-align: center;
}

.qr-search-form {
    display: flex;
    align-items: center;
    gap: var(--qr-s1);
    max-width: 620px;
    margin: var(--qr-s3) auto 0;
    padding: 6px 6px 6px 18px;
    border: 1px solid var(--qr-line);
    border-radius: 40px;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.qr-search-form:focus-within {
    border-color: var(--qr-accent);
    box-shadow: 0 0 0 4px rgba(11, 214, 95, 0.12);
}

.qr-search-form input[type="search"],
.qr-search-form input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 1rem;
    color: var(--qr-ink);
}

.qr-search-form input:focus {
    outline: none;
}

.qr-search-form button {
    flex: 0 0 auto;
    padding: 10px 22px;
    border: 0;
    border-radius: 40px;
    background: var(--qr-ink);
    color: #fff;
    font-family: var(--qr-mono);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.2s ease;
}

.qr-search-form button:hover,
.qr-search-form button:focus-visible {
    background: var(--qr-accent);
}

/* suggestions sous le champ */
.qr-search-suggest {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--qr-s1);
    margin: var(--qr-s3) auto 0;
    max-width: 780px;
}

.qr-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border: 1px solid var(--qr-line);
    border-radius: 40px;
    font-family: var(--qr-mono);
    font-size: 0.72rem;
    color: var(--qr-ink-2);
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.qr-chip:hover {
    border-color: var(--qr-accent);
    color: var(--qr-accent);
    text-decoration: none;
}

.qr-chip-count {
    color: var(--qr-ink-3);
}

.qr-chip.is-active {
    border-color: var(--qr-ink);
    background: var(--qr-ink);
    color: #fff;
}

.qr-search-section {
    max-width: var(--qr-wide);
    margin: var(--qr-s5) auto 0;
    padding-top: var(--qr-s4);
    border-top: 1px solid var(--qr-line);
}

.qr-search-section:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.qr-search-label {
    margin: 0 0 var(--qr-s3);
    padding: 0 20px;
    font-family: var(--qr-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: var(--qr-ink-3);
    text-align: center;
}

/* aucun résultat */
.qr-search-empty {
    max-width: 620px;
    margin: var(--qr-s4) auto 0;
    padding: var(--qr-s4) var(--qr-s3);
    border: 1px dashed var(--qr-line);
    border-radius: var(--qr-radius);
    text-align: center;
    color: var(--qr-ink-2);
}

.qr-search-empty strong {
    display: block;
    margin-bottom: var(--qr-s1);
    font-size: 1.05rem;
    color: var(--qr-ink);
}

/* liens de rattrapage */
.qr-routes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--qr-s2);
    max-width: var(--qr-wide);
    margin: var(--qr-s4) auto 0;
    padding: 0 20px;
}

.qr-route {
    display: block;
    padding: var(--qr-s3);
    border: 1px solid var(--qr-line);
    border-radius: var(--qr-radius);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.qr-route:hover {
    border-color: var(--qr-accent);
    transform: translateY(-2px);
    text-decoration: none;
}

.qr-route-kicker {
    display: block;
    margin-bottom: 6px;
    font-family: var(--qr-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: var(--qr-accent);
}

.qr-route-title {
    display: block;
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--qr-ink);
}

.qr-route-desc {
    display: block;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--qr-ink-2);
}


/* ------------------------------------------------------------
   8. BARRE D'ÉDITION
   Remplace les deux boutons qui n'avaient ni le même style
   ni la même place.
   ------------------------------------------------------------ */

.qr-editbar {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 10000;
    font-family: var(--qr-mono);
}

.qr-editbar-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid var(--qr-line);
    border-radius: 40px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 6px 24px -10px rgba(0, 0, 0, 0.4);
    color: var(--qr-ink-2);
    font-family: inherit;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.qr-editbar-toggle:hover,
.qr-editbar-toggle:focus-visible {
    border-color: var(--qr-ink);
    color: var(--qr-ink);
    outline: none;
}

.qr-editbar-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--qr-accent);
    flex: 0 0 auto;
}

.qr-editbar-dot.is-warn {
    background: var(--qr-warn);
}

.qr-editbar-count {
    padding: 0 6px;
    border-radius: 20px;
    background: #fff4d6;
    color: #7a5b00;
    font-size: 0.68rem;
}

.qr-editbar-panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    width: 290px;
    padding: var(--qr-s2);
    border: 1px solid var(--qr-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 44px -18px rgba(0, 0, 0, 0.45);
    font-size: 0.74rem;
    line-height: 1.55;
    color: var(--qr-ink-2);
}

.qr-editbar-head {
    margin: 0 0 var(--qr-s1);
    padding: 0 0 var(--qr-s1);
    border-bottom: 1px solid var(--qr-line);
    color: var(--qr-ink);
    letter-spacing: 0.05em;
}

.qr-editbar-list {
    margin: 0 0 var(--qr-s2);
    padding-left: 15px;
}

.qr-editbar-list li {
    list-style-type: disc;
    margin: 3px 0;
    color: #7a5b00;
}

.qr-editbar-ok {
    margin: 0 0 var(--qr-s2);
    color: var(--qr-accent);
}

.qr-editbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.qr-editbar-actions a {
    padding: 6px 12px;
    border: 1px solid var(--qr-line);
    border-radius: 20px;
    color: var(--qr-ink-2);
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.qr-editbar-actions a:hover {
    border-color: var(--qr-accent);
    color: var(--qr-accent);
    text-decoration: none;
}


/* ------------------------------------------------------------
   9. CONFORT ET ACCESSIBILITÉ
   ------------------------------------------------------------ */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--qr-accent);
    outline-offset: 3px;
    border-radius: 3px;
}

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


/* ------------------------------------------------------------
   10. MOBILE
   ------------------------------------------------------------ */

@media (max-width: 800px) {

    .qr-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: var(--qr-s3) var(--qr-s2);
        padding: 0 16px;
    }

    .qr-archive-head,
    .qr-page-hero,
    .qr-search-hero {
        padding-top: var(--qr-s4);
        padding-left: 16px;
        padding-right: 16px;
    }

    .qr-page,
    .qr-search { padding-left: 16px; padding-right: 16px; }

    .qr-page-body {
        margin-top: var(--qr-s4);
        font-size: 1rem;
    }

    .qr-search-form {
        padding-left: 14px;
    }

    .qr-search-form button {
        padding: 10px 16px;
    }

    .qr-routes { padding: 0 16px; }

    .qr-editbar { right: 10px; bottom: 10px; }
    .qr-editbar-panel { width: min(290px, calc(100vw - 32px)); }
}


/* ------------------------------------------------------------
   11. PIED DE PAGE : signature et slogan
   ------------------------------------------------------------ */

.qr-credit {
    padding: var(--qr-s4) 20px var(--qr-s3);
    border-top: 1px solid var(--qr-line);
    text-align: center;
    background: #fff;
}

.qr-credit-line {
    margin: 0;
    padding: 0;
    font-family: var(--qr-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--qr-ink-3);
}

.qr-credit-slogan {
    display: inline-block;
    margin: var(--qr-s1) auto 0;
    padding: 4px 2px;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 0.82rem;
    font-style: italic;
    line-height: 1.45;
    color: var(--qr-ink-2);
    cursor: pointer;
    transition: opacity 0.16s ease, color 0.2s ease;
    text-wrap: balance;
}

.qr-credit-slogan::before { content: "\201C"; opacity: 0.45; }
.qr-credit-slogan::after  { content: "\201D"; opacity: 0.45; }

.qr-credit-slogan:hover,
.qr-credit-slogan:focus-visible {
    color: var(--qr-accent);
}


/* ------------------------------------------------------------
   12. PAGINATION DES ARCHIVES
   ------------------------------------------------------------ */

.qr-archive-pagination,
.qr-search-pagination {
    max-width: var(--qr-wide);
    margin: var(--qr-s5) auto 0;
    padding: 0 20px;
    text-align: center;
}

.qr-archive-pagination ul,
.qr-search-pagination ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.qr-archive-pagination li,
.qr-search-pagination li {
    list-style: none;
    margin: 0;
}

.qr-archive-pagination a,
.qr-archive-pagination span,
.qr-search-pagination a,
.qr-search-pagination span {
    display: inline-block;
    min-width: 34px;
    padding: 7px 12px;
    border: 1px solid var(--qr-line);
    border-radius: 20px;
    font-family: var(--qr-mono);
    font-size: 0.74rem;
    color: var(--qr-ink-2);
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.qr-archive-pagination a:hover,
.qr-search-pagination a:hover {
    border-color: var(--qr-accent);
    color: var(--qr-accent);
    text-decoration: none;
}

.qr-archive-pagination .current,
.qr-search-pagination .current {
    border-color: var(--qr-ink);
    background: var(--qr-ink);
    color: #fff;
}

/* Article encore en chantier : signalé discrètement. */
.qr-card.is-draftish .qr-card-media {
    opacity: 0.72;
}

.qr-card.is-draftish .qr-card-type::before {
    content: "en cours · ";
    color: var(--qr-ink-3);
}


/* ------------------------------------------------------------
   13. DÉFILEMENT ET TITRE DÉFILANT
   ------------------------------------------------------------ */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px; /* pour que l'ancre ne passe pas sous le menu */
}

/* Remplace l'ancienne balise <marquee> créée en JavaScript. */
.qr-marquee {
    display: block;
    overflow: hidden;
    white-space: nowrap;
}

.qr-marquee > * ,
.qr-marquee {
    animation: qr-marquee-defile 14s linear infinite;
}

@keyframes qr-marquee-defile {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}


/* ------------------------------------------------------------
   14. LIEN D'ÉVITEMENT ET CONTRASTE DU MENU
   ------------------------------------------------------------ */

.qr-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    padding: 12px 20px;
    background: var(--qr-ink);
    color: #fff;
    font-family: var(--qr-mono);
    font-size: 0.78rem;
    text-decoration: none;
    border-radius: 0 0 10px 0;
}

.qr-skip:focus {
    left: 0;
    color: #fff;
    text-decoration: none;
}

/* Le menu utilise mix-blend-mode + invert : très joli, mais le
   contraste dépend de ce qu'il y a derrière. Pour les personnes qui
   demandent un contraste renforcé, on rend le menu franchement lisible. */
@media (prefers-contrast: more) {
    .newheader_v25 {
        mix-blend-mode: normal;
        filter: none;
        color: #000;
    }
    .newheader_v25 .brut_menu-burger,
    .newheader_v25 .menu-icon,
    .newheader_v25 .close-icon {
        background: #fff;
        color: #000;
        padding: 2px 8px;
        border-radius: 20px;
    }
}


/* ------------------------------------------------------------
   15. MENU DU PIED DE PAGE
   ------------------------------------------------------------ */

.qr-sitemenu-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.qr-sitemenu-list li {
    margin: 0;
    list-style: none;
}

.qr-sitemenu-list a {
    font-family: var(--qr-mono);
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    color: var(--qr-ink-2);
    text-decoration: none;
    transition: color 0.2s ease;
}

.qr-sitemenu-list a:hover {
    color: var(--qr-accent);
    text-decoration: none;
}


/* ------------------------------------------------------------
   16. ARTICLE PRÉCÉDENT ET SUIVANT
   ------------------------------------------------------------ */

.qr-postnav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--qr-s2);
    max-width: 840px;
    margin: 0 auto;
}

.qr-postnav-item {
    display: flex;
    flex-direction: column;
    gap: var(--qr-s1);
    padding: var(--qr-s3);
    border: 1px solid var(--qr-line);
    border-radius: var(--qr-radius);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.qr-postnav-item:hover {
    border-color: var(--qr-accent);
    transform: translateY(-2px);
    text-decoration: none;
}

.qr-postnav-item.is-empty {
    border: 1px dashed var(--qr-line);
    opacity: 0.35;
    min-height: 90px;
}

.qr-postnav-item.is-next {
    text-align: right;
}

.qr-postnav-kicker {
    font-family: var(--qr-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--qr-ink-3);
}

.qr-postnav-thumb img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.qr-postnav-title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--qr-ink);
    text-wrap: pretty;
}

.qr-postnav-item:hover .qr-postnav-title {
    color: var(--qr-accent);
}

@media (max-width: 800px) {
    .qr-postnav-item.is-next { text-align: left; }
}