/* ==========================================================================
   koch-check.de — design system
   --------------------------------------------------------------------------
   Thème actif : « Prüfstand » (voir /themes/pruefstand/).
   Reprend la structure de Brigade (toque-chef) : bandeau accent en haut,
   entête clair logo/menu, titre de héros posé directement sur la photo.
   S'en distingue par des neutres ardoise froids et un accent ambre.

   Bootstrap reste chargé avant ce fichier, uniquement pour la grille.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Polices — thème Prüfstand
   Roboto Slab (titres) + IBM Plex Sans (corps, umlauts et mots composés).
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: url('../fonts/roboto-slab-latin-600-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src: url('../fonts/roboto-slab-latin-700-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url('../fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-display: swap;
    font-weight: 500;
    src: url('../fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: url('../fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src: url('../fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   2. Jetons — thème Brigade
   Lin clair + rouge tomate du logo. Coins doux, ombres légères.
   -------------------------------------------------------------------------- */
:root {
    /* Ambre de la marque. L'entête étant clair, l'accent sert aussi de couleur
       de texte : --c-primary est donc l'ambre foncé (4,9:1 sur blanc), tandis
       que l'ambre vif --c-primary-400 est réservé aux aplats et aux badges. */
    --c-primary-50: #fffbeb;
    --c-primary-100: #fef3c7;
    --c-primary-200: #fde68a;
    --c-primary-300: #fbbf24;
    --c-primary-400: #f59e0b;
    --c-primary: #b45309;
    --c-primary-600: #92400e;
    --c-primary-700: #78350f;
    /* Texte posé sur un aplat d'ambre vif (--c-primary-400) : le blanc y tombe
       à 2,1:1, il faut de l'ardoise. */
    --c-on-accent: #1f2937;

    --c-ink: #1f2937;
    --c-ink-2: #334155;
    --c-body: #3f4a5a;
    --c-muted: #64748b;
    --c-line: #e2e8f0;
    --c-line-2: #eef2f6;
    --c-surface: #ffffff;
    --c-surface-2: #f4f6f8;
    --c-surface-3: #e8ecf1;

    --c-pros: #15803d;
    --c-pros-bg: #f0fdf4;
    --c-pros-line: #bbf7d0;
    --c-cons: #b91c1c;
    --c-cons-bg: #fef2f2;
    --c-cons-line: #fecaca;
    --c-amazon: #ffd814;
    --c-amazon-dark: #f0b400;

    --font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Roboto Slab', Georgia, 'Times New Roman', serif;
    --fs-body: 1.0625rem;

    --sp-1: .25rem;
    --sp-2: .5rem;
    --sp-3: .75rem;
    --sp-4: 1rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-24: 6rem;

    --r-sm: 10px;
    --r: 14px;
    --r-lg: 18px;
    --r-xl: 24px;
    --r-pill: 999px;

    --sh-xs: 0 1px 2px rgba(31, 41, 55, .05);
    --sh-sm: 0 2px 8px rgba(31, 41, 55, .06);
    --sh: 0 8px 24px rgba(31, 41, 55, .08);
    --sh-lg: 0 16px 40px rgba(31, 41, 55, .12);
    --sh-primary: 0 6px 18px rgba(180, 83, 9, .28);

    --ease: cubic-bezier(.22, .61, .36, 1);
    --t: .25s var(--ease);

    --container: 1220px;
    --nav-h: 76px;
}

/* --------------------------------------------------------------------------
   3. Reset et base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 20px);
}

body {
    margin: 0;
    width: 100%;
    overflow-x: hidden;
    font-family: var(--font);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.7;
    color: var(--c-body);
    background-color: var(--c-surface-2);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-synthesis-weight: none;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    color: var(--c-ink);
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.01em;
    text-wrap: balance;
}

h1 { font-size: clamp(1.9rem, 3.9vw, 2.9rem); font-weight: 700; }
h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.55rem); }
h4 { font-size: 1.2rem; }
h5 { font-size: 1.05rem; }

.site-title,
.footer-widget-title,
.divHeader h1 {
    font-family: var(--font-display);
    letter-spacing: -.01em;
}

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--t);
}

img,
.img {
    max-width: 100%;
    height: auto;
    border: 0;
}

svg { vertical-align: middle; }

hr {
    border: 0;
    border-top: 1px solid var(--c-line);
    margin: var(--sp-8) 0;
}

::selection {
    background: var(--c-primary-200);
    color: var(--c-primary-700);
}

:focus-visible {
    outline: 3px solid var(--c-primary-400);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

.container {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--sp-6);
}

@media (min-width: 1200px) {
    .container { max-width: var(--container); }
}

/* WOW.js est initialisé par main.js alors qu'animate.css n'est pas chargé :
   il masquait 2786 éléments sans jamais les animer. Neutralisé ici, une
   apparition maison prend le relais (voir .is-reveal plus bas). */
.wow,
.fadeInUp,
.fadeInDown {
    visibility: visible !important;
    animation: none !important;
}

.preloader { display: none !important; }

/* --------------------------------------------------------------------------
   4. Classes utilitaires héritées du HTML généré
   Le markup des 325 pages s'appuie dessus, elles doivent être reconduites.
   -------------------------------------------------------------------------- */
.center { text-align: center; }
.white { color: #fff; }
.black { color: var(--c-ink); }
.ml-20 { margin-left: var(--sp-6); }
.mb-10 { margin-bottom: var(--sp-3); }
.pt-100 { padding-top: var(--sp-16); }
.pb-70 { padding-bottom: var(--sp-12); }
.py-80 { padding: var(--sp-16) 0; }
.py-120 { padding: var(--sp-24) 0; }
.align-self-right { text-align: right; }
.position-relative { position: relative; z-index: 1; }
.mtn-100 { margin-top: 0; }

/* Le texte justifié sans césure creuse de larges blancs entre les mots.
   Certains paragraphes portent text-align:justify en style inline, d'où le
   !important qui est ici le seul moyen de reprendre la main. */
.justify,
.blog-details p[style*="justify"],
.blog-details [style*="text-align:justify"] {
    text-align: left !important;
}

/* Remplace un cadrage fait au padding en pourcentage */
.p-c-25 {
    display: block;
    width: min(100%, 420px);
    margin-inline: auto;
    padding: 0;
}

/* Vagues décoratives de l'ancien thème */
#slider_after { display: none; }

/* --------------------------------------------------------------------------
   5. Entête et navigation
   -------------------------------------------------------------------------- */
.header-top {
    background: var(--c-primary);
    padding: 7px 0;
    border-bottom: 0;
}

.header-top-contact ul {
    display: flex;
    gap: var(--sp-6);
    justify-content: center;
}

.header-top-contact li,
.header-top-contact a {
    color: #fff;
    font-family: var(--font);
    font-size: .84rem;
    font-weight: 500;
    letter-spacing: .02em;
    text-transform: none;
}

.header-top-contact a:hover { color: #fff; }

.main-navigation {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--c-line);
}

.main-navigation .navbar {
    min-height: var(--nav-h);
    padding: var(--sp-2) 0;
    background: transparent;
}

.navbar-brand { margin-right: var(--sp-8); }

.navbar-brand img {
    width: auto;
    max-height: 50px;
    transition: transform var(--t);
}

.navbar-brand:hover img { transform: scale(1.03); }

.navbar-nav {
    align-items: center;
    gap: var(--sp-1);
}

.navbar #main_nav { justify-content: flex-end; }

.navbar-nav .nav-link {
    position: relative;
    padding: var(--sp-2) var(--sp-3);
    border: 0;
    border-radius: var(--r-sm);
    color: var(--c-ink-2);
    font-family: var(--font);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    transition: color var(--t), background var(--t);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-item:hover .nav-link {
    color: var(--c-primary-600);
    background: var(--c-primary-50);
    border-color: transparent;
}

.navbar-nav .nav-link.active {
    color: var(--c-primary-600);
    background: var(--c-primary-50);
    border-color: transparent;
}

.navbar-nav .nav-link.active::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 14px;
    height: 3px;
    border-radius: 3px;
    background: var(--c-primary);
    transform: translateX(-50%);
}

.navbar-nav .dropdown-toggle::after {
    margin-left: 6px;
    border-top-color: currentColor;
    vertical-align: 2px;
}

.dropdown-menu {
    min-width: 240px;
    padding: var(--sp-2);
    border: 1px solid var(--c-line);
    border-radius: var(--r);
    background: var(--c-surface);
    box-shadow: var(--sh-lg);
}

.dropdown-item {
    padding: 9px 12px;
    border-radius: var(--r-sm);
    color: var(--c-ink);
    font-family: var(--font);
    font-size: .93rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    transition: background var(--t), color var(--t), transform var(--t);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--c-primary-50);
    color: var(--c-primary-700);
    transform: translateX(2px);
}

.navbar-toggler {
    padding: 6px 10px;
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    background: var(--c-surface);
}

.navbar-toggler:focus { box-shadow: 0 0 0 3px var(--c-primary-100); }

.navbar-toggler-mobile-icon {
    display: inline-flex;
    font-size: 1.4rem;
    color: var(--c-ink);
}

.mobile-menu-right { display: none; }

.nav-right-link {
    background: transparent;
    border: 0;
    color: var(--c-ink);
    font-size: 1.2rem;
}

/* --------------------------------------------------------------------------
   6. Bandeau héros
   L'URL de l'image est posée en style inline par le générateur. Un calque
   ::before la récupère par héritage, ce qui permet de l'animer.
   -------------------------------------------------------------------------- */
.site-breadcrumb {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: clamp(340px, 50vh, 520px);
    padding: 0;
    overflow: hidden;
    isolation: isolate;
    background-color: var(--c-ink);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-align: left;
    border-bottom: 0;
}

.site-breadcrumb::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background: inherit;
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
    filter: none;
}

.site-breadcrumb::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg,
            rgba(31, 41, 55, .45) 0%,
            rgba(31, 41, 55, .25) 40%,
            rgba(31, 41, 55, .75) 100%);
}

.site-breadcrumb .container {
    padding-top: calc(var(--nav-h) + var(--sp-12));
    padding-bottom: var(--sp-12);
}

.divHeader {
    max-width: 720px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #fff;
}

.divHeader::before {
    content: 'IM TEST';
    display: inline-block;
    margin-bottom: var(--sp-4);
    padding: 5px 12px;
    background: var(--c-primary);
    color: #fff;
    font-family: var(--font);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    border-radius: var(--r-pill);
    box-shadow: none;
    width: auto;
    height: auto;
}

.divHeader h1 {
    color: #fff;
    font-size: clamp(1.85rem, 4vw, 3.1rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.02em;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
    text-transform: none;
}

.divHeader p {
    max-width: 48ch;
    margin: var(--sp-4) 0 0;
    color: rgba(255, 255, 255, .9);
    font-family: var(--font);
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    font-weight: 400;
    line-height: 1.55;
    text-transform: none;
    letter-spacing: 0;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}

/* --------------------------------------------------------------------------
   7. Titres de section
   -------------------------------------------------------------------------- */
.site-heading {
    position: relative;
    margin-bottom: var(--sp-8);
}

.site-title {
    margin: 0;
    font-size: clamp(1.55rem, 3vw, 2.25rem);
    font-weight: 700;
    color: var(--c-ink);
}

.site-title span {
    color: var(--c-primary);
    background: none;
    padding: 0;
}

.heading-divider {
    display: inline-block;
    width: 48px;
    height: 3px;
    margin-top: var(--sp-3);
    border-radius: 3px;
    background: var(--c-primary);
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   8. Grille et cartes d'article
   -------------------------------------------------------------------------- */
.blog-area { position: relative; }

.blog-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    overflow: hidden;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-xs);
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}

.blog-item:hover {
    transform: translateY(-4px);
    border-color: var(--c-primary-200);
    box-shadow: var(--sh);
}

.blog-item-img {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    padding: var(--sp-6);
    background: var(--c-surface);
    border-radius: 0;
    overflow: hidden;
    border-bottom: 1px solid var(--c-line-2);
}

.blog-item-img::before {
    display: none;
}

.blog-item-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
    mix-blend-mode: multiply;
    transition: transform .4s var(--ease);
}

.blog-item:hover .blog-item-img img { transform: scale(1.04); }

.blog-item-info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: var(--sp-5, 1.25rem) var(--sp-6) var(--sp-6);
    border-top: 0;
    background: var(--c-surface);
}

.blog-item-meta ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    margin-bottom: var(--sp-3);
    padding: 0;
    border: 0;
}

.blog-item-meta li {
    display: inline-flex;
    margin: 0;
}

.blog-item-meta a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--c-muted);
    font-size: .8rem;
    font-weight: 500;
}

.blog-item-meta a:hover { color: var(--c-primary); }

.blog-item-meta i {
    color: var(--c-ink);
    font-size: .85rem;
}

.blog-title {
    margin: 0 0 var(--sp-2);
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.01em;
    text-transform: none;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-title a { color: var(--c-ink); }
.blog-title a:hover { color: var(--c-primary-600); }

.blog-item-info > p {
    margin-bottom: var(--sp-6);
    color: var(--c-muted);
    font-size: .9rem;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* CTA carte — lien compact, sans pilule ni ombre */
.blog-item-info .theme-btn,
.blog-details .blog-area .blog-item a.theme-btn {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    justify-content: flex-start;
    gap: 6px;
    width: auto;
    max-width: max-content;
    margin-top: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    background-image: none !important;
    color: var(--c-primary) !important;
    font-family: var(--font);
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.3;
    text-transform: none;
    box-shadow: none !important;
    cursor: pointer;
    transition: color var(--t);
}

.blog-item-info .theme-btn:hover,
.blog-item-info .theme-btn:focus-visible,
.blog-details .blog-area .blog-item a.theme-btn:hover {
    background: transparent !important;
    color: var(--c-ink) !important;
    transform: none;
    box-shadow: none !important;
}

.blog-item-info .theme-btn i,
.blog-details .blog-area .blog-item a.theme-btn i {
    width: .85em;
    height: .85em;
    color: inherit;
    transition: transform .28s var(--ease);
}

.blog-item-info .theme-btn:hover i,
.blog-details .blog-area .blog-item a.theme-btn:hover i {
    transform: translateX(4px);
}

/* Apparition douce des cartes. Volontairement une animation et non une
   transition déclenchée au défilement : une animation se termine toujours,
   une carte ne peut donc jamais rester bloquée en opacité 0. */
.is-reveal {
    animation: card-in .42s var(--ease) both;
}

.is-reveal:nth-child(3n+2) { animation-delay: .06s; }
.is-reveal:nth-child(3n+3) { animation-delay: .12s; }

@keyframes card-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   8 bis. Icônes
   Le HTML utilise des classes Font Awesome alors que la feuille FA n'a jamais
   été chargée par les pages : les <i> étaient donc vides. Plutôt que d'ajouter
   une dépendance de plusieurs centaines de kilo-octets, les quelques symboles
   réellement utilisés sont dessinés en SVG appliqué en masque CSS.
   Une icône non prévue reste simplement invisible.
   -------------------------------------------------------------------------- */
i.fas,
i.far,
i.fab,
i[class*="fa-"] {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -.125em;
    font-style: normal;
    background-color: transparent;
    -webkit-mask: no-repeat center / contain;
    mask: no-repeat center / contain;
}

i.fa-user-circle,
i.fa-user-tie,
i.fa-calendar-alt,
i.fa-arrow-right,
i.fa-caret-right,
i.fa-envelope,
i.fa-pen,
i.fa-comment-lines,
i.fa-paper-plane {
    background-color: currentColor;
}

i.fa-user-circle,
i.fa-user-tie {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3Cpath d='M6.8 20.4a7 7 0 0 1 10.4 0'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3Cpath d='M6.8 20.4a7 7 0 0 1 10.4 0'/%3E%3C/svg%3E");
}

i.fa-calendar-alt {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E");
}

i.fa-arrow-right {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

i.fa-caret-right {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M9 5.5 16 12l-7 6.5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M9 5.5 16 12l-7 6.5z'/%3E%3C/svg%3E");
}

i.fa-envelope {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%3E%3C/svg%3E");
}

i.fa-pen,
i.fa-comment-lines {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E");
}

i.fa-paper-plane {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13M22 2l-7 20-4-9-9-4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13M22 2l-7 20-4-9-9-4z'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   9. Boutons
   -------------------------------------------------------------------------- */
.theme-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 11px 22px;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--c-primary);
    color: #fff;
    font-family: var(--font);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.3;
    text-align: center;
    text-transform: none;
    cursor: pointer;
    box-shadow: var(--sh-primary);
    transition: background var(--t), color var(--t), transform var(--t), box-shadow var(--t);
}

.theme-btn:hover {
    background: var(--c-primary-600);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(180, 83, 9, .35);
}

.theme-btn:active { transform: translateY(0); }

.theme-btn i {
    font-size: .8rem;
    transition: transform var(--t);
}

.theme-btn:hover i { transform: translateX(3px); }

/* Appel à l'action affilié */
.btn-amz {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0 26px 0 48px;
    border: 0;
    border-radius: var(--r-pill);
    background-color: var(--c-amazon);
    background-image: url(../img/amazon.webp);
    background-repeat: no-repeat;
    background-size: 22px 22px;
    background-position: 16px center;
    color: #0f1111;
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 52px;
    text-align: center;
    text-transform: none;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 4px 14px rgba(240, 180, 0, .35);
    transition: background-color var(--t), transform var(--t), box-shadow var(--t);
}

.btn-amz:hover {
    background-color: var(--c-amazon-dark);
    color: #0f1111;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(240, 180, 0, .45);
}

.btn-amz:active { transform: translate(0, 0); }

.center { margin: var(--sp-8) 0; }

/* --------------------------------------------------------------------------
   10. Contenu d'article
   -------------------------------------------------------------------------- */
.blog-area { position: relative; }

.blog-single {
    position: relative;
    padding-top: var(--sp-12);
    padding-bottom: var(--sp-16);
}

/* Corps d'article : panneau blanc sur fond béton.
   L'accueil réutilise .blog-single-content autour du catalogue : on l'exclut. */
.blog-single .blog-single-content:not(:has(.blog-area)) {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-xs);
    padding: var(--sp-8) var(--sp-6);
}

.blog-single-wrapper { box-shadow: none; }

.blog-details {
    font-size: 1.075rem;
    line-height: 1.78;
    color: var(--c-body);
}

/* Largeur de lecture confortable — articles seulement.
   Sur l'accueil, le texte d'intro doit suivre la même largeur que la grille. */
.blog-single-content:not(:has(.blog-area)) .blog-details > p,
.blog-single-content:not(:has(.blog-area)) .blog-details .col-lg-12 > p,
.blog-single-content:not(:has(.blog-area)) .blog-details > ul,
.blog-single-content:not(:has(.blog-area)) .blog-details > ol {
    max-width: 74ch;
    margin-inline: auto;
}

/* Accueil : le texte du haut aligne sa largeur sur la liste d'articles */
.blog-details:has(.blog-area) > p,
.blog-single-content:has(.blog-area) > .blog-info > .blog-details > p {
    max-width: none;
    margin-inline: 0;
    width: 100%;
}

/* Accueil seulement : .blog-area est déjà dans un .container, le second
   ajoutait un padding. Sur les pages catégorie, .blog-area > .container
   EST le conteneur principal — on ne doit pas l'annuler. */
.blog-details .blog-area > .container,
.blog-single-content .blog-area > .container {
    max-width: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Pages catégorie : air entre le héros et le contenu
   (le HTML porte encore mtn-100, neutralisé à 0 plus haut). */
main > .blog-area {
    padding-top: clamp(3.5rem, 6vw, 5.5rem);
    padding-bottom: var(--sp-12);
}

/* Pages catégorie : titre en col-lg-8 → pleine largeur */
.blog-area > .container > .row > .col-lg-8.mx-auto {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
}

.blog-area > .container > .row > .col-lg-8.mx-auto .site-heading {
    margin-bottom: var(--sp-8);
}

.blog-area > .container > .row > .col-lg-8.mx-auto .site-heading p {
    max-width: 60ch;
    margin: var(--sp-4) auto 0;
    color: var(--c-muted);
}

/* Bloc d'intro des catégories : même largeur que la grille d'articles */
.blog-area > .container .blog-single-content {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    box-shadow: var(--sh-xs);
    border-radius: var(--r-lg);
    padding: var(--sp-8) var(--sp-8);
    margin-bottom: var(--sp-8);
}

.blog-area > .container .blog-single-content > * {
    max-width: none;
}

.blog-area > .container .blog-single-content h3,
.blog-area > .container .blog-single-content h4 {
    font-family: var(--font-display);
    text-transform: none;
    letter-spacing: -.01em;
    margin-top: var(--sp-8);
    margin-bottom: var(--sp-3);
}

.blog-area > .container .blog-single-content h3:first-child {
    margin-top: 0;
}

/* Puces alignées sous le texte, clairement à l'intérieur du panneau */
.blog-area > .container .blog-single-content ul {
    padding-left: 0;
    margin: .25rem 0 var(--sp-4) 1.75rem;
}

.blog-area > .container .blog-single-content ul li {
    position: relative;
    list-style: none !important;
    padding-left: 1.35em;
    margin-bottom: .45em;
}

.blog-area > .container .blog-single-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .72em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c-primary);
}

.blog-details h2,
.blog-details h3 {
    margin-top: var(--sp-12);
    margin-bottom: var(--sp-4);
}

/* Accroche d'accueil (1re phrase de l'index) */
.blog-details > h2.intro-lead {
    margin-top: 0;
    margin-bottom: var(--sp-4);
    font-size: clamp(1.25rem, 2.1vw, 1.55rem);
    font-weight: 700;
    line-height: 1.35;
    text-wrap: balance;
}


/* Liens de contenu : aplat tomate discret */
.blog-details a:not(.theme-btn):not(.btn-amz) {
    color: var(--c-primary-600);
    font-weight: 600;
    text-decoration: none;
    background-image: linear-gradient(var(--c-primary-100), var(--c-primary-100));
    background-repeat: no-repeat;
    background-size: 0% 100%;
    background-position: 0 0;
    border-radius: 4px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    padding: 0 2px;
    margin: 0 -2px;
    transition: background-size .3s var(--ease), color var(--t);
}

.blog-details a:not(.theme-btn):not(.btn-amz):hover {
    color: var(--c-primary-700);
    background-size: 100% 100%;
}

/* Sur l'accueil, le catalogue est imbriqué dans .blog-details : les liens des
   cartes héritaient donc du style de lien de contenu (orange + surlignage).
   On les ramène à leur propre traitement. */
.blog-details .blog-area .blog-item a {
    padding: 0;
    margin: 0;
    font-weight: inherit;
    background-image: none !important;
    background-size: 0 !important;
}

.blog-details .blog-area .blog-item .blog-title a { color: var(--c-ink); }
.blog-details .blog-area .blog-item .blog-title a:hover { color: var(--c-primary-600); }

.blog-details .blog-area .blog-item .blog-item-meta a {
    color: var(--c-muted);
    font-weight: 500;
}

.blog-details .blog-area .blog-item .blog-item-meta a:hover { color: var(--c-primary); }


/* Chaque page générée embarque un <style> avec « .blog-details li
   { list-style: inside !important } ». Il faut donc à la fois !important et
   une spécificité supérieure pour reprendre la main sur les puces. */
.blog-details ul { padding-left: 0; }
.blog-details ol { padding-left: 1.4em; }

.blog-details ul li {
    position: relative;
    padding-left: 1.35em;
    list-style: none !important;
}

.blog-details ul li::before {
    content: '';
    position: absolute;
    left: .25em;
    top: .7em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-primary-300);
}

.blog-details ol li { list-style: decimal !important; }
.blog-details ol li::marker { color: var(--c-primary); font-weight: 700; }

.blog-details li { margin-bottom: .45em; }

/* Les métadonnées des cartes sont un <ul> : pas de puce de contenu ici. */
.blog-details .blog-item-meta li {
    margin-bottom: 0;
    padding-left: 0;
}

.blog-details .blog-item-meta li::before { content: none; }

.blog-details img {
    border-radius: var(--r);
    background: var(--c-surface-2);
}

.blog-single .blog-single-content img { border-radius: var(--r); }

blockquote {
    margin: var(--sp-8) auto;
    max-width: 74ch;
    padding: var(--sp-4) var(--sp-6);
    border-left: 4px solid var(--c-primary);
    border-radius: 0 var(--r) var(--r) 0;
    background: var(--c-primary-50);
    color: var(--c-ink-2);
    font-style: italic;
}

/* --------------------------------------------------------------------------
   11. Bloc avantages / inconvénients
   -------------------------------------------------------------------------- */
.pros-cons {
    align-items: stretch;
    max-width: 900px;
    margin: var(--sp-12) auto;
}

.pros-cons .col-md-6 { display: block; }

.pros-cons .pc-card {
    position: relative;
    height: 100%;
    padding: var(--sp-8) var(--sp-6) var(--sp-6);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-xs);
}

.pros-cons .pc-pros {
    background: var(--c-pros-bg);
    border: 1px solid var(--c-pros-line);
}

.pros-cons .pc-cons {
    background: var(--c-cons-bg);
    border: 1px solid var(--c-cons-line);
}

.pros-cons .pc-icon {
    position: absolute;
    top: -18px;
    left: var(--sp-6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    box-shadow: var(--sh-sm);
}

.pros-cons .pc-icon svg { width: 20px; height: 20px; display: block; }
.pros-cons .pc-icon-pros { background: var(--c-pros); }
.pros-cons .pc-icon-cons { background: var(--c-cons); }

.pros-cons .pc-title {
    margin: var(--sp-2) 0 var(--sp-4);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--c-ink);
}

.pros-cons .pc-list { padding: 0; }

.pros-cons .pc-list li {
    position: relative;
    margin-bottom: var(--sp-2);
    padding-left: 1.5em;
    list-style: none !important;
    font-size: .95rem;
    line-height: 1.5;
    color: var(--c-ink-2);
}

/* Réinitialise la pastille ronde héritée des listes d'article, sans quoi
   le + se superpose à une puce orange. */
.pros-cons .pc-list li::before {
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    font-size: 1.05em;
    font-weight: 700;
    line-height: inherit;
}

.pros-cons .pc-pros .pc-list li::before { content: '+'; color: var(--c-pros); }
.pros-cons .pc-cons .pc-list li::before { content: '−'; color: var(--c-cons); }

/* --------------------------------------------------------------------------
   12. Tableaux de caractéristiques
   -------------------------------------------------------------------------- */
.blog-details table,
table.table {
    width: 100%;
    max-width: 860px;
    margin: 0 auto var(--sp-8);
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--c-line);
    border-radius: var(--r);
    overflow: hidden;
    font-size: .95rem;
    box-shadow: var(--sh-xs);
}

/* Bootstrap peint le fond de ses cellules avec un box-shadow interne qui
   recouvrirait le nôtre : il faut le neutraliser en premier. */
table.table > :not(caption) > * > * {
    padding: 12px 18px;
    border: 0;
    background-color: transparent;
    box-shadow: none;
    color: var(--c-body);
    vertical-align: top;
}

/* Le HTML généré n'a pas de <thead> : la ligne d'en-tête est simplement
   la première <tr>, reconnaissable à ses <th>. */
table.table > * > tr > th {
    background: var(--c-ink);
    color: #fff;
    font-family: var(--font);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
}

table.table > * > tr + tr > td { border-top: 1px solid var(--c-line-2); }

table.table-striped > * > tr:nth-of-type(odd) > td { background-color: var(--c-surface-2); }

table.table > * > tr { transition: background-color var(--t); }
table.table > * > tr:hover > td { background-color: var(--c-primary-50); }

/* --------------------------------------------------------------------------
   13. Navigation entre articles
   Le HTML généré porte des styles inline (bleu #3498db), neutralisés ici et
   par la couche JS qui retire les attributs style.
   -------------------------------------------------------------------------- */
.article-navigation {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--sp-4) !important;
    max-width: 900px;
    margin: var(--sp-12) auto !important;
}

.article-navigation > a {
    max-width: none !important;
    color: inherit !important;
}

.article-navigation > a > div {
    height: 100%;
    padding: var(--sp-4) !important;
    border: 1px solid var(--c-line) !important;
    border-radius: var(--r) !important;
    background: var(--c-surface);
    box-shadow: var(--sh-xs) !important;
    transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}

.article-navigation > a:hover > div {
    border-color: var(--c-primary-200) !important;
    background: var(--c-surface);
    box-shadow: var(--sh-sm) !important;
    transform: translateY(-2px);
}

.article-navigation img {
    width: 56px !important;
    height: 56px !important;
    object-fit: contain !important;
    border-radius: var(--r-sm) !important;
    background: var(--c-surface-2);
    mix-blend-mode: multiply;
}

.article-navigation i { color: var(--c-primary) !important; }

/* --------------------------------------------------------------------------
   14. Formulaires et page contact
   -------------------------------------------------------------------------- */
.contact-form {
    padding: var(--sp-8);
    border: 1px solid var(--c-line);
    border-top: 3px solid var(--c-primary);
    border-radius: var(--r-lg);
    background: var(--c-surface-2);
}

.contact-form-header h2 { margin-bottom: var(--sp-2); }

.contact-form .input-group { margin-bottom: var(--sp-4); }

.form-control {
    padding: 12px 16px;
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    background: var(--c-surface);
    font-family: inherit;
    font-size: 1rem;
    color: var(--c-ink);
    box-shadow: none;
    transition: border-color var(--t), box-shadow var(--t);
}

.form-control:focus {
    border-color: var(--c-primary-300);
    box-shadow: 0 0 0 4px var(--c-primary-50);
    outline: 0;
}

.input-group-text {
    border: 1px solid var(--c-line);
    border-right: 0;
    border-radius: var(--r-sm) 0 0 var(--r-sm);
    background: var(--c-surface);
    color: var(--c-primary);
}

.contact-img img { border-radius: var(--r-lg); }

.text-success { color: var(--c-pros); }

/* --------------------------------------------------------------------------
   15. Pied de page
   -------------------------------------------------------------------------- */
.footer-area {
    position: relative;
    background: var(--c-ink);
    color: #c9c0b6;
    border-top: 0;
}

.footer-widget { border-top: 3px solid var(--c-primary); }

.footer-widget-wrapper {
    padding-top: var(--sp-16) !important;
    padding-bottom: var(--sp-8) !important;
}

.footer-widget-box { margin-bottom: var(--sp-8); }

.footer-widget-box p {
    color: #a89a8d;
    font-size: .95rem;
}

.footer-logo img {
    width: auto;
    max-height: 56px;
    margin-bottom: var(--sp-4);
}

.footer-widget-title {
    position: relative;
    margin-bottom: var(--sp-6);
    padding-bottom: var(--sp-3);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.footer-widget-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 36px;
    height: 3px;
    border-radius: 3px;
    background: var(--c-primary);
}

.footer-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0;
}

.footer-list li a {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 4px 0;
    color: #a89a8d;
    font-size: .92rem;
    transition: color var(--t), transform var(--t);
}

.footer-list li a:hover {
    color: var(--c-primary-200);
    transform: translateX(4px);
}

.footer-list li a i {
    color: var(--c-primary);
    font-size: .7rem;
}

.copyright {
    padding: var(--sp-4) 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: #100c09;
}

.copyright-text {
    margin: 0;
    color: #90837a;
    font-size: .88rem;
}

.copyright-text a { color: var(--c-primary-200); font-weight: 500; }
.copyright-text a:hover { color: var(--c-primary-100); }

/* --------------------------------------------------------------------------
   16. Bouton retour en haut
   -------------------------------------------------------------------------- */
#scroll-top {
    position: fixed;
    right: var(--sp-6);
    bottom: -20px;
    z-index: 1040;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--c-primary);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    box-shadow: var(--sh);
    transition: opacity var(--t), visibility var(--t), bottom var(--t), background var(--t);
}

#scroll-top.active {
    bottom: var(--sp-6);
    opacity: 1;
    visibility: visible;
}

#scroll-top:hover { background: var(--c-primary-600); }

/* --------------------------------------------------------------------------
   17. Barre de recherche et filtres (injectée par la couche JS)
   -------------------------------------------------------------------------- */
.bf-toolbar {
    max-width: none;
    width: 100%;
    margin: 0 0 var(--sp-8);
}

.bf-search {
    position: relative;
    margin-bottom: var(--sp-4);
}

.bf-search input {
    width: 100%;
    padding: 14px 18px 14px 48px;
    border: 1px solid var(--c-line);
    border-radius: var(--r-pill);
    background: var(--c-surface);
    font-family: inherit;
    font-size: 1rem;
    color: var(--c-ink);
    box-shadow: var(--sh-xs);
    transition: border-color var(--t), box-shadow var(--t), background var(--t);
}

.bf-search input::placeholder { color: var(--c-muted); }

.bf-search input:focus {
    outline: 0;
    border-color: var(--c-primary-300);
    background: var(--c-surface);
    box-shadow: 0 0 0 4px var(--c-primary-50);
}

.bf-search svg {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--c-muted);
    pointer-events: none;
}

.bf-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-2);
}

.bf-chip {
    padding: 7px 15px;
    border: 1px solid var(--c-line);
    border-radius: var(--r-pill);
    background: var(--c-surface);
    color: var(--c-ink-2);
    font-family: var(--font);
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    transition: background var(--t), color var(--t), border-color var(--t), box-shadow var(--t);
}

.bf-chip:hover {
    border-color: var(--c-primary-200);
    background: var(--c-primary-50);
    color: var(--c-primary-700);
    box-shadow: none;
}

.bf-chip[aria-pressed="true"] {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
    box-shadow: var(--sh-primary);
}

.bf-count {
    margin-top: var(--sp-4);
    color: var(--c-muted);
    font-size: .875rem;
    text-align: center;
}

.bf-empty {
    padding: var(--sp-12) var(--sp-4);
    text-align: center;
    color: var(--c-muted);
}

.bf-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    margin-top: var(--sp-12);
}

.bf-page-btn {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    background: var(--c-surface);
    color: var(--c-ink);
    font-family: var(--font);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--t), color var(--t), border-color var(--t), box-shadow var(--t);
}

.bf-page-btn:hover:not(:disabled) {
    border-color: var(--c-primary-200);
    background: var(--c-primary-50);
    color: var(--c-primary-700);
    box-shadow: none;
}

.bf-page-btn[aria-current="page"] {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
    box-shadow: var(--sh-primary);
}

.bf-page-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.bf-dots {
    padding: 0 4px;
    color: var(--c-muted);
}

/* Barre de progression de lecture sur les articles */
.bf-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    height: 3px;
    width: 0;
    background: var(--c-primary);
    box-shadow: none;
    transition: width .1s linear;
}

/* --------------------------------------------------------------------------
   18. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .main-navigation { position: relative; }

    .mobile-menu-right {
        display: flex;
        align-items: center;
        gap: var(--sp-4);
    }

    .navbar-collapse {
        margin-top: var(--sp-3);
        padding: var(--sp-2);
        border: 1px solid var(--c-line);
        border-radius: var(--r);
        background: var(--c-surface);
        box-shadow: var(--sh);
    }

    .navbar-nav {
        align-items: stretch;
        gap: 2px;
    }

    .navbar-nav .nav-link { padding: 10px 14px; }
    .navbar-nav .nav-link.active::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 14px;
    height: 3px;
    border-radius: 3px;
    background: var(--c-primary);
    transform: translateX(-50%);
}

    .dropdown-menu {
        border: 0;
        background: var(--c-surface-2);
        box-shadow: none;
    }

    .site-breadcrumb .container { padding-top: var(--sp-16); }
}

@media (max-width: 767.98px) {
    :root { --fs-body: 1rem; }

    .site-breadcrumb { min-height: clamp(280px, 54vh, 400px); }

    .site-breadcrumb::after {
        background: linear-gradient(180deg,
            rgba(26, 23, 20, .5) 0%,
            rgba(26, 23, 20, .85) 100%);
    }

    .divHeader {
        max-width: 100%;
        box-shadow: none;
        padding: 0;
    }

    .divHeader h1 { font-size: clamp(1.45rem, 6.2vw, 2.1rem); }

    .blog-item { box-shadow: var(--sh-xs); }

    .blog-details { font-size: 1rem; }

    /* Tableaux défilables plutôt que débordants */
    .blog-details table,
    table.table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .btn-amz {
        padding: 0 20px 0 44px;
        font-size: .93rem;
        line-height: 50px;
    }

    .header-top-contact ul { gap: var(--sp-3); }
}

/* --------------------------------------------------------------------------
   19. Préférences d'animation et impression
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .site-breadcrumb::before {
        animation: none;
        transform: scale(1.02);
    }

    .is-reveal { animation: none; }
}

@media print {
    .main-navigation,
    .header-top,
    .footer-area,
    #scroll-top,
    .bf-toolbar,
    .bf-pagination,
    .article-navigation { display: none !important; }

    .site-breadcrumb { min-height: auto; background: none; }
    .divHeader h1 { color: #000; text-shadow: none; }
}


/* --------------------------------------------------------------------------
   Logo typographique
   Pas de fichier image : le nom du site est le logo, comme sur la page
   d'attente livrée avec le domaine (ambre sur ardoise).
   -------------------------------------------------------------------------- */
.pru-wordmark {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.025em;
    color: var(--c-ink);
    white-space: nowrap;
}

.pru-wordmark span { color: var(--c-primary); }

.pru-wordmark em {
    font-style: normal;
    font-weight: 600;
    font-size: .7em;
    color: var(--c-muted);
}

.pru-wordmark:hover { color: var(--c-ink); }
.pru-wordmark:hover span { color: var(--c-primary-600); }

/* Dans le pied de page, le fond est sombre : on inverse. */
.pru-wordmark-footer {
    font-size: 1.4rem;
    margin-bottom: var(--sp-3);
    color: #fff;
}

.pru-wordmark-footer span { color: var(--c-primary-400); }
.pru-wordmark-footer em { color: rgba(255, 255, 255, .55); }
.pru-wordmark-footer:hover { color: #fff; }
.pru-wordmark-footer:hover span { color: var(--c-primary-300); }

/* --------------------------------------------------------------------------
   Pied de page — mentions spécifiques koch-check.de
   -------------------------------------------------------------------------- */
.footer-affiliate {
    margin: 0;
    font-size: .82rem;
    line-height: 1.5;
    opacity: .75;
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    justify-content: flex-end;
    margin: 0;
}

.footer-legal a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 767.98px) {
    .footer-legal { justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   Pages statiques (Impressum, Datenschutz, Über uns)
   Pas de héros photo : ces pages s'ouvrent directement sur le texte.
   -------------------------------------------------------------------------- */
.static-page {
    max-width: 78ch;
    margin-inline: auto;
    padding-block: var(--sp-12) var(--sp-16);
}

.static-page h1 {
    margin-bottom: var(--sp-8);
    padding-bottom: var(--sp-4);
    border-bottom: 3px solid var(--c-primary-400);
}

.static-page h2 {
    margin-top: var(--sp-12);
    margin-bottom: var(--sp-4);
    font-size: clamp(1.2rem, 2.2vw, 1.5rem);
}

.static-page h2:first-of-type { margin-top: var(--sp-8); }

.static-page ul {
    margin: 0 0 1.1em;
    padding-left: 1.25rem;
}

.static-page li {
    list-style: disc;
    margin-bottom: var(--sp-2);
}

.static-page a {
    color: var(--c-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.static-page a:hover { color: var(--c-ink); }

/* --------------------------------------------------------------------------
   Page contact
   -------------------------------------------------------------------------- */
.contact-intro { padding-right: var(--sp-6); }

.contact-intro h1 {
    margin-bottom: var(--sp-6);
    font-size: clamp(1.8rem, 3.4vw, 2.4rem);
}

.contact-privacy {
    margin: 0 0 var(--sp-2);
    font-size: .85rem;
    line-height: 1.55;
    color: var(--c-muted);
}

.contact-privacy a {
    color: var(--c-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 991.98px) {
    .contact-intro {
        padding-right: 0;
        margin-bottom: var(--sp-8);
    }
}

/* Encart d'avertissement : les coordonnées légales restent à compléter par le
   propriétaire, on le signale visiblement plutôt que d'inventer des données. */
.legal-todo {
    margin-bottom: var(--sp-8);
    padding: var(--sp-4) var(--sp-6);
    border-left: 4px solid var(--c-primary-400);
    border-radius: 0 var(--r) var(--r) 0;
    background: var(--c-primary-50);
    color: var(--c-ink-2);
    font-size: .95rem;
    line-height: 1.6;
}

/* Bandeau méthode / affiliation (spam update août 2026) */
.cds-disclaimer {
    margin: 1.25rem 0 1.75rem;
    padding: 1rem 1.15rem;
    border-left: 4px solid currentColor;
    background: rgba(0,0,0,.04);
    border-radius: 0 12px 12px 0;
}
.cds-disclaimer p { margin: 0; font-size: 0.95rem; line-height: 1.55; }