/* ============================================================ Guide des agences SEO 2026 + Hub classements Design "Boussole" — Hybride premium : mise en page éditoriale premium d'origine, re-skinnée aux tokens de julien-gourdon.fr (Playfair Display + Inter, vert #3d8a6b des classements). Tout est scopé : variables sur , styles sur .ag-wrapper + classes préfixées .ag-* → zéro collision avec le CSS global du site (callout.css, style.css, etc.). ============================================================ */ .ag-page { /* Palette claire raccord site, accent vert des classements */ --ag-paper: #f6f8f7; /* fond clair, légère teinte verte */ --ag-paper-2: #fbfcfb; /* surface carte plus claire */ --ag-card: #ffffff; --ag-ink: #14241c; /* vert quasi-noir */ --ag-ink-soft: #45554d; /* texte atténué */ --ag-ink-faint: #7c8a82; --ag-line: rgba(20,36,28,0.12); --ag-line-soft: rgba(20,36,28,0.07); --ag-pine: #1f6f4f; /* vert profond */ --ag-pine-2: #3d8a6b; /* vert interactif (= accent classements) */ --ag-pine-soft: #d4ede0; /* surface verte pâle (= classement accent-soft) */ --ag-pine-ink: #143a2a; --ag-amber: #b26a22; /* vigilance / signal chaud */ --ag-amber-soft: #f4e7d2; --ag-shadow-sm: 0 1px 2px rgba(20,36,28,0.05); --ag-shadow-md: 0 4px 18px -6px rgba(20,36,28,0.16); --ag-shadow-lg: 0 24px 60px -24px rgba(20,36,28,0.30); /* Typo = tokens du site (déjà chargés par base.html) */ --ag-serif: var(--font-serif-stack, 'Playfair Display', Georgia, serif); --ag-sans: var(--font-sans-stack, 'Inter', system-ui, sans-serif); --ag-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; --ag-maxw: 1200px; --ag-content: 720px; } /* la nav du site est fixe (100px) → les ancres doivent la dégager */ html.ag-page { scroll-padding-top: 120px; } /* ---------- Wrapper : porte les styles de base (PAS sur pour ne pas repeindre la nav/footer du site) ---------- */ .ag-wrapper { background: var(--ag-paper); color: var(--ag-ink); font-family: var(--ag-sans); font-size: 18px; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .ag-wrapper * { box-sizing: border-box; } .ag-wrapper ::selection { background: var(--ag-pine); color: #fff; } .ag-wrapper img { max-width: 100%; display: block; } /* ---------- Typography helpers ---------- */ .ag-eyebrow { font-family: var(--ag-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ag-pine-2); font-weight: 600; } .ag-kicker { font-family: var(--ag-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ag-ink-faint); } /* breadcrumb-style eyebrow (lien vers le hub, au-dessus du H1) */ .ag-hero-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; } .ag-eyebrow-link { color: var(--ag-pine-2); text-decoration: none; font-weight: 600; transition: color 0.18s; } .ag-eyebrow-link:hover { color: var(--ag-pine); text-decoration: underline; text-underline-offset: 3px; } .ag-kicker-sep { color: var(--ag-ink-faint); } .ag-wrapper h1, .ag-wrapper h2, .ag-wrapper h3 { font-family: var(--ag-serif); font-weight: 600; letter-spacing: -0.01em; color: var(--ag-ink); } /* ============================================================ PROGRESS BAR (la nav "masthead" Boussole est retirée : la nav du site la remplace) ============================================================ */ .ag-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--ag-pine-2); z-index: 1040; /* au-dessus de la nav fixe (1030) */ transition: width 0.08s linear; } /* ============================================================ LAYOUT ============================================================ */ .ag-wrap { max-width: var(--ag-maxw); margin: 0 auto; padding: 0 32px; } .ag-hero { padding-top: 24px; padding-bottom: 24px; } .ag-hero-inner { max-width: 860px; } .ag-hero h1 { font-size: clamp(34px, 6vw, 60px); line-height: 1.06; margin: 18px 0 22px; letter-spacing: -0.02em; text-wrap: balance; text-align: left; /* override du h1 global centré du site */ } .ag-hero-lede { font-size: 21px; line-height: 1.55; color: var(--ag-ink-soft); max-width: 62ch; margin: 0; text-wrap: pretty; } .ag-hero-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; } .ag-grid { max-width: var(--ag-maxw); margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 64px; align-items: start; } @media (max-width: 1000px) { .ag-grid { grid-template-columns: 1fr; gap: 0; } } /* ---------- TOC ---------- */ .ag-toc { position: sticky; top: 120px; padding-top: 8px; font-size: 14px; } .ag-toc-label { font-family: var(--ag-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ag-ink-faint); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--ag-line); } .ag-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .ag-toc a { display: block; text-decoration: none; color: var(--ag-ink-soft); padding: 6px 0 6px 14px; line-height: 1.35; font-size: 13.5px; border-left: 2px solid transparent; transition: color 0.18s, border-color 0.18s; } .ag-toc a:hover { color: var(--ag-ink); } .ag-toc a.is-active { color: var(--ag-pine); border-left-color: var(--ag-pine-2); font-weight: 600; } .ag-toc-num { font-family: var(--ag-mono); font-size: 11px; color: var(--ag-ink-faint); margin-right: 7px; } .ag-toc a.is-active .ag-toc-num { color: var(--ag-pine-2); } @media (max-width: 1000px) { .ag-toc { display: none; } } /* ---------- Article ---------- */ .ag-article { min-width: 0; max-width: var(--ag-content); padding-bottom: 120px; } .ag-article > p { margin: 0 0 24px; color: var(--ag-ink); text-wrap: pretty; } .ag-article > p:first-of-type { font-size: 21px; line-height: 1.6; } .ag-section { scroll-margin-top: 120px; padding-top: 18px; } .ag-section + .ag-section { margin-top: 30px; } .ag-section-head { margin: 0 0 28px; } .ag-section-num { font-family: var(--ag-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--ag-pine-2); display: block; margin-bottom: 10px; } .ag-section h2 { font-size: clamp(28px, 4vw, 40px); line-height: 1.12; margin: 0; color: var(--ag-ink); text-wrap: balance; text-align: left; } .ag-section h3 { font-size: 24px; line-height: 1.25; margin: 40px 0 12px; color: var(--ag-pine-ink); } .ag-article strong { font-weight: 700; color: var(--ag-ink); } .ag-article a.ag-inline { color: var(--ag-pine); text-decoration: underline; text-underline-offset: 3px; } /* numbered editorial lists */ .ag-steps { list-style: none; counter-reset: s; margin: 28px 0; padding: 0; display: flex; flex-direction: column; gap: 18px; } .ag-steps > li { counter-increment: s; position: relative; padding-left: 56px; } .ag-steps > li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 1px; font-family: var(--ag-mono); font-size: 13px; font-weight: 600; color: var(--ag-pine-2); width: 38px; height: 38px; border: 1px solid var(--ag-line); border-radius: 50%; display: grid; place-items: center; background: var(--ag-paper-2); } .ag-steps strong { display: block; margin-bottom: 2px; } /* ============================================================ PULL QUOTE / DIVIDERS ============================================================ */ .ag-pullquote { font-family: var(--ag-serif); font-size: 27px; line-height: 1.35; font-style: italic; color: var(--ag-pine-ink); border-left: 3px solid var(--ag-pine-2); padding: 4px 0 4px 28px; margin: 44px 0; text-wrap: pretty; } .ag-rule { border: none; border-top: 1px solid var(--ag-line); margin: 56px 0; } /* ============================================================ 6 CRITÈRES — table interactive ============================================================ */ .ag-criteria { margin: 32px 0 12px; border-top: 1px solid var(--ag-ink); } .ag-crit { border-bottom: 1px solid var(--ag-line); cursor: pointer; transition: background 0.2s; } .ag-crit:hover { background: var(--ag-paper-2); } .ag-crit-head { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 18px; padding: 22px 8px; min-height: 44px; } .ag-crit-n { font-family: var(--ag-mono); font-size: 14px; color: var(--ag-pine-2); font-weight: 600; } .ag-crit-title { font-family: var(--ag-serif); font-size: 22px; color: var(--ag-ink); } .ag-crit-toggle { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--ag-line); display: grid; place-items: center; flex: none; transition: transform 0.25s, background 0.2s, border-color 0.2s; color: var(--ag-ink-soft); } .ag-crit[aria-expanded="true"] .ag-crit-toggle { transform: rotate(45deg); background: var(--ag-pine); border-color: var(--ag-pine); color: #fff; } .ag-crit-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s ease; } .ag-crit-body-inner { overflow: hidden; } .ag-crit[aria-expanded="true"] .ag-crit-body { grid-template-rows: 1fr; } .ag-crit-content { padding: 0 8px 26px 70px; color: var(--ag-ink-soft); font-size: 16.5px; } .ag-crit-content .ag-signal { margin-top: 14px; display: flex; gap: 10px; align-items: baseline; font-size: 14.5px; } .ag-crit-content .ag-signal .ag-tag { font-family: var(--ag-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ag-pine-2); flex: none; padding-top: 2px; } /* ============================================================ COMPARATEUR D'AGENCES ============================================================ */ .ag-comparator { margin: 32px 0; } .ag-filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 28px; align-items: center; } .ag-filters-label { font-family: var(--ag-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ag-ink-faint); margin-right: 6px; } .ag-chip { font-family: var(--ag-sans); font-size: 13.5px; font-weight: 500; background: transparent; color: var(--ag-ink-soft); border: 1px solid var(--ag-line); border-radius: 999px; padding: 8px 15px; cursor: pointer; transition: all 0.18s; display: inline-flex; align-items: center; gap: 7px; } .ag-chip:hover { border-color: var(--ag-ink); color: var(--ag-ink); } .ag-chip.is-active { background: var(--ag-pine); border-color: var(--ag-pine); color: #fff; } .ag-chip .ag-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.7; } .ag-chip .ag-count { font-family: var(--ag-mono); font-size: 11px; opacity: 0.65; } .ag-agency-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 16px; } .ag-agency { background: var(--ag-card); border: 1px solid var(--ag-line); border-radius: 14px; padding: 22px; box-shadow: var(--ag-shadow-sm); transition: transform 0.4s cubic-bezier(.2,.7,.2,1), box-shadow 0.3s, opacity 0.35s; display: flex; flex-direction: column; gap: 14px; } .ag-agency:hover { transform: translateY(-3px); box-shadow: var(--ag-shadow-md); } .ag-agency.is-hidden { display: none; } .ag-agency-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .ag-agency-name { font-family: var(--ag-serif); font-size: 23px; color: var(--ag-ink); line-height: 1.1; } .ag-agency-init { width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--ag-pine-soft); color: var(--ag-pine); display: grid; place-items: center; font-family: var(--ag-mono); font-weight: 600; font-size: 15px; } .ag-agency-pos { font-size: 15px; color: var(--ag-ink-soft); line-height: 1.5; flex: 1; margin: 0; } .ag-agency-tags { display: flex; flex-wrap: wrap; gap: 6px; } .ag-atag { font-family: var(--ag-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; background: var(--ag-paper); border: 1px solid var(--ag-line-soft); color: var(--ag-ink-soft); } .ag-atag.is-match { background: var(--ag-pine-soft); color: var(--ag-pine); border-color: transparent; } .ag-comp-empty { grid-column: 1/-1; text-align: center; padding: 48px; color: var(--ag-ink-faint); font-family: var(--ag-mono); font-size: 13px; } .ag-comp-note { margin-top: 18px; font-family: var(--ag-mono); font-size: 12px; color: var(--ag-ink-faint); } /* ============================================================ SÉLECTEUR — quel profil pour moi ============================================================ */ .ag-selector { background: var(--ag-pine-ink); color: #fff; border-radius: 22px; padding: 40px; margin: 36px 0; position: relative; overflow: hidden; } .ag-selector::after { content: ""; position: absolute; right: -80px; top: -80px; width: 280px; height: 280px; background: radial-gradient(circle, rgba(61,138,107,0.5), transparent 70%); pointer-events: none; } .ag-selector-head { position: relative; z-index: 1; margin-bottom: 28px; } .ag-selector .ag-eyebrow { color: #7FC8A0; } .ag-selector h3 { color: #fff; font-size: 28px; margin: 10px 0 6px; } .ag-selector p.ag-lead { color: rgba(255,255,255,0.7); font-size: 16px; margin: 0; } .ag-sel-stage { position: relative; z-index: 1; } .ag-sel-q { margin-bottom: 26px; } .ag-sel-q-label { font-family: var(--ag-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #7FC8A0; margin-bottom: 12px; display: block; } .ag-sel-options { display: flex; flex-wrap: wrap; gap: 9px; } .ag-sel-opt { font-family: var(--ag-sans); font-size: 14.5px; font-weight: 500; background: rgba(255,255,255,0.06); color: #fff; border: 1px solid rgba(255,255,255,0.2); border-radius: 10px; padding: 11px 16px; cursor: pointer; transition: all 0.16s; text-align: left; } .ag-sel-opt:hover { background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.45); } .ag-sel-opt.is-active { background: var(--ag-pine-2); border-color: var(--ag-pine-2); color: #fff; } .ag-sel-progress { display: flex; gap: 6px; margin-bottom: 28px; } .ag-sel-progress span { height: 4px; flex: 1; border-radius: 2px; background: rgba(255,255,255,0.18); transition: background 0.3s; } .ag-sel-progress span.is-done { background: var(--ag-pine-2); } .ag-sel-result { position: relative; z-index: 1; } .ag-sel-result .ag-res-eyebrow { color: #7FC8A0; } .ag-sel-result h4 { font-family: var(--ag-serif); font-size: 30px; margin: 10px 0 12px; color: #fff; } .ag-sel-result .ag-res-desc { color: rgba(255,255,255,0.78); font-size: 16px; margin: 0 0 24px; max-width: 60ch; } .ag-res-agencies { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; } .ag-res-agency { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); border-radius: 10px; padding: 12px 16px; min-width: 0; } .ag-res-agency .ag-ra-name { font-family: var(--ag-serif); font-size: 18px; color: #fff; } .ag-res-agency .ag-ra-pos { font-size: 12.5px; color: rgba(255,255,255,0.6); margin-top: 2px; } .ag-sel-restart { font-family: var(--ag-sans); font-weight: 600; font-size: 13.5px; background: #fff; color: var(--ag-pine-ink); border: none; padding: 11px 20px; border-radius: 999px; cursor: pointer; transition: transform 0.15s, background .2s; } .ag-sel-restart:hover { transform: translateY(-1px); background: #f1f5f3; } .ag-fade-in { animation: agFadeIn 0.4s ease both; } @keyframes agFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ============================================================ CALLOUT / VIGILANCE ============================================================ */ .ag-callout { background: var(--ag-amber-soft); border: 1px solid color-mix(in srgb, var(--ag-amber) 30%, transparent); border-radius: 14px; padding: 22px 24px; margin: 28px 0; display: flex; gap: 16px; } .ag-callout .ag-callout-ic { flex: none; color: var(--ag-amber); margin-top: 2px; } .ag-callout .ag-callout-title { font-weight: 700; color: var(--ag-ink); margin-bottom: 4px; } .ag-callout p { margin: 0; font-size: 15.5px; color: var(--ag-ink-soft); } /* dimensions list (qualité/prix) */ .ag-dims { list-style: none; counter-reset: d; margin: 28px 0; padding: 0; display: grid; gap: 12px; } .ag-dims li { counter-increment: d; background: var(--ag-paper-2); border: 1px solid var(--ag-line); border-radius: 12px; padding: 18px 20px 18px 60px; position: relative; font-size: 16px; } .ag-dims li::before { content: counter(d); position: absolute; left: 18px; top: 17px; font-family: var(--ag-mono); font-weight: 600; font-size: 14px; color: var(--ag-pine-2); width: 26px; height: 26px; border-radius: 7px; background: var(--ag-pine-soft); display: grid; place-items: center; } .ag-dims strong { color: var(--ag-ink); } /* résumé filters */ .ag-resume { display: grid; gap: 14px; margin: 28px 0; } .ag-rf { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border: 1px solid var(--ag-line); border-radius: 14px; background: var(--ag-card); } .ag-rf-n { font-family: var(--ag-serif); font-size: 30px; color: var(--ag-pine); line-height: 1; flex: none; width: 44px; } .ag-rf-text strong { display: block; margin-bottom: 3px; color: var(--ag-ink); } .ag-rf-text span { color: var(--ag-ink-soft); font-size: 15px; } /* ============================================================ QUESTIONS LIST (10 questions) ============================================================ */ .ag-qlist { list-style: none; counter-reset: q; margin: 28px 0; padding: 0; display: flex; flex-direction: column; } .ag-qlist li { counter-increment: q; display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--ag-line-soft); align-items: baseline; } .ag-qlist li::before { content: counter(q); grid-column: 1; font-family: var(--ag-mono); font-size: 15px; font-weight: 600; color: var(--ag-pine-2); } .ag-qlist strong { font-weight: 600; color: var(--ag-ink); font-size: 17px; line-height: 1.45; } /* ============================================================ CLOSING (bandeau éditorial de fin, avant le footer du site) ============================================================ */ .ag-closing { background: var(--ag-ink); color: #fff; margin-top: 80px; padding: 80px 0 60px; } .ag-closing-inner { max-width: var(--ag-content); margin: 0 auto; padding: 0 32px; } .ag-closing .ag-eyebrow { color: #7FC8A0; } .ag-closing h2 { color: #fff; font-size: clamp(30px,5vw,46px); margin: 14px 0 20px; line-height: 1.08; text-align: left; } .ag-closing p { color: rgba(255,255,255,0.72); font-size: 18px; } .ag-foot-meta { max-width: var(--ag-maxw); margin: 64px auto 0; padding: 28px 32px 0; border-top: 1px solid rgba(255,255,255,0.14); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-family: var(--ag-mono); font-size: 11.5px; letter-spacing: 0.08em; color: rgba(255,255,255,0.5); text-transform: uppercase; } /* ============================================================ HUB DES CLASSEMENTS (/classements) ============================================================ */ .ag-hub { padding-top: 24px; padding-bottom: 100px; } .ag-hub-head { max-width: 760px; margin: 0 0 48px; } .ag-hub-head h1 { font-size: clamp(34px, 6vw, 58px); line-height: 1.06; letter-spacing: -0.02em; margin: 18px 0 20px; text-align: left; text-wrap: balance; } .ag-hub-head .ag-hub-lede { font-size: 20px; line-height: 1.55; color: var(--ag-ink-soft); margin: 0; max-width: 60ch; text-wrap: pretty; } .ag-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; } .ag-hub-card { display: flex; flex-direction: column; gap: 14px; background: var(--ag-card); border: 1px solid var(--ag-line); border-radius: 18px; padding: 28px; text-decoration: none; color: inherit; box-shadow: var(--ag-shadow-sm); transition: transform 0.4s cubic-bezier(.2,.7,.2,1), box-shadow 0.3s, border-color 0.2s; } .ag-hub-card:hover { transform: translateY(-4px); box-shadow: var(--ag-shadow-md); border-color: var(--ag-pine-soft); } .ag-hub-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .ag-hub-badge { font-family: var(--ag-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--ag-pine-soft); color: var(--ag-pine); } .ag-hub-badge.is-guide { background: var(--ag-amber-soft); color: var(--ag-amber); } .ag-hub-count { font-family: var(--ag-mono); font-size: 12px; color: var(--ag-ink-faint); } .ag-hub-card h2 { font-family: var(--ag-serif); font-size: 26px; line-height: 1.15; margin: 0; color: var(--ag-ink); text-align: left; } .ag-hub-card p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ag-ink-soft); flex: 1; } .ag-hub-card-cta { font-family: var(--ag-sans); font-weight: 600; font-size: 14px; color: var(--ag-pine-2); display: inline-flex; align-items: center; gap: 6px; } .ag-hub-card:hover .ag-hub-card-cta { gap: 10px; } .ag-hub-empty { grid-column: 1/-1; padding: 56px; text-align: center; color: var(--ag-ink-faint); font-family: var(--ag-mono); font-size: 13px; border: 1px dashed var(--ag-line); border-radius: 18px; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 640px) { .ag-wrapper { font-size: 17px; } .ag-wrap, .ag-grid { padding-left: 20px; padding-right: 20px; } .ag-selector { padding: 26px; } .ag-crit-content { padding-left: 8px; } .ag-hub-grid { grid-template-columns: 1fr; } }