/*
 * atlas-magazine.css — Production CSS
 * Remplace le CDN Tailwind (développement uniquement)
 * Couverture exacte des classes utilisées dans les 5 templates Atlas Magazine
 */

/* ─── BASE ─── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body  { margin: 0; font-family: 'Inter', sans-serif; }
img, video { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; }
sup { font-size: 0.6em; vertical-align: super; }

/* Reset liens — pas de soulignement par défaut sauf dans le corps article */
a { color: inherit; text-decoration: none; }

/* Liens de navigation, header, footer, cards, breadcrumb, tags, TOC */
header a,
footer a,
nav a,
.article-card a,
.related-card,
h1 a, h2 a, h3 a,
.toc-link,
.filter-btn,
[class*="rounded-full"] a,
.breadcrumb a { text-decoration: none; }

/* Seuls les liens dans le corps de l'article restent soulignés */
.article-body a { text-decoration: underline; text-underline-offset: 3px; }

/* Sélection */
::selection { background-color: #00b8c0; color: #fff; }

/* ─── CSS VARIABLES ─── */
:root {
  --atlas-dark:   #0a254d;
  --atlas-cyan:   #00b8c0;
  --atlas-light:  #e6f8f9;
  --atlas-bg:     #fafafa;
  --atlas-surface:#f8fafc;

  --slate-50:  #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0;
  --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b;
  --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b;
}

/* ─── FONTS ─── */
.font-manrope { font-family: 'Manrope', sans-serif; }
.font-light    { font-weight: 300; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.font-extrabold{ font-weight: 800; }
.font-black    { font-weight: 900; }
.italic        { font-style: italic; }
.not-italic    { font-style: normal; }
.uppercase     { text-transform: uppercase; }
.whitespace-nowrap { white-space: nowrap; }

/* ─── FONT SIZES ─── */
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.text-\[12px\] { font-size: 12px; }
.text-\[13px\] { font-size: 13px; }
.text-\[14px\] { font-size: 14px; }
.text-\[15px\] { font-size: 15px; }
.text-xs   { font-size: 0.75rem;  line-height: 1rem; }
.text-sm   { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem;     line-height: 1.5rem; }
.text-lg   { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl   { font-size: 1.25rem;  line-height: 1.75rem; }
.text-2xl  { font-size: 1.5rem;   line-height: 2rem; }
.text-3xl  { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl  { font-size: 2.25rem;  line-height: 2.5rem; }
.text-5xl  { font-size: 3rem;     line-height: 1; }
.text-6xl  { font-size: 3.75rem;  line-height: 1; }
.text-7xl  { font-size: 4.5rem;   line-height: 1; }

/* ─── LINE HEIGHT ─── */
.leading-none    { line-height: 1; }
.leading-tight   { line-height: 1.25; }
.leading-snug    { line-height: 1.375; }
.leading-relaxed { line-height: 1.625; }
.leading-loose   { line-height: 2; }
.leading-\[1\.1\]  { line-height: 1.1; }
.leading-\[1\.15\] { line-height: 1.15; }
.leading-\[1\.25\] { line-height: 1.25; }
.leading-\[1\.4\]  { line-height: 1.4; }
.leading-\[1\.85\] { line-height: 1.85; }
.leading-\[1\.9\]  { line-height: 1.9; }

/* ─── LETTER SPACING ─── */
.tracking-tight   { letter-spacing: -0.025em; }
.tracking-wide    { letter-spacing: 0.025em; }
.tracking-wider   { letter-spacing: 0.05em; }
.tracking-widest  { letter-spacing: 0.1em; }
.tracking-\[\.2em\]  { letter-spacing: 0.2em; }
.tracking-\[\.05em\] { letter-spacing: 0.05em; }
.tracking-\[\.12em\] { letter-spacing: 0.12em; }

/* ─── TEXT ALIGN ─── */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* ─── TEXT COLORS ─── */
.text-white       { color: #fff; }
.text-slate-300   { color: var(--slate-300); }
.text-slate-400   { color: var(--slate-400); }
.text-slate-500   { color: var(--slate-500); }
.text-slate-600   { color: var(--slate-600); }
.text-slate-800   { color: var(--slate-800); }
.text-\[\#0a254d\]        { color: var(--atlas-dark); }
.text-\[\#00b8c0\]        { color: var(--atlas-cyan); }
.text-\[\#e6f8f9\]\/80    { color: rgba(230, 248, 249, 0.8); }
.text-\[\#00b8c0\]\/30    { color: rgba(0, 184, 192, 0.3); }

/* ─── BACKGROUND COLORS ─── */
.bg-white         { background-color: #fff; }
.bg-transparent   { background-color: transparent; }
.bg-slate-50      { background-color: var(--slate-50); }
.bg-slate-100     { background-color: var(--slate-100); }
.bg-slate-200     { background-color: var(--slate-200); }
.bg-slate-300     { background-color: var(--slate-300); }
.bg-slate-600     { background-color: var(--slate-600); }
.bg-\[\#0a254d\]      { background-color: var(--atlas-dark); }
.bg-\[\#00b8c0\]      { background-color: var(--atlas-cyan); }
.bg-\[\#e6f8f9\]      { background-color: var(--atlas-light); }
.bg-\[\#fafafa\]      { background-color: var(--atlas-bg); }
.bg-\[\#f8fafc\]      { background-color: var(--atlas-surface); }
.bg-\[\#0a254d\]\/10  { background-color: rgba(10, 37, 77, 0.1); }
.bg-\[\#0a254d\]\/20  { background-color: rgba(10, 37, 77, 0.2); }
.bg-\[\#0a254d\]\/50  { background-color: rgba(10, 37, 77, 0.5); }
.bg-\[\#00b8c0\]\/20  { background-color: rgba(0, 184, 192, 0.2); }
.bg-white\/10         { background-color: rgba(255, 255, 255, 0.1); }
.bg-white\/95         { background-color: rgba(255, 255, 255, 0.95); }
.bg-\[\#fafafa\]\/90  { background-color: rgba(250, 250, 250, 0.9); }

/* Background images (URL helpers) */
.bg-cover  { background-size: cover; }
.bg-center { background-position: center; }
.bg-no-repeat { background-repeat: no-repeat; }

/* Gradient */
.bg-gradient-to-t { background-image: linear-gradient(to top, var(--tw-gradient-stops)); }
.from-\[\#0a254d\] { --tw-gradient-from: var(--atlas-dark); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.via-\[\#0a254d\]\/50 { --tw-gradient-stops: var(--tw-gradient-from), rgba(10, 37, 77, 0.5), var(--tw-gradient-to, transparent); }
.to-transparent { --tw-gradient-to: transparent; }

/* ─── BORDER COLORS ─── */
.border-white      { border-color: #fff; }
.border-slate-100  { border-color: var(--slate-100); }
.border-slate-200  { border-color: var(--slate-200); }
.border-slate-300  { border-color: var(--slate-300); }
.border-\[\#0a254d\] { border-color: var(--atlas-dark); }
.border-\[\#00b8c0\] { border-color: var(--atlas-cyan); }
.border-\[\#e2e8f0\] { border-color: var(--slate-200); }
.border-white\/20  { border-color: rgba(255, 255, 255, 0.2); }

/* ─── BORDERS ─── */
.border    { border-width: 1px; border-style: solid; }
.border-2  { border-width: 2px; border-style: solid; }
.border-l-2 { border-left-width: 2px; border-left-style: solid; }
.border-t  { border-top-width: 1px; border-top-style: solid; }
.border-b  { border-bottom-width: 1px; border-bottom-style: solid; }
.border-y  { border-top-width: 1px; border-top-style: solid; border-bottom-width: 1px; border-bottom-style: solid; }
.border-dashed { border-style: dashed; }

/* ─── BORDER RADIUS ─── */
.rounded-none   { border-radius: 0; }
.rounded-sm     { border-radius: 0.125rem; }
.rounded        { border-radius: 0.25rem; }
.rounded-lg     { border-radius: 0.5rem; }
.rounded-xl     { border-radius: 0.75rem; }
.rounded-2xl    { border-radius: 1rem; }
.rounded-full   { border-radius: 9999px; }
.rounded-\[1\.5rem\] { border-radius: 1.5rem; }
.rounded-\[2rem\]    { border-radius: 2rem; }
.rounded-\[6px\]     { border-radius: 6px; }
.rounded-\[8px\]     { border-radius: 8px; }
.rounded-\[10px\]    { border-radius: 10px; }
.rounded-\[14px\]    { border-radius: 14px; }
.rounded-\[16px\]    { border-radius: 16px; }

/* ─── SHADOW ─── */
.shadow-sm  { box-shadow: 0 1px 2px 0 rgba(0,0,0,.05); }
.shadow     { box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1); }
.shadow-lg  { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); }
.shadow-xl  { box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); }

/* ─── DISPLAY ─── */
.block       { display: block; }
.hidden      { display: none; }
.flex        { display: flex; }
.inline-flex { display: inline-flex; }
.grid        { display: grid; }

/* ─── FLEX ─── */
.flex-col    { flex-direction: column; }
.flex-row    { flex-direction: row; }
.flex-wrap   { flex-wrap: wrap; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-grow   { flex-grow: 1; }
.flex-1      { flex: 1 1 0%; }

/* ─── ALIGN / JUSTIFY ─── */
.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.items-baseline { align-items: baseline; }
.justify-start  { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-between{ justify-content: space-between; }
.justify-end    { justify-content: flex-end; }
.self-start     { align-self: flex-start; }

/* ─── GRID ─── */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ─── GAP ─── */
.gap-1\.5 { gap: 0.375rem; }
.gap-2    { gap: 0.5rem; }
.gap-3    { gap: 0.75rem; }
.gap-4    { gap: 1rem; }
.gap-5    { gap: 1.25rem; }
.gap-6    { gap: 1.5rem; }
.gap-8    { gap: 2rem; }
.gap-10   { gap: 2.5rem; }
.gap-12   { gap: 3rem; }
.gap-16   { gap: 4rem; }
.gap-x-10 { column-gap: 2.5rem; }
.gap-y-16 { row-gap: 4rem; }

/* ─── SPACE Y ─── */
.space-y-5 > * + * { margin-top: 1.25rem; }

/* ─── POSITION ─── */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }

/* ─── INSET / PLACEMENT ─── */
.inset-0  { top: 0; right: 0; bottom: 0; left: 0; }
.top-0    { top: 0; }
.right-0  { right: 0; }
.bottom-0 { bottom: 0; }
.left-0   { left: 0; }
.top-4    { top: 1rem; }
.left-4   { left: 1rem; }
.top-\[80px\]  { top: 80px; }
.top-\[100px\] { top: 100px; }

/* ─── Z-INDEX ─── */
.z-10  { z-index: 10; }
.z-20  { z-index: 20; }
.z-40  { z-index: 40; }
.z-50  { z-index: 50; }
.z-100 { z-index: 100; }

/* ─── OVERFLOW ─── */
.overflow-hidden   { overflow: hidden; }
.overflow-x-auto   { overflow-x: auto; }
.overflow-y-auto   { overflow-y: auto; }

/* ─── SIZING — WIDTH ─── */
.w-1     { width: 0.25rem; }
.w-4     { width: 1rem; }
.w-5     { width: 1.25rem; }
.w-7     { width: 1.75rem; }
.w-8     { width: 2rem; }
.w-9     { width: 2.25rem; }
.w-10    { width: 2.5rem; }
.w-12    { width: 3rem; }
.w-14    { width: 3.5rem; }
.w-full  { width: 100%; }
.w-1\/2  { width: 50%; }
.w-2\/5  { width: 40%; }
.w-3\/5  { width: 60%; }
.w-px    { width: 1px; }
.w-8     { width: 2rem; }
.w-\[80px\]  { width: 80px; }
.w-\[200px\] { width: 200px; }
.w-\[280px\] { width: 280px; }
.w-\[500px\] { width: 500px; }

/* ─── SIZING — HEIGHT ─── */
.h-1     { height: 0.25rem; }
.h-4     { height: 1rem; }
.h-5     { height: 1.25rem; }
.h-7     { height: 1.75rem; }
.h-9     { height: 2.25rem; }
.h-10    { height: 2.5rem; }
.h-11    { height: 2.75rem; }
.h-12    { height: 3rem; }
.h-14    { height: 3.5rem; }
.h-20    { height: 5rem; }
.h-full  { height: 100%; }
.h-px    { height: 1px; }
.h-\[60px\]  { height: 60px; }
.h-\[280px\] { height: 280px; }
.h-\[360px\] { height: 360px; }
.h-\[500px\] { height: 500px; }
.h-\[600px\] { height: 600px; }
.min-h-\[300px\] { min-height: 300px; }

/* ─── SIZING — MAX WIDTH ─── */
.max-w-xs  { max-width: 20rem; }
.max-w-sm  { max-width: 24rem; }
.max-w-md  { max-width: 28rem; }
.max-w-xl  { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-7xl { max-width: 80rem; }

/* ─── ASPECT RATIO ─── */
.aspect-\[4\/3\]   { aspect-ratio: 4 / 3; }
.aspect-\[4\/5\]   { aspect-ratio: 4 / 5; }
.aspect-\[16\/9\]  { aspect-ratio: 16 / 9; }
.aspect-\[21\/9\]  { aspect-ratio: 21 / 9; }

/* ─── OBJECT FIT ─── */
.object-cover   { object-fit: cover; }
.object-contain { object-fit: contain; }

/* ─── PADDING ─── */
.p-5   { padding: 1.25rem; }
.p-6   { padding: 1.5rem; }
.p-8   { padding: 2rem; }
.p-10  { padding: 2.5rem; }
.p-12  { padding: 3rem; }
.px-0   { padding-left: 0; padding-right: 0; }
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.px-3   { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-5   { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6   { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-7   { padding-left: 1.75rem; padding-right: 1.75rem; }
.px-8   { padding-left: 2rem; padding-right: 2rem; }
.py-1   { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2   { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3   { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4   { padding-top: 1rem; padding-bottom: 1rem; }
.py-5   { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-10  { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-20  { padding-top: 5rem; padding-bottom: 5rem; }
.py-28  { padding-top: 7rem; padding-bottom: 7rem; }
.pt-6   { padding-top: 1.5rem; }
.pt-8   { padding-top: 2rem; }
.pt-12  { padding-top: 3rem; }
.pt-20  { padding-top: 5rem; }
.pt-24  { padding-top: 6rem; }
.pb-0   { padding-bottom: 0; }
.pb-1   { padding-bottom: 0.25rem; }
.pb-2   { padding-bottom: 0.5rem; }
.pb-8   { padding-bottom: 2rem; }
.pb-16  { padding-bottom: 4rem; }
.pb-20  { padding-bottom: 5rem; }
.pb-24  { padding-bottom: 6rem; }
.pb-28  { padding-bottom: 7rem; }
.pb-32  { padding-bottom: 8rem; }
.pl-4   { padding-left: 1rem; }

/* ─── MARGIN ─── */
.mx-auto { margin-left: auto; margin-right: auto; }
.my-8   { margin-top: 2rem; margin-bottom: 2rem; }
.ml-0   { margin-left: 0; }
.mt-1   { margin-top: 0.25rem; }
.mt-4   { margin-top: 1rem; }
.mt-8   { margin-top: 2rem; }
.mt-16  { margin-top: 4rem; }
.mt-20  { margin-top: 5rem; }
.mb-0   { margin-bottom: 0; }
.mb-1   { margin-bottom: 0.25rem; }
.mb-2   { margin-bottom: 0.5rem; }
.mb-3   { margin-bottom: 0.75rem; }
.mb-4   { margin-bottom: 1rem; }
.mb-5   { margin-bottom: 1.25rem; }
.mb-6   { margin-bottom: 1.5rem; }
.mb-8   { margin-bottom: 2rem; }
.mb-10  { margin-bottom: 2.5rem; }
.mb-16  { margin-bottom: 4rem; }
.mb-24  { margin-bottom: 6rem; }
.mb-32  { margin-bottom: 8rem; }
.-mt-12 { margin-top: -3rem; }
.-mt-20 { margin-top: -5rem; }

/* ─── OPACITY ─── */
.opacity-5  { opacity: 0.05; }
.opacity-10 { opacity: 0.1; }
.opacity-50 { opacity: 0.5; }

/* ─── FILTER / BACKDROP ─── */
.filter           { filter: var(--tw-filter, none); }
.blur-\[150px\]   { filter: blur(150px); }
.backdrop-blur-sm  { backdrop-filter: blur(4px); }
.backdrop-blur-xl  { backdrop-filter: blur(24px); }

/* ─── TRANSFORM ─── */
.transform         { transform: var(--tw-transform, none); }
.translate-x-1\/2  { --tw-translate-x: 50%;  transform: translateX(50%); }
.-translate-y-1\/2 { --tw-translate-y: -50%; transform: translateY(-50%); }
.rotate-45         { transform: rotate(45deg); }
.scale-105         { transform: scale(1.05); }

/* ─── TRANSITION ─── */
.transition-colors    { transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
.transition-all        { transition: all .2s ease; }
.transition-transform  { transition: transform .2s ease; }
.duration-500  { transition-duration: .5s; }
.duration-1000 { transition-duration: 1s; }

/* ─── HOVER STATES ─── */
.hover\:text-\[\#00b8c0\]:hover   { color: var(--atlas-cyan); }
.hover\:text-white:hover          { color: #fff; }
.hover\:bg-\[\#00b8c0\]:hover     { background-color: var(--atlas-cyan); }
.hover\:bg-\[\#00a3a6\]:hover     { background-color: #00a3a6; }
.hover\:bg-\[\#0a254d\]:hover     { background-color: var(--atlas-dark); }
.hover\:bg-white\/10:hover        { background-color: rgba(255,255,255,.1); }
.hover\:border-\[\#00b8c0\]:hover { border-color: var(--atlas-cyan); }
.hover\:shadow-sm:hover           { box-shadow: 0 1px 2px 0 rgba(0,0,0,.05); }
.hover\:-translate-x-1:hover      { transform: translateX(-0.25rem); }

/* ─── GROUP / GROUP-HOVER ─── */
.group\/lk:hover .group-hover\/lk\:translate-x-1 { transform: translateX(0.25rem); }
.group:hover .group-hover\:translate-x-1          { transform: translateX(0.25rem); }
.group:hover .group-hover\:-translate-x-1         { transform: translateX(-0.25rem); }
.group:hover .group-hover\:bg-\[\#00b8c0\]        { background-color: var(--atlas-cyan); }
.group:hover .group-hover\:bg-transparent         { background-color: transparent; }
.group:hover .group-hover\:text-\[\#00b8c0\]      { color: var(--atlas-cyan); }
.group:hover .group-hover\:text-white             { color: #fff; }
.group:hover .group-hover\:scale-105              { transform: scale(1.05); }

/* ─── MISC ─── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }
.col-span-2 { grid-column: span 2 / span 2; }
.scroll-smooth { scroll-behavior: smooth; }

/* Line-clamp */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Scrollbar hide */
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }

/* ─── RESPONSIVE — sm (640px) ─── */
@media (min-width: 640px) {
  .sm\:flex-row   { flex-direction: row; }
}

/* ─── RESPONSIVE — md (768px) ─── */
@media (min-width: 768px) {
  .md\:flex         { display: flex; }
  .md\:flex-row     { flex-direction: row; }
  .md\:hidden       { display: none; }
  .md\:block        { display: block; }
  .md\:col-span-2   { grid-column: span 2 / span 2; }
  .md\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:p-10         { padding: 2.5rem; }
  .md\:p-12         { padding: 3rem; }
  .md\:p-14         { padding: 3.5rem; }
  .md\:px-8         { padding-left: 2rem; padding-right: 2rem; }
  .md\:rounded-2xl  { border-radius: 1rem; }
  .md\:rounded-\[2rem\] { border-radius: 2rem; }
  .md\:text-lg      { font-size: 1.125rem; line-height: 1.75rem; }
  .md\:text-xl      { font-size: 1.25rem; line-height: 1.75rem; }
  .md\:text-2xl     { font-size: 1.5rem;  line-height: 2rem; }
  .md\:text-3xl     { font-size: 1.875rem; line-height: 2.25rem; }
  .md\:text-4xl     { font-size: 2.25rem; line-height: 2.5rem; }
  .md\:text-5xl     { font-size: 3rem;    line-height: 1; }
  .md\:text-6xl     { font-size: 3.75rem; line-height: 1; }
  .md\:h-\[500px\]  { height: 500px; }
  .md\:h-auto       { height: auto; }
  .md\:w-2\/5       { width: 40%; }
  .md\:w-3\/5       { width: 60%; }
  .md\:w-\[52\%\]   { width: 52%; }
  .md\:ml-\[76px\]  { margin-left: 76px; }
}

/* ─── RESPONSIVE — lg (1024px) ─── */
@media (min-width: 1024px) {
  .lg\:flex              { display: flex; }
  .lg\:hidden            { display: none; }
  .lg\:grid-cols-3       { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-\[1fr_280px\] { grid-template-columns: 1fr 280px; }
  .lg\:text-7xl          { font-size: 4.5rem; line-height: 1; }
}

/* ─── COMPONENT STYLES (reprises des <style> inline) ─── */

/* Barre de progression */
#progress-bar {
  position: fixed; top: 0; left: 0; height: 3px;
  background: linear-gradient(90deg, #00b8c0, #0a254d);
  z-index: 100; width: 0%; transition: width .1s linear;
}

/* TOC */
.toc-link { display: block; padding: 7px 0 7px 14px; font-size: 13px; color: #64748b; border-left: 2px solid #e2e8f0; text-decoration: none; transition: all .2s; line-height: 1.4; }
.toc-link:hover, .toc-link.active { color: #00b8c0; border-left-color: #00b8c0; font-weight: 500; }

/* Article body typography */
.article-body h2 { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.5rem; color: #0a254d; margin: 2.75rem 0 1.1rem; line-height: 1.25; scroll-margin-top: 100px; }
.article-body h3 { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 1.125rem; color: #0a254d; margin: 2rem 0 .75rem; }
.article-body p  { font-size: 1.0625rem; line-height: 1.9; color: #334155; margin-bottom: 1.5rem; }
.article-body ul { margin: 0 0 1.5rem; padding: 0; list-style: none; }
.article-body ul li { font-size: 1.0625rem; line-height: 1.85; color: #334155; margin-bottom: .75rem; padding-left: 1.5rem; position: relative; }
.article-body ul li::before { content: '—'; position: absolute; left: 0; color: #00b8c0; font-weight: 600; }
.article-body strong { color: #0a254d; font-weight: 600; }
.article-body a { color: #00b8c0; }
.article-body em { font-style: italic; }

/* Info box */
.info-box { background: #e6f8f9; border-left: 3px solid #00b8c0; border-radius: 0 10px 10px 0; padding: 1.25rem 1.5rem; margin: 2rem 0; }
.info-box p { margin-bottom: 0; color: #0a254d; }

/* Price table */
.price-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0 2rem; font-size: .9375rem; }
.price-table th { background: #0a254d; color: #fff; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em; padding: 10px 14px; text-align: left; }
.price-table td { padding: 11px 14px; border-bottom: 1px solid #f1f5f9; color: #334155; }
.price-table tr:last-child td { border-bottom: none; }
.price-table tr:nth-child(even) td { background: #f8fafc; }
.price-table .price { font-weight: 600; color: #0a254d; white-space: nowrap; }

/* Compare table (compte entreprise) */
.compare-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0 2rem; font-size: .9rem; }
.compare-table th { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: .8125rem; padding: 10px 14px; text-align: left; border-bottom: 2px solid #e2e8f0; color: #0a254d; }
.compare-table th.atlas-col { background: #0a254d; color: #fff; border-radius: 8px 8px 0 0; }
.compare-table td { padding: 11px 14px; border-bottom: 1px solid #f1f5f9; font-size: .9rem; color: #334155; vertical-align: middle; }
.compare-table td.atlas-col { background: #f0fafb; font-weight: 600; color: #0a254d; }
.compare-table tr:last-child td { border-bottom: none; }
.check { color: #00b8c0; font-weight: 700; }
.cross { color: #cbd5e1; }

/* CTA inline */
.cta-inline { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 16px; padding: 1.5rem 1.75rem; margin: 2.5rem 0; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }

/* Summary box */
.summary-box { background: #0a254d; border-radius: 16px; padding: 2rem 2.25rem; margin: 3rem 0; }
.summary-box h3 { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: .8125rem; color: #00b8c0; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 1rem; }
.summary-box ul { margin: 0; }
.summary-box ul li { color: #e2e8f0; font-size: .9375rem; margin-bottom: .625rem; padding-left: 1.5rem; position: relative; list-style: none; }
.summary-box ul li::before { content: '✓'; position: absolute; left: 0; color: #00b8c0; font-weight: 600; }

/* FAQ */
.faq-item { border-bottom: 1px solid #f1f5f9; }
.faq-question { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: 1.25rem 0; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 1rem; color: #0a254d; cursor: pointer; background: none; border: none; text-align: left; }
.faq-question:hover { color: #00b8c0; }
.faq-icon { color: #00b8c0; font-size: 1.5rem; font-weight: 300; line-height: 1; transition: transform .2s; flex-shrink: 0; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-answer { font-size: .9375rem; line-height: 1.85; color: #475569; padding-bottom: 1.25rem; display: none; }
.faq-item.open .faq-answer { display: block; }
.faq-answer strong { color: #0a254d; }

/* Related articles */
.related-card { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 0; border-bottom: 1px solid #f1f5f9; text-decoration: none; transition: all .2s; }
.related-card:last-child { border-bottom: none; }
.related-card:hover .related-title { color: #00b8c0; }
.related-thumb { width: 80px; height: 60px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }

/* Platform map (gare article) */
.platform-map { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px; padding: 1.5rem; margin: 2rem 0; font-size: .875rem; }
.platform-row { display: flex; align-items: center; gap: .75rem; padding: .625rem 0; border-bottom: 1px solid #f1f5f9; }
.platform-row:last-child { border-bottom: none; }
.platform-badge { background: #0a254d; color: #fff; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: .75rem; padding: 4px 10px; border-radius: 6px; white-space: nowrap; letter-spacing: .05em; }
.platform-badge.cyan { background: #00b8c0; }

/* Magazine: article card animations */
.card-img { transition: transform .7s cubic-bezier(.4,0,.2,1); }
.article-card:hover .card-img { transform: scale(1.05); }
.article-card { transition: transform .3s ease; }
.article-card:hover { transform: translateY(-4px); }

/* Filter buttons */
.filter-btn { transition: all .2s; }
.filter-btn.active { background: #0a254d; color: #fff; border-color: #0a254d; }
.filter-btn:not(.active):hover { border-color: #00b8c0; color: #00b8c0; }
[data-hidden] { display: none !important; }

/* ─── IMAGES DE FOND (remplaçant bg-[url(...)]) ─── */

/* Image de fond des cartes collections (magazine) */
.collection-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.5;
  border-radius: 1rem;
  transition: transform 1s cubic-bezier(.4,0,.2,1);
}
.group:hover .collection-bg-img {
  transform: scale(1.05);
}

/* Image de fond hero section catégorie */
.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.1;
}

/* Image de fond CTA sections sombres */
.cta-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.05;
}

/* Article sidebar hide on mobile */
@media (max-width: 1023px) { .article-sidebar { display: none; } }

/* Webkit font smoothing */
body { -webkit-font-smoothing: antialiased; }