/* MesAstuces — thème atelier, mobile-first, mode sombre natif */

/* Polices auto-hébergées (SIL Open Font License 1.1) : Inter variable pour le
   texte courant, Fraunces variable pour les titres, Anton (condensé, esprit
   Impact) pour le nom du site. Sous-ensemble latin. Aucun appel réseau
   externe : le CSP du site n'autorise que 'self'. */
@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/inter-latin-wght-normal.woff2) format("woff2");
}
@font-face {
    font-family: "Fraunces Variable";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/fraunces-latin-wght-normal.woff2) format("woff2");
}
/* Anton : condensé très gras pour le titre du site (esprit Impact). */
@font-face {
    font-family: "Anton";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/anton-latin-400-normal.woff2) format("woff2");
}

:root {
    --font-sans: "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --font-serif: "Fraunces Variable", Georgia, "Times New Roman", serif;
    --font-display: "Anton", "Arial Narrow", Impact, sans-serif;
    /* Base utilisée pour dériver les aplats teintés (`color-mix`). Le fond de
       page et les variantes d'accent suivent la couleur choisie par le visiteur. */
    --melange-fond: #ffffff;
    --bg-base: #ffffff;
    --surface: #ffffff;
    /* Aplat secondaire (header, footer, pastilles) : dérivé de l'accent pour
       suivre la couleur choisie, un cran plus soutenu que le fond de page. */
    --surface-2: color-mix(in srgb, var(--accent) 12%, var(--bg-base));
    --ink: #211e1a;
    --muted: #6a6358;
    --accent: #a94e1d;
    --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--melange-fond));
    --bg: color-mix(in srgb, var(--accent) 5%, var(--bg-base));
    --border: #e3ddd3;
    --ok: #2c6f42;
    --warn: #9a6206;
    --erreur: #b4232b;
    --radius: 12px;
    --measure: 72ch;
    --shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .05);
}

/* Thème sombre : porté par `data-theme="sombre"` sur <html>, posé avant le
   rendu (script inline de site_head.php) pour éviter tout clignotement. Sans
   choix explicite du visiteur, le script suit `prefers-color-scheme`. */
html[data-theme="sombre"] {
    color-scheme: dark;
    --melange-fond: #1a1816;
    --bg-base: #1a1816;
    --surface: #232120;
    --surface-2: color-mix(in srgb, var(--accent) 16%, var(--bg-base));
    --ink: #f1ece5;
    --muted: #a79e93;
    /* `--accent` et `--accent-soft` sont définis plus bas, après les tons par
       teinte : sans quoi la valeur d'ici écraserait l'accent choisi. */
    --bg: color-mix(in srgb, var(--accent) 8%, var(--bg-base));
    --border: #38332e;
    --ok: #74c48d;
    --warn: #e3b063;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4);
}

/* Accent choisi par le visiteur : porté par `data-accent` sur <html> (jamais de
   style inline, le CSP `style-src 'self'` les bloque).
   Chaque teinte existe en DEUX tons : `--accent-ton` pour le thème clair,
   `--accent-ton-sombre` pour le thème sombre (les huit accents d'origine sont
   trop sombres sur fond noir : ils tombaient à 2-3:1). Le ton sombre est plus
   clair que l'original, le ton clair parfois un cran plus sombre pour les
   liens de pied de page. Les deux passent 4.5:1 sur tous les fonds où ils
   servent (page, survol, pied de page). */
html[data-accent="#a94e1d"] { --accent-ton: #a94e1d; --accent-ton-sombre: #e08a52; --accent-lien-ton: #9b481b; }
html[data-accent="#2450d8"] { --accent-ton: #2450d8; --accent-ton-sombre: #7d9bf0; --accent-lien-ton: #2450d8; }
html[data-accent="#0f7a52"] { --accent-ton: #0f7a52; --accent-ton-sombre: #4fbb8a; --accent-lien-ton: #0e6e4a; }
html[data-accent="#b4232b"] { --accent-ton: #b4232b; --accent-ton-sombre: #ef7d85; --accent-lien-ton: #b4232b; }
html[data-accent="#7c3aed"] { --accent-ton: #7c3aed; --accent-ton-sombre: #a98af5; --accent-lien-ton: #7235da; }
html[data-accent="#be185d"] { --accent-ton: #be185d; --accent-ton-sombre: #f07aa4; --accent-lien-ton: #b61759; }
html[data-accent="#475569"] { --accent-ton: #475569; --accent-ton-sombre: #94a3bd; --accent-lien-ton: #475569; }
html[data-accent-transparent] { --accent-ton: #5b6472; --accent-ton-sombre: #9aa6b8; --accent-lien-ton: #4b5462; }

/* Sans accent mémorisé, on prend le ton clair, puis le ton sombre si le thème
   sombre est appliqué.
   PIÈGE : le sélecteur est `html:root`, PAS `html`. `:root` (0,1,0) est plus
   spécifique que `html` (0,0,1) : avec `html { --accent: … }`, la valeur
   littérale déclarée dans `:root` plus haut gagnait toujours et l'accent ne
   changeait jamais au clic (seuls les rares éléments lisant `--accent-lien-ton`
   semblaient réagir). */
html:root { --accent: var(--accent-ton, #475569); }
html[data-theme="sombre"] { --accent: var(--accent-ton-sombre, #94a3bd); }
html[data-theme="sombre"] {
    /* 14% et non 22% : au-dessus, l'aplat de survol devient trop clair et le
       texte en accent retombe sous 4.5:1. */
    --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--surface));
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 17px/1.65 var(--font-sans);
    /* Colonne flex : le pied de page reste collé en bas sur les pages courtes. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

img, svg, video { max-width: 100%; height: auto; }

a { color: var(--accent); }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.sr-only, .skip:not(:focus) {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip:focus {
    position: fixed;
    left: 1rem; top: 1rem;
    z-index: 100;
    padding: .6rem 1rem;
    background: var(--surface);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

/* Titres en Fraunces (serif variable) : caractère « atelier », plus affirmé
   que le texte courant. Graisse 600 pour un rendu contemporain. */
h1, h2, h3 { font-family: var(--font-serif); font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.3rem); line-height: 1.2; margin: .6rem 0 1rem; }
h2 { font-size: clamp(1.25rem, 1.05rem + 1vw, 1.6rem); line-height: 1.25; margin: 2.4rem 0 .8rem; }
h3 { font-size: 1.15rem; line-height: 1.3; margin: 1.6rem 0 .5rem; }
p { margin: 0 0 1rem; }

/* --- En-tête et pied ------------------------------------------------------ */

main { max-width: 68rem; margin-inline: auto; padding-inline: 1.15rem; }

main { padding-block: 1.5rem 4rem; flex: 1 0 auto; }

/* En-tête */
.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--surface-2);
    background: color-mix(in srgb, var(--surface-2) 88%, transparent);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--border);
}
.site-header__inner {
    max-width: 68rem;
    margin-inline: auto;
    padding: .7rem 1.15rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: 1.32rem;
    font-weight: 400;
    letter-spacing: .005em;
    /* Titre compact et serré : Anton (clone libre d'Impact), autoportée.
       Repli sur des condensées système si la police locale manque. */
    font-family: var(--font-display);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink);
    margin-right: auto;
}
.logo__img { display: block; width: 34px; height: 34px; border-radius: 8px; object-fit: cover; }
/* Texte du nom de site : noir, quelle que soit la mention colorée. */
.logo__text, .logo__text span, .logo > span { color: var(--ink); }

.site-nav ul {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Onglet « Tutoriels » : grille à la place du texte, même gabarit que les
   boutons d'icônes voisins. Le nom accessible reste porté par aria-label.
   Ancien `.site-nav a` supprimé : il apportait un padding et une taille de
   police qui écrasaient l'icône. */
/* Gabarit commun des quatre boutons d'icônes de l'en-tête (Tutoriels,
   recherche, thème, accent) : même boîte, même bordure, même survol.
   Toute divergence ici se voit immédiatement à l'œil. */
.site-nav__icone,
.search-open,
.theme__bouton {
    display: inline-grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    flex: none;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--ink);
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}
.site-nav__icone svg,
.search-open svg,
.theme__bouton svg { width: 20px; height: 20px; }
/* Cible tactile : les boutons font 38px sur petit écran, sous les 44px
   recommandés. On les agrandis au pointeur grossier (pas sur mobile, où la
   barre d'adresse laisse moins de place). */
@media (pointer: coarse) {
    .site-nav__icone,
    .search-open,
    .theme__bouton { width: 2.75rem; height: 2.75rem; }
}
.site-nav__icone:hover,
.search-open:hover,
.theme__bouton:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-soft);
}
/* Écart de .5rem entre les icônes : le header impose 1rem entre deux
   éléments, la marge négative le ramène à .5rem. */
.search-open { margin-left: -.5rem; }

/* Accent « neutre » : le fond de page perd sa teinte et redevient la base. */
html[data-accent-transparent] { --bg: var(--bg-base); }

.entete-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: -.5rem;
    flex: none;
}
/* Bascule clair/sombre : les deux icônes se superposent, on montre celle qui
   bascule vers le thème opposé à celui appliqué. */
.theme-bascule__soleil { display: none; }
html[data-theme="sombre"] .theme-bascule__lune { display: none; }
html[data-theme="sombre"] .theme-bascule__soleil { display: block; }
@media (prefers-color-scheme: dark) {
    /* Sans choix explicite, <html> n'a pas de data-theme (le script le pose
       seulement quand l'utilisateur choisit) : l'icône suit le système. */
    html:not([data-theme]) .theme-bascule__lune { display: none; }
    html:not([data-theme]) .theme-bascule__soleil { display: block; }
}

/* Sélecteur de couleur d'accent : menu déroulant sous le bouton de l'en-tête. */
.theme {
    position: relative;
}

/* Sélecteur de couleur d'accent : menu déroulant sous le bouton de l'en-tête. */
.theme {
    position: relative;
}

.theme__palette {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    z-index: 30;
    display: flex;
    gap: .5rem;
    padding: .6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}
.theme__palette[hidden] { display: none; }
.theme__pastille {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--pastille);
    cursor: pointer;
    box-shadow: inset 0 0 0 1px var(--border);
    transition: transform .1s;
}
.theme__pastille[data-accent="#a94e1d"] { --pastille: #a94e1d; }
.theme__pastille[data-accent="#2450d8"] { --pastille: #2450d8; }
.theme__pastille[data-accent="#0f7a52"] { --pastille: #0f7a52; }
.theme__pastille[data-accent="#b4232b"] { --pastille: #b4232b; }
.theme__pastille[data-accent="#7c3aed"] { --pastille: #7c3aed; }
.theme__pastille[data-accent="#be185d"] { --pastille: #be185d; }
.theme__pastille[data-accent="#475569"] { --pastille: #475569; }
.theme__pastille[data-accent="transparent"] {
    background-color: var(--surface);
    background-image: repeating-conic-gradient(
        color-mix(in srgb, var(--ink) 30%, transparent) 0% 25%,
        transparent 0% 50%);
    background-size: 10px 10px;
}
.theme__pastille:hover { transform: scale(1.12); }
.theme__pastille[aria-pressed="true"] {
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--pastille);
}

/* Modale de recherche */
.search-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 4.5rem 1rem 1rem;
}
.search-modal[hidden] { display: none; }

.search-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(24, 20, 16, .55);
}

.search-modal__panel {
    position: relative;
    width: min(44rem, 100%);
    max-height: min(80vh, 40rem);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
    overflow: hidden;
}

.search-modal__head {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .85rem .85rem 0;
}
.search-modal__field {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .65rem .5rem .85rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-2);
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.search-modal__field:focus-within {
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.search-modal__icon { flex: none; color: var(--muted); transition: color .15s; }
.search-modal__field:focus-within .search-modal__icon { color: var(--accent); }
.search-modal__input {
    flex: 1;
    min-width: 0;
    padding: .3rem 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 1.05rem;
}
.search-modal__input:focus { outline: none; }
.search-modal__input::placeholder { color: var(--muted); }
.search-modal__input::-webkit-search-cancel-button,
.search-modal__input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}
.search-modal__clear {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 0;
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.search-modal__clear:hover { background: var(--border); color: var(--ink); }
.search-modal__clear[hidden] { display: none; }

.search-modal__close {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    color: var(--ink);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.search-modal__close:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.search-modal__status {
    margin: 0;
    padding: .6rem 1.05rem 0;
    font-size: .85rem;
    color: var(--muted);
}
.search-modal__status:empty { display: none; }

.search-modal__results {
    flex: 1;
    overflow-y: auto;
    padding: .6rem .6rem .75rem;
}

.search-group { margin: 0 0 .8rem; }
.search-group__head {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin: 0;
    padding: .35rem .4rem;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--accent);
}
.search-group__count {
    font-size: .75rem;
    letter-spacing: 0;
    color: var(--muted);
}

.search-hit {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .45rem;
    border-radius: 10px;
    text-decoration: none;
    color: var(--ink);
}
.search-hit:hover,
.search-hit:focus-visible { background: var(--accent-soft); }
.search-hit__thumb {
    flex: none;
    width: 4.5rem;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 6px;
    background: var(--surface-2);
}
.search-hit__body { min-width: 0; }
.search-hit__title {
    margin: 0;
    font-size: .97rem;
    font-weight: 600;
    line-height: 1.35;
}
.search-hit__meta {
    margin: .1rem 0 0;
    font-size: .8rem;
    color: var(--muted);
}
.search-modal__empty {
    margin: 0;
    padding: 1.4rem .5rem;
    text-align: center;
    color: var(--muted);
}

.search-modal__hint {
    margin: 0;
    padding: .55rem 1.05rem .85rem;
    font-size: .78rem;
    color: var(--muted);
}
.search-modal__hint kbd {
    padding: 0 .3rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface-2);
    font-family: inherit;
    font-size: .95em;
}

/* Pied de page.
   Zone principale sur le fond de la page, barre du bas plus sombre. Les liens
   sont en gris (assez foncé pour passer 4,5:1 sur leur fond, en clair comme en
   sombre) et foncent au survol. Aucune couleur écrite en dur : tout est dérivé
   des variables du thème via `color-mix`. */
.site-footer {
    --footer-bg: var(--surface-2);
    --footer-link: color-mix(in srgb, var(--ink) 72%, var(--footer-bg));
    --footer-link-hover: var(--ink);
    margin-top: 3rem;
    background: var(--footer-bg);
    border-top: 1px solid var(--border);
    color: var(--footer-link);
    font-size: .875rem; /* 14px */
}
.site-footer__inner {
    max-width: 68rem;
    margin-inline: auto;
    padding: 4rem 1.15rem; /* ~64px de respiration verticale */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem 1.5rem;
}
/* Mobile : marque pleine largeur, liens sur 2 colonnes, dernier groupe entier. */
.footer-brand { grid-column: 1 / -1; min-width: 0; }
.footer-col:last-child { grid-column: 1 / -1; }
/* 640px et plus : les colonnes de liens passent à trois. */
@media (min-width: 40rem) {
    .site-footer__inner { grid-template-columns: repeat(3, 1fr); }
    .footer-col:last-child { grid-column: auto; }
}
/* 1024px et plus : quatre colonnes, la marque un peu plus large. */
@media (min-width: 64rem) {
    .site-footer__inner { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
    .footer-brand { grid-column: auto; }
}

/* Colonne marque */
.footer-brand .logo { margin-bottom: 0; }
.footer-brand__tagline {
    margin: 1rem 0 0;
    max-width: 34ch;
    color: var(--footer-link);
    font-size: .875rem;
    line-height: 1.5;
    /* Deux lignes maximum. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Icônes de réseaux sociaux */
.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin: 1.1rem 0 0;
    padding: 0;
    list-style: none;
}
.footer-social__lien {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;   /* 36px de zone cliquable */
    height: 2.25rem;
    border-radius: 999px;
    color: var(--footer-link);
    text-decoration: none;
    transition: color .15s, background-color .15s;
}
.footer-social__lien svg { width: 20px; height: 20px; }
.footer-social__lien:hover {
    color: var(--footer-link-hover);
    background: color-mix(in srgb, var(--ink) 8%, transparent);
}
@media (pointer: coarse) {
    .footer-social__lien { width: 2.75rem; height: 2.75rem; }
}

/* Colonnes de liens : chaque groupe empilé dans sa colonne. */
.footer-col { display: grid; gap: 1.75rem; align-content: start; }
.footer-col h2 {
    margin: 0 0 .8rem;
    font-size: .8125rem; /* 13px */
    font-weight: 700;
    color: var(--ink);
}
.footer-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .75rem; }
.footer-col a {
    color: var(--footer-link);
    text-decoration: none;
    line-height: 1.4;
    transition: color .15s;
}
.footer-col a:hover {
    color: var(--footer-link-hover);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* Barre du bas, pleine largeur et légèrement plus sombre que la page. */
.site-footer__bottom {
    background: color-mix(in srgb, var(--ink) 6%, var(--bg));
    border-top: 1px solid var(--border);
    padding: 1.25rem max(1.15rem, (100% - 68rem) / 2); /* 20px, contenu centré */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem 1rem;
    font-size: .8125rem; /* 13px */
    text-align: center;
}
.site-footer__copyright { margin: 0; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem .9rem; }
.footer-legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px; /* cible tactile mobile */
    color: inherit;
    text-decoration: none;
    transition: color .15s;
}
.footer-legal a:hover { color: var(--footer-link-hover); text-decoration: underline; }

@media (min-width: 40rem) {
    .site-footer__bottom {
        flex-direction: row;
        justify-content: space-between;
        gap: .4rem 1rem;
        text-align: left;
    }
    .footer-legal a { min-height: 0; }
}

/* Mouvement réduit : on coupe les transitions. */
@media (prefers-reduced-motion: reduce) {
    .footer-social__lien,
    .footer-col a,
    .footer-legal a { transition: none; }
}


.muted { color: var(--muted); }
.intro { max-width: 46ch; }

/* Introduction d'article : titre au-dessus, contenu encadré, cohérent avec les
   autres blocs (voir .block-box). */
#introduction.intro,
.page-intro {
    max-width: none;
    margin-top: 2rem;
}
#introduction.intro .block-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1.4rem;
}
.page-intro {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1.4rem;
}
#introduction.intro h2 { margin-top: 0; }
#introduction.intro .intro-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 1rem;
}
.page-intro > :first-child { margin-top: 0; }
.page-intro > :last-child { margin-bottom: 0; }

.badge {
    display: inline-block;
    padding: .1rem .55rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: .78rem;
    color: var(--muted);
}

/* --- Filtres et recherche -------------------------------------------------- */

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1.5rem 0;
    padding: 0;
    list-style: none;
}
.filters a {
    display: inline-block;
    padding: .35rem .8rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    text-decoration: none;
    color: var(--ink);
    font-size: .9rem;
}
.filters a.on, .filters a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.filters .count { opacity: .7; font-size: .8em; }

/* Filtrage sur place : la liste s'estompe le temps de la requête. */
[data-filter-results][aria-busy="true"] { opacity: .45; transition: opacity .12s ease; }

.search { display: flex; gap: .5rem; margin: 1rem 0 2rem; }
.search input {
    flex: 1;
    padding: .65rem .9rem;
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.btn {
    padding: .65rem 1.1rem;
    font: inherit;
    color: var(--ink);
    background: var(--accent-soft);
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
}
.btn:hover { background: var(--accent); color: #fff; }

/* --- Cartes ---------------------------------------------------------------- */

.cards {
    display: grid;
    gap: 1.15rem;
    grid-template-columns: 1fr;
    padding: 0;
    margin: 1.5rem 0;
    list-style: none;
}
@media (min-width: 40rem) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .cards { grid-template-columns: repeat(3, 1fr); } }

/* --- Accueil : une section par catégorie ----------------------------------- */
/* En-tête de l'accueil : titre et phrase d'intro centrés. */
.home-head { text-align: center; }
.home-head .intro { margin: .25rem auto 0; }

.cat-section { margin: 2.4rem 0; }
.cat-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: .5rem;
    margin-bottom: 1rem;
}
.cat-section__head h2 { margin: 0; font-size: 1.35rem; }
.cat-section__head h2 a { color: var(--ink); text-decoration: none; }
.cat-section__head h2 a:hover { color: var(--accent); text-decoration: underline; }
.cat-section__more {
    font-size: .88rem;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
}
.cat-section__more:hover { text-decoration: underline; }
.cat-section .cards { margin-top: 0; }
.home-recents { margin: 2.2rem 0 1rem; }
.home-recents a { font-weight: 600; color: var(--accent); text-decoration: none; }
.home-recents a:hover { text-decoration: underline; }

.card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.card-media { display: block; background: var(--surface-2); aspect-ratio: 16 / 9; }
.card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-placeholder { display: block; width: 100%; height: 100%; }
.card-body { padding: .9rem 1rem 1.1rem; }
.card-cat { margin: 0 0 .3rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.card-cat a { color: inherit; text-decoration: none; }
.card-cat a:hover { text-decoration: underline; }
.card h2, .card h3 { margin: 0 0 .4rem; font-size: 1.12rem; line-height: 1.25; letter-spacing: -.01em; }
.card h2 a, .card h3 a { text-decoration: none; color: var(--ink); }
.card h2 a:hover, .card h3 a:hover { color: var(--accent); text-decoration: underline; }
.card-excerpt { color: var(--muted); font-size: .88rem; line-height: 1.5; margin: 0 0 .6rem; }
.card-meta { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; font-size: .8rem; color: var(--muted); }
.card-meta time { margin-left: auto; }

.tags { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; margin: .7rem 0 0; list-style: none; }
.tags a {
    font-size: .78rem;
    line-height: 1;
    padding: .28rem .5rem;
    border-radius: 4px;
    background: var(--surface-2);
    color: var(--muted);
    text-decoration: none;
}
.tags a:hover { background: var(--accent-soft); color: var(--accent); }

/* --- Article --------------------------------------------------------------- */

/* Fil d'Ariane : éléments alignés, séparateurs chevron en CSS. */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    font-size: .9rem;
    color: var(--muted);
    margin-bottom: .6rem;
}
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); text-decoration: underline; }
.breadcrumb > * + *::before {
    content: "›";
    margin-right: .4rem;
    opacity: .55;
}
.article-head { margin-bottom: 1.5rem; }
.article-summary {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
}
.article-summary .lede { margin-bottom: .7rem; }
.lede { font-size: 1.05rem; color: var(--ink); }
.meta { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; font-size: .85rem; color: var(--muted); }

/* Éléments focusables qui ne sont ni lien ni bouton (le lecteur vidéo est un
   `div role="button"`) : `:focus-visible` seul ne les couvre pas. */
[role="button"]:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* L'anneau est rogné par `overflow: hidden` du lecteur : on le reporte en
   inset, dans les coins arrondis. */
.video:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 3px var(--accent);
}

/* Vidéo en façade : le clic ouvre youtube.com (lecture jamais inline). */
.video {
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    margin-bottom: .7rem;
}
.video-poster { width: 100%; height: 100%; object-fit: cover; opacity: .92; }
.video:hover .video-poster { opacity: 1; }

/* Sous la vidéo : « Regarder sur YouTube » à gauche, puis l'abonnement.
   L'appel à regarder n'est pas posé sur la miniature pour ne pas masquer
   l'essentiel de certains visuels. */
.video-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin: 0 0 1.8rem;
}
.btn-sub {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .62rem 1.25rem;
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}
.btn-sub::before { content: "+"; font-weight: 800; }
.btn-sub:hover { border-color: var(--accent); color: var(--accent); }

/* Appel à l'action : pousser vers YouTube pour les vues. */
.btn-yt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .7rem 1.3rem;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: .98rem;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    transition: background .15s, transform .1s;
}
.btn-yt:hover { background: color-mix(in srgb, var(--accent) 85%, #000); }
.btn-yt:active { transform: translateY(1px); }
/* Logo YouTube intégré au bouton (icône locale, colorée par le texte). */
.btn-yt::before {
    content: "";
    flex: 0 0 auto;
    width: 1.15em;
    height: 1.15em;
    background-color: currentColor;
    -webkit-mask: url(../img/icons/youtube.svg) center / contain no-repeat;
    mask: url(../img/icons/youtube.svg) center / contain no-repeat;
}

/* Sommaire cliquable : titre au-dessus, contenu encadré. */
.summary { margin: 2rem 0; }
.summary .block-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .5rem 1.2rem 1rem;
}
.summary h2 { margin-top: 0; }
.summary a { text-decoration: none; }
.summary a:hover { text-decoration: underline; }
/* Numéros en pastilles rondes accentuées (compteur CSS), au lieu de la
   puce décimale par défaut. */
.summary ol {
    margin: 0;
    padding-left: 0;
    list-style: none;
    counter-reset: summary;
}
.summary li {
    position: relative;
    counter-increment: summary;
    padding-left: 2rem;
    margin: .35rem 0;
}
.summary li::before {
    content: counter(summary);
    position: absolute;
    left: 0;
    top: .1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1;
}

/* Sommaire et introduction côte à côte sur grand écran, empilés sur mobile. */
.post-top {
    display: grid;
    gap: 1.2rem;
    margin: 2rem 0;
}
.post-top > * { margin: 0; }
/* L'introduction porte une marge en propre (spécificité d'ID) : on l'annule ici. */
.post-top > #introduction.intro { margin: 0; }
/* Titres au-dessus des encadrés : chaque colonne étire son panneau pour que les
   deux blocs côte à côte finissent à la même hauteur. */
.post-top > * { display: flex; flex-direction: column; }
.post-top > * .block-box { flex: 1; }
@media (min-width: 48rem) {
    .post-top {
        grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
    }
}

/* Blocs — panneaux plats et discrets : de la structure sans effet « pile de
   cartes » (pas d'ombres ni de cartes empilées par bloc). */
.block { margin: 2.2rem 0; }
.block h2:first-child { margin-top: 0; }

/* Les encadrés prennent toute la largeur de la page, mais le texte de lecture
   reste borné à une longueur confortable (évite les lignes trop longues). */
.block-box > p,
.block-box > ul,
.block-box > ol,
.step > p,
.article-summary .lede,
    .faq details > p { max-width: var(--measure); }

/* Pages légales : définitions éditeur / hébergeur sur une colonne étroite.
   Texte un cran plus petit que le reste du site : ces pages sont denses et
   n'ont pas vocation à être « lues » comme un article. */
.legal { max-width: var(--measure); font-size: .95rem; }
.legal h2 { font-size: 1.2rem; margin: 1.8rem 0 .6rem; }
.legal p { margin-bottom: .8rem; }
.legal-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: .1rem 0; margin: 0; }
.legal-list dt { font-weight: 600; margin-top: .7rem; }
.legal-list dt:first-child { margin-top: 0; }
.legal-list dd { margin: 0 0 0; color: var(--muted); }
@media (min-width: 34rem) {
    .legal-list { grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr); }
    .legal-list dt { margin-top: 0; }
    .legal-list dd { color: var(--ink); }
    .legal-list dt + dd { margin-bottom: .55rem; }
}

/* Icônes décoratives des titres de section (Feather, stockées localement).
   Pseudo-élément + masque : aucune incidence sur le texte, donc neutre pour
   le SEO et ignoré des lecteurs d'écran. */
.block h2::before,
.summary h2::before,
.kit-col h2::before,
.kit-links h3::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: .45em;
    vertical-align: -.12em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.summary h2::before     { -webkit-mask-image: url(../img/icons/list.svg);           mask-image: url(../img/icons/list.svg); }
#introduction h2::before { -webkit-mask-image: url(../img/icons/book-open.svg);      mask-image: url(../img/icons/book-open.svg); }
#etapes h2::before      { -webkit-mask-image: url(../img/icons/check-square.svg);    mask-image: url(../img/icons/check-square.svg); }
.conseils h2::before    { -webkit-mask-image: url(../img/icons/check-circle.svg);    mask-image: url(../img/icons/check-circle.svg); }
.avertissements h2::before { -webkit-mask-image: url(../img/icons/alert-triangle.svg); mask-image: url(../img/icons/alert-triangle.svg); }
.faq h2::before         { -webkit-mask-image: url(../img/icons/help-circle.svg);     mask-image: url(../img/icons/help-circle.svg); }
.conclusion h2::before  { -webkit-mask-image: url(../img/icons/flag.svg);            mask-image: url(../img/icons/flag.svg); }
.links h2::before       { -webkit-mask-image: url(../img/icons/shopping-cart.svg);   mask-image: url(../img/icons/shopping-cart.svg); }
.kit-col:nth-child(1) h2::before { -webkit-mask-image: url(../img/icons/tool.svg);    mask-image: url(../img/icons/tool.svg); }
.kit-col:nth-child(2) h2::before { -webkit-mask-image: url(../img/icons/package.svg); mask-image: url(../img/icons/package.svg); }
/* Icône de la colonne Amazon (achat) : prime sur l'icône nth-child, quel que
   soit le nombre de colonnes affichées. */
.kit .kit-col--amazon h2::before {
    -webkit-mask-image: url(../img/icons/shopping-cart.svg);
    mask-image: url(../img/icons/shopping-cart.svg);
    background-color: #ff9900;
}

/* Outils, matériel et liens affiliés : jusqu'à trois colonnes, chacune
   encadrée individuellement (1 en mobile, 2 dès 42rem, 3 dès 60rem).
   Les tranches ne sont pas égales : la colonne Amazon porte des libellés de
   liens, donc du texte long, et se contenait mal en tiers de largeur. */
.kit {
    display: grid;
    gap: 1rem;
    margin-top: 0;
}
@media (min-width: 42rem) { .kit { grid-template-columns: 1fr 1fr; } }
@media (min-width: 60rem) { .kit { grid-template-columns: 1fr 1fr 1.6fr; } }
/* Entre 42rem et 60rem, la grille est à deux colonnes : Amazon se retrouve
   seule sur la deuxième ligne, plus étroite qu'en trois colonnes. Elle
   récupère toute la ligne. */
@media (min-width: 42rem) and (max-width: 60rem) {
    .kit-col--amazon { grid-column: 1 / -1; }
}
/* Chaque colonne : titre au-dessus, contenu encadré. Les colonnes s'alignent en
   étirant le panneau à la hauteur de la ligne de grille. */
.kit-col {
    display: flex;
    flex-direction: column;
}
.kit-col h2 { font-size: clamp(1.25rem, 1.05rem + 1vw, 1.6rem); margin: 0 0 .5rem; }
.kit-col .block-box {
    flex: 1;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1.3rem 1rem;
}
/* Listes outils/matériel : puces modernes (coche accentuée) au lieu des
   points, sans toucher à la liste de liens affiliés (.kit-links). */
.kit-col .block-box > ul:not(.kit-links) {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.kit-col .block-box > ul:not(.kit-links) > li {
    position: relative;
    padding-left: 1.5rem;
    margin: .3rem 0;
}
.kit-col .block-box > ul:not(.kit-links) > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .18em;
    width: 1rem;
    height: 1rem;
    background-color: var(--accent);
    -webkit-mask: url(../img/icons/check.svg) center / contain no-repeat;
    mask: url(../img/icons/check.svg) center / contain no-repeat;
}
.kit .kit-links {
    list-style: none;
    padding-left: 0;
}
.kit .kit-links li {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: .5rem;
    margin: .45rem 0;
}
/* Un lien par ligne : le libellé peut courir sur deux lignes, pas plus.
   line-clamp n'est pas indispensable au rendu (sans support, le texte
   déborde simplement sur plusieurs lignes), il borne juste la hauteur. */
.kit .kit-links a {
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
/* La note reste sur la ligne de base du lien et ne se fait pas écraser. */
.kit .kit-links .link-note { font-size: .85rem; color: var(--muted); flex: none; }
.kit .kit-links__empty { color: var(--muted); font-style: italic; }
.kit .kit-disclosure {
    margin: .7rem 0 0;
    font-size: .75rem;
    line-height: 1.35;
    color: var(--muted);
}

/* Conseils & avertissements : titre au-dessus, contenu en panneau discret. */
.conseils .block-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1.4rem;
}
.avertissements .block-box {
    background: color-mix(in srgb, var(--warn) 18%, var(--melange-fond));
    border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--border));
    border-radius: var(--radius);
    padding: 1.1rem 1.4rem;
}
.avertissements h2 { color: var(--warn); }
/* Conseils & avertissements : puces à icône (coche / alerte) au lieu des
   points, dans l'esprit des listes outils/matériel. */
.conseils ul,
.avertissements ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.conseils li,
.avertissements li {
    position: relative;
    padding-left: 1.5rem;
    margin: .35rem 0;
}
.conseils li::before,
.avertissements li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .18em;
    width: 1rem;
    height: 1rem;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.conseils li::before {
    background-color: var(--accent);
    -webkit-mask-image: url(../img/icons/check-circle.svg);
    mask-image: url(../img/icons/check-circle.svg);
}
.avertissements li::before {
    background-color: var(--warn);
    -webkit-mask-image: url(../img/icons/alert-triangle.svg);
    mask-image: url(../img/icons/alert-triangle.svg);
}

/* Étapes — chaque étape est une carte distincte, pour bien marquer la
   séparation entre les moments du tutoriel. */
.steps { counter-reset: step; }
.step {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.4rem 1.5rem;
    margin-bottom: 1.2rem;
    box-shadow: var(--shadow);
}
.step:last-child { margin-bottom: 0; }
.step h3 { display: flex; align-items: center; gap: .7rem; margin-top: 0; }
.step-n {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: var(--accent);
    color: var(--surface);
    font-weight: 700;
    font-size: .9rem;
    line-height: 1;
}
/* Captures d'étape : deux colonnes sur grand écran (pleine largeur sur mobile).
   Une image seule occupe les deux colonnes pour ne pas flotter à moitié vide. */
.step-media {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .7rem;
    margin-bottom: .8rem;
}
@media (min-width: 34rem) {
    .step-media { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.step-media > :only-child { grid-column: 1 / -1; }
.step-img { width: 100%; border-radius: 8px; box-shadow: var(--shadow); }
.step .watch { margin: .7rem 0 0; font-size: .9rem; }
/* Lien d'étape : pastille arrondie avec icône lecture, au survol remplie. */
.step .watch-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .95rem;
    border: 1px solid var(--accent);
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
    font-size: .88rem;
    text-decoration: none;
    transition: background .12s, color .12s, transform .1s;
}
.step .watch-link::before {
    content: "";
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: url(../img/icons/play.svg) center / contain no-repeat;
    mask: url(../img/icons/play.svg) center / contain no-repeat;
}
.step .watch-link:hover {
    background: var(--accent);
    color: #fff;
    transform: translateY(-1px);
}

/* FAQ — titre au-dessus, contenu en panneau unique, questions séparées par une
   fine règle. */
.faq .block-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .4rem 1.4rem .6rem;
}
.faq details {
    border-bottom: 1px solid var(--border);
    padding: .45rem 0;
    margin: 0;
}
.faq details:last-of-type { border-bottom: 0; }
/* Accordéon moderne : chevron accentué à droite, qui pivote à l'ouverture. */
.faq summary {
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: .15rem 0;
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "";
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    background-color: var(--accent);
    -webkit-mask: url(../img/icons/chevron-down.svg) center / contain no-repeat;
    mask: url(../img/icons/chevron-down.svg) center / contain no-repeat;
    transition: transform .2s ease;
}
.faq summary:hover { color: var(--accent); }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details[open] summary { margin-bottom: .4rem; }

.conclusion .block-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1.4rem;
}
.conclusion h2 { margin-top: 0; }
.conclusion .block-box > p:last-child { margin-bottom: 0; }

/* Fin d'article : bloc vidéo (miniature + titre + actions). */
.video-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin-top: 3rem;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
@media (min-width: 40rem) {
    .video-cta { grid-template-columns: 220px minmax(0, 1fr); align-items: center; }
}
.video-cta__thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: calc(var(--radius) - 4px);
    overflow: hidden;
}
.video-cta__thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.video-cta__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.6rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}
.video-cta__kicker {
    margin: 0;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
}
.video-cta__title { margin: .15rem 0 .8rem; font-weight: 700; }
.video-cta__actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 0; }

/* Barre vidéo fixe : mobile uniquement, apparaît quand la miniature du haut
   est sortie de l'écran (bascule gérée par site.js). */
.sticky-yt { display: none; }
@media (max-width: 47.99rem) {
    .sticky-yt {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 40;
        display: flex;
        gap: .6rem;
        padding: .55rem .8rem calc(.55rem + env(safe-area-inset-bottom));
        background: var(--surface);
        border-top: 1px solid var(--border);
        box-shadow: 0 -4px 18px rgba(0, 0, 0, .12);
    }
    .sticky-yt[hidden] { display: none; }
    .sticky-yt a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .4rem;
        padding: .7rem .9rem;
        border-radius: 10px;
        font-weight: 700;
        font-size: .92rem;
        text-decoration: none;
    }
    .sticky-yt__watch { flex: 1; background: var(--accent); color: #fff; }
    .sticky-yt__sub {
        flex: 0 0 auto;
        background: var(--surface);
        color: var(--text);
        border: 1px solid var(--border);
    }
    /* Évite que la barre recouvre la fin du pied de page. */
    body.has-sticky-yt { padding-bottom: calc(4rem + env(safe-area-inset-bottom)); }
}
.related { margin-top: 3rem; }

/* Liens affiliés, en fin d'article */
.links { border-top: 1px solid var(--border); margin-top: 2.5rem; padding-top: 1.5rem; }
.links h2 { margin-top: 0; }
.links-note {
    margin: 0 0 1rem;
    font-size: .85rem;
    color: var(--muted);
}
.links { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.link-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .4rem .7rem;
    padding: .7rem .9rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.link-item a { font-weight: 600; }
.link-note { font-size: .88rem; color: var(--muted); }

/* Pagination */
.pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
    margin: 2.5rem 0;
    font-size: .92rem;
}

/* Formulaire de contact */
/* Aucune couleur en dur : tout passe par les variables d'accent et de thème,
   pour rester piloté par `data-accent` (le CSP bloque tout style inline). */
.form-contact {
    max-width: 34rem;
    margin: 1.8rem 0 2rem;
}
.field { margin-bottom: 1.3rem; }
.field-label {
    display: block;
    font-weight: 600;
    font-size: .95rem;
    margin-bottom: .35rem;
}
.field-hint {
    margin: .35rem 0 0;
    font-size: .85rem;
    color: var(--muted);
}
/* Champ « sujet » en boutons à bascule : radios masqués, pilules cliquables.
   Aucune couleur en dur, tout passe par les variables d'accent/thème. */
.toggle-group {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.toggle {
    position: relative;
    cursor: pointer;
}
.toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}
.toggle span {
    display: inline-block;
    padding: .5rem .9rem;
    font-size: .95rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
}
.toggle:hover span { border-color: var(--accent); }
.toggle input:checked + span {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.toggle input:focus-visible + span {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.input,
.textarea {
    width: 100%;
    padding: .65rem .8rem;
    font: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.textarea { resize: vertical; min-height: 8rem; }
.input:focus-visible,
.textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}
.actions { margin-top: 1.5rem; }
.btn-primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 85%, #000); color: #fff; }

/* Messages de retour du formulaire */
.alert {
    max-width: 46rem;
    margin: 1.5rem 0;
    padding: .9rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: .95rem;
}
.alert p { margin: 0 0 .4rem; }
.alert p:last-child { margin-bottom: 0; }
.alert ul { margin: 0; padding-left: 1.2rem; }
.alert.ok { background: color-mix(in srgb, var(--ok) 12%, var(--surface)); }
.alert.warn { background: color-mix(in srgb, var(--warn) 12%, var(--surface)); }
.alert.error { background: color-mix(in srgb, var(--erreur) 12%, var(--surface)); }

/* Piège à robots : invisible pour un humain, toujours présent dans le HTML. */
.piege {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Contraste renforcé : on fonce les bordures, qui ne servent que de séparation
   et tombaient à 1.14:1 sur les boutons de l'en-tête. */
@media (prefers-contrast: more) {
    :root {
        --border: #9a9186;
        --muted: #4a443c;
    }
    html[data-theme="sombre"] {
        --border: #6b635a;
        --muted: #cfc6b9;
    }
}