/* =============================================================================
   CCN Analyse — Design system
   Les couleurs de marque sont injectées depuis config.php (clé « theme »).
   ============================================================================= */

:root {
  --brand:        #1e6bff;
  --brand-dark:   #0b47c4;
  --accent:       #00c2a8;
  --radius:       18px;

  --ok:    #0f9d6e;
  --ok-bg: #e7f8f1;
  --warn:    #c77700;
  --warn-bg: #fdf3e2;
  --fail:    #d7263d;
  --fail-bg: #fdeaec;
  --info:    #4a5568;
  --info-bg: #eef2f7;

  --bg:        #f5f7fb;
  --bg-soft:   #eef2f9;
  --surface:   #ffffff;
  --surface-2: #fafbfe;
  --line:      #e3e8f0;
  --line-soft: #eff2f7;
  --text:      #0e1726;
  --text-2:    #55607a;
  --text-3:    #8792a8;

  --shadow-sm: 0 1px 2px rgba(14,23,38,.05), 0 1px 3px rgba(14,23,38,.06);
  --shadow-md: 0 4px 14px rgba(14,23,38,.07), 0 2px 6px rgba(14,23,38,.04);
  --shadow-lg: 0 18px 48px rgba(14,23,38,.12), 0 4px 12px rgba(14,23,38,.06);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
  --max: 1180px;
}

[data-theme="dark"] {
  --bg:        #080d17;
  --bg-soft:   #0c1424;
  --surface:   #101a2c;
  --surface-2: #142034;
  --line:      #1e2c45;
  --line-soft: #182338;
  --text:      #eaf0fa;
  --text-2:    #a3b0c6;
  --text-3:    #6d7c96;

  --ok-bg:   #0d2b22;
  --warn-bg: #2d2210;
  --fail-bg: #2e1319;
  --info-bg: #162134;
  --ok:   #34d39f;
  --warn: #f0b429;
  --fail: #ff6b7d;
  --info: #9aa7bf;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,.45);
  --shadow-lg: 0 20px 50px rgba(0,0,0,.55);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 22px; }

/* ---------------------------------------------------------------- Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 18px; height: 66px; }
.logo { display: flex; align-items: center; gap: 11px; font-weight: 700; color: var(--text); letter-spacing: -.02em; }
.logo:hover { text-decoration: none; }
.logo img { height: 30px; width: auto; display: block; }
.logo-mark {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  color: #fff; font-weight: 800; font-size: 14px; letter-spacing: -.03em;
}
.logo small { display: block; font-size: 11.5px; font-weight: 500; color: var(--text-3); letter-spacing: .04em; text-transform: uppercase; }
.header-spacer { flex: 1; }
.header-nav { display: flex; align-items: center; gap: 8px; }
.header-nav a.ghost { font-size: 14px; color: var(--text-2); padding: 8px 12px; border-radius: 10px; }
.header-nav a.ghost:hover { background: var(--bg-soft); text-decoration: none; color: var(--text); }

.icon-btn {
  width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text-2); cursor: pointer;
  display: grid; place-items: center; transition: .18s;
}
.icon-btn:hover { color: var(--brand); border-color: var(--brand); }

/* ------------------------------------------------------------------ Hero */
.hero { position: relative; padding: 62px 0 42px; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -160px 0 auto 50%; transform: translateX(-50%);
  width: 1100px; height: 520px; pointer-events: none;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--brand) 20%, transparent), transparent 72%),
    radial-gradient(closest-side, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
  background-position: 30% 40%, 72% 30%;
  background-repeat: no-repeat;
  background-size: 60% 100%, 55% 90%;
  opacity: .8;
}
.hero > * { position: relative; }
.hero.compact { padding: 34px 0 18px; }

/* Aperçu illustratif à droite du hero */
.hero-grid { display: grid; grid-template-columns: 1fr 400px; gap: 48px; align-items: center; }
.preview {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 22px; transform: perspective(1400px) rotateY(-7deg) rotateX(3deg);
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.preview:hover { transform: perspective(1400px) rotateY(-2deg) rotateX(1deg); }
.preview-top { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); }
.preview-ring { position: relative; width: 74px; height: 74px; flex: none; }
.preview-ring svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.preview-ring span { position: absolute; inset: 0; display: grid; place-content: center; font-size: 24px; font-weight: 800; color: var(--ok); letter-spacing: -.04em; }
.preview-top b { display: block; font-size: 15px; letter-spacing: -.02em; }
.preview-top i { font-style: normal; font-size: 12.5px; color: var(--text-3); }
.preview-rows { display: grid; gap: 10px; padding-top: 15px; }
.preview-row { display: grid; grid-template-columns: 1fr 62px; gap: 12px; align-items: center; font-size: 12.5px; color: var(--text-2); }
.preview-row .b { height: 6px; border-radius: 99px; background: var(--line-soft); overflow: hidden; }
.preview-row .b i { display: block; height: 100%; border-radius: 99px; }
.preview-tag { margin-top: 16px; padding: 11px 13px; border-radius: 10px; background: var(--warn-bg); color: var(--warn); font-size: 12.3px; font-weight: 600; display: flex; gap: 8px; align-items: flex-start; }
@media (max-width: 1040px) { .hero-grid { grid-template-columns: 1fr; } .preview { display: none; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase;
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
}
.hero h1 {
  margin: 20px 0 12px; font-size: clamp(30px, 4.6vw, 50px); line-height: 1.1;
  letter-spacing: -.035em; font-weight: 800; max-width: 19ch;
}
.hero h1 .grad {
  background: linear-gradient(100deg, var(--brand), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lead { font-size: 17.5px; color: var(--text-2); max-width: 62ch; margin: 0 0 30px; }

/* ------------------------------------------------------------------ Form */
.search {
  display: flex; gap: 10px; align-items: stretch; max-width: 640px;
  background: var(--surface); padding: 9px; border-radius: 16px;
  border: 1px solid var(--line); box-shadow: var(--shadow-md);
  transition: .2s;
}
.search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent), var(--shadow-md); }
.search input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text);
  font-size: 16px; font-family: var(--font); padding: 12px 14px; outline: none;
}
.search input::placeholder { color: var(--text-3); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; cursor: pointer; font-family: var(--font); font-size: 15px; font-weight: 600;
  padding: 13px 22px; border-radius: 12px; transition: .18s; white-space: nowrap;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 32%, transparent); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 26px color-mix(in srgb, var(--brand) 40%, transparent); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.btn-ghost { background: var(--surface); color: var(--text); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn-accent { background: var(--accent); color: #05221d; }
.btn-sm { padding: 9px 15px; font-size: 13.5px; border-radius: 10px; }

.form-note { margin-top: 14px; font-size: 13.5px; color: var(--text-3); }
.form-error { margin-top: 12px; color: var(--fail); font-size: 14px; font-weight: 500; }

.trust { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 26px; font-size: 13.5px; color: var(--text-2); }
.trust span { display: inline-flex; align-items: center; gap: 7px; }
.trust svg { color: var(--ok); flex: none; }
.trust b { color: var(--text); font-weight: 700; }

/* -------------------------------------------------------------- Results */
.results { padding: 8px 0 60px; }

.result-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding: 16px 20px; margin-bottom: 22px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-sm);
}
.result-bar .dom { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.result-bar .meta { font-size: 13px; color: var(--text-3); }
.result-bar .spacer { flex: 1; }
.result-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Score panel */
.score-panel {
  display: grid; grid-template-columns: 250px 1fr; gap: 30px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; box-shadow: var(--shadow-md); margin-bottom: 26px;
  position: relative; overflow: hidden;
}
.score-panel::after {
  content: ""; position: absolute; right: -80px; top: -80px; width: 300px; height: 300px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 12%, transparent), transparent);
  pointer-events: none;
}
.gauge { position: relative; width: 210px; height: 210px; margin: 0 auto; }
.gauge svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.gauge .track { stroke: var(--line-soft); }
.gauge .bar { stroke-linecap: round; transition: stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1), stroke .5s; }
.gauge .center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.gauge .grade { font-size: 52px; font-weight: 800; line-height: 1; letter-spacing: -.05em; }
.gauge .val { font-size: 14px; color: var(--text-2); margin-top: 6px; font-weight: 600; }
.gauge .lbl { font-size: 12px; color: var(--text-3); text-transform: uppercase; letter-spacing: .09em; margin-top: 2px; }

.score-side h2 { margin: 0 0 6px; font-size: 22px; letter-spacing: -.02em; }
.score-side > p { margin: 0 0 20px; color: var(--text-2); font-size: 14.5px; max-width: 60ch; }

.cat-bars { display: grid; gap: 11px; }
.cat-row { display: grid; grid-template-columns: 190px 1fr 46px; gap: 14px; align-items: center; font-size: 13.5px; }
.cat-row .name { color: var(--text-2); display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.cat-row .name .w { font-size: 11px; color: var(--text-3); white-space: nowrap; flex: none; }
.cat-track { height: 8px; border-radius: 99px; background: var(--line-soft); overflow: hidden; }
.cat-fill { height: 100%; border-radius: 99px; width: 0; transition: width .9s cubic-bezier(.22,1,.36,1); }
.cat-row .pct { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.cat-row.na .cat-track { background: repeating-linear-gradient(135deg, var(--line-soft) 0 6px, transparent 6px 12px); }
.cat-row.na .cat-fill { width: 0 !important; }
.cat-row.na .pct { font-weight: 600; font-size: 12px; color: var(--text-3); }

.s-ok   { color: var(--ok); }   .bg-ok   { background: var(--ok); }
.s-warn { color: var(--warn); } .bg-warn { background: var(--warn); }
.s-fail { color: var(--fail); } .bg-fail { background: var(--fail); }
.s-info { color: var(--info); } .bg-info { background: var(--info); }

/* Plan d'action */
.section-title { display: flex; align-items: center; gap: 12px; margin: 34px 0 16px; }
.section-title h2 { margin: 0; font-size: 20px; letter-spacing: -.02em; }
.section-title .count {
  font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  background: var(--bg-soft); color: var(--text-2);
}
.section-title p { margin: 0; font-size: 13.5px; color: var(--text-3); }

.actions-list { display: grid; gap: 12px; }
.action-card {
  display: grid; grid-template-columns: auto 1fr; gap: 16px;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--info); border-radius: 14px; padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}
.action-card.high   { border-left-color: var(--fail); }
.action-card.medium { border-left-color: var(--warn); }
.action-card.low    { border-left-color: var(--brand); }
.sev-badge {
  align-self: start; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 5px 10px; border-radius: 8px; white-space: nowrap;
}
.sev-high   { background: var(--fail-bg); color: var(--fail); }
.sev-medium { background: var(--warn-bg); color: var(--warn); }
.sev-low    { background: var(--info-bg); color: var(--text-2); }
.action-card h3 { margin: 0 0 6px; font-size: 15.5px; letter-spacing: -.01em; }
.action-card p  { margin: 0; font-size: 14px; color: var(--text-2); }
.action-card .cat { display: block; margin-top: 9px; font-size: 12px; color: var(--text-3); }
.action-card .cat b { color: var(--accent); font-weight: 600; }

.all-good {
  background: var(--ok-bg); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent);
  border-radius: 14px; padding: 22px; display: flex; gap: 14px; align-items: center;
}
.all-good strong { color: var(--ok); }

/* Cartes modules */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; align-items: start; }
/* Carte seule sur la dernière ligne (7 familles sur 3 colonnes) : pleine largeur */
@media (min-width: 1100px) { .cards > .card:last-child:nth-child(3n+1) { grid-column: 1 / -1; } }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .2s, transform .2s;
}
.card:hover { box-shadow: var(--shadow-md); }
.card-head { display: flex; align-items: center; gap: 13px; padding: 18px 20px 14px; }
.card-ico {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none;
  background: var(--info-bg); color: var(--text-2);
}
.card-ico.ok   { background: var(--ok-bg);   color: var(--ok); }
.card-ico.warn { background: var(--warn-bg); color: var(--warn); }
.card-ico.fail { background: var(--fail-bg); color: var(--fail); }
.card-head h3 { margin: 0; font-size: 15.5px; letter-spacing: -.01em; text-wrap: balance; }
.card-head > div { min-width: 0; }
.card-head .sub { font-size: 12.5px; color: var(--text-3); }
.card-score {
  margin-left: auto; font-size: 13px; font-weight: 800; padding: 5px 11px;
  border-radius: 9px; background: var(--bg-soft); font-variant-numeric: tabular-nums;
}
.card-summary { padding: 0 20px 14px; font-size: 13.8px; color: var(--text-2); }

.items { border-top: 1px solid var(--line-soft); }
.item {
  display: grid; grid-template-columns: auto 1fr; gap: 11px;
  padding: 11px 20px; border-bottom: 1px solid var(--line-soft); font-size: 13.5px;
}
.item:last-child { border-bottom: 0; }
.dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex: none; }
.item .lbl { color: var(--text-3); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.item .val { font-weight: 600; word-break: break-word; }
.item .val.mono { font-family: var(--mono); font-size: 12.4px; font-weight: 500; }
.item .hint { margin-top: 4px; font-size: 12.6px; color: var(--text-3); line-height: 1.5; }

.card-foot { margin-top: auto; padding: 12px 20px; border-top: 1px solid var(--line-soft); background: var(--surface-2); }
.toggle-items {
  background: none; border: 0; color: var(--brand); font-family: var(--font);
  font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 6px 0; margin: -6px 0;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px;
}
.toggle-items svg { transition: transform .2s; }
.card.open .toggle-items svg { transform: rotate(180deg); }
.card:not(.open) .items .item:nth-child(n+5) { display: none; }

/* Squelettes de chargement */
.skeleton { position: relative; overflow: hidden; background: var(--line-soft); border-radius: 6px; height: 12px; }
.skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 70%, transparent), transparent);
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }
.card.loading .card-summary { opacity: .6; }
.spinner {
  width: 15px; height: 15px; border: 2px solid var(--line); border-top-color: var(--brand);
  border-radius: 50%; animation: spin .7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.coverage-note {
  background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--warn) 34%, transparent);
  color: var(--warn); border-radius: 12px; padding: 13px 16px; font-size: 13.5px; margin-bottom: 18px;
}
.coverage-note strong { color: var(--warn); }
.cap-banner {
  background: var(--fail-bg); border: 1px solid color-mix(in srgb, var(--fail) 40%, transparent);
  border-left: 4px solid var(--fail); color: var(--fail); border-radius: 12px;
  padding: 14px 18px; font-size: 14.5px; margin-bottom: 18px;
}
.cap-banner strong { color: var(--fail); text-transform: uppercase; letter-spacing: .03em; }

.progress-strip {
  height: 3px; background: var(--line-soft); border-radius: 99px; overflow: hidden; margin-bottom: 22px;
}
.progress-strip i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--brand), var(--accent)); transition: width .4s ease; }

/* Outils externes */
.tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.tool {
  display: block; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 13px; transition: .18s;
}
.tool:hover { text-decoration: none; border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.tool strong { display: flex; align-items: center; gap: 7px; color: var(--text); font-size: 14.5px; }
.tool span { display: block; margin-top: 5px; font-size: 13px; color: var(--text-2); }

/* Lead + CTA */
.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow-sm);
}
.lead-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.lead-form { display: grid; gap: 11px; }
.field { display: grid; gap: 5px; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.field input {
  padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-2); color: var(--text); font-family: var(--font); font-size: 14.5px;
}
.field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.lead-msg { font-size: 13.5px; margin-top: 4px; }

.cta {
  margin-top: 26px; border-radius: var(--radius); padding: 32px;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark) 55%, #06283d);
  color: #fff; display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: center;
  box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
}
.cta::before {
  content: ""; position: absolute; right: -60px; bottom: -90px; width: 320px; height: 320px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 26%, transparent);
}
.cta > * { position: relative; }
.cta h2 { margin: 0 0 8px; font-size: 24px; letter-spacing: -.025em; }
.cta p { margin: 0; opacity: .88; font-size: 15px; max-width: 58ch; }
.cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cta .btn-ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.28); }
.cta .btn-ghost:hover { background: rgba(255,255,255,.2); color: #fff; }

/* Comment ça marche */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.step b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); font-size: 14px; margin-bottom: 11px; }
.step h3 { margin: 0 0 5px; font-size: 15px; }
.step p { margin: 0; font-size: 13.5px; color: var(--text-2); }

/* FAQ */
.faq details {
  background: var(--surface); border: 1px solid var(--line); border-radius: 13px;
  padding: 15px 18px; margin-bottom: 9px;
}
.faq summary { cursor: pointer; font-weight: 600; font-size: 14.5px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--brand); font-size: 20px; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq p { margin: 11px 0 0; font-size: 14px; color: var(--text-2); }

/* Footer */
.site-footer { border-top: 1px solid var(--line); background: var(--surface); padding: 34px 0; margin-top: 50px; }
.footer-grid { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.site-footer p { margin: 0; font-size: 13.5px; color: var(--text-3); }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13.5px; }

.disclaimer { margin-top: 22px; font-size: 12.5px; color: var(--text-3); line-height: 1.6; }

/* Responsive */
@media (max-width: 900px) {
  .score-panel { grid-template-columns: 1fr; gap: 22px; padding: 24px; }
  .gauge { width: 180px; height: 180px; }
  .lead-grid { grid-template-columns: 1fr; }
  .cta { grid-template-columns: 1fr; }
  .cat-row { grid-template-columns: 140px 1fr 42px; font-size: 12.8px; }
}
@media (max-width: 620px) {
  body { font-size: 15px; }
  .wrap { padding: 0 16px; }
  .search { flex-direction: column; }
  .search .btn { width: 100%; }
  .header-nav a.ghost { display: none; }
  .cards { grid-template-columns: 1fr; }
  .hero { padding: 36px 0 26px; }

  /* Familles de contrôles : libellé et note sur une ligne, jauge en dessous */
  .cat-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "name pct" "bar bar";
    gap: 6px 12px;
    padding-bottom: 4px;
  }
  .cat-row .name  { grid-area: name; font-size: 13.5px; }
  .cat-row .pct   { grid-area: pct; font-size: 14px; }
  .cat-track      { grid-area: bar; height: 7px; }

  /* Recommandations : badge au-dessus, texte sur toute la largeur */
  .action-card {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px;
  }
  .sev-badge { justify-self: start; }

  /* Zones tactiles confortables au doigt */
  .btn-sm { padding: 11px 16px; min-height: 42px; }
  .icon-btn { width: 42px; height: 42px; }
  .toggle-items { min-height: 44px; padding: 11px 0; margin: -11px 0; width: 100%; }
  .faq summary { padding: 4px 0; }

  /* 16 px minimum : en dessous, iOS zoome automatiquement à la saisie */
  .field input, .search input { font-size: 16px; }

  /* Barre de résultats : le domaine d'abord, les actions ensuite */
  .result-bar { padding: 14px 16px; }
  .result-bar .dom { font-size: 17px; word-break: break-all; }
  .result-actions { width: 100%; }
  .result-actions .btn { flex: 1; justify-content: center; }

  .score-panel { padding: 20px 16px; }
  .gauge { width: 168px; height: 168px; }
  .gauge .grade { font-size: 42px; }
  .gauge .center { padding: 0 26px; }
  .gauge .val { font-size: 13px; }
  .gauge .lbl { font-size: 10px; letter-spacing: .06em; }
  .panel { padding: 20px 16px; }
  .cta { padding: 24px 20px; }
  .cta h2 { font-size: 20px; }
  .section-title { margin: 28px 0 14px; flex-wrap: wrap; gap: 8px; }
  .section-title h2 { font-size: 18px; }
  .card-head { padding: 16px 16px 12px; }
  .card-summary, .item { padding-left: 16px; padding-right: 16px; }
  .card-foot { padding: 10px 16px; }
  .deep-card { padding: 18px 16px; }
  .tools { grid-template-columns: 1fr; }
  .footer-grid { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* Tablette portrait : deux colonnes de cartes, pondérations lisibles */
@media (min-width: 621px) and (max-width: 900px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .cat-row { grid-template-columns: 160px 1fr 44px; }
}

/* Impression / export PDF */
@media print {
  :root { --bg: #fff; --surface: #fff; --line: #d5dbe6; }
  .site-header, .site-footer, .result-actions, .lead-block, .cta,
  .tools-block, .search, .faq, .steps-block, .toggle-items, .icon-btn { display: none !important; }
  body { background: #fff; font-size: 11.5pt; }
  .card, .panel, .score-panel, .action-card { box-shadow: none; break-inside: avoid; page-break-inside: avoid; }
  .cards { grid-template-columns: 1fr 1fr; }
  .card:not(.open) .items .item:nth-child(n+5) { display: grid; }
  .print-header { display: block !important; margin-bottom: 18px; }
  a[href^="http"]::after { content: ""; }
}
.print-header { display: none; }

/* -------------------------------------------------- Vérifications approfondies */
.deep { display: grid; gap: 16px; }
.deep-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 20px 22px;
}
.deep-head { display: flex; gap: 14px; align-items: flex-start; }
.deep-head h3 { margin: 0 0 4px; font-size: 16px; letter-spacing: -.015em; }
.deep-head p  { margin: 0; font-size: 13.5px; color: var(--text-2); max-width: 74ch; }
.deep-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; padding-left: 54px; }
.deep-wait { font-size: 12.5px; color: var(--text-3); }
.deep-body { margin-top: 18px; padding-left: 54px; }
.deep-body .items { border-top: 1px solid var(--line-soft); border-radius: 0; }
.deep-body .item { padding-left: 0; padding-right: 0; }
.deep-summary {
  font-size: 14px; font-weight: 600; margin-bottom: 4px; display: flex; gap: 9px; align-items: center;
}
.deep-error {
  background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  color: var(--warn); border-radius: 10px; padding: 13px 15px; font-size: 13.5px; line-height: 1.65;
}
.deep-error a { color: var(--warn); font-weight: 600; text-decoration: underline; word-break: break-all; }
.deep-issues { display: grid; gap: 10px; margin-top: 14px; }
@media (max-width: 620px) {
  .deep-actions, .deep-body { padding-left: 0; }
  .deep-head .card-ico { display: none; }
}

/* ---- Contrôles non mesurables ------------------------------------------- */
.coverage-note--info{
  background: var(--info-bg);
  border-color: color-mix(in srgb, var(--info) 30%, transparent);
  color: var(--ink);
}
.coverage-note--info strong{ color: var(--info); }
.unmeasured-list{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:7px}
.unmeasured-list li{
  font-size:13px;line-height:1.5;padding-left:14px;position:relative;
}
.unmeasured-list li::before{
  content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;
  background:var(--info);opacity:.55;
}
.um-mod{font-weight:600}
.um-why{display:block;opacity:.72;font-size:12.5px;margin-top:2px}
@media (max-width:620px){
  .unmeasured-list li{font-size:12.5px}
  .um-why{font-size:12px}
}

/* ---- Ce qui se règle par changement d'hébergeur -------------------------- */
.ccn-fix{display:grid;gap:2px}
.fix-row{display:flex;gap:13px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line-soft)}
.fix-row:last-of-type{border-bottom:0}
.fix-mark{
  flex:0 0 26px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb, var(--ok) 14%, transparent);color:var(--ok);margin-top:1px;
}
.fix-mark svg{width:15px;height:15px}
.fix-row h3{margin:0 0 3px;font-size:14.5px;font-weight:600;line-height:1.35}
.fix-row p{margin:0;font-size:13.5px;line-height:1.55;opacity:.82}
.fix-foot{
  margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line);
  font-size:13.5px;line-height:1.6;opacity:.9;
}
.fix-foot strong{color:var(--ok)}

/* ---- Projection d'hébergement -------------------------------------------- */
.gain-panel{padding:22px 24px}

/* Le chiffre d'abord : c'est ce qui se retient. */
/* L'attribut HTML « hidden » pose display:none via la feuille du navigateur.
   Toute règle display: d'une classe le remporte sur elle : sans ce garde-fou,
   un bloc masqué en display:flex reste affiché — c'est ce qui laissait voir
   les tirets « — » du gabarit à la place des scores. */
[hidden]{ display:none !important; }

.gain-hero{
  display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;
  padding:6px 0 24px;margin-bottom:22px;border-bottom:1px solid var(--line);position:relative;
}
.gain-side{display:flex;flex-direction:column;align-items:center;min-width:132px}
.gain-lbl{
  font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;opacity:.6;
  font-weight:600;margin-bottom:6px;
}
.gain-num{font-size:46px;font-weight:700;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.gain-unit{font-size:12px;opacity:.55;margin-top:5px}
.gain-side.is-ccn .gain-num{color:var(--ok)}
.gain-side.is-ccn .gain-lbl{color:var(--ok);opacity:.95}
.gain-arrow{color:var(--line);flex:0 0 auto}
.gain-badge{
  display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;
  color:var(--ok);background:color-mix(in srgb, var(--ok) 12%, transparent);
  border-radius:99px;padding:5px 13px 5px 10px;
}
.gain-badge svg{flex:0 0 auto}

.gap-h{
  font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;opacity:.6;
  font-weight:600;margin:0 0 13px;
}
.gap-bars + .gap-h{margin-top:26px}

/* Barres avant / après. Le segment gagné est distinct de la valeur actuelle
   par la couleur ET par l'étiquette chiffrée : jamais la couleur seule. */
.gap-bars{display:grid;gap:13px}
.gap-bar{display:grid;grid-template-columns:190px 1fr auto;align-items:center;gap:14px}
.gb-name{font-size:13.5px;font-weight:500;line-height:1.35}
.gb-track{
  position:relative;height:8px;border-radius:99px;background:var(--line-soft);overflow:hidden;
}
.gb-track i{position:absolute;top:0;height:100%;border-radius:99px}
.gb-now{left:0}
.gb-now.s-ok{background:var(--ok)}
.gb-now.s-warn{background:var(--warn)}
.gb-now.s-fail{background:var(--fail)}
.gb-next{
  background:repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--ok) 60%, transparent) 0 5px,
    color-mix(in srgb, var(--ok) 28%, transparent) 5px 10px);
  box-shadow:-2px 0 0 0 var(--surface);
}
.gb-val{
  font-size:13px;font-variant-numeric:tabular-nums;opacity:.7;white-space:nowrap;
  display:inline-flex;align-items:center;gap:5px;justify-self:end;min-width:74px;
  justify-content:flex-end;
}
.gb-val b{color:var(--ok);font-weight:700;opacity:1}
.gb-val svg{opacity:.45}

/* Écarts critère par critère */
.gap-chips{display:grid;gap:9px}
/* Les puces épousent leur contenu : une puce étirée sur toute la colonne
   suggérerait une grandeur là où il n'y a qu'une étiquette. */
.chip-row{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.cr-lbl{font-size:13.5px;font-weight:500;flex:0 0 190px}
.cr-arrow{opacity:.35;display:inline-flex}
.chip{
  display:inline-flex;align-items:center;font-size:12.5px;font-weight:600;
  border-radius:7px;padding:4px 10px;white-space:nowrap;
}
.chip-now{background:var(--warn-bg);color:var(--warn)}
.chip-next{background:color-mix(in srgb, var(--ok) 13%, transparent);color:var(--ok)}

/* Ce que comprend l'hébergement */
.section-title.tight{margin-top:26px}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:12px}
.feature{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:17px 18px;
}
.feature-ico{
  display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:color-mix(in srgb, var(--brand) 11%, transparent);color:var(--brand);margin-bottom:11px;
}
.feature h3{margin:0 0 5px;font-size:14px;font-weight:600;line-height:1.35}
.feature p{margin:0;font-size:13px;line-height:1.55;opacity:.78}

.gain-cta{
  margin-top:16px;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:20px 22px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;
}
.gain-cta h3{margin:0 0 5px;font-size:15.5px;font-weight:600}
.gain-cta p{margin:0;font-size:13.5px;line-height:1.55;opacity:.8;max-width:56ch}
.gain-cta .btn{margin-left:auto;flex:0 0 auto}

@media (max-width:760px){
  .gap-bar{grid-template-columns:1fr;gap:6px}
  .gb-val{justify-self:end;margin-top:-2px}
  .gb-track{order:3}
  .chip-row{gap:8px}
  .cr-lbl{flex:0 0 100%;margin-bottom:-2px}
}
@media (max-width:620px){
  .gain-panel{padding:18px 16px}
  .gain-hero{gap:16px;padding-bottom:20px}
  .gain-num{font-size:38px}
  .gain-side{min-width:104px}
  .gain-arrow{transform:rotate(90deg)}
  .gain-cta{padding:17px 16px}
  .gain-cta .btn{margin-left:0;width:100%;justify-content:center}
  .feature-grid{grid-template-columns:1fr}
}
.meta-note{opacity:.75}
.all-good.is-partial{
  background: var(--warn-bg);
  border-color: color-mix(in srgb, var(--warn) 34%, transparent);
  color: var(--ink);
}
.all-good.is-partial svg{ color: var(--warn) }
.all-good.is-partial strong{ color: var(--warn) }

/* ---- Bandeau « déjà hébergé chez nous » ---------------------------------- */
.client-banner{
  display:flex;align-items:flex-start;gap:13px;
  background:color-mix(in srgb, var(--ok) 9%, transparent);
  border:1px solid color-mix(in srgb, var(--ok) 30%, transparent);
  border-radius:12px;padding:13px 17px;margin-bottom:18px;font-size:13.5px;line-height:1.6;
}
.client-banner .cb-mark{
  flex:0 0 22px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:var(--ok);color:#fff;margin-top:1px;
}
.client-banner .cb-mark svg{width:13px;height:13px}
.client-banner strong{color:var(--ok)}
.client-banner span#ccn-client-ip{opacity:.8}
@media (max-width:620px){ .client-banner{font-size:13px;padding:12px 14px} }

/* ---- Pages d'atterrissage ------------------------------------------------ */
.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;
}
.article{max-width:760px;padding-top:34px;padding-bottom:56px}
.crumb{font-size:12.5px;opacity:.65;margin-bottom:16px}
.crumb a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.crumb span{margin:0 6px;opacity:.5}
.article h1{font-size:33px;line-height:1.2;letter-spacing:-.02em;margin:0 0 14px}
.article h2{
  font-size:21px;line-height:1.3;letter-spacing:-.01em;margin:38px 0 12px;
  padding-top:22px;border-top:1px solid var(--line-soft);
}
.article .lede p{font-size:16.5px;line-height:1.65;opacity:.85;margin:0 0 14px}
.article p{font-size:15px;line-height:1.72;margin:0 0 14px}
.article ul,.article ol{margin:0 0 16px;padding-left:20px}
.article li{font-size:15px;line-height:1.7;margin-bottom:7px}
.article code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:1px 5px;
}
.article a{color:var(--brand)}
.article table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:14px;display:block;overflow-x:auto}
.article th,.article td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line-soft)}
.article thead th{
  font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;opacity:.65;
  border-bottom:1px solid var(--line);
}

.page-search{margin:22px 0 6px}
.search-note{font-size:12.5px;opacity:.65;margin:0 0 8px}

.faq-list{display:grid;gap:2px;margin-bottom:8px}
.faq-item{border-bottom:1px solid var(--line-soft);padding:4px 0}
.faq-item summary{
  cursor:pointer;padding:11px 0;font-weight:600;font-size:15px;line-height:1.45;list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{content:"+";margin-right:10px;color:var(--brand);font-weight:700}
.faq-item[open] summary::before{content:"–"}
.faq-item > div{padding:0 0 12px 24px}
.faq-item p{font-size:14.5px;margin:0 0 10px}

.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;margin-bottom:10px}
.related{
  display:block;background:var(--surface);border:1px solid var(--line);border-radius:13px;
  padding:16px 17px;text-decoration:none;color:inherit;transition:border-color .16s,transform .16s;
}
.related:hover{border-color:var(--brand);transform:translateY(-1px)}
.related strong{display:block;font-size:14.5px;line-height:1.4;margin-bottom:5px}
.related span{display:block;font-size:13px;line-height:1.55;opacity:.72}
.page-cta{margin-top:34px}

@media (max-width:620px){
  .article{padding-top:24px}
  .article h1{font-size:26px}
  .article h2{font-size:19px;margin-top:30px}
  .article .lede p{font-size:15.5px}
  .related-grid{grid-template-columns:1fr}
}

/* --------------------------------------------------------------------------
   Intro de la page de résultats (v2.10.1)
   Un prospect arrive souvent par un lien partagé, directement sur les
   résultats. Sans ce bloc il n'y trouvait ni promesse ni cadrage.
   -------------------------------------------------------------------------- */
.result-intro { margin: 28px 0 18px; }
.result-intro h1 {
  font-size: clamp(22px, 3.4vw, 34px);
  line-height: 1.18;
  margin: 0 0 10px;
  letter-spacing: -.02em;
}
.result-intro .lead {
  max-width: 68ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-2);
}
@media print { .result-intro { display: none; } }

/* --------------------------------------------------------------------------
   Sélecteur de langue (v2.11.0)
   Affiche la langue vers laquelle on bascule, pas la langue courante :
   « English » sur la version française, « Français » sur l'anglaise.
   -------------------------------------------------------------------------- */
.lang-switch {
  font-weight: 600;
  letter-spacing: .01em;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 13px;
}
.lang-switch:hover { border-color: var(--brand); color: var(--brand); }
@media (max-width: 720px) { .lang-switch { padding: 4px 10px; font-size: 13px; } }

/* --------------------------------------------------------------------------
   Adresse publique du visiteur (v2.12.2)
   -------------------------------------------------------------------------- */
.myip {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin: 14px 0 0; font-size: 13px; color: var(--text-2);
}
.myip svg { opacity: .6; flex: none; }
.myip-v {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600; color: var(--text);
}
.myip-x { opacity: .85; }
@media print { .myip { display: none; } }

/* =============================================================================
   v2.17.0 — Avis des utilisateurs, navigation mobile, sommaire du rapport,
   documentation intégrée
   ========================================================================== */

/* ---------- Avis : section ---------- */
.avis-section { padding: 64px 0; background: var(--bg-soft); border-top: 1px solid var(--line-soft); }
.avis-section.compact { padding: 44px 0; }
.avis-head { display: flex; gap: 24px; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; flex-wrap: wrap; }
.avis-head h2 { margin: 10px 0 8px; font-size: clamp(22px, 3vw, 30px); letter-spacing: -.02em; }
.avis-sub { margin: 0; color: var(--text-2); max-width: 640px; font-size: 15px; }
.avis-grid { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: start; }
.avis-resume { position: sticky; top: 88px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow-sm); }
.avis-moyenne b { font-size: 46px; line-height: 1; letter-spacing: -.03em; }
.avis-moyenne span { color: var(--text-3); font-weight: 600; margin-left: 4px; }
.stars { display: inline-flex; gap: 2px; color: #f5a623; vertical-align: middle; }
.avis-resume .stars { margin: 8px 0 4px; }
.avis-nb { margin: 0 0 14px; color: var(--text-2); font-size: 13.5px; }
.avis-repartition { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.avis-filtre { width: 100%; display: grid; grid-template-columns: 34px 1fr 28px; gap: 10px; align-items: center;
  background: none; border: 1px solid transparent; border-radius: 8px; padding: 5px 6px; font: inherit; font-size: 13px;
  color: var(--text-2); cursor: pointer; text-align: left; }
.avis-filtre:hover:not(:disabled), .avis-filtre.on { border-color: var(--line); background: var(--surface-2); color: var(--text); }
.avis-filtre.on { border-color: var(--brand); }
.avis-filtre:disabled { cursor: default; opacity: .55; }
.avis-filtre .rb { height: 8px; border-radius: 99px; background: var(--line-soft); overflow: hidden; }
.avis-filtre .rb i { display: block; height: 100%; background: #f5a623; border-radius: 99px; }
.avis-filtre .rc { text-align: right; font-variant-numeric: tabular-nums; }
.avis-outils { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; font-size: 14px; color: var(--text-2); }
.avis-outils select { padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-size: 14px; }
.avis-filtre-actif { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 12px; border-radius: 99px;
  background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); font-weight: 600; font-size: 13px; }
.avis-filtre-actif button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 12px; padding: 2px 6px; }
.avis-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; transition: opacity .2s; }
.avis-liste.loading { opacity: .45; }
.avis-section.compact .avis-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.avis-carte { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow-sm); }
.avis-carte header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.avis-carte time { font-size: 12.5px; color: var(--text-3); white-space: nowrap; }
.avis-carte h3 { margin: 2px 0 0; font-size: 15.5px; }
.avis-carte p { margin: 0; color: var(--text-2); font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere; }
.avis-carte footer { margin-top: auto; padding-top: 8px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.avis-auteur { font-weight: 600; font-size: 14px; }
.avis-badge { font-size: 11.5px; font-weight: 700; color: var(--ok); background: var(--ok-bg); padding: 2px 8px; border-radius: 99px; }
.avis-reponse { margin-top: 6px; border-left: 3px solid var(--brand); background: var(--surface-2); border-radius: 0 10px 10px 0; padding: 10px 12px; }
.avis-reponse strong { font-size: 12.5px; color: var(--brand); }
.avis-reponse p { font-size: 13.5px; margin-top: 4px; }
.avis-aucun, .avis-vide { color: var(--text-2); }
.avis-vide { background: var(--surface); border: 1px dashed var(--line); border-radius: 14px; padding: 22px; }
.avis-vide p { margin: 0; }
.avis-tous { margin: 16px 0 0; font-weight: 600; }
.avis-pagination { display: flex; gap: 6px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.avis-pagination button { min-width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.avis-pagination button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.avis-pagination button:disabled { opacity: .4; cursor: default; }

/* ---------- Avis : bouton flottant ---------- */
.avis-flottant { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 60;
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border: 0; border-radius: 99px;
  background: linear-gradient(135deg, #f5a623, #e8890c); color: #2b1600; font: inherit; font-weight: 700; font-size: 14.5px;
  box-shadow: 0 10px 28px rgba(232,137,12,.38); cursor: pointer; transition: transform .15s; }
.avis-flottant:hover { transform: translateY(-2px); }
.avis-flottant:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }

/* ---------- Avis : fenêtre de dépôt ---------- */
.avis-modal { width: min(620px, calc(100vw - 24px)); max-height: calc(100vh - 32px); border: 1px solid var(--line); border-radius: 18px;
  padding: 0; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); }
.avis-modal::backdrop { background: rgba(8,13,23,.55); backdrop-filter: blur(3px); }
.avis-modal form { padding: 22px 24px 20px; display: grid; gap: 14px; }
.avis-modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.avis-modal-head h2 { margin: 0; font-size: 20px; }
.avis-modal-note { margin: -4px 0 0; font-size: 13px; color: var(--text-2); }
.avis-modal .field input, .avis-modal .field textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-2); color: var(--text); font: inherit; font-size: 15px; }
.avis-modal .field textarea { resize: vertical; min-height: 110px; }
.avis-modal .field input:focus, .avis-modal .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent); }
.avis-modal .invalide { border-color: var(--fail) !important; }
.avis-modal small { color: var(--text-3); font-weight: 500; }
.avis-compteur { text-align: right; }
.req { color: var(--fail); }
.avis-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.avis-notes { border: 0; padding: 0; margin: 0; }
.avis-notes legend { font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 4px; }
.avis-etoiles-saisie { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.avis-etoiles-saisie input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.avis-etoiles-saisie label { font-size: 34px; line-height: 1; color: var(--line); cursor: pointer; transition: color .1s, transform .1s; }
.avis-etoiles-saisie label:hover, .avis-etoiles-saisie label:hover ~ label,
.avis-etoiles-saisie input:checked ~ label { color: #f5a623; }
.avis-etoiles-saisie input:focus-visible + label { outline: 2px solid var(--brand); border-radius: 4px; }
.avis-note-libelle { display: block; font-size: 13px; color: var(--text-2); margin-top: 2px; }
.avis-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.avis-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--text-2); }
.avis-consent input { margin-top: 3px; }
.avis-captcha { min-height: 65px; }
.avis-msg { margin: 0; padding: 10px 13px; border-radius: 10px; font-size: 14px; }
.avis-msg.ok { background: var(--ok-bg); color: var(--ok); }
.avis-msg.ko { background: var(--fail-bg); color: var(--fail); }
.avis-modal-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* ---------- Navigation mobile ---------- */
.menu-btn { display: none; }
@media (max-width: 620px) {
  .menu-btn { display: inline-flex; }
  .header-nav.ouvert { position: absolute; top: 66px; left: 0; right: 0; flex-direction: column; align-items: stretch;
    background: var(--surface); border-bottom: 1px solid var(--line); padding: 10px 16px 16px; box-shadow: var(--shadow-md); z-index: 70; }
  .header-nav.ouvert a.ghost { display: block; padding: 12px 10px; font-size: 15.5px; }
}

/* ---------- Sommaire du rapport (collant) ---------- */
.report-toc { position: sticky; top: 66px; z-index: 40; background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-soft); margin: 0 -22px 18px; padding: 8px 22px; }
.report-toc ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.report-toc ul::-webkit-scrollbar { display: none; }
.report-toc a { display: inline-block; white-space: nowrap; padding: 7px 13px; border-radius: 99px; font-size: 13.5px; font-weight: 600;
  color: var(--text-2); border: 1px solid var(--line); background: var(--surface); }
.report-toc a:hover { text-decoration: none; color: var(--brand); border-color: var(--brand); }
.report-toc a.on { background: var(--brand); color: #fff; border-color: var(--brand); }
[id="score"], [id="plan"], [id="detail"], [id="comprendre"], [id="approfondi"], [id="avis"] { scroll-margin-top: 130px; }

/* ---------- Comprendre le rapport ---------- */
.legend-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 30px; }
.legend-panel > div { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.legend-panel h3 { margin: 0 0 8px; font-size: 15px; }
.legend-panel p, .legend-panel li { margin: 0; color: var(--text-2); font-size: 13.5px; line-height: 1.55; }
.legend-panel ul { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 6px; }
.legend-panel .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }

/* ---------- Lien « ? » vers le glossaire dans les cartes ---------- */
a.gloss { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 5px;
  border-radius: 50%; font-size: 10.5px; font-weight: 700; color: var(--text-3); border: 1px solid var(--line); vertical-align: 1px; }
a.gloss:hover { text-decoration: none; color: var(--brand); border-color: var(--brand); }

/* ---------- Glossaire (page) ---------- */
.gloss-recherche { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  color: var(--text); font: inherit; font-size: 15px; margin: 6px 0 18px; }
dl.glossaire { display: grid; gap: 10px; margin: 0; }
dl.glossaire > div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; scroll-margin-top: 90px; }
dl.glossaire > div:target { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
dl.glossaire dt { font-weight: 700; margin-bottom: 4px; }
dl.glossaire dd { margin: 0; color: var(--text-2); font-size: 14.5px; line-height: 1.6; }

/* ---------- Ajustements responsive ---------- */
@media (max-width: 900px) {
  .avis-grid { grid-template-columns: 1fr; }
  .avis-resume { position: static; }
  .avis-section.compact .avis-liste { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .avis-section { padding: 44px 0; }
  .avis-liste { grid-template-columns: 1fr; }
  .avis-2col { grid-template-columns: 1fr; }
  .avis-modal form { padding: 18px 16px; }
  .avis-flottant span { display: none; }
  .avis-flottant { padding: 14px; }
  .avis-head .btn { width: 100%; justify-content: center; }
}
@media print { .avis-flottant, .avis-modal, .report-toc, .avis-section { display: none !important; } }