/* ==========================================================================
   FDBlog — Stylesheet
   Module : fdblog (France Déneigement Blog)
   Fichier : views/css/fdblog.css
   Convention : BEM préfixé fdb-
   Design system : DS V1.2 France Déneigement
   --------------------------------------------------------------------------
   Palette
     #1D3557  : titres, textes forts (dark blue)
     #1d496f  : H1 (variant dark blue)
     #1D6FA4  : liens, accents (main blue)
     #004778  : CTA, bordures EN BREF (deep blue)
     #fafafa  : fond léger
     #f0f4f8  : fond bleu clair
     #e5e5e5  : bordures
     #888     : textes secondaires
     #fff     : surfaces blanches
   Typo : Arial, 16px base, line-height 1.7
   Radius : 8px sur cards, 4px sur petits éléments
   ========================================================================== */


/* ==========================================================================
   CONTAINER PRINCIPAL
   ========================================================================== */
.fdb-article {
    max-width: 880px;
    margin: 0 auto;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e5e5e5;
    overflow: hidden;
    font-family: Arial, sans-serif;
    color: #333;
    font-size: 16px;
    line-height: 1.7;
}

.fdb-article__body {
    padding: 32px 80px 60px;
}


/* ==========================================================================
   BLOC #1 — HEADER
   ========================================================================== */
.fdb-header {
    padding: 60px 80px 16px;
    border-bottom: 1px solid #1D3557;
}

.fdb-header__breadcrumb {
    font-size: 13px;
    color: #888;
    font-weight: 300;
    margin-bottom: 12px;
}

.fdb-header__breadcrumb-link {
    color: #1D6FA4;
    text-decoration: none;
}

.fdb-header__breadcrumb-link:hover {
    text-decoration: underline;
}

.fdb-header__badge {
    display: inline-block;
    background: #E6F1FB;
    color: #0C447C;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    margin-bottom: 16px;
}

.fdb-header__title {
    color: #1d496f;
    font-weight: 600;
    font-size: 34px;
    line-height: 1.25;
    margin: 0 0 16px;
}

.fdb-header__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 13px;
    color: #888;
    font-weight: 300;
    align-items: center;
}

.fdb-header__author strong {
    color: #1D3557;
    font-weight: 500;
}

.fdb-header__separator {
    color: #ccc;
}

.fdb-header__date,
.fdb-header__reading-time {
    color: #888;
}


/* ==========================================================================
   BLOC #2 ET #5 — CALLOUTS (EN BREF / À RETENIR)
   ========================================================================== */
.fdb-callout {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 20px 24px;
    border-radius: 0;
    margin-bottom: 24px;
}

.fdb-callout__icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    font-style: italic;
}

.fdb-callout__body {
    min-width: 0;
}

.fdb-callout__label {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.fdb-callout__text {
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
    color: #1D3557;
}

/* Modifier "EN BREF" — bleu foncé */
.fdb-callout--brief {
    background: #f0f4f8;
    border-left: 4px solid #004778;
}

.fdb-callout--brief .fdb-callout__icon {
    background: #004778;
}

.fdb-callout--brief .fdb-callout__label {
    color: #004778;
}

/* Modifier "À RETENIR" — bleu medium */
.fdb-callout--remember {
    background: #f0f4f8;
    border-left: 4px solid #1D6FA4;
    margin: 32px 0;
}

.fdb-callout--remember .fdb-callout__icon {
    background: #1D6FA4;
}

.fdb-callout--remember .fdb-callout__label {
    color: #1D3557;
}


/* ==========================================================================
   BLOC #3 — SOMMAIRE
   ========================================================================== */
.fdb-toc {
    background: #fafafa;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 32px;
}

.fdb-toc__label {
    font-size: 13px;
    color: #1D3557;
    font-weight: 500;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
    text-transform: uppercase;
}

.fdb-toc__nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fdb-toc__item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 6px 0;
    line-height: 1.5;
    border-bottom: 1px solid #f0f0f0;
}

.fdb-toc__item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.fdb-toc__number {
    color: #888;
    font-weight: 300;
    font-size: 14px;
    flex-shrink: 0;
    min-width: 18px;
}

.fdb-toc__link {
    font-size: 14px;
    color: #1D6FA4;
    text-decoration: none;
}

.fdb-toc__link:hover {
    color: #1D3557;
    text-decoration: underline;
}


/* ==========================================================================
   BLOC #4 — CORPS DE L'ARTICLE
   ========================================================================== */
.fdb-content {
    color: #333;
}

.fdb-content h2 {
    color: #1D3557;
    font-size: 26px;
    font-weight: 600;
    margin: 40px 0 16px;
    line-height: 1.3;
    scroll-margin-top: 20px;
}

.fdb-content h2:first-child {
    margin-top: 0;
}

.fdb-content h3 {
    color: #1D6FA4;
    font-size: 20px;
    font-weight: 500;
    margin: 24px 0 12px;
    line-height: 1.35;
}

.fdb-content p {
    font-size: 16px;
    line-height: 1.7;
    margin: 0 0 16px;
}

.fdb-content a {
    color: #1D6FA4;
    text-decoration: underline;
}

.fdb-content a:hover {
    color: #004778;
}

.fdb-content ul,
.fdb-content ol {
    margin: 0 0 16px;
    padding-left: 24px;
}

.fdb-content li {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 6px;
}

.fdb-content blockquote {
    border-left: 3px solid #1D6FA4;
    padding: 8px 0 8px 20px;
    margin: 24px 0;
    color: #1D3557;
    font-style: italic;
    background: transparent;
}

.fdb-content strong {
    color: #1D3557;
    font-weight: 500;
}


/* ==========================================================================
   BLOC #4 BIS — TABLEAU COMPARATIF
   ========================================================================== */
.fdb-table {
    margin: 24px 0;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
}

.fdb-table__el {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.fdb-table__head {
    background: #f0f4f8;
}

.fdb-table__head-cell {
    padding: 12px;
    text-align: left;
    color: #1D3557;
    font-weight: 500;
    border-bottom: 1px solid #e5e5e5;
}

.fdb-table__row:not(:last-child) .fdb-table__cell {
    border-bottom: 1px solid #f0f0f0;
}

.fdb-table__cell {
    padding: 12px;
    color: #333;
}


/* ==========================================================================
   BLOC #6 — PRODUITS RECOMMANDÉS
   ========================================================================== */
.fdb-products {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 24px;
    margin: 32px 0;
}

.fdb-products__label {
    font-size: 13px;
    color: #888;
    font-weight: 500;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
    text-transform: uppercase;
}

.fdb-products__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.fdb-products__card {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.fdb-products__card:hover {
    border-color: #1D6FA4;
    transform: translateY(-1px);
}

.fdb-products__image {
    width: 60px;
    height: 60px;
    background: #f0f4f8;
    border-radius: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1D6FA4;
    font-size: 22px;
    overflow: hidden;
}

.fdb-products__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fdb-products__info {
    min-width: 0;
}

.fdb-products__name {
    font-size: 14px;
    font-weight: 500;
    color: #1D3557;
    line-height: 1.3;
}

.fdb-products__subtitle {
    font-size: 13px;
    color: #888;
    font-weight: 300;
    margin-top: 2px;
}

.fdb-products__cta {
    font-size: 13px;
    color: #1D6FA4;
    margin-top: 4px;
}


/* ==========================================================================
   BLOC #7 — FAQ ACCORDÉON
   ========================================================================== */
.fdb-faq {
    margin-bottom: 32px;
}

.fdb-faq__title {
    color: #1D3557;
    font-size: 26px;
    font-weight: 600;
    margin: 40px 0 16px;
    line-height: 1.3;
}

.fdb-faq__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #e5e5e5;
}

.fdb-faq__item {
    border-bottom: 1px solid #e5e5e5;
}

.fdb-faq__question {
    width: 100%;
    background: transparent;
    border: 0;
    padding: 18px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.fdb-faq__question:hover .fdb-faq__question-text {
    color: #1D6FA4;
}

.fdb-faq__question-text {
    font-size: 16px;
    font-weight: 500;
    color: #1D3557;
    transition: color 0.15s ease;
}

.fdb-faq__toggle {
    color: #1D6FA4;
    font-size: 22px;
    flex-shrink: 0;
    margin-left: 12px;
    transition: transform 0.2s ease;
}

.fdb-faq__item--open .fdb-faq__toggle {
    transform: rotate(45deg);
}

.fdb-faq__answer {
    padding: 0 0 18px;
    font-size: 15px;
    line-height: 1.7;
    color: #444;
}

.fdb-faq__answer p {
    margin: 0 0 12px;
}

.fdb-faq__answer p:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   BLOC #8 — CTA BANDEAU
   ========================================================================== */
.fdb-cta {
    background: #1D3557;
    color: #fff;
    border-radius: 8px;
    padding: 32px;
    margin: 0 0 32px;
    text-align: center;
}

.fdb-cta__title {
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 8px;
    color: #fff;
}

.fdb-cta__subtitle {
    font-size: 14px;
    opacity: 0.85;
    margin-bottom: 20px;
}

.fdb-cta__button {
    display: inline-block;
    background: #fff;
    color: #004778;
    padding: 14px 32px;
    border-radius: 8px;
    font-weight: 500;
    text-decoration: none;
    font-size: 15px;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.fdb-cta__button:hover {
    background: #f0f4f8;
    transform: translateY(-1px);
    color: #004778;
}


/* ==========================================================================
   BLOC #9 — ARTICLES LIÉS
   ========================================================================== */
.fdb-related {
    border-top: 1px solid #e5e5e5;
    padding-top: 32px;
}

.fdb-related__label {
    font-size: 13px;
    color: #888;
    font-weight: 500;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.fdb-related__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

.fdb-related__card {
    display: block;
    text-decoration: none;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 16px;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.fdb-related__card:hover {
    border-color: #1D6FA4;
    transform: translateY(-1px);
}

.fdb-related__badge {
    display: inline-block;
    background: #E6F1FB;
    color: #0C447C;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    margin-bottom: 8px;
}

.fdb-related__title {
    font-size: 14px;
    font-weight: 500;
    color: #1D3557;
    line-height: 1.4;
    margin-bottom: 6px;
}

.fdb-related__meta {
    font-size: 12px;
    color: #888;
}


/* ==========================================================================
   ============================================================================
   PAGES LISTE — fdb-list / fdb-cat-* / fdb-grid / fdb-card / fdb-sidebar
   ============================================================================
   ========================================================================== */


/* ==========================================================================
   CONTAINER LISTE PRINCIPAL
   ========================================================================== */
.fdb-list {
    max-width: 1280px;
    margin: 0 auto;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e5e5e5;
    overflow: hidden;
    font-family: Arial, sans-serif;
    color: #333;
}


/* ==========================================================================
   HEADER PAGE BLOG (page A — /blog)
   ========================================================================== */
.fdb-list__header {
    padding: 48px 40px 24px;
    border-bottom: 1px solid #1D3557;
}

.fdb-list__breadcrumb {
    font-size: 13px;
    color: #888;
    font-weight: 300;
    margin-bottom: 12px;
}

.fdb-list__breadcrumb-link {
    color: #1D6FA4;
    text-decoration: none;
}

.fdb-list__breadcrumb-link:hover {
    text-decoration: underline;
}

.fdb-list__title {
    color: #1d496f;
    font-weight: 600;
    font-size: 36px;
    line-height: 1.2;
    margin: 0 0 12px;
}

.fdb-list__intro {
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    margin: 0;
    max-width: 700px;
}


/* ==========================================================================
   FILTRES PAR CATÉGORIE (page A)
   ========================================================================== */
.fdb-filters {
    padding: 32px 40px 24px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
}

.fdb-filters__pill {
    display: inline-block;
    background: #f0f4f8;
    color: #1D6FA4;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fdb-filters__pill:hover {
    background: #d4e4f0;
    color: #1D3557;
}

.fdb-filters__pill--active {
    background: #1D3557;
    color: #fff;
    font-weight: 500;
}

.fdb-filters__pill--active:hover {
    background: #1D3557;
    color: #fff;
}

.fdb-filters__count {
    opacity: 0.7;
    font-weight: 300;
    margin-left: 4px;
}

.fdb-filters__pill--active .fdb-filters__count {
    opacity: 0.7;
}


/* ==========================================================================
   BLOC FEATURED (article mis en avant — page A, conditionnel)
   ========================================================================== */
.fdb-featured {
    padding: 32px 40px;
    background: #fff;
}

.fdb-featured__card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e5e5;
    text-decoration: none;
    background: #fff;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.fdb-featured__card:hover {
    border-color: #1D6FA4;
    transform: translateY(-1px);
}

.fdb-featured__content {
    background: #1D3557;
    color: #fff;
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.fdb-featured__label {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 500;
    width: fit-content;
    margin-bottom: 16px;
}

.fdb-featured__badge {
    display: inline-block;
    background: #E6F1FB;
    color: #0C447C;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 11px;
    width: fit-content;
    margin-bottom: 14px;
}

.fdb-featured__title {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.25;
    color: #fff;
    margin: 0 0 14px;
}

.fdb-featured__excerpt {
    font-size: 14px;
    line-height: 1.6;
    opacity: 0.85;
    margin: 0 0 18px;
}

.fdb-featured__meta {
    display: flex;
    gap: 14px;
    font-size: 12px;
    opacity: 0.8;
    align-items: center;
    flex-wrap: wrap;
}

.fdb-featured__separator {
    color: rgba(255, 255, 255, 0.5);
}

.fdb-featured__image {
    background: linear-gradient(135deg, #f0f4f8 0%, #d4e4f0 100%);
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1D6FA4;
    font-size: 48px;
    font-weight: 300;
    overflow: hidden;
}

.fdb-featured__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ==========================================================================
   HEADER CATÉGORIE (page B — /blog/{slug})
   ========================================================================== */
.fdb-cat-header {
    padding: 48px 40px 24px;
    border-bottom: 1px solid #1D3557;
    background: #f0f4f8;
}

.fdb-cat-header__badge {
    display: inline-block;
    background: #fff;
    color: #0C447C;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    margin-bottom: 14px;
    border: 1px solid #cdd9e4;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.fdb-cat-header__title {
    color: #1d496f;
    font-weight: 600;
    font-size: 36px;
    line-height: 1.2;
    margin: 0 0 12px;
}

.fdb-cat-header__intro {
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    margin: 0;
    max-width: 700px;
}

.fdb-cat-header__count {
    font-size: 13px;
    color: #888;
    margin-top: 14px;
}


/* ==========================================================================
   NAVIGATION ENTRE CATÉGORIES (page B)
   ========================================================================== */
.fdb-cat-nav {
    padding: 24px 40px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
}

.fdb-cat-nav__label {
    font-size: 12px;
    color: #888;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 500;
    margin-right: 8px;
}

.fdb-cat-nav__pill {
    display: inline-block;
    background: #fff;
    color: #1D6FA4;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    text-decoration: none;
    border: 1px solid #e5e5e5;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.fdb-cat-nav__pill:hover {
    border-color: #1D6FA4;
    color: #1D3557;
}


/* ==========================================================================
   LAYOUT GRID + SIDEBAR
   ========================================================================== */
.fdb-list__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 32px;
    padding: 32px 40px 40px;
}

.fdb-list__main {
    min-width: 0;
}

.fdb-list__main-label {
    font-size: 13px;
    color: #888;
    font-weight: 500;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
    text-transform: uppercase;
}


/* ==========================================================================
   GRILLE 3 COLONNES (cards articles)
   ========================================================================== */
.fdb-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin-bottom: 32px;
}


/* ==========================================================================
   CARD ARTICLE (utilisée dans grille)
   ========================================================================== */
.fdb-card {
    display: block;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    background: #fff;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.fdb-card:hover {
    border-color: #1D6FA4;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(29, 53, 87, 0.08);
}

.fdb-card__image {
    background: #f0f4f8;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1D6FA4;
    font-size: 32px;
    overflow: hidden;
}

.fdb-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fdb-card__body {
    padding: 16px;
}

.fdb-card__badge {
    display: inline-block;
    background: #E6F1FB;
    color: #0C447C;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    margin-bottom: 8px;
    letter-spacing: 0.3px;
}

.fdb-card__title {
    font-size: 14px;
    font-weight: 500;
    color: #1D3557;
    line-height: 1.35;
    margin: 0 0 8px;
}

.fdb-card__meta {
    font-size: 11px;
    color: #888;
}


/* ==========================================================================
   PAGINATION NUMÉROTÉE
   ========================================================================== */
.fdb-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 16px 0;
}

.fdb-pagination__link {
    padding: 8px 14px;
    font-size: 13px;
    color: #1D6FA4;
    text-decoration: none;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.fdb-pagination__link:hover {
    border-color: #1D6FA4;
    color: #1D3557;
}

.fdb-pagination__link--active {
    background: #1D3557;
    color: #fff;
    font-weight: 500;
    border-color: #1D3557;
}

.fdb-pagination__link--active:hover {
    background: #1D3557;
    color: #fff;
    border-color: #1D3557;
}

.fdb-pagination__link--prev,
.fdb-pagination__link--next {
    padding: 8px 12px;
}

.fdb-pagination__link[aria-disabled="true"] {
    color: #ccc;
    pointer-events: none;
    border-color: #f0f0f0;
}


/* ==========================================================================
   CTA INLINE (mid-page, page catégorie)
   ========================================================================== */
.fdb-cta-inline {
    background: #1D3557;
    color: #fff;
    border-radius: 8px;
    padding: 24px 28px;
    margin: 0 0 32px;
    display: flex;
    gap: 20px;
    align-items: center;
}

.fdb-cta-inline__text {
    flex: 1;
    min-width: 0;
}

.fdb-cta-inline__title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 4px;
    color: #fff;
}

.fdb-cta-inline__subtitle {
    font-size: 13px;
    opacity: 0.85;
}

.fdb-cta-inline__button {
    display: inline-block;
    background: #fff;
    color: #004778;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    text-decoration: none;
    font-size: 14px;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.fdb-cta-inline__button:hover {
    transform: translateY(-1px);
    color: #004778;
}


/* ==========================================================================
   FOOTER SEO (texte long page catégorie)
   ========================================================================== */
.fdb-cat-seo {
    background: #fafafa;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 24px 28px;
    margin-bottom: 32px;
}

.fdb-cat-seo__title {
    color: #1D3557;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 12px;
}

.fdb-cat-seo__text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 12px;
    color: #555;
}

.fdb-cat-seo__text:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   SIDEBAR (pages A et B)
   ========================================================================== */
.fdb-sidebar {
    /* Sidebar visible sur desktop, cachée en mobile via media query */
}

.fdb-sidebar__block {
    background: #fafafa;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 18px;
    margin-bottom: 20px;
}

.fdb-sidebar__block:last-child {
    margin-bottom: 0;
}

.fdb-sidebar__label {
    font-size: 12px;
    color: #888;
    font-weight: 500;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    text-transform: uppercase;
}

/* Articles populaires */
.fdb-sidebar__item {
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
}

.fdb-sidebar__item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.fdb-sidebar__item:hover .fdb-sidebar__item-title {
    color: #1D6FA4;
}

.fdb-sidebar__item-cat {
    font-size: 11px;
    color: #1D6FA4;
    margin-bottom: 3px;
}

.fdb-sidebar__item-title {
    font-size: 13px;
    color: #1D3557;
    font-weight: 500;
    line-height: 1.4;
    transition: color 0.15s ease;
}

/* Catégories liées */
.fdb-sidebar__cat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    transition: padding-left 0.15s ease;
}

.fdb-sidebar__cat:last-child {
    border-bottom: 0;
}

.fdb-sidebar__cat:hover {
    padding-left: 4px;
}

.fdb-sidebar__cat:hover .fdb-sidebar__cat-name {
    color: #1D6FA4;
}

.fdb-sidebar__cat-name {
    font-size: 13px;
    color: #1D3557;
    transition: color 0.15s ease;
}

.fdb-sidebar__cat-count {
    font-size: 11px;
    color: #888;
}

/* Produits liés */
.fdb-sidebar__product {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
}

.fdb-sidebar__product:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.fdb-sidebar__product:hover .fdb-sidebar__product-name {
    color: #1D6FA4;
}

.fdb-sidebar__product-image {
    width: 36px;
    height: 36px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1D6FA4;
    font-size: 14px;
    overflow: hidden;
}

.fdb-sidebar__product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fdb-sidebar__product-name {
    font-size: 12px;
    color: #1D3557;
    line-height: 1.3;
    min-width: 0;
    transition: color 0.15s ease;
}


/* ==========================================================================
   RESPONSIVE — Tablette (≤ 1024px)
   ========================================================================== */
@media (max-width: 1024px) {

    .fdb-header {
        padding: 48px 40px 16px;
    }

    .fdb-article__body {
        padding: 32px 40px 60px;
    }

    .fdb-header__title {
        font-size: 30px;
    }

    .fdb-content h2,
    .fdb-faq__title {
        font-size: 24px;
    }

    /* Pages liste — tablette */
    .fdb-list__layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .fdb-sidebar {
        display: none;
    }

    .fdb-list__title,
    .fdb-cat-header__title {
        font-size: 32px;
    }

    .fdb-grid {
        grid-template-columns: 1fr 1fr;
    }

}


/* ==========================================================================
   RESPONSIVE — Mobile (≤ 768px)
   ========================================================================== */
@media (max-width: 768px) {

    .fdb-header {
        padding: 32px 20px 16px;
    }

    .fdb-article__body {
        padding: 24px 20px 40px;
    }

    .fdb-header__title {
        font-size: 24px;
    }

    .fdb-header__meta {
        font-size: 12px;
        gap: 8px;
    }

    .fdb-header__separator {
        display: none;
    }

    .fdb-content h2,
    .fdb-faq__title {
        font-size: 22px;
        margin: 32px 0 12px;
    }

    .fdb-content h3 {
        font-size: 18px;
    }

    .fdb-content p,
    .fdb-content li {
        font-size: 15px;
    }

    .fdb-toc,
    .fdb-products,
    .fdb-cta {
        padding: 20px;
    }

    .fdb-callout {
        padding: 16px 18px;
        gap: 12px;
    }

    .fdb-callout__icon {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }

    .fdb-products__grid {
        grid-template-columns: 1fr;
    }

    .fdb-related__grid {
        grid-template-columns: 1fr;
    }

    .fdb-cta {
        padding: 24px 20px;
    }

    .fdb-cta__title {
        font-size: 18px;
    }

    .fdb-cta__button {
        padding: 12px 24px;
        font-size: 14px;
    }

    .fdb-table__el {
        font-size: 13px;
    }

    .fdb-table__head-cell,
    .fdb-table__cell {
        padding: 10px 8px;
    }

    /* Pages liste — mobile */
    .fdb-list__header,
    .fdb-cat-header {
        padding: 32px 20px 20px;
    }

    .fdb-list__title,
    .fdb-cat-header__title {
        font-size: 26px;
    }

    .fdb-filters,
    .fdb-cat-nav {
        padding: 20px 20px 16px;
    }

    .fdb-featured {
        padding: 24px 20px;
    }

    .fdb-featured__card {
        grid-template-columns: 1fr;
    }

    .fdb-featured__image {
        min-height: 180px;
        order: -1;
    }

    .fdb-featured__content {
        padding: 24px 20px;
    }

    .fdb-featured__title {
        font-size: 20px;
    }

    .fdb-list__layout {
        padding: 24px 20px 32px;
    }

    .fdb-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .fdb-card__image {
        height: 160px;
    }

    .fdb-cta-inline {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding: 20px;
    }

    .fdb-cta-inline__button {
        align-self: center;
    }

    .fdb-cat-seo {
        padding: 20px;
    }

    .fdb-pagination {
        flex-wrap: wrap;
    }

    .fdb-pagination__link {
        padding: 8px 12px;
        font-size: 12px;
    }

}


/* ==========================================================================
   RESPONSIVE — Petit mobile (≤ 480px)
   ========================================================================== */
@media (max-width: 480px) {

    .fdb-header__title {
        font-size: 22px;
    }

    .fdb-content h2,
    .fdb-faq__title {
        font-size: 20px;
    }

}