/* ============================================================
   Thème symfon1 — rendu des sites PBN
   Couleurs injectées par site via les variables --s1-* (layout).
   ============================================================ */

* { box-sizing: border-box; }

.s1-body {
    margin: 0;
    font-family: var(--s1-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
    color: var(--s1-text, #1f2937);
    background: var(--s1-even, #fff);
    line-height: 1.65;
}

.s1-shell { max-width: var(--s1-width, 1180px); margin: 0 auto; padding: 0 1.25rem; }

img { max-width: 100%; height: auto; }
a { color: var(--s1-main, #4f46e5); }

/* ── Header + burger ───────────────────────────────────────── */
.s1-header {
    background: var(--s1-header-bg, #fff);
    border-bottom: 3px solid var(--s1-main, #4f46e5);
    position: sticky; top: 0; z-index: 50;
}
.s1-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 70px; padding: .6rem 0; }
.s1-brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; flex-shrink: 0; }
.s1-logo { max-height: 52px; width: auto; }
.s1-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.s1-brand-name { font-weight: 800; font-size: 1.25rem; color: var(--s1-nav, #1e293b); letter-spacing: -0.01em; }
.s1-brand-slogan { font-size: .82rem; color: var(--s1-nav, #1e293b); opacity: .75; margin-top: .15rem; }

/* Menu desktop : texte propre, pas d'encadrement — l'ancre menu n'apparaît
   que pour les contenus explicitement marqués (peu d'items donc lisible). */
.s1-nav { display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap; row-gap: .5rem; justify-content: flex-end; }
.s1-nav a {
    color: var(--s1-nav, #1e293b);
    text-decoration: none;
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.2;
    transition: color .18s;
}
.s1-nav a:hover, .s1-nav a:focus-visible {
    color: var(--s1-main, #4f46e5);
    outline: none;
}
.s1-nav a.s1-nav-cta {
    color: var(--s1-button, var(--s1-main, #4f46e5));
    font-weight: 700;
}
.s1-burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.s1-burger span { width: 26px; height: 3px; background: var(--s1-nav, #1e293b); border-radius: 2px; transition: .25s; }
.s1-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.s1-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.s1-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ── Hero ──────────────────────────────────────────────────── */
.s1-main { padding: 2.5rem 0 3rem; }
.s1-hero { text-align: center; margin-bottom: 2.5rem; }
.s1-hero h1 { font-size: 2.4rem; margin: 0 0 .5rem; color: var(--s1-nav, #1e293b); }
.s1-hero-slogan { font-size: 1.15rem; color: #64748b; margin: 0; }

/* Conteneurs de cartes = <ul> : on retire les puces et le retrait par défaut. */
.s1-mag, .s1-grid, .s1-featured-main, .s1-featured-side { list-style: none; padding-left: 0; }

/* ── Mise en avant : 2 grands à gauche + 2 latéraux à droite ── */
.s1-featured { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; align-items: start; }
.s1-featured-main { display: flex; flex-direction: column; gap: 1.5rem; margin: 0; }
.s1-featured-side { display: flex; flex-direction: column; gap: 1.5rem; margin: 0; }

/* ── Grille 2 colonnes ─────────────────────────────────────── */
.s1-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 0; }

/* ── Accueil : grille « magazine » qui pave tout l'espace ─────
   Colonnes auto-remplies + rangées de hauteur fixe : les tuiles se posent
   sans laisser de vide. Le héros (`.s1-card--big`) occupe un bloc 2×2 ;
   `grid-auto-flow: dense` comble les cases restantes. Les cartes remplissent
   leur case (image extensible, meta description bornée à 2 lignes). */
.s1-mag { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    grid-auto-rows: 220px; grid-auto-flow: dense; gap: 1.5rem; margin: 0 0 1.5rem; }
.s1-mag .s1-card--big { grid-column: span 2; grid-row: span 2; }
.s1-mag .s1-card { height: 100%; display: flex; flex-direction: column; }
.s1-mag .s1-card .s1-card-head { flex: 1 1 auto; min-height: 0; grid-template-rows: 1fr; }
.s1-mag .s1-card .s1-card-media-link { aspect-ratio: auto; }
.s1-mag .s1-card-desc { flex: 0 0 auto; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden; }

/* ── Carte article ─────────────────────────────────────────────
   Lien étiré : le lien du *titre* couvre toute la carte (image + description),
   donc l'ensemble est cliquable mais avec une seule cible. Le lien image est
   redondant (masqué aux lecteurs d'écran, hors tabulation). Pour que le lien
   étiré couvre bien la carte, aucun ancêtre entre lui et `.s1-card` ne doit
   être positionné → le titre est superposé à l'image via CSS grid (même
   cellule), pas en position:absolute. Couleurs réglables via --s1-card-*. */
.s1-card {
    --s1-card-bg: var(--s1-odd, #f8fafc);
    --s1-card-overlay-text: #fff;
    --s1-card-excerpt: #475569;
    --s1-card-focus: var(--s1-main, #4f46e5);
    position: relative; /* bloc conteneur du lien étiré */
    display: block; list-style: none; color: inherit; background: var(--s1-card-bg);
    border: 1px solid var(--s1-liseret, #e5e7eb); border-radius: 14px; overflow: hidden;
    transition: transform .15s, box-shadow .15s;
}
.s1-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.12); }

/* En-tête : image et titre empilés dans la même cellule de grille (overlay
   sans position:absolute pour ne pas casser le lien étiré). */
.s1-card-head { display: grid; }
.s1-card-head > * { grid-area: 1 / 1; min-width: 0; }

/* Le lien image enveloppe directement l'<img> (plus de div intermédiaire). */
.s1-card-media-link { position: relative; display: block; aspect-ratio: 16 / 9;
    background: #e2e8f0; overflow: hidden; color: inherit; text-decoration: none; }
.s1-card--big .s1-card-media-link { aspect-ratio: 16 / 10; }
.s1-card-media-link img { display: block; width: 100%; height: 100%; object-fit: cover;
    transition: transform .4s ease; }
/* légère ombre sur l'image pour la lisibilité du titre superposé */
.s1-card-shade { position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.72) 100%); }
.s1-card-title { align-self: end; z-index: 1; margin: 0; padding: 1rem 1.1rem;
    font-size: 1.15rem; font-weight: 700; }
.s1-card--big .s1-card-title { font-size: 1.7rem; padding: 1.4rem; }
.s1-card-title-link { color: var(--s1-card-overlay-text); text-decoration: none;
    text-shadow: 0 1px 6px rgba(0,0,0,.7); }
/* Lien étiré : couvre toute la carte → image + description cliquables. */
.s1-card-title-link::after { content: ""; position: absolute; inset: 0; z-index: 2; }

/* Description : non cliquable en tant que texte, mais sous le lien étiré ;
   marge basse confortable (moins collée au bord). */
.s1-card-desc { margin: 0; padding: 1rem 1.1rem 1.4rem; font-size: .95rem; color: var(--s1-card-excerpt); }

/* Retour visuel au survol de la carte entière. */
.s1-card:hover .s1-card-media-link img { transform: scale(1.05); }
.s1-card:hover .s1-card-title-link { text-decoration: underline; }
/* Focus clavier nettement visible (le titre porte le lien réel). */
.s1-card-title-link:focus-visible { outline: 3px solid var(--s1-card-focus); outline-offset: 2px; }
.s1-card-media-link:focus-visible { outline: 3px solid var(--s1-card-focus); outline-offset: -3px; }

/* ── Article ───────────────────────────────────────────────── */
.s1-article { background: var(--s1-even, #fff); }
.s1-content { font-size: 1.05rem; }
.s1-content h1 { font-size: 2.1rem; color: var(--s1-nav, #1e293b); }
.s1-content h2 { font-size: 1.6rem; margin-top: 2rem; color: var(--s1-nav, #1e293b); }
.s1-content h3 { font-size: 1.25rem; }
.s1-content img { border-radius: 10px; }
.s1-content .row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin: 1.2rem 0; }
.s1-content [class^="col-"], .s1-content [class*=" col-"] { flex: 1 1 0; min-width: 220px; }
/* Largeurs proportionnelles au span (flex-basis 0 + grow = span). */
.s1-content .col-4 { flex-grow: 4; } .s1-content .col-5 { flex-grow: 5; }
.s1-content .col-6 { flex-grow: 6; } .s1-content .col-7 { flex-grow: 7; }
.s1-content .col-8 { flex-grow: 8; }
.s1-content .col-12 { flex-basis: 100%; }
/* Colonne image accolée au texte : image centrée, jamais en pleine largeur. */
.s1-content .pb-col-media { display: flex; align-items: center; }
.s1-content .pb-col-media img { width: 100%; height: auto; margin: 0; }
@media (max-width: 700px) {
    .s1-content .row > [class^="col-"], .s1-content .row > [class*=" col-"] { flex-basis: 100%; }
}
.img-fluid { max-width: 100%; height: auto; }
.btn { display: inline-block; padding: .6rem 1.3rem; border-radius: 8px; text-decoration: none; font-weight: 600; }
.btn-primary { background: var(--s1-button, #4f46e5); color: #fff; }

/* ── Bloc auteur EEAT ──────────────────────────────────────── */
.s1-author { margin-top: 2.5rem; padding: 1.3rem; border: 1px solid var(--s1-liseret, #e5e7eb);
    border-radius: 14px; background: var(--s1-odd, #f8fafc); }
.s1-author-head { display: flex; align-items: center; gap: .9rem; }
.s1-author-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--s1-main, #4f46e5);
    color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem; }
.s1-author-name { font-weight: 700; }
.s1-author-date { font-size: .85rem; color: #64748b; }
.s1-author-bio { margin: .8rem 0 0; color: #475569; font-size: .95rem; }

/* ── Formulaire de contact (grille 2 colonnes desktop) ─────── */
.s1-form { max-width: 720px; margin: 0 auto; }
.s1-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; }
.s1-form-field { display: flex; flex-direction: column; gap: .35rem; margin: 0; }
.s1-form-field label { font-weight: 600; font-size: .95rem; color: var(--s1-text, #1f2937); }
.s1-form-field input, .s1-form-field textarea {
    width: 100%; padding: .55rem .75rem; font: inherit;
    border: 1px solid var(--s1-liseret, #e5e7eb); border-radius: 6px;
    background: #fff; color: var(--s1-text, #1f2937);
}
.s1-form-field input:focus, .s1-form-field textarea:focus {
    outline: none; border-color: var(--s1-main, #4f46e5); box-shadow: 0 0 0 3px rgba(79, 70, 229, .15);
}
.s1-form-field textarea { resize: vertical; min-height: 8rem; }
.s1-form-field--full { grid-column: 1 / -1; }
.s1-form-field--captcha input { max-width: 8rem; }
.s1-form-actions { margin: 1.4rem 0 0; }
.s1-form button[type="submit"] {
    background: var(--s1-button, #4f46e5); color: #fff; border: 0;
    padding: .7rem 1.6rem; border-radius: 6px; font-weight: 700; font-size: 1rem; cursor: pointer;
    transition: filter .18s;
}
.s1-form button[type="submit"]:hover { filter: brightness(1.08); }
.s1-form-ok { padding: 1rem 1.2rem; background: #ecfdf5; color: #065f46; border-radius: 8px; }
.s1-form-error { padding: .8rem 1rem; background: #fef2f2; color: #991b1b; border-radius: 8px; margin: 0 0 1rem; }
@media (max-width: 640px) {
    .s1-form-grid { grid-template-columns: 1fr; }
}

/* ── Pagination (accueil du blog) ──────────────────────────── */
.s1-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: .35rem; margin: 2.5rem 0 1rem; font-weight: 600; }
.s1-pagination a, .s1-pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.4rem; height: 2.4rem; padding: 0 .8rem; border-radius: 8px;
    border: 1px solid var(--s1-liseret, #e5e7eb); text-decoration: none; color: var(--s1-text, #1f2937);
    transition: background .18s, color .18s, border-color .18s;
}
.s1-pagination a:hover { background: var(--s1-main, #4f46e5); color: #fff; border-color: transparent; }
.s1-pagination .s1-pagination-current { background: var(--s1-main, #4f46e5); color: #fff; border-color: transparent; }
.s1-pagination-prev, .s1-pagination-next { padding: 0 1rem; }
/* Séparateur « … » : ni bordure ni fond, simple marqueur de rupture. */
.s1-pagination .s1-pagination-gap { border: 0; min-width: auto; padding: 0 .2rem; color: #94a3b8; }

/* ── Intro / outro de l'accueil du blog ────────────────────── */
.s1-blog-intro { margin-bottom: 2rem; }
.s1-blog-outro { margin-top: 2rem; }

/* ── Articles liés ─────────────────────────────────────────── */
.s1-related { margin-top: 3rem; }
.s1-related-title { font-size: 1.5rem; color: var(--s1-nav, #1e293b); margin-bottom: 1.2rem;
    border-left: 4px solid var(--s1-main, #4f46e5); padding-left: .7rem; }

/* ── Blocs page builder : FAQ / encadré / sommaire ─────────── */
.pb-faq { margin: 1.5rem 0; }
.pb-faq-item { border: 1px solid var(--s1-liseret, #e5e7eb); border-radius: 10px; margin-bottom: .6rem; overflow: hidden; }
.pb-faq-q { width: 100%; text-align: left; background: var(--s1-odd, #f8fafc); border: 0; cursor: pointer;
    padding: .9rem 1.1rem; font-weight: 700; font-size: 1rem; display: flex; justify-content: space-between; gap: 1rem; }
.pb-faq-q::after { content: "+"; color: var(--s1-main, #4f46e5); font-weight: 800; }
.pb-faq-item.open .pb-faq-q::after { content: "−"; }
.pb-faq-a { padding: 0 1.1rem; max-height: 0; overflow: hidden; transition: max-height .2s, padding .2s; }
.pb-faq-item.open .pb-faq-a { padding: .9rem 1.1rem; max-height: 1000px; }

.pb-callout { display: flex; gap: .9rem; margin: 1.5rem 0; padding: 1.1rem 1.2rem; border-radius: 12px;
    border-left: 5px solid var(--s1-main, #4f46e5); background: var(--s1-odd, #f8fafc); }
.pb-callout--warning { border-left-color: #f59e0b; }
.pb-callout--tip { border-left-color: #10b981; }
.pb-callout-icon { font-size: 1.5rem; line-height: 1; }
.pb-callout-title { font-weight: 800; margin: 0 0 .3rem; }
.pb-callout-body { margin: 0; }

.pb-toc { margin: 1.5rem 0; padding: 1rem 1.2rem; border: 1px solid var(--s1-liseret, #e5e7eb);
    border-radius: 12px; background: var(--s1-odd, #f8fafc); }
.pb-toc-title { font-weight: 800; margin: 0 0 .5rem; }
.pb-toc ul { margin: 0; padding-left: 1.1rem; }
.pb-toc a { text-decoration: none; }
.pb-toc .pb-toc-h3 { padding-left: 1rem; font-size: .92rem; }

/* ── Image à la une (en-tête d'article) ────────────────────── */
.s1-article-hero { margin: 0 0 1.5rem; }
.s1-article-hero img { width: 100%; height: auto; max-height: 420px; object-fit: cover;
    border-radius: 14px; display: block; }
/* Image à la une non panoramique : à droite du bloc introduction. */
.s1-article-intro-grid { display: grid; grid-template-columns: 1fr minmax(0, 38%); gap: 1.5rem;
    align-items: center; margin-bottom: 1.5rem; }
.s1-article-intro-grid .s1-article-intro { margin-bottom: 0; }
.s1-article-intro-img { margin: 0; }
.s1-article-intro-img img { width: 100%; height: auto; border-radius: 14px; display: block; }
@media (max-width: 860px) { .s1-article-intro-grid { grid-template-columns: 1fr; } }

/* ── Citation ──────────────────────────────────────────────── */
.pb-quote { margin: 1.8rem 0; padding: 1rem 1.4rem; border-left: 4px solid var(--s1-main, #4f46e5);
    background: var(--s1-odd, #f8fafc); border-radius: 0 12px 12px 0; }
.pb-quote-text { margin: 0; font-size: 1.15rem; font-style: italic; color: var(--s1-text, #1f2937); }
.pb-quote-author { margin-top: .5rem; font-weight: 700; color: var(--s1-main, #4f46e5); }
.pb-quote-author::before { content: "— "; }

/* ── Chiffres-clés ─────────────────────────────────────────── */
.pb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin: 1.8rem 0; }
.pb-stat { text-align: center; padding: 1.2rem 1rem; border: 1px solid var(--s1-liseret, #e5e7eb);
    border-radius: 14px; background: #fff; }
.pb-stat-value { font-size: 2rem; font-weight: 800; line-height: 1.1; color: var(--s1-main, #4f46e5); }
.pb-stat-label { margin-top: .4rem; font-size: .9rem; color: #64748b; }

/* ── Étapes ────────────────────────────────────────────────── */
.pb-steps { margin: 1.8rem 0; }
.pb-steps-title { font-weight: 800; margin: 0 0 .6rem; }
.pb-steps-list { list-style: none; counter-reset: pb-step; margin: 0; padding: 0; }
.pb-steps-list li { counter-increment: pb-step; position: relative; padding: .6rem 0 .6rem 3rem; }
.pb-steps-list li::before { content: counter(pb-step); position: absolute; left: 0; top: .5rem;
    width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center;
    background: var(--s1-main, #4f46e5); color: #fff; border-radius: 50%; font-weight: 800; }

/* ── Avantages / inconvénients ─────────────────────────────── */
.pb-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.8rem 0; }
.pb-proscons .pb-pros, .pb-proscons .pb-cons { padding: 1.1rem 1.2rem; border-radius: 12px; border: 1px solid var(--s1-liseret, #e5e7eb); }
.pb-proscons .pb-pros { background: #f0fdf4; border-color: #bbf7d0; }
.pb-proscons .pb-cons { background: #fef2f2; border-color: #fecaca; }
.pb-proscons-title { font-weight: 800; margin: 0 0 .5rem; }
.pb-proscons .pb-pros .pb-proscons-title { color: #16a34a; }
.pb-proscons .pb-cons .pb-proscons-title { color: #dc2626; }
.pb-proscons ul { margin: 0; padding-left: 1.1rem; }
.pb-proscons li { margin-bottom: .3rem; }
@media (max-width: 860px) { .pb-proscons { grid-template-columns: 1fr; } }

/* ── Tableaux (contenu) — reprend la charte couleur du site ──── */
.pb-table-wrap { overflow-x: auto; margin: 1.5rem 0; }
.s1-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .95rem;
    border: 1px solid var(--s1-liseret, #e5e7eb); }
.pb-table-wrap table { margin: 0; }
.s1-content table th { background: var(--s1-main, #4f46e5); color: #fff; text-align: left;
    padding: .7rem .9rem; font-weight: 700; border: 1px solid var(--s1-main, #4f46e5); }
.s1-content table td { padding: .65rem .9rem; border: 1px solid var(--s1-liseret, #e5e7eb); }
.s1-content table tbody tr:nth-child(even) { background: var(--s1-odd, #f8fafc); }
/* 1ʳᵉ colonne = libellés de ligne, mis en valeur */
.s1-content table tbody td:first-child { font-weight: 700; color: var(--s1-text, #1f2937); }

/* ── Footer ────────────────────────────────────────────────── */
.s1-footer { background: var(--s1-nav, #1e293b); color: #cbd5e1; margin-top: 3rem; padding: 2rem 0; }
.s1-footer-brand { font-weight: 800; font-size: 1.1rem; color: #fff; }
.s1-footer-nav { display: flex; gap: 1.2rem; margin: .6rem 0; }
.s1-footer-nav a { color: #cbd5e1; text-decoration: none; }
.s1-footer-legal { font-size: .85rem; color: #94a3b8; }
.s1-empty { text-align: center; color: #64748b; padding: 3rem 0; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 860px) {
    .s1-burger { display: flex; }
    .s1-nav { display: none; position: absolute; top: 70px; left: 0; right: 0; background: var(--s1-header-bg, #fff);
        flex-direction: column; gap: 0; padding: .5rem 1.25rem 1rem; box-shadow: 0 10px 20px rgba(0,0,0,.1); }
    .s1-nav--open { display: flex; }
    .s1-nav a { padding: .8rem 0; border-bottom: 1px solid var(--s1-liseret, #e5e7eb); font-size: 1rem; }
    .s1-brand-slogan { display: none; }
    .s1-featured { grid-template-columns: 1fr; }
    .s1-grid { grid-template-columns: 1fr; }
    /* Magazine : une seule colonne, héros non étendu (pas de débordement). */
    .s1-mag { grid-template-columns: 1fr; grid-auto-rows: 210px; }
    .s1-mag .s1-card--big { grid-column: auto; grid-row: span 2; }
    .s1-hero h1 { font-size: 1.8rem; }
}