/* 1. Socle */
:root{--nuit:#352e2e;--nuit2:#2a2424;--nuit3:#423a3a;--clair:#e3e3e3;--azur:#2ea6e1;--azur2:#7cc8ee;--filet:#5a4f4f}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--nuit);color:var(--clair);font:15px/1.7 Verdana,Geneva,"DejaVu Sans",Tahoma,sans-serif}
a{color:var(--azur2)}
a:hover{color:#fff}
.jj-wrap{max-width:1080px;margin:0 auto;padding:0 18px}
/* 2. Bandeau */
.jj-top{background:var(--nuit2);border-bottom:1px solid var(--filet)}
.jj-top .jj-wrap{padding-top:26px;padding-bottom:20px}
.jj-name{display:inline-block;color:#fff;text-decoration:none;font-size:40px;font-weight:700;line-height:1.1;letter-spacing:.5px}
.jj-name small{display:block;margin-top:8px;font-size:15px;font-weight:400;color:var(--azur);letter-spacing:0}
.jj-where{margin:12px 0 0;font-size:13px;color:#bdb5b5}
.jj-jump{display:none;margin-top:12px;font-size:13px}
.jj-belt{display:flex;height:8px}
.jj-belt i{flex:1}
/* 3. Grille */
.jj-grid{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:34px;padding-top:30px;padding-bottom:50px}
.jj-main h1{margin:0 0 18px;font-size:22px;line-height:1.3;color:var(--azur)}
.jj-main h2{margin:30px 0 10px;font-size:17px;color:#fff}
.jj-main h3{margin:20px 0 6px;font-size:15px;color:var(--azur2)}
.jj-main p{margin:0 0 14px}
.jj-lead{font-size:16px}
.jj-grade{display:inline-block;width:64px;height:10px;border-radius:2px;margin:0 0 14px;border:1px solid rgba(255,255,255,.25)}
.jj-crumb{margin:0 0 10px;font-size:12px;color:#bdb5b5}
.jj-crumb a{color:#bdb5b5}
/* 4. Listes de termes */
.jj-terms{margin:0 0 16px;border-top:1px solid var(--filet)}
.jj-terms div{display:grid;grid-template-columns:230px minmax(0,1fr);gap:12px;padding:7px 2px;border-bottom:1px solid var(--filet)}
.jj-terms dt{font-weight:700;color:#fff}
.jj-terms dd{margin:0}
.jj-list{margin:0 0 16px;padding-left:20px}
.jj-list li{margin-bottom:5px}
/* 5. Accueil */
.jj-panel{background:var(--nuit3);border-left:4px solid var(--azur);padding:14px 18px;margin:0 0 16px}
.jj-panel h2{margin-top:0}
.jj-panel p:last-child{margin-bottom:0}
.jj-hours{margin:0}
.jj-hours div{padding:6px 0;border-bottom:1px dotted var(--filet)}
.jj-hours div:last-child{border-bottom:0}
.jj-hours dt{font-weight:700;color:#fff;font-size:13px;text-transform:uppercase}
.jj-hours dd{margin:0}
.jj-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.jj-tile{display:block;padding:12px 14px;background:var(--nuit2);border:1px solid var(--filet);text-decoration:none;color:var(--clair)}
.jj-tile strong{display:block;color:var(--azur);font-size:14px;line-height:1.35}
.jj-tile span{font-size:13px}
.jj-tile:hover{border-color:var(--azur);color:#fff}
/* 6. Colonne laterale */
.jj-side section{background:var(--nuit2);border:1px solid var(--filet);margin-bottom:20px}
.jj-side h2{margin:0;padding:10px 14px;font-size:18px;color:#fff;background:var(--nuit3);border-bottom:2px solid var(--azur)}
.jj-side .jj-in{padding:10px 14px;font-size:13px}
.jj-side .jj-hours dt{font-size:12px}
.jj-docs{list-style:none;margin:0;padding:6px 14px 10px;font-size:13px}
.jj-docs li{padding:5px 0;border-bottom:1px dotted var(--filet)}
.jj-docs li:last-child{border-bottom:0}
.jj-docs a{text-decoration:none}
.jj-docs a[aria-current]{color:#fff;font-weight:700}
/* 7. Bas de page */
.jj-foot{background:var(--nuit2);border-top:1px solid var(--filet);font-size:13px;color:#bdb5b5;padding:20px 0}
.jj-foot p{margin:0}
/* 8. Petits ecrans */
@media(max-width:820px){
.jj-grid{grid-template-columns:minmax(0,1fr);gap:24px;padding-top:22px}
.jj-name{font-size:30px}
.jj-jump{display:block}
.jj-terms div{grid-template-columns:minmax(0,1fr);gap:0}
}
@media(max-width:480px){.jj-tiles{grid-template-columns:minmax(0,1fr)}.jj-main h1{font-size:20px}}
