/* ============================================================
   SEOPlus! by OptimizIA.xyz - Feuille de style commune
   DA "Lumiere & profondeur" : fond clair, halos diffus,
   verre depoli, accent orange, data en mono
   ============================================================ */

:root {
  --bg: #F7F9FD;
  --surface: #FFFFFF;
  --ink: #0F172A;
  --ink-soft: #334155;
  --muted: #5C6674;
  --orange: #F97316;
  --orange-deep: #EA580C;
  --orange-soft: #FFF3EA;
  --blue: #3B82F6;
  --blue-soft: #EFF5FF;
  --green: #16A34A;
  --red: #DC2626;
  --border: #E6EAF2;
  --dark: #0F172A;
  --dark-2: #1E293B;
  --glass: rgba(255, 255, 255, .72);
  --glass-brd: rgba(255, 255, 255, .85);
  --radius: 18px;
  --radius-sm: 10px;
  --pill: 100px;
  --shadow-card: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .07);
  --shadow-hover: 0 2px 4px rgba(15, 23, 42, .05), 0 12px 32px rgba(15, 23, 42, .09);
  --shadow-pop: 0 2px 6px rgba(15, 23, 42, .05), 0 24px 64px rgba(15, 23, 42, .13);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --font-display: "Outfit", sans-serif;
  --font-body: "Plus Jakarta Sans", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Une classe qui pose un display bat l'attribut hidden : on le reaffirme une
   fois pour toutes, sinon un bloc masque en JS reste visible. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }

/* Lumiere : deux halos fixes tres diffus qui traversent toute la page */
body::before, body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(90px);
}
body::before {
  width: 720px; height: 720px; top: -260px; right: -180px;
  background: radial-gradient(circle, rgba(249, 115, 22, .15), transparent 65%);
}
body::after {
  width: 640px; height: 640px; bottom: -300px; left: -220px;
  background: radial-gradient(circle, rgba(59, 130, 246, .12), transparent 65%);
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--orange); color: #fff; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Typographie ---------- */

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 700;
}

h1 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); letter-spacing: -0.025em; }
h3 { font-size: 1.15rem; }

.mono, .score-num, .stat b { font-variant-numeric: tabular-nums; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--orange-deep);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
}

.eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--orange);
  border-radius: 2px;
}

.lead { font-size: 1.13rem; color: var(--muted); max-width: 34em; }

.mono { font-family: var(--font-mono); }

/* ---------- Layout ---------- */

.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }

section { padding: 96px 0; }

.section-head { max-width: 620px; margin-bottom: 56px; }
.section-head p { color: var(--muted); margin-top: .8rem; }

/* ---------- Boutons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 28px;
  border-radius: var(--pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s var(--ease-out), transform .18s var(--ease-out), box-shadow .2s var(--ease-out), border-color .18s var(--ease-out);
  min-height: 48px;
}

.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: scale(.98); }

.btn-primary {
  background: linear-gradient(135deg, var(--orange), var(--orange-deep));
  color: #fff;
  box-shadow: 0 6px 18px rgba(234, 88, 12, .32);
}
.btn-primary:hover { box-shadow: 0 10px 26px rgba(234, 88, 12, .4); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--border);
}
.btn-ghost:hover { border-color: var(--ink); }

.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--dark-2); }

.btn-block { width: 100%; }

.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- Navigation ---------- */

.nav {
  position: sticky;
  top: 12px;
  z-index: 100;
  padding-top: 12px;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 62px;
  padding: 8px 12px 8px 24px;
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--glass-brd);
  border-radius: var(--pill);
  box-shadow: var(--shadow-card);
}

.brand {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  text-decoration: none;
  color: var(--ink);
}
.brand:hover { text-decoration: none; }

.brand-home {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  text-decoration: none;
  color: var(--ink);
}
.brand-home:hover { text-decoration: none; }

.brand-logo {
  width: 30px; height: 30px;
  border-radius: 9px;
  align-self: center;
  display: inline-block;
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}
.brand-name em { font-style: normal; color: var(--orange); }

.brand-by {
  font-family: var(--font-mono);
  font-size: .64rem;
  color: var(--muted);
  letter-spacing: .04em;
}
a.brand-by { text-decoration: none; white-space: nowrap; }
a.brand-by:hover { color: var(--orange-deep); text-decoration: underline; }
/* Ecran moyen : on sacrifie le by-line plutot que de casser la ligne */
@media (max-width: 1120px) {
  .brand-by { display: none; }
}

/* gap contenu : l'icone compte est toujours presente a droite de la CTA */
.nav-links { display: flex; align-items: center; gap: 1.4rem; }
.nav-links a {
  color: var(--ink-soft);
  font-weight: 600;
  font-size: .92rem;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--ink); text-decoration: none; }
/* la CTA nav est un bouton : garder le texte blanc (sinon .nav-links a l'emporte) */
.nav-links a.btn-primary, .nav-links a.btn-primary:hover { color: #fff; }

.nav .btn { padding: 10px 22px; min-height: 42px; font-size: .92rem; }

/* Icone compte (bonhomme) : discrete, toujours presente, tout a droite */
.nav-links a.nav-account {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: none;
  border: 1px solid var(--border); border-radius: 50%;
  color: var(--muted); background: #fff;
}
.nav-links a.nav-account:hover { color: var(--orange-deep); border-color: var(--orange); }
.nav-links a.nav-account svg { display: block; }

/* ---------- Menu mobile (burger + panneau, injectes par app.js) ---------- */

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px; height: 42px; flex: none;
  padding: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
}
.nav-burger span { display: block; width: 16px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .2s ease, opacity .2s ease; }
body.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
body.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile { display: none; }
body.nav-open .nav-mobile {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 24px; right: 24px; top: calc(100% + 8px);
  padding: 10px 20px 16px;
  background: #fff;
  border: 1px solid var(--glass-brd);
  border-radius: 22px;
  box-shadow: var(--shadow-hover);
}
.nav-mobile a { padding: 13px 6px; color: var(--ink-soft); font-weight: 600; font-size: .95rem; border-bottom: 1px solid var(--border); text-decoration: none; }
.nav-mobile a:hover { color: var(--ink); text-decoration: none; }
.nav-mobile a.btn { margin-top: 14px; border-bottom: 0; justify-content: center; }
.nav-mobile a.btn-primary, .nav-mobile a.btn-primary:hover { color: #fff; }

/* 900px et non 720 : entre les deux, les 5 liens + la CTA + le compte font
   884px de large et la page defilait horizontalement. */
@media (max-width: 900px) {
  .nav-burger { display: inline-flex; }
  .nav-inner { justify-content: flex-start; gap: 10px; }
  .nav-links { margin-left: auto; gap: 10px; }
  .nav-links a:not(.btn):not(.nav-account) { display: none; }
}

@media (max-width: 560px) {
  /* barre : marque + icone compte + burger ; la CTA vit dans le panneau */
  .nav-links a.btn { display: none; }
}

@media (max-width: 480px) {
  .brand-by { display: none; }
  .brand-logo { width: 26px; height: 26px; border-radius: 8px; }
  .nav .btn { padding: 9px 14px; font-size: .84rem; min-height: 38px; }
  .nav-mobile a.btn { padding: 12px 18px; font-size: .92rem; min-height: 44px; }
}

/* ---------- Hero ---------- */

.hero { padding: 88px 0 104px; overflow: hidden; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 64px;
  align-items: center;
}

.hero h1 em { font-style: normal; color: var(--orange); }

.hero .lead { margin: 1.4rem 0 2.2rem; }

.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-note {
  margin-top: 1.1rem;
  font-size: .84rem;
  color: var(--muted);
  font-family: var(--font-mono);
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* ---------- Carte rapport live (signature) ---------- */

/* Le rapport flotte en 3D au-dessus de deux couches fantomes */
.report-live {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  padding: 26px 26px 22px;
  max-width: 460px;
  position: relative;
  transform: perspective(1400px) rotateX(7deg) rotateY(-5deg);
  transition: transform .6s var(--ease-out);
}
.hero-grid:hover .report-live { transform: perspective(1400px) rotateX(2deg) rotateY(-1.5deg); }
.report-live::before, .report-live::after {
  content: "";
  position: absolute;
  z-index: -1;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .5);
}
.report-live::before { inset: 16px -22px -12px auto; width: 100%; }
.report-live::after { inset: 32px -44px -24px auto; width: 100%; background: rgba(255, 255, 255, .3); }

@media (max-width: 900px) {
  .report-live { transform: none; }
  .hero-grid:hover .report-live { transform: none; }
  .report-live::before, .report-live::after { display: none; }
}

.report-live-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.report-live-head .site {
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--muted);
}

.report-badge {
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--pill);
  background: var(--orange-soft);
  color: var(--orange-deep);
}

.report-score-row {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 22px;
}

.score-ring { position: relative; width: 108px; height: 108px; flex-shrink: 0; }
.score-ring svg { transform: rotate(-90deg); }
.score-ring .track { stroke: var(--border); }
.score-ring .value {
  stroke: var(--orange);
  stroke-linecap: round;
  transition: stroke-dashoffset 1.6s cubic-bezier(.22, 1, .36, 1);
}
.score-num {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
}
.score-num strong { font-size: 1.7rem; font-weight: 700; line-height: 1; }
.score-num span { font-size: .62rem; color: var(--muted); margin-top: 2px; }

/* Date de la mesure, sous le score. Sans elle, un rapport servi par le cache 24 h
   du moteur est indiscernable d'une analyse fraiche. */
.analyzed-at {
  margin-top: 10px;
  font-size: .82rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.analyzed-cache {
  padding: 2px 8px;
  border-radius: var(--pill);
  background: var(--orange-soft);
  color: var(--orange-deep);
  font-weight: 600;
  font-size: .76rem;
}
.analyzed-refresh { color: var(--orange-deep); font-weight: 600; text-decoration: underline; }

.score-meta p { font-weight: 700; font-family: var(--font-display); font-size: 1.02rem; }
.score-meta small { color: var(--muted); font-size: .82rem; display: block; margin-top: 4px; }

.cat-bars { display: grid; gap: 11px; }

.cat-bar { display: grid; grid-template-columns: 92px 1fr 34px; align-items: center; gap: 12px; }
.cat-bar label {
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--ink-soft);
  letter-spacing: .02em;
}
.cat-bar .track {
  height: 7px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--pill);
  overflow: hidden;
}
.cat-bar .fill {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  border-radius: var(--pill);
  background: var(--orange);
  transition: transform 1.2s cubic-bezier(.22, 1, .36, 1);
}
.cat-bar .fill.good { background: var(--green); }
.cat-bar .fill.warn { background: var(--orange); }
.cat-bar .fill.bad { background: var(--red); }
.cat-bar output {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--muted);
  text-align: right;
}

.report-finding {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--blue-soft);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: .82rem;
  color: var(--ink-soft);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s ease, transform .5s ease;
}
.report-finding.visible { opacity: 1; transform: none; }
.report-finding svg { flex-shrink: 0; margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .score-ring .value, .cat-bar .fill, .report-finding, .report-live { transition: none; }
  .report-finding { opacity: 1; transform: none; }
  .btn:hover, .step:hover, .cat-card:hover, .blog-card:hover, .price-card:hover,
  .pitem:hover { transform: none; }
}

/* ---------- Bandeau stats ---------- */

.section-more { text-align: center; margin-top: 40px; }

.stats-band { border-block: 1px solid var(--border); padding: 34px 0; background: var(--surface); }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 24px;
  text-align: center;
}

/* Le compteur d'analyses arrive apres une requete reseau. Tant qu'il portait
   l'attribut `hidden`, il sortait du flux : la grille passait de 4 a 5 cellules
   des que la reponse arrivait et TOUTES les colonnes se redisposaient, juste
   sous le hero. C'etait la source du CLS de 0,150 mesure le 10/08 (l'audit
   l'attribuait au panneau du hero, qui ne peut rien decaler : .cat-bar est une
   grille a colonnes fixes et .score-num est en position absolue).
   La cellule occupe desormais sa place des le premier rendu et seul son
   contenu apparait, donc plus aucune colonne ne bouge. */
.stat--pending { visibility: hidden; }

.stat b {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
}
.stat span { font-size: .82rem; color: var(--muted); }

@media (max-width: 720px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Etapes ---------- */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.step {
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 30px 26px;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); }

.step-num {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  color: var(--orange-deep);
  background: var(--orange-soft);
  border-radius: var(--pill);
  padding: 4px 12px;
  display: inline-block;
  margin-bottom: 16px;
}

.step h3 { margin-bottom: .5rem; }
.step p { color: var(--muted); font-size: .93rem; }

@media (max-width: 820px) {
  .steps { grid-template-columns: 1fr; }
}

/* ---------- Grille categories ---------- */

.cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

.cat-card {
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 22px 20px;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); }

.cat-card svg { color: var(--orange-deep); margin-bottom: 14px; }
.cat-card h3 { font-size: .98rem; margin-bottom: .35rem; }
.cat-card p { font-size: .84rem; color: var(--muted); }

@media (max-width: 900px) { .cats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .cats { grid-template-columns: 1fr; } }

/* ---------- Section GEO (dark) ---------- */

.geo {
  background: var(--dark);
  color: #E2E8F0;
  /* Meme rayon que les cartes claires : le bloc sombre se pose dans la grille
     au lieu de l ecraser. */
  border-radius: var(--radius);
  border: 1px solid rgba(148, 163, 184, .14);
  padding: 52px 44px;
}

.geo .eyebrow { color: var(--orange); }
.geo h2 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 1.95rem); }
.geo .lead { color: #94A3B8; font-size: .95rem; }

.geo-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 44px;
  align-items: center;
}

.geo-points { display: grid; gap: 18px; margin-top: 2rem; }
.geo-point { display: flex; gap: 14px; align-items: flex-start; }
.geo-point svg { flex-shrink: 0; color: var(--orange); margin-top: 3px; }
.geo-point b { display: block; color: #fff; font-size: .97rem; }
.geo-point span { font-size: .87rem; color: #94A3B8; }

.geo-terminal {
  background: #0B1220;
  border: 1px solid #1E293B;
  border-radius: var(--radius);
  padding: 22px;
  font-family: var(--font-mono);
  font-size: .78rem;
  line-height: 1.9;
  color: #7DD3FC;
}
.geo-terminal .dim { color: #475569; }
.geo-terminal .ok { color: #4ADE80; }
.geo-terminal .ko { color: #F87171; }

@media (max-width: 900px) {
  .geo { padding: 56px 28px; }
  .geo-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- Pricing ---------- */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-items: stretch;
  max-width: 780px;
  margin: 0 auto;
}

.price-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.price-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }

.price-card.featured {
  border: 1.5px solid rgba(249, 115, 22, .45);
  box-shadow: 0 4px 10px rgba(234, 88, 12, .08), 0 28px 70px rgba(234, 88, 12, .18);
  transform: scale(1.04);
  position: relative;
}
.price-card.featured:hover { transform: scale(1.04) translateY(-3px); }
@media (max-width: 900px) {
  .price-card.featured { transform: none; }
  .price-card.featured:hover { transform: translateY(-3px); }
}

.featured-tag {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--orange);
  color: #fff;
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--pill);
  white-space: nowrap;
}

.price-card h3 { font-size: 1.05rem; }
.price-card .price {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 14px 0 2px;
}
/* OFFRE-LANCEMENT (revert : supprimer cette règle) */
.price-card .price s {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--muted);
  margin-right: 8px;
}
.price-card .price small {
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
}
.price-card .price-desc { color: var(--muted); font-size: .88rem; margin-bottom: 22px; }

.price-features { list-style: none; display: grid; gap: 11px; margin-bottom: 28px; flex-grow: 1; }
.price-features li { display: flex; gap: 10px; font-size: .9rem; align-items: flex-start; }
.price-features svg { flex-shrink: 0; color: var(--green); margin-top: 4px; }
.price-features li.off { color: var(--muted); }
.price-features li.off svg { color: var(--border); }

@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; } }

.price-reassurance {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin: 26px auto 0;
  max-width: 780px;
}
.price-reassurance li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: .86rem;
  font-weight: 500;
}
.price-reassurance svg { color: var(--green); flex-shrink: 0; }

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

/* Blocs ouverts sur deux colonnes plutot qu'un accordeon etroit : les reponses
   sont lisibles sans clic (donc citables par les IA) et la section occupe la
   largeur du site au lieu d'une colonne de 760px. */
.faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.faq-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 28px;
}
.faq-block h3 {
  position: relative;
  font-size: 1.02rem;
  line-height: 1.3;
  padding-left: 15px;
  margin-bottom: 10px;
}
.faq-block h3::before {
  content: "";
  position: absolute; left: 0; top: .12em; bottom: .12em;
  width: 3px; border-radius: 2px;
  background: var(--orange);
}
.faq-block p { color: var(--muted); font-size: .92rem; }

@media (max-width: 800px) {
  .faq-grid { grid-template-columns: 1fr; gap: 12px; }
  .faq-block { padding: 22px 22px; }
}

/* ---------- Fondateurs ---------- */

.founders {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 44px 48px;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}

.founders-id { display: grid; gap: 16px; justify-items: start; }
.founders-avatars { display: flex; }
.avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--dark);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  border: 3px solid var(--surface);
}
.avatar + .avatar { margin-left: -14px; background: var(--orange); }
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* Le recit est long : deux colonnes de texte a partir du grand ecran, sinon la
   section devient une colonne interminable au milieu de la page. */
.founders blockquote { font-size: .99rem; color: var(--ink-soft); columns: 2; column-gap: 44px; }
.founders blockquote p { break-inside: avoid; }
.founders blockquote p + p { margin-top: 12px; }
.founders-contact {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: .88rem; color: var(--muted);
}
.founders-contact a { color: var(--orange-deep); }
.founders cite {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: .74rem;
  line-height: 1.5;
  color: var(--muted);
}

@media (max-width: 1000px) {
  .founders blockquote { columns: 1; }
}
@media (max-width: 720px) {
  .founders { grid-template-columns: 1fr; gap: 24px; padding: 32px 24px; }
}

/* ---------- CTA final ---------- */

.final-cta { text-align: center; }
.final-cta h2 { max-width: 18em; margin: 0 auto 1rem; }
.final-cta p { color: var(--muted); margin-bottom: 2rem; }

/* ---------- Bandeau "on le fait pour vous" ---------- */
.dfy-band {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  background:
    radial-gradient(460px 240px at 88% -30%, rgba(249, 115, 22, .18), transparent 70%),
    var(--dark);
  border: 1px solid rgba(148, 163, 184, .14);
  color: #E2E8F0;
  border-radius: var(--radius);
  padding: 28px 32px;
}
.dfy-tag {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .05em;
  color: #FDBA74;
  margin: 0 0 10px;
}
.dfy-band h3 { color: #fff; font-family: var(--font-display); font-size: 1.12rem; margin-bottom: 6px; }
.dfy-band p { color: #94A3B8; font-size: .88rem; max-width: 46em; margin: 0; }
.dfy-band .btn { flex-shrink: 0; padding: 10px 20px; min-height: 42px; font-size: .88rem; box-shadow: none; }
@media (max-width: 640px) {
  .dfy-band { padding: 24px 20px; }
  .dfy-band .btn { width: 100%; text-align: center; }
}

/* ---------- Footer ---------- */

.footer {
  background: var(--dark);
  color: #94A3B8;
  padding: 56px 0 36px;
  margin-top: 40px;
}

.footer-grid {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.footer .brand-name { color: #fff; }
.footer p { font-size: .86rem; max-width: 30em; margin-top: 10px; }
.footer a { color: #CBD5E1; }
.footer nav { display: grid; gap: 8px; font-size: .88rem; align-content: start; }

/* Bloc marque du footer : lien de retour en haut de la home. */
.footer-brand-line {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; width: fit-content;
  transition: opacity .15s ease;
}
/* text-decoration explicite : a:hover (0,1,1) bat .footer-brand-line (0,1,0)
   et resoulignait le logo au survol, comme .brand-home le neutralise dans la nav. */
.footer-brand-line:hover { opacity: .8; text-decoration: none; }
.footer-brand-line:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: var(--radius-sm); }
.footer-title {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; color: #64748B;
  margin-bottom: 4px;
}

.footer-bottom {
  border-top: 1px solid #1E293B;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: .78rem;
  font-family: var(--font-mono);
}
.footer-bottom a { color: var(--orange); }

/* ============================================================
   Pages app : /roast, /rapport
   ============================================================ */

.app-main { min-height: calc(100vh - 68px); padding: 64px 0 96px; }

.progress-track {
  height: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--pill);
  overflow: hidden;
  margin: 32px 0 12px;
}
.progress-fill {
  height: 100%;
  width: 100%;
  transform: scaleX(.04);
  transform-origin: left;
  background: linear-gradient(90deg, var(--orange), var(--orange-deep));
  border-radius: var(--pill);
  transition: transform .8s ease;
}

@keyframes pulse { 50% { opacity: .3; } }

.score-chip {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .82rem;
  padding: 3px 10px;
  border-radius: var(--pill);
}
.score-chip.good { background: #EAF7EE; color: var(--green); }
.score-chip.warn { background: var(--orange-soft); color: var(--orange-deep); }
.score-chip.bad { background: #FDECEC; color: var(--red); }

.hint { font-size: .78rem; color: var(--muted); margin-top: 6px; }

@media (max-width: 720px) {
  section { padding: 64px 0; }
  .hero { padding: 56px 0 72px; }
}

/* ============================================================
   Champ roast du hero
   ============================================================ */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.hero-roast {
  display: flex;
  gap: 10px;
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-brd);
  border-radius: var(--pill);
  padding: 6px 6px 6px 8px;
  box-shadow: var(--shadow-pop);
  max-width: 480px;
  transition: border-color .15s ease, box-shadow .2s ease;
}
.hero-roast:focus-within { border-color: var(--orange); }

.hero-roast input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: var(--font-mono);
  font-size: .98rem;
  color: var(--ink);
  padding: 0 8px 0 12px;
}
.hero-roast input:focus { outline: none; }
.hero-roast .btn { white-space: nowrap; padding: 12px 22px; min-height: 44px; }

@media (max-width: 480px) {
  .hero-roast { flex-direction: column; border-radius: var(--radius); padding: 12px; }
  .hero-roast input { padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); }
  .hero-roast .btn { width: 100%; }
}

/* ============================================================
   Page /roast
   ============================================================ */

/* ---- Loader ---- */
.roast-loading { max-width: 620px; padding: 24px 0 40px; }
.roast-loading-title { margin: 6px 0 12px; }
.roast-loading-title em { font-style: normal; color: var(--orange); }
.roast-loading-sub { color: var(--muted); margin-bottom: 12px; }

.roast-checklist { list-style: none; display: grid; gap: 12px; margin-top: 32px; }
.roast-checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .95rem;
  color: var(--muted);
  transition: color .3s ease;
}
.rc-dot {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border);
  flex-shrink: 0;
  position: relative;
  transition: border-color .3s ease, background .3s ease;
}
.roast-checklist li.active { color: var(--ink); font-weight: 600; }
.roast-checklist li.active .rc-dot { border-color: var(--orange); }
.roast-checklist li.active .rc-dot::after {
  content: "";
  position: absolute; inset: 3px;
  border-radius: 50%;
  background: var(--orange);
  animation: pulse 1.1s ease infinite;
}
.roast-checklist li.done { color: var(--ink-soft); }
.roast-checklist li.done .rc-dot { border-color: var(--green); background: var(--green); }
.roast-checklist li.done .rc-dot::after {
  content: "";
  position: absolute;
  left: 6px; top: 2px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
  .roast-checklist li.active .rc-dot::after { animation: none; }
}

/* ---- Erreur ---- */
.roast-error { max-width: 520px; padding: 40px 0; }
.roast-error p { color: var(--muted); margin: 12px 0 28px; }

.price-demo-link { display: block; text-align: center; margin-top: 12px; font-size: 0.88rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.price-demo-link:hover { color: var(--ink); }

/* ---- Pages légales ---- */
.legal { max-width: 720px; padding: 56px 20px 72px; }
.legal-back {
  display: inline-block;
  margin-bottom: 20px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  background: #fff;
}
.legal-back:hover { border-color: var(--orange); color: var(--orange-deep); text-decoration: none; }
.legal h1 { margin-bottom: 8px; }
.legal .legal-updated { font-size: 0.8rem; color: var(--muted); margin-bottom: 8px; }
.legal h2 { font-size: 1.15rem; margin: 32px 0 10px; }
.legal p, .legal li { color: var(--muted); line-height: 1.65; }
.legal p { margin: 10px 0; }
.legal ul { padding-left: 20px; margin: 10px 0; }
.legal a { color: var(--orange-deep); }

/* ---- Paywall (seam Stripe) ---- */
.rep-paywall { max-width: 560px; padding: 40px 0; }
.rep-paywall .pay-kicker { font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); margin-bottom: 10px; }
.rep-paywall h1 em { font-style: normal; color: var(--accent); }
.rep-paywall .pay-sub { color: var(--muted); margin: 14px 0 28px; }
.rep-paywall .pay-note { font-size: 0.85rem; color: var(--muted); margin-top: 14px; }

/* ---- Résultat ---- */
.roast-result { display: grid; gap: 28px; padding-bottom: 24px; }

.roast-verdict-head {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 28px 30px;
}
.rv-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.rv-host { font-size: .92rem; color: var(--ink-soft); font-weight: 600; }

.rv-scoreline { display: grid; grid-template-columns: auto auto 1fr; gap: 28px; align-items: center; }

.rv-ring { width: 132px; height: 132px; }
.rv-ring .score-num strong { font-size: 2.1rem; }

.score-ring .value.good { stroke: var(--green); }
.score-ring .value.warn { stroke: var(--orange); }
.score-ring .value.bad { stroke: var(--red); }

.rv-punch-text { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; line-height: 1.3; color: var(--ink); margin-bottom: 16px; }
.rv-counts { display: flex; flex-wrap: wrap; gap: 10px; }
.rv-count {
  font-family: var(--font-mono);
  font-size: .78rem;
  padding: 5px 12px;
  border-radius: var(--pill);
  color: var(--ink-soft);
  background: var(--bg);
  border: 1px solid var(--border);
}
.rv-count b { font-weight: 700; }
/* Trois etats, trois fonds. En n'habillant que le chiffre, les trois pastilles
   se ressemblaient trop pour que l'oeil distingue « a gagner » de « urgent ». */
.rv-count.good b { color: var(--green); }
.rv-count.warn { background: var(--orange-soft); border-color: rgba(217, 119, 6, .32); }
.rv-count.warn b { color: var(--orange-deep); }
.rv-count.bad { background: #FEE9E9; border-color: rgba(220, 38, 38, .4); color: #8F1414; font-weight: 600; }
.rv-count.bad b { color: var(--red); }

@media (max-width: 640px) {
  .rv-scoreline { grid-template-columns: auto auto; gap: 18px 24px; }
  .rv-punch { grid-column: 1 / -1; }
}

/* ---- Cartes IA ---- */
.roast-ai-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius-sm);
  padding: 22px 24px;
}
.roast-ai-card p { color: var(--ink-soft); font-size: .96rem; }
.ai-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--orange-deep);
  margin-bottom: 12px;
}

/* ---- Upsell ---- */
.roast-upsell {
  background: var(--dark);
  color: #E2E8F0;
  border-radius: var(--radius);
  border: 1px solid rgba(148, 163, 184, .14);
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.roast-upsell h2 { color: #fff; font-size: 1.18rem; }
.roast-upsell p { color: #94A3B8; font-size: .88rem; margin-top: 6px; max-width: 46em; }
.roast-upsell .btn { white-space: nowrap; flex-shrink: 0; padding: 10px 20px; min-height: 42px; font-size: .88rem; box-shadow: none; }

.roast-h2 { font-size: 1.5rem; }

/* ---- Catégories ---- */
.roast-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 680px) { .roast-cats { grid-template-columns: 1fr; } }

.roast-cat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.roast-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.roast-cat-head h3 { font-size: 1rem; }
.roast-cat-teaser { font-size: .88rem; color: var(--muted); }
/* ---- Carte des points (maquette D) : pastilles + constats nommes floutes ---- */
.rv-chap-num {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  color: var(--orange-deep);
  margin-right: 8px;
}
.rv-dots { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0 2px; }
.rv-pel { width: 13px; height: 13px; border-radius: 4px; display: inline-block; flex: none; }
.rv-pel.ok { background: var(--green); opacity: .78; }
.rv-pel.warn { background: var(--orange); }
.rv-pel.bad { background: var(--red); }
.rv-pel.na { background: var(--border); }

.rv-fx {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-top: 10px;
}
.rv-fx--bad { background: #FEF2F2; border-color: rgba(220, 38, 38, .32); }
.rv-fx--warn { background: var(--orange-soft); border-color: rgba(234, 88, 12, .3); }
.rv-fx-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
.rv-fx-ico {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: #fff;
  flex: none;
}
.rv-fx-ico svg { width: 12px; height: 12px; }
.rv-fx--bad .rv-fx-ico { background: var(--red); }
.rv-fx--warn .rv-fx-ico { background: var(--orange-deep); }
.rv-fx-label { font-size: .86rem; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.rv-fx--bad .rv-fx-label { color: #8F1414; }
.rv-fx--warn .rv-fx-label { color: #7C4A03; }
.rv-fx-tag {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
}
.rv-fx--bad .rv-fx-tag { color: var(--red); }
.rv-fx--warn .rv-fx-tag { color: var(--orange-deep); }
/* Le flou porte sur des barres vides, jamais sur un texte : le serveur
   n'envoie ni la valeur ni le correctif, l'inspecteur n'a rien a revéler. */
.rv-flou { margin-top: 9px; filter: blur(3.5px); opacity: .6; user-select: none; pointer-events: none; }
.rv-flou i { display: block; height: 8px; border-radius: 999px; background: var(--ink-soft); opacity: .32; margin-bottom: 6px; }
.rv-flou i:last-child { margin-bottom: 0; }
.rv-cadenas {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--orange-deep);
}
.rv-cadenas svg { flex: none; }
.rv-legende {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 4px 2px 0;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--muted);
}
.rv-legende span { display: inline-flex; align-items: center; gap: 6px; }

/* ---- Bouton d'appel vers les constats ---- */
.rv-jump {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(220, 38, 38, .35);
  background: #FEF2F2;
  color: #8F1414;
  font-family: var(--font-mono);
  font-size: .76rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.rv-jump:hover { background: #FEE2E2; border-color: rgba(220, 38, 38, .55); transform: translateY(-1px); }
.rv-jump:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.rv-jump-dots { display: inline-flex; gap: 3px; }
.rv-jump-dots i { width: 7px; height: 7px; border-radius: 50%; display: block; }
.rv-jump-dots i.bad { background: var(--red); }
.rv-jump-dots i.warn { background: var(--orange); }
@media (prefers-reduced-motion: reduce) { .rv-jump:hover { transform: none; } }

/* ---- Trajectoire : aujourd'hui, puis atteignable ---- */
.rv-traj { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rv-traj-nums { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-display); }
.rv-traj-now { font-size: 1.5rem; font-weight: 700; color: var(--muted); }
.rv-traj-arrow { font-size: 1.1rem; color: var(--orange); }
.rv-traj-goal { font-size: 2.1rem; font-weight: 800; color: var(--orange-deep); line-height: 1; }
.rv-traj-label {
  font-family: var(--font-mono);
  font-size: .68rem;
  text-align: center;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
@media (max-width: 560px) {
  .rv-find { grid-template-columns: 18px minmax(0, 1fr) 16px; }
  .rv-find-val, .rv-find-mask--val { display: none; }
}

/* ---- Rapport partiel (pare-feu anti-robot) ---- */
.roast-partiel {
  background: var(--orange-soft);
  border: 1px solid var(--orange);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 24px;
}
.roast-partiel b { display: block; margin-bottom: 6px; color: var(--orange-deep); }
.roast-partiel p { font-size: .92rem; color: var(--ink-soft); }

/* ---- Serveur + OG ---- */
.roast-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 680px) { .roast-facts { grid-template-columns: 1fr; } }

.roast-fact-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.fact-label { font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); display: block; margin-bottom: 16px; }

.srv-map {
  position: relative;
  margin: 0 0 18px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 2 / 1;
  background: radial-gradient(120% 140% at 50% 0%, #1E293B 0%, #0F172A 70%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.srv-map-svg { display: block; width: 100%; height: 100%; }
.srv-map-land { fill: #38465C; stroke: #0F172A; stroke-width: .5; }
.srv-marker-halo { fill: var(--orange); transform-box: fill-box; transform-origin: center; animation: srvPulse 2.4s ease-out infinite; }
.srv-marker-ring { fill: none; stroke: #fff; stroke-width: 2.5; opacity: .95; }
.srv-marker-dot { fill: var(--orange); }
@keyframes srvPulse {
  0%   { transform: scale(.28); opacity: .5; }
  70%  { opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .srv-marker-halo { animation: none; opacity: .3; transform: scale(.9); }
}

.fact-geo { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.fact-flag { font-size: 2rem; line-height: 1; }
.fact-geo b { display: block; font-size: 1rem; }
.fact-geo .mono { font-size: .82rem; color: var(--muted); }

.fact-list { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: .84rem; }
.fact-list dt { color: var(--muted); }
.fact-list dd { text-align: right; color: var(--ink-soft); word-break: break-all; }

.og-preview {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.og-img {
  aspect-ratio: 1200 / 630;
  background: var(--bg) center/cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--muted);
}
.og-img.empty { background: repeating-linear-gradient(45deg, var(--bg), var(--bg) 10px, #F1F4FA 10px, #F1F4FA 20px); }
.og-text { padding: 12px 14px; }
.og-text b { display: block; font-size: .92rem; margin-bottom: 4px; }
.og-text p { font-size: .82rem; color: var(--muted); }
.fact-note { font-size: .78rem; color: var(--muted); margin-top: 12px; }

/* ---- Core Web Vitals reels (PageSpeed Insights) ---- */
.cwv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.cwv-loading {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 12px;
  color: var(--muted); font-size: .9rem;
  padding: 26px 24px; border: 1px dashed var(--border); border-radius: var(--radius);
  background: var(--surface);
}
.cwv-spin {
  width: 18px; height: 18px; flex-shrink: 0;
  border: 2px solid var(--border); border-top-color: var(--orange);
  border-radius: 50%; animation: cwvSpin .8s linear infinite;
}
@keyframes cwvSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cwv-spin { animation: none; } }
.cwv-card {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: var(--radius); padding: 20px 22px;
  display: flex; flex-direction: column; gap: 3px;
}
.cwv-metric { font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.cwv-value { font-size: 2rem; font-weight: 800; line-height: 1.1; margin: 3px 0; }
.cwv-value small { font-size: .9rem; font-weight: 600; color: var(--muted); }
.cwv-rating { font-size: .8rem; font-weight: 700; width: fit-content; }
.cwv-desc { font-size: .8rem; color: var(--muted); margin-top: 5px; }
.cwv-ideal { font-family: var(--font-mono); font-size: .7rem; color: var(--muted); margin-top: 2px; }
.cwv-good { border-left-color: #16A34A; }
.cwv-good .cwv-rating { color: #16A34A; }
.cwv-warn { border-left-color: #D97706; }
.cwv-warn .cwv-rating { color: #D97706; }
.cwv-bad { border-left-color: var(--red); }
.cwv-bad .cwv-rating { color: var(--red); }

/* ---- CTA final ---- */
.roast-final-cta {
  text-align: center;
  background: var(--orange-soft);
  border: 1px solid #FCD9BE;
  border-radius: var(--radius);
  padding: 44px 32px;
}
.roast-final-cta h2 { max-width: 16em; margin: 0 auto 12px; }
.roast-final-cta p { color: var(--ink-soft); max-width: 40em; margin: 0 auto 24px; font-size: .95rem; }

/* ======================================================
   /rapport - audit complet (offre 9,90 EUR)
   ====================================================== */

.report-badge--paid { background: var(--dark); color: #fff; }

.report-block { margin-top: 56px; }
.report-block .section-head { margin-bottom: 28px; }

.rv-meta-actions { display: flex; align-items: center; gap: 12px; }
.btn-print { padding: 8px 16px; font-size: .85rem; }

/* ---- Hero dark du rapport (format cas clients OptimizIA.xyz) ---- */
.app-main--report { padding-bottom: 0; }
.rep-hero {
  background: var(--dark);
  color: #E2E8F0;
  padding: 64px 0 56px;
  position: relative;
  overflow: hidden;
  margin-top: -64px;
}
.rep-hero::before {
  content: "";
  position: absolute; top: -120px; right: -80px;
  width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(249, 115, 22, .14) 0%, transparent 65%);
  pointer-events: none;
}
.rep-hero::after {
  content: "";
  position: absolute; bottom: -100px; left: 100px;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, .08) 0%, transparent 60%);
  pointer-events: none;
}
.rep-hero .container { position: relative; z-index: 1; }
.rep-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--orange);
  background: rgba(249, 115, 22, .08);
  border: 1px solid rgba(249, 115, 22, .25);
  padding: 6px 16px; border-radius: var(--pill);
  margin-bottom: 26px;
}
.rep-hero-grid { display: grid; grid-template-columns: 1fr 300px; gap: 56px; align-items: center; }
.rep-hero-title { font-size: clamp(1.8rem, 4vw, 2.6rem); color: #fff; margin-bottom: 16px; }
.rep-hero-title em { font-style: normal; color: var(--orange); }
.rep-hero-title span { font-family: var(--font-mono); font-weight: 600; font-size: .68em; color: #CBD5E1; }
.rep-hero-sub { color: #94A3B8; font-size: .92rem; line-height: 1.7; margin-bottom: 20px; }
.rep-archive-note {
  margin: -10px 0 20px; padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  color: #CBD5E1; font-size: .84rem; line-height: 1.6;
}
.rep-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.rep-tag {
  padding: 5px 14px; border-radius: var(--pill);
  font-size: .76rem; font-weight: 500;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #94A3B8;
}
.rep-tag--orange { background: rgba(249, 115, 22, .1); border-color: rgba(249, 115, 22, .3); color: var(--orange); }
.rep-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-print--hero {
  background: var(--orange); color: #fff; border: 1.5px solid var(--orange);
  padding: 9px 18px; min-height: 40px; font-size: .85rem;
}
.btn-print--hero:hover { background: var(--orange-deep); border-color: var(--orange-deep); color: #fff; }
.btn-print--ghost {
  background: transparent; color: #E2E8F0;
  border: 1.5px solid rgba(255, 255, 255, .22);
  padding: 9px 18px; min-height: 40px; font-size: .85rem;
}
.btn-print--ghost:hover { border-color: var(--orange); color: var(--orange); }
.rep-ia-note { margin-top: 12px; font-size: .78rem; color: #94A3B8; max-width: 540px; }

.rep-score-card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(249, 115, 22, .3);
  border-radius: 20px;
  padding: 28px 22px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.rep-score-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--orange), #FBBF24);
}
.rep-score-label {
  font-family: var(--font-mono);
  font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: #64748B; margin-bottom: 16px;
}
.rep-score-card .score-ring { margin: 0 auto; }
.rep-score-card .score-ring .track { stroke: rgba(255, 255, 255, .08); }
.rep-score-card .score-num strong { color: #fff; font-size: 2.2rem; }
.rep-score-card .score-num span { color: #64748B; }
/* La carte de score du rapport est posee sur le hero sombre */
.rep-score-card .analyzed-at { justify-content: center; color: #94A3B8; }
.rep-score-card .analyzed-cache { background: rgba(249, 115, 22, .18); color: #FDBA74; }
.rep-score-card .analyzed-refresh { color: #FDBA74; }

/* La carte de score du rapport est sur fond sombre : les couleurs de la
   trajectoire, calees sur le bilan clair, y seraient illisibles. */
.rep-score-card .rv-traj { margin-top: 14px; }
.rep-score-card .rv-traj-now { color: #94A3B8; }
.rep-score-card .rv-traj-arrow { color: #FDBA74; }
.rep-score-card .rv-traj-goal { color: #FDBA74; }
.rep-score-card .rv-traj-label { color: #94A3B8; }
.rep-score-verdict { margin-top: 10px; font-size: .86rem; color: #94A3B8; line-height: 1.5; }

.report-body { padding-bottom: 96px; }

@media (max-width: 900px) {
  .rep-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .rep-score-card { max-width: 340px; }
}

/* ---- Summary box ---- */
.summary-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius);
  padding: 26px 30px;
  box-shadow: var(--shadow-card);
  margin-bottom: 24px;
}
.summary-oneliner { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; line-height: 1.45; margin-bottom: 12px; }
.summary-verdict { color: var(--ink-soft); font-size: .95rem; line-height: 1.7; margin-bottom: 16px; }

/* ---- Sommaire numerote du detail complet (maquette B) ---- */
.rep-sommaire {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  margin-bottom: 18px;
}
.rep-som-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 2fr) minmax(90px, 1fr) 74px 66px 76px;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--border);
  font-size: .86rem;
}
.rep-som-row:last-child { border-bottom: none; }
a.rep-som-row:hover { background: var(--bg); }
a.rep-som-row:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.rep-som-num { font-size: .74rem; font-weight: 600; color: var(--orange-deep); text-align: right; }
.rep-som-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-som-bar .bar-track { display: block; height: 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 3px; overflow: hidden; }
.rep-som-bar .bar-fill { display: block; height: 100%; border-radius: 3px; }
.rep-som-bar .bar-fill.good { background: var(--green); }
.rep-som-bar .bar-fill.warn { background: var(--orange); }
.rep-som-bar .bar-fill.bad { background: var(--red); }
.rep-som-cible { font-family: var(--font-mono); font-size: .66rem; color: var(--orange-deep); white-space: nowrap; }
.rep-som-pts { font-family: var(--font-mono); font-size: .66rem; color: var(--muted); white-space: nowrap; text-align: right; }
.rep-som-row .score-chip { justify-self: end; }
.rep-som-row--na { color: var(--muted); }
@media (max-width: 720px) {
  .rep-som-row { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .rep-som-bar, .rep-som-cible, .rep-som-pts { display: none; }
}

/* Numero de chapitre (titre) et reference chapitre.point (constat) */
.rep-chap-num { font-size: .74rem; font-weight: 600; color: var(--orange-deep); margin-right: 8px; }
.check-ref { font-size: .7rem; color: var(--muted); flex: none; }

/* ---- Findings : accordeon filtrable ---- */
.tab-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.tab-btn {
  padding: 8px 18px; border-radius: var(--pill);
  font-family: var(--font-body); font-size: .85rem; font-weight: 600;
  border: 1.5px solid var(--border);
  background: transparent; color: var(--ink-soft);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.tab-btn:hover { background: var(--surface); color: var(--ink); border-color: rgba(15, 23, 42, .2); }
.tab-btn.active { background: var(--orange); color: #fff; border-color: var(--orange); box-shadow: 0 4px 14px rgba(249, 115, 22, .3); }

.findings-list { display: flex; flex-direction: column; gap: 10px; }
.finding {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow .2s ease;
}
.finding:hover { box-shadow: var(--shadow-card); }
.finding-hd {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
}
.finding-hd::-webkit-details-marker { display: none; }
.badge {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--pill);
  min-width: 84px; text-align: center;
}
.b-critical { background: #FDECEC; color: var(--red); border: 1px solid rgba(220, 38, 38, .25); }
.b-medium { background: var(--orange-soft); color: var(--orange-deep); border: 1px solid rgba(249, 115, 22, .3); }
.finding-title { flex: 1; font-size: .92rem; font-weight: 600; }
.finding-cat { font-family: var(--font-mono); font-size: .68rem; color: var(--muted); flex-shrink: 0; }
.finding-chevron { flex-shrink: 0; color: var(--muted); transition: transform .25s ease; }
.finding[open] > .finding-hd .finding-chevron { transform: rotate(180deg); }
.finding-body { border-top: 1px solid var(--border); padding: 16px 20px; }
.finding-desc { font-size: .88rem; color: var(--ink-soft); margin-bottom: 12px; }
.finding-desc .mono { font-size: .8rem; }
.finding-fix {
  background: var(--orange-soft);
  border: 1px solid rgba(249, 115, 22, .25);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: .86rem; color: var(--ink); line-height: 1.55;
}
.finding-fix strong { color: var(--orange-deep); }

@media (max-width: 640px) {
  .finding-cat { display: none; }
}

/* ---- Synthese ---- */
.exec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
.exec-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
.exec-card h3 { font-size: 1rem; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.exec-card h3::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.exec-card--faiblesses h3::before { background: var(--red); }
.exec-card ul { list-style: none; display: grid; gap: 14px; }
.exec-card li { display: flex; gap: 12px; align-items: flex-start; }
.exec-card li .score-chip { flex-shrink: 0; margin-top: 2px; }
.exec-card li b { font-size: .94rem; }
.exec-card li p { font-size: .86rem; color: var(--muted); margin-top: 2px; }

.exec-note { font-size: .84rem; color: var(--muted); margin-top: 12px; }

/* Outil gratuit : generateur llms.txt */
.tool-form { display: grid; gap: 18px; margin-bottom: 32px; }
.tool-field label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; }
.tool-field input, .tool-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  color: var(--ink);
}
.tool-field input:focus, .tool-field textarea:focus {
  outline: 2px solid var(--orange);
  outline-offset: 1px;
  border-color: transparent;
}
.tool-field textarea { resize: vertical; }
.tool-result { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; margin-bottom: 32px; }
.tool-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--orange-soft);
}
.tool-result-file { font-family: var(--font-mono); font-size: .85rem; font-weight: 600; color: var(--orange-deep); }
.tool-result-actions { display: flex; gap: 10px; }
.tool-result pre {
  margin: 0;
  padding: 18px 20px;
  font-family: var(--font-mono);
  font-size: .82rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--ink);
  color: #E2E8F0;
  min-height: 200px;
}
.tool-steps { margin-bottom: 24px; }
.tool-steps h2 { font-size: 1.2rem; margin-bottom: 12px; }
.tool-steps ol { padding-left: 1.2em; display: grid; gap: 10px; color: var(--ink-soft); }

@media (max-width: 720px) {
  .exec-grid { grid-template-columns: 1fr; }
  .rv-meta-actions { flex-direction: column; align-items: flex-end; gap: 8px; }
}

/* ---- Plan d'action : timeline en phases ---- */
.phase-list { display: flex; flex-direction: column; }
.phase {
  display: grid; grid-template-columns: 190px 1fr;
  border-left: 2px solid rgba(249, 115, 22, .3);
  padding-left: 32px;
  position: relative;
}
.phase::before {
  content: "";
  position: absolute; left: -8px; top: 30px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--orange);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 2px rgba(249, 115, 22, .3);
}
.phase-meta { padding: 24px 0; }
.phase-name { font-family: var(--font-mono); font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--orange-deep); margin-bottom: 6px; }
.phase-title { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; line-height: 1.3; }
.phase-gain { font-family: var(--font-mono); font-size: .7rem; color: var(--muted); margin-top: 8px; }
.phase-items { padding: 24px 0 24px 28px; display: flex; flex-direction: column; gap: 10px; }
.plan-clear { color: var(--green); font-size: .9rem; align-self: center; }
.pitem {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.pitem:hover { box-shadow: var(--shadow-card); border-color: rgba(249, 115, 22, .35); }
.pitem-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pitem-top b { font-size: .93rem; }
.pitem-badge {
  flex-shrink: 0;
  font-family: var(--font-mono); font-size: .58rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--pill);
}
.pitem-badge.bad { background: #FDECEC; color: var(--red); }
.pitem-badge.warn { background: var(--orange-soft); color: var(--orange-deep); }
.plan-val { font-family: var(--font-mono); font-size: .76rem; font-weight: 400; color: var(--muted); display: block; margin-top: 2px; }
.plan-fix { font-size: .85rem; color: var(--ink-soft); margin-top: 6px; }
.pitem-cat { display: block; font-family: var(--font-mono); font-size: .64rem; color: var(--muted); margin-top: 8px; }

@media (max-width: 720px) {
  .phase { grid-template-columns: 1fr; padding-left: 24px; }
  .phase-meta { padding-bottom: 0; }
  .phase-items { padding-left: 0; }
}

/* ---- Detail complet par categorie : accordeons ---- */
.report-cats { display: grid; gap: 12px; }
.rep-cat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.rep-cat-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 24px; cursor: pointer; list-style: none;
}
.rep-cat-head::-webkit-details-marker { display: none; }
.rep-cat-head h3 { font-size: 1.02rem; }
.rep-cat-right { display: flex; align-items: center; gap: 12px; }
.rep-cat[open] > .rep-cat-head { border-bottom: 1px solid var(--border); }
.rep-cat[open] > .rep-cat-head .finding-chevron { transform: rotate(180deg); }
.rep-cat .rep-checks { padding: 18px 24px; }
.rep-checks { list-style: none; display: grid; gap: 12px; }
.rep-check { display: flex; gap: 12px; }
.rep-check-ico {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .74rem; font-weight: 700; margin-top: 1px;
}
.rep-check.good .rep-check-ico { background: #EAF7EE; color: var(--green); }
.rep-check.warn .rep-check-ico { background: var(--orange-soft); color: var(--orange-deep); }
.rep-check.bad .rep-check-ico { background: #FDECEC; color: var(--red); }
.rep-check-body { flex: 1; }
.rep-check-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rep-check-top b { font-size: .92rem; }
.rep-check-val { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.rep-check-fix { font-size: .84rem; color: var(--ink-soft); margin-top: 4px; }

/* V4 : une carte par verification (ce qu'on mesure + valeur relevee + correctif) */
.rep-cat-mini { font-size: .76rem; color: var(--muted); white-space: nowrap; }
.rep-cat .check-grid {
  padding: 18px 24px; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.check-card {
  display: flex; flex-direction: column; gap: 7px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
  border-left-width: 3px; padding: 14px 16px;
}
.check-card.good { border-left-color: var(--green); }
.check-card.warn { border-left-color: var(--orange); }
.check-card.bad { border-left-color: var(--red); }
.check-card-head { display: flex; align-items: center; gap: 8px; }
.check-card-head b { font-size: .9rem; flex: 1; min-width: 0; }
.check-chip {
  font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.check-chip.good { background: #EAF7EE; color: var(--green); }
.check-chip.warn { background: var(--orange-soft); color: var(--orange-deep); }
.check-chip.bad { background: #FDECEC; color: var(--red); }
/* Niveau "info" : un constat mesuré mais non noté (ancienneté du domaine,
   technologies, hébergement). Bleu, pour qu'on ne le lise ni comme une
   réussite ni comme un défaut. */
.check-chip.info { background: var(--blue-soft); color: var(--blue); }
.check-card.info .rep-check-ico { background: var(--blue-soft); color: var(--blue); }
.check-what { font-size: .8rem; color: var(--muted); }
.check-meas { font-size: .8rem; color: var(--ink-soft); }
.check-meas b { font-weight: 600; }
.check-meas .mono { word-break: break-word; }
.check-card .rep-check-fix { margin-top: 0; }
.check-card .learn-more { align-self: flex-start; margin-top: 2px; }
@media (max-width: 720px) {
  .rep-cat .check-grid { grid-template-columns: 1fr; padding: 14px 16px; }
  .rep-cat-mini { display: none; }
}

/* Objections frequentes : desamorce avant que le lecteur aille contester ailleurs */
.obj-list { display: grid; gap: 10px; }
.obj-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); overflow: hidden;
}
.obj-item > summary {
  padding: 15px 20px; cursor: pointer; list-style: none;
  font-weight: 600; font-size: .92rem; color: var(--ink);
}
.obj-item > summary::-webkit-details-marker { display: none; }
.obj-item > summary::before {
  content: "?"; display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; margin-right: 10px; border-radius: 50%;
  background: var(--orange-soft); color: var(--orange-deep);
  font-size: .72rem; font-weight: 700; vertical-align: -3px;
}
.obj-item[open] > summary { border-bottom: 1px solid var(--border); }
.obj-item > p {
  padding: 14px 20px 16px 49px;
  font-size: .87rem; color: var(--ink-soft); line-height: 1.65;
}
@media (max-width: 720px) { .obj-item > p { padding-left: 20px; } }

/* Lien pedagogique : renvoie vers l'article du blog qui traite le point */
.learn-more {
  display: inline-block; margin-top: 8px;
  font-size: .82rem; font-weight: 600;
  color: var(--orange-deep); text-decoration: none;
  border-bottom: 1px solid var(--orange);
}
.learn-more:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ---- Wedges : IA-readiness + souverainete ---- */
.report-wedges { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 56px; }
.report-wedge {
  background: var(--dark); color: #E2E8F0;
  border-radius: var(--radius); padding: 22px 24px;
  border: 1px solid rgba(148, 163, 184, .14);
  display: flex; flex-direction: column;
}
.wedge-tag {
  font-family: var(--font-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--orange); display: block; margin-bottom: 12px;
}
.report-wedge h3 { color: #fff; font-size: 1.02rem; margin-bottom: 16px; }
.wedge-list { list-style: none; display: grid; gap: 12px; margin-bottom: 16px; }
.wedge-list li { display: flex; gap: 12px; align-items: flex-start; }
.wedge-list li span {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: .74rem; font-weight: 700;
}
.wedge-list li.ok span { background: rgba(22, 163, 74, .18); color: #4ADE80; }
.wedge-list li.ko span { background: rgba(220, 38, 38, .18); color: #F87171; }
.wedge-list li b { display: block; color: #fff; font-size: .9rem; font-weight: 600; }
.wedge-list li em { font-style: normal; font-size: .8rem; color: #94A3B8; }
.wedge-lead { font-size: .95rem; margin-bottom: 16px; }
.wedge-facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: .84rem; margin-bottom: 16px; }
.wedge-facts dt { color: #94A3B8; }
.wedge-facts dd { text-align: right; color: #E2E8F0; word-break: break-all; }
.wedge-note { font-size: .84rem; color: #94A3B8; border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 14px; margin-top: auto; }

@media (max-width: 720px) {
  .report-wedges { grid-template-columns: 1fr; }
}

/* ---- L3 : fichiers prets a poser ---- */
/* minmax(0,1fr) : sans lui la colonne implicite prend la largeur max-content
   des <pre> et le rapport deborde horizontalement sur petits ecrans */
.report-files { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.file-card {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px; background: #fff;
}
.file-card--badge { border-style: dashed; background: var(--orange-soft); border-color: var(--orange); }
/* Apercu du badge : on le montre rendu, pas seulement en code. */
.file-preview {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 18px 18px;
  margin: 14px 0 12px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.file-preview-tag {
  position: absolute; top: 8px; left: 12px;
  font-family: var(--font-mono); font-size: .64rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted);
}
.file-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.file-id b { font-size: .96rem; display: block; }
.file-loc { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); display: block; margin-top: 3px; }
.file-copy {
  flex-shrink: 0; cursor: pointer; border: 1px solid var(--dark);
  background: var(--dark); color: #fff; font-family: var(--font-mono); font-size: .72rem;
  padding: 7px 14px; border-radius: var(--pill); transition: background .15s ease;
}
.file-copy:hover { background: var(--dark-2); }
.file-copy.copied { background: var(--green); border-color: var(--green); }
.file-desc { font-size: .86rem; color: var(--ink-soft); margin: 10px 0 12px; }
.code-wrap { background: var(--dark); border-radius: var(--radius-sm); overflow: hidden; }
.code-header {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.code-dot { width: 10px; height: 10px; border-radius: 50%; }
.code-dot--r { background: #EF4444; }
.code-dot--y { background: #F59E0B; }
.code-dot--g { background: #22C55E; }
.code-name { margin-left: 8px; font-family: var(--font-mono); font-size: .68rem; color: #64748B; }
.file-code {
  background: var(--dark); color: #E2E8F0;
  padding: 14px 16px; overflow-x: auto; font-family: var(--font-mono); font-size: .78rem; line-height: 1.55; margin: 0;
}
.file-code code { white-space: pre; font-family: inherit; color: inherit; }

/* ---- L4 : benchmark concurrent ---- */
#rep-bench-block .section-head { max-width: none; }
.bench-form { display: flex; gap: 12px; flex-wrap: wrap; }
.bench-form input {
  flex: 1; min-width: 220px; padding: 13px 16px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: .95rem; font-family: inherit;
}
.bench-form input:focus { outline: none; border-color: var(--orange); }
.bench-error { color: var(--red); font-size: .86rem; margin-top: 10px; }
.bench-result { margin-top: 28px; }
.bench-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-bottom: 20px; }
.bench-col { text-align: center; padding: 18px; border-radius: var(--radius); border: 1px solid var(--border); }
.bench-col.you { background: var(--orange-soft); border-color: var(--orange); }
.bench-col span { font-family: var(--font-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); display: block; }
.bench-col b { font-size: 2.4rem; font-weight: 800; display: block; line-height: 1.1; }
.bench-col em { font-style: normal; font-size: .74rem; color: var(--muted); display: block; word-break: break-all; margin-top: 2px; }
.bench-vs { font-family: var(--font-mono); font-size: .82rem; color: var(--muted); }
.bench-rows { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.bench-row { display: grid; grid-template-columns: 1fr 64px 64px; align-items: center; padding: 11px 16px; border-top: 1px solid var(--border); }
.bench-row:first-child { border-top: none; }
.bench-row--head { background: #F8FAFC; }
.bench-row--head .bench-cat, .bench-row--head .bench-val { font-family: var(--font-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.bench-cat { font-size: .86rem; }
.bench-val { text-align: center; font-weight: 700; font-size: .92rem; }
.bench-val.win { color: var(--green); }
.bench-val.lose { color: var(--muted); }
.bench-summary { margin-top: 18px; font-size: .92rem; color: var(--ink-soft); }
.bench-quota { margin-top: 10px; font-family: var(--font-mono); font-size: .72rem; color: var(--muted); }
.bench-verdict { margin-top: 18px; padding: 18px 20px; border: 1px solid var(--orange); border-radius: var(--radius); background: var(--orange-soft); }
.bench-verdict p { font-size: .92rem; color: var(--ink-soft); margin: 0; }
.bench-verdict .eyebrow { margin-bottom: 8px; }
.bench-verdict-loading { color: var(--muted); font-style: italic; }

/* Ecart en points sous le « vs » : le chiffre que la personne cherche en
   premier, et qu'elle devait calculer de tete jusqu'ici. */
.bench-vs { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bench-vs-word { font-family: var(--font-mono); font-size: .82rem; color: var(--muted); }
.bench-gap { font-family: var(--font-mono); font-size: .68rem; font-weight: 700; color: var(--orange); text-align: center; max-width: 96px; line-height: 1.25; }

/* Volume de constats derriere le score : 60/100 sur deux constats rates n'est
   pas la meme situation que 60/100 sur neuf. */
.bench-cat-note { display: block; font-style: normal; font-family: var(--font-mono); font-size: .66rem; color: var(--muted); margin-top: 2px; }

/* Le diff constat par constat. Fond teinte plutot qu'un rail vertical :
   le rail lit comme un onglet lateral et alourdit une liste deja dense. */
.bench-diff { margin-top: 24px; }
.bench-diff-h { display: flex; align-items: center; gap: 9px; font-size: 1rem; font-weight: 700; margin: 0 0 4px; }
.bench-diff-h span { font-family: var(--font-mono); font-size: .7rem; font-weight: 700; color: var(--orange); background: var(--orange-soft); border-radius: 999px; padding: 2px 9px; }
.bench-diff-sub { font-size: .86rem; color: var(--muted); margin: 0 0 14px; }
.bench-diff-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bench-diff-item { padding: 13px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: #FFF; }
.bench-diff-item--bad { background: var(--red-soft, #FEF2F2); border-color: #FECACA; }
.bench-diff-item--good { background: var(--green-soft, #F0FDF4); border-color: #BBF7D0; }
.bench-diff-cat { display: block; font-family: var(--font-mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 3px; }
.bench-diff-item b { display: block; font-size: .92rem; font-weight: 700; }
.bench-diff-vs { display: block; font-family: var(--font-mono); font-size: .74rem; color: var(--ink-soft); margin-top: 4px; }
.bench-diff-fix { display: block; font-size: .84rem; color: var(--ink-soft); margin-top: 7px; }
.bench-diff-more { font-size: .8rem; color: var(--muted); margin: 10px 0 0; }

@media (max-width: 560px) {
  .bench-col b { font-size: 1.9rem; }
  .bench-row { grid-template-columns: 1fr 48px 48px; }
  .bench-gap { max-width: 72px; font-size: .62rem; }
}

/* ---- CTA accompagnement + a propos (rapport) ---- */
.rep-cta-section { text-align: center; margin-top: 64px; padding: 8px 24px 0; }
.rep-cta-section .eyebrow::before { display: none; }
.rep-cta-section h2 { font-size: 1.5rem; max-width: 20em; margin: 0 auto 14px; }
.rep-cta-section h2 em { font-style: normal; color: var(--orange-deep); }
.rep-cta-section > p { color: var(--muted); font-size: .95rem; max-width: 42em; margin: 0 auto 20px; }
.cta-pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 24px; }
.cta-pill {
  padding: 5px 14px; border-radius: var(--pill);
  font-size: .78rem; font-weight: 500;
  background: var(--orange-soft);
  border: 1px solid rgba(249, 115, 22, .25);
  color: var(--orange-deep);
}
.cta-sub { margin-top: 44px; font-family: var(--font-mono); font-size: .72rem; color: var(--muted); }


.rep-about {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 44px;
  margin-top: 64px;
}
.rep-about-title { font-size: 1.7rem; margin-bottom: 12px; }
.rep-about-title span { color: var(--orange); }
.rep-about-logo { width: 230px; height: auto; margin-bottom: 16px; }
.rep-about-desc { color: var(--ink-soft); font-size: .93rem; line-height: 1.7; margin-bottom: 12px; }
.rep-about-services { display: flex; flex-direction: column; gap: 10px; }
.asvc {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  font-size: .86rem; color: var(--ink-soft);
}
.asvc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); flex-shrink: 0; }

@media (max-width: 860px) {
  .rep-about { grid-template-columns: 1fr; padding: 28px 24px; gap: 28px; }
}

/* ======================================================
   Blog : hub + articles
   ====================================================== */

.post-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  color: var(--muted);
  font-weight: 600;
  font-size: .9rem;
}
.post-back:hover { color: var(--ink); text-decoration: none; }
/* Le chevron ne remplit pas son viewBox (trace de 9 a 15 sur 24) : sans ces
   marges negatives il commence 6px trop a droite, donc decale du bord du titre,
   et le blanc interne s ajoute au gap. */
.post-back svg { width: 16px; height: 16px; margin-left: -6px; margin-right: -5px; stroke-width: 2.4; }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.blog-card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; text-decoration: none; color: inherit;
  transition: border-color .2s var(--ease-out), transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.blog-card:hover, .blog-card:hover * { text-decoration: none; }
.blog-card:hover { transform: translateY(-3px); }
.blog-card-tag {
  font-family: var(--font-mono); font-size: .66rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--orange-deep);
}
.blog-card h2, .blog-card h3 { font-size: 1.12rem; line-height: 1.35; }
.blog-card p { font-size: .88rem; color: var(--ink-soft); flex: 1; }
.blog-card time { font-size: .76rem; color: var(--muted); }
.blog-card-time {
  display: flex; align-items: center; gap: 8px;
  font-size: .76rem; color: var(--muted);
  padding-top: 14px; margin-top: 2px;
  border-top: 1px solid var(--border);
}
.blog-card-time b { font-weight: 600; color: var(--ink-soft); }
.blog-card-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border);
}
.blog-card-time time::before { content: "·"; margin-right: 8px; color: #C3CBD9; }

@media (max-width: 860px) {
  .blog-grid { grid-template-columns: 1fr; }
}

.post-head { margin-bottom: 28px; }
.post-head h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.2; margin: 10px 0 14px; }
.post-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: .82rem; color: var(--muted); }
.post-meta b { font-weight: 600; color: var(--ink-soft); }

/* ---- Auteur + partage ---- */
.post-author {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 0; margin-bottom: 32px;
  border-block: 1px solid var(--border);
}
.author-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--dark); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  flex-shrink: 0; overflow: hidden;
}
.author-avatar--rg { background: var(--orange); }
.author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-id b { display: block; font-size: .92rem; line-height: 1.3; }
.author-id span { font-size: .78rem; color: var(--muted); }
.post-share { margin-left: auto; display: flex; gap: 8px; }
.share-btn {
  font-family: var(--font-mono); font-size: .7rem; font-weight: 600;
  padding: 7px 14px; border-radius: var(--pill);
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-soft);
  cursor: pointer; text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.share-btn:hover { border-color: var(--orange); color: var(--orange-deep); text-decoration: none; }
.share-btn.copied { border-color: var(--green); color: var(--green); }
@media (max-width: 640px) { .post-share { margin-left: 0; } }

/* ---- Article : deux rails lateraux (sommaire + partage a gauche, audit a
   droite). En dessous de 1200px tout retombe dans une colonne de lecture. ---- */
.post-wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.post-rel { position: relative; }
.post-aside { margin-bottom: 32px; }
.post-aside-inner { display: grid; gap: 16px; }
.aside-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 18px 20px;
}
.aside-title {
  font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--orange-deep); display: block; margin-bottom: 10px;
}
.post-toc { display: grid; gap: 2px; }
.post-toc a {
  font-size: .85rem; color: var(--muted); line-height: 1.45;
  padding: 5px 0 5px 12px; border-left: 2px solid var(--border);
  transition: color .15s ease, border-color .15s ease;
}
.post-toc a:hover { color: var(--ink); border-left-color: #C3CBD9; text-decoration: none; }
.post-toc a.active { color: var(--ink); font-weight: 600; border-left-color: var(--orange); }
.post-aside .post-share { margin-left: 0; flex-wrap: wrap; }

.post-rail { margin-bottom: 32px; }
.post-rail-card {
  display: grid; gap: 10px; justify-items: start;
  background: var(--dark); border: 1px solid var(--dark-2);
  border-radius: var(--radius); padding: 22px 20px;
}
.post-rail-tag {
  font-family: var(--font-mono); font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--orange);
}
.post-rail-card b { color: #fff; font-size: .96rem; line-height: 1.35; font-family: var(--font-display); }
.post-rail-card p { color: #CBD5E1; font-size: .82rem; line-height: 1.5; }
.post-rail-card .btn { width: 100%; padding: 10px 16px; min-height: 40px; font-size: .86rem; }
.post-rail-note { color: #94A3B8; font-size: .72rem; line-height: 1.4; }

@media (min-width: 1200px) {
  .post-wrap.post-rel {
    max-width: 1300px;
    display: grid;
    grid-template-columns: 224px minmax(0, 1fr) 240px;
    column-gap: 36px;
    align-items: start;
  }
  .post-wrap.post-rel > * { grid-column: 2; }
  /* align-self: stretch est indispensable : sans lui le rail se reduit a la
     hauteur de son contenu et le sticky interieur n'a plus de course. */
  .post-wrap.post-rel > .post-aside { grid-column: 1; grid-row: 1 / span 99; align-self: stretch; margin: 0; }
  .post-wrap.post-rel > .post-rail { grid-column: 3; grid-row: 1 / span 99; align-self: stretch; margin: 0; }
  .post-aside-inner, .post-rail-inner { position: sticky; top: 96px; }
}

/* Mention de mise a jour, a cote de la date de publication. Elle n'apparait que
   sur les articles reellement retouches : la poser partout recreerait le signal
   de fraicheur uniforme, donc faux, que l'audit du 10/08 a signale. */
.post-updated { color: var(--orange-deep); font-weight: 600; }

/* Sources externes en fin d'article. Visuellement discret : ce n'est pas un
   encadre promotionnel, c'est l'appareil critique de l'article. */
.post-sources {
  border-top: 1px solid var(--border);
  margin: 40px 0 32px; padding-top: 20px;
}
.post-sources-title {
  font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--orange-deep); display: block; margin-bottom: 8px;
}
.post-sources p { font-size: .86rem; color: var(--muted); line-height: 1.55; margin-bottom: 12px; }
.post-sources ul { list-style: none; display: grid; gap: 7px; }
.post-sources li { font-size: .88rem; line-height: 1.5; padding-left: 16px; position: relative; }
.post-sources li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--orange);
}

/* ---------- « Plus dans {silo} » : maillage complet en fin d'article ----------
   Titre PLUS description sur chaque entree, jamais un lien nu : c'est la
   description qui fait cliquer, et un lien nu ne transmet presque rien. */
/* ---------- Pilier = page de silo (16/08 soir, modele meeeters) ----------
   La page prend la largeur du site ; seul le corps du texte garde une mesure
   de lecture. Le CTA traverse la page sous « En bref », les enfants sont en
   cartes sur 3 colonnes, la FAQ en grille de 2. */
.pilier-wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.pilier-wrap .post-head h1 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); }
.pilier-wrap .post-summary { padding: 24px 28px; font-size: 1rem; }
.pilier-wrap .post { max-width: 820px; }

.pilier-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  background: var(--dark); border: 1px solid var(--dark-2); border-radius: var(--radius);
  padding: 26px 30px; margin: 0 0 20px;
}
.pilier-cta-texte { display: grid; gap: 8px; }
.pilier-cta-texte b { color: #fff; font-size: 1.05rem; line-height: 1.35; font-family: var(--font-display); }
.pilier-cta-texte p { color: #CBD5E1; font-size: .88rem; line-height: 1.5; }
.pilier-cta-action { display: grid; gap: 8px; justify-items: center; flex-shrink: 0; }
.pilier-cta-action .btn { padding: 12px 26px; }
.pilier-cta-action .post-rail-note { text-align: center; }

.pilier-articles { border-top: 1px solid var(--border); margin: 44px 0 8px; padding-top: 30px; }
.pilier-articles h2 { color: var(--ink); font-size: 1.55rem; line-height: 1.3; margin-bottom: 22px; }
.pilier-articles .blog-grid { grid-template-columns: repeat(3, 1fr); margin-top: 0; }

.pilier-faq { border-top: 1px solid var(--border); margin: 44px 0 8px; padding-top: 30px; }
.pilier-faq h2 { color: var(--ink); font-size: 1.55rem; line-height: 1.3; margin-bottom: 22px; }
.pilier-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pilier-faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 20px 22px; }
.pilier-faq-item h3 { color: var(--ink); font-size: .98rem; line-height: 1.4; margin-bottom: 8px; }
.pilier-faq-item p { font-size: .9rem; line-height: 1.6; color: var(--ink-soft); }

@media (max-width: 980px) {
  .pilier-articles .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .pilier-cta { flex-direction: column; align-items: flex-start; }
  .pilier-cta-action { justify-items: start; }
  .pilier-faq-grid { grid-template-columns: 1fr; }
  .pilier-articles .blog-grid { grid-template-columns: 1fr; }
}

.silo-more {
  border-top: 1px solid var(--border);
  margin: 32px 0; padding-top: 20px;
}
.silo-more-title {
  font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--orange-deep); display: block; margin-bottom: 14px;
}
.silo-more-list { list-style: none; display: grid; gap: 10px; }
.silo-more-list a {
  display: block; padding: 13px 16px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface);
  text-decoration: none; color: inherit;
}
.silo-more-list b {
  display: block; font-size: .95rem; line-height: 1.4; color: var(--ink);
}
.silo-more-list span {
  display: block; margin-top: 4px; font-size: .84rem; line-height: 1.5; color: var(--muted);
}
.silo-more-tag {
  float: right; margin-left: 10px; font-family: var(--font-mono); font-style: normal;
  font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--orange-deep); background: var(--orange-soft);
  border: 1px solid rgba(249, 115, 22, .25); border-radius: 100px; padding: .16rem .5rem;
}
@media (prefers-reduced-motion: no-preference) {
  .silo-more-list a { transition: border-color .2s var(--ease-out), background .2s var(--ease-out); }
}
.silo-more-list a:hover { border-color: rgba(249, 115, 22, .45); background: var(--orange-soft); }
.silo-more-list a:hover b { color: var(--orange-deep); }

.post-summary {
  background: var(--orange-soft); border: 1px solid rgba(249, 115, 22, .25);
  border-radius: var(--radius-sm); padding: 18px 20px; margin-bottom: 36px;
  font-size: .95rem; line-height: 1.6;
}
.post-summary b {
  font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--orange-deep); display: block; margin-bottom: 6px;
}

.post { font-size: 1rem; line-height: 1.75; color: var(--ink-soft); }
.post h2 { color: var(--ink); font-size: 1.4rem; margin: 44px 0 14px; line-height: 1.3; }
.post h3 { color: var(--ink); font-size: 1.08rem; margin: 28px 0 10px; }
.post p { margin-bottom: 16px; }
.post ul, .post ol { margin: 0 0 16px 22px; }
.post li { margin-bottom: 8px; }
.post li::marker { color: var(--orange); font-weight: 700; }
.post a { color: var(--orange-deep); text-decoration: underline; text-underline-offset: 2px; }
.post code {
  font-family: var(--font-mono); font-size: .84em; background: var(--bg);
  border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px;
  /* Une URL longue en code inline faisait deborder la page sur mobile. */
  white-space: nowrap; overflow-wrap: anywhere;
}
@media (max-width: 640px) { .post code { white-space: normal; } }
.post pre {
  background: #0F172A; color: #E2E8F0; border-radius: var(--radius-sm);
  padding: 16px 18px; overflow-x: auto; font-family: var(--font-mono);
  font-size: .8rem; line-height: 1.6; margin: 0 0 16px;
}
.post pre code { background: none; border: none; padding: 0; color: inherit; white-space: pre; }
.post .table-wrap { overflow-x: auto; margin-bottom: 16px; }
.post table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.post th, .post td { text-align: left; padding: 10px 12px; border: 1px solid var(--border); }
.post th { background: #F8FAFC; font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

.post-cta {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px 28px; margin-top: 48px; text-align: center;
}
.post-cta h2 { margin: 0 0 8px; font-size: 1.25rem; color: var(--ink); }
.post-cta p { margin-bottom: 18px; }

/* ======================================================
   Export PDF (impression du rapport)
   ====================================================== */

@media print {
  @page { margin: 14mm; }
  body { background: #fff; }
  body::before, body::after { display: none; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .nav, .footer, .rep-cta-section, .btn-print, .rep-hero-actions, .rep-ia-note, .file-copy, .hint, .tab-bar, .cwv-loading,
  #rep-bench-block .bench-form, #rep-bench-block .bench-error, #rep-bench-block .bench-quota { display: none !important; }
  #rep-cwv-block:has(#rep-cwv-grid > .cwv-loading:only-child) { display: none; }
  #rep-bench-block:has(.bench-result[hidden]) { display: none; }
  .app-main, .app-main--report { padding: 0; }
  .rep-hero { margin-top: 0; padding: 36px 0; }
  .report-block { margin-top: 28px; }
  .report-body { padding-bottom: 24px; }
  .finding, .pitem, .phase, .rep-som-row, .rep-cat, .exec-card, .file-card,
  .report-wedge, .roast-fact-card, .summary-box, .roast-ai-card, .cwv-card { break-inside: avoid; }
  .exec-grid { grid-template-columns: 1fr; }
  a { color: inherit; }
}

/* Retour prive opt-in classement (roast) : jamais de score expose, juste l'ecart au seuil */
.rank-feedback {
  margin-top: 18px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--orange-soft);
  border: 1px solid rgba(249, 115, 22, .25);
  font-size: .88rem;
  color: var(--ink-soft);
}
.rank-feedback a { color: var(--orange-deep); font-weight: 600; }

/* ---------- Classement public ---------- */

.hero-optin {
  display: flex; align-items: center; gap: .55rem;
  font-size: .88rem; color: var(--ink-soft); font-weight: 500;
  margin-top: .9rem; cursor: pointer; width: fit-content;
}

.hero-optin input {
  width: 17px; height: 17px; accent-color: var(--orange); cursor: pointer;
}

.rank-state {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  padding: 40px 32px; text-align: center; color: var(--muted);
}

.rank-state b { color: var(--ink); }
.rank-state .btn { margin-top: 1.2rem; }

.rank-rows {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden;
}

.rank-row {
  display: grid; grid-template-columns: 64px 1fr 110px;
  align-items: center; gap: 12px;
  padding: 14px 22px; border-top: 1px solid var(--border);
}

.rank-row:first-child { border-top: none; }

.rank-row--head {
  background: #F8FAFC;
  font-family: var(--font-mono); font-size: .66rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); font-weight: 600;
}

.rank-row--first .rank-host { font-weight: 700; }
.rank-row--first .rank-pos { color: var(--orange-deep); }

.rank-pos { font-size: .88rem; font-weight: 700; color: var(--muted); }
.rank-host { font-weight: 600; overflow-wrap: anywhere; }

.rank-score { font-size: 1.02rem; font-weight: 700; text-align: right; }
.rank-score small { font-size: .68rem; color: var(--muted); font-weight: 400; margin-left: 2px; }

/* L en-tete de la colonne Score se cale sur ses valeurs, sinon le mot flotte a
   gauche pendant que les nombres s alignent a droite. */
.rank-row--head span:last-child { text-align: right; }

.rank-score.good { color: var(--green); }
.rank-score.warn { color: #B45309; }
.rank-score.bad { color: var(--red); }

.rank-updated {
  font-family: var(--font-mono); font-size: .72rem; color: var(--muted);
  margin-top: .8rem; text-align: right;
}

/* ---------- Cercle Elite : podium des scores >= 90 ---------- */

.elite-head { margin-bottom: 20px; }
.elite-head h2 {
  font-size: 1.35rem; margin-bottom: .35rem;
  display: flex; align-items: center; gap: .5rem;
}
.elite-head h2::before {
  content: ""; width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%;
  background: linear-gradient(140deg, #FDE68A, #F59E0B 55%, #B45309);
  box-shadow: 0 2px 8px rgba(180, 83, 9, .35);
}
.elite-head p { color: var(--muted); font-size: .92rem; max-width: 620px; }

.elite-grid {
  display: grid; gap: 16px; margin-bottom: 40px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.elite-card {
  position: relative; overflow: hidden;
  padding: 20px 20px 18px; border-radius: var(--radius);
  background: linear-gradient(160deg, #FFFDF5 0%, #FFF7E6 55%, #FFF1D6 100%);
  border: 1px solid #F5DFA8;
  box-shadow: 0 1px 2px rgba(146, 64, 14, .06), 0 10px 28px rgba(146, 64, 14, .10);
}
/* Reflet en ::before et non ::after : pose derriere le contenu, sinon la bande
   claire passe sur le nom de domaine et le delave en diagonale. */
.elite-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 62%);
}
.elite-card > * { position: relative; z-index: 1; }

.elite-rank {
  font-size: .74rem; font-weight: 700; color: #B45309;
}
.elite-tag {
  float: right; font-family: var(--font-mono); font-size: .62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: #7C2D12;
  background: rgba(245, 158, 11, .22); border: 1px solid rgba(180, 83, 9, .25);
  border-radius: 100px; padding: .2rem .55rem;
}

.elite-host {
  font-size: 1.02rem; font-weight: 700; margin: .5rem 0 .1rem;
  overflow-wrap: anywhere; color: var(--ink);
}

.elite-score { display: flex; align-items: baseline; gap: 3px; margin-top: .5rem; }
.elite-score b { font-size: 1.9rem; font-weight: 700; color: #92400E; line-height: 1; }
.elite-score span { font-size: .72rem; color: #B45309; }

@media (prefers-reduced-motion: no-preference) {
  .elite-card { transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
  .elite-card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(146,64,14,.08), 0 16px 36px rgba(146,64,14,.16); }
}

.rank-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: .8rem;
}
.rank-count { font-size: .72rem; color: var(--muted); }
.rank-foot .rank-updated { margin-top: 0; }

.rank-how { max-width: 620px; margin-top: 64px; }
.rank-how h2 { font-size: 1.35rem; margin-bottom: 1rem; }
.rank-how ol { padding-left: 1.3rem; display: grid; gap: .5rem; color: var(--ink-soft); }
.rank-how .rank-note { margin-top: 1.2rem; font-size: .88rem; color: var(--muted); }

@media (max-width: 640px) {
  .rank-row { grid-template-columns: 40px 1fr 74px; padding: 12px 14px; }
}

/* Anneau du hero : trait en degrade (defs SVG dans index.html) */
.report-live .score-ring .value { stroke: url(#sp-ring-grad); }

/* ---------- Classement sur la home ---------- */

.home-rank .rank-rows { max-width: 720px; margin: 0 auto; }
.home-rank .rank-state { max-width: 720px; margin: 0 auto; }
.home-rank-actions { text-align: center; margin-top: 30px; }
.home-rank-actions .hint { margin-top: 12px; }

/* ---------- Rapport : analyse page par page ---------- */

.pages-table {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden;
}

.page-row {
  display: grid; grid-template-columns: 1fr 76px 90px 100px 100px;
  align-items: center; gap: 12px;
  padding: 13px 22px; border-top: 1px solid var(--border);
}

.page-row:first-child { border-top: none; }

.page-row--head {
  background: #F8FAFC;
  font-family: var(--font-mono); font-size: .66rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); font-weight: 600;
}

.page-path { font-size: .85rem; font-weight: 600; overflow-wrap: anywhere; }

.page-cell { font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.page-cell.good { color: var(--green); }
.page-cell.warn { color: var(--orange-deep); }
.page-cell.bad { color: var(--red); }

@media (max-width: 700px) {
  .page-row { grid-template-columns: 1fr 56px 70px 80px; padding: 12px 14px; }
  .page-row > span:nth-child(4) { display: none; }
}

/* ============ Carte auth (gate connexion roast/rapport) ============ */
.auth-card {
  max-width: 520px;
  margin: 36px auto;
  padding: 38px 36px;
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
  text-align: center;
}
.auth-card h2 { font-size: 1.5rem; margin-top: 14px; }
.auth-card > p { color: var(--muted); font-size: .94rem; margin-top: 10px; }
.auth-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 22px;
  padding: 13px 20px;
  background: #fff;
  border: 1px solid #CBD5E1;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
}
.auth-google:hover { border-color: #94A3B8; transform: translateY(-1px); }
.auth-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--muted);
  font-size: .8rem;
}
.auth-sep::before, .auth-sep::after { content: ""; flex: 1; height: 1px; background: #E2E8F0; }
.auth-magic { display: flex; gap: 10px; }
.auth-magic input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid #CBD5E1;
  border-radius: 12px;
  font: inherit;
  background: #fff;
}
.auth-magic input:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: transparent; }
.auth-code { margin-top: 10px; }
.auth-code input { letter-spacing: .32em; text-align: center; font-weight: 700; font-size: 1.05rem; }
.auth-code input::placeholder { letter-spacing: normal; font-weight: 500; }
.auth-again {
  margin-top: 12px; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: .84rem; color: var(--muted); text-decoration: underline;
}
.auth-again:hover { color: var(--ink); }
.auth-again[disabled] { opacity: .5; cursor: default; }
.auth-status { margin-top: 14px; font-size: .88rem; color: var(--muted); }
.auth-status.bad { color: #DC2626; }
.auth-note { margin-top: 18px; font-size: .8rem; color: var(--muted); }
.auth-note a { color: inherit; text-decoration: underline; }
#rep-authgate, #roast-authgate { padding: 40px 20px 70px; }
@media (max-width: 520px) {
  .auth-card { padding: 30px 22px; }
  .auth-magic { flex-direction: column; }
}

/* ============ Page Mon compte (profil + historique des rapports) ============ */

.compte-section { padding: 56px 0 90px; }

/* Profil en colonne fixe a gauche : l'identite et les raccourcis restent
   visibles, le contenu ne s'empile plus sur un seul fil interminable. */
.compte-grid {
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}
.compte-side-inner { display: grid; gap: 14px; position: sticky; top: 96px; }
.compte-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px 22px;
  box-shadow: var(--shadow-card);
}
.compte-card h1 { font-size: 1.45rem; line-height: 1.2; }
.compte-nav { display: grid; }
.compte-nav a {
  padding: 9px 14px; font-size: .88rem; font-weight: 600;
  color: var(--muted); border-left: 2px solid var(--border);
}
.compte-nav a:hover { color: var(--ink); border-left-color: var(--orange); text-decoration: none; }

.compte-cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px; align-items: start; margin-top: 42px;
}

@media (max-width: 1080px) {
  .compte-grid { grid-template-columns: 1fr; gap: 26px; }
  .compte-side-inner { position: static; }
  .compte-cols { grid-template-columns: 1fr; gap: 0; }
}

.compte-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 8px;
}
.compte-head h1 { font-size: clamp(1.7rem, 3.5vw, 2.2rem); }
.compte-id { margin-top: 8px; color: var(--muted); font-size: .95rem; }
.compte-id b { color: var(--ink); font-weight: 600; }
.compte-logout {
  padding: 9px 18px; min-height: 42px;
  border: 1px solid var(--border); border-radius: var(--pill);
  background: #fff; color: var(--muted);
  font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer;
}
.compte-logout:hover { color: var(--orange-deep); border-color: var(--orange); }
.compte-sub { color: var(--muted); font-size: .92rem; margin-top: 6px; }
.compte-reports-title { font-size: 1.3rem; margin-top: 38px; scroll-margin-top: 90px; }
.compte-body > .compte-reports-title:first-child { margin-top: 0; }
.compte-col > .compte-reports-title:first-child { margin-top: 0; }

.compte-list { display: flex; flex-direction: column; gap: 14px; margin-top: 26px; }
.compte-row {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 18px 20px;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
}
.compte-row-score {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 62px; height: 62px; border-radius: 16px; flex: none;
}
.compte-row-score b { font-size: 1.3rem; font-weight: 800; line-height: 1.1; }
.compte-row-score span { font-size: .68rem; font-weight: 700; }
.compte-row-score.good { background: #F0FDF4; color: var(--green); }
.compte-row-score.warn { background: #FFF7ED; color: var(--orange-deep); }
.compte-row-score.bad { background: #FEF2F2; color: var(--red); }
.compte-row-main { flex: 1; min-width: 170px; display: flex; flex-direction: column; gap: 3px; }
.compte-row-main b { font-family: var(--font-mono); font-size: .95rem; overflow-wrap: anywhere; }
.compte-row-main span { color: var(--muted); font-size: .84rem; }
.compte-row-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.compte-row-actions .btn { padding: 9px 16px; min-height: 38px; font-size: .85rem; }
.compte-ghost {
  display: inline-flex; align-items: center;
  padding: 9px 16px; min-height: 38px;
  border: 1px solid var(--border); border-radius: var(--pill);
  background: #fff; color: var(--muted);
  font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer;
}
.compte-ghost:hover { color: var(--orange-deep); border-color: var(--orange); text-decoration: none; }

/* Retours produit (page compte) */
.fb-form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.fb-cats { display: flex; gap: 8px; flex-wrap: wrap; }
.fb-cat { position: relative; cursor: pointer; }
.fb-cat input { position: absolute; opacity: 0; pointer-events: none; }
.fb-cat span {
  display: inline-flex; align-items: center;
  padding: 7px 14px; min-height: 34px;
  border: 1px solid var(--border); border-radius: var(--pill);
  background: #fff; color: var(--muted);
  font-size: .84rem; font-weight: 600;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.fb-cat input:checked + span { color: var(--orange-deep); border-color: var(--orange); background: var(--orange-soft, #FFF4EC); }
.fb-cat input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }
.fb-form textarea {
  width: 100%; resize: vertical; min-height: 96px;
  padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 12px;
  background: #fff; color: var(--ink);
  font: inherit; font-size: .92rem;
}
.fb-form textarea:focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.fb-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fb-status { margin: 0; font-size: .86rem; color: var(--green, #16803C); }
.fb-status.bad { color: var(--red); }
.fb-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.fb-item { border: 1px solid var(--border); border-radius: 12px; background: #fff; padding: 12px 16px; }
.fb-item-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: .8rem; color: var(--muted); }
.fb-item p { margin: 0; font-size: .9rem; white-space: pre-wrap; }
.fb-badge {
  display: inline-flex; padding: 2px 10px;
  border-radius: var(--pill); font-size: .74rem; font-weight: 700;
  border: 1px solid var(--border); color: var(--muted);
}
.fb-badge--idee { color: var(--orange-deep); border-color: var(--orange); }
.fb-badge--bug { color: var(--red); border-color: var(--red); }
.fb-badge--pending { color: var(--orange-deep); border-color: var(--orange); }
.fb-badge--approved { color: var(--green, #16803C); border-color: var(--green, #16803C); }
.fb-badge--rejected { color: var(--muted); }

/* Temoignages (page compte) : avis publiables, distincts des retours produit */
.tm-form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.tm-rating { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tm-rating-label { font-size: .84rem; font-weight: 700; color: var(--ink); margin-right: 4px; }
.tm-star { position: relative; cursor: pointer; }
.tm-star input { position: absolute; opacity: 0; pointer-events: none; }
.tm-star span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid var(--border); border-radius: 50%;
  background: #fff; color: var(--muted);
  font-size: .84rem; font-weight: 700;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.tm-star input:checked + span { color: var(--orange-deep); border-color: var(--orange); background: var(--orange-soft, #FFF4EC); }
.tm-star input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }
.tm-fields { display: flex; gap: 10px; flex-wrap: wrap; }
.tm-fields input {
  flex: 1 1 220px; min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--border); border-radius: 12px;
  background: #fff; color: var(--ink);
  font: inherit; font-size: .92rem;
}
.tm-fields input:focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.tm-form textarea {
  width: 100%; resize: vertical; min-height: 110px;
  padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 12px;
  background: #fff; color: var(--ink);
  font: inherit; font-size: .92rem;
}
.tm-form textarea:focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.tm-consent { display: flex; gap: 10px; align-items: flex-start; font-size: .84rem; color: var(--muted); line-height: 1.5; cursor: pointer; }
.tm-consent input { margin-top: 3px; accent-color: var(--orange); flex: 0 0 auto; }
.tm-score { font-weight: 700; color: var(--ink); }
.compte-del { background: none; border: 0; padding: 0; color: var(--muted); font: inherit; font-size: .8rem; cursor: pointer; text-decoration: underline; }
.compte-del:hover { color: var(--red); }
.compte-empty { color: var(--muted); padding: 22px 0; }

@media (max-width: 640px) {
  .compte-row { align-items: flex-start; }
  .compte-row-actions { width: 100%; }
}

/* Champ societe (page compte) */
.compte-field { margin-top: 20px; max-width: 520px; }
/* Dans la carte de profil la colonne fait 250px : le champ passe en pile. */
.compte-card .compte-field { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.compte-card .compte-field-row { flex-direction: column; align-items: stretch; }
.compte-card .compte-field-row .btn { width: 100%; }
.compte-card .compte-logout { margin-top: 16px; width: 100%; justify-content: center; }
.compte-field label { display: block; font-size: .84rem; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.compte-field-row { display: flex; gap: 10px; }
.compte-field-row input {
  flex: 1; min-width: 0; padding: 11px 16px;
  border: 1px solid var(--border); border-radius: var(--pill);
  font: inherit; font-size: .92rem; background: #fff;
}
.compte-field-row input:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: transparent; }
.compte-field-row .btn { padding: 9px 18px; min-height: 42px; font-size: .85rem; flex: none; }

/* Badge type de rapport dans l'historique */
.compte-kind {
  display: inline-block; margin-left: 10px; padding: 2px 9px;
  border-radius: var(--pill); font-family: var(--font-body);
  font-size: .68rem; font-weight: 700; vertical-align: 2px;
  background: #F1F5F9; color: var(--muted);
}
.compte-kind--full { background: #FFF7ED; color: var(--orange-deep); }

/* ============ Carte societe (apres le premier audit connecte) ============ */

.company-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; flex-wrap: wrap;
  margin: 0 0 26px; padding: 20px 24px;
  background: var(--glass, rgba(255, 255, 255, .72));
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.company-text b { font-size: .98rem; }
.company-text p { color: var(--muted); font-size: .86rem; margin-top: 4px; }
.company-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.company-form input {
  padding: 10px 16px; min-width: 220px;
  border: 1px solid var(--border); border-radius: var(--pill);
  font: inherit; font-size: .9rem; background: #fff;
}
.company-form input:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: transparent; }
.company-form .btn { padding: 9px 18px; min-height: 40px; font-size: .85rem; }
.company-later { background: none; border: 0; padding: 0; color: var(--muted); font: inherit; font-size: .82rem; cursor: pointer; text-decoration: underline; }
.company-later:hover { color: var(--ink); }

/* ============ Newsletter : bloc discret en haut du footer ============ */

.nl-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap;
  padding-bottom: 22px; margin-bottom: 32px;
  border-bottom: 1px solid rgba(148, 163, 184, .18);
}
.nl-foot-text { display: grid; gap: 2px; }
.nl-foot-text b { color: #fff; font-size: .92rem; font-family: var(--font-display); font-weight: 700; }
.nl-cursor { font-family: var(--font-mono); color: var(--orange); animation: nl-blink 1.1s steps(2, start) infinite; }
@keyframes nl-blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .nl-cursor { animation: none; } }
.nl-foot-text span { font-size: .78rem; color: #94A3B8; }
.nl-foot-text a { color: inherit; text-decoration: underline; }
.nl-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nl-form input {
  width: 210px; max-width: 100%; padding: 8px 14px;
  border: 1px solid rgba(148, 163, 184, .28); border-radius: var(--pill);
  font: inherit; font-size: .84rem;
  background: rgba(255, 255, 255, .05); color: #fff;
}
.nl-form input::placeholder { color: #64748B; }
.nl-form input:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: transparent; }
/* Bouton en filet : la bande reste une invitation discrete au-dessus du footer,
   l aplat orange est reserve aux vrais CTA de conversion. */
.nl-form .btn {
  padding: 8px 18px; min-height: 36px; font-size: .82rem;
  background: transparent; color: #FDBA74;
  border: 1px solid rgba(249, 115, 22, .55); box-shadow: none;
}
.nl-form .btn:hover { background: var(--orange); color: #fff; border-color: var(--orange); box-shadow: none; }
.nl-status { flex-basis: 100%; margin: 0; font-size: .8rem; color: #FCA5A5; }
.nl-ok { margin: 0; font-size: .86rem; font-weight: 600; color: #4ADE80; }
@media (max-width: 700px) {
  .nl-form { width: 100%; }
  .nl-form input { flex: 1; width: auto; min-width: 0; }
}
@media print { .nl-foot { display: none; } }

/* ============ Blog : filtres par theme + illustrations ============ */

/* Onglets soulignes plutot que pilules : le filtre se lit comme une barre de
   navigation, il ne rivalise plus visuellement avec les cartes d'articles. */
.blog-filter {
  display: flex; gap: 2px; flex-wrap: wrap;
  margin: 30px 0 0;
  border-bottom: 1px solid var(--border);
}
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px 13px; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: none; color: var(--muted);
  font: inherit; font-size: .89rem; font-weight: 600; cursor: pointer;
  transition: color .15s var(--ease-out, ease), border-color .15s var(--ease-out, ease);
}
.chip:hover { color: var(--ink); }
.chip.active { color: var(--ink); border-bottom-color: var(--orange); }
.chip-n {
  font-family: var(--font-mono); font-size: .66rem; font-weight: 700;
  padding: 2px 7px; border-radius: var(--pill);
  background: #EEF1F7; color: var(--muted);
  transition: background .15s ease, color .15s ease;
}
.chip.active .chip-n { background: var(--orange-soft); color: var(--orange-deep); }
.chip-n:empty { display: none; }

.blog-grid { margin-top: 44px; }
@media (max-width: 620px) {
  .chip { padding: 9px 12px 11px; font-size: .84rem; }
  .blog-grid { margin-top: 32px; }
}

.blog-card-art { margin: -6px 0 16px; border-radius: 14px; overflow: hidden; line-height: 0; }
.blog-card-art svg { width: 100%; height: auto; display: block; }

/* ============ Rapport : guide de lecture + 3 premieres actions (clarte UX) ============ */

.rep-guide {
  margin: 34px 0 6px;
  padding: 22px 26px;
  background: var(--glass, rgba(255, 255, 255, .72));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--glass-brd, rgba(255, 255, 255, .9));
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.rep-guide-title { display: block; font-family: var(--font-display); font-size: .95rem; margin-bottom: 14px; }
.rep-guide-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.rep-guide-steps a {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 15px;
  border: 1px solid var(--border); border-radius: 14px; background: #fff;
  text-decoration: none; color: inherit;
  transition: border-color .15s var(--ease-out, ease), transform .15s var(--ease-out, ease);
}
.rep-guide-steps a:hover { border-color: var(--orange); transform: translateY(-1px); }
.rg-num {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--orange); color: #fff;
  font-weight: 700; font-size: .85rem;
  display: grid; place-items: center;
}
.rg-txt { display: grid; gap: 2px; }
.rg-txt b { font-size: .92rem; }
.rg-txt small { color: var(--muted); font-size: .78rem; line-height: 1.35; }
@media (max-width: 760px) { .rep-guide-steps { grid-template-columns: 1fr; } }
@media print { .rep-guide { display: none; } }

.rv-legend { margin-top: 12px; font-size: .78rem; color: var(--muted); }

.top-actions {
  margin-top: 22px; padding: 26px 30px;
  border: 1px solid var(--border); border-left: 4px solid var(--orange);
  border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-card);
}
.top-actions-title { display: block; font-family: var(--font-display); font-size: 1.08rem; margin-bottom: 16px; }
.top-actions ol { list-style: none; display: grid; gap: 14px; margin: 0; padding: 0; counter-reset: ta; }
.top-actions li { counter-increment: ta; display: flex; gap: 14px; align-items: flex-start; }
.top-actions li::before {
  content: counter(ta);
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--ink); color: #fff;
  font-weight: 700; font-size: .9rem;
  display: grid; place-items: center;
}
.ta-txt b { font-size: .95rem; }
.ta-txt .badge { margin-left: 8px; vertical-align: 2px; }
.ta-txt p { margin: 4px 0 0; font-size: .88rem; color: var(--muted); }
.top-actions-note { margin: 16px 0 0; font-size: .82rem; }
.top-actions-note a { color: var(--orange-deep); }

/* ---- Toggle langue FR/EN (pages du tunnel audit) ---- */
.lang-pill {
  border: 1px solid var(--border); border-radius: var(--pill);
  background: #fff; color: var(--muted);
  font: inherit; font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  padding: 7px 12px; min-height: 34px; cursor: pointer;
  transition: color .15s var(--ease-out, ease), border-color .15s var(--ease-out, ease);
}
.lang-pill:hover { color: var(--orange-deep); border-color: var(--orange); }

/* ============ Retour Fondateur (Mon compte) ============ */

/* Retour Fondateur (compte) : 5 questions ouvertes, pleine largeur sous les
   deux colonnes retours/temoignage. */
.fd-block { margin-top: 46px; padding-top: 38px; border-top: 1px solid var(--border); }
.fd-form { display: grid; gap: 18px; margin-top: 20px; }
.fd-q { display: grid; gap: 7px; font-size: .92rem; font-weight: 600; color: var(--ink-soft); }
.fd-q textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface);
  font: inherit; font-weight: 400; color: var(--ink); resize: vertical;
}
.fd-q textarea:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: transparent; }
@media (min-width: 900px) { .fd-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fd-form .fb-actions { grid-column: 1 / -1; } }


/* ---------- Témoignages sur la home (05/08/2026) ---------- */

/* Ancre #temoignage : sans marge de defilement, le titre passe sous le header colle. */
.tm-home { scroll-margin-top: 96px; }
.tm-home .section-head { max-width: 720px; }

.tm-showcase {
  display: grid; gap: 16px; margin-bottom: 40px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.tm-card {
  margin: 0; padding: 22px 24px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 12px;
}
.tm-card-stars { color: var(--orange); letter-spacing: 2px; font-size: .95rem; }
.tm-card blockquote { margin: 0; }
.tm-card blockquote p { color: var(--ink-soft); line-height: 1.6; }
.tm-card figcaption { font-weight: 700; font-size: .9rem; color: var(--ink); margin-top: auto; }
.tm-card figcaption span { display: block; font-weight: 400; font-size: .82rem; color: var(--muted); }

.tm-write {
  max-width: 760px; margin: 0 auto; padding: 28px;
  border-radius: var(--radius); background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow-card);
}
.tm-write h3 { font-family: var(--font-display); font-size: 1.25rem; margin-bottom: .4rem; }
.tm-write .compte-sub { margin-bottom: 1.2rem; }

/* CTA laissé dans Mon compte, qui renvoie vers le formulaire de la home */
.tm-cta {
  margin-top: 40px; padding: 22px 24px; border-radius: var(--radius);
  background: var(--orange-soft); border: 1px solid #FBD9BC;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.tm-cta-text b { display: block; font-family: var(--font-display); font-size: 1.05rem; margin-bottom: .25rem; }
.tm-cta-text span { color: var(--ink-soft); font-size: .9rem; max-width: 520px; display: block; }

/* Mon compte : « Vos retours », le pont témoignage et le bloc Fondateur occupent
   toute la largeur. .compte-wide traverse les deux colonnes de .compte-grid :
   sans cette règle, l'élément était auto-placé dans la colonne de 292px. */
.compte-wide { grid-column: 1 / -1; min-width: 0; }
.compte-wide .fb-form, .compte-wide .fb-list { max-width: none; }

.compte-showall {
  display: block; width: 100%; margin-top: 14px; padding: 12px;
  border-radius: var(--radius-sm); border: 1px dashed var(--border);
  background: transparent; color: var(--ink-soft); font-family: var(--font-body);
  font-weight: 600; font-size: .88rem; cursor: pointer;
}
.compte-showall:hover { border-color: var(--orange); color: var(--orange-deep); }

/* Newsletter : etat "deja inscrit", affiche a la place du formulaire */
.nl-done { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.nl-done::before {
  content: ""; width: 18px; height: 18px; flex: 0 0 18px; border-radius: 50%;
  background: var(--green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
}


/* ===== V3.1 - Chargement de la comparaison concurrent =====
   Reprend progress-track / roast-checklist du loader d'audit : meme grammaire
   visuelle, donc rien de nouveau a apprendre pour la personne qui regarde. */
.bench-loading {
  margin-top: 22px;
  padding: 24px 26px 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.bench-loading-head { margin: 0; font-size: .95rem; color: var(--ink-soft); }
.bench-loading-head em { font-style: normal; font-weight: 700; color: var(--ink); }
.bench-loading .progress-track { margin: 18px 0 4px; }
.bench-loading .roast-checklist { margin-top: 18px; gap: 10px; }
.bench-loading .roast-checklist li { font-size: .9rem; }

/* ===== V3.1 - Cercle Elite sur la page d'accueil ===== */
.elite-head--home { max-width: 720px; margin: 0 auto 18px; }
.elite-head--home h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 0 0 .25rem;
}
.elite-head--home p { margin: 0; font-size: .9rem; color: var(--muted); }
.home-rank .elite-grid { max-width: 720px; margin: 0 auto 26px; }

/* ===== V3.1 - Piece jointe des retours ===== */
.fb-file { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.fb-file-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px;
  border: 1px dashed var(--border);
  border-radius: var(--pill);
  font-size: .88rem; font-weight: 600; color: var(--ink-soft);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.fb-file-btn:hover { border-color: var(--orange); color: var(--orange-deep); background: var(--orange-soft); }
.fb-file-btn:focus-within { outline: 2px solid var(--orange); outline-offset: 2px; }
.fb-file-hint { font-size: .82rem; color: var(--muted); }

.fb-preview {
  margin-top: 14px;
  display: flex; align-items: center; gap: 14px;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.fb-preview img {
  width: 92px; height: 68px; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--border);
  display: block;
}
.fb-preview-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fb-preview-meta span {
  font-size: .85rem; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fb-preview-del {
  align-self: flex-start;
  background: none; border: none; padding: 0;
  font: inherit; font-size: .82rem; font-weight: 600;
  color: var(--red, #C0392B); cursor: pointer; text-decoration: underline;
}

/* Capture attachee a un retour deja envoye */
.fb-shot { display: block; margin-top: 12px; max-width: 320px; }
.fb-shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg);
}
.fb-shot:hover img { border-color: var(--orange); }

@media (max-width: 560px) {
  .fb-file { gap: 10px; }
  .fb-file-hint { flex-basis: 100%; }
  .fb-shot { max-width: 100%; }
}


/* ===== V3.2 - Modale (historique complet des audits) ===== */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15, 23, 42, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: modalIn .18s ease;
}
@keyframes modalIn { from { opacity: 0; } to { opacity: 1; } }
.modal-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
  width: 100%; max-width: 860px;
  max-height: 86vh;
  display: flex; flex-direction: column;
  padding: 26px 28px 8px;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.modal-head h2 { font-family: var(--font-display); font-size: 1.3rem; margin: 0; }
.modal-close {
  background: none; border: none; cursor: pointer;
  font-size: 1.9rem; line-height: 1; color: var(--muted);
  padding: 0 4px; border-radius: 8px;
}
.modal-close:hover { color: var(--ink); }
.modal-close:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.modal-sub { margin: 6px 0 18px; font-size: .88rem; color: var(--muted); }
/* Le defilement vit dans le corps : l'en-tete et le bouton fermer restent
   atteignables meme avec cinquante audits dans la liste. */
.modal-body { overflow-y: auto; padding-bottom: 22px; margin-right: -8px; padding-right: 8px; }

@media (max-width: 600px) {
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal-panel { max-width: none; max-height: 92vh; border-radius: var(--radius) var(--radius) 0 0; padding: 22px 18px 4px; }
}

/* ===== V3.2 - Contrepartie de l'offre de lancement ===== */
.price-deal {
  margin: 34px auto 0;
  max-width: 820px;
  padding: 22px 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap;
  background: var(--orange-soft);
  border: 1px solid #FBD9BC;
  border-radius: var(--radius);
}
.price-deal-text b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.06rem;
  margin-bottom: .35rem;
}
.price-deal-text p { margin: 0; font-size: .9rem; color: var(--ink-soft); max-width: 545px; }
.price-deal-badge {
  flex-shrink: 0;
  font-family: var(--font-mono, monospace);
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--orange-deep);
  background: var(--surface);
  border: 1px solid #FBD9BC;
  border-radius: var(--pill);
  padding: 7px 14px;
}
@media (max-width: 560px) { .price-deal { flex-direction: column; align-items: flex-start; gap: 14px; } }

/* ===== V3.2 - Bloc de lecture IA fusionné ===== */
/* Intertitre discret entre le verdict et le positionnement : deux temps de
   lecture dans un seul encadré, au lieu de deux encadrés jumeaux. */
.roast-ai-card--read .ai-sub {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0 10px;
  font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted);
}
.roast-ai-card--read .ai-sub::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}

/* ---- Categorie conditionnelle affichee « non applicable » ----
   La fiche etablissement ne se declenche que sur un commerce de proximite.
   Un site qui n'en est pas comptait quinze boites en face d'une promesse de
   seize, sans explication. On la montre donc toujours, en retrait : presente
   pour tenir le compte, muette pour ne rien reprocher. */
.score-chip.na {
  background: var(--bg);
  color: var(--muted);
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.roast-cat--na, .rep-cat--na { opacity: .72; }
.roast-cat--na .roast-cat-teaser, .rep-cat--na .check-what { color: var(--muted); }
.rep-som-row--na .rep-som-name { color: var(--muted); font-weight: 500; }

/* ---- Source de chaque Core Web Vital ----
   Trois mesures viennent des vrais visiteurs, le score de performance vient
   toujours d'un passage en laboratoire. Les afficher cote a cote sans le dire
   produisait des tableaux illisibles : deux vitals au vert et un score en
   rouge juste a cote, sans que rien n'explique pourquoi. */
.cwv-src {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  margin-bottom: 4px;
}
.cwv-na { border-left-color: var(--border); opacity: .8; }
.cwv-na .cwv-rating { color: var(--muted); }
.cwv-value--na { font-size: 1.15rem; font-weight: 700; color: var(--muted); }

/* ---- Page A propos ----
   Hub d'entite : les liens externes du site (sites persos, LinkedIn, agence)
   partent de cette page au lieu d'etre repetes dans le footer de chaque page. */
.about-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin: 8px 0 40px;
}
.about-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 26px 24px 22px;
}
.about-avatar img { border-radius: 50%; display: block; }
.about-card h2 { margin: 14px 0 2px; font-size: 1.25rem; }
.about-role { color: var(--muted); font-size: .88rem; margin: 0 0 12px; }
.about-bio { color: var(--ink-soft); font-size: .95rem; line-height: 1.65; margin: 0 0 16px; }
.about-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.about-links a {
  font-size: .85rem; font-weight: 600; color: var(--ink-soft);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 13px; text-decoration: none;
  transition: border-color .2s var(--ease-out), color .2s var(--ease-out);
}
.about-links a:hover { border-color: var(--orange); color: var(--orange-deep); }
.about-links-agence { margin: 4px 0 28px; }
@media (max-width: 720px) {
  .about-cards { grid-template-columns: 1fr; }
}

/* Nom d'auteur cliquable vers la page A propos, sans changer l'allure du byline. */
.author-id .author-link { color: inherit; text-decoration: none; }
.author-id .author-link:hover b { color: var(--orange-deep); }