/*
 * Variante sombre du site public — une inversion du bleu de marque.
 *
 * Une première tentative, en noir et gris, a été retirée le jour de sa mise en
 * ligne : elle ne ressemblait plus au site, et ses boutons secondaires étaient
 * illisibles. Celle-ci part de `#303f9f`, la couleur de la marque, et l'inverse
 * : le bleu qui était l'accent sur fond blanc devient le fond, et les surfaces
 * claires deviennent des bleus plus clairs posés dessus. Aucun gris neutre.
 *
 * Elle se charge après le thème et ne surcharge que les couleurs, à l'intérieur
 * d'une requête `prefers-color-scheme: dark` : le rendu clair reste intact,
 * octet pour octet.
 *
 * Les captures de projets gardent leur fond clair — ce sont des images, les
 * assombrir les rendrait illisibles. Elles sont posées sur une surface bleue.
 */

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        /* Le bleu de marque, décliné du plus profond au plus clair. */
        --bleu-fond: #0d1333;
        --bleu-surface: #161e4a;
        --bleu-surface-haute: #1b2455;
        --bleu-bordure: rgba(150, 168, 255, 0.28);
        --bleu-bordure-forte: rgba(150, 168, 255, 0.45);
        --bleu-accent: #8fa2ff;
        --bleu-accent-vif: #4c5fd7;
        --texte: #dfe4ff;
        --texte-fort: #f4f6ff;
        --texte-discret: #a8b1e0;
    }

    body,
    body .container,
    header {
        background: var(--bleu-fond);
        color: var(--texte);
    }

    footer {
        background: var(--bleu-surface);
        color: var(--texte);
        box-shadow: none;
        border-top: 1px solid var(--bleu-bordure);
    }

    /* ---- Titres ---- */

    .section.started .started-content .h-title,
    .section .content .title .title_inner,
    .section .content .subtitle .title_inner,
    .expertise-section-title .title_inner,
    .resume-items .resume-item .name,
    .project-card .name,
    .project-card__title-link,
    .cv-item__title,
    .articles-item__title a,
    h1, h2, h3, h4 {
        color: var(--texte-fort);
    }

    /*
     * Le soulignement jaune des titres de section : tel quel il hurle sur fond
     * bleu. Repris dans la famille de la marque, il souligne sans crier.
     */
    .section .content .title .title_inner,
    .section .content .subtitle .title_inner,
    .expertise-section-title .title_inner {
        box-shadow: inset 0 -6px 0px rgba(143, 162, 255, 0.28);
        -webkit-box-shadow: inset 0 -6px 0px rgba(143, 162, 255, 0.28);
    }

    /*
     * L'effet glitch duplique le titre dans deux pseudo-éléments posés sur un
     * fond blanc opaque, pour masquer l'original. Sans cette règle, une bande
     * blanche barre le nom.
     */
    .glitch-effect:before,
    .glitch-effect:after {
        background: var(--bleu-fond);
    }

    /* ---- Corps de texte ---- */

    .section.started .started-content .h-role,
    .section.started .started-content .typed-subtitle,
    .desc,
    p,
    .cv-item__desc,
    .cv-item__period,
    .articles-item .desc,
    .articles-intro,
    .contact-availability {
        color: var(--texte);
    }

    .articles-item .date,
    .project-tag,
    .project-category,
    .project-tech-inline,
    .resume-items .resume-item .date,
    .project-card .date,
    footer .copy {
        color: var(--texte-discret);
    }

    /* ---- Cartes et blocs ---- */

    .card,
    .card-outline,
    .project-card,
    .resume-items .resume-item,
    .skill-pill,
    .home-expertise-card,
    .expertise-card,
    .cookie-consent,
    .articles-item,
    .project-meta,
    .about-summary.card-outline,
    .contact-aside,
    .contact-form-wrap,
    .info-list ul li.card,
    .info-list ul li {
        background: var(--bleu-surface);
        border-color: var(--bleu-bordure);
        color: var(--texte);
        box-shadow: none;
    }

    .project-card:hover,
    .resume-items .resume-item:hover,
    .skill-pill:hover,
    .skill-pill:focus-within,
    .home-expertise-card:hover {
        background: var(--bleu-surface-haute);
        border-color: var(--bleu-bordure-forte);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    }

    /* Les captures restent claires : on les pose sur une surface bleue. */
    .project-image,
    .project-placeholder {
        background: var(--bleu-surface-haute);
    }

    /* ---- Liens et boutons ---- */

    a,
    .footer-social a,
    footer .soc a .ion {
        color: var(--bleu-accent);
    }

    a:hover,
    .articles-item__title a:hover,
    .footer-social a:hover,
    footer .soc a:hover .ion {
        color: var(--texte-fort);
    }

    /*
     * C'est ici que la première version échouait : les boutons secondaires —
     * LinkedIn, Voir mon CV, GitHub — gardaient leur bordure et leur texte
     * prévus pour du blanc, et disparaissaient sur fond sombre.
     *
     * La cause était une question de poids : le thème les déclare sur
     * `a.btn, .btn`, et un simple `.btn` ne l'emporte pas sur `a.btn`. Les
     * sélecteurs ci-dessous reprennent la même forme, `:hover` compris — le
     * thème y pose un `!important` sur la couleur, qu'il faut donc reprendre.
     */
    a.btn,
    button.btn,
    .btn,
    a.project-load-more,
    button.project-load-more,
    a.project-card__cta {
        background: var(--bleu-surface-haute);
        border: 1px solid var(--bleu-bordure-forte);
        color: var(--texte-fort);
    }

    a.btn:hover,
    button.btn:hover,
    .btn:hover,
    a.project-load-more:hover,
    button.project-load-more:hover,
    a.project-card__cta:hover {
        background: var(--bleu-accent-vif);
        border: 1px solid var(--bleu-accent-vif);
        color: #ffffff !important;
    }

    a.btn.fill,
    button.btn.fill,
    .btn.fill {
        background: var(--bleu-accent-vif);
        border: 1px solid var(--bleu-accent-vif);
        color: #ffffff;
    }

    a.btn.fill:hover,
    button.btn.fill:hover,
    .btn.fill:hover {
        background: var(--bleu-accent);
        border: 1px solid var(--bleu-accent);
        color: var(--bleu-fond) !important;
    }

    /*
     * Les pastilles claires du thème — dates, étiquettes, labels
     * « COMPÉTENCES » et « LOGICIELS », espace réservé d'une capture absente.
     * Elles portent un fond clair codé en dur et une couleur de texte foncée ;
     * sans elles, un audit de contraste sur la page donne 1,04 : du texte
     * clair sur un fond clair, c'est-à-dire rien du tout.
     */
    .project .date,
    .project-card .date,
    .resume-items .resume-item .date {
        background: rgba(143, 162, 255, 0.16);
        color: var(--bleu-accent) !important;
    }

    .project-tag {
        background: rgba(143, 162, 255, 0.16);
        color: var(--bleu-accent);
    }

    .resume-item .subtitle .title_inner,
    .resume-items .resume-item .subtitle .title_inner {
        background: rgba(143, 162, 255, 0.16);
        color: var(--texte-fort);
        box-shadow: none;
        -webkit-box-shadow: none;
    }

    .project-placeholder {
        background: var(--bleu-surface-haute);
    }

    .project-placeholder-text {
        color: var(--bleu-accent);
    }

    /*
     * Le bloc « À propos » a son propre fond clair et sa propre couleur de
     * texte, survol compris — un simple `p` ne les atteint pas.
     */
    .about-summary,
    .about-summary:hover {
        background: var(--bleu-surface);
        border-color: var(--bleu-bordure);
    }

    .about-summary p,
    .about-summary:hover p,
    .about-summary:hover {
        color: var(--texte);
    }

    .home-expertise-footer {
        border-top-color: var(--bleu-bordure);
    }

    /* ---- Filtres et pagination de la grille projets ---- */

    .project-filter {
        background: var(--bleu-surface-haute);
        border-color: var(--bleu-bordure);
        color: var(--texte);
    }

    .project-filter:hover {
        border-color: var(--bleu-bordure-forte);
    }

    .project-filter.is-active {
        background: var(--bleu-accent-vif);
        border-color: var(--bleu-accent-vif);
        color: #ffffff;
    }

    .project-pager__arrow {
        background: var(--bleu-surface-haute);
        border-color: var(--bleu-bordure-forte);
        color: var(--bleu-accent);
    }

    .project-pager__arrow:hover:not(:disabled) {
        background: var(--bleu-accent-vif);
        color: #ffffff;
    }

    .project-pager__dot {
        border-color: var(--bleu-bordure-forte);
    }

    .project-pager__dot.is-active {
        background: var(--bleu-accent);
        border-color: var(--bleu-accent);
    }

    .project-pager__count {
        color: var(--texte-discret);
    }

    /* ---- Sélecteur de langue ---- */

    .locale-flag {
        color: var(--texte-discret);
    }

    .locale-flag.is-active,
    .locale-flag:hover {
        color: var(--texte-fort);
    }

    /*
     * Le bandeau cookies est le seul bloc stylé hors du thème, dans la feuille
     * Vite : son fond blanc et son texte gris échappent aux règles ci-dessus.
     */
    .cookie-consent__inner {
        background: var(--bleu-surface);
        border-color: var(--bleu-bordure);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    }

    .cookie-consent__text,
    .cookie-consent__heading {
        color: var(--texte);
    }

    .cookie-consent__link {
        color: var(--bleu-accent);
    }

    /* ---- Formulaires ---- */

    input,
    textarea,
    select,
    .contact-field input,
    .contact-field textarea {
        background: var(--bleu-surface-haute);
        border-color: var(--bleu-bordure);
        color: var(--texte-fort);
    }

    ::placeholder {
        color: var(--texte-discret);
    }

    .contact-feedback--ok {
        background: rgba(76, 95, 215, 0.22);
        color: var(--texte-fort);
    }

    .contact-feedback--error {
        background: rgba(220, 80, 100, 0.2);
        color: #ffc9d1;
    }

    /* ---- Préchargement ---- */

    .preloader,
    .preloader-content {
        background: var(--bleu-fond);
        color: var(--texte);
    }
}