/* predice.fr — une colonne de bulletin (max 780px) ; les couleurs d'indice sont les échelles officielles, le reste reste neutre. */
:root{
  --paper:#F2F5F4; --card:#FFFFFF; --ink:#13232A; --muted:#566A70; --line:#D5DEDC; --accent:#0E5D6D; --accent-soft:#E0EEF0; --on-accent:#FFFFFF;
  --display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body:"Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --i0:#C9D1D3; --i1:#50F0E6; --i2:#50CCAA; --i3:#F0E641; --i4:#FF5050; --i5:#960032; --i6:#872181;
  --v1:#2E9E4F; --v2:#FFE11A; --v3:#FF8C1A; --v4:#E1261C;
  --on-light:#13232A; --on-dark:#FFFFFF;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root{
  --paper:#0E171A; --card:#152227; --ink:#E4EDEB; --muted:#93A6AA; --line:#26373D; --accent:#62C3D3; --accent-soft:#17343A; --on-accent:#0E171A; --i0:#3A4A4F; color-scheme:dark }}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--ink); font:16px/1.55 var(--body); padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)); padding-block:0 48px}
.wrap{max-width:780px; margin:0 auto; display:flex; flex-direction:column; gap:28px}
main{display:flex; flex-direction:column; gap:28px}
a{color:var(--accent)}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
h1,h2,h3{font-family:var(--display); text-wrap:balance; margin:0; line-height:1.15}
h1{font-size:clamp(1.7rem, 5vw, 2.35rem); font-weight:800; letter-spacing:-.01em}
h2{font-size:1.3rem; font-weight:800}
h3{font-size:1rem; font-weight:600}
p{margin:0}
img, svg{max-width:100%}
.muted{color:var(--muted)}
.small{font-size:.86rem}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.evitement{position:absolute; left:-999px; top:8px; background:var(--card); padding:8px 12px; z-index:9}
.evitement:focus{left:16px}

header.top{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 16px; padding-top:16px}
.logo{font-family:var(--display); font-weight:800; font-size:1.55rem; color:var(--ink); text-decoration:none; letter-spacing:-.02em; line-height:1.05}
.logo span{color:var(--accent)}
.logo small{display:block; font-family:var(--body); font-weight:400; font-size:.72rem; color:var(--muted); letter-spacing:.05em; text-transform:uppercase}
.search{display:flex; flex:1 1 240px; max-width:340px}
.search input{flex:1; min-width:0; font:inherit; padding:9px 12px; border:1px solid var(--line); border-radius:8px 0 0 8px; background:var(--card); color:var(--ink)}
.search button{font:inherit; font-weight:700; border:0; background:var(--accent); color:var(--on-accent); padding:0 14px; border-radius:0 8px 8px 0; cursor:pointer}
.menu{display:flex; gap:18px; flex-basis:100%; font-weight:700; font-size:.95rem; border-top:1px solid var(--line); padding-top:10px}
.menu a{color:var(--ink); text-decoration:none}
.menu a:hover{color:var(--accent)}
nav.crumbs{font-size:.85rem; color:var(--muted)}
nav.crumbs a{color:var(--muted)}

.intro{display:flex; flex-direction:column; gap:10px}
.stamp{display:flex; flex-wrap:wrap; gap:4px 14px; font-size:.88rem; color:var(--muted)}
.stamp b{color:var(--ink)}
.chapo{font-size:1.05rem}

.summary{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px}
@media (max-width:660px){ .summary{grid-template-columns:repeat(2, minmax(0,1fr))} }
.tile{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:6px; min-width:0; color:var(--ink); text-decoration:none}
a.tile:hover{border-color:var(--accent)}
.tile .k{font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:700}
.tile .v{font-family:var(--display); font-weight:800; font-size:1.2rem; line-height:1.1}
.tile .d{font-size:.84rem; color:var(--muted)}
.lvl{display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:.82rem; padding:2px 9px 2px 3px; border-radius:99px; background:var(--accent-soft); color:var(--ink); max-width:100%}
.lvl i{display:inline-grid; place-items:center; flex:none; width:20px; height:20px; border-radius:50%; font-style:normal; font-size:.75rem; font-variant-numeric:tabular-nums}
.n0{background:var(--i0); color:var(--on-light)} .n1{background:var(--i1); color:var(--on-light)} .n2{background:var(--i2); color:var(--on-light)}
.n3{background:var(--i3); color:var(--on-light)} .n4{background:var(--i4); color:var(--on-light)} .n5{background:var(--i5); color:var(--on-dark)} .n6{background:var(--i6); color:var(--on-dark)}
.u1{background:#3EA72D; color:var(--on-dark)} .u2{background:#FFF300; color:var(--on-light)} .u3{background:#F18B00; color:var(--on-light)} .u4{background:#E53210; color:var(--on-dark)} .u5{background:#B567A4; color:var(--on-dark)}
.uvrow{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px}
.uv{border-radius:12px; padding:10px; text-align:center}
.uv small{display:block; font-size:.75rem; font-weight:700}
.uv b{display:block; font-family:var(--display); font-size:1.6rem; line-height:1.1}
.vc1{background:var(--v1); color:var(--on-dark)} .vc2{background:var(--v2); color:var(--on-light)} .vc3{background:var(--v3); color:var(--on-light)} .vc4{background:var(--v4); color:var(--on-dark)}

section.block{display:flex; flex-direction:column; gap:14px}
.block-head{display:flex; flex-direction:column; gap:4px; border-top:2px solid var(--ink); padding-top:12px}
.src{font-size:.8rem; color:var(--muted)}
.note{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:.92rem}
.alert{background:var(--card); border:1px solid var(--line); border-left:6px solid var(--i4); border-radius:10px; padding:10px 12px; font-size:.92rem}

.scroll{overflow-x:auto}
table.grid{border-collapse:separate; border-spacing:4px; width:100%; min-width:420px}
table.grid th{font-size:.8rem; font-weight:700; color:var(--muted); text-align:left; padding:2px 4px}
table.grid th.day{text-align:center}
table.grid td.name{font-weight:700; padding-right:8px; white-space:nowrap}
table.grid td.name small{display:block; font-weight:400; color:var(--muted); font-size:.75rem; font-style:italic}
.cell{border-radius:8px; text-align:center; padding:8px 4px; font-size:.82rem; font-weight:700; line-height:1.15}
.cell b{display:block; font-family:var(--display); font-size:1.05rem}
.legend{display:flex; flex-wrap:wrap; gap:6px 12px; font-size:.78rem}
.legend span{display:inline-flex; align-items:center; gap:5px; color:var(--muted)}
.legend i{width:12px; height:12px; border-radius:3px; display:inline-block}

.air{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:14px}
@media (max-width:660px){ .air{grid-template-columns:1fr} }
.dial{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:10px}
.dial .row{display:flex; gap:10px}
.dial .day{flex:1; border-radius:10px; padding:10px; text-align:center}
.dial .day small{display:block; font-size:.75rem; font-weight:700}
.dial .day b{display:block; font-family:var(--display); font-size:1.15rem}
.bars{display:flex; flex-direction:column; gap:8px; justify-content:center}
.bar{display:grid; grid-template-columns:96px minmax(0,1fr) 100px; gap:10px; align-items:center; font-size:.86rem}
.bar .track{height:10px; border-radius:99px; background:var(--i0); overflow:hidden}
.bar .fill{height:100%; border-radius:99px}
.bar .lab{color:var(--muted); text-align:right}

.epis{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px}
@media (max-width:660px){ .epis{grid-template-columns:1fr} }
.epi{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:8px; min-width:0; color:var(--ink); text-decoration:none}
a.epi:hover{border-color:var(--accent)}
.epi .top{display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.chip{font-size:.75rem; font-weight:700; padding:2px 8px; border-radius:99px; white-space:nowrap; display:inline-block}
.chip.bas{background:var(--accent-soft); color:var(--ink)}
.chip.modere{background:var(--i3); color:var(--on-light)}
.chip.eleve{background:var(--i4); color:var(--on-light)}
.chip.tres-eleve{background:var(--i5); color:var(--on-dark)}
.epi .fig{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:.84rem; color:var(--muted)}
.epi .fig b{display:block; font-family:var(--display); font-size:1.15rem; color:var(--ink)}
.spark{width:100%; height:44px; display:block}
.sp-aire{fill:var(--accent-soft)} .sp-ligne{fill:none; stroke:var(--accent); stroke-width:2} .sp-point{fill:var(--accent)}

.hist{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:10px}
.strip{display:grid; grid-template-columns:repeat(auto-fill, minmax(12px, 1fr)); gap:3px}
.strip i{aspect-ratio:1; border-radius:2px; display:block}
.strip-head{display:flex; justify-content:space-between; gap:8px; font-size:.8rem; color:var(--muted)}

.facts{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px}
@media (max-width:660px){ .facts{grid-template-columns:1fr} }
.facts div{display:flex; flex-direction:column; gap:2px; font-size:.86rem; color:var(--muted)}
.facts b{font-size:1rem; color:var(--ink)}
.near{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; list-style:none; margin:0; padding:0}
@media (max-width:660px){ .near{grid-template-columns:repeat(2, minmax(0,1fr))} }
.near a{display:flex; justify-content:space-between; align-items:center; gap:6px; padding:9px 10px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); text-decoration:none; font-size:.9rem; min-width:0}
.near a span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.near a:hover{border-color:var(--accent)}
.near i{width:14px; height:14px; border-radius:3px; flex:none}
.liste-communes{columns:3 170px; column-gap:16px; font-size:.9rem; margin:0; padding:0; list-style:none}
.liste-communes li{break-inside:avoid; padding:2px 0}
details{border-bottom:1px solid var(--line); padding:10px 0}
details summary{font-weight:700; cursor:pointer}
details p{margin-top:6px; color:var(--muted)}

table.data{width:100%; border-collapse:collapse; font-size:.9rem}
table.data th{text-align:left; font-size:.78rem; color:var(--muted); font-weight:700; border-bottom:1px solid var(--line); padding:6px 8px}
table.data td{border-bottom:1px solid var(--line); padding:7px 8px; vertical-align:middle}
table.data td.r, table.data th.r{text-align:right}

.carte-france{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:8px}
.carte-france svg{display:block; width:100%; height:auto}
.carte-france text{font-family:var(--body); font-size:9px; fill:var(--ink)}
.carte-france a:hover circle{stroke:var(--ink); stroke-width:2}

.texte .prose{display:flex; flex-direction:column; gap:12px; max-width:68ch}
.prose h2{margin-top:10px}
.prose ul{margin:0; padding-left:20px}
.resultats{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.resultats a{display:block; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); text-decoration:none}
.resultats a:hover{border-color:var(--accent)}

.form{display:flex; flex-direction:column; gap:14px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px}
.form label{display:block; font-weight:700; margin-bottom:4px}
.form input, .form select, .form textarea{width:100%; font:inherit; padding:9px 10px; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink)}
.btn{display:inline-block; font:inherit; font-weight:700; border:0; background:var(--accent); color:var(--on-accent); padding:10px 16px; border-radius:8px; cursor:pointer; text-decoration:none}
.msg-err{color:var(--i4); font-weight:700}
.piege{position:absolute; left:-5000px}

footer.pied{border-top:2px solid var(--ink); padding-top:14px; display:flex; flex-direction:column; gap:8px; font-size:.84rem; color:var(--muted)}
footer.pied .liens{display:flex; flex-wrap:wrap; gap:6px 16px}
.warn{background:var(--accent-soft); color:var(--ink); border-radius:10px; padding:10px 12px; font-size:.9rem}
@media (prefers-reduced-motion: no-preference){ .tile, .epi, .near a{transition:border-color .15s} }