/*
Theme Name: Tuto Bricolage Child
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Template: twentytwentyfive
Author: John
Author URI: https://tuto-bricolage.fr
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Tags: bricolage, tutoriels, wordpress, thème enfant, moderne, responsive
Version: 1.4.3
Updated: 2025-09-02 10:32:43

*/

/********
Styles article (scopés) — AUCUNE modif de police/poids/taille
Applique la classe .article-style sur le groupe parent (breadcrumbs + titre + contenu)
********/

:root {
    /* Blue Theme Variables (from Preview) */
    --tb-bg: #f8fafc;
    --tb-bg-soft: #ffffff;
    --tb-text: #1e293b;
    --tb-muted: #64748b;
    --tb-primary: #2563eb;
    --tb-primary-dark: #1d4ed8;
    --tb-accent: #2563eb;
    /* Compat for article-style */
    --tb-border: #e2e8f0;
    --tb-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);

    --tb-bg-alt: #f1f5f9;
    --tb-maxw: 820px;

    --tb-font-heading: 'Space Grotesk', system-ui, sans-serif;
    --tb-font-body: 'DM Sans', system-ui, sans-serif;

    --tb-max-width: 1280px;
    --tb-nav-height: 80px;
}

/* --- Base & Reset --- */
body {
    background-color: var(--tb-bg);
    color: var(--tb-text);
    font-family: var(--tb-font-body);
    margin: 0;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6,
.tb-font-heading {
    font-family: var(--tb-font-heading);
}
/* Header Solide (Sauf Accueil) */
body:not(.home) .tb-nav {
    position: sticky;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 24px;
}
/* Contrainte de largeur et rythme de base (pas de font-size change) */
.article-style {
    color: var(--tb-text);
    line-height: 1.65;
    /* n’affecte pas la police, juste l’interligne */
    max-width: var(--tb-maxw);
    margin-inline: auto;
    padding-inline: clamp(12px, 3vw, 20px);
}

/* Fil d’Ariane (RankMath) */
.article-style .rank-math-breadcrumb {
    color: var(--tb-muted);
    margin-bottom: 10px;
}

.article-style .rank-math-breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.article-style .rank-math-breadcrumb a:hover {
    color: var(--tb-accent);
    text-decoration: underline;
}

/* Titre et Hn — on NE change PAS tailles/poids : uniquement marges/ornement */
.article-style .wp-block-post-title {
    /* pas de font-size/weight ici */
    margin: 0 0 .4rem;
}

.article-style h2 {
    margin: 28px 0 8px;
    /* pas de taille, juste spacing */
    padding-bottom: 4px;
    border-bottom: 1px solid var(--tb-border);
}

.article-style h3 {
    margin: 22px 0 6px;
}

.article-style h4 {
    margin: 18px 0 6px;
    color: var(--tb-muted);
}

.article-style h5 {
    margin: 14px 0 4px;
    color: var(--tb-muted);
}

.article-style h6 {
    margin: 12px 0 4px;
    color: var(--tb-muted);
}

/* Paragraphes & liens (aucune taille modifiée) */
.article-style p {
    margin: 12px 0;
}

.article-style a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
}

.article-style a:hover {
    color: var(--tb-accent);
}

/* Images & légendes (contenu) */
.article-style .wp-block-image img {
    border-radius: 12px;
}

.article-style .wp-block-image figcaption {
    color: var(--tb-muted);
    text-align: center;
    margin-top: 6px;
    font-size: 0.85em;
    /* relatif, n’impose pas une police */
}

/* Image mise en avant (pas d’arrondi, pas de changement de typo) */
.article-style .wp-block-post-featured-image img {
    width: 100%;
    border: 1px solid var(--tb-border);
    box-shadow: 0 8px 30px rgba(2, 8, 23, .08);
}

.tb-bento-card:hover {
    border-color: var(--tb-primary);
    box-shadow: 0 20px 40px -10px rgba(37, 99, 235, 0.15);
    transform: translateY(-2px);
}

.tb-card-icon svg {
    width: 48px;
    height: 48px;
    color: var(--tb-primary);
}

/* Listes (espacement uniquement) */
.article-style ul,
.article-style ol {
    margin: 12px 0 12px 22px;
}

.article-style li {
    margin: 6px 0;
}

/* Blockquote — style doux, pas de changement typo */
.article-style blockquote {
    border-left: 4px solid var(--tb-accent);
    background: var(--tb-bg-alt);
    padding: 12px 16px;
    border-radius: 12px;
    margin: 18px 0;
}

.article-style blockquote p {
    margin: 0;
    color: var(--tb-muted);
    /* pas d’italic forcé si tu n’en veux pas, commente la ligne suivante */
    font-style: italic;
}

.article-style blockquote cite {
    display: block;
    margin-top: 8px;
    color: var(--tb-muted);
    opacity: .9;
}

/* Séparateur */
.article-style hr {
    border: 0;
    border-top: 1px solid var(--tb-border);
    margin: 22px 0;
}

/* Code / préformaté — pas de font-family imposée */
.article-style pre,
.article-style code {
    background: var(--tb-bg-alt);
    border: 1px solid var(--tb-border);
    border-radius: 10px;
    padding: 12px 14px;
    overflow: auto;
}

/* Tableaux — lisibles + responsive (aucune typo modifiée) */
.article-style .wp-block-table {
    margin: 18px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.article-style .wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    min-width: 560px;
    /* force le scroll si trop étroit */
}

.article-style .wp-block-table th,
.article-style .wp-block-table td {
    border: 1px solid var(--tb-border);
    padding: 10px;
    text-align: left;
}

.article-style .wp-block-table thead th {
    background: var(--tb-bg-alt);
}

/* Boutons — couleurs/bordures uniquement, pas de typo */
.article-style .wp-block-button .wp-block-button__link {
    background: var(--tb-accent);
    color: #fff;
    border: 1px solid var(--tb-accent);
    border-radius: 9999px;
    padding: .7rem 1.1rem;
}

.article-style .wp-block-button.is-style-outline .wp-block-button__link {
    background: #fff;
    color: var(--tb-accent);
}

/* Mobile — interligne un peu plus confortable (n’affecte pas la police) */
@media (max-width:680px) {
    .article-style {
        line-height: 1.7;
    }

    .article-style .wp-block-table table {
        min-width: 480px;
    }
}

/* =========================================
   HOMEPAGE & LAYOUT COMPONENTS
   (Migrated from Preview)
   ========================================= */

/* --- Container Fix --- */
.tb-container {
    width: 100%;
    max-width: var(--tb-max-width);
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* --- Background FX --- */
.tb-noise {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='.35'/%3E%3C/svg%3E");
}

.tb-blueprint-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.4;
    background-image: linear-gradient(rgba(37, 99, 235, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, 0.03) 1px, transparent 1px);
    background-size: 56px 56px;
}

canvas#blueprint-canvas {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90vw;
    height: 85vh;
    border: 1px solid var(--tb-border);
    z-index: 0;
    pointer-events: none;
    border-radius: 1rem;
}

/* --- Navigation --- */
.tb-nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    padding-top: 24px;
}

.tb-nav__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tb-nav__logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.05em;
    text-decoration: none;
}

.tb-nav__links.desktop {
    display: none;
}

@media(min-width: 768px) {
    .tb-nav__links.desktop {
        display: flex;
        gap: 32px;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--tb-muted);
    }

    .tb-nav__links a:hover {
        color: var(--tb-primary);
    }

    .tb-nav__toggle {
        display: none;
    }
}

.tb-nav__toggle {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--tb-border);
    border-radius: 12px;
    padding: 10px;
    cursor: pointer;
    color: var(--tb-text);
}

.tb-nav__mobile {
    position: absolute;
    top: 80px;
    right: 24px;
    width: 300px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid var(--tb-border);
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tb-nav__mobile.hidden {
    display: none;
}

.tb-nav__mobile a {
    padding: 20px 24px;
    font-weight: 600;
    border-bottom: 1px solid var(--tb-border);
    transition: background 0.2s;
    text-decoration: none;
    color: inherit;
}

.tb-nav__mobile a:hover {
    background: #f1f5f9;
    color: var(--tb-primary);
}

/* --- Buttons --- */
.tb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    border-radius: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.tb-btn--primary {
    background: var(--tb-primary);
    color: white;
    border: none;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
}

.tb-btn--primary:hover {
    background: var(--tb-primary-dark);
    transform: translateY(-2px);
    color: white;
}

.tb-btn--glass {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
    border: 1px solid var(--tb-border);
    color: var(--tb-text);
}

.tb-btn--glass:hover {
    background: #0f172a;
    color: white;
}

.tb-btn--lg {
    padding: 20px 40px;
    font-size: 1rem;
}

/* --- Hero Section --- */
.tb-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 80px;
    padding-bottom: 40px;
    z-index: 10;
}

.tb-subtitle {
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--tb-primary);
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.tb-title-huge {
    font-size: clamp(2.5rem, 10vw, 8rem);
    line-height: 0.9;
    letter-spacing: -0.04em;
    font-weight: 800;
    margin: 0 0 30px;
}

.tb-lead {
    font-size: 1.25rem;
    color: var(--tb-muted);
    max-width: 600px;
    margin-bottom: 40px;
}

.tb-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.tb-hero__footer {
    padding: 30px 24px;
    display: flex;
    gap: 24px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #94a3b8;
}

@media(min-width: 1024px) {
    .tb-hero__footer {
        position: absolute;
        bottom: 40px;
        left: 80px;
        padding: 0;
    }
}

.tb-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--tb-primary);
    margin-right: 8px;
}

.tb-bullet {
    display: flex;
    align-items: center;
}

/* --- Sections --- */
.tb-section {
    padding: 80px 0;
    position: relative;
    z-index: 10;
}

.tb-section--alt {
    background: rgba(248, 250, 252, 0.8);
}

.tb-section-title {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--tb-primary);
    font-weight: 700;
    margin-bottom: 48px;
}

.tb-title-large {
    font-size: clamp(2rem, 5vw, 4.5rem);
    font-weight: 700;
    line-height: 1;
    margin-bottom: 40px;
    letter-spacing: -0.02em;
}

.tb-text-large {
    font-size: 1.5rem;
    color: #475569;
    margin-bottom: 32px;
}

/* --- Method Process --- */
.tb-grid-2 {
    display: grid;
    gap: 48px;
}

@media(min-width: 768px) {
    .tb-grid-2 {
        grid-template-columns: 1fr 1fr;
    }
}

.tb-process-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.tb-process-step {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

.tb-step-num {
    color: var(--tb-primary);
    font-weight: 700;
}

.tb-step-line {
    height: 1px;
    background: var(--tb-border);
    flex-grow: 1;
    transform-origin: left;
    transform: scaleX(0);
}

/* --- Bento Grid --- */
.tb-bento-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media(min-width: 768px) {
    .tb-bento-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto;
        /* Flexible height */
    }
}

/* Utils */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tb-bento-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.9));
    border: 1px solid var(--tb-border);
    border-radius: 16px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    transition: 0.25s ease;
    display: flex;
    flex-direction: column;
}

.tb-bento-card:hover {
    border-color: var(--tb-primary);
    box-shadow: 0 20px 40px -10px rgba(37, 99, 235, 0.15);
    transform: translateY(-2px);
}

/* Bento Spans */
@media(min-width: 768px) {
    .tb-bento-card.large {
        grid-column: span 2;
        grid-row: span 2;
        justify-content: flex-end;
        padding: 40px;
    }

    .tb-bento-card.wide {
        grid-column: span 2;
    }
}

.card-glow {
    position: absolute;
    inset: -2px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    background: radial-gradient(circle at 50% 50%, rgba(37, 99, 235, 0.1), transparent 60%);
}

.tb-bento-card:hover .card-glow {
    opacity: 1;
}

.tb-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 99px;
    background: #f1f5f9;
    color: var(--tb-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 1rem;
    width: fit-content;
}

.tb-tag.essential {
    background: #dbeafe;
    color: #1e40af;
}

.tb-card-title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 8px;
    line-height: 1;
}

.tb-card-title-sm {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    color: #1e293b;
}

.tb-card-desc {
    color: var(--tb-muted);
}

.tb-card-desc-sm {
    font-size: 0.9rem;
    color: var(--tb-muted);
    margin-top: 8px;
}

.tb-card-link {
    margin-top: 24px;
    color: var(--tb-primary);
    font-weight: 700;
    font-size: 0.9rem;
    opacity: 0;
    transition: 0.2s;
    text-decoration: none;
}

.tb-bento-card:hover .tb-card-link {
    opacity: 1;
}

/* Wide Card Flex */
.tb-bento-card.flex-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.tb-card-bg-icon {
    width: 64px;
    height: 64px;
    color: #0f172a;
    opacity: 0.1;
}

/* --- Devis --- */
.tb-grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin: 40px 0;
}

@media(min-width: 768px) {
    .tb-grid-3 {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.tb-feature-card {
    padding: 40px;
    background: white;
    border: 1px solid var(--tb-border);
    border-radius: 16px;
    transition: 0.3s;
}

.tb-feature-card:hover {
    border-color: #60a5fa;
}

.tb-step-big {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--tb-primary);
    margin-bottom: 16px;
}

.tb-cta-center {
    text-align: center;
    margin-top: 48px;
}

.tb-disclaimer {
    margin-top: 12px;
    font-size: 0.85rem;
    color: var(--tb-muted);
}

/* --- Safety --- */
.tb-split-safety {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

@media(min-width: 768px) {
    .tb-split-safety {
        flex-direction: row;
    }
}

.tb-badge-outline {
    display: inline-block;
    border: 1px solid var(--tb-primary);
    color: var(--tb-primary);
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 4px;
    margin-bottom: 24px;
}

.tb-title-clean {
    font-size: 3rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
}

.tb-safety-grid {
    display: grid;
    gap: 32px;
}

@media(min-width: 768px) {
    .tb-safety-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.tb-safety-item {
    display: flex;
    gap: 16px;
    align-items: start;
}

.tb-num {
    color: var(--tb-primary);
    font-weight: 700;
    font-size: 1.1rem;
}

/* --- Footer --- */
.tb-footer {
    background: #0f172a;
    color: white;
    padding: 100px 0;
}

.tb-footer__hero {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 80px;
}

.tb-footer__hero h2 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 24px;
}

.tb-footer__hero p {
    color: #94a3b8;
    margin-bottom: 48px;
}

.tb-footer__form input {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    width: 100%;
    padding: 16px;
    color: white;
    margin-bottom: 32px;
}

.tb-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 48px;
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #64748b;
}

.tb-footer__links a {
    margin-left: 32px;
    transition: color 0.2s;
    text-decoration: none;
    color: inherit;
}

.tb-footer__links a:hover {
    color: white;
}

/* =========================================
   CUSTOM ARTICLE STYLING (Blue/Tech Theme)
   ========================================= */

/* Base Typography */
.entry-content {
    font-family: 'Manrope', system-ui, sans-serif;
    font-weight: 300;
    /* Light as requested */
    color: var(--tb-text);
    line-height: 1.7;
    font-size: 1.1rem;
}

.entry-content p {
    margin-bottom: 1.5rem;
}

.entry-content strong,
.entry-content b {
    color: #0c4a6e;
    font-weight: 600;
}

/* Headings within content */
.entry-content h2,
.entry-content h3,
.entry-content h4 {
    color: #1e293b;
    /* Darker Slate (not electric blue) */
    font-family: 'Space Grotesk', system-ui, sans-serif;
    /* Keep branding */
    font-weight: 700;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.entry-content h2 {
    font-size: 2rem;
}

.entry-content h3 {
    font-size: 1.5rem;
}

.entry-content h4 {
    font-size: 1.25rem;
}

/* Links */
.entry-content a {
    color: var(--tb-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 500;
    transition: color 0.2s;
}

.entry-content a:hover {
    color: var(--tb-primary-dark);
    text-decoration: none;
}

/* Blockquotes */
.entry-content blockquote {
    border-left: 4px solid;
    border-color: #0c4a6e;
    /* Blue border */
    background: #f8fafc;
    /* Very subtle slate bg */
    padding: 1.5rem;
    border-radius: 0 12px 12px 0;
    margin: 2rem 0;
    font-style: italic;
    color: var(--tb-text);
}

.entry-content blockquote cite {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--tb-muted);
    font-style: normal;
}

/* Tables */
.entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    font-size: 0.95rem;
}

.entry-content thead {
    background: #f1f5f9;
    /* Light Slate */
    border-bottom: 2px solid #e2e8f0;
}

.entry-content th {
    text-align: left;
    padding: 1rem;
    font-weight: 700;
    color: #334155;
    /* Slate 700 */
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
}

.entry-content td {
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.entry-content tr:last-child td {
    border-bottom: none;
}

/* Images */
.entry-content figure {
    margin: 2rem 0;
}

.entry-content img {
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    height: auto;
    max-width: 100%;
}

.entry-content figcaption {
    text-align: center;
    font-size: 0.9rem;
    color: var(--tb-muted);
    margin-top: 0.5rem;
}

/* Lists */
.entry-content ul,
.entry-content ol {
    margin: 1.5rem 0;
    padding-left: 2rem;
    padding-bottom: 1rem;
    padding-right: 1rem;
}

.entry-content ul li {
    list-style-type: disc;
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
}

.entry-content ol li {
    list-style-type: decimal;
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
}

/* Buttons (WP Blocks) */
.entry-content .wp-block-button__link {
    background-color: var(--tb-primary);
    color: white;
    border-radius: 999px;
    padding: 0.8rem 2rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.3);
}

.entry-content .wp-block-button__link:hover {
    background-color: var(--tb-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 10px -1px rgba(37, 99, 235, 0.4);
}

/* --- UTILS: Affiliate Hero (Blue) --- */
.tb-aff-hero {
    --aff-bg: #eff6ff;
    /* Light Blue */
    --aff-border: #dbeafe;
    --aff-primary: var(--tb-primary);

    background: linear-gradient(180deg, var(--aff-bg), white);
    border: 1px solid var(--aff-border);
    border-radius: 16px;
    padding: 2rem;
    margin: 3rem 0;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}

.tb-aff-hero h2 {
    margin-top: 0;
    color: #1e293b;
    /* Darker heading */
}

.tb-aff-hero__badge {
    display: inline-block;
    background: white;
    color: var(--tb-primary);
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 1rem;
    border: 1px solid var(--aff-border);
}

/* --- UTILS: TOC (Table of Contents) --- */
#ez-toc-container {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    /* Rounded as requested */
    padding: 1.5rem;
    margin: 2rem 0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

#ez-toc-container .ez-toc-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: #1e293b;
}

#ez-toc-container ul li a {
    color: #475569;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.2s;
}

#ez-toc-container ul li a:hover {
    color: var(--tb-primary);
    text-decoration: underline;
}

/* --- UTILS: Note Encart (Softer Blue) --- */
.tb-note {
    position: relative;
    background: #f0f9ff;
    /* Cyan/Blue tint */
    border: 1px solid #bae6fd;
    /* Let's Try a more neutral/slate look if blue was too much?
       "le bleu est bcp trop electrique" -> applied to titles.
       "reprend le meme concept du tb-note pour le style a part la couleur cest bien" ->
       This implies the structure is good, color might be off or okay?
       I will stick to a very soft cyan/blue integration to match standard "Info" boxes. */
    border-radius: 12px;
    padding-left: 2.5rem;
    padding-top: 4rem;
    /* Space for icon */
    margin: 2rem 0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.tb-note::before {
    content: "📌 L’essentiel à retenir";
    position: absolute;
    left: 1rem;
    top: 1.5rem;
    font-size: 1.2rem;
}

.tb-note strong {
    color: #0c4a6e;
    /* Darker Cyan, legible */
}
.tb-note .entry-content ul, .entry-content ol {
    padding-left: 2rem;
}
hr.wp-block-separator.is-style-dots {
    border: 0 !important;
    background: none !important;
    height: 42px;
    /* hauteur totale du séparateur */
    margin: 2rem auto;
    /* espace avant/après */
    position: relative;
}

/* L'icône centrée */
hr.wp-block-separator.is-style-dots::before {
    content: "";
    display: block;
    width: 34px;
    /* taille icône */
    height: 34px;
    margin: 0 auto;
    background: url("https://tuto-bricolage.fr/wp-content/uploads/2026/01/logo-separateur-tuto-bricolage.webp") no-repeat center;
    background-size: contain;
}