/* ─────────────────────────────────────────────────────────────────────────────
 * Garçonne — grilles & cartes de mise en page.
 * (Reprend le bloc de styles inline présent sur les pages d'accueil / rubriques.)
 * ───────────────────────────────────────────────────────────────────────── */

/* ─── Grilles responsives ───────────────────────────────────────────── */
.flm-blog-section { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: start; }
.flm-tools-grid   { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.flm-split-grid   { display: grid; gap: 1.5rem;  grid-template-columns: 1fr; align-items: start; }
.flm-band-grid    { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.flm-edit-grid    { display: grid; gap: 2rem;    grid-template-columns: 1fr; align-items: start; }
.flm-tools-compact{ display: grid; gap: 1.5rem;  grid-template-columns: 1fr; align-items: center; }

@media (min-width: 640px) {
    .flm-tools-grid { grid-template-columns: 1fr 1fr; }
    .flm-band-grid  { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
    .flm-blog-section { grid-template-columns: 1.3fr 1fr; gap: 2rem; }
    .flm-tools-grid   { grid-template-columns: repeat(4, 1fr); }
    .flm-split-grid   { grid-template-columns: 1.3fr 1fr; gap: 2rem; }
    .flm-band-grid    { grid-template-columns: repeat(4, 1fr); }
    .flm-edit-grid    { grid-template-columns: 1fr 1.4fr; }
    .flm-tools-compact{ grid-template-columns: 1fr auto; }
}

/* ─── Card lead (image en haut + texte en bas) ───────────────────────── */
.flm-card-lead {
    display: block;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--color-sand-200);
}
.flm-card-lead .flm-card-img { aspect-ratio: 16/10; overflow: hidden; background: var(--color-sand-100); }
.flm-card-lead .flm-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flm-card-lead .flm-card-body { padding: 1.75rem; }

/* ─── Wide card (image gauche + texte droite) ─────────────────────────── */
.flm-wide-card {
    display: flex;
    background: #fff;
    border: 1px solid var(--color-sand-200);
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .15s ease, box-shadow .15s ease;
}
.flm-wide-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(20,20,42, .07);
}
.flm-wide-card .flm-wide-img {
    flex-shrink: 0;
    width: 28%;
    min-width: 130px;
    background: var(--color-sand-100);
    overflow: hidden;
}
.flm-wide-card .flm-wide-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.flm-wide-card .flm-wide-body {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    flex: 1;
}
.flm-wide-card .flm-wide-body .kicker { margin: 0; font-size: 11px; }
.flm-wide-card .flm-wide-body h3 {
    font-size: 1.05rem;
    margin: .35rem 0 .35rem;
    line-height: 1.3;
    color: var(--color-ink);
}
.flm-wide-card .flm-wide-body time {
    font-size: 12px;
    color: var(--color-muted);
}

/* ─── Stack vertical de wide cards (colonne droite) ───────────────────── */
.flm-stack { display: flex; flex-direction: column; gap: .9rem; }

/* ─── Band card (image en haut + texte en bas) ───────────────────────── */
.flm-band-card {
    display: block;
    background: #fff;
    border: 1px solid var(--color-sand-200);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .15s ease, box-shadow .15s ease;
}
.flm-band-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(20,20,42, .07); }
.flm-band-card .flm-band-img { aspect-ratio: 5/3; overflow: hidden; background: var(--color-sand-100); }
.flm-band-card .flm-band-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flm-band-card .flm-band-body { padding: 1rem 1.25rem; }

/* ─── Editorial rail (liste numerotee + vedette image plein) ──────────── */
.flm-numbered-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--color-sand-200); }
.flm-numbered-list li { border-bottom: 1px solid var(--color-sand-200); }
.flm-numbered-list a { display: flex; gap: 1rem; padding: 1rem 0; text-decoration: none; color: inherit; }
.flm-numbered-list .flm-num { font-family: var(--font-display); font-weight: 800; font-size: 1.75rem; color: rgba(230,0,110,.4); line-height: 1; width: 2.25rem; flex-shrink: 0; }

.flm-editorial-hero { position: relative; display: block; border-radius: 18px; overflow: hidden; aspect-ratio: 16/11; text-decoration: none; background: var(--color-sand-100); }
.flm-editorial-hero img { width: 100%; height: 100%; object-fit: cover; }
.flm-editorial-hero .flm-eh-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.2) 50%, transparent 100%); }
.flm-editorial-hero .flm-eh-body { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem; color: #fff; }

/* ─── ToolsShowcase ─────────────────────────────────────────────────── */
.flm-tool-card {
    display: block; padding: 1.5rem; text-decoration: none; color: inherit;
    background: #fff; border: 1px solid var(--color-sand-200); border-radius: 18px;
    transition: transform .15s ease, box-shadow .15s ease;
}
.flm-tool-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(20,20,42, .07); }
.flm-tool-card .flm-tool-icon {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 800; margin-bottom: 1rem;
}

/* ─── Section headers ────────────────────────────────────────────────── */
.flm-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.flm-section-head--bordered { border-top: 1px solid var(--color-sand-200); padding-top: 2.5rem; }
.flm-section-link { font-weight: 600; color: var(--color-trust-600); font-size: 14px; text-decoration: none; }
.flm-section-link:hover { color: var(--color-trust-700); }
.flm-section-link--block { display: inline-block; margin-top: .75rem; }

/* ─── Hero CTA + titres de section ───────────────────────────────────── */
.flm-hero-cta-row { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }
.flm-hero-cta-row > * { margin-top: 0; }
.btn--ghost-light { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #fff; }
.flm-section-title { font-size: 2rem; margin-top: .25rem; }
.flm-section-title--sm { font-size: 1.75rem; margin-top: .25rem; }
.section--flush-top { padding-top: 0; }
.section--tight-top { padding-top: 1rem; }

/* ─── Card lead (textes) ─────────────────────────────────────────────── */
.flm-card-lead__title { font-size: 1.5rem; margin: .5rem 0; line-height: 1.25; }
.flm-card-lead__excerpt { font-size: 15px; line-height: 1.55; }
.flm-card-lead__meta { font-size: 12px; color: var(--color-muted); margin-top: 1rem; }

/* ─── Band rail ──────────────────────────────────────────────────────── */
.flm-band-section { background: rgba(232,246,249,.5); padding: 3rem 0; }
.flm-band-head { text-align: center; margin-bottom: 2rem; }
.flm-band-card__title { font-size: 1rem; line-height: 1.35; color: var(--color-ink); margin-bottom: .5rem; }
.flm-band-card__date { font-size: 11px; color: var(--color-muted); margin: 0; }

/* ─── Editorial rail (textes) ────────────────────────────────────────── */
.flm-num-body { min-width: 0; }
.flm-num-title { font-size: 1.05rem; line-height: 1.35; color: var(--color-ink); }
.flm-num-date { font-size: 11px; color: var(--color-muted); margin-top: .5rem; }
.flm-eh-badge { display: inline-block; padding: .2rem .6rem; border-radius: 999px; background: var(--color-coral-500); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .5rem; }
.flm-eh-title { color: #fff; font-size: 1.5rem; line-height: 1.2; }

/* ─── Bandeau newsletter inséré ──────────────────────────────────────── */
.flm-nl-inset { border-radius: 24px; padding: 2.5rem; overflow: hidden; position: relative; }
.flm-nl-inset__title { color: #fff; font-size: 1.625rem; margin: .5rem 0; }
.flm-nl-inset__text { color: rgba(255,255,255,.75); font-size: 14px; max-width: 36rem; }