:root{--teal:#1c86a6;--teal-dark:#0f5c75;--red:#c1121f;--ink:#10242d;--paper:#fff;--mist:#eef6f9;--line:#cfe0e6}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Source Sans 3',system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.6;font-size:18px}
h1,h2,h3{font-family:'Bricolage Grotesque','Source Sans 3',sans-serif;line-height:1.1;margin:0 0 .5em}
a{color:var(--teal-dark)}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.wrap.narrow{max-width:760px}
header.top{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:4px solid var(--red)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;flex-wrap:wrap}
.brand{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.3rem;color:var(--teal);text-decoration:none;letter-spacing:.01em;display:flex;align-items:center;gap:10px}
.brand span{color:var(--teal)}
.brand em{color:var(--red);font-style:normal}
.brand .logo{height:46px;width:auto;display:block}
nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
nav a{text-decoration:none;font-weight:600;color:var(--ink)}
nav a.join{background:var(--red);color:#fff;padding:8px 16px;border-radius:6px}

.hero{padding:48px 0 56px}
.two{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(2.2rem,5.5vw,3.8rem);font-weight:800;color:var(--teal-dark)}
.lead{font-size:1.15rem;max-width:34em}
.two img{width:100%;height:auto;display:block}
.framed{border-radius:4px;border-bottom:6px solid var(--red)}
@media(max-width:800px){.two{grid-template-columns:1fr}.hero .two img{max-width:420px;margin:0 auto}}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.btn{display:inline-block;padding:14px 26px;border-radius:6px;font-weight:600;text-decoration:none;border:2px solid var(--red);background:var(--red);color:#fff}
.btn.alt{background:transparent;color:var(--red)}
.btn.small{padding:8px 16px;font-size:.95rem}
section{padding:64px 0}
section.mist{background:var(--mist)}
h2{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;color:var(--teal-dark)}
.page-title{font-size:clamp(2rem,4.5vw,3rem);font-weight:800;color:var(--teal-dark)}
.muted{color:#52707c}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin:24px 0}
.card{background:#fff;border-radius:4px;overflow:hidden;border:1px solid var(--line);border-top:6px solid var(--teal)}
.card img{width:100%;height:200px;object-fit:cover;object-position:center top;display:block}
.card-body{padding:16px}
.card-body h3{font-size:1.3rem;margin:.2em 0 .4em}
.card-body h3 a{text-decoration:none;color:var(--ink)}
.card-body time{font-size:.9rem;color:#52707c}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:28px}
.gallery figure{margin:0;background:#fff;border-radius:4px;overflow:hidden;border-top:6px solid var(--teal)}
.gallery img{width:100%;height:280px;object-fit:cover;display:block}
.gallery figcaption{padding:12px 16px;font-size:.95rem}
.post-img{max-width:100%;max-height:640px;width:auto;height:auto;border-radius:4px;margin:20px auto;display:block}
.post-text{white-space:pre-line;font-size:1.1rem}
.formbox{max-width:720px;margin:0 auto;background:#fff;padding:32px;border-radius:6px;border-top:6px solid var(--red);box-shadow:0 2px 14px rgba(16,36,45,.12)}
.formbox.wide{max-width:820px;margin:0}
.formbox.login{max-width:420px;margin-top:48px}
form:not(.inline):not(.filters):not(.stack){display:grid;grid-template-columns:1fr 1fr;gap:16px}
form.stack{display:grid;gap:16px}
.full{grid-column:1/-1}
label{display:block;font-weight:600;margin-bottom:4px;font-size:.95rem}
label.plain{font-weight:400}
input,select,textarea{width:100%;padding:12px;font:inherit;border:1.5px solid #9db7c1;border-radius:6px;background:#fff;color:var(--ink)}
textarea{min-height:110px;resize:vertical}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.92rem}
.check input{width:auto;margin-top:5px}
button{font:inherit;font-weight:600;padding:12px 24px;border:0;border-radius:6px;background:var(--red);color:#fff;cursor:pointer}
form:not(.inline):not(.filters) button[type=submit]{width:100%}
button:hover{background:#9d0f19}
button.link{background:none;color:var(--teal-dark);padding:0;text-decoration:underline;width:auto}
button.link.danger{color:var(--red)}
.row{display:flex;gap:12px;align-items:center}
.row button{width:auto!important}
.hp{position:absolute;left:-9999px}
#msg{display:none;padding:14px;border-radius:6px;margin-top:16px;font-weight:600}
#msg.ok{display:block;background:#e3f4ea;color:#14532d}
#msg.err{display:block;background:#fde8e8;color:#7f1d1d}
@media(max-width:600px){form:not(.inline):not(.filters):not(.stack){grid-template-columns:1fr}.formbox{padding:22px}}
footer{background:var(--teal-dark);color:#fff;padding:36px 0;text-align:center;font-size:.95rem}
footer .brand{color:#fff;font-size:1.2rem}
/* admin */
.adm-main{padding-top:28px;padding-bottom:64px}
form.inline{display:inline}
.flash{padding:12px 16px;border-radius:6px;margin-bottom:16px;font-weight:600}
.flash.ok{background:#e3f4ea;color:#14532d}
.flash.err{background:#fde8e8;color:#7f1d1d}
.stats{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.stats div{background:var(--mist);border-left:6px solid var(--teal);padding:12px 20px;border-radius:4px}
.stats strong{display:block;font-size:2rem;font-family:'Bricolage Grotesque',sans-serif;color:var(--teal-dark)}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;align-items:center}
.filters input,.filters select{width:auto;flex:1 1 180px}
.table-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.95rem}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--mist)}
tr.done{opacity:.65}
.msgcell{max-width:280px;white-space:pre-line}
.pill{background:#fff3cd;color:#664d03;padding:4px 12px;border-radius:99px;font-size:.85rem}
.pill.ok{background:#d1e7dd;color:#0f5132}
.pill:hover{background:#ffe69c}
.thumb{max-width:240px;display:block;margin:8px 0;border-radius:4px}
.actions{display:flex;gap:14px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* en-tête adaptatif */
.bar{padding-top:6px;padding-bottom:6px}
.bar .brand{flex:1 1 auto;min-width:0}
.tools{display:flex;align-items:center;gap:6px}
.icon,.menu{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:var(--teal-dark);background:var(--mist);border:0;padding:0;cursor:pointer}
.icon:hover,.menu:hover{background:var(--line);color:var(--red)}
#mainNav{order:3;flex-basis:100%;display:none;flex-direction:column;align-items:stretch;gap:0;padding:6px 0 12px}
#mainNav.open{display:flex}
#mainNav a{padding:12px 4px;border-bottom:1px solid var(--line)}
#mainNav a.join{margin-top:10px;text-align:center;border:0}
@media(min-width:861px){
  .menu{display:none}
  #mainNav{display:flex;order:2;flex-basis:auto;flex-direction:row;align-items:center;gap:18px;padding:0}
  #mainNav a{padding:0;border:0}
  #mainNav a.join{margin:0;padding:8px 16px}
  .tools{order:3}
}
@media(max-width:420px){.brand{font-size:1.05rem}.brand .logo{height:38px}}
.pre{white-space:pre-line}
.share{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:28px;padding-top:16px;border-top:1px solid var(--line)}
.h3{font-size:1.4rem}
.admin-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:24px}
.admin-gallery figure{margin:0;border:1px solid var(--line);border-radius:4px;padding:8px}
.admin-gallery img{width:100%;height:140px;object-fit:cover;display:block;border-radius:4px}
.admin-gallery figcaption{font-size:.9rem;margin:6px 0}
.adm header.top .wrap{padding-top:8px;padding-bottom:8px}

.wrap.post{max-width:900px}
.post-text{line-height:1.75}
.post-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:32px;align-items:center}
.post-gallery figure{margin:0}
.post-gallery img{width:100%;height:auto;display:block;border-radius:4px}
.post-gallery figure:last-child{grid-column:1/-1}
@media(max-width:640px){.post-gallery{grid-template-columns:1fr}}