/* ===== Rapport SEO partenaire — Unibéo Piscines ===== */
:root{
  --navy:#0b2a4a; --navy-2:#103a63;
  --aqua:#0e7c9b; --aqua-light:#e6f3f6;
  --ink:#1a2733; --muted:#5b6b7a;
  --sand:#f7f5f0; --white:#ffffff;
  --green:#2e7d5b; --green-light:#e9f4ee;
  --line:#e4e9ee; --shadow:0 1px 2px rgba(16,40,70,.06),0 8px 24px rgba(16,40,70,.07);
  --radius:14px; --maxw:920px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--sand); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.65; -webkit-font-smoothing:antialiased; font-size:17px;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
h1,h2,h3,h4{line-height:1.2; letter-spacing:-.01em}
a{color:var(--aqua); text-decoration:none}
code{background:#eef2f5; padding:.08em .35em; border-radius:5px; font-size:.86em; color:var(--navy-2)}

/* ===== Hero ===== */
.hero{
  background:linear-gradient(155deg,var(--navy) 0%,var(--navy-2) 55%,var(--aqua) 160%);
  color:#fff; padding:64px 0 56px; position:relative; overflow:hidden;
}
.hero::after{content:""; position:absolute; right:-80px; top:-80px; width:320px; height:320px;
  background:radial-gradient(circle,rgba(255,255,255,.10),transparent 70%); border-radius:50%}
.eyebrow{text-transform:uppercase; letter-spacing:.16em; font-size:.74rem; font-weight:700;
  color:#9fd3e0; margin:0 0 10px}
.hero h1{font-size:3rem; margin:0 0 16px; font-weight:800}
.hero .dot{color:#5fc6dc}
.hero .lede{font-size:1.28rem; max-width:640px; margin:0 0 20px; color:#e9f1f6}
.hero .meta{font-size:.95rem; color:#bcd3e0; margin:0}
.hero .meta strong{color:#fff}

/* ===== Nav ===== */
.topnav{position:sticky; top:0; z-index:20; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--line)}
.nav-inner{display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding-top:10px; padding-bottom:10px}
.topnav a{color:var(--muted); font-size:.9rem; font-weight:600; padding:7px 11px; border-radius:8px}
.topnav a:hover,.topnav a.active{color:var(--navy); background:var(--aqua-light)}
.print-btn{margin-left:auto; border:1px solid var(--line); background:#fff; color:var(--navy);
  font:inherit; font-size:.86rem; font-weight:600; padding:7px 13px; border-radius:8px; cursor:pointer}
.print-btn:hover{border-color:var(--aqua); color:var(--aqua)}

/* ===== Sections ===== */
.section{padding:54px 0 8px; scroll-margin-top:64px}
.section h2{font-size:1.85rem; margin:0 0 16px; color:var(--navy)}
.section h2::before{content:""; display:block; width:46px; height:4px; background:var(--aqua);
  border-radius:3px; margin-bottom:16px}
.intro{color:var(--muted); max-width:660px; margin:0 0 26px; font-size:1.05rem}

/* ===== Callout / stats ===== */
.callout{background:var(--white); border:1px solid var(--line); border-left:5px solid var(--aqua);
  border-radius:var(--radius); padding:22px 26px; box-shadow:var(--shadow); margin-bottom:26px}
.callout p{margin:0 0 12px} .callout p:last-child{margin:0}
.callout.watch{border-left-color:#c98a00}
.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.stat{background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 16px; text-align:center; box-shadow:var(--shadow)}
.stat .num{display:block; font-size:1.9rem; font-weight:800; color:var(--navy); line-height:1.1}
.stat .lbl{display:block; font-size:.82rem; color:var(--muted); margin-top:6px}

/* ===== Cards (ce qui marche) ===== */
.cards{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 24px; box-shadow:var(--shadow)}
.card h3{margin:0 0 8px; font-size:1.12rem; color:var(--navy)}
.card p{margin:0; color:var(--ink)}
.card.good{border-top:4px solid var(--green)}
.card.good h3{color:var(--green)}

/* ===== Leviers ===== */
.levers{list-style:none; counter-reset:none; padding:0; margin:0; display:grid; gap:16px}
.lever{background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 26px; box-shadow:var(--shadow)}
.lever-head{display:flex; align-items:center; gap:14px; margin-bottom:10px}
.badge{flex:0 0 auto; width:36px; height:36px; border-radius:50%; background:var(--navy);
  color:#fff; font-weight:800; display:grid; place-items:center; font-size:1.05rem}
.lever-head h3{margin:0; font-size:1.2rem; color:var(--navy)}
.why{margin:0 0 12px}
.lever details{border-top:1px dashed var(--line); margin-top:6px; padding-top:6px}
.oral{margin:12px 0 0; color:var(--aqua); font-weight:600; font-size:.95rem}

details{margin:0}
summary{cursor:pointer; font-weight:600; color:var(--navy-2); padding:8px 0; list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"＋"; display:inline-block; width:1.2em; color:var(--aqua); font-weight:700}
details[open] summary::before{content:"−"}
details > *:not(summary){margin-top:4px}
details p,details ul{color:var(--muted)}

/* ===== RACI / roadmap ===== */
.raci{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:26px}
.raci-col{background:var(--aqua-light); border-radius:var(--radius); padding:20px 22px}
.raci-col h3{margin:0 0 8px; color:var(--aqua); font-size:1.05rem}
.raci-col p{margin:0; font-size:.95rem; color:var(--ink)}
.roadmap{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.phase{background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px; box-shadow:var(--shadow); position:relative}
.phase .ph{font-size:.74rem; text-transform:uppercase; letter-spacing:.12em; font-weight:700; color:var(--aqua)}
.phase h4{margin:6px 0 8px; font-size:1.1rem; color:var(--navy)}
.phase p{margin:0; font-size:.94rem; color:var(--muted)}

/* ===== Annexe ===== */
.annex{background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:8px 24px; box-shadow:var(--shadow); margin-bottom:14px}
.annex > summary{font-size:1.05rem; padding:14px 0}
table{width:100%; border-collapse:collapse; margin:6px 0 14px; font-size:.94rem; border:1px solid #c8d4dd}
th,td{text-align:left; padding:11px 14px; border-bottom:1px solid #d6e0e7; vertical-align:top}
thead th{background:#e3eaf1; color:var(--navy); font-size:.8rem; text-transform:uppercase;
  letter-spacing:.04em; border-bottom:2px solid var(--navy)}
tbody tr:nth-child(even){background:#eef4f8}
tbody tr:hover{background:#e0ebf3}
td{font-variant-numeric:tabular-nums}

/* ===== Fil d'étapes (où on en est) + L'essentiel ===== */
.flow{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 18px}
.flow .step{font-size:.74rem; font-weight:700; color:var(--muted); background:#fff;
  border:1px solid var(--line); padding:5px 12px; border-radius:20px; white-space:nowrap}
.flow .step.active{background:var(--navy); color:#fff; border-color:var(--navy)}
.flow .step.annex{font-style:italic}
.essentiel{display:flex; gap:14px; align-items:flex-start; background:var(--aqua-light);
  border:1px solid #bfe0e8; border-radius:12px; padding:15px 18px; margin:0 0 26px}
.essentiel .ess-l{flex:0 0 auto; font-size:.7rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.08em; color:var(--aqua); background:#fff; border:1px solid #bfe0e8; border-radius:6px; padding:4px 9px; margin-top:2px}
.essentiel p{margin:0; color:var(--navy); font-weight:600; font-size:1.06rem; line-height:1.5}
@media(max-width:760px){ .essentiel{flex-direction:column; gap:8px} }
.src{font-size:.84rem; color:var(--muted); margin:4px 0 10px}
.tech-list{margin:6px 0 10px; padding-left:20px}
.tech-list li{margin-bottom:7px}

/* ===== Footer ===== */
.footer{margin-top:48px; background:var(--navy); color:#cfe0ea; padding:30px 0}
.footer p{margin:0 0 6px}
.footer strong{color:#fff}
.footer .fine{font-size:.82rem; color:#8fb0c4}

/* ===== Verdict / alert callout ===== */
.callout.alert{border-left-color:#c0392b; background:#fdf3f2}
.callout.alert strong{color:#a5281b}
.verdict{display:grid; gap:10px; margin:0 0 26px}
.verdict li{list-style:none; background:var(--white); border:1px solid var(--line);
  border-left:4px solid #c0392b; border-radius:10px; padding:13px 18px; box-shadow:var(--shadow)}
.verdict li.hold{border-left-color:var(--green)}
.verdict b{color:var(--navy)}

/* ===== Bar chart (chute KW) ===== */
.barchart{margin:12px 0 8px; display:grid; gap:9px}
.barrow{display:grid; grid-template-columns:104px 1fr 64px; align-items:center; gap:12px}
.barrow .m{font-size:.86rem; color:var(--muted); font-weight:600}
.barrow .track{background:#eef2f5; border-radius:6px; height:26px; overflow:hidden}
.barrow .fill{height:100%; border-radius:6px; background:linear-gradient(90deg,var(--navy),var(--aqua));
  min-width:3px; transition:width .4s}
.barrow .v{font-size:.92rem; font-weight:700; color:var(--navy); text-align:right; font-variant-numeric:tabular-nums}
.barrow.danger .fill{background:linear-gradient(90deg,#c0392b,#e07a52)}
.barrow.danger .v{color:#c0392b}

/* ===== Tableaux larges + comparatif ===== */
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:6px 0 10px}
.cmp th{text-align:center} .cmp td:not(:first-child){text-align:center}
.cmp td:first-child,.cmp th:first-child{text-align:left}
.cmp .col-model{background:var(--green-light)}
.cmp .col-target{background:var(--aqua-light)}
.cmp .win{color:var(--green); font-weight:700}
.cmp .bad{color:#c0392b; font-weight:700}
.pos{display:inline-block; min-width:32px; padding:2px 7px; border-radius:6px; font-weight:700; font-size:.82rem}
.pos.p1{background:#e9f4ee; color:var(--green)}
.pos.p2{background:#fff3e0; color:#b26a00}
.pos.p3{background:#fdeceb; color:#c0392b}

/* ===== Listes findings ===== */
.find{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.find li{background:var(--white); border:1px solid var(--line); border-left:4px solid var(--aqua);
  border-radius:10px; padding:14px 18px; box-shadow:var(--shadow)}
.find li.crit{border-left-color:#c0392b}
.find li.ok{border-left-color:var(--green)}
.find b{color:var(--navy)}
.tag{display:inline-block; font-size:.69rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  padding:3px 9px; border-radius:20px; margin-right:8px; vertical-align:middle}
.tag.crit{background:#fdeceb; color:#c0392b} .tag.warn{background:#fff3e0; color:#b26a00}
.tag.ok{background:#e9f4ee; color:var(--green)}

/* ===== Multi-pages : header compact + cartes de nav ===== */
.hero.sub{padding:44px 0 36px}
.hero.sub h1{font-size:2.2rem}
a.card.link{display:block; text-decoration:none; color:inherit;
  transition:transform .15s,border-color .15s,box-shadow .15s}
a.card.link:hover{transform:translateY(-2px); border-color:var(--aqua); box-shadow:0 6px 18px rgba(16,40,70,.12)}
a.card.link .go{display:inline-block; margin-top:10px; color:var(--aqua); font-weight:700; font-size:.9rem}

/* ===== Fiches chantier / grille ===== */
.fiche{background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 26px; box-shadow:var(--shadow); margin-bottom:18px}
.fiche-head{display:flex; align-items:center; gap:14px; margin-bottom:14px}
.fiche-head h3{margin:0; font-size:1.18rem; color:var(--navy)}
.grille{display:grid; gap:0}
.grille .gr{display:grid; grid-template-columns:160px 1fr; gap:14px; padding:9px 0; border-top:1px solid var(--line)}
.grille .gr:first-child{border-top:none}
.grille .k{font-weight:700; color:var(--navy-2); font-size:.9rem}
.grille .v{color:var(--ink)} .grille .v.muted{color:var(--muted)}

/* ===== Blocs décision ===== */
.deco{background:var(--white); border:1px solid var(--line); border-left:4px solid var(--aqua);
  border-radius:10px; padding:16px 20px; box-shadow:var(--shadow); margin-bottom:14px}
.deco .id{display:inline-block; background:var(--navy); color:#fff; font-weight:800;
  border-radius:6px; padding:2px 10px; margin-right:10px; font-size:.85rem}
.deco h3{display:inline; font-size:1.06rem; color:var(--navy)}
.deco .opt{margin:10px 0 0; color:var(--muted); font-size:.94rem}
.deco .reco{margin:9px 0 0; padding:9px 13px; background:var(--green-light); border-radius:8px;
  color:var(--ink); font-size:.94rem}
.deco .reco b{color:var(--green)}

/* ===== Responsive ===== */
@media(max-width:760px){
  .hero h1{font-size:2.2rem} .hero .lede{font-size:1.12rem}
  .stat-row{grid-template-columns:1fr 1fr}
  .cards,.raci,.roadmap{grid-template-columns:1fr}
  .nav-inner{gap:2px} .topnav a{padding:6px 8px; font-size:.84rem}
  .print-btn{display:none}
  .barrow{grid-template-columns:64px 1fr 48px; gap:8px}
  .barrow .m{font-size:.76rem}
}

/* ===== Print / PDF ===== */
@media print{
  body{background:#fff; font-size:12pt}
  .topnav,.print-btn,.hero::after{display:none}
  .hero{background:var(--navy)!important; -webkit-print-color-adjust:exact; print-color-adjust:exact; padding:28px 0}
  .section{padding:18px 0; page-break-inside:avoid}
  .callout,.card,.lever,.phase,.annex,.stat{box-shadow:none; break-inside:avoid}
  details{open:true} details > *{display:block!important}
  summary::before{display:none}
  .oral{color:var(--muted)}
}

/* ===== MINI-SITE : shell sidebar + contenu ===== */
:root{ --side-w:272px; --z-overlay:40; --z-topbar:45; --z-sidebar:50; }
.app{display:flex; align-items:stretch; min-height:100vh}
.sidebar{flex:0 0 var(--side-w); width:var(--side-w); color:#cfe0ea; z-index:var(--z-sidebar);
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%);
  position:sticky; top:0; height:100vh; overflow-y:auto; display:flex; flex-direction:column}
.sidebar .brand{display:block; padding:22px 22px 18px; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.10)}
.sidebar .brand .bn{display:block; color:#fff; font-weight:800; font-size:1.18rem; letter-spacing:-.01em}
.sidebar .brand .bs{display:block; color:#9fd3e0; font-size:.78rem; margin-top:4px; letter-spacing:.02em}
.side-nav{padding:16px 12px; flex:1 0 auto}
.side-nav .grp{margin:0 0 18px}
.side-nav .grp-l{font-size:.7rem; text-transform:uppercase; letter-spacing:.13em; color:#7ba0b8; font-weight:700; margin:0 0 6px; padding:0 11px}
.side-nav a{display:block; padding:9px 12px; border-radius:9px; color:#bcd3e0; text-decoration:none;
  font-size:.94rem; font-weight:600; line-height:1.35; transition:background .12s,color .12s}
.side-nav a:hover{background:rgba(255,255,255,.07); color:#fff}
.side-nav a.active{background:rgba(255,255,255,.14); color:#fff}
.sidebar .side-foot{padding:16px 20px 20px; border-top:1px solid rgba(255,255,255,.10); font-size:.76rem; color:#9fb6c8}
.sidebar .side-foot .pbtn{margin-top:10px; width:100%; border:1px solid rgba(255,255,255,.22); background:transparent;
  color:#cfe0ea; font:inherit; font-size:.82rem; font-weight:600; padding:9px; border-radius:9px; cursor:pointer; transition:.15s}
.sidebar .side-foot .pbtn:hover{border-color:var(--aqua); color:#fff; background:rgba(255,255,255,.05)}
.content{flex:1 1 auto; min-width:0; background:var(--sand)}
.content-inner{max-width:880px; margin:0 auto; padding:40px 44px 64px}
.content-inner > .section:first-of-type{padding-top:18px}
.page-head{margin:0 0 6px}
.breadcrumb{display:flex; align-items:center; gap:9px; font-size:.82rem; color:var(--muted); font-weight:600; margin:0 0 12px}
.breadcrumb .sep{opacity:.45}
.breadcrumb .count{margin-left:auto; background:#fff; border:1px solid var(--line); border-radius:20px;
  padding:3px 12px; color:var(--navy); font-variant-numeric:tabular-nums}
.page-head h1{font-size:2.15rem; color:var(--navy); margin:0 0 10px; letter-spacing:-.02em; text-wrap:balance}
.page-head .lede{color:var(--muted); font-size:1.08rem; max-width:70ch; margin:0}
.page-head .rule{height:4px; width:48px; background:var(--aqua); border-radius:3px; margin:16px 0 4px}
.pager{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:50px; padding-top:26px; border-top:1px solid var(--line)}
.pager a{display:block; text-decoration:none; background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:16px 18px; transition:border-color .15s,transform .15s,box-shadow .15s}
.pager a:hover{border-color:var(--aqua); transform:translateY(-2px); box-shadow:var(--shadow)}
.pager .dir{display:block; font-size:.78rem; color:var(--muted); font-weight:700; margin-bottom:5px}
.pager .ti{display:block; color:var(--navy); font-weight:700}
.pager a.next{text-align:right}
.pager .slot.disabled{visibility:hidden}
.doc-foot{margin-top:26px; font-size:.8rem; color:var(--muted); text-align:center}
.tree{background:linear-gradient(180deg,var(--navy),var(--navy-2)); color:#cfe0ea; border-radius:12px;
  padding:18px 22px; margin:8px 0 14px; overflow-x:auto; box-shadow:var(--shadow);
  font:13px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:pre}
.tree b{color:#fff} .tree .tp{color:#9fd3e0} .tree .tn{color:#7ba0b8}

/* ===== Contenu markdown rendu (dans les <details>) ===== */
.annex h1{font-size:1.4rem; color:var(--navy); margin:6px 0 8px}
.annex h2{font-size:1.12rem; color:var(--navy); margin:16px 0 6px}
.annex h3{font-size:1rem; color:var(--navy-2); margin:11px 0 4px}
.annex table{font-size:.9rem}
.annex pre{background:#0b2a4a; color:#cfe0ea; border-radius:8px; padding:12px 14px;
  overflow-x:auto; font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:pre; margin:8px 0}
.annex pre code{background:none; color:inherit; padding:0; font-size:inherit}
.annex blockquote{border-left:3px solid var(--line); margin:8px 0; padding:2px 0 2px 14px; color:var(--muted)}

/* ===== Page de contenu markdown plein écran (.mdpage) ===== */
.mdpage h1{font-size:1.5rem; color:var(--navy); margin:4px 0 10px}
.mdpage h2{font-size:1.3rem; color:var(--navy); margin:24px 0 8px; padding-top:12px; border-top:1px solid var(--line)}
.mdpage h2:first-of-type{border-top:none; padding-top:0}
.mdpage h3{font-size:1.06rem; color:var(--navy-2); margin:14px 0 6px}
.mdpage ul,.mdpage ol{margin:8px 0; padding-left:22px} .mdpage li{margin-bottom:5px}
.mdpage blockquote{background:var(--aqua-light); border-radius:10px; padding:10px 16px; margin:10px 0; color:var(--ink)}
.mdpage pre{background:#0b2a4a; color:#cfe0ea; border-radius:8px; padding:12px 14px; overflow-x:auto;
  font:12px/1.55 ui-monospace,Menlo,Consolas,monospace; white-space:pre}
.mdpage code{background:#eef2f5}
.crawl{font-size:.82rem} .crawl th,.crawl td{padding:7px 9px}
.crawlpage .stat .num{font-size:1.7rem}
.topbar{display:none; position:sticky; top:0; z-index:var(--z-topbar); background:var(--navy); color:#fff; align-items:center; padding:12px 16px}
.topbar .tb-brand{color:#fff; font-weight:800; text-decoration:none; font-size:1rem}
.menu-toggle{margin-left:auto; background:transparent; border:1px solid rgba(255,255,255,.28); color:#fff;
  border-radius:9px; padding:8px 13px; font:inherit; font-size:.86rem; font-weight:700; cursor:pointer}
.overlay{display:none; position:fixed; inset:0; background:rgba(8,20,35,.55); z-index:var(--z-overlay); backdrop-filter:blur(2px)}
.overlay.show{display:block}
@media(max-width:880px){
  .topbar{display:flex}
  .sidebar{position:fixed; top:0; left:0; bottom:0; height:100%; transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.22,1,.36,1); box-shadow:0 0 40px rgba(0,0,0,.32)}
  .sidebar.open{transform:translateX(0)}
  .content-inner{padding:24px 18px 48px}
  .page-head h1{font-size:1.7rem}
  .pager{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){ .sidebar{transition:none} .pager a:hover{transform:none} }
@media print{
  .sidebar,.topbar,.overlay,.pager,.menu-toggle{display:none!important}
  .app{display:block} .content,.content-inner{background:#fff; max-width:none; padding:0}
}