/* ===================================================================== SENTHAI Article Template — mise en page « article ressource » Valeurs relevées sur la page de référence (1440 px) : bandeau : padding 36px 120px · 2 colonnes (titre+texte / image 628x355) titre 38px/46px ExtraBold #090c14 · description 16px/22px #54545c bouton #090c14 / blanc, 49px, rayon 8px · méta 14px #7d7d85 corps : conteneur 1360px, colonne de lecture 676px, partage 48px à gauche h2 28px/700 (24px/800 ≤1520) · h3 24px/700 (22px/800 ≤1520) cartes 176px, rayon 12px, fond #f4f7fb ===================================================================== */ body.sat-post { --sat-font-title: 'Albert Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --sat-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --sat-ink: #54545c; --sat-ink-strong: #090c14; --sat-heading: #2b2b36; /* Couleurs de marque du site (Flatsome) : doré #e5b930 + orange #e5892e */ --sat-brand: #e5b930; --sat-brand-dark: #cfa213; --sat-accent: #e5892e; --sat-accent-dark: #c9741e; --sat-link: #a85f10; --sat-muted: #7d7d85; --sat-crumb: #9f9fa2; --sat-card-bg: #f4f7fb; --sat-share-bg: #f2f6fa; } /* ---------- on masque le bandeau de titre du thème ---------- */ body.sat-post .page-title, body.sat-post .page-header-wrapper { display: none !important; } /* ---------- colonne unique ---------- */ body.sat-post.sat-hide-sidebar .blog-single .row-large { max-width: 100% !important; margin: 0 !important; padding: 0 !important; } body.sat-post.sat-hide-sidebar .blog-single .large-9 { flex-basis: 100% !important; max-width: 100% !important; width: 100% !important; padding: 0 !important; } body.sat-post.sat-hide-sidebar .blog-single .large-3 { display: none !important; } body.sat-post .blog-single .row-divided > .col:first-child { border: 0 !important; } body.sat-post .entry-content { margin: 0 !important; padding: 0 !important; } body.sat-post .entry-content > .sat-outer { margin: 0 !important; } /* barre latérale visible : on garde la grille du thème (contenu + colonne) */ body.sat-post.sat-with-sidebar .blog-single .large-9 { padding-right: 40px !important; } /* ---------- barre de navigation collante (comme la page de référence) ---------- */ body.sat-post #header.header, body.sat-post #masthead { position: sticky !important; top: 0; z-index: 99; background: #fff; } body.sat-post.admin-bar #header.header, body.sat-post.admin-bar #masthead { top: 32px; } /* ---------- pied d'article du thème : catégories + navigation, alignés sur le contenu ---------- */ body.sat-post .post-navigation, body.sat-post .inside-article > .entry-meta { max-width: 1600px; margin: 32px auto 0; padding: 0 120px; box-sizing: border-box; } body.sat-post .entry-meta .post-navigation { max-width: 100%; margin: 10px 0 0; padding: 0; } body.sat-post.sat-with-sidebar .post-navigation, body.sat-post.sat-with-sidebar .inside-article > .entry-meta { max-width: 100%; padding: 0; } body.sat-post .entry-meta .cat-links { display: block; margin: 0; font-family: 'Inter', sans-serif; font-size: 14px; line-height: 20px; color: #7d7d85; } body.sat-post .entry-meta .cat-links .icon-categories { margin-right: 6px; } body.sat-post .entry-meta .cat-links a { color: var(--sat-accent-dark) !important; } /* Flatsome : pied d'article + navigation « précédent / suivant » */ body.sat-post .article-inner > footer.entry-meta, body.sat-post .article-inner .entry-meta, body.sat-post nav#nav-below.navigation-post, body.sat-post .navigation-post { max-width: 1600px; margin: 32px auto 0; padding: 0 120px; box-sizing: border-box; } body.sat-post nav#nav-below.navigation-post { margin-top: 16px; } body.sat-post .navigation-post .flex-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; } body.sat-post .navigation-post a { color: #16161d !important; text-decoration: none !important; } body.sat-post .navigation-post a:hover { color: var(--sat-accent-dark) !important; } @media (max-width: 1320px) { body.sat-post .article-inner > footer.entry-meta, body.sat-post .article-inner .entry-meta, body.sat-post nav#nav-below.navigation-post, body.sat-post .navigation-post { padding: 0 60px; } } @media (max-width: 1024px) { body.sat-post .article-inner > footer.entry-meta, body.sat-post .article-inner .entry-meta, body.sat-post nav#nav-below.navigation-post, body.sat-post .navigation-post { padding: 0 40px; } } @media (max-width: 640px) { body.sat-post .article-inner > footer.entry-meta, body.sat-post .article-inner .entry-meta, body.sat-post nav#nav-below.navigation-post, body.sat-post .navigation-post { padding: 0 24px; } } body.sat-post .post-navigation .nav-links { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid #e4e5e7; padding-top: 24px; } body.sat-post .post-navigation a { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border: 1px solid #e4e5e7; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; line-height: 20px; color: #16161d !important; text-decoration: none !important; transition: border-color .2s ease, color .2s ease; } body.sat-post .post-navigation a:hover { border-color: var(--sat-brand); color: var(--sat-accent-dark) !important; } @media (max-width: 1320px) { body.sat-post .post-navigation, body.sat-post .inside-article > .entry-meta { padding: 0 60px; } } @media (max-width: 1024px) { body.sat-post .post-navigation, body.sat-post .inside-article > .entry-meta { padding: 0 40px; } } @media (max-width: 640px) { body.sat-post .post-navigation, body.sat-post .inside-article > .entry-meta { padding: 0 24px; } } /* ---------- conteneur (1360 px utiles + 120 px de marge) ---------- */ .sat-outer { width: 100%; } .sat-wrap { max-width: 1600px; margin: 0 auto; padding: 0 120px; box-sizing: border-box; } /* ===================================================================== BANDEAU ===================================================================== */ /* bandeau : pleine largeur (bord à bord), fond légèrement teinté bleu/violet */ .sat-hero { margin: 0; padding: 18px 0 64px; border-radius: 0; border-bottom: 1px solid #e3eaf7; background: linear-gradient(135deg, #eef4ff 0%, #f2efff 55%, #f6f2ff 100%); width: 100%; } .sat-hero .sat-wrap { max-width: 1600px; margin: 0 auto; padding: 0 120px; box-sizing: border-box; } .sat-crumbs { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 18px; font-family: var(--sat-font-body); font-size: 14px; font-weight: 600; line-height: 20px; } body.sat-post .sat-crumbs, body.sat-post .sat-crumbs a { color: #9f9fa2 !important; text-decoration: none; } body.sat-post .sat-crumbs a:hover { color: var(--sat-accent-dark) !important; } .sat-crumbs .sat-sep { margin: 0 6px; opacity: .75; } .sat-crumbs span[aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 480px; } .sat-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px; align-items: center; } body.sat-post h1.sat-title { margin: 0 0 16px; font-family: var(--sat-font-title) !important; font-size: 38px !important; font-weight: 800 !important; line-height: 46px !important; letter-spacing: -0.02em; color: #090c14 !important; } body.sat-post .sat-desc { margin: 0 0 24px; font-family: var(--sat-font-title) !important; font-size: 16px !important; font-weight: 400 !important; line-height: 22px !important; color: #54545c !important; } .sat-cover { margin: 0; } .sat-cover img { display: block; width: 100%; height: auto; aspect-ratio: 628 / 355; object-fit: cover; border-radius: 0; } /* bouton d'appel à l'action (même style que la page de référence) */ .sat-cta a { display: inline-flex; align-items: center; gap: 8px; min-height: 49px; padding: 0 24px; border-radius: 8px; background: var(--sat-ink-strong); color: #ffffff !important; font-family: var(--sat-font-title) !important; font-size: 16px !important; font-weight: 600 !important; line-height: 22px !important; text-decoration: none !important; border: 0; transition: background .2s ease, transform .2s ease; } .sat-cta a:hover { background: #1f2430; color: #ffffff !important; transform: translateY(-1px); } .sat-cta a svg { width: 14px; height: 14px; } .sat-tip { margin: 12px 0 0; font-family: var(--sat-font-title); font-size: 14px; line-height: 20px; color: #7d7d85; } body.sat-post .sat-meta { display: flex; flex-wrap: wrap; align-items: center; margin: 20px 0 0; font-family: var(--sat-font-title) !important; font-size: 14px !important; line-height: 20px !important; color: #7d7d85 !important; } body.sat-post .sat-meta a { color: #7d7d85 !important; text-decoration: none; } body.sat-post .sat-meta a:hover { color: var(--sat-accent-dark) !important; } .sat-meta span + span::before { content: '·'; margin: 0 8px; } /* ===================================================================== CORPS : rail de partage + colonne de lecture ===================================================================== */ .sat-body { margin-top: 30px; display: grid; grid-template-columns: 48px minmax(0, 676px) 320px; column-gap: 60px; align-items: start; } .sat-share { position: sticky; top: 100px; width: 48px; } .sat-share-list { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; } .sat-share-list a { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 8px; background: #f2f6fa; color: #6b7480; text-decoration: none; transition: background .25s ease, color .25s ease; } .sat-share-list a:hover { background: var(--sat-brand); color: #1c1c1c; } .sat-share-list svg { width: 18px; height: 18px; fill: currentColor; } .sat-article { max-width: 676px; overflow: hidden; } body.sat-post .sat-article { font-family: var(--sat-font-body) !important; } body.sat-post .sat-article > *:first-child { margin-top: 0; } body.sat-post .sat-article p { margin: 0; padding-top: 6px; font-family: var(--sat-font-title) !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1.33 !important; color: #54545c !important; } body.sat-post .sat-article h2 { margin: 0; padding-top: 60px; font-family: var(--sat-font-title) !important; font-size: 28px !important; font-weight: 700 !important; line-height: 140% !important; color: #2b2b36 !important; } body.sat-post .sat-article h3 { margin: 0; padding-top: 32px; font-family: var(--sat-font-title) !important; font-size: 24px !important; font-weight: 700 !important; line-height: 140% !important; color: #2b2b36 !important; } body.sat-post .sat-article h4 { margin: 0; padding-top: 24px; font-family: var(--sat-font-title) !important; font-size: 20px !important; font-weight: 700 !important; line-height: 140% !important; color: #2b2b36 !important; } body.sat-post .sat-article a { color: var(--sat-link) !important; text-decoration: underline; text-underline-offset: 2px; } body.sat-post .sat-article a:hover { color: var(--sat-accent) !important; } body.sat-post .sat-article strong { color: #2b2b36; font-weight: 700; } body.sat-post .sat-article ul, body.sat-post .sat-article ol { margin: 6px 0 0; padding-left: 26px; } body.sat-post .sat-article li { padding-top: 4px; font-family: var(--sat-font-title) !important; font-size: 18px !important; line-height: 1.33 !important; color: #54545c !important; } body.sat-post .sat-article ul li::marker { color: var(--sat-accent); } body.sat-post .sat-article ol li::marker { color: var(--sat-accent); font-weight: 700; } body.sat-post .sat-article img { width: 100%; height: auto; border-radius: 16px; margin: 24px 0; } body.sat-post .sat-article figure { margin: 24px 0; } body.sat-post .sat-article figcaption { margin-top: 8px; font-family: var(--sat-font-body); font-size: 13px; color: #7d7d85; text-align: center; } body.sat-post .sat-article blockquote { margin: 24px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--sat-brand); font-family: var(--sat-font-title); font-size: 18px; color: #54545c; } body.sat-post .sat-article table { width: 100%; border-collapse: collapse; margin: 24px 0; font-family: var(--sat-font-body); font-size: 15px; } body.sat-post .sat-article th, body.sat-post .sat-article td { border: 1px solid #e4e5e7; padding: 10px 12px; text-align: left; color: #54545c; } body.sat-post .sat-article th { background: #f4f5f5; color: #2b2b36; font-weight: 600; } /* sommaire (plugin LuckyWP) accordé au style */ body.sat-post .sat-article .lwptoc { background: #fdf9ee; border: 1px solid #f3e4c2; border-radius: 12px; padding: 18px 22px; margin: 26px 0; font-family: var(--sat-font-body); } body.sat-post .sat-article .lwptoc .lwptoc_title { font-family: var(--sat-font-title); font-size: 18px; font-weight: 800; color: #2b2b36; } body.sat-post .sat-article .lwptoc a { color: #54545c !important; text-decoration: none; } body.sat-post .sat-article .lwptoc a:hover { color: var(--sat-accent-dark) !important; } /* ===================================================================== CARTES « articles liés » + bouton de bas de page ===================================================================== */ .sat-cards { margin: 88px 0 0; } body.sat-post .sat-cards h2 { margin: 0 0 20px; font-family: var(--sat-font-title) !important; font-size: 24px !important; font-weight: 800 !important; line-height: 140% !important; color: #2b2b36 !important; } .sat-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, 176px); gap: 20px; } .sat-card { display: block; width: 176px; background: #f4f7fb; border-radius: 12px; overflow: hidden; padding-bottom: 12px; text-decoration: none !important; transition: transform .25s ease, box-shadow .25s ease; } .sat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(20, 40, 60, .08); } .sat-card-img { display: block; width: 176px; height: 117px; object-fit: cover; background: #e8eef5; } .sat-card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 12px 12px 4px; font-family: var(--sat-font-body) !important; font-size: 14px !important; font-weight: 500 !important; line-height: 18.2px !important; color: #000 !important; } .sat-card-sub { display: block; margin: 0 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--sat-font-body) !important; font-size: 12px !important; font-weight: 400 !important; line-height: 15.6px !important; color: rgba(28, 40, 61, .5) !important; } .sat-footer-cta { margin: 36px 0 0; } /* ===================================================================== COLONNE DE DROITE : articles recommandés (même principe que la page de référence : 320 px, collante) ===================================================================== */ .sat-recommend { position: sticky; top: 100px; } body.sat-post .sat-recommend-title { margin: 0 0 18px; font-family: var(--sat-font-title) !important; font-size: 24px !important; font-weight: 800 !important; line-height: 130% !important; color: #2b2b36 !important; } .sat-recommend-list { display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 0; list-style: none; } .sat-recommend-list li { margin: 0; } .sat-recommend-list a { display: flex; gap: 12px; align-items: flex-start; text-decoration: none !important; } .sat-recommend-list img { flex: 0 0 76px; width: 76px; height: 57px; object-fit: cover; border-radius: 8px; background: #e8eef5; } .sat-recommend-text { display: block; } .sat-recommend-post { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--sat-font-body) !important; font-size: 15px !important; font-weight: 500 !important; line-height: 20px !important; color: #16161d !important; } .sat-recommend-list a:hover .sat-recommend-post { color: var(--sat-accent-dark) !important; } .sat-recommend-meta { display: block; margin-top: 4px; font-family: var(--sat-font-body) !important; font-size: 12px !important; font-weight: 400 !important; line-height: 16px !important; color: #7d7d85 !important; } /* ===================================================================== Quand la barre latérale du thème est affichée, la colonne de lecture est plus étroite : on adapte les marges et le bandeau. ===================================================================== */ body.sat-post.sat-with-sidebar .sat-wrap { max-width: 100%; padding: 0; } body.sat-post.sat-with-sidebar .sat-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; } body.sat-post.sat-with-sidebar .sat-cover { order: -1; } body.sat-post.sat-with-sidebar .sat-body { grid-template-columns: 44px minmax(0, 1fr); column-gap: 32px; } body.sat-post.sat-with-sidebar .sat-article { max-width: 100%; } /* ===================================================================== Paliers d'écran (identiques à la page de référence) ===================================================================== */ @media (max-width: 1520px) { body.sat-post .sat-article h2 { font-size: 24px !important; font-weight: 800 !important; padding-top: 52px; } body.sat-post .sat-article h3 { font-size: 22px !important; font-weight: 800 !important; padding-top: 28px; } } @media (max-width: 1320px) { .sat-wrap { padding: 0 60px; } .sat-hero .sat-wrap { padding: 0 60px; } .sat-body { grid-template-columns: 40px minmax(0, 1fr) 280px; column-gap: 40px; } .sat-share { width: 40px; } .sat-share-list { gap: 12px; } .sat-share-list a { width: 40px; height: 40px; border-radius: 6px; } .sat-share-list svg { width: 16px; height: 16px; } } @media (max-width: 1024px) { .sat-wrap { padding: 0 40px; } .sat-hero { padding: 14px 0 44px; } .sat-hero .sat-wrap { padding: 0 40px; } body.sat-post h1.sat-title { font-size: 30px !important; line-height: 38px !important; } .sat-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } .sat-cover { order: -1; } .sat-body { grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: 32px; } .sat-share { position: static; width: auto; margin: 0; } .sat-share-list { flex-direction: row; flex-wrap: wrap; gap: 10px; } .sat-article { max-width: 100%; } .sat-recommend { position: static; } .sat-recommend-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } body.sat-post .sat-article h2 { font-size: 22px !important; padding-top: 40px; } body.sat-post .sat-article h3 { font-size: 20px !important; padding-top: 20px; } body.sat-post .sat-article p, body.sat-post .sat-article li { font-size: 17px !important; } .sat-cards-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .sat-card, .sat-card-img { width: 100%; } } @media (max-width: 640px) { .sat-wrap { padding: 0 24px; } .sat-hero { padding: 12px 0 34px; } .sat-hero .sat-wrap { padding: 0 24px; } .sat-body { margin-top: 22px; } body.sat-post h1.sat-title { font-size: 26px !important; line-height: 33px !important; } body.sat-post .sat-article h2 { font-size: 21px !important; padding-top: 34px; } body.sat-post .sat-article h3 { font-size: 19px !important; padding-top: 18px; } body.sat-post .sat-article p, body.sat-post .sat-article li { font-size: 16px !important; } .sat-cards { margin-top: 56px; } .sat-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .sat-cta a { width: 100%; justify-content: center; } } /* ===================================================================== PRIORITÉ — beaucoup de sites ajoutent dans une