/* ============================================================
   RemplirUnCheque.fr — feuille de style partagée
   ============================================================ */

/* --- RESET & VARIABLES --- */
:root {
    --primary-color: #0284c7;
    --primary-light: #e0f2fe;
    --text-main: #334155;
    --text-muted: #475569; /* assombri pour contraste WCAG AA */
    --bg-page: #f8fafc;
    --bg-card: #ffffff;
    --border-color: #cbd5e1;

    --ink-color: #1e3a8a;

    --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-handwriting: "Segoe Print", "Bradley Hand", "Chalkboard SE", "Comic Sans MS", "Brush Script MT", cursive;
    --font-mono: "Courier New", Courier, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* L'attribut [hidden] doit toujours l'emporter sur display:flex/grid des composants */
[hidden] { display: none !important; }

body {
    font-family: var(--font-ui);
    background-color: var(--bg-page);
    color: var(--text-main);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* --- UTILS --- */
/* Container élargi + gouttières fluides (mobile-first) */
.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 1rem; }
/* padding-block uniquement : ne pas écraser le padding horizontal du .container
   quand un élément cumule .container + .section (articles) */
.section { padding-block: 2.5rem; }
@media (min-width: 600px)  { .container { padding: 0 1.5rem; } .section { padding-block: 3.5rem; } }
@media (min-width: 1024px) { .container { padding: 0 2rem; }   .section { padding-block: 5rem; } }
@media (min-width: 1440px) { .container { max-width: 1320px; } }
.hidden { display: none !important; }
.text-center { text-align: center; }
.font-bold { font-weight: 700; }
.text-red { color: #dc2626; }
.mt-4 { margin-top: 1.5rem; }
.relative { position: relative; }

/* --- HEADER & MENU --- */
header {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.header-content { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 0; }
.logo { font-size: 1.4rem; font-weight: 800; color: #0f172a; text-decoration: none; }
.logo span { color: var(--primary-color); }

/* Lien d'évitement (accessibilité clavier / lecteurs d'écran) */
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 1000;
    background: var(--primary-color); color: #fff;
    padding: 0.6rem 1rem; border-radius: 0 0 0.5rem 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    cursor: pointer;
    z-index: 101;
    background: none; border: none; padding: 0;  /* reset <button> */
}
.menu-toggle span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: #0f172a;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.nav-links { display: flex; align-items: center; }
.nav-links a { color: var(--text-muted); text-decoration: none; font-weight: 600; margin-left: 2rem; font-size: 1rem; transition: color 0.2s; }
.nav-links a:hover { color: var(--primary-color); }

/* CTA "Offres" mis en avant dans la nav (conversion) */
.nav-cta { color: #fff !important; background: var(--primary-color); padding: 0.45rem 1rem; border-radius: 0.5rem; }
.nav-cta:hover { background: #0369a1; color: #fff !important; }

/* Défilement fluide + décalage d'ancre sous le header collant */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 84px; }

/* --- FOCUS VISIBLE (accessibilité clavier) --- */
a:focus-visible,
button:focus-visible,
.aff-cta:focus-visible,
.menu-toggle:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 3px;
}

@media (max-width: 768px) {
    .menu-toggle { display: flex; }
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: white;
        flex-direction: column;
        padding: 1rem 0;
        border-bottom: 1px solid var(--border-color);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }
    .nav-links.active { display: flex; }
    .nav-links a {
        margin: 0;
        padding: 1rem 2rem;
        border-bottom: 1px solid #f1f5f9;
        width: 100%;
    }
    .nav-links a:last-child { border-bottom: none; }
}

/* --- TOOL GRID --- */
.tool-intro { text-align: center; max-width: 720px; margin: 0 auto 2.5rem auto; }
.tool-intro h1 { font-size: clamp(1.7rem, 5.5vw, 2.6rem); font-weight: 800; margin-bottom: 1rem; color: #0f172a; line-height: 1.2; }
.tool-intro p { font-size: clamp(1rem, 2.5vw, 1.15rem); color: var(--text-muted); }

/* Tool grid : mobile-first, empilé (inputs -> chèque -> affiliation -> pub) */
.tool-grid { display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 600px) { .tool-grid { gap: 2.5rem; } .tool-intro { margin-bottom: 3.5rem; } }

/* INPUTS OPTIMISÉS */
.input-card { background: var(--primary-light); border: 1px solid #bae6fd; border-radius: 1.25rem; padding: 1.5rem; }
@media (min-width: 600px) { .input-card { padding: 2.5rem; } }

.form-row { display: flex; gap: 1.5rem; }
.form-row .form-group { flex: 1; }

@media (max-width: 640px) {
    .form-row { flex-direction: column; gap: 0; }
}

.form-group { margin-bottom: 1.75rem; }
.form-group label { display: block; font-weight: 700; margin-bottom: 0.75rem; color: #0c4a6e; font-size: 0.95rem; }
.form-group input { width: 100%; padding: 0.9rem; border: 1px solid #93c5fd; border-radius: 0.5rem; font-size: 1rem; font-family: inherit; background: white; transition: border-color 0.2s, box-shadow 0.2s; }
.form-group input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2); }

/* Bouton submit : utile sans JavaScript (rendu serveur). Masqué si JS actif. */
.form-submit {
    display: block; width: 100%; margin-top: 0.5rem; padding: 0.85rem;
    background: var(--primary-color); color: #fff; border: none;
    border-radius: 0.5rem; font-weight: 800; font-size: 1rem; cursor: pointer;
    transition: background 0.2s;
}
.form-submit:hover { background: #0369a1; }
.js .form-submit { display: none; }

/* AD BLOCK */
.ad-block {
    background-color: #f1f5f9;
    border: 2px dashed #cbd5e1;
    border-radius: 0.75rem;
    padding: 1.5rem;
    text-align: center;
    color: #64748b;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
/* Encart leaderboard entre le titre et l'outil */
.ad-leaderboard { width: 100%; max-width: 970px; margin: 0 auto 2.5rem; min-height: 100px; }

/* Quick-nav : chips d'accès rapide sous le titre (informe + incite au scroll) */
.quick-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem;
    max-width: 760px; margin: -1rem auto 2.5rem; }
.quick-nav a { display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 1.05rem; border-radius: 999px; background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #e2e8f0); color: var(--text, #334155);
    font-size: 0.9rem; font-weight: 600; text-decoration: none;
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s; }
.quick-nav a:hover { background: #f1f5f9; transform: translateY(-1px);
    box-shadow: 0 4px 10px -3px rgba(0,0,0,0.1); }
.quick-nav a:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

/* Trust badges : garanties rassurantes juste au-dessus de la saisie */
.trust-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem;
    list-style: none; padding: 0; margin: 0 auto 1.75rem; max-width: 760px; }
.trust-badges li { display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: 0.9rem; font-weight: 600; color: var(--text-muted, #475569); }
.trust-badges li span { display: inline-flex; align-items: center; justify-content: center;
    width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #dcfce7; color: #16a34a;
    font-size: 0.8rem; font-weight: 800; flex-shrink: 0; }

/* Tool CTA : encart d'appel vers l'outil sur les pages guides */
.tool-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 1rem 1.5rem; margin: 0 0 2.5rem; padding: 1.4rem 1.6rem; border-radius: 1rem;
    background: linear-gradient(135deg, #0284c7, #0369a1); color: #fff; }
.tool-cta-text { display: flex; flex-direction: column; gap: 0.25rem; }
.tool-cta-text strong { font-size: 1.15rem; }
.tool-cta-text span { font-size: 0.92rem; opacity: 0.92; }
.tool-cta-btn { flex-shrink: 0; background: #fff; color: #0369a1; padding: 0.7rem 1.4rem;
    border-radius: 0.6rem; font-weight: 700; text-decoration: none; white-space: nowrap;
    transition: transform 0.15s, box-shadow 0.15s; }
.tool-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 16px -4px rgba(0,0,0,0.25); }
.tool-cta-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* House ad : bannière maison (apps Google Play) — fallback monétisation */
.house-ad { width: 100%; max-width: 970px; margin: 2.5rem auto 0; text-align: center; }
.house-ad-label { display: block; font-size: 0.7rem; text-transform: uppercase;
    letter-spacing: 0.08em; color: #94a3b8; margin-bottom: 0.4rem; }
.house-ad a { display: block; border-radius: 1rem; overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.08); transition: transform 0.15s, box-shadow 0.15s; }
.house-ad a:hover { transform: translateY(-2px); box-shadow: 0 14px 22px -4px rgba(0,0,0,0.14); }
.house-ad a:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.house-ad img { width: 100%; height: auto; display: block; }

/* CHEQUE VISUALIZATION - SHARED STYLES */
.cheque-wrapper { width: 100%; perspective: 1000px; }
.cheque-container {
    width: 100%;
    aspect-ratio: 2.1 / 1;
    background-color: #f8fafc;
    background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
    background-size: 10px 10px;
    border: 1px solid #94a3b8;
    position: relative; padding: 3%;
    display: flex; flex-direction: column; justify-content: space-between;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    user-select: none; overflow: hidden;
    min-width: 0;                       /* autorise le rétrécissement en grid/flex */
    font-size: clamp(9px, 2.7vw, 16px);
}
.cheque-container::before {
    content: 'SPECIMEN'; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg); font-size: 8em;
    color: rgba(0,0,0,0.03); font-weight: 900; pointer-events: none;
}

.cheque-row-top { display: flex; justify-content: space-between; align-items: flex-start; }
.bank-info { border-left: 0.3em solid #1e293b; padding-left: 0.8em; font-size: 0.6em; line-height: 1.4; color: #334155; text-transform: uppercase; font-weight: 700; }
.amount-box-wrapper { display: flex; flex-direction: column; align-items: flex-end; position: relative; }
.amount-box { border: 2px solid #334155; background: white; padding: 0.3em 0.5em; min-width: 10em; height: 2.5em; display: flex; align-items: center; justify-content: flex-end; position: relative; }
.currency-symbol { position: absolute; left: 0.5em; color: #94a3b8; font-weight: bold; font-size: 1em; }

.handwritten { font-family: var(--font-handwriting); color: var(--ink-color); transform: rotate(-0.5deg); }
.hw-amount-num { font-size: 1.4em; font-weight: bold; letter-spacing: 1px; }

.cheque-body { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; gap: 1em; }
.line-group { width: 100%; position: relative; }
.line-label { font-size: 0.5em; font-weight: 700; text-transform: uppercase; color: #1e293b; margin-bottom: 0.2em; }
.line-input-area { display: flex; align-items: flex-end; border-bottom: 1px solid #94a3b8; padding-bottom: 0.1em; min-height: 1.6em; width: 100%; }
.hw-text { font-size: 1.3em; font-weight: bold; white-space: nowrap; padding-left: 0.5em; overflow: hidden; text-overflow: ellipsis; }

/* Montant en lettres : texte + trait de saturation qui remplit l'espace
   restant (anti-fraude). Le texte peut passer sur 2 lignes si besoin. */
.amount-text-area {
    overflow: hidden;                    /* clippe le trait qui déborde */
    font-size: 1.3em;
    line-height: 1.5em;
    min-height: 1.7em;
    padding: 0 0 0.12em 0.4em;
    border-bottom: 1px solid #94a3b8;   /* ligne d'écriture */
}
.hw-amount-text { white-space: normal; font-weight: bold; word-break: break-word; }

/* Trait de saturation : suit le texte en inline, déborde puis est clippé →
   remplit la fin de la DERNIÈRE ligne, centré verticalement (au milieu) */
.amount-fill {
    display: none;                       /* affiché en inline-block par JS, largeur = espace restant */
    height: 0.14em;
    vertical-align: middle;              /* au milieu de la bande de ligne */
    background: var(--ink-color);
    opacity: 0.75;
    border-radius: 99px;
}

/* Montant en chiffres : reste sur une ligne, la case s'élargit au besoin */
.hw-amount-num { white-space: nowrap; }

/* Saturation de la case chiffres : remplit l'espace vide à gauche des chiffres
   (anti-ajout de chiffre), trait centré entre le € et le montant */
.amount-fill-num {
    flex: 1 0 3em;             /* largeur min garantie : trait toujours visible */
    align-self: center;
    height: 0.12em;
    margin: 0 0.4em 0 1.3em;   /* dégage le symbole € à gauche */
    background: var(--ink-color);
    opacity: 0.6;
    border-radius: 99px;
}

.security-line { flex-grow: 1; align-self: center; height: 2px; background: var(--ink-color); margin-left: 0.5em; opacity: 0.7; border-radius: 99px; display: none; }
.security-line.active { display: block; }

.cheque-footer { display: flex; align-items: flex-end; margin-top: 0.5em; }
.account-holder { width: 40%; font-size: 0.5em; color: #64748b; padding-left: 1em; padding-bottom: 0.5em; }
.footer-right { width: 60%; display: flex; flex-direction: column; align-items: flex-end; padding-right: 1em; }
.footer-line { display: flex; align-items: flex-end; width: 100%; justify-content: flex-end; margin-bottom: 0.5em; position: relative; }
.footer-line .line-input-area { width: 60%; }
.signature-box { width: 40%; height: 3.5em; border: 1px solid #cbd5e1; background: rgba(255,255,255,0.4); position: relative; margin-top: 0.2em; }
.sig-placeholder { font-family: var(--font-handwriting); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-5deg); color: #cbd5e1; font-size: 0.8em; opacity: 0.7; white-space: nowrap; }
.micr-band { position: absolute; bottom: 0.3em; left: 0; width: 100%; text-align: center; font-family: var(--font-mono); font-size: 0.5em; letter-spacing: 2px; color: #475569; opacity: 0.8; }

/* --- TUTORIAL SPECIFIC CSS (RESPONSIVE FIX) --- */
.cheque-tutorial {
    overflow: visible !important; /* Allow badges to protrude */
    margin-bottom: 2rem;
    border: 2px solid #e2e8f0;
    box-shadow: none;
}
/* Pas de filigrane SPECIMEN sur le tutoriel (déborde en overflow:visible) */
.cheque-tutorial::before { content: none; }

.step-badge {
    position: absolute;
    background: #ef4444;
    color: white;
    font-weight: 800;
    border-radius: 50%;
    width: 1.8em;
    height: 1.8em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    z-index: 50;
    border: 2px solid white;
}

/* Revised Positioning to be more robust */
.badge-1 { top: -0.9em; right: -0.9em; } /* Montant chiffres */
.badge-2 { top: 0; left: -1.5em; transform: translateY(-30%); } /* Montant lettres */
.badge-3 { top: 0; left: -1.5em; transform: translateY(-30%); } /* Bénéficiaire */
.badge-4 { top: 0; left: -1.8em; transform: translateY(-20%); } /* Lieu */
.badge-5 { top: 0; left: -1.8em; transform: translateY(-20%); } /* Date */
.badge-6 { top: -0.9em; right: -0.9em; } /* Signature */

/* Sécurité petits écrans : badges gauche moins débordants pour éviter tout clipping */
@media (max-width: 560px) {
    .badge-2, .badge-3 { left: -1.1em; }
    .badge-4, .badge-5 { left: -1.2em; }
}

.tutorial-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);   /* minmax(0,…) évite le blowout grid */
    gap: 3rem;
    margin-top: 2rem;
}
@media (min-width: 1024px) {
    .tutorial-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

.step-list { list-style: none; padding: 0; }
.step-item { display: flex; gap: 1rem; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid #e2e8f0; }
.step-item:last-child { border-bottom: none; }
.step-num { background: #ef4444; color: white; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; flex-shrink: 0; font-size: 0.9rem; margin-top: 2px; }
.step-content h4 { color: #1e293b; font-weight: 700; margin-bottom: 0.25rem; font-size: 1.1rem; }
.step-content p { color: #64748b; font-size: 0.95rem; line-height: 1.5; margin: 0; }

/* --- AFFILIATION SECTION STYLES --- */
.affiliation-block {
    margin-top: 2.5rem;
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}
.aff-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.aff-title span { color: #f59e0b; }
.aff-disclosure { font-size: 0.8rem; color: var(--text-muted); margin: -1rem 0 1.25rem; }
.aff-disclosure a { color: var(--primary-color); }

.aff-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .aff-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .aff-grid { grid-template-columns: repeat(3, 1fr); } }

.aff-card {
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    position: relative;
    background: #fff;
    transition: all 0.3s ease;
}
.aff-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.aff-tag {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 0.25rem 0.6rem;
    border-radius: 99px;
    letter-spacing: 0.05em;
}
.aff-tag.perso { background-color: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }
.aff-tag.pro { background-color: #fef3c7; color: #92400e; border: 1px solid #fde68a; }

.aff-bank-name { font-weight: 800; font-size: 1.2rem; color: #0f172a; margin-bottom: 0.5rem; padding-right: 3rem; }
.aff-offer { font-size: 0.9rem; color: #475569; margin-bottom: 1.25rem; line-height: 1.5; flex-grow: 1; }
.aff-offer strong { color: #059669; font-weight: 700; }

.aff-cta {
    background-color: var(--primary-color); color: #fff; text-decoration: none;
    padding: 0.7rem; border-radius: 0.5rem; font-size: 0.95rem; font-weight: 800;
    text-align: center; border: 2px solid var(--primary-color); transition: all 0.2s;
    display: block; margin-top: 1rem;
}
.aff-cta:hover { background-color: #0369a1; border-color: #0369a1; transform: translateY(-1px); }
/* Évite que .content-block a (relance) repeigne le texte du bouton en bleu */
.content-block a.aff-cta { color: #fff; }

/* En-tête carte : logo + nom */
.aff-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.aff-logo {
    width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 1.2rem;
}
.aff-head .aff-bank-name { margin-bottom: 0; padding-right: 0; }

/* Note / étoiles */
.aff-rating { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.6rem; }
.aff-stars { color: #f59e0b; letter-spacing: 1px; font-size: 0.95rem; }
.aff-score { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); }

/* Pastille bonus (accroche) */
.aff-bonus {
    display: inline-block; background: #dcfce7; color: #166534;
    font-weight: 800; font-size: 0.85rem; padding: 0.2rem 0.7rem;
    border-radius: 99px; margin-bottom: 0.6rem; border: 1px solid #bbf7d0;
}

/* Carte mise en avant + ruban */
.aff-featured { border: 2px solid var(--primary-color); box-shadow: 0 10px 25px -8px rgba(2,132,199,0.35); }
.aff-ribbon {
    position: absolute; top: 0; left: 0;
    background: var(--primary-color); color: #fff;
    font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
    padding: 0.25rem 0.75rem; border-radius: 0.75rem 0 0.5rem 0;
}
.aff-featured .aff-tag { top: 0.5rem; }
.aff-featured .aff-head { margin-top: 1.1rem; }

/* Section relance post-FAQ */
.aff-relance .aff-grid { margin-top: 1.5rem; }
.aff-relance-sub { font-size: 1.05rem; color: var(--text-muted); margin-bottom: 0.5rem !important; }
@media (min-width: 640px) { .aff-relance .aff-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .aff-relance .aff-grid { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-left: auto; margin-right: auto; } }

/* --- CONTENT STYLES --- */
/* Pas de max-width propre : laisse le .container piloter la largeur
   (= largeur identique au bloc outil et au comparatif affiliation) */
.content-article { margin: 0 auto; }
.content-block { margin-bottom: 2.5rem; background: var(--bg-card); padding: 1.5rem; border-radius: 1.25rem; border: 1px solid var(--border-color); }
@media (min-width: 600px) { .content-block { margin-bottom: 4rem; } }
.content-block h2 { font-size: clamp(1.4rem, 4vw, 1.75rem); color: #0f172a; margin-bottom: 1.5rem; letter-spacing: -0.02em; }
.content-block h3 { font-size: 1.25rem; color: #1e293b; margin-bottom: 1rem; margin-top: 2rem; border-bottom: 2px solid #e0f2fe; padding-bottom: 0.5rem; display: inline-block; }
.content-block p { margin-bottom: 1.5rem; color: #334155; line-height: 1.8; font-size: 1.05rem; }
.content-block ul, .content-block ol { margin: 0 0 1.5rem 1.5rem; color: #334155; line-height: 1.8; }
.content-block li { margin-bottom: 0.5rem; }
.content-block a { color: var(--primary-color); }

/* Sécurité (6 piliers) : 1 col mobile, 2 col tablette, 3 col laptop+ */
.security-list { list-style: none; display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 2rem; }
@media (min-width: 600px)  { .security-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .security-list { grid-template-columns: repeat(3, 1fr); } }
.security-item { background: #f0fdf4; border: 1px solid #bbf7d0; padding: 1.5rem; border-radius: 0.75rem; display: flex; align-items: flex-start; gap: 1rem; }
.icon-check { color: #16a34a; font-weight: bold; font-size: 1.4rem; flex-shrink: 0; }

.story-box { background: #fffbeb; border: 1px solid #fcd34d; padding: 2.5rem; border-radius: 1rem; margin-top: 3rem; }
.story-title { font-family: serif; font-weight: bold; font-size: 1.75rem; color: #92400e; margin-bottom: 1rem; border-bottom: 1px solid #fcd34d; padding-bottom: 0.5rem; }

.invalid-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }
.invalid-item { background: #fef2f2; border: 1px solid #fee2e2; padding: 1.5rem; border-radius: 0.75rem; text-align: center; }
.invalid-icon { font-size: 2.5rem; margin-bottom: 0.75rem; display: block; }
.invalid-title { font-weight: bold; color: #991b1b; display: block; margin-bottom: 0.5rem; font-size: 1.1rem; }

/* --- BANKS GRID CSS --- */
.banks-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 2rem; }
.bank-card { background: white; border: 1px solid var(--border-color); border-radius: 1rem; padding: 1.75rem; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.bank-card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); border-color: var(--primary-color); }
.bank-card h4 { color: #1e293b; font-size: 1.1rem; margin-bottom: 0.75rem; font-weight: 700; }
.bank-card p { color: #475569; font-size: 0.95rem; margin-bottom: 0; line-height: 1.5; }

/* --- FAQ ACCORDÉON (<details>/<summary>, sémantique, sans JS) --- */
.faq-list { display: flex; flex-direction: column; gap: 0; }
.faq-item { border-bottom: 1px solid #e2e8f0; }
.faq-item:last-child { border-bottom: none; }

.faq-question {
    font-weight: 700; color: #0f172a; font-size: 1.1rem;
    display: flex; align-items: center; gap: 1rem;
    cursor: pointer; list-style: none; padding: 1.25rem 0;
    transition: color 0.2s;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::before {
    content: "?"; background: var(--primary-light); color: var(--primary-color);
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 1rem;
}
.faq-question::after {
    content: "\203A"; margin-left: auto; font-size: 1.6rem; line-height: 1;
    color: var(--primary-color); transform: rotate(90deg);
    transition: transform 0.25s ease; flex-shrink: 0;
}
.faq-item[open] .faq-question::after { transform: rotate(-90deg); }
.faq-item[open] .faq-question,
.faq-question:hover { color: var(--primary-color); }

.faq-answer { color: #475569; font-size: 1rem; padding: 0 0 1.25rem 2.75rem; line-height: 1.7; }
.faq-answer p { color: #475569; font-size: 1rem; margin-bottom: 1rem; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-item[open] .faq-answer { animation: faqIn 0.25s ease; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* --- FIL D'ARIANE (breadcrumb) --- */
.breadcrumb { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 1.5rem; }
.breadcrumb a { color: var(--primary-color); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { margin: 0 0.4rem; color: #94a3b8; }

/* --- BLOC AUTEUR (E-E-A-T) --- */
.author-box {
    display: flex; gap: 1rem; align-items: flex-start;
    background: #f8fafc; border: 1px solid var(--border-color);
    border-radius: 0.75rem; padding: 1.25rem 1.5rem; margin: 2rem 0;
}
.author-avatar {
    width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
    background: var(--primary-color); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.2rem;
}
.author-meta { font-size: 0.92rem; line-height: 1.5; }
.author-meta strong { color: #0f172a; }
.author-role { color: var(--primary-color); font-weight: 600; }
.author-bio { color: var(--text-muted); margin-top: 0.25rem; }
.author-updated { color: #94a3b8; font-size: 0.82rem; margin-top: 0.4rem; }

/* --- SOURCES OFFICIELLES --- */
.src-list { list-style: none; margin: 1rem 0 0 0 !important; padding: 0; }
.src-list li { margin-bottom: 0.5rem; padding-left: 1.5rem; position: relative; }
.src-list li::before { content: "↗"; position: absolute; left: 0; color: var(--primary-color); }

/* --- MAILLAGE INTERNE (related) --- */
.related-block { margin-top: 2rem; }
.related-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1rem; }
@media (min-width: 640px) { .related-grid { grid-template-columns: repeat(2, 1fr); } }
.related-card { display: block; padding: 1rem 1.25rem; border: 1px solid var(--border-color); border-radius: 0.75rem; text-decoration: none; background: #fff; transition: all 0.2s; }
.related-card:hover { border-color: var(--primary-color); transform: translateY(-2px); box-shadow: 0 6px 12px -4px rgba(0,0,0,0.08); }
.related-card strong { color: #0f172a; display: block; margin-bottom: 0.25rem; }
.related-card span { color: var(--text-muted); font-size: 0.9rem; }

/* CTA inline dans un article */
.inline-cta {
    display: inline-block; background: var(--primary-color); color: #fff !important;
    padding: 0.7rem 1.4rem; border-radius: 0.5rem; font-weight: 800; text-decoration: none;
    margin: 0.5rem 0;
}
.inline-cta:hover { background: #0369a1; }

/* --- FOOTER (thème sombre) --- */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.site-footer { background: #0f172a; color: #cbd5e1; margin-top: 3rem; }

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 3rem 1rem 2rem;
}
@media (min-width: 600px)  { .footer-grid { grid-template-columns: 1fr 1fr; padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; padding-inline: 2rem; } }

.footer-brand .footer-logo { font-size: 1.3rem; font-weight: 800; color: #fff; text-decoration: none; }
.footer-brand .footer-logo span { color: #38bdf8; }
.footer-brand p { margin-top: 0.85rem; font-size: 0.92rem; line-height: 1.65; color: #94a3b8; max-width: 38ch; }

.footer-col h3 {
    font-size: 0.8rem; font-weight: 700; color: #fff;
    margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.06em;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.65rem; }
.footer-col a { color: #cbd5e1; text-decoration: none; font-size: 0.95rem; transition: color 0.2s; }
.footer-col a:hover { color: #38bdf8; }

.footer-bottom { border-top: 1px solid #1e293b; }
.footer-bottom-inner {
    display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; justify-content: space-between;
    padding: 1.5rem 1rem; font-size: 0.83rem; color: #94a3b8;
}
.footer-aff { color: #64748b; }

/* --- RESPONSIVE --- */
@media (min-width: 640px) {
    .banks-grid { grid-template-columns: repeat(2, 1fr); }
    .content-block { padding: 3rem; }
}
@media (min-width: 1024px) {
    .content-block { padding: 3.5rem; }
}
@media (min-width: 1024px) {
    /* Laptop / tablette paysage : 2 colonnes via grid-areas */
    .tool-grid {
        display: grid;
        grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
        grid-template-areas:
            "form   cheque"
            "affil  affil";
        gap: 2.5rem 3rem;
        align-items: start;
    }
    .input-card        { grid-area: form; }
    .cheque-wrapper    { grid-area: cheque; }
    .affiliation-block { grid-area: affil; margin-top: 0; }
    .cheque-container  { font-size: 0.95rem; }
    .banks-grid        { grid-template-columns: repeat(3, 1fr); }
}
/* ===========================================================
   BREAKPOINTS (mobile-first) :
     base      : mobile portrait (< 600px)
     >= 600px  : grand mobile / mobile paysage
     >= 768px  : tablette portrait
     >= 1024px : tablette paysage / laptop (passage 2 colonnes)
     >= 1440px : grand desktop
   =========================================================== */

/* Tablette portrait : affiliation principale en 2 colonnes plus aérées */
@media (min-width: 768px) and (max-width: 1023px) {
    .affiliation-block { padding: 2rem; }
}

/* Très grand écran : densité affiliation maximale */
@media (min-width: 1440px) {
    .aff-grid { gap: 1.5rem; }
}

/* Orientation paysage sur petits écrans (hauteur réduite) :
   header non collant + sections compactes pour ne pas manger l'écran */
@media (orientation: landscape) and (max-height: 500px) {
    header { position: static; }
    .section { padding-block: 1.75rem; }
    .cookie-banner { padding: 0.6rem 1rem; font-size: 0.8rem; }
}

/* Sécurité très petits écrans (< 360px) : éviter tout débordement */
@media (max-width: 359px) {
    .container { padding: 0 0.75rem; }
    .aff-bank-name { font-size: 1.05rem; }
    .nav-links a { font-size: 0.95rem; }
}

/* Respect de la préférence "réduire les animations" (accessibilité) */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

@media print {
    .no-print, .ad-block, .affiliation-block { display: none !important; }
    body { background: white; }
    .content-block { border: none; padding: 0; margin-bottom: 2rem; }
    .cheque-container { border: 2px solid black; font-size: 10pt; page-break-inside: avoid; box-shadow: none; }
}