/*
 * 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,
    .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;
    }

    /* Au survol, seule la bordure s'éclaircit : ni ombre portée, ni changement de teinte. */
    .project-card:hover,
    .resume-items .resume-item:hover,
    .home-expertise-card:hover,
    .card-outline:hover {
        background: var(--bleu-surface);
        border-color: var(--bleu-bordure-forte);
        box-shadow: none;
    }

    /*
     * Les logos des compétences gardent une bulle blanche : leurs vignettes
     * ont un fond blanc carré, qui dessinait un carré sur la surface bleue.
     */
    .skills .skills-list li.skill-pill,
    .skill-pill:hover,
    .skill-pill:focus-within {
        background: #ffffff;
        border-color: var(--bleu-bordure-forte);
        box-shadow: none;
    }

    /* 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: transparent;
        border-color: var(--bleu-bordure);
        color: var(--texte);
    }

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

    .project-filter__count {
        background: var(--bleu-surface-haute);
        color: var(--bleu-accent);
    }

    .project-filter.is-active .project-filter__count {
        background: rgba(13, 19, 51, 0.35);
        color: #ffffff;
    }

    .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);
    }

    /*
     * La pastille de catégorie des projets phares gardait son bleu nuit
     * (#1e3a8a) du thème clair : contraste de 1,5 sur la carte sombre.
     */
    .project-card--featured .project-category {
        background: var(--bleu-surface-haute);
        color: var(--bleu-accent);
    }

    /*
     * Cartes d'expertise : le libellé gardait le #111827 du thème clair. Il
     * n'était lisible que posé sur le rectangle clair du filigrane, devenu
     * transparent le 27 septembre 2026. Le filigrane est éclairci pour rester
     * perceptible sur le bleu.
     */
    .home-expertise-card__label {
        color: var(--texte-fort);
    }

    .home-expertise-card__teaser {
        color: var(--texte-discret);
    }

    .home-expertise-card .expertise-card-watermark {
        filter: brightness(1.8) saturate(1.2);
    }

    /* Textes restés aux couleurs du thème clair (audit de contraste du 27 septembre 2026). */
    .info-list ul li strong,
    .project-section-links a,
    .home-expertise-footer a {
        color: var(--bleu-accent);
    }

    .featured-projects-intro,
    .home-expertise__intro {
        color: var(--texte-discret);
    }

    /* ---- Politique de confidentialité ---- */

    .policy-body {
        color: var(--texte);
    }

    .policy-body h3,
    .policy-body strong {
        color: var(--texte-fort);
    }

    .policy-body h2,
    .policy-body a,
    .policy-body > p:first-child em {
        color: var(--bleu-accent);
    }

    .policy-body > p:first-child em,
    .policy-body code {
        background: var(--bleu-surface-haute);
    }

    .policy-body code {
        color: var(--bleu-accent);
    }

    .policy-body h2,
    .policy-body th,
    .policy-body td {
        border-color: var(--bleu-bordure);
        color: var(--texte);
    }

    .policy-body th {
        color: var(--texte-discret);
    }

    /* ---- Pagination des projets ---- */

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

    .project-pager__arrow:hover:not(:disabled),
    .project-pager__page:hover {
        background: var(--bleu-surface-haute);
        color: var(--texte-fort);
    }

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

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

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

    /* ---- Pages projet et études de cas ---- */

    .breadcrumbs ol,
    .case-source,
    .decisions__row--head,
    .numbers__label,
    .flow__detail,
    .feature__detail,
    .decisions__reason {
        color: var(--texte-discret);
    }

    .breadcrumbs a,
    .case-facts dt,
    .project-block__title,
    .project-sheet__label,
    .arch__label,
    .numbers__value,
    .project-sheet__links a,
    .arch__col + .arch__col::before {
        color: var(--bleu-accent);
    }

    .project-block .desc {
        color: var(--texte);
    }

    .case-facts dd,
    .project-sheet__value,
    .flow__title,
    .feature__title,
    .decisions__choice,
    .arch__node {
        color: var(--texte-fort);
    }

    .case-facts__item,
    .project-sheet,
    .arch__col,
    .feature,
    .decisions,
    .decisions__row {
        border-color: var(--bleu-bordure);
    }

    .arch__col--app {
        border-color: var(--bleu-accent);
        background: var(--bleu-surface);
    }

    .arch__node,
    .numbers__item,
    .decisions__row--head {
        background: var(--bleu-surface-haute);
        border-color: var(--bleu-bordure);
    }

    .flow__number {
        background: var(--bleu-accent-vif);
    }

    .flow__step:not(:last-child)::before {
        background: var(--bleu-bordure);
    }

    .case-intro,
    .challenge__part {
        color: var(--texte-discret);
    }

    .er__entity,
    .tech-sheet,
    .tech-sheet__row,
    .challenge {
        border-color: var(--bleu-bordure);
    }

    .er__entity {
        background: var(--bleu-surface);
    }

    .er__name,
    .challenge__part--fix .challenge__label {
        background: var(--bleu-accent-vif);
    }

    .er__fields,
    .tech-sheet dd,
    .challenge__title,
    .challenge__part--fix,
    .timeline__label {
        color: var(--texte-fort);
    }

    .er__fields li::before,
    .er__relations,
    .tech-sheet dt,
    .challenge__title::before,
    .challenge__label,
    .timeline__date {
        color: var(--bleu-accent);
    }

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

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

    .timeline__item::before {
        background: var(--bleu-bordure);
    }

    .timeline__item::after {
        background: var(--bleu-accent-vif);
        box-shadow: 0 0 0 4px var(--bleu-fond);
    }

    /* Les logos gardent une pastille blanche, comme les compétences. */
    .stack-item {
        background: var(--bleu-surface);
        border-color: var(--bleu-bordure);
        color: var(--texte-fort);
    }

    .stack-item img {
        background: #ffffff;
        padding: 2px;
    }

    a.stack-item:hover {
        border-color: var(--bleu-bordure-forte);
        color: var(--bleu-accent);
    }

    /* ---- Interliens ---- */

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

    a.project-tag.project-tag--link:hover,
    a.project-tag.project-tag--link:focus-visible {
        background: var(--bleu-accent-vif);
        border-color: var(--bleu-accent-vif);
        color: #ffffff;
    }

    span.project-tag {
        background: transparent;
        border-color: var(--bleu-bordure);
        color: var(--texte-discret);
    }

    .tech-link,
    .cv-link,
    .resume-item__link,
    .tech-link:hover,
    .cv-link:hover,
    .resume-item__link:hover,
    a.stack-item {
        color: var(--bleu-accent);
    }

    .tech-link,
    .cv-link,
    .resume-item__link {
        text-decoration-color: var(--bleu-bordure-forte);
    }

    a.stack-item {
        border-color: var(--bleu-bordure-forte);
    }

    a.stack-item:hover {
        background: var(--bleu-surface-haute);
    }

    .h-title.h-title--expertise .typed-expertise-country {
        color: var(--bleu-accent);
    }

    .page-top-nav__link {
        color: var(--bleu-accent);
        background: var(--bleu-surface-haute);
        border-color: var(--bleu-bordure-forte);
        box-shadow: none;
    }

    .page-top-nav__link:hover {
        color: #ffffff !important;
        background: var(--bleu-accent-vif);
        border-color: var(--bleu-accent-vif);
    }

    /* ---- Colonne de points ---- */

    .section-dots .section-dots__dot {
        background: var(--bleu-bordure-forte);
    }

    .section-dots .section-dots__dot:hover {
        background: var(--bleu-accent);
    }

    .section-dots .section-dots__dot.is-active {
        background: var(--bleu-accent);
    }

    .section-dots__dot::after {
        background: var(--bleu-accent-vif);
    }

    /* ---- Pied de page ---- */

    footer.site-footer {
        background: transparent;
        border-top-color: var(--bleu-bordure);
    }

    .site-footer__name {
        color: var(--texte-fort);
    }

    .site-footer__tagline,
    .site-footer__col a {
        color: var(--texte);
    }

    .site-footer__location,
    .site-footer__bar,
    .site-footer__top {
        color: var(--texte-discret);
    }

    .site-footer__title,
    .site-footer__col a:hover,
    .site-footer__top:hover {
        color: var(--bleu-accent);
    }

    .site-footer__bar {
        border-top-color: var(--bleu-bordure);
    }

    /* ---- Section contact : liens avec pictogramme ---- */

    .contact-link,
    a.contact-link:hover,
    .contact-link__label {
        color: var(--texte-fort);
    }

    a.contact-link:hover {
        background: var(--bleu-surface-haute);
    }

    .contact-link__icon {
        background: var(--bleu-surface-haute);
        color: var(--bleu-accent);
    }

    .contact-link__detail {
        color: var(--texte-discret);
    }
}