/* ============================================================
   Tu sais-tu — couche de marque
   Chargee apres le CSS commun. Style affiche: Archivo Black en
   titrage, Literata en texte, aucun rayon, aucune ombre, des
   aplats de couleur plutot que des cartes.
   ============================================================ */

/* --- Titrage --- */
.section-title,
.card-title,
.quiz-title,
.result-title,
.question-text,
.personality-result-title,
.answer-review-header,
.footer-logo span,
.sidebar-header strong,
.logo-text {
    font-family: var(--font-display);
    font-weight: 400;
}

.section-title {
    position: relative;
    padding-bottom: 10px;
    font-size: clamp(1.25rem, 4.4vw, 1.6rem);
    letter-spacing: -0.005em;
    text-transform: uppercase;
}
.section-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 5px;
    background: var(--color-accent);
}
.text-center .section-title::after,
.section-title.text-center::after { left: 50%; transform: translateX(-50%); }

/* Le corps de texte reste en serif, y compris dans les blocs d'admin. */
.card-description,
.quiz-about,
.quiz-article p,
.result-description,
.personality-result-desc,
.option-text,
.review-question-text,
.review-explanation {
    font-family: var(--font-family);
}

/* --- Entete: filet rouge + aplat bleu, mot-symbole blanc ---
   Le filet est une bordure de l'entete, pas un bloc separe: l'entete
   etant en position sticky, le rouge reste visible pendant le defilement.
   --header-h doit valoir la hauteur totale (filet compris): la barre de
   progression du quiz s'y accroche. */
:root { --header-h: 70px; }

.site-header {
    background: var(--color-header-bg);
    border-top: 6px solid var(--color-accent);
    border-bottom: 0;
}

/* La barre de progression se cale sous l'entete, jamais par-dessus. */
.quiz-progress { top: var(--header-h); }

.site-logo a {
    color: var(--color-on-dark);
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    font-size: 1.35rem;
}

.logo-text { display: inline-flex; gap: 0.28em; }
.logo-tu   { color: var(--color-on-dark); }
.logo-sais { color: var(--color-on-dark); }
.logo-point { color: #FF8A7E; }

.menu-toggle svg { stroke: var(--color-on-dark); }
.menu-toggle:hover { background: rgba(255, 255, 255, 0.14); }

.header-search input {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.30);
    color: var(--color-on-dark);
    font-family: var(--font-family);
}
.header-search input::placeholder { color: var(--color-on-dark-muted); }
.header-search input:focus {
    background: rgba(255, 255, 255, 0.18);
    border-color: #FFFFFF;
    box-shadow: none;
}
.header-search button { color: var(--color-on-dark-muted); }
.header-search button:hover { color: var(--color-on-dark); }

/* --- Boutons: plats, majuscules, carres --- */
.btn {
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.055em;
    font-size: 0.82rem;
    padding: 15px 26px;
    border: 0;
}
.btn:active { transform: translateY(1px); }

.btn.btn-primary,
button.btn-primary {
    background: var(--color-accent);
    color: #FFFFFF;
}
.btn.btn-primary:hover,
button.btn-primary:hover {
    background: var(--color-accent-dark);
    color: #FFFFFF;
}

.btn-outline {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}
.btn-outline:hover { background: var(--color-primary); color: #FFFFFF; }

.btn-ghost {
    background: #FFFFFF;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}
.btn-ghost:hover { background: var(--color-primary-bg); }

.btn-sm { padding: 9px 16px; font-size: 0.72rem; }
.btn-lg { padding: 18px 34px; font-size: 0.92rem; }

/* --- Cartes: contour d'encre, pas d'ombre --- */
.card,
.card-inline {
    background: var(--color-surface);
    border: 2px solid var(--color-border);
}
.card:hover,
.card-inline:hover { transform: none; }
.card:hover .card-image img { transform: scale(1.04); }

.card-title { font-size: 1rem; line-height: 1.16; text-transform: uppercase; }
.card-title a { color: var(--color-text); }
.card-title a:hover { color: var(--color-accent-dark); }

.card-badge {
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: 0.62rem;
    padding: 5px 9px;
}
.card-badge.trivia      { background: var(--color-accent); color: #FFFFFF; }
.card-badge.personality { background: var(--color-primary); color: #FFFFFF; }
.card-badge.article     { background: #111111; color: #FFFFFF; }
.card-badge.game        { background: var(--color-primary-light); color: #FFFFFF; }

/* --- Categories: aplats alternes bleu / rouge, pleine largeur --- */
.category-scroll {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 2px;
    overflow: visible;
    justify-content: stretch;
    padding-bottom: 0;
}

.category-pill {
    background: var(--color-primary);
    border: 0;
    min-width: 0;
    padding: 34px 20px;
    justify-content: flex-end;
    align-items: flex-start;
    text-align: left;
    min-height: 132px;
}
.category-pill:nth-child(even) { background: var(--color-accent); }
.category-pill:hover { transform: none; filter: brightness(1.12); }

/* L'emoji de repli ne convient pas a une mise en page d'affiche:
   le nom de la categorie porte le bloc a lui seul. */
.category-pill > div { display: none !important; }

.category-pill img {
    border-radius: 0;
    width: 44px;
    height: 44px;
    margin-bottom: auto;
    filter: grayscale(1) contrast(1.1);
    opacity: 0.85;
}
.category-pill span {
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    font-size: 1.05rem;
    line-height: 1.06;
    color: #FFFFFF;
    -webkit-line-clamp: 3;
    display: block;
    overflow: visible;
}

/* --- Bloc citations --- */
.quotes-section {
    background: var(--color-primary);
    border: 0;
    color: var(--color-on-dark);
}
.quotes-section h3 {
    font-family: var(--font-display);
    text-transform: uppercase;
    color: #FFFFFF;
}
.quote-item {
    color: var(--color-on-dark-muted);
    border-color: rgba(255, 255, 255, 0.2);
}

/* --- Presentation de la page d'accueil --- */
.site-intro {
    background: var(--color-primary);
    border: 0;
    padding: var(--space-2xl) var(--space-xl);
    margin: var(--space-xl) 0;
}
.site-intro h1,
.site-intro h2 {
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(1.8rem, 6.5vw, 2.8rem);
    line-height: 1.02;
    color: #FFFFFF;
    margin-bottom: var(--space-md);
}
.site-intro p {
    color: #D8E2F0;
    max-width: 62ch;
    margin-bottom: 0;
    font-size: 1.05rem;
}

/* --- Quiz: options et progression --- */
.option-btn {
    border: 2px solid var(--color-border);
    background: var(--color-surface);
}
.option-btn:hover:not(.answered) {
    border-color: var(--color-primary);
    background: var(--color-primary-bg);
}
.option-letter {
    font-family: var(--font-display);
    font-weight: 400;
    border-radius: 0;
}
.question-card { border: 2px solid var(--color-border); background: var(--color-surface); }
.question-number {
    font-family: var(--font-display);
    font-weight: 400;
    border-radius: 0;
    background: var(--color-accent);
    color: #FFFFFF;
}
.question-text { text-transform: none; font-size: 1.15rem; line-height: 1.25; }
.progress-bar-track { background: #D6D0C6; }
.progress-bar-fill { background: var(--color-accent); }
.progress-text { font-family: var(--font-display); font-weight: 400; }
.quiz-progress { background: var(--color-surface); border-bottom: 2px solid var(--color-border); }

.result-score-circle { border-radius: 0; background: var(--color-primary); }
.result-score-inner { border-radius: 0; background: var(--color-primary); }
.result-score-number { font-family: var(--font-display); font-weight: 400; color: #FFFFFF; }
.result-score-label { color: #B7C6DC; }
.result-title { text-transform: uppercase; }
.resume-banner { border: 2px solid var(--color-border); background: var(--color-surface); }
.end-quiz-wrap { text-align: center; }

.review-num { font-family: var(--font-display); font-weight: 400; border-radius: 0; }
.review-item { border-radius: 0; }
.article-divider-label {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.7rem;
    color: var(--color-accent-dark);
}

/* --- Partage --- */
.share-btn { border-radius: 0; }
.share-btn.copy { background: var(--color-primary); }

/* --- Barre laterale de navigation --- */
.sidebar-nav { border-left: 2px solid var(--color-border); }
.sidebar-header strong { text-transform: uppercase; }
.sidebar-section-title {
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent-dark);
}
.sidebar-link { font-family: var(--font-family); }

/* --- Pied de page: aplat bleu --- */
.site-footer {
    background: var(--color-footer-bg);
    border-top: 6px solid var(--color-accent);
    color: var(--color-on-dark-muted);
}
.footer-logo span {
    text-transform: uppercase;
    color: #FFFFFF;
}
.footer-links {
    gap: var(--space-sm) var(--space-xl);
}
.footer-links a {
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.075em;
    font-size: 0.72rem;
    color: var(--color-on-dark-muted);
}
.footer-links a:hover { color: #FFFFFF; }
.footer-copyright { color: #8FA5C4; }
.footer-search input {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.3);
    color: #FFFFFF;
}
.footer-social a { border-radius: 0; }

/* --- Pages statiques: listes et titres du corps de texte --- */
.quiz-about ul,
.quiz-article ul {
    list-style: disc;
    padding-left: 1.4em;
    margin: 0 0 1.1rem;
}
.quiz-about ol,
.quiz-article ol {
    list-style: decimal;
    padding-left: 1.5em;
    margin: 0 0 1.1rem;
}
.quiz-about li,
.quiz-article li { margin-bottom: 0.5rem; }

.quiz-about h2,
.quiz-article h2 {
    font-size: 1.15rem;
    letter-spacing: 0.005em;
    margin: 2rem 0 0.7rem;
}
.quiz-about h2:first-child { margin-top: 0; }

/* Le formulaire de contact suit le meme trace que les boutons. */
.quiz-about label { font-family: var(--font-family); }
.quiz-about input:focus,
.quiz-about textarea:focus {
    outline: 3px solid var(--color-primary-light);
    outline-offset: 1px;
}


/* --- Entete repliee (mobile): hauteur totale reduite --- */
@media (max-width: 480px) {
    :root { --header-h: 54px; }
}