.blog-hero { padding: var(--sp-12) 0 var(--sp-8); background: linear-gradient(175deg, var(--clr-navy-900) 0%, var(--clr-navy-800) 60%, var(--c-bg) 100%); color: var(--clr-white); position: relative; overflow: hidden; } .blog-hero::before { content: ''; position: absolute; top: -50%; right: -20%; width: 60%; height: 200%; background: radial-gradient(ellipse, rgba(var(--clr-accent-500-rgb), 0.08) 0%, transparent 70%); pointer-events: none; } .blog-hero__titre { font-size: var(--text-4xl); font-weight: var(--font-extrabold); line-height: 1.1; letter-spacing: -0.02em; max-width: 22ch; margin-bottom: var(--sp-4); color: var(--clr-white); } .blog-hero__titre em, .blog-hero__titre .hero__accent { color: var(--clr-accent-400); font-style: normal; } .blog-hero__lead { font-size: var(--text-lg); color: var(--clr-navy-200); max-width: 56ch; line-height: var(--leading-relaxed); } .blog-hero .fil-ariane__lien { color: var(--clr-navy-200); } .blog-hero .fil-ariane__lien:hover { color: var(--clr-accent-400); } .blog-hero .fil-ariane__actuel { color: var(--clr-navy-100); } .blog-hero .fil-ariane__item:not(:last-child)::after { color: var(--clr-navy-400); } .blog-grid { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; } .blog-card { display: flex; flex-direction: column; background: var(--c-bg-elevated); border: 1px solid var(--c-border-soft); border-radius: var(--r-2xl); padding: var(--sp-6); position: relative; overflow: hidden; transition: transform 0.25s cubic-bezier(0.33, 1, 0.68, 1), box-shadow 0.3s ease, border-color 0.3s ease; } .blog-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--c-accent); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } .blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg), 0 8px 32px rgba(var(--clr-accent-500-rgb), 0.08); border-color: var(--c-border-h); } .blog-card:hover::before { transform: scaleX(1); } .blog-card__tag { display: inline-block; width: fit-content; font-size: var(--text-xs); font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: 0.08em; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-full); margin-bottom: var(--sp-4); } .blog-card__tag--budget { background: rgba(var(--clr-accent-500-rgb), 0.12); color: var(--c-accent-text); } .blog-card__tag--technologie { background: rgba(var(--clr-navy-900-rgb), 0.08); color: var(--clr-navy-700); } .blog-card__tag--visibilite { background: rgba(var(--clr-success-600-rgb), 0.1); color: var(--clr-success-600); } .blog-card__tag--problemes { background: rgba(var(--clr-error-600-rgb), 0.08); color: var(--clr-error-600); } [data-theme="sombre"] .blog-card__tag--technologie { color: var(--clr-navy-300); } [data-theme="sombre"] .blog-card__tag--budget { color: var(--clr-accent-400); } [data-theme="sombre"] .blog-card__tag--visibilite { color: var(--clr-success-400); } [data-theme="sombre"] .blog-card__tag--problemes { color: var(--clr-error-400); } .blog-card__title { font-size: var(--text-xl); font-weight: var(--font-bold); line-height: var(--leading-tight); margin-bottom: var(--sp-3); } .blog-card__title a { color: var(--c-primary); text-decoration: none; transition: color 0.2s ease; } .blog-card__title a:hover { color: var(--c-accent); } .blog-card__excerpt { font-size: var(--text-sm); color: var(--c-text-soft); line-height: var(--leading-relaxed); margin-bottom: var(--sp-5); flex: 1; } .blog-card__meta { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-xs); color: var(--c-text-faint); margin-top: auto; padding-top: var(--sp-4); border-top: 1px solid var(--c-border-soft); } .blog-card__meta svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.6; } .blog-card--featured { grid-column: 1 / -1; } @media (min-width: 40em) { .blog-card--featured { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: center; } } .article-page { padding-top: var(--sp-8); padding-bottom: var(--sp-12); } .article-header { margin-bottom: var(--sp-8); position: relative; } .article-titre { max-width: 24ch; font-size: var(--text-3xl); font-weight: var(--font-extrabold); line-height: 1.15; letter-spacing: -0.02em; margin-top: var(--sp-4); text-wrap: balance; } .article-meta { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--text-sm); color: var(--c-text-faint); } .article-meta__separator { width: 4px; height: 4px; border-radius: var(--r-full); background: var(--c-text-faint); opacity: 0.4; } .progress-lecture { position: fixed; top: 0; left: 0; height: 3px; background: var(--c-accent); z-index: 200; transition: width 0.1s linear; } .article-layout { display: grid; gap: var(--sp-8); grid-template-columns: 1fr; } .article-corps { max-width: 70ch; margin-inline: auto; width: 100%; } .toc { display: none; } @media (min-width: 64em) { .article-layout { grid-template-columns: 200px minmax(0, 1fr); gap: var(--sp-10); align-items: start; } .toc { display: block; position: sticky; top: 6rem; padding: var(--sp-5); background: var(--c-bg-elevated); border: 1px solid var(--c-border-soft); border-radius: var(--r-xl); font-size: var(--text-sm); max-height: calc(100vh - 8rem); overflow-y: auto; } .toc__title { font-size: var(--text-xs); font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-text-faint); margin-bottom: var(--sp-3); } .toc__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-1); } .toc__link { display: block; padding: var(--sp-1) var(--sp-2); color: var(--c-text-soft); text-decoration: none; border-radius: var(--r-sm); font-size: var(--text-xs); line-height: var(--leading-normal); transition: color 0.15s ease, background 0.15s ease; } .toc__link:hover, .toc__link--actif { color: var(--c-accent); background: var(--c-accent-bg); } .toc__link--h3 { padding-left: var(--sp-5); } .article-corps { margin-inline: 0; } } @media (min-width: 90em) { .article-layout { grid-template-columns: 240px minmax(0, 1fr); } .article-corps { max-width: 72ch; } } .article-corps h2 { font-size: var(--text-xl); font-weight: var(--font-extrabold); line-height: var(--leading-tight); color: var(--c-primary); margin-top: var(--sp-12); margin-bottom: var(--sp-4); text-wrap: balance; scroll-margin-top: 5rem; } .article-corps h2::after { content: ''; display: block; width: 3rem; height: 3px; background: var(--c-accent); margin-top: var(--sp-3); border-radius: var(--r-full); } .article-corps h3 { font-size: var(--text-lg); font-weight: var(--font-bold); line-height: var(--leading-tight); color: var(--c-primary); margin-top: var(--sp-8); margin-bottom: var(--sp-3); text-wrap: balance; scroll-margin-top: 5rem; } .article-corps p { margin-bottom: var(--sp-4); line-height: var(--leading-relaxed); color: var(--c-text); } .article-corps a { color: var(--c-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color 0.15s ease; } .article-corps a:hover { color: var(--c-link-h); } .article-corps ol, .article-corps ul { padding-left: var(--sp-5); margin-bottom: var(--sp-6); } .article-corps li { margin-bottom: var(--sp-3); line-height: var(--leading-relaxed); color: var(--c-text); } .article-corps li::marker { color: var(--c-accent); font-weight: var(--font-bold); } .article-corps strong { font-weight: var(--font-bold); color: var(--c-primary); } .article-corps code { font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.9em; background: var(--c-bg-alt); color: var(--c-accent-text); padding: 0.15em 0.4em; border-radius: var(--r-sm); } [data-theme="sombre"] .article-corps code { background: var(--c-bg-elevated); } .article-corps > p:first-of-type { font-size: var(--text-lg); color: var(--c-text-soft); line-height: var(--leading-relaxed); } .article-corps > p:first-of-type::first-letter { float: left; font-size: 4.5em; font-family: var(--font-heading); font-weight: var(--font-extrabold); line-height: 0.75; color: var(--c-accent); margin-right: 0.12em; padding-top: 0.04em; } .callout { padding: var(--sp-6); border-radius: var(--r-xl); margin: var(--sp-8) 0; position: relative; } .callout--retenir { background: rgba(var(--clr-accent-500-rgb), 0.06); border: 1px solid rgba(var(--clr-accent-500-rgb), 0.15); } .callout--retenir::before { content: 'À retenir'; display: block; font-size: var(--text-xs); font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-accent-text); margin-bottom: var(--sp-3); } .callout--astuce { background: rgba(var(--clr-success-600-rgb), 0.06); border: 1px solid rgba(var(--clr-success-600-rgb), 0.15); } .callout--astuce::before { content: 'Astuce'; display: block; font-size: var(--text-xs); font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--clr-success-600); margin-bottom: var(--sp-3); } .callout p:last-child { margin-bottom: 0; } [data-theme="sombre"] .callout--retenir { background: rgba(var(--clr-accent-500-rgb), 0.08); } [data-theme="sombre"] .callout--astuce { background: rgba(var(--clr-success-400-rgb), 0.06); } .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--sp-8) 0; border-radius: var(--r-xl); border: 1px solid var(--c-border-soft); } .comparison-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); line-height: var(--leading-normal); } .comparison-table thead { background: var(--c-primary); color: var(--clr-white); } .comparison-table thead th { padding: var(--sp-3) var(--sp-4); text-align: left; font-weight: var(--font-bold); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: none; white-space: nowrap; } .comparison-table tbody td { padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: 1px solid var(--c-border-soft); vertical-align: top; color: var(--c-text); } .comparison-table tbody tr:last-child td { border-bottom: none; } .comparison-table tbody tr:nth-child(even) { background: var(--c-bg-alt); } .comparison-table tbody tr:hover { background: rgba(var(--clr-accent-500-rgb), 0.06); } .comparison-table .row-highlight { background: rgba(var(--clr-accent-500-rgb), 0.08); font-weight: var(--font-semibold); } .comparison-table .row-highlight td { color: var(--c-accent-text); } [data-theme="sombre"] .comparison-table thead { background: var(--clr-navy-800); } [data-theme="sombre"] .comparison-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); } [data-theme="sombre"] .comparison-table tbody tr:hover { background: rgba(var(--clr-accent-500-rgb), 0.1); } .faq-item { border: 1px solid var(--c-border-soft); border-radius: var(--r-lg); margin-bottom: var(--sp-3); overflow: hidden; transition: border-color 0.2s ease; } .faq-item[open] { border-color: var(--c-border-h); } .faq-question { cursor: pointer; padding: var(--sp-4) var(--sp-5); font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--c-primary); list-style: none; line-height: var(--leading-tight); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); transition: color 0.15s ease, background 0.15s ease; } .faq-question::-webkit-details-marker { display: none; } .faq-question::after { content: '+'; font-size: var(--text-xl); font-weight: var(--font-regular); color: var(--c-accent); flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-full); background: var(--c-accent-bg); transition: transform 0.25s ease, background 0.2s ease; } .faq-item[open] .faq-question::after { content: '−'; background: var(--c-accent); color: var(--clr-white); } .faq-question:hover { color: var(--c-accent); background: var(--c-bg-alt); } .faq-reponse { padding: 0 var(--sp-5) var(--sp-5); color: var(--c-text-soft); line-height: var(--leading-relaxed); max-width: 65ch; } .article-cta { background: linear-gradient(135deg, var(--clr-navy-900), var(--clr-navy-800)); border-radius: var(--r-2xl); padding: var(--sp-10) var(--sp-8); text-align: center; margin-top: var(--sp-16); position: relative; overflow: hidden; } .article-cta::before { content: ''; position: absolute; top: -30%; right: -20%; width: 50%; height: 160%; background: radial-gradient(ellipse, rgba(var(--clr-accent-500-rgb), 0.1) 0%, transparent 70%); pointer-events: none; } .article-cta__titre { font-size: var(--text-2xl); font-weight: var(--font-extrabold); color: var(--clr-white); margin-bottom: var(--sp-3); position: relative; } .article-cta__texte { color: var(--clr-navy-200); max-width: 52ch; margin-inline: auto; margin-bottom: var(--sp-6); position: relative; } @media (min-width: 40em) { .blog-hero { padding: var(--sp-16) 0 var(--sp-10); } .blog-hero__titre { font-size: var(--text-5xl); max-width: 26ch; } .blog-hero__lead { font-size: var(--text-xl); } .blog-grid { grid-template-columns: repeat(2, 1fr); } .blog-card__title { font-size: var(--text-2xl); } .article-page { padding-top: var(--sp-10); padding-bottom: var(--sp-20); } .article-titre { font-size: var(--text-4xl); max-width: 28ch; } .article-header { margin-bottom: var(--sp-10); } .article-corps h2 { font-size: var(--text-2xl); } .article-corps h3 { font-size: var(--text-xl); } .comparison-table thead th, .comparison-table tbody td { padding: var(--sp-4) var(--sp-5); } .article-cta { padding: var(--sp-12) var(--sp-10); } .article-cta__titre { font-size: var(--text-3xl); } } @media (min-width: 64em) { .blog-hero { padding: var(--sp-20) 0 var(--sp-12); } .blog-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); } .blog-card { padding: var(--sp-8); } .article-page { padding-top: var(--sp-12); } .article-corps h2 { margin-top: var(--sp-16); } .comparison-table { font-size: var(--text-base); } } @media (min-width: 90em) { .blog-grid { grid-template-columns: repeat(3, 1fr); } .article-titre { font-size: var(--text-5xl); max-width: 30ch; } .article-corps > p:first-of-type { font-size: var(--text-xl); } } @media (prefers-reduced-motion: reduce) { .blog-card, .blog-card::before, .article-corps a, .faq-question, .faq-question::after, .progress-lecture { transition: none; } .blog-card:hover { transform: none; } .article-corps > p:first-of-type::first-letter { float: none; font-size: inherit; font-weight: inherit; color: inherit; margin: 0; padding: 0; line-height: inherit; } } .section--flush-top { padding-top: 0 !important; } .blog-hero + .section { padding-top: var(--sp-8); } .article-croises { margin-top: var(--sp-10); padding: var(--sp-6); background: var(--c-bg-alt); border: 1px solid var(--c-border-soft); border-radius: var(--r-xl); } .article-croises h2 { font-size: var(--text-sm); font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-text-faint); margin-bottom: var(--sp-4); } .article-croises ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); } .article-croises li { margin: 0; } .article-croises a { display: block; padding: var(--sp-3) var(--sp-4); font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--c-primary); text-decoration: none; border-radius: var(--r-md); transition: background var(--t-fast), color var(--t-fast); } .article-croises a:hover { background: var(--c-accent-bg); color: var(--c-accent-text); } [data-theme="sombre"] .article-croises { background: var(--c-bg-elevated); border-color: var(--c-border); } .article-auteur { margin-top: var(--sp-8); padding: var(--sp-5) var(--sp-6); border-top: 1px solid var(--c-border-soft); display: flex; flex-direction: column; gap: var(--sp-1); } .article-auteur__nom { font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--c-primary); margin: 0; } .article-auteur__nom a { color: inherit; text-decoration: none; } .article-auteur__nom a:hover { color: var(--c-accent); } .article-auteur__bio { font-size: var(--text-sm); color: var(--c-text-soft); line-height: var(--leading-relaxed); margin: 0; max-width: 60ch; } .article-auteur__bio a { color: var(--c-link); text-decoration: underline; text-underline-offset: 2px; } .section--inverse.cta-finale .section-titre, .section--inverse.cta-finale .section-accroche { color: var(--clr-white); } .section--inverse.cta-finale .section-accroche { opacity: 0.85; }