/* best-ai-porn.eu — surcouche sur Bootstrap 5.3.
   Regle du projet : composants Bootstrap natifs, on reteinte les variables.
   Interdits : degrade, glassmorphism, ombre diffuse, grand radius, hero centre. */

/* ------------------------------------------------------------------ TOKENS */

[data-bs-theme="dark"] {
  --bs-body-bg:                  #0d0d10;
  --bs-body-color:               #c6c4c0;
  --bs-emphasis-color:           #f5f3ef;
  --bs-secondary-bg:             #17171d;
  --bs-tertiary-bg:              #131318;
  --bs-border-color:             #26262e;
  --bs-border-color-translucent: #26262e;
  --bs-secondary-color:          rgba(198, 196, 192, .58);

  --bs-link-color-rgb:           255, 45, 111;
  --bs-link-hover-color-rgb:     255, 125, 165;
  --bs-danger-rgb:               255, 45, 111;

  --bs-border-radius:            2px;
  --bs-border-radius-sm:         2px;
  --bs-border-radius-lg:         2px;

  --brand:      #ff2d6f;
  --brand-dim:  rgba(255, 45, 111, .12);
  --good:       #45d483;
  --mid:        #f0a800;
  --low:        #8b8b96;
  --surface:    #131318;
  --surface-2:  #17171d;
}

body {
  font-size: .9375rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ TYPO */

h1, h2, h3, h4 { color: var(--bs-emphasis-color); letter-spacing: -.02em; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.15rem); font-weight: 800; line-height: 1.15; }
h2 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.45rem); font-weight: 700; line-height: 1.25; }
h3 { font-size: 1.0625rem; font-weight: 650; }
h4 { font-size: .9375rem; font-weight: 650; }

main p { max-width: 68ch; }
main ul, main ol { max-width: 68ch; }

.meta {
  font-size: .75rem;
  color: var(--bs-secondary-color);
  font-variant-numeric: tabular-nums;
}
.meta a { color: inherit; }

.todo {
  border-left: 3px solid var(--mid);
  background: rgba(240, 168, 0, .07);
  padding: .5rem .75rem;
  font-size: .8125rem;
  color: var(--mid);
}

/* ------------------------------------------------------------------ EN-TETE */

.navbar-brand {
  font-weight: 800;
  letter-spacing: -.03em;
  text-transform: uppercase;
  font-size: 1.0625rem;
}
.brand-accent { color: var(--brand); }
.navbar-nav .nav-link { font-size: .875rem; padding-inline: .6rem; }
.navbar-nav .nav-link.active { color: var(--brand); }

.breadcrumb { --bs-breadcrumb-divider-color: var(--bs-secondary-color); font-size: .75rem; }

.standfirst {
  border-left: 3px solid var(--brand);
  padding-left: 1.1rem;
}
.standfirst p:first-child {
  font-size: 1.0625rem;
  color: var(--bs-emphasis-color);
  max-width: 62ch;
}

/* ------------------------------------------------------------------ LOGOS OUTILS */

.tlogo {
  display: inline-block;
  flex: 0 0 auto;
  object-fit: contain;
  background: #ffffff0a;
  border: 1px solid var(--bs-border-color);
  padding: 2px;
}

/* Repli quand aucun logo n'a pu etre recupere. */
.tlogo-mono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--brand);
  background: var(--surface-2);
  line-height: 1;
}

/* Cellule « outil » du tableau : logo + nom + accroche. */
.tbl-tool { display: flex; align-items: center; gap: .55rem; }
.tbl-tool > span { min-width: 0; }

/* ------------------------------------------------------------------ GAGNANT */

/* Premier bloc sous le H1 : on doit savoir en une seconde quel outil gagne. */
.winner {
  border: 1px solid var(--bs-border-color);
  border-top: 3px solid var(--brand);
  background: var(--surface-2);
  padding: 1.25rem 1.4rem 1.4rem;
  margin-bottom: 1.25rem;
}
.winner-head { display: flex; gap: .9rem; align-items: flex-start; }
.winner-titles { min-width: 0; }
.winner-head .tlogo { margin-top: .15rem; }

.review-head { display: flex; gap: .85rem; align-items: center; margin-bottom: 1rem; }

.winner-label {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--brand);
  font-weight: 800;
  margin: 0 0 .35rem;
}
.winner-name {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  font-weight: 800;
  letter-spacing: -.025em;
  margin: 0 0 .4rem;
  line-height: 1.1;
}
.winner-line {
  margin: 0;
  color: var(--bs-body-color);
  max-width: 58ch;
}

.winner-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin: 1.1rem 0 1.2rem;
  padding: .9rem 0 0;
  border-top: 1px solid var(--bs-border-color);
}
.winner-facts dt {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--bs-secondary-color);
  font-weight: 700;
  margin-bottom: .15rem;
}
.winner-facts dd {
  margin: 0;
  color: var(--bs-emphasis-color);
  font-weight: 650;
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
}
.winner-facts > div:first-child dd { color: var(--brand); font-size: 1.125rem; }

.winner-cta { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

.trustline {
  font-size: .8125rem;
  color: var(--bs-secondary-color);
  border-left: 2px solid var(--bs-border-color);
  padding-left: .8rem;
  margin-bottom: 1.25rem;
  max-width: none;
}
.trustline b { color: var(--bs-body-color); }

.closing-cta {
  border: 1px solid var(--bs-border-color);
  border-left: 3px solid var(--brand);
  background: var(--surface-2);
  padding: 1.1rem 1.3rem;
  margin-top: 2.5rem;
}

/* ------------------------------------------------------------------ PICKS */

.pick {
  border: 1px solid var(--bs-border-color);
  border-top: 2px solid var(--brand);
  background: var(--surface);
  padding: .85rem 1rem;
  height: 100%;
}
.pick-label {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--bs-secondary-color);
  font-weight: 700;
  margin: 0 0 .3rem;
}
.pick-name { margin: 0 0 .2rem; font-weight: 700; font-size: 1.0625rem; }
.pick-name a { color: var(--bs-emphasis-color); text-decoration: none; }
.pick-name a:hover { color: var(--brand); }
.pick-detail { margin: 0; font-size: .8125rem; color: var(--bs-secondary-color); }

/* ------------------------------------------------------------------ TOC */

.toc {
  border: 1px solid var(--bs-border-color);
  background: var(--surface);
  padding: .9rem 1.1rem;
}
.toc-label {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--bs-secondary-color);
  font-weight: 700;
  margin: 0 0 .5rem;
}
.toc ol { margin: 0; padding-left: 1.1rem; font-size: .8125rem; }
.toc li { margin-bottom: .32rem; }
.toc a { color: var(--bs-body-color); text-decoration: none; }
.toc a:hover, .toc a.is-current { color: var(--brand); }

@media (min-width: 992px) {
  .sticky-side { position: sticky; top: 1rem; }
}

/* ------------------------------------------------------------------ SCORE */

.score {
  display: inline-flex;
  align-items: baseline;
  gap: .08em;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: .9375rem;
  padding: .08rem .38rem;
  border: 1px solid;
  white-space: nowrap;
}
.score-out { font-size: .625rem; font-weight: 500; opacity: .6; }
.score-lg { font-size: 1.5rem; padding: .15rem .5rem; }
.score-high { color: var(--good); border-color: rgba(69, 212, 131, .38); background: rgba(69, 212, 131, .07); }
.score-mid  { color: var(--mid);  border-color: rgba(240, 168, 0, .38);  background: rgba(240, 168, 0, .07); }
.score-low  { color: var(--low);  border-color: var(--bs-border-color); }

.scorebar { display: flex; gap: 2px; margin-top: .4rem; width: 108px; }
.scorebar-seg { flex: 1; height: 4px; background: var(--bs-border-color); position: relative; }
.scorebar-fill { position: absolute; inset: 0 auto 0 0; background: var(--brand); }

.score-detail .accordion-button {
  font-size: .8125rem;
  padding: .5rem .75rem;
  background: var(--surface);
  color: var(--bs-secondary-color);
}
.score-detail .accordion-button:not(.collapsed) { color: var(--brand); box-shadow: none; }
.score-detail .accordion-item { border: 1px solid var(--bs-border-color); }
.score-detail .accordion-body { padding: .75rem; }

/* ------------------------------------------------------------------ TABLEAUX */

.table-wrap { overflow-x: auto; border: 1px solid var(--bs-border-color); }

.table-compare {
  --bs-table-bg: transparent;
  --bs-table-color: var(--bs-body-color);
  font-size: .875rem;
  margin: 0;
  min-width: 46rem;
}
.table-compare thead th {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--bs-secondary-color);
  font-weight: 700;
  white-space: nowrap;
  background: var(--surface-2);
  border-bottom: 1px solid var(--bs-border-color);
  padding: .6rem .7rem;
  position: sticky;
  top: 0;
  z-index: 2;
}
.table-compare.sortable thead th[data-sort] { cursor: pointer; user-select: none; }
.table-compare.sortable thead th[data-sort]:hover { color: var(--brand); }
.table-compare.sortable thead th[data-sort]::after { content: " \2195"; opacity: .3; font-size: .8em; }
.table-compare.sortable thead th[aria-sort="ascending"]::after  { content: " \2191"; opacity: 1; color: var(--brand); }
.table-compare.sortable thead th[aria-sort="descending"]::after { content: " \2193"; opacity: 1; color: var(--brand); }
.table-compare td { padding: .65rem .7rem; vertical-align: middle; border-bottom: 1px solid var(--bs-border-color); }
.table-compare tbody tr:last-child td { border-bottom: 0; }
.table-compare tbody tr:hover { background: var(--surface); }
.table-compare .rank {
  width: 1%;
  font-variant-numeric: tabular-nums;
  color: var(--bs-secondary-color);
  font-weight: 700;
}
.tbl-name { color: var(--bs-emphasis-color); font-weight: 650; text-decoration: none; }
.tbl-name:hover { color: var(--brand); }

.tiers { min-width: 34rem; }
.spec-table { font-size: .8125rem; --bs-table-bg: transparent; max-width: 34rem; margin-bottom: 0; }
.spec-table th { width: 42%; font-weight: 400; }

.pill {
  display: inline-block;
  font-size: .6875rem;
  padding: .1rem .45rem;
  border: 1px solid var(--bs-border-color);
  color: var(--bs-secondary-color);
  white-space: nowrap;
}
.pill-accent { border-color: rgba(255, 45, 111, .4); color: var(--brand); background: var(--brand-dim); }

/* ------------------------------------------------------------------ CLASSEMENT */

.rank-entry {
  border-top: 1px solid var(--bs-border-color);
  padding-top: 1.6rem;
  margin-top: 1.6rem;
  scroll-margin-top: 1rem;
}
.rank-head { display: flex; gap: .9rem; align-items: flex-start; }
.rank-num {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  min-width: 1.6rem;
  padding-top: .1rem;
}
.rank-title { flex: 1 1 auto; min-width: 0; }
.rank-score { flex: 0 0 auto; text-align: right; }

.rank-facts {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .9rem;
  align-items: center;
  margin-top: .85rem;
  padding: .55rem .7rem;
  background: var(--surface);
  border: 1px solid var(--bs-border-color);
  font-size: .8125rem;
}
.fact { color: var(--bs-secondary-color); }
.fact b {
  color: var(--bs-secondary-color);
  font-weight: 700;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-right: .25rem;
}

.rank-body { margin-top: 1rem; }
.rank-body p { margin-bottom: .85rem; }
.rank-cta { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Colonne d'action du tableau : bouton de visite + lien discret vers la fiche. */
.tbl-review {
  display: block;
  font-size: .6875rem;
  color: var(--bs-secondary-color);
  text-decoration: none;
  margin-top: .2rem;
}
.tbl-review:hover { color: var(--brand); }

/* Marque dans la barre de navigation. */
.brand-mark { width: 20px; height: 20px; margin-right: .45rem; vertical-align: -4px; }

.proscons {
  border: 1px solid var(--bs-border-color);
  border-top-width: 2px;
  padding: .8rem 1rem;
  height: 100%;
  background: var(--surface);
}
.proscons.pros { border-top-color: var(--good); }
.proscons.cons { border-top-color: var(--brand); }
.proscons-h {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--bs-secondary-color);
  font-weight: 700;
  margin: 0 0 .5rem;
}
.proscons ul { padding-left: 1.05rem; font-size: .875rem; margin: 0; }
.proscons li { margin-bottom: .3rem; }

/* ------------------------------------------------------------------ NOTE EDITORIALE */

/* Doit se distinguer nettement du score calcule : le lecteur doit voir d'un
   coup d'oeil qu'il lit un avis, pas une arithmetique. */
.ednote {
  border: 1px solid rgba(69, 212, 131, .35);
  border-left: 3px solid var(--good);
  background: rgba(69, 212, 131, .06);
  padding: .8rem 1rem;
  margin: 1rem 0;
  font-size: .9375rem;
}
.ednote-h {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--good);
  font-weight: 800;
  margin: 0 0 .4rem;
}

.winner-ed {
  font-size: .8125rem;
  color: var(--bs-secondary-color);
  margin: -.4rem 0 .9rem;
}

/* ------------------------------------------------------------------ AVIS UTILISATEURS */

.ratings { display: flex; flex-wrap: wrap; gap: .4rem; }
.rating-chip {
  border: 1px solid var(--bs-border-color);
  background: var(--surface);
  padding: .15rem .5rem;
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
}
.rating-chip b {
  color: var(--bs-secondary-color);
  font-weight: 700;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-right: .3rem;
}

.uquote { margin: 0 0 .9rem; }
.uquote blockquote {
  margin: 0;
  border-left: 2px solid var(--bs-border-color);
  padding: .1rem 0 .1rem .9rem;
  color: var(--bs-emphasis-color);
  font-size: .9375rem;
}
.uquote blockquote::before { content: "\201C"; }
.uquote blockquote::after  { content: "\201D"; }
.uquote figcaption {
  font-size: .75rem;
  color: var(--bs-secondary-color);
  padding-left: 1rem;
  margin-top: .15rem;
}

/* Signal condense dans une fiche de classement. */
.usignal {
  border: 1px solid var(--bs-border-color);
  border-left: 2px solid var(--mid);
  background: var(--surface);
  padding: .6rem .8rem;
  margin: 1rem 0;
  font-size: .8125rem;
}
.usignal b {
  color: var(--bs-secondary-color);
  font-weight: 700;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ------------------------------------------------------------------ FAQ / SOURCES */

.faq .accordion-item { border: 1px solid var(--bs-border-color); border-bottom: 0; }
.faq .accordion-item:last-child { border-bottom: 1px solid var(--bs-border-color); }
.faq .accordion-button {
  background: var(--surface);
  color: var(--bs-emphasis-color);
  font-weight: 600;
  font-size: .9375rem;
  padding: .8rem 1rem;
}
.faq .accordion-button:not(.collapsed) { color: var(--brand); box-shadow: none; background: var(--surface-2); }
.faq .accordion-button:focus { box-shadow: none; border-color: var(--brand); }
.faq .accordion-body { padding: .3rem 1rem 1rem; }
.faq .accordion-body p { margin-bottom: .6rem; }

.sources { padding-left: 0; list-style: none; columns: 2; column-gap: 2rem; }
.sources li { break-inside: avoid; margin-bottom: .35rem; }
.src-name { color: var(--bs-emphasis-color); font-weight: 600; }
.sources a { color: var(--bs-secondary-color); word-break: break-all; }
@media (max-width: 767.98px) { .sources { columns: 1; } }

/* ------------------------------------------------------------------ LATERAL */

.sidebar-box {
  border: 1px solid var(--bs-border-color);
  background: var(--surface);
  padding: 1rem;
  margin-bottom: 1.25rem;
}
.sidebar-box h3 { font-size: .9375rem; margin-bottom: .5rem; }
.sidebar-box p:last-of-type { margin-bottom: .5rem; }
.linklist { list-style: none; padding: 0; margin: 0; font-size: .875rem; }
.linklist li { padding-bottom: .45rem; margin-bottom: .45rem; border-bottom: 1px solid var(--bs-border-color); }
.linklist li:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.linklist a { color: var(--bs-emphasis-color); text-decoration: none; font-weight: 600; }
.linklist a:hover { color: var(--brand); }

/* ------------------------------------------------------------------ DIVERS */

.review-list { margin: 0; padding: 0; list-style: none; }
.review-list li { padding: .85rem 0; border-bottom: 1px solid var(--bs-border-color); }
.review-list a { text-decoration: none; }
.review-title { color: var(--bs-emphasis-color); font-weight: 650; }
.review-list a:hover .review-title { color: var(--brand); }

.verdict-box {
  border: 1px solid var(--bs-border-color);
  border-left: 3px solid var(--brand);
  background: var(--surface);
  padding: 1rem 1.2rem;
}

.backtotop {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 30;
  border: 1px solid var(--bs-border-color);
  background: var(--surface-2);
  color: var(--bs-body-color);
  font-size: .75rem;
  padding: .4rem .6rem;
  cursor: pointer;
}
.backtotop:hover { color: var(--brand); border-color: var(--brand); }

h2[id], h3[id] { scroll-margin-top: 1rem; }

@media (max-width: 575.98px) {
  .rank-head { flex-wrap: wrap; }
  .rank-score { text-align: left; width: 100%; }
  .scorebar { width: 100%; max-width: 160px; }
}