/* Fichier produit par Siteweb/assets.py à partir de : models/tools/style.css (rank), models/rank/style.css. Ne pas le modifier. */
/* ===== models/tools/style.css (rank) */
/* Modèle tools : listes d’outils (plp/) et fiches outil (product/). Base et couleurs (thèmes jour et nuit) dans /common/style.css. */
:root {
  /* Largeur : celle du site (--max-width de common/style.css, 1280 px), sans valeur propre au modèle. */
  --radius: 16px;
  --radius-lg: 24px;
  --font-text: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
body { min-height: 100vh; min-height: 100svh; height: auto; display: flex; flex-direction: column; overflow-x: clip; font-family: var(--font-text); -webkit-font-smoothing: antialiased; }
body > main { flex: 1; padding: 0 0 80px; }
h1 { margin-bottom: 32px; font-size: clamp(36px, 7vw, 64px); font-weight: 800; line-height: 1.05; letter-spacing: -.035em; overflow-wrap: anywhere; color: var(--color-text); }
/* Liste des outils (plp/) : le H1 garde un peu d'air sous l'en-tête. */
main > h1, .tools-list h1 { padding-top: 40px; }

/* Modèle tarifaire : badge clair (contour), pour ne pas se confondre avec les badges noirs des catégories. */
.tool-pricing-model { display: inline-block; padding: 5px 13px; border: 1px solid currentColor; border-radius: 999px; background: var(--color-background); font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.tool-pricing-model-free { color: var(--color-accent); }
.tool-pricing-model-freemium { color: var(--color-freemium); }
.tool-pricing-model-paid { color: var(--color-text-secondary); }
.tools-card .tool-pricing-model { padding: 3px 10px; font-size: 11px; }

/* Niveau de recommandation : cinq ronds, les premiers pleins, couleur selon le niveau (du rouge au vert de la marque). */
.tool-level { --level: var(--color-accent); display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; font-weight: 800; color: var(--level); }
.tool-level-1 { --level: var(--color-danger); }
.tool-level-2 { --level: var(--color-level-2); }
.tool-level-3 { --level: var(--color-level-3); }
.tool-level-4 { --level: var(--color-level-4); }
.tool-level-dots { display: inline-flex; gap: 4px; }
.tool-level-dots i { width: 12px; height: 12px; border: 2px solid var(--level); border-radius: 50%; }
.tool-level-dots i.on { background: var(--level); }
.tool-level-dots i.half { background: linear-gradient(90deg, var(--level) 50%, transparent 50%); }
.tool-hero .tool-level { margin: -8px 0 24px; padding: 8px 14px; border-radius: 999px; background: var(--color-card); box-shadow: 0 6px 20px rgba(var(--shadow-rgb), .06); }
#review > .tool-level { margin: -8px 0 24px; }

.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 40px; color: var(--color-muted); font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb [aria-current] { color: var(--color-text); }

.tool-logo-text { display: grid; place-items: center; padding: 0; background: var(--color-primary); color: #121512; font-size: 32px; font-weight: 800; }

/* ===== models/rank/style.css */
/* Modèle rank — classements d'outils, en guide de terrain : bandeau sombre avec visuel encadré, sections numérotées
   (rubrique en petites capitales espacées, grand titre), tableau du classement, cartes d'aide au choix, une carte par outil
   avec analyse repliable, sources sur deux colonnes. Couleurs et police : variables de common/style.css. Le fond du bandeau
   reprend celui du visuel (#121512) dans les deux thèmes. Largeur : celle du site, donnée par <main> (--max-width). */

.rank { --rank-hero: #121512; --rank-hero-line: rgba(255, 255, 255, .14); width: 100%; padding-bottom: 72px; }
.rank-breadcrumb { padding: 22px 0 18px; }
.rank-breadcrumb span[aria-hidden] { margin: 0 6px; }

/* Bandeau */
.rank-hero { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: center; gap: 56px; padding: clamp(32px, 5.4vw, 72px) clamp(28px, 5.4vw, 64px); border: 1px solid var(--color-border); border-radius: 24px; background: var(--rank-hero); color: #f2f2f2; }
.rank-hero-text { grid-template-columns: minmax(0, 1fr); }
.rank-hero-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 0 0 26px; color: var(--color-primary); font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.rank-hero-kicker span:first-child::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 12px; border-radius: 50%; background: var(--color-primary); vertical-align: 1px; }
.rank-hero h1 { margin: 0 0 26px; color: #fff; font-size: clamp(36px, 4.7vw, 58px); font-weight: 700; letter-spacing: -.035em; line-height: 1.04; }
.rank-hero h1 em { display: block; color: var(--color-primary); font-style: italic; font-weight: 600; }
.rank-hero h1 em::after { content: "."; }
.rank-hero-lead p { max-width: 560px; margin: 0; color: rgba(242, 242, 242, .74); font-size: 15px; line-height: 1.65; text-wrap: pretty; }
.rank-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin: 32px 0 0; }
.rank-button { display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; border-radius: 8px; background: var(--color-primary); color: #0b1a10; font-size: 16px; font-weight: 700; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.rank-button:hover { background: var(--color-secondary); transform: translateY(-1px); }
.rank-hero-link { color: #f2f2f2; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.rank-hero-link:hover { color: var(--color-primary); }
/* Cadre du visuel : trame de points, logos en perspective (image à fond transparent) par-dessus. */
.rank-hero-figure { position: relative; margin: 0; overflow: hidden; border: 1px solid var(--rank-hero-line); border-radius: 14px; aspect-ratio: 16 / 10; background: radial-gradient(circle, rgba(255, 255, 255, .13) .9px, transparent 1.3px) 0 0 / 16px 16px; }
.rank-hero-figure img { display: block; width: 100%; height: 100%; padding: 34px 8px 28px; object-fit: contain; }
.rank-hero-figure figcaption { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 18px 20px; color: rgba(242, 242, 242, .55); font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; pointer-events: none; }
.rank-figure-top span { margin: 0 8px; }
.rank-figure-bottom { display: flex; justify-content: space-between; padding: 0 24px; font-size: 10px; }

.rank-byline { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 24px; margin: 0; padding: 18px 4px; border-bottom: 1px solid var(--color-border); color: var(--color-muted); font-size: 15px; }
.rank-byline > span { text-align: right; }
.rank-byline span[aria-hidden] { margin: 0 6px; }

/* Sections numérotées */
.rank-section { margin-top: 72px; scroll-margin-top: 90px; }
.rank-narrow { max-width: 860px; }
.rank-eyebrow { margin: 0 0 10px; color: var(--color-accent); font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.rank-eyebrow span { margin: 0 8px; }
.rank-section h2 { margin: 0 0 28px; color: var(--color-text); font-size: clamp(30px, 4vw, 48px); font-weight: 800; letter-spacing: -.035em; line-height: 1.08; }
.rank-section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; margin-bottom: 28px; }
.rank-section-head h2 { margin: 0; }
.rank-section-note { margin: 0 0 6px; color: var(--color-muted); font-size: 15px; }

/* 01 — tableau du classement */
.rank-table { overflow: hidden; border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-card); }
.rank-table-caption { margin: 0; padding: 16px 28px; border-bottom: 1px solid var(--color-border); color: var(--color-text-secondary); font-size: 14px; font-weight: 600; letter-spacing: .04em; }
.rank-table table { width: 100%; border-collapse: collapse; }
.rank-table thead th { padding: 18px 28px; background: var(--color-surface); color: var(--color-text-secondary); font-size: 15px; font-weight: 700; text-align: left; }
.rank-table tbody tr { border-top: 1px solid var(--color-border); transition: background .15s ease; }
.rank-table tbody tr:hover { background: var(--color-surface); }
.rank-table td, .rank-table tbody th { padding: 18px 28px; color: var(--color-text); font-size: 16px; font-weight: 400; text-align: left; vertical-align: middle; }
.rank-table-number { width: 90px; color: var(--color-muted) !important; font-size: 24px !important; font-variant-numeric: tabular-nums; }
.rank-table-tool { display: inline-flex; align-items: center; gap: 16px; color: var(--color-text); font-size: 18px; font-weight: 800; text-decoration: none; }
.rank-table-tool:hover span { text-decoration: underline; text-underline-offset: 5px; }
.rank-table-logo { flex: none; width: 48px; height: 48px; border: 1px solid var(--color-border); border-radius: 12px; background: #fff; object-fit: contain; padding: 6px; }
.rank-table .tool-logo-text, .rank-card .tool-logo-text { display: inline-grid; place-items: center; color: var(--color-accent); font-weight: 800; }

/* 02 — aide au choix */
.rank-needs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.rank-need { display: flex; flex-direction: column; padding: 28px 30px; border-top: 3px solid var(--color-primary); border-radius: 4px 4px 16px 16px; background: var(--color-surface); }
.rank-need-label { margin: 0 0 18px; color: var(--color-text); font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.rank-need-tool { margin: 0 0 10px; font-size: clamp(21px, 2vw, 25px); font-weight: 700; letter-spacing: -.015em; line-height: 1.3; }
.rank-need-tool a { color: var(--color-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.rank-need-tool a span { display: inline-block; font-weight: 400; transition: transform .2s ease; }
.rank-need-tool a:hover { color: var(--color-accent); }
.rank-need-tool a:hover span { transform: translateX(3px); }
.rank-need-alternative { margin: 0; color: var(--color-text-secondary); font-size: 16px; }
.rank-need-alternative a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.rank-advice { margin-top: 36px; padding: 32px 40px; border-radius: 18px; background: var(--color-surface); }
.rank-advice-title { margin: 0 0 10px !important; color: var(--color-text); font-size: 19px; font-weight: 800; }
.rank-advice p { margin: 0; color: var(--color-text-secondary); font-size: 17px; line-height: 1.7; }

/* 03 — une carte par outil */
.rank-cards { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
.rank-card { padding: 34px 36px 0; border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-card); scroll-margin-top: 90px; }
.rank-card-head { display: flex; align-items: center; gap: 18px; }
.rank-card-logo { flex: none; width: 56px; height: 56px; border: 1px solid var(--color-border); border-radius: 14px; background: #fff; object-fit: contain; padding: 7px; }
.rank-card-kicker, .rank-card-level { margin: 0 0 6px; color: var(--color-accent); font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.rank-card h3 { margin: 0; color: var(--color-text); font-size: clamp(24px, 2.8vw, 32px); font-weight: 800; letter-spacing: -.02em; }
.rank-card-best { margin: 18px 0 20px; color: var(--color-text); font-size: 17px; }
.rank-card-details { border-top: 1px solid var(--color-border); }
.rank-card-details summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; margin: 0 -18px; border-radius: 10px; color: var(--color-accent); font-size: 17px; font-weight: 700; cursor: pointer; list-style: none; }
.rank-card-details summary::-webkit-details-marker { display: none; }
.rank-card-details summary::after { content: "+"; font-size: 22px; font-weight: 400; line-height: 1; }
.rank-card-details[open] summary { background: var(--color-surface); }
.rank-card-details[open] summary::after { content: "×"; }
.rank-card-body { padding: 18px 0 8px; }
.rank-card-body .rank-card-level { margin-bottom: 14px; }
.rank-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 22px; }
.rank-pros, .rank-cons { padding: 20px 22px; border-radius: 14px; background: var(--color-surface); }
.rank-pros h4, .rank-cons h4 { margin: 0 0 8px; color: var(--color-text); font-size: 17px; font-weight: 800; }
.rank-pros h4::before { content: "+ "; color: var(--color-accent); }
.rank-cons h4::before { content: "− "; color: var(--color-danger); }
.rank-pros ul, .rank-cons ul { margin: 0; padding-left: 20px; color: var(--color-text-secondary); line-height: 1.65; }
.rank-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: 22px; padding: 20px 0 22px; border-top: 1px solid var(--color-border); }
.rank-card-price { margin: 0; color: var(--color-text); font-weight: 700; }
.rank-card-foot a { color: var(--color-text); font-weight: 600; text-decoration: underline; text-underline-offset: 5px; }
.rank-card-foot a:hover { color: var(--color-accent); }

/* Texte courant (analyses, outils hors classement, méthode) */
.rank-prose { max-width: var(--max-reading); color: var(--color-text-secondary); font-size: 17px; line-height: 1.75; }
.rank-prose > * { margin: 0; }
.rank-prose > * + * { margin-top: 16px; }
.rank strong { font-weight: 800; }
.rank-prose strong { color: var(--color-text); }
.rank-prose a { color: var(--color-text); text-decoration: underline; text-underline-offset: 4px; }
.rank-prose a:hover { color: var(--color-accent); }
.rank-table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: 14px; }
.rank-table-wrap table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.rank-table-wrap th { padding: 12px 16px; background: var(--color-surface); color: var(--color-text); text-align: left; }
.rank-table-wrap td { padding: 12px 16px; border-top: 1px solid var(--color-border); vertical-align: top; }
.rank-callout { padding: 22px 26px; border-left: 3px solid var(--color-primary); border-radius: 0 14px 14px 0; background: var(--color-surface); }
.rank-callout > p + p { margin-top: 8px; }
.rank-callout-title { color: var(--color-text); font-weight: 800; }

/* 04 — outils hors classement */
.rank-others-intro { margin: -8px 0 24px; color: var(--color-text-secondary); font-size: 18px; }
.rank-other + .rank-other { margin-top: 26px; }
.rank-other .rank-prose { margin-bottom: 16px; }
/* Carte outil (sluak_article_tool_card) : logo, nom, niveau, lien vers la fiche, modèle tarifaire. */
a.article-tool { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; max-width: var(--max-reading); padding: 18px 22px; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-card); color: var(--color-text); text-decoration: none; transition: border-color .2s ease; }
a.article-tool:hover { border-color: var(--color-accent); }
.article-tool-logo { width: 52px; height: 52px; padding: 7px; border: 1px solid var(--color-border); border-radius: 12px; object-fit: contain; background: #fff; }
.article-tool-logo.tool-logo-text { display: grid; place-items: center; background: var(--color-primary); color: #121512; font-size: 20px; font-weight: 800; }
.article-tool-body { display: grid; gap: 4px; }
.article-tool-name { font-size: 18px; font-weight: 800; }
.article-tool .tool-level { margin: 0; font-size: 14px; }
.article-tool-more { color: var(--color-accent); font-size: 15px; font-weight: 700; }

/* FAQ */
.rank-faq details { border-bottom: 1px solid var(--color-border); }
.rank-faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 22px 4px; color: var(--color-text); font-size: 19px; font-weight: 700; cursor: pointer; list-style: none; }
.rank-faq summary::-webkit-details-marker { display: none; }
.rank-faq summary::after { content: "+"; font-weight: 400; }
.rank-faq details[open] summary::after { content: "×"; }
.rank-faq p { margin: 0 4px 22px; color: var(--color-text-secondary); font-size: 17px; line-height: 1.7; }

/* À lire aussi, aide, sources */
.rank-help { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: 72px; padding: 32px 40px; border-radius: 20px; background: var(--rank-hero); color: rgba(242, 242, 242, .78); }
.rank-help p { max-width: 640px; margin: 0; line-height: 1.6; }
.rank-help strong { display: block; margin-bottom: 4px; color: #fff; font-size: 20px; }
.rank-sources h2 { font-size: clamp(26px, 3vw, 36px); }
.rank-sources ol { columns: 2; column-gap: 56px; margin: 0; padding-left: 22px; color: var(--color-text-secondary); font-size: 15px; line-height: 1.55; }
.rank-sources li { break-inside: avoid; margin-bottom: 12px; }
.rank-sources a { color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .rank-hero { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .rank-hero-figure { max-width: 560px; }
  .rank-needs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .rank { padding-bottom: 56px; }
  .rank-hero { padding: 28px 22px; border-radius: 18px; }
  .rank-hero-lead p { font-size: 15px; }
  .rank-section { margin-top: 56px; }
  .rank-needs, .rank-proscons { grid-template-columns: minmax(0, 1fr); }
  .rank-need { padding: 24px; }
  .rank-card { padding: 24px 20px 0; }
  .rank-advice, .rank-help { padding: 24px; }
  .rank-sources ol { columns: 1; }
  a.article-tool { grid-template-columns: auto 1fr; }
  a.article-tool > :last-child { grid-column: 2; justify-self: start; }
  /* Tableau : une ligne par outil, usage et prix sous le nom. */
  .rank-table thead { display: none; }
  .rank-table tbody tr { display: grid; grid-template-columns: 44px minmax(0, 1fr); padding: 16px 18px; }
  .rank-table td, .rank-table tbody th { padding: 0; }
  .rank-table-number { grid-row: span 3; width: auto; font-size: 18px !important; padding-top: 12px !important; }
  .rank-table-tool { font-size: 17px; gap: 12px; }
  .rank-table-logo { width: 40px; height: 40px; }
  .rank-table td[data-label] { margin-top: 6px; color: var(--color-text-secondary); font-size: 14px; }
  .rank-table td[data-label]::before { content: attr(data-label) " : "; color: var(--color-muted); }
  .rank-table-caption { padding: 14px 18px; }
}