:root{
  --primary:#1565C0; --accent:#42a5f5; --gold:#FFD700;
  --bg:#282C34; --card:#2c313a; --header:#21252b;
  --text:#f5f5f5; --muted:#a9b8c0; --soft:#cfd8dc;
  --line:rgba(66,165,245,.15); --radius:.3rem; --shadow:0 2px 8px rgba(0,0,0,.15);
  --gap:100px;--surf:rgba(33,37,43,.7);--surf2:rgba(33,37,43,.5);--surf3:rgba(33,37,43,.95);--panel:rgba(44,49,58,.7);--post:rgba(44,49,58,.5);--post-h:rgba(44,49,58,.8);--strong:#fff; --nav-h:56px; --tabs-h:46px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-padding-top:calc(var(--nav-h) + var(--tabs-h) + 10px)}
body{font-family:system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column;line-height:1.6;padding-top:calc(var(--nav-h) + var(--tabs-h))}
a{color:var(--accent);text-decoration:none;transition:color .2s}
a:hover{color:#bbdefb}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:#000;padding:8px 14px;z-index:2000}
.skip:focus{left:8px;top:8px}

/* Barres du haut */
.navbar{position:fixed;inset:0 0 auto 0;z-index:1000;background:var(--header);padding:.75rem var(--gap);display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid var(--line);transition:transform .35s,opacity .35s}
.navbar.hidden{transform:translateY(-100%);opacity:0}
.brand{font-weight:500;font-size:1.1rem;color:var(--strong);display:flex;align-items:center;gap:10px}
.brand .ic{color:var(--accent);width:1.5rem;height:1.5rem}
.date-time{display:flex;gap:10px;font-size:.95rem;color:var(--muted)}
.date-time span{background:rgba(66,165,245,.1);padding:4px 10px;border-radius:5px}
.tabs-nav{position:fixed;left:0;right:0;top:var(--nav-h);z-index:900;background:var(--surf3);border-bottom:1px solid var(--line);backdrop-filter:blur(6px);transition:top .35s;overflow-x:auto;scrollbar-width:thin}
.navbar.hidden + .tabs-nav{top:0}
.tabs-inner{max-width:1600px;margin:0 auto;padding:10px var(--gap);display:flex;gap:12px;width:max-content;min-width:100%}
.tab-item{display:flex;align-items:center;gap:7px;padding:6px 12px;font-size:.9rem;font-weight:500;color:var(--soft);background:rgba(66,165,245,.08);border:1px solid transparent;white-space:nowrap}
.tab-item .ic{color:var(--accent)}
.tab-item:hover{background:rgba(66,165,245,.25);color:var(--strong);border-color:#fc0}

/* Structure */
.container-main{width:100%;max-width:1600px;margin:0 auto 20px;padding:20px var(--gap) 0;flex:1}
.main-layout{display:flex;flex-wrap:wrap;gap:25px;margin-top:20px}
.main-content{flex:7;min-width:300px}
.sidebar{flex:5;min-width:300px}

/* Mises en avant */
.featured-content{display:flex;gap:20px;flex-wrap:wrap}
.featured-content > div{flex:1;min-width:280px}
.featured-card{display:flex;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);min-height:140px;transition:transform .2s,box-shadow .2s}
.featured-card:hover{transform:translateY(-3px);box-shadow:0 5px 15px rgba(66,165,245,.2)}
.featured-img{width:40%;max-width:200px;object-fit:contain;padding:8px;background:var(--surf2);flex-shrink:0}
.featured-text{padding:10px;display:flex;flex-direction:column;justify-content:center;gap:4px}
.featured-category{color:var(--accent);font-size:.8rem;font-weight:500}
.featured-title{font-size:clamp(.85rem,1.2vw,1rem);line-height:1.25}
.featured-excerpt{font-size:clamp(.72rem,1vw,.85rem);color:var(--soft);line-height:1.3}
.btn{align-self:flex-start;background:var(--accent);color:var(--strong);font-size:.75rem;padding:.2rem .6rem;border-radius:var(--radius)}
.btn:hover{background:#0d47a1;color:var(--strong)}

/* Panneaux */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);margin:30px 0 0;box-shadow:var(--shadow);overflow:hidden}
.sidebar .panel:first-child{margin-top:0}
.panel-heading{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:var(--surf);color:var(--strong);font:600 .95rem system-ui,'Segoe UI',Roboto,Arial,sans-serif;padding:12px 20px;border:0;border-left:2px solid var(--accent);border-bottom:1px solid var(--line)}
button.panel-heading{cursor:pointer;position:relative;transition:background .2s,border-color .2s}
button.panel-heading:hover{background:rgba(66,165,245,.15);border-left-color:#fa0}
button.panel-heading::after{content:'';margin-left:auto;width:8px;height:8px;border:solid var(--muted);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .3s}
button.panel-heading[aria-expanded="true"]::after{transform:rotate(-135deg)}
.acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s}
.acc-body > div{overflow:hidden}
.acc-body.open{grid-template-rows:1fr}
.acc-body.open > div{padding:18px}
.acc-body iframe,.panel-body iframe{display:block;width:100%;border:0}
.iframe-tableau{height:450px}.iframe-contact{height:700px}.iframe-gallery{height:550px}

/* Cartes */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.card{flex:1;display:flex;flex-direction:column;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .2s,border-color .2s}
.card:hover{transform:translateY(-4px);border-color:rgba(66,165,245,.4)}
.card-img{height:130px;display:flex;align-items:center;justify-content:center;padding:5px;background:var(--surf2)}
.card-img img{max-width:100%;max-height:100%;object-fit:contain}
.card-title{padding:8px 5px;background:var(--surf);color:var(--strong);font-size:.85rem;font-weight:600;border-top:1px solid var(--line)}

/* Articles */
.post{position:relative;padding:1rem;margin-bottom:1rem;background:var(--post);border-left:1px solid var(--accent)}
.post:hover{background:var(--post-h)}
.post h4{font-size:1.15rem;margin-bottom:.4rem}
.post p{font-size:.95rem;color:var(--soft);line-height:1.4;margin:.5rem 0}
.post > a{font-weight:500;display:inline-block;margin-top:5px}
.post-highlight{border-left:2px solid var(--gold)}
.post-highlight h4{color:var(--gold)}
.post-gold h4{color:goldenrod}
.post-gold strong{color:goldenrod}
.padlet{height:120px;border:1px solid rgba(0,0,0,.1);overflow:hidden}
.padlet iframe{width:100%;height:100%;display:block;border:0}
.banner{margin-top:20px}
.banner img{display:block;width:100%;height:auto;border-radius:10px;box-shadow:0 4px 8px rgba(249,170,105,.6)}

footer{background:var(--header);color:var(--muted);padding:15px var(--gap);font-size:.9rem;border-top:1px solid var(--line)}
footer a{margin:0 8px;font-weight:500}

@media (max-width:1200px){.cards-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}}
@media (max-width:992px){
  :root{--gap:30px}
  .main-layout{flex-direction:column}
  .card-img{height:105px}
  .iframe-gallery{height:300px}
}
@media (max-width:768px){
  :root{--gap:20px}
  .brand{font-size:1rem}
  .date-time{font-size:.8rem}
  .cards-grid{grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:12px}
  .card-img{height:95px}
  .card-title{font-size:.7rem}
  .iframe-contact{height:550px}
}
@media (max-width:576px){
  :root{--gap:12px}
  .date-time #date-display{display:none}
  .cards-grid{grid-template-columns:repeat(3,1fr);gap:10px}
  .tab-item{font-size:.75rem;padding:5px 8px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;scroll-behavior:auto !important}
}

/* Icônes SVG */
.ic{width:1.1em;height:1.1em;vertical-align:-.15em;flex-shrink:0}
.btn,.btn:hover{color:#fff}

.main-content > .panel:first-child{margin-top:0}

/* Bouton de thème */
.icon-btn{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;background:rgba(66,165,245,.1);color:var(--soft);cursor:pointer}
.icon-btn:hover{background:rgba(66,165,245,.25)}
.date-time{align-items:center}

/* Indication de défilement des onglets */
.tabs-nav.fade-r{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent)}
.tabs-nav.fade-l{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 32px),transparent)}
.tabs-nav.fade-l.fade-r{-webkit-mask-image:linear-gradient(to right,transparent,#000 32px,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(to right,transparent,#000 32px,#000 calc(100% - 32px),transparent)}

/* Repli sans JavaScript */
.noscript-box{padding:14px 18px;margin-bottom:20px;background:var(--panel);border:1px solid var(--line);border-left:2px solid var(--gold)}
.noscript-box a{margin-right:14px;font-weight:500}

/* Thème clair */
[data-theme="light"]{
  --bg:#f3f6fa;--card:#fff;--header:#fff;--text:#1f2933;--muted:#52616b;--soft:#3e4c59;--accent:#1565C0;--gold:#9a6b00;
  --line:rgba(21,101,192,.22);--shadow:0 2px 8px rgba(16,42,67,.1);
  --surf:#e9eef5;--surf2:#eef2f7;--surf3:rgba(255,255,255,.95);--panel:#fff;--post:#f6f8fb;--post-h:#eaf1fa;--strong:#102a43;
}
[data-theme="light"] a:hover{color:#0d47a1}
[data-theme="light"] .tab-item{background:rgba(21,101,192,.07)}
[data-theme="light"] .post-gold h4,[data-theme="light"] .post-gold strong{color:#9a6b00}