/* GREPPAO — thème statique 2026 (inspiration Pena, couleurs du logo) */
:root{--navy:#0d4a63;--navy2:#08324a;--blue:#328bb2;--sand:#f4f1f4;--lilac:#d0c3cf;--accent:#f2b705;--accent2:#e0a800;--ink:#33474f;--line:#e2e8ec;--r:16px;--h:"Montserrat","Open Sans",sans-serif;--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:17px/1.7 "Open Sans",system-ui,sans-serif;color:var(--ink);background:#fff}
img{max-width:100%;height:auto;display:block}a{color:var(--blue)}
.wrap{max-width:1220px;margin:0 auto;padding:0 28px}.wrap.narrow{max-width:860px}
h1,h2,h3,h4{font-family:var(--h);color:var(--navy);line-height:1.2;letter-spacing:-.01em}
.c{text-align:center}.kick{font:700 12.5px/1 var(--h);letter-spacing:.2em;text-transform:uppercase;color:var(--blue);margin:0 0 12px}
.h2{font:800 clamp(26px,3.4vw,42px)/1.15 var(--h);margin:0 0 22px}.h2 small{font:600 14px var(--h);color:#7a8a92;margin-left:10px;letter-spacing:0}
.h2.line{display:flex;align-items:center;gap:16px;margin-top:50px}.h2.line::after{content:"";flex:1;height:2px;background:linear-gradient(90deg,var(--accent),transparent)}
.lead{font-size:clamp(17px,1.6vw,20px);color:var(--navy)}
.sec{padding:clamp(56px,8vw,100px) 0}.sec.soft{background:var(--sand)}
/* boutons */
.btn{display:inline-flex;align-items:center;gap:10px;font:700 13.5px/1 var(--h);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:16px 26px;border-radius:40px;border:2px solid transparent;transition:.25s var(--ease);cursor:pointer}
.btn::after{content:"";width:16px;height:2px;background:currentColor;transition:width .25s}.btn:hover::after{width:24px}
.btn.sm{padding:11px 18px;font-size:12px}
.btn-accent{background:var(--accent);color:var(--navy2);box-shadow:0 10px 24px rgba(242,183,5,.35)}.btn-accent:hover{background:#ffc823;transform:translateY(-3px)}
.btn-navy{background:var(--navy);color:#fff;box-shadow:0 10px 24px rgba(13,74,99,.25)}.btn-navy:hover{background:var(--blue);transform:translateY(-3px)}
.btn-line{border-color:var(--navy);color:var(--navy)}.btn-line:hover{background:var(--navy);color:#fff;transform:translateY(-3px)}
.btn-ghost{border-color:rgba(255,255,255,.8);color:#fff;background:rgba(255,255,255,.08)}.btn-ghost:hover{background:#fff;color:var(--navy);transform:translateY(-3px)}
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
/* en-tête */
.tb{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);transition:box-shadow .3s}
.tb.sc{box-shadow:0 8px 30px rgba(8,50,74,.1)}
.tb-in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}.brand img{height:62px;width:auto;transition:height .3s}.tb.sc .brand img{height:48px}
.brand b{display:block;font:800 20px/1 var(--h);color:var(--navy);letter-spacing:.04em}.brand small{display:block;font:600 11.5px/1.4 var(--h);color:var(--blue);letter-spacing:.12em;text-transform:uppercase}
#nav{display:flex;align-items:center;gap:4px}
.nv{font:600 14.5px/1 var(--h);color:var(--navy);text-decoration:none;padding:12px 15px;border-radius:30px;transition:.2s;white-space:nowrap}
.nv:hover{background:#e6f1f6}.nv.on{background:var(--navy);color:#fff}
.nv-cta{margin-left:6px;font:700 13px/1 var(--h);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--navy2);background:var(--accent);padding:13px 20px;border-radius:30px;box-shadow:0 8px 20px rgba(242,183,5,.35);transition:.25s}
.nv-cta:hover{transform:translateY(-2px);background:#ffc823}
.nv-lang{margin-left:6px;font:700 13px/1 var(--h);color:var(--blue);text-decoration:none;border:2px solid #cfe3ec;border-radius:30px;padding:10px 12px}.nv-lang:hover{border-color:var(--blue)}
.burger{display:none;width:48px;height:48px;border-radius:50%;border:0;background:var(--navy);position:relative;cursor:pointer}
.burger span{position:absolute;left:14px;right:14px;height:2px;background:#fff;transition:.3s}.burger span:nth-child(1){top:17px}.burger span:nth-child(2){top:23px}.burger span:nth-child(3){top:29px}
.burger.x span:nth-child(1){top:23px;transform:rotate(45deg)}.burger.x span:nth-child(2){opacity:0}.burger.x span:nth-child(3){top:23px;transform:rotate(-45deg)}
@media(max-width:1100px){.burger{display:block}#nav{position:fixed;left:0;right:0;top:var(--hh,86px);bottom:0;background:#fff;flex-direction:column;align-items:stretch;padding:18px 20px 40px;gap:8px;transform:translateX(100%);transition:transform .35s var(--ease);overflow-y:auto}
 #nav.open{transform:none}.nv{padding:16px 18px;background:var(--sand);border-radius:12px;font-size:16px}.nv-cta,.nv-lang{margin:6px 0 0;text-align:center;padding:16px}}
/* bandeaux */
.ph{position:relative;min-height:clamp(280px,42vh,420px);display:flex;align-items:flex-end;color:#fff;background:var(--navy2) var(--hero) center/cover;isolation:isolate;overflow:hidden}
.ph::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,50,74,.25),rgba(8,50,74,.88));z-index:-1}
.ph::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:56px;background:#fff;clip-path:ellipse(75% 100% at 50% 100%);z-index:-1}
.ph .wrap{width:100%;padding-top:60px;padding-bottom:80px}.ph .kick{color:var(--accent)}
.ph h1{color:#fff;font:800 clamp(30px,4.8vw,56px)/1.08 var(--h);margin:0;max-width:960px;animation:rise .9s var(--ease) both}
.ph-sub{max-width:760px;font-size:clamp(16px,1.8vw,19px);color:#e0ecf2;margin:14px 0 0;animation:rise .9s .15s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* accueil */
.hh{position:relative;min-height:calc(100svh - 86px);display:flex;align-items:center;color:#fff;overflow:hidden;isolation:isolate;background:var(--navy2)}
.hh-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.1);transition:opacity 1.6s,transform 9s linear;z-index:-2}.hh-bg.on{opacity:1;transform:scale(1)}
.hh::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,50,74,.9),rgba(8,50,74,.55) 55%,rgba(8,50,74,.2)),linear-gradient(0deg,rgba(8,50,74,.6),transparent 40%)}
.hh-in{padding-top:60px;padding-bottom:170px}.hh .kick{color:var(--accent)}
.hh h1{color:#fff;font:800 clamp(34px,5.4vw,70px)/1.05 var(--h);max-width:980px;margin:0 0 20px;animation:rise 1s .1s var(--ease) both}
.hh-sub{font-size:clamp(17px,1.8vw,21px);max-width:640px;color:#e3eef4;margin:0;animation:rise 1s .25s var(--ease) both}.hh .btns{animation:rise 1s .4s var(--ease) both}
.feats{position:relative;z-index:2;margin-top:-120px}
.obj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.obj{display:flex;flex-direction:column;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(8,50,74,.16);text-decoration:none;color:var(--ink);transition:.35s var(--ease)}
.obj:hover{transform:translateY(-8px);box-shadow:0 30px 70px rgba(8,50,74,.22)}
.obj-img{position:relative;display:block;aspect-ratio:16/9;background-size:cover;background-position:center}
.obj-img em{position:absolute;left:18px;bottom:-22px;width:52px;height:52px;border-radius:50%;background:var(--accent);color:var(--navy2);display:grid;place-items:center;font:800 16px var(--h);font-style:normal;box-shadow:0 8px 20px rgba(0,0,0,.2)}
.obj>div{padding:34px 24px 26px}.obj h3{font-size:22px;margin:0 0 8px}.obj p{margin:0;font-size:15.5px}
.obj .more{display:inline-block;margin-top:14px;font:700 13px var(--h);letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.obj-grid.big .obj{box-shadow:0 10px 30px rgba(8,50,74,.08)}
.duo{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.logos-duo{display:flex;gap:30px;align-items:center;justify-content:center;background:#fff;border-radius:20px;padding:34px;box-shadow:0 20px 50px rgba(8,50,74,.1)}
.logos-duo img{max-height:150px;width:auto;max-width:48%}
.figs{padding:90px 0;color:#fff;background:linear-gradient(rgba(8,50,74,.88),rgba(8,50,74,.88)),var(--img) center/cover fixed}
.figs-in{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;text-align:center}
.figs b{display:block;font:800 clamp(46px,6vw,72px)/1 var(--h);color:var(--accent);margin-bottom:10px}.figs span{color:#d9e7ee;font-size:15px}
.row-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:30px}.row-head .h2{margin:0}
.theme-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}
.theme{display:flex;align-items:center;gap:16px;text-align:left;background:#fff;border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:14px;padding:22px;text-decoration:none;color:var(--navy);transition:.3s var(--ease)}
.theme b{font:800 38px/1 var(--h);color:var(--blue)}.theme span{font:700 16px/1.3 var(--h)}.theme:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(8,50,74,.12)}
.marquee{overflow:hidden;padding:10px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq{display:flex;gap:22px;width:max-content;animation:mq 50s linear infinite}.marquee:hover .mq{animation-play-state:paused}
.lg{width:170px;height:104px;flex:0 0 auto;display:grid;place-items:center;background:#fff;border-radius:16px;border:1px solid var(--line);padding:12px}
.lg img{max-height:74px;width:auto;max-width:140px;object-fit:contain}
@keyframes mq{to{transform:translateX(calc(-50% - 11px))}}
/* actualités */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.nc{display:flex;flex-direction:column;background:#fff;border-radius:16px;overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:0 8px 26px rgba(8,50,74,.07);transition:.35s var(--ease)}
.nc-img{display:block;aspect-ratio:16/10;overflow:hidden;background:#eaf2f6}.nc-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.nc-img.contain img{object-fit:contain;padding:18%}
.nc-b{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px}.nc-m{font:600 12px/1 var(--h);color:#7a8a92;text-transform:uppercase;letter-spacing:.06em;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.nc-m em{font-style:normal;background:#fff4cc;color:#7a5a00;padding:5px 9px;border-radius:20px}
.nc b{font:700 17px/1.35 var(--h);color:var(--navy)}
.nc:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(8,50,74,.15)}.nc:hover img{transform:scale(1.05)}
.nc.big{grid-row:span 2}.nc.big .nc-img{aspect-ratio:auto;flex:1;min-height:260px}.nc.big b{font-size:22px}
.filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:34px}
.filters button{font:600 14px var(--h);border:2px solid var(--line);background:#fff;color:var(--navy);padding:10px 18px;border-radius:30px;cursor:pointer;transition:.2s}
.filters button b{color:var(--blue);margin-left:4px}.filters button:hover{border-color:var(--blue)}.filters button.on{background:var(--navy);color:#fff;border-color:var(--navy)}.filters button.on b{color:var(--accent)}
.nc.hide{display:none}
/* article */
.prose{font-size:17.5px}.prose h2{font-size:clamp(22px,2.6vw,30px);margin:1.6em 0 .6em}.prose h3{font-size:20px;margin:1.4em 0 .5em}
.prose p{margin:0 0 1.1em}.prose a{word-break:break-word}
.pimg{margin:28px 0}.pimg img{border-radius:12px;box-shadow:0 14px 34px rgba(8,50,74,.12)}.pimg figcaption{font-size:14px;color:#7a8a92;text-align:center;margin-top:8px}
.slides{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.slides .pimg{margin:0}
.files{margin:40px 0 0}.files h3{margin:0 0 14px}
.file{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:14px;padding:16px 20px;margin-bottom:12px;text-decoration:none;color:var(--navy);transition:.25s}
.file:hover{transform:translateX(4px);box-shadow:0 12px 28px rgba(8,50,74,.1)}.f-ic{font:800 12px var(--h);background:#c0392b;color:#fff;border-radius:6px;padding:10px 8px}
.file b{display:block;font:700 16px var(--h)}.file small{color:#7a8a92}.file i{margin-left:auto;font-style:normal;font-size:20px;color:var(--blue)}
.file.req .f-ic{background:#8aa1ab}
.upd{color:#7a8a92;font-size:14px;margin-top:30px}.back{margin-top:30px}
/* publications */
.jump{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:10px}
.jump a{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--navy);background:#fff;border:2px solid var(--line);border-radius:40px;padding:8px 18px 8px 8px;font:600 14px var(--h);transition:.2s}
.jump a b{background:var(--accent);color:var(--navy2);border-radius:20px;min-width:32px;height:32px;display:grid;place-items:center}.jump a:hover{border-color:var(--blue)}
.pub-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.pub{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:14px;transition:.3s var(--ease)}
.pub p{margin:0;font-size:15.5px;line-height:1.6;flex:1}.pub .btn{align-self:flex-start}.pub:hover{box-shadow:0 16px 36px rgba(8,50,74,.1);transform:translateY(-4px)}
/* médiathèque */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.gal a{display:block;aspect-ratio:1;overflow:hidden;border-radius:12px}.gal img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}.gal a:hover img{transform:scale(1.07)}
#lbx{position:fixed;inset:0;background:rgba(4,20,30,.94);display:none;align-items:center;justify-content:center;z-index:200}
#lbx.on{display:flex}#lbx img{max-width:92vw;max-height:88vh;border-radius:8px}
#lbx button{position:absolute;background:rgba(255,255,255,.14);border:0;color:#fff;font-size:30px;width:54px;height:54px;border-radius:50%;cursor:pointer}
#lbx .x{top:20px;right:20px}#lbx .p{left:20px}#lbx .n{right:20px}
/* activités */
.act-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.act{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:34px 28px;transition:.3s var(--ease)}
.act-ic{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--navy);color:var(--accent);margin-bottom:18px}.act-ic svg{width:30px;height:30px}
.act-n{position:absolute;top:20px;right:24px;font:800 36px var(--h);color:transparent;-webkit-text-stroke:1.5px var(--lilac)}
.act h3{font-size:20px;margin:0}.act:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(8,50,74,.12)}
/* contact */
.mailbox{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;background:linear-gradient(120deg,var(--navy2),var(--navy) 60%,var(--blue));color:#e0ecf2;border-radius:20px;padding:40px}
.mailbox .h2{color:#fff;margin:0 0 6px}.mailbox .kick{color:var(--accent)}.mailbox p{margin:0}
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:20px}
.mb{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 18px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;transition:.3s}
.mb:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(8,50,74,.1)}
.av{width:112px;height:112px;border-radius:50%;overflow:hidden;margin-bottom:8px;border:4px solid #e6f1f6;background:#e6f1f6;display:grid;place-items:center}.av img{width:100%;height:100%;object-fit:cover}
.ini{font:800 34px var(--h);color:var(--navy)}.mb b{font:700 16.5px var(--h);color:var(--navy)}.mb span{font-size:14px;color:#6b7c85}
/* pied */
.ft{background:var(--navy2);color:#b8cdd8;padding:70px 0 0;font-size:15px;position:relative}
.ft::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--accent),var(--blue))}
.ft-grid{display:grid;grid-template-columns:1.6fr 1fr 1.2fr;gap:40px}
.ft-logos{display:flex;gap:12px;align-items:center;background:#fff;border-radius:14px;padding:12px 16px;width:max-content;max-width:100%;margin-bottom:16px}.ft-logos img{height:56px;width:auto}
.ft h4{color:#fff;font:700 14px/1 var(--h);letter-spacing:.14em;text-transform:uppercase;margin:6px 0 18px}
.ft a{color:#b8cdd8;text-decoration:none;display:block;padding:5px 0}.ft a:hover{color:var(--accent)}
.ft-mail{font:700 18px var(--h);color:#fff!important}.ft .btn{display:inline-flex;margin-top:12px;color:var(--navy2)!important}
.ft-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;border-top:1px solid rgba(255,255,255,.1);margin-top:50px;padding-top:20px;padding-bottom:26px;font-size:13.5px}.ft-bottom a{display:inline;padding:0}
/* apparition */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}.js .rv.in{opacity:1;transform:none}
/* responsive */
@media(max-width:1000px){.obj-grid,.news-grid,.act-grid,.theme-row{grid-template-columns:repeat(2,1fr)}.nc.big{grid-row:auto}.nc.big .nc-img{aspect-ratio:16/10;min-height:0}.figs-in{grid-template-columns:repeat(2,1fr)}.duo{grid-template-columns:1fr}.ft-grid{grid-template-columns:1fr 1fr}.ft-about{grid-column:1/-1}.figs{background-attachment:scroll}}
@media(max-width:640px){.wrap{padding:0 18px}body{font-size:16px}.obj-grid,.news-grid,.act-grid,.theme-row,.pub-grid,.slides{grid-template-columns:1fr}.feats{margin-top:-80px}.hh-in{padding-bottom:130px}.hh .btn{width:100%;justify-content:center}.ft-grid{grid-template-columns:1fr}.brand img{height:50px}.brand small{display:none}.mailbox{padding:28px}.logos-duo img{max-height:110px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.js .rv{opacity:1;transform:none}}
html,body{overflow-x:clip}
@media(max-width:1100px){#nav{visibility:hidden}#nav.open{visibility:visible}}
.nc[data-cat="press"] .nc-img img{object-fit:contain;background:#fff;padding:6%}
@media(max-width:1100px){#nav{display:none;transform:none;visibility:visible}#nav.open{display:flex;animation:slidein .35s var(--ease)}}
@keyframes slidein{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}