/*
 * Thème « pure » — vierge.
 *
 * Feuille de style chargée APRÈS style.css. Tant que les règles ci-dessous
 * restent vides, le thème ne change RIEN : c'est à toi d'y mettre tes variables.
 *
 * Elle ne doit redéfinir que des variables `:root` (couleurs, rayons, polices).
 * Ne PAS poser `--accent` : l'accent choisi par le visiteur reste piloté par le
 * sélecteur (ADR 006). Les variables dérivées (--bg, --surface-2, --accent-soft)
 * se recalculent à partir de --accent et --bg-base : inutile de les redéfinir
 * sauf besoin précis.
 *
 * Pour t'en servir : décommenter et remplir les variables voulues, puis activer
 * le thème « pure » dans le réglage `theme` (tableau de bord).
 */

/* Police des titres : DM Sans (variable), auto-hébergée comme les autres — le
   CSP n'autorise que 'self'. Le fichier vit dans `assets/fonts/`. */
@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 100 1000;
    font-display: swap;
    src: url(../../fonts/dm-sans-latin-wght-normal.woff2) format("woff2");
}

:root {
    /* Titres : DM Sans, replié sur la sans du site (tous les h1/h2/h3 suivent
       `--font-serif`, voir style.css ligne ~153). */
    --font-serif: "DM Sans", var(--font-sans);

    /* --melange-fond: ; */
    /* --bg-base: ; */
    /* --surface: ; */
    /* --ink: ; */
    /* --muted: ; */
    /* --border: ; */
    /* --radius: ; */
    /* --measure: ; */
    /* --shadow: ; */

    /* Filet séparateur en fondu, réutilisé par les sections de l'article. La
       teinte est un peu plus dense que `--border` pour rester bien visible. */
    --filet-largeur: 100%;
    --filet-teinte: color-mix(in srgb, var(--ink) 30%, var(--border));
    --filet: linear-gradient(90deg, transparent, var(--filet-teinte) 15%, var(--filet-teinte) 85%, transparent);
    --filet-v: linear-gradient(180deg, transparent, var(--filet-teinte) 15%, var(--filet-teinte) 85%, transparent);
    /* Ombre portée du filet : `drop-shadow` suit le fondu (pas de bande aux
       extrémités). Mettre `none` pour la retirer. */
    --filet-ombre: drop-shadow(0 2px 5px color-mix(in srgb, var(--ink) 40%, transparent));
    /* Ombre des traits verticaux : désactivée (mettre une `drop-shadow(...)`
       pour la réactiver). */
    --filet-ombre-v: none;
}

html[data-theme="sombre"] {
    /* --melange-fond: ; */
    /* --bg-base: ; */
    /* --surface: ; */
    /* --ink: ; */
    /* --muted: ; */
    /* --border: ; */
    /* --shadow: ; */
}

/* Pied de page : texte plus sombre pour gagner en contraste sur son fond.
   `--footer-link` passe de `ink` à 72 % à `ink` à 90 %. */
.site-footer {
    --footer-link: color-mix(in srgb, var(--ink) 90%, var(--footer-bg));
}

/* Bas de pied de page : plus de barre distincte. Le fond et le bord propres à
   `.site-footer__bottom` sont neutralisés, le contenu (copyright + liens
   légaux) se fond dans le pied de page général. */
.site-footer__bottom {
    background: transparent;
    border-top: 0;
}

/* Encadrés sans fond ni bordure (page post). À faire un par un. */

/* Résumé sous le titre principal : lede + méta, au-dessus de la miniature. */
.article-summary {
    background: transparent;
    border: 0;
}

/* Sommaire et introduction : encadrés (liste numérotée / texte d'intro). */
.summary .block-box,
#introduction.intro .block-box {
    background: transparent;
    border: 0;
}

/* Trait vertical entre le sommaire et l'introduction, uniquement côte à côte
   (sur mobile les deux blocs sont empilés). Le padding compense le `gap` de
   `.post-top` pour centrer le trait dans la gouttière. */
@media (min-width: 48rem) {
    .post-top { gap: 0; }
    .post-top > *:first-child { padding-right: 1.6rem; }
    .post-top > * + * {
        position: relative;
        padding-left: 1.6rem;
    }
    .post-top > * + *::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 1px;
        background: var(--filet-v);
        filter: var(--filet-ombre-v);
    }
}

/* Filet horizontal sous le bloc intro + sommaire : un trait fin qui s'estompe
   aux deux extrémités. */
.post-top::after {
    content: "";
    grid-column: 1 / -1;
    justify-self: center;
    width: var(--filet-largeur);
    height: 1px;
    margin-top: 2.6rem;
    background: var(--filet);
    filter: var(--filet-ombre);
}

/* Outils, matériels et Amazon : encadrés sans fond ni bordure. */
.kit-col .block-box {
    background: transparent;
    border: 0;
}

/* Le logo (icône) Amazon reprend la couleur du texte, comme les autres titres. */
.kit .kit-col--amazon h2::before {
    background-color: currentColor;
}

/* Séparateurs du bloc matériel : traits verticaux entre les colonnes côte à
   côte, puis un filet horizontal sous l'ensemble. Le `gap` d'origine est
   remplacé par du padding pour loger les traits. */
.kit { gap: 0; }

@media (min-width: 42rem) and (max-width: 60rem) {
    .kit > .kit-col + .kit-col {
        position: relative;
        padding-left: 1rem;
    }
    .kit > .kit-col + .kit-col::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 1px;
        background: var(--filet-v);
        filter: var(--filet-ombre-v);
    }
    .kit > .kit-col:not(:last-child) { padding-right: 1rem; }
    /* Amazon occupe toute la ligne à ce palier : pas de trait vertical. */
    .kit > .kit-col--amazon { padding-left: 0; }
    .kit > .kit-col--amazon::before { display: none; }
}

@media (min-width: 60rem) {
    .kit > .kit-col + .kit-col {
        position: relative;
        padding-left: 1rem;
    }
    .kit > .kit-col + .kit-col::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 1px;
        background: var(--filet-v);
        filter: var(--filet-ombre-v);
    }
    .kit > .kit-col:not(:last-child) { padding-right: 1rem; }
}

/* Filet horizontal sous le bloc matériel, dans le même esprit que le post-top. */
.kit::after {
    content: "";
    grid-column: 1 / -1;
    justify-self: center;
    width: var(--filet-largeur);
    height: 1px;
    margin-top: 2rem;
    background: var(--filet);
    filter: var(--filet-ombre);
}

/* Étapes : présentation en timeline. Plus de carte (ni fond, ni bord, ni
   ombre). Un rail vertical relie les numéros, façon stepper, et les filets
   horizontaux séparent toujours les étapes. Le numéro devient un nœud cerclé
   posé sur le rail. */
.step {
    position: relative;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 1.5rem 0 3rem; /* place pour le rail et son nœud */
    margin-bottom: 1.8rem;
}
.step:last-child { margin-bottom: 0; }

/* Rail : trait vertical d'un nœud au suivant (il rejoint le nœud de l'étape
   suivante en traversant la marge). */
.step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: calc(1rem - .5px);
    top: 1.7rem;      /* sous le nœud */
    bottom: -1.8rem;  /* compense la marge de l'étape */
    width: 1px;
    background: color-mix(in srgb, var(--ink) 8%, var(--border));
}

/* Filet horizontal entre les étapes : même trait en fondu que les autres
   séparateurs. Il démarre juste à droite du rail pour ne pas le couper. */
.step:not(:last-child)::after {
    content: "";
    display: block;
    height: 1px;
    margin: 1.8rem -1.5rem;
    background: var(--filet);
    filter: var(--filet-ombre);
}

/* Nœud : le numéro d'étape, anneau fin posé sur le rail. `background` sur la
   couleur de page masque le rail derrière le nœud ; `z-index` le garde
   au-dessus. */
.step-n {
    position: absolute;
    left: 1rem;
    top: 0;
    transform: translateX(-50%);
    z-index: 1;
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border: 1.5px solid var(--accent);
    border-radius: 50%;
    background: var(--bg);
    color: var(--accent);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1;
}

/* Filet de clôture de la section Étapes. */
.steps::after {
    content: "";
    display: block;
    width: var(--filet-largeur);
    height: 1px;
    margin: 1.6rem auto 0;
    background: var(--filet);
    filter: var(--filet-ombre);
}

/* Conseils et conclusion : encadrés sans fond ni bordure, clôturés par un filet. */
.conseils .block-box,
.conclusion .block-box {
    background: transparent;
    border: 0;
}
.conseils::after,
.conclusion::after {
    content: "";
    display: block;
    width: var(--filet-largeur);
    height: 1px;
    margin: 1.6rem auto 0;
    background: var(--filet);
    filter: var(--filet-ombre);
}

/* FAQ : encadré sans fond ni bordure ; questions séparées par un trait PLEIN
   (pas de fondu aux bords, contrairement aux autres filets du thème), puis
   filet de clôture. */
.faq .block-box {
    background: transparent;
    border: 0;
}
.faq details {
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, var(--border));
}
.faq details:last-of-type { border-bottom: 0; }
.faq::after {
    content: "";
    display: block;
    width: var(--filet-largeur);
    height: 1px;
    margin: 1.6rem auto 0;
    background: var(--filet);
    filter: var(--filet-ombre);
}

/* Titre « Attention » et son icône : couleur des autres titres (l'icône suit
   le texte via currentColor). */
.avertissements h2 { color: var(--ink); }

/* Encadré attention : plus de bordure, fond légèrement teinté de la couleur de
   la palette, un cran plus foncé que le fond général. */
.avertissements .block-box {
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-base));
    border: 0;
}

/* L'icône d'alerte dans le texte reprend la couleur de la palette, comme les
   puces des autres listes. */
.avertissements li::before { background-color: var(--accent); }

/* Accueil : le trait sous les titres de catégorie (.cat-section__head) reprend
   le filet des sections d'article, mais le fondu n'est que côté droit et le
   trait s'arrête plus tôt (plus court à droite). Sans ombre portée. On passe
   par un pseudo-élément pour ne pas toucher le texte. */
.cat-section__head {
    position: relative;
    border-bottom: 0;
}
.cat-section__head::after {
    content: "";
    position: absolute;
    left: 0;
    right: 20%;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--filet-teinte) 85%, transparent);
}

/* Accueil : « Voir les tutoriels les plus récents » devient un bouton plein
   (même esprit que le bouton principal du site). */
.home-recents a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem 1.25rem;
    border-radius: var(--radius);
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s;
}
.home-recents a:hover {
    background: color-mix(in srgb, var(--accent) 85%, #000);
    color: #fff;
    text-decoration: none;
}