/*
Theme Name: CT Jeux — Le ticket
Theme URI: https://www.ctjeux.com/
Description: Thème enfant Astra sur-mesure pour ctjeux.com. Direction artistique « Le ticket » : le ticket à gratter comme système — papier bulle, une encre par rubrique, zone argentée à révéler, bords perforés. 100% code, sans builder ni plugin.
Author: RC2I
Author URI: https://rc2i.net/
Template: astra
Version: 1.0.0
Text Domain: ctjeux
*/

/* =====================================================================
   1. DESIGN TOKENS — « Le ticket »
   Le système n'est pas décoratif : c'est celui de l'imprimerie des jeux.
   Un papier, une encre par jeu, une zone argentée, un bord perforé.
   ===================================================================== */
:root {
    /* --- Le papier --- */
    --tk-papier:    #f7f4ec;  /* papier bulle */
    --tk-papier-2:  #efeade;  /* second ton, fonds de bloc */
    --tk-carton:    #191720;  /* le dos du ticket, fonds sombres */
    --tk-carton-2:  #232030;

    /* --- Les encres (une par rubrique) --- */
    --tk-actualite:   #1f4fd8;
    --tk-jeux-flash:  #d92a20;
    --tk-casino:      #0b7a52;
    --tk-poker:       #8a1734;
    --tk-paris:       #c96a00;
    --tk-grattage:    #b3126e;
    --tk-loterie:     #5c22b0;
    --tk-guerre:      #47582f;
    --tk-instant:     #00808f;
    --tk-defaut:      #1f4fd8;

    /* Encre courante d'un bloc : chaque rubrique la redéfinit en ligne. */
    --tk-encre-jeu: var(--tk-defaut);

    /* --- L'argent (la zone à gratter) --- */
    --tk-argent-1: #d5d5db;
    --tk-argent-2: #a8a8b2;
    --tk-argent-3: #8e8e99;

    /* --- Les textes --- */
    --tk-noir:  #16151a;
    --tk-gris:  #5d5a63;
    --tk-filet: #d8d1c1;
    --tk-filet-fort: #b9b1a0;

    /* Sur carton (fonds sombres) */
    --tk-noir-inv: #f7f4ec;
    --tk-gris-inv: #a9a4b5;
    --tk-filet-inv: rgba(247, 244, 236, 0.18);

    /* --- Typographie ---
       Archivo : variable en chasse (wdth), c'est elle qui donne le
       « nom du jeu » imprimé en gras étroit ou large.
       Courier Prime : les numéros de série, exactement comme sur un ticket.
       Instrument Sans : le texte courant. */
    --tk-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --tk-body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --tk-mono: "Courier Prime", "Courier New", ui-monospace, monospace;

    /* --- Rythme --- */
    --tk-radius: 3px;
    --tk-container: 1220px;
    --tk-section-y: clamp(3.5rem, 8vw, 7rem);

    /* Compat moteur Astra/skill */
    --ct-container: var(--tk-container);
    --ct-section-y: var(--tk-section-y);
}

/* =====================================================================
   2. BASE
   ===================================================================== */
body.ct-front,
body.ct-page {
    font-family: var(--tk-body);
    color: var(--tk-noir);
    background: var(--tk-papier);
    -webkit-font-smoothing: antialiased;
}

.ct-front h1, .ct-front h2, .ct-front h3, .ct-front h4,
.ct-page h1, .ct-page h2, .ct-page h3, .ct-page h4 {
    font-family: var(--tk-display);
    font-weight: 800;
    font-variation-settings: "wdth" 100;
    line-height: 1.04;
    letter-spacing: -0.015em;
    color: var(--tk-noir);
    text-wrap: balance;
    margin: 0;
}

.ct-container {
    width: 100%;
    max-width: var(--tk-container);
    margin-inline: auto;
    padding-inline: clamp(1.1rem, 4vw, 2.2rem);
}

/* Le numéro de série : petites capitales machine, comme sur un ticket */
.tk-serie {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--tk-mono);
    font-size: 0.76rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--tk-gris);
}
.tk-serie b { font-weight: 700; color: var(--tk-encre-jeu); }

/* Le bord perforé — un vrai motif, pas une bordure décorative */
.tk-perfo {
    height: 14px;
    background:
        radial-gradient(circle at 7px 0, transparent 6px, var(--tk-papier) 6.5px) repeat-x;
    background-size: 14px 14px;
}
.tk-perfo--bas {
    background:
        radial-gradient(circle at 7px 14px, transparent 6px, var(--tk-papier) 6.5px) repeat-x;
    background-size: 14px 14px;
}

/* Boutons — bloc d'encre plein, angles nets */
.tk-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.9rem 1.6rem;
    font-family: var(--tk-display);
    font-weight: 700;
    font-variation-settings: "wdth" 88;
    font-size: 0.94rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid var(--tk-noir);
    border-radius: var(--tk-radius);
    background: var(--tk-noir);
    color: var(--tk-papier);
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.2s ease, color 0.2s ease;
    box-shadow: 3px 3px 0 var(--tk-encre-jeu);
}
.tk-btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--tk-encre-jeu); color: var(--tk-papier); }
.tk-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--tk-encre-jeu); }

.tk-btn--creux {
    background: transparent;
    color: var(--tk-noir);
    box-shadow: 3px 3px 0 var(--tk-filet-fort);
}
.tk-btn--creux:hover { background: var(--tk-noir); color: var(--tk-papier); box-shadow: 5px 5px 0 var(--tk-filet-fort); }

/* =====================================================================
   3. LA ZONE ARGENTÉE — l'élément signature
   Un calque décoratif posé SUR un contenu qui reste dans le DOM et
   accessible. Il s'efface au survol, au focus, au toucher, et n'apparaît
   pas du tout si l'utilisateur demande moins d'animations.
   ===================================================================== */
.tk-gratter { position: relative; display: inline-block; }
.tk-gratter__voile {
    position: absolute;
    inset: -0.35em -0.6em;
    border-radius: 2px;
    background:
        repeating-linear-gradient(115deg, rgba(255,255,255,0.5) 0 2px, transparent 2px 5px),
        linear-gradient(150deg, var(--tk-argent-1), var(--tk-argent-2) 45%, var(--tk-argent-3));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.14);
    pointer-events: none;
    transform-origin: left center;
    animation: tk-gratter 0.85s cubic-bezier(0.65, 0, 0.35, 1) 1.5s both;
}
@keyframes tk-gratter {
    from { clip-path: inset(0 0 0 0); }
    to   { clip-path: inset(0 0 0 100%); }
}
.tk-gratter:hover .tk-gratter__voile,
.tk-gratter:focus-within .tk-gratter__voile { animation-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
    .tk-gratter__voile { display: none; }
}

/* =====================================================================
   4. EN-TÊTE ET PIED ASTRA — mise au diapason (couleurs seulement)
   ===================================================================== */
.ct-front .site-header,
.ct-page .site-header,
.ct-front .ast-primary-header-bar,
.ct-page .ast-primary-header-bar {
    background-color: var(--tk-papier) !important;
    border-bottom: 2px solid var(--tk-noir);
}
.ct-front .site-header .site-title a,
.ct-page .site-header .site-title a,
.ct-front .main-header-menu a,
.ct-page .main-header-menu a {
    color: var(--tk-noir) !important;
    font-family: var(--tk-display);
    font-weight: 700;
    font-variation-settings: "wdth" 88;
    font-size: 0.92rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.ct-front .main-header-menu a:hover,
.ct-page .main-header-menu a:hover { color: var(--tk-jeux-flash) !important; }
.ct-front .main-navigation .sub-menu,
.ct-page .main-navigation .sub-menu { background: var(--tk-papier) !important; border: 2px solid var(--tk-noir); }

/* En-tête transparent d'Astra : il flotte au-dessus du contenu. On le
   remet en fond papier et on décale, hauteur mesurée en JS. */
body.ast-theme-transparent-header .site-header,
body.ast-theme-transparent-header .ast-primary-header-bar {
    background-color: var(--tk-papier) !important;
}
body.ast-theme-transparent-header .tk-hero,
body.ast-theme-transparent-header .tk-archive-tete {
    padding-top: calc(var(--tk-header-h, 110px) + clamp(1.5rem, 4vw, 2.8rem));
}
body.admin-bar .tk-rubriques--collant { top: 32px; }

/* Pied de page repris en code : celui d'Astra est masqué. */
.ct-front .site-footer,
.ct-page .site-footer,
.ct-front .ast-small-footer,
.ct-page .ast-small-footer { display: none !important; }

/* =====================================================================
   5. HERO — le gros ticket
   ===================================================================== */
.tk-hero {
    position: relative;
    background: var(--tk-carton);
    color: var(--tk-noir-inv);
    padding-top: clamp(2.4rem, 6vw, 4.2rem);
    overflow: hidden;
}
/* Trame d'impression très ténue */
.tk-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(247,244,236,0.08) 1px, transparent 1.6px);
    background-size: 7px 7px;
    pointer-events: none;
}
.tk-hero__inner { position: relative; z-index: 2; padding-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.tk-hero .tk-serie { color: var(--tk-gris-inv); }
.tk-hero .tk-serie b { color: #ffd23f; }

.tk-hero h1 {
    color: var(--tk-noir-inv);
    font-size: clamp(2.4rem, 7.2vw, 5.4rem);
    font-variation-settings: "wdth" 112;
    line-height: 0.96;
    letter-spacing: -0.03em;
    margin: 1.1rem 0 0;
    max-width: 16ch;
}
.tk-hero h1 em {
    font-style: normal;
    color: #ffd23f;
    -webkit-text-stroke: 0;
}
.tk-hero__accroche {
    margin: 1.5rem 0 0;
    font-size: clamp(1.02rem, 1.6vw, 1.2rem);
    line-height: 1.62;
    color: var(--tk-gris-inv);
    max-width: 56ch;
}
.tk-hero__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.2rem; }
.tk-hero .tk-btn { background: #ffd23f; color: var(--tk-carton); border-color: #ffd23f; box-shadow: 3px 3px 0 rgba(247,244,236,0.35); }
.tk-hero .tk-btn:hover { background: #ffdf70; border-color: #ffdf70; color: var(--tk-carton); }
.tk-hero .tk-btn--creux { background: transparent; color: var(--tk-noir-inv); border-color: var(--tk-filet-inv); box-shadow: none; }
.tk-hero .tk-btn--creux:hover { border-color: #ffd23f; color: #ffd23f; background: transparent; }

/* Le voile argenté du hero, sur le fond carton */
.tk-hero .tk-gratter__voile { box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(0,0,0,0.3); }

/* Bord perforé bas du hero, découpé dans le papier */
.tk-hero__perfo {
    position: relative;
    z-index: 2;
    height: 15px;
    background: radial-gradient(circle at 7.5px 15px, var(--tk-papier) 6px, transparent 6.5px) repeat-x;
    background-size: 15px 15px;
}

/* =====================================================================
   6. LES RUBRIQUES — neuf tickets, neuf encres
   ===================================================================== */
.tk-section { padding-block: var(--tk-section-y); }
.tk-section--papier2 { background: var(--tk-papier-2); }

.tk-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.4rem; flex-wrap: wrap; margin-bottom: clamp(1.6rem, 3vw, 2.6rem); }
.tk-tete h2 { font-size: clamp(1.7rem, 4vw, 2.9rem); font-variation-settings: "wdth" 104; }
.tk-tete p { margin: 0.7rem 0 0; color: var(--tk-gris); line-height: 1.65; max-width: 58ch; font-size: 1.03rem; }

.tk-jeux { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 1.1rem; }
.tk-jeu {
    position: relative;
    display: block;
    background: var(--tk-papier);
    border: 2px solid var(--tk-noir);
    border-radius: var(--tk-radius);
    padding: 1.1rem 1.15rem 1.15rem;
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.14s ease, box-shadow 0.14s ease;
    box-shadow: 4px 4px 0 var(--tk-encre-jeu);
}
.tk-jeu:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--tk-encre-jeu); }
/* Le bandeau d'encre en tête de ticket */
.tk-jeu::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 7px;
    background: var(--tk-encre-jeu);
}
.tk-jeu__no { display: block; margin-top: 0.35rem; font-family: var(--tk-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tk-gris); }
.tk-jeu__nom {
    display: block;
    margin: 0.45rem 0 0.9rem;
    font-family: var(--tk-display);
    font-weight: 800;
    font-variation-settings: "wdth" 86;
    font-size: 1.32rem;
    line-height: 1.08;
    text-transform: uppercase;
    color: var(--tk-noir);
}
/* La case argentée : elle porte le compteur, révélé au survol */
.tk-jeu__case {
    position: relative;
    display: block;
    border: 1px dashed var(--tk-filet-fort);
    border-radius: 2px;
    padding: 0.5rem 0.7rem;
    font-family: var(--tk-mono);
    font-size: 0.82rem;
    color: var(--tk-noir);
    background: var(--tk-papier-2);
    overflow: hidden;
}
.tk-jeu__case::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(115deg, rgba(255,255,255,0.5) 0 2px, transparent 2px 5px),
        linear-gradient(150deg, var(--tk-argent-1), var(--tk-argent-2) 45%, var(--tk-argent-3));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
    transition: clip-path 0.45s cubic-bezier(0.65, 0, 0.35, 1);
    clip-path: inset(0 0 0 0);
}
.tk-jeu:hover .tk-jeu__case::after,
.tk-jeu:focus-visible .tk-jeu__case::after { clip-path: inset(0 0 0 100%); }
@media (prefers-reduced-motion: reduce) {
    .tk-jeu__case::after { display: none; }
}
@media (hover: none) {
    .tk-jeu__case::after { display: none; }
}

/* =====================================================================
   7. CARTES ARTICLES — des tickets détachés
   ===================================================================== */
.ct-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.ct-card {
    display: flex;
    flex-direction: column;
    background: var(--tk-papier);
    border: 2px solid var(--tk-noir);
    border-radius: var(--tk-radius);
    overflow: hidden;
    transition: transform 0.14s ease, box-shadow 0.14s ease;
    box-shadow: 4px 4px 0 var(--tk-encre-jeu);
}
.ct-card:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--tk-encre-jeu); }
.ct-card__media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-bottom: 2px solid var(--tk-noir);
    background:
        repeating-linear-gradient(45deg, var(--tk-papier-2) 0 10px, #e6e0d1 10px 20px);
    position: relative;
}
.ct-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ct-card__body { padding: 1.05rem 1.15rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
.ct-card__cat {
    align-self: flex-start;
    font-family: var(--tk-display);
    font-weight: 700;
    font-variation-settings: "wdth" 84;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tk-papier);
    background: var(--tk-encre-jeu);
    padding: 0.22rem 0.5rem;
    border-radius: 2px;
    margin-bottom: 0.7rem;
}
.ct-card__title {
    font-family: var(--tk-display);
    font-weight: 800;
    font-variation-settings: "wdth" 96;
    font-size: 1.18rem;
    line-height: 1.16;
    margin: 0 0 0.55rem;
}
.ct-card__title a { color: var(--tk-noir); text-decoration: none; }
.ct-card__title a:hover { color: var(--tk-encre-jeu); }
.ct-card__excerpt { margin: 0 0 1.1rem; color: var(--tk-gris); font-size: 0.95rem; line-height: 1.6; }
.ct-card__meta { margin-top: auto; font-family: var(--tk-mono); font-size: 0.74rem; letter-spacing: 0.04em; color: var(--tk-gris); }

/* =====================================================================
   8. SOMMAIRE DES ARCHIVES — deux colonnes, façon ours
   ===================================================================== */
.tk-somm { margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.tk-somm__tete {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1.2rem;
    padding-bottom: 0.8rem;
    border-bottom: 2px solid var(--tk-noir);
}
.tk-somm__tete h3 { font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-variation-settings: "wdth" 96; text-transform: uppercase; }
.tk-somm__compte { font-family: var(--tk-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tk-gris); white-space: nowrap; }
.tk-somm__liste {
    list-style: none; margin: 0; padding: 0;
    columns: 2;
    column-gap: clamp(1.6rem, 4vw, 3.4rem);
    column-rule: 1px dashed var(--tk-filet-fort);
}
.tk-somm__liste li { break-inside: avoid; }
.tk-somm__liste a {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 0.9rem;
    align-items: baseline;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--tk-filet);
    text-decoration: none;
    transition: padding-left 0.18s ease;
}
.tk-somm__liste a:hover { padding-left: 0.35rem; }
.tk-somm__liste time { font-family: var(--tk-mono); font-size: 0.72rem; color: var(--tk-gris); white-space: nowrap; }
.tk-somm__t {
    font-family: var(--tk-display);
    font-weight: 700;
    font-variation-settings: "wdth" 92;
    font-size: 1rem;
    line-height: 1.26;
    color: var(--tk-noir);
    text-wrap: pretty;
}
.tk-somm__liste a:hover .tk-somm__t,
.tk-somm__liste a:hover time { color: var(--tk-encre-jeu); }

/* =====================================================================
   9. BLOC JEU RESPONSABLE
   ===================================================================== */
.tk-avertir {
    border: 2px solid var(--tk-noir);
    border-radius: var(--tk-radius);
    background: var(--tk-papier);
    padding: clamp(1.3rem, 3vw, 2rem);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(1rem, 3vw, 1.8rem);
    align-items: start;
}
.tk-avertir__pastille {
    width: 54px; height: 54px;
    border-radius: 50%;
    border: 2px solid var(--tk-noir);
    display: grid; place-items: center;
    font-family: var(--tk-display);
    font-weight: 800;
    font-size: 1.5rem;
    background: #ffd23f;
    flex: 0 0 auto;
}
.tk-avertir h3 { font-size: 1.2rem; font-variation-settings: "wdth" 96; margin-bottom: 0.5rem; text-transform: uppercase; }
.tk-avertir p { margin: 0 0 0.6rem; color: var(--tk-gris); line-height: 1.65; font-size: 0.98rem; }
.tk-avertir p:last-child { margin-bottom: 0; }
.tk-avertir a { color: var(--tk-noir); text-decoration: underline; text-underline-offset: 2px; }

/* =====================================================================
   10. GABARITS ARCHIVE / ARTICLE / PAGE
   ===================================================================== */
.tk-archive-tete {
    background: var(--tk-carton);
    color: var(--tk-noir-inv);
    padding-top: clamp(2.2rem, 5vw, 3.6rem);
    padding-bottom: clamp(2.2rem, 5vw, 3.4rem);
    position: relative;
}
.tk-archive-tete::before {
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(247,244,236,0.08) 1px, transparent 1.6px);
    background-size: 7px 7px;
}
.tk-archive-tete > * { position: relative; z-index: 2; }
.tk-archive-tete h1 { color: var(--tk-noir-inv); font-size: clamp(2rem, 5.4vw, 3.6rem); font-variation-settings: "wdth" 108; margin: 0.9rem 0 0; max-width: 20ch; }
.tk-archive-tete .tk-serie { color: var(--tk-gris-inv); }
.tk-archive-tete .tk-serie b { color: var(--tk-encre-jeu); filter: brightness(1.85); }
/* Le chapeau de rubrique — c'est LUI qui porte le référencement */
.tk-chapo { margin: 1.3rem 0 0; max-width: 68ch; color: var(--tk-gris-inv); line-height: 1.72; font-size: 1.05rem; }
.tk-chapo p { margin: 0 0 0.85rem; }
.tk-chapo p:last-child { margin-bottom: 0; }
.tk-chapo a { color: #ffd23f; }
.tk-archive-tete__compte {
    display: inline-block; margin-top: 1.3rem;
    font-family: var(--tk-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--tk-carton); background: #ffd23f; padding: 0.3rem 0.7rem; border-radius: 2px;
}
.tk-archive-tete__perfo {
    height: 15px;
    background: radial-gradient(circle at 7.5px 15px, var(--tk-papier) 6px, transparent 6.5px) repeat-x;
    background-size: 15px 15px;
    position: relative; z-index: 2;
}

.tk-archive { padding-block: var(--tk-section-y); }
.ct-empty { text-align: center; color: var(--tk-gris); padding-block: 2rem; }

.ct-pagination { margin-top: 2.8rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 0.45rem; }
.ct-pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; height: 44px; padding: 0 0.85rem;
    border: 2px solid var(--tk-noir);
    border-radius: var(--tk-radius);
    color: var(--tk-noir);
    font-family: var(--tk-mono); font-size: 0.88rem;
    text-decoration: none;
    background: var(--tk-papier);
}
.ct-pagination a.page-numbers:hover { background: var(--tk-noir); color: var(--tk-papier); }
.ct-pagination .page-numbers.current { background: var(--tk-encre-jeu); border-color: var(--tk-encre-jeu); color: var(--tk-papier); }
.ct-pagination .page-numbers.dots { border-color: transparent; background: transparent; }

/* Fil d'Ariane + méta article */
.tk-fil { display: flex; flex-wrap: wrap; gap: 0.45rem; font-family: var(--tk-mono); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tk-gris-inv); margin-bottom: 0.9rem; }
.tk-fil a { color: #ffd23f; text-decoration: none; }
.tk-fil a:hover { text-decoration: underline; }
.tk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 1.1rem; font-family: var(--tk-mono); font-size: 0.78rem; color: var(--tk-gris-inv); }

/* La feuille de lecture */
.tk-feuille-wrap { padding-block: clamp(2rem, 5vw, 3.2rem) var(--tk-section-y); }
.tk-feuille {
    background: var(--tk-papier);
    border: 2px solid var(--tk-noir);
    border-radius: var(--tk-radius);
    box-shadow: 6px 6px 0 var(--tk-encre-jeu);
    padding: clamp(1.5rem, 5vw, 3.6rem) clamp(1.2rem, 5vw, 4rem);
    max-width: 880px;
    margin-inline: auto;
}
.ct-single__cover { margin: 0; }
.ct-single__cover .ct-container { max-width: 940px; padding-top: clamp(1.6rem, 4vw, 2.6rem); }
.ct-single__cover img { display: block; width: 100%; height: auto; border: 2px solid var(--tk-noir); border-radius: var(--tk-radius); }

.ct-prose { max-width: 68ch; margin-inline: auto; overflow-wrap: break-word; }
.ct-prose > *:first-child { margin-top: 0; }
.ct-prose p { font-size: 1.08rem; line-height: 1.78; margin: 0 0 1.3rem; }
.ct-prose h2 { font-family: var(--tk-display); font-weight: 800; font-variation-settings: "wdth" 100; font-size: clamp(1.45rem, 3vw, 1.95rem); line-height: 1.12; margin: 2.5rem 0 0.9rem; }
.ct-prose h3 { font-family: var(--tk-display); font-weight: 700; font-variation-settings: "wdth" 94; font-size: 1.28rem; line-height: 1.2; margin: 1.9rem 0 0.7rem; }
.ct-prose a { color: var(--tk-encre-jeu); text-decoration: underline; text-underline-offset: 2px; }
.ct-prose ul, .ct-prose ol { margin: 0 0 1.3rem; padding-left: 1.2rem; line-height: 1.78; font-size: 1.06rem; }
.ct-prose li { margin-bottom: 0.35rem; }
.ct-prose img { max-width: 100%; height: auto; border-radius: 2px; }
.ct-prose figure { margin: 1.8rem 0; max-width: 100%; }
.ct-prose figure img { width: auto; max-width: 100%; }
.ct-prose figcaption { text-align: center; font-family: var(--tk-mono); font-size: 0.82rem; color: var(--tk-gris); margin-top: 0.5rem; }
.ct-prose blockquote {
    margin: 1.9rem 0;
    padding: 0.3rem 0 0.3rem 1.3rem;
    border-left: 4px solid var(--tk-encre-jeu);
    font-family: var(--tk-display);
    font-weight: 600;
    font-variation-settings: "wdth" 102;
    font-size: 1.18rem;
    line-height: 1.42;
}
.ct-prose blockquote p:last-child { margin-bottom: 0; }
.ct-prose hr { border: 0; border-top: 2px dashed var(--tk-filet-fort); margin: 2.2rem 0; }
.ct-prose iframe, .ct-prose video, .ct-prose embed, .ct-prose object { max-width: 100% !important; }
.ct-prose iframe { width: 100%; }
.ct-prose .wp-caption { max-width: 100% !important; height: auto; }
.ct-prose table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; margin: 1.5rem 0; font-size: 0.97rem; }
.ct-prose th, .ct-prose td { border: 1px solid var(--tk-filet-fort); padding: 0.55rem 0.75rem; text-align: left; }
.ct-prose th { background: var(--tk-papier-2); font-family: var(--tk-mono); font-size: 0.85rem; }
.ct-prose .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.ct-prose .alignright { float: right; margin: 0.4rem 0 1rem 1.4rem; max-width: 50%; }
.ct-prose .alignleft { float: left; margin: 0.4rem 1.4rem 1rem 0; max-width: 50%; }
.ct-prose .alignwide, .ct-prose .alignfull, .ct-prose .wp-block-image { max-width: 100%; }
.ct-prose::after { content: ""; display: block; clear: both; }
.ct-prose [style*="width"] { max-width: 100% !important; }
.ct-prose * { max-width: 100%; }

.ct-tags { margin-top: 2.2rem; padding-top: 1.3rem; border-top: 2px dashed var(--tk-filet-fort); font-family: var(--tk-mono); font-size: 0.8rem; color: var(--tk-gris); }
.ct-tags a { display: inline-block; margin: 0 0.3rem 0.3rem 0; padding: 0.24rem 0.6rem; border: 1px solid var(--tk-filet-fort); border-radius: 2px; color: var(--tk-noir); text-decoration: none; }
.ct-tags a:hover { background: var(--tk-noir); color: var(--tk-papier); }
.ct-pagelinks { margin-top: 1.4rem; font-family: var(--tk-mono); font-size: 0.86rem; }

.tk-lies { padding-block: var(--tk-section-y); background: var(--tk-papier-2); }

/* =====================================================================
   11. PIED DE PAGE
   ===================================================================== */
.tk-footer { background: var(--tk-carton); color: var(--tk-gris-inv); }
.tk-footer__encres { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: 6px; }
.tk-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) repeat(2, minmax(0, 1fr));
    gap: clamp(1.6rem, 5vw, 3.6rem);
    padding-block: clamp(2.4rem, 5vw, 3.6rem) 1.8rem;
}
.tk-footer__nom { font-family: var(--tk-display); font-weight: 800; font-variation-settings: "wdth" 104; font-size: 1.5rem; text-transform: uppercase; color: var(--tk-noir-inv); margin: 0 0 0.7rem; }
.tk-footer__bl { margin: 0; line-height: 1.65; max-width: 42ch; font-size: 0.96rem; }
.tk-footer h2 {
    font-family: var(--tk-mono);
    font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: #ffd23f; margin: 0 0 0.9rem;
}
.tk-footer ul { list-style: none; margin: 0; padding: 0; }
.tk-footer li { margin-bottom: 0.5rem; }
.tk-footer li a { color: var(--tk-gris-inv); text-decoration: none; font-size: 0.97rem; }
.tk-footer li a:hover { color: #ffd23f; }
.tk-footer__bas {
    display: flex; flex-wrap: wrap; gap: 0.7rem 1.5rem;
    align-items: baseline; justify-content: space-between;
    padding-block: 1.1rem 1.5rem;
    border-top: 1px solid var(--tk-filet-inv);
    font-family: var(--tk-mono); font-size: 0.73rem; letter-spacing: 0.04em;
}
.tk-footer__legal { color: #ffd23f; }

/* =====================================================================
   12. RESPONSIVE
   ===================================================================== */
@media (max-width: 1024px) {
    .ct-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
    .tk-footer__grid { grid-template-columns: 1fr; }
    .tk-avertir { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .tk-somm__liste { columns: 1; column-rule: 0; }
}
@media (max-width: 620px) {
    .ct-posts { grid-template-columns: 1fr; }
    .tk-jeux { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* =====================================================================
   13. ACCESSIBILITÉ
   ===================================================================== */
.ct-front a:focus-visible, .ct-page a:focus-visible,
.tk-btn:focus-visible, .tk-jeu:focus-visible {
    outline: 3px solid var(--tk-actualite);
    outline-offset: 2px;
}
.tk-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
    .tk-btn, .tk-jeu, .ct-card, .tk-somm__liste a { transition: none; }
    html { scroll-behavior: auto; }
}

/* =====================================================================
   14. PLEINE LARGEUR — annulation du conteneur flex d'Astra
   Astra met `.site-content > .ast-container` en display:flex pour loger
   une colonne latérale ; un <main> custom se cale alors à gauche.
   IMPORTANT : ne cibler QUE `.site-content`, jamais l'en-tête.
   ===================================================================== */
body.ct-front, body.ct-page { overflow-x: clip; }

.ct-front .site-content, .ct-page .site-content { padding: 0 !important; background: var(--tk-papier); }

.ct-front .site-content .ast-container,
.ct-page  .site-content .ast-container {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
}
.ct-front .site-content #primary,     .ct-page .site-content #primary,
.ct-front .site-content .site-main,   .ct-page .site-content .site-main,
.ct-front .site-content .content-area,.ct-page .site-content .content-area,
.ct-front #ct-content, .ct-page #ct-content,
.ct-front .site-content > .ast-container > main,
.ct-page  .site-content > .ast-container > main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    flex: 1 1 100% !important;
}
.ct-front #secondary, .ct-page #secondary { display: none !important; }
.ct-front .ct-container, .ct-page .ct-container { margin-left: auto !important; margin-right: auto !important; box-sizing: border-box; }

.ct-photo-credits { text-align: center; font-family: var(--tk-mono); font-size: 0.72rem; color: var(--tk-gris-inv); padding: 0.8rem 1rem; background: var(--tk-carton); }