/* ============================================================
   Scanner3D Guide — design system
   Simple, fond blanc, filigrane maillage filaire (écho au scan 3D).
   Boutique de transformation, pas un site technique.
   ============================================================ */

:root {
  --bg: #ffffff;
  --bg-soft: #f5f6f8;
  --panel: #ffffff;
  --panel-border: #e2e5eb;
  --text: #14171c;
  --text-dim: #4b5563;
  --text-faint: #6b7280;
  --accent: #ff7a33;        /* transformation / énergie (boutons) */
  --accent-soft: #c2410c;   /* même teinte, assombrie pour rester lisible sur blanc */
  --accent-tint: #fff2ea;   /* fond pâle pour badges */
  --accent-2: #0d9488;      /* précision / numérique */
  --success: #059669;
  --warning: #b45309;
  --danger: #dc2626;
  --info: #0369a1;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 20px 50px -20px rgba(15,23,42,0.18);
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.04), 0 6px 16px -8px rgba(15,23,42,0.10);
  --max: 1120px;

  /* SEO debug overlay palette — fixed regardless of site theme */
  --dbg-money: #10b981;
  --dbg-support: #38bdf8;
  --dbg-shared: #f59e0b;
  --dbg-risk: #ef4444;
  --dbg-conversion: #a855f7;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--bg);
  /* Filigrane : maillage triangulé, écho visuel du "wireframe" produit par un scan 3D. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><path d='M0,0L80,80M80,0L0,80M0,0L80,0M0,80L80,80M0,0L0,80M80,0L80,80' stroke='%23e9ecf1' stroke-width='1' fill='none'/></svg>");
  background-repeat: repeat;
  color: var(--text);
  line-height: 1.55;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; font-weight: 700; }
p { margin: 0 0 1em; color: var(--text-dim); }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid var(--panel-border);
}
/* backdrop-filter lives on a pseudo-element, not on .site-header itself,
   because a backdrop-filter/filter/transform on an element turns it into
   the containing block for its position:fixed descendants — which would
   break the full-viewport mobile nav (nav.main-nav) nested inside it. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(10px);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.logo { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.02em; text-decoration: none; color: var(--text); display: flex; align-items: center; gap: 8px; }
.logo-mark { flex: none; display: block; }
nav.main-nav { display: flex; gap: 24px; align-items: center; }
nav.main-nav a { text-decoration: none; color: var(--text-dim); font-size: .92rem; font-weight: 600; }
nav.main-nav a:hover { color: var(--text); }
.nav-cta { background: var(--accent); color: #1a0e07 !important; padding: 9px 16px; border-radius: 999px; font-weight: 700 !important; }
.nav-toggle { display: none; background: none; border: 1px solid var(--panel-border); color: var(--text); border-radius: 8px; padding: 8px 10px; }

@media (max-width: 780px) {
  nav.main-nav { position: fixed; inset: 68px 0 0 0; background: var(--bg); flex-direction: column; padding: 24px; gap: 18px; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: .2s ease; }
  nav.main-nav.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-toggle { display: block; }
}

/* ---------- Hero ---------- */
.hero { padding: 72px 0 56px; position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -40% -10% auto; height: 500px;
  background: radial-gradient(closest-side, rgba(255,122,51,0.10), transparent);
  pointer-events: none;
}
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-soft); background: var(--accent-tint); border: 1px solid #f6d2b8; padding: 6px 12px; border-radius: 999px; margin-bottom: 18px; }
.hero h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); max-width: 16ch; }
.hero .lede { font-size: 1.15rem; max-width: 56ch; color: var(--text-dim); }
.hero-actions { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; border-radius: 999px; font-weight: 700; text-decoration: none; font-size: .98rem; border: 1px solid transparent; cursor: pointer; }
.btn-primary { background: var(--accent); color: #1a0e07; }
.btn-primary:hover { background: #ff8b4d; }
.btn-ghost { background: var(--bg); color: var(--text); border-color: var(--panel-border); }
.btn-ghost:hover { border-color: var(--text-dim); }
.btn-block { width: 100%; justify-content: center; }

/* ---------- Media frames (photos) ---------- */
.media-frame { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); aspect-ratio: 16/9; margin: 40px 0; background: var(--bg-soft); }
.media-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-frame--4-3 { aspect-ratio: 4/3; }
.hero-media { margin-top: 40px; }

.card.card-media { padding: 0; overflow: hidden; }
/* height:auto is required here — without it, the img's HTML width/height
   attributes (kept for CLS prevention) give height a definite value, so
   aspect-ratio never gets to compute it and the image renders squashed
   into a tall sliver at its raw attribute height instead of 4:3. */
.card.card-media img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; display: block; }
.card.card-media .card-body { padding: 20px 22px 24px; }
.card.card-media h3 { margin-bottom: 8px; }

/* ---------- Avant / Après ---------- */
.transform { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; margin: 40px 0; }
.transform-col { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.transform-col.after { border-color: rgba(5,150,105,0.3); background: linear-gradient(180deg, rgba(5,150,105,0.06), var(--panel)); }
.transform-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: var(--text-faint); margin-bottom: 12px; display: block; }
.transform-col.after .transform-label { color: var(--success); }
.transform-arrow { font-size: 1.6rem; color: var(--accent); }
.transform ul { margin: 0; padding-left: 20px; color: var(--text-dim); }
.transform li { margin-bottom: 6px; }
@media (max-width: 720px) { .transform { grid-template-columns: 1fr; } .transform-arrow { justify-self: center; transform: rotate(90deg); } }

/* ---------- Sections ---------- */
section.block { padding: 56px 0; border-top: 1px solid var(--panel-border); }
section.block.no-border { border-top: none; }
.section-head { max-width: 62ch; margin-bottom: 32px; }
.section-head .kicker { color: var(--accent-2); font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.section-head h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-top: 6px; }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.card p { margin-bottom: 0; font-size: .95rem; }
.card .icon { font-size: 1.6rem; margin-bottom: 12px; display: block; }

/* Use-case entry cards on the pillar page */
.usecase { display: block; text-decoration: none; background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 26px; transition: .15s ease; box-shadow: var(--shadow-sm); }
.usecase:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 12px 28px -12px rgba(15,23,42,0.16); }
.usecase .icon { font-size: 1.8rem; }
.usecase h3 { color: var(--text); }
.usecase .go { color: var(--accent-soft); font-weight: 700; font-size: .9rem; display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; }

/* ---------- Budget bands ---------- */
.budget-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 980px) { .budget-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .budget-grid { grid-template-columns: 1fr; } }
.budget-card { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 20px; cursor: pointer; box-shadow: var(--shadow-sm); }
.budget-card.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.budget-range { font-weight: 800; font-size: 1.05rem; }
.budget-use { color: var(--text-dim); font-size: .88rem; margin-top: 6px; }
.budget-detail { display: none; margin-top: 28px; background: var(--bg-soft); border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 24px; }
.budget-detail.active { display: block; }

/* ---------- Product cards (placeholders — no affiliate data yet) ---------- */
.product-card { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); }
.product-card .placeholder-tag { display: inline-block; margin-bottom: 12px; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); background: var(--bg-soft); border: 1px dashed var(--panel-border); padding: 4px 8px; border-radius: 999px; }
.product-card h3 { margin-bottom: 4px; }
.product-price { font-size: 1.3rem; font-weight: 800; color: var(--accent-soft); margin: 8px 0; }
.product-card ul { padding-left: 18px; color: var(--text-dim); font-size: .92rem; margin-bottom: 16px; }

.notice {
  border: 1px dashed var(--panel-border); border-radius: var(--radius-sm); padding: 14px 16px;
  font-size: .88rem; color: var(--text-faint); background: var(--bg-soft); margin: 24px 0;
}

/* ---------- ROI calculator ---------- */
.roi-box { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; box-shadow: var(--shadow-sm); }
@media (max-width: 800px) { .roi-box { grid-template-columns: 1fr; } }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .85rem; font-weight: 700; color: var(--text-dim); margin-bottom: 6px; }
.field input { width: 100%; background: var(--bg-soft); border: 1px solid var(--panel-border); color: var(--text); padding: 12px 14px; border-radius: var(--radius-sm); font-size: 1rem; }
.field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.roi-result { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; background: var(--bg-soft); border-radius: var(--radius); padding: 24px; }
.roi-result .label { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); font-weight: 700; }
.roi-result .value { font-size: 2.4rem; font-weight: 800; color: var(--success); margin: 6px 0; }
.roi-result .sub { font-size: .85rem; color: var(--text-faint); }

/* ---------- Table (SEO dashboard) ---------- */
table.seo-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.seo-table th, table.seo-table td { padding: 10px 12px; border-bottom: 1px solid var(--panel-border); text-align: left; white-space: nowrap; }
table.seo-table th { color: var(--text-faint); text-transform: uppercase; font-size: .72rem; letter-spacing: .05em; }
.pill { padding: 3px 9px; border-radius: 999px; font-size: .74rem; font-weight: 800; display: inline-block; }
.pill-ok { background: rgba(5,150,105,0.12); color: var(--success); }
.pill-check { background: rgba(180,83,9,0.12); color: var(--warning); }
.pill-risk { background: rgba(220,38,38,0.12); color: var(--danger); }
.pill-pilier { background: rgba(3,105,161,0.12); color: var(--info); }
.table-wrap { overflow-x: auto; border: 1px solid var(--panel-border); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-sm); }

/* ---------- Footer ---------- */
footer.site-footer { border-top: 1px solid var(--panel-border); padding: 40px 0; margin-top: 40px; }
footer.site-footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
footer.site-footer p { color: var(--text-faint); font-size: .85rem; margin: 0; }
footer .foot-links { display: flex; gap: 18px; flex-wrap: wrap; }
footer .foot-links a { color: var(--text-dim); text-decoration: none; font-size: .85rem; }
footer .foot-links a:hover { color: var(--text); }

/* ============================================================
   SEO DEBUG OVERLAY
   Toggled by assets/js/seo-debug.js. Never affects layout,
   only outlines + labels — safe to leave in production markup.
   Deliberately dark chrome regardless of site theme, so it always
   reads as "tool", never as site content.
   ============================================================ */
body.seo-debug-on .seo-block {
  position: relative;
  outline: 2px solid var(--dbg-outline, #999);
  outline-offset: 4px;
  border-radius: 8px;
}
body.seo-debug-on .seo-block[data-role="Money"]      { --dbg-outline: var(--dbg-money); }
body.seo-debug-on .seo-block[data-role="Soutien"]    { --dbg-outline: var(--dbg-support); }
body.seo-debug-on .seo-block[data-role="Partagé"]    { --dbg-outline: var(--dbg-shared); }
body.seo-debug-on .seo-block[data-role="Risque"]     { --dbg-outline: var(--dbg-risk); }
body.seo-debug-on .seo-block[data-role="Conversion"] { --dbg-outline: var(--dbg-conversion); }
body.seo-debug-on .seo-block[data-role="Pilier"]     { --dbg-outline: var(--dbg-support); }
/* Dashed = no exact figure found in the Semrush exports for this keyword;
   the volume/KD shown is a placeholder estimate, not a confirmed number. */
body.seo-debug-on .seo-block-estime { outline-style: dashed; }

.seo-debug-tag {
  display: none;
  position: absolute; top: 10px; left: 14px; z-index: 45;
  background: var(--dbg-outline, #999); color: #05060a;
  font: 700 10.5px/1.4 -apple-system, sans-serif;
  padding: 2px 8px; border-radius: 999px;
  white-space: nowrap; cursor: help;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
body.seo-debug-on .seo-block .seo-debug-tag { display: inline-flex; align-items: center; gap: 5px; }

.seo-debug-tooltip {
  position: fixed; z-index: 999; max-width: 320px;
  background: #05060a; border: 1px solid #262b33; color: #e5e7eb;
  font-size: .78rem; line-height: 1.5; padding: 12px 14px; border-radius: 10px;
  box-shadow: var(--shadow); pointer-events: none; display: none;
}
.seo-debug-tooltip b { color: #ffb088; }
.seo-debug-tooltip .row { display: flex; justify-content: space-between; gap: 12px; }

.seo-debug-toggle {
  position: fixed; bottom: 20px; right: 20px; z-index: 998;
  background: #05060a; color: #e5e7eb; border: 1px solid #262b33;
  border-radius: 999px; padding: 11px 16px; font-weight: 800; font-size: .8rem;
  display: flex; align-items: center; gap: 8px; cursor: pointer; box-shadow: var(--shadow);
  letter-spacing: .02em;
}
.seo-debug-toggle .dot { width: 8px; height: 8px; border-radius: 50%; background: #6b7280; }
.seo-debug-toggle.active .dot { background: var(--dbg-money); box-shadow: 0 0 0 3px rgba(16,185,129,0.25); }

.seo-debug-legend {
  position: fixed; bottom: 68px; right: 20px; z-index: 998;
  background: #05060a; border: 1px solid #262b33; border-radius: 12px;
  padding: 14px 16px; font-size: .74rem; color: #cbd2dc; display: none;
  box-shadow: var(--shadow); min-width: 200px;
}
.seo-debug-legend.active { display: block; }
.seo-debug-legend .leg-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.seo-debug-legend .sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.seo-debug-legend .leg-title { font-weight: 800; color: #f4f4f5; margin-bottom: 8px; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; }
.seo-debug-legend .leg-help { color: #9aa1ac; font-size: .72rem; line-height: 1.5; margin-bottom: 12px; }
.seo-debug-legend { max-width: 260px; }

/* On mobile the floating legend covers too much of the page (it can sit
   right on top of hero CTAs since it's fixed to the viewport, not the
   content). Keep only the compact toggle chip; the full legend/table
   stays reachable from /seo-debug.html. */
@media (max-width: 640px) {
  .seo-debug-legend { display: none !important; }
  .seo-debug-toggle { padding: 9px 13px; font-size: .74rem; }
}