:root{
  color-scheme:light;
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F2F5F6;
  --ink:#0B0F11;
  --ink-2:#33424A;
  --muted:#5C6E77;
  --line:#D9E1E4;
  --line-strong:#B9C6CB;
  --accent:#A4262C;      /* rouge du 1er Choc */
  --sea:#17566B;         /* Collioure */
  --gold:#9A7B33;        /* insigne */
  --ok:#2F6B4F;
  --warn:#8A6410;
  --shadow:0 1px 2px rgba(16,22,25,.06), 0 8px 24px -12px rgba(16,22,25,.18);
  --radius:14px;
  --maxw:1180px;
  --font-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-body:"Newsreader",Georgia,"Times New Roman",serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}



*{box-sizing:border-box}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.ui{font-family:var(--font-display);text-wrap:balance}
h1,h2,h3,h4{margin:0;letter-spacing:-.02em;line-height:1.1}
p{margin:0}
a{color:inherit}
img{max-width:100%}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--sea);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.mono{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ---------- en-tête ---------- */
header{position:sticky;top:0;z-index:60;background:color-mix(in srgb, var(--bg) 88%, transparent);backdrop-filter:blur(10px);border-bottom:1px solid transparent}
header.scrolled{border-bottom-color:var(--line)}
.bar{display:flex;align-items:center;gap:16px;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;background:none;border:0;padding:0;color:inherit}
.brand svg{display:block}
.brand-txt{font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:-.01em;line-height:1.15;text-align:left;max-width:180px}
.brand-txt small{display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;color:var(--muted);font-weight:400;line-height:1.3;margin-top:2px}
@media (max-width:1300px){.brand-txt{display:none}}

.logo{display:block;border-radius:50%;object-fit:contain;flex:none}
.logo-hero{width:clamp(96px,13vw,140px);height:auto;margin-bottom:4px;filter:drop-shadow(0 6px 18px rgba(16,22,25,.16))}

nav.pill{display:flex;align-items:center;gap:2px;background:var(--surface-2);border-radius:999px;padding:5px;margin-left:8px}
nav.pill button{
  border:0;background:none;color:var(--ink);font-family:var(--font-display);font-weight:600;font-size:14.5px;
  padding:8px 13px;border-radius:999px;display:flex;align-items:center;gap:5px;white-space:nowrap;
  transition:background .15s;
}
nav.pill button:hover{background:color-mix(in srgb,var(--surface) 70%,transparent)}
nav.pill button[aria-current="true"]{background:var(--surface);box-shadow:var(--shadow)}
.caret{width:5px;height:5px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:rotate(45deg) translateY(-2px)}

.right{margin-left:auto;display:flex;align-items:center;gap:6px}
.linkbtn{border:0;background:none;color:var(--ink-2);font-family:var(--font-display);font-weight:600;font-size:14px;padding:8px 10px;border-radius:8px}
.linkbtn:hover{color:var(--ink);background:var(--surface-2)}
.btn{
  font-family:var(--font-display);font-weight:600;font-size:14.5px;border:0;border-radius:999px;
  padding:11px 22px;background:var(--ink);color:var(--bg);
}
.btn:hover{opacity:.88}
.btn.ghost{background:none;color:var(--ink);border:1px solid var(--line-strong);border-radius:999px}
.btn.ghost:hover{background:var(--surface-2);opacity:1}
.btn.sm{padding:8px 15px;font-size:13.5px}
.btn.accent{background:var(--accent);color:#fff}

.dropdown{position:relative}
.menu{
  position:absolute;top:calc(100% + 8px);left:0;min-width:236px;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;z-index:70;
}
.menu button{display:block;width:100%;text-align:left;border:0;background:none;color:var(--ink);
  font-family:var(--font-display);font-weight:500;font-size:14.5px;padding:9px 12px;border-radius:8px}
.menu button:hover{background:var(--surface-2)}
.menu .sep{height:1px;background:var(--line);margin:6px 4px}

.burger{display:none;margin-left:auto;border:1px solid var(--line-strong);background:var(--surface);border-radius:10px;padding:9px 12px;font-family:var(--font-display);font-weight:600;font-size:13.5px;color:var(--ink)}
#mobilenav{display:none;padding:8px 0 18px}
#mobilenav button{display:block;width:100%;text-align:left;border:0;background:none;color:var(--ink);font-family:var(--font-display);font-weight:600;font-size:16px;padding:11px 4px;border-bottom:1px solid var(--line)}

@media (max-width:1080px){
  nav.pill,.right{display:none}
  .burger{display:block}
  body.menuopen #mobilenav{display:block}
}

/* ---------- sections ---------- */
main{padding:38px 0 90px}
.view[hidden]{display:none!important}
.pagehead{display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center;margin-bottom:34px}
.pagehead h1{font-size:clamp(34px,5.4vw,62px);font-weight:800}
.pagehead p.lede{max-width:62ch;color:var(--ink-2);font-size:19px}

.prose{max-width:66ch;display:flex;flex-direction:column;gap:16px;color:var(--ink-2)}
.prose h2{font-size:26px;color:var(--ink);margin-top:14px}
.prose ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.prose strong{color:var(--ink)}

.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:10px}
.card h3{font-size:18px}
.card p{color:var(--muted);font-size:15.5px;line-height:1.55}

.tag{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:var(--surface-2);color:var(--muted);width:fit-content}
.tag.sea{background:color-mix(in srgb,var(--sea) 14%,transparent);color:var(--sea)}
.tag.red{background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent)}
.tag.ok{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
.tag.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}

hr.rule{border:0;border-top:1px solid var(--line);margin:52px 0}
.section-title{display:flex;align-items:baseline;gap:14px;margin-bottom:20px}
.section-title h2{font-size:29px;font-weight:700}

/* ---------- accueil ---------- */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;padding:26px 0 8px}
.hero h1{font-size:clamp(40px,7vw,86px);font-weight:800;letter-spacing:-.035em}
.devise{font-family:var(--font-display);font-weight:600;font-size:clamp(17px,2.2vw,22px);color:var(--accent);letter-spacing:.02em}
.hero .lede{max-width:60ch;color:var(--ink-2);font-size:19px}
.herocta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}

.sites{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
@media (max-width:760px){.sites{grid-template-columns:1fr}}
.site{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column}
.site .ph{height:210px}
.site .sitephoto{display:block;width:100%;height:240px;object-fit:cover}
.site .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px}
.site h3{font-size:21px}
.site p{color:var(--muted);font-size:15.5px}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:34px}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--surface);padding:20px}
.stat .n{font-family:var(--font-display);font-weight:800;font-size:34px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat .l{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:4px}

/* photos réelles */
.photo{margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.photo img{display:block;width:100%;height:auto}
.photo figcaption{padding:13px 18px;font-size:14.5px;color:var(--muted);line-height:1.45}
.photo figcaption b{color:var(--ink);font-family:var(--font-display);font-weight:600}

/* placeholders images */
.ph{background:
    linear-gradient(135deg,color-mix(in srgb,var(--sea) 16%,var(--surface-2)) 0%,var(--surface-2) 60%);
  position:relative;display:flex;align-items:center;justify-content:center;color:var(--muted);
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;text-align:center;padding:12px;
}
.ph.red{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 15%,var(--surface-2)) 0%,var(--surface-2) 60%)}
.ph.gold{background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 18%,var(--surface-2)) 0%,var(--surface-2) 60%)}
.ph::after{content:"";position:absolute;inset:8px;border:1px dashed var(--line-strong);border-radius:8px;pointer-events:none}

/* ---------- timeline ---------- */
.tl{display:flex;flex-direction:column;border-left:2px solid var(--line);margin-left:6px}
.tl-item{position:relative;padding:0 0 30px 26px}
.tl-item::before{content:"";position:absolute;left:-7px;top:7px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--accent)}
.tl-item .y{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--accent)}
.tl-item h3{font-size:19px;margin:4px 0 6px}
.tl-item p{color:var(--muted);font-size:16px;max-width:64ch}

/* ---------- bureau ---------- */
.bureau{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){.bureau{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.bureau{grid-template-columns:1fr}}
.member{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;display:flex;gap:14px;align-items:flex-start}
.avatar{flex:0 0 54px;height:54px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--muted)}
.member .role{font-family:var(--font-display);font-weight:700;font-size:16px}
.member .name{font-size:15px;color:var(--ink-2)}
.member .contact{font-family:var(--font-mono);font-size:11.5px;line-height:1.7;color:var(--muted);margin-top:5px;word-break:break-word}
.member.vacant{border-style:dashed}
.member.vacant .name{color:var(--muted);font-style:italic}
.member .zone{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--sea);margin-top:3px}

/* délégations */
td.reg{font-family:var(--font-display);font-weight:700;color:var(--ink);white-space:nowrap}
td.nom{font-weight:600;color:var(--ink)}
td.tel{font-variant-numeric:tabular-nums;white-space:nowrap}
td.mel{word-break:break-word;font-size:14px}

/* ---------- actualités ---------- */
.news{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.news article{display:grid;grid-template-columns:150px 1fr auto;gap:20px;align-items:start;padding:20px 0;border-bottom:1px solid var(--line)}
@media (max-width:760px){.news article{grid-template-columns:1fr;gap:8px}}
.news .date{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--muted);padding-top:4px}
.news h3{font-size:20px;margin-bottom:6px}
.news p{color:var(--muted);font-size:16px;max-width:70ch}

/* ---------- galerie ---------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.chip{border:1px solid var(--line-strong);background:none;color:var(--ink-2);border-radius:999px;padding:7px 15px;font-family:var(--font-display);font-weight:500;font-size:13.5px}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:900px){.gal{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.gal{grid-template-columns:repeat(2,1fr)}}
.gal figure{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.gal .ph{height:150px}
.gal img{display:block;width:100%;height:150px;object-fit:cover;cursor:zoom-in}
.gal figcaption{padding:9px 11px;font-size:13.5px;color:var(--muted);line-height:1.35}
.news article.une{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin:14px 0 6px;border-left:3px solid var(--accent)}

/* ---------- documents ---------- */
.doclist{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.doc{display:grid;grid-template-columns:auto 1fr auto auto;gap:16px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.doc:last-child{border-bottom:0}
.doc .ic{width:34px;height:42px;border-radius:5px;background:var(--surface-2);border:1px solid var(--line-strong);display:grid;place-items:center;font-family:var(--font-mono);font-size:9px;color:var(--muted)}
.doc .t{font-family:var(--font-display);font-weight:600;font-size:16px}
.doc .m{font-size:13.5px;color:var(--muted)}
@media (max-width:700px){.doc{grid-template-columns:auto 1fr;row-gap:8px}.doc>:nth-child(3),.doc>:nth-child(4){grid-column:2}}

/* ---------- boutique ---------- */
.shop{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.shop{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.shop{grid-template-columns:1fr}}
.prod{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);display:flex;flex-direction:column}
.prod .ph{height:180px}
.prod .prodphoto{
  display:block;width:100%;height:220px;padding:16px;border:0;border-bottom:1px solid var(--line);
  background:#F2F1ED;cursor:zoom-in;transition:background .18s;
}
.prod .prodphoto img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .22s ease}
.prod:hover .prodphoto{background:#EAE8E2}
.prod:hover .prodphoto img{transform:scale(1.045)}
.prod .b p{color:var(--muted);font-size:15px}
.prod .tag{font-size:9.5px}
.zoom{cursor:zoom-in}
.photo img,.sitephoto{cursor:zoom-in}

/* visionneuse */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(8,12,14,.93);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:34px 24px}
.lightbox[hidden]{display:none!important}
.lightbox .frame{background:#F2F1ED;border-radius:16px;padding:16px;max-width:min(940px,92vw);display:flex}
.lightbox .frame img{max-width:100%;max-height:72vh;object-fit:contain;display:block;border-radius:6px}
.lightbox .cap{color:#E9F0F2;font-family:var(--font-display);font-weight:600;font-size:16px;text-align:center;max-width:60ch}
.lightbox .close{position:absolute;top:18px;right:20px;border:1px solid rgba(233,240,242,.35);background:none;color:#E9F0F2;border-radius:999px;width:42px;height:42px;font-size:22px;line-height:1}
.lightbox .close:hover{background:rgba(233,240,242,.12)}
.prod .b{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.prod h3{font-size:17px}
.prod .price{font-family:var(--font-display);font-weight:700;font-size:19px;font-variant-numeric:tabular-nums}
.prod .row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:6px}
.prod .opts{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:auto;padding-top:8px}
.opt{display:flex;flex-direction:column;gap:5px}
.opt>span{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.opt select{font:inherit;font-size:15px;padding:6px 9px;border-radius:8px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line-strong);border-radius:8px;overflow:hidden;background:var(--surface)}
.qty button{border:0;background:none;color:var(--ink);width:30px;height:32px;font-size:16px;line-height:1}
.qty button:hover{background:var(--surface-2)}
.qty input{border:0;width:44px;height:32px;text-align:center;font:inherit;font-size:15px;background:none;color:var(--ink);
  font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ---------- panier ---------- */
.cartcount{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px;
  border-radius:999px;background:var(--accent);color:#fff;font-family:var(--font-mono);font-size:10.5px;margin-left:6px}
.cartcount[hidden]{display:none!important}
.cart-thumb{width:56px;height:56px;object-fit:contain;background:#F2F1ED;border-radius:8px;padding:5px;display:block}
.totaux{display:flex;flex-direction:column;gap:11px}
.totaux .l{display:flex;justify-content:space-between;gap:20px;font-size:15.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.totaux .l.big{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--ink);
  border-top:1px solid var(--line);padding-top:13px}
.linkbtn.danger:hover{color:var(--accent);background:none}
.empty{text-align:center;padding:56px 20px;color:var(--muted)}

/* ---------- formulaires ---------- */
.form{display:flex;flex-direction:column;gap:14px;max-width:520px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:var(--font-display);font-weight:600;font-size:13.5px}
.field input,.field select,.field textarea{
  font:inherit;font-size:16px;padding:11px 13px;border-radius:10px;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink);width:100%;
}
.field .hint{font-size:13px;color:var(--muted)}
.note{background:var(--surface-2);border-left:3px solid var(--sea);padding:13px 16px;border-radius:0 10px 10px 0;font-size:15px;color:var(--ink-2)}
.note.red{border-left-color:var(--accent)}

.split{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:28px}}

/* ---------- tarifs ---------- */
.tarifs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:760px){.tarifs{grid-template-columns:1fr}}
.tarif{border:1px solid var(--line);border-radius:var(--radius);padding:22px;background:var(--surface);display:flex;flex-direction:column;gap:8px}
.tarif.hi{border-color:var(--accent);box-shadow:var(--shadow)}
.tarif .amt{font-family:var(--font-display);font-weight:800;font-size:40px;letter-spacing:-.03em}
.tarif ul{margin:6px 0 0;padding-left:18px;color:var(--muted);font-size:15px;display:flex;flex-direction:column;gap:6px}

/* ---------- espace membre / admin ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.login{max-width:420px;margin:0 auto}
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:900px){.kpi{grid-template-columns:repeat(2,1fr)}}
.kpi .k{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px}
.kpi .k .n{font-family:var(--font-display);font-weight:800;font-size:28px;font-variant-numeric:tabular-nums}
.kpi .k .l{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:3px}
table{width:100%;border-collapse:collapse;font-size:15px}
th{text-align:left;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:400;padding:0 12px 10px;border-bottom:1px solid var(--line)}
td{padding:12px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:middle}
tr:last-child td{border-bottom:0}
.tablewrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.carte{background:linear-gradient(135deg,var(--ink) 0%, #24333A 100%);color:#F4F6F7;border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:6px;min-height:170px;justify-content:space-between}
.carte .top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.carte .num{font-family:var(--font-mono);font-size:13px;letter-spacing:.14em}
.carte .nom{font-family:var(--font-display);font-weight:700;font-size:22px}
.adminbar{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:22px}
.adminbar button{border:0;background:none;font-family:var(--font-display);font-weight:600;font-size:14.5px;color:var(--muted);padding:8px 12px;border-radius:8px}
.adminbar button[aria-current="true"]{background:var(--surface-2);color:var(--ink)}

/* ---------- dépôt de documents ---------- */
.dropzone{
  border:2px dashed var(--line-strong);border-radius:14px;padding:34px 24px;
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  background:var(--surface);cursor:pointer;transition:border-color .15s,background .15s;
}
.dropzone:hover,.dropzone.over{border-color:var(--sea);background:color-mix(in srgb,var(--sea) 8%,var(--surface))}
.dropzone.over{border-style:solid}
.dropzone svg{color:var(--sea)}
.dropzone strong{font-family:var(--font-display);font-weight:700;font-size:19px}
.dropzone span{font-size:14.5px;color:var(--muted);max-width:52ch}
.dropzone u{text-underline-offset:3px}
.depot-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:16px 0 24px}
@media (max-width:700px){.depot-opts{grid-template-columns:1fr}}
.dlabel{font-family:var(--font-display);font-weight:600;font-size:13.5px}
tr.nouveau td{background:color-mix(in srgb,var(--ok) 11%,transparent)}

/* ---------- pied ---------- */
footer{border-top:1px solid var(--line);background:var(--surface);padding:44px 0 30px;margin-top:20px}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
@media (max-width:800px){.foot{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot{grid-template-columns:1fr}}
.foot h4{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:400;margin-bottom:12px}
.foot button{display:block;border:0;background:none;color:var(--ink-2);font-family:var(--font-display);font-size:14.5px;padding:5px 0;text-align:left}
.foot button:hover{color:var(--ink)}
.foot p{color:var(--muted);font-size:15px}
.legal{margin-top:34px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--muted)}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:999px;font-family:var(--font-display);font-weight:600;font-size:14.5px;box-shadow:var(--shadow);z-index:100}


/* ====== adaptations site multi-pages ====== */
a{text-decoration:none}
.prose a,.note a,.card a:not(.btn),.photo a{text-decoration:underline;text-underline-offset:3px;color:var(--sea)}
.prose a:hover{color:var(--accent)}
[id]{scroll-margin-top:96px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

.brand{text-decoration:none}
nav.pill a{
  border:0;background:none;color:var(--ink);font-family:var(--font-display);font-weight:600;font-size:14.5px;
  padding:8px 13px;border-radius:999px;display:flex;align-items:center;gap:5px;white-space:nowrap;transition:background .15s;
}
nav.pill a:hover{background:color-mix(in srgb,var(--surface) 70%,transparent)}
nav.pill a[aria-current="page"],nav.pill button[aria-current="page"]{background:var(--surface);box-shadow:var(--shadow)}
.menu a{display:block;width:100%;text-align:left;color:var(--ink);
  font-family:var(--font-display);font-weight:500;font-size:14.5px;padding:9px 12px;border-radius:8px}
.menu a:hover{background:var(--surface-2)}
#mobilenav a{display:block;width:100%;color:var(--ink);font-family:var(--font-display);font-weight:600;font-size:16px;padding:11px 4px;border-bottom:1px solid var(--line)}
.foot a{display:block;color:var(--ink-2);font-family:var(--font-display);font-size:14.5px;padding:5px 0}
.foot a:hover{color:var(--ink)}
.legal a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
a.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center}
a.linkbtn{display:inline-flex;align-items:center}
.doc span[style*="display:flex"] .btn{white-space:nowrap}
@media (max-width:700px){.doc{grid-template-columns:auto 1fr}.doc>:nth-child(3),.doc>:nth-child(4){grid-column:2}}

/* ---------- album photo ---------- */
.album-nav{display:flex;flex-wrap:wrap;gap:6px 14px;font-family:var(--font-display);font-weight:600;font-size:14.5px;margin:-8px 0 30px;justify-content:center}
.album-nav a{color:var(--sea);text-decoration:none}
.album-nav a:hover{text-decoration:underline}
.album-section{scroll-margin-top:90px;margin-bottom:46px}
.album-section .section-title{flex-wrap:wrap;gap:6px 14px}
.album img{height:170px}
.album figure{border-radius:10px}
.album-card{display:grid;grid-template-columns:1.2fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);margin-bottom:26px;text-decoration:none;color:inherit}
.album-card img{display:block;width:100%;height:100%;min-height:220px;object-fit:cover}
.album-card .b{padding:22px;display:flex;flex-direction:column;gap:10px;justify-content:center;min-width:0}
.album-card h3{font-size:22px}
.album-card p{color:var(--muted);font-size:15.5px}
@media (max-width:700px){.album-card{grid-template-columns:1fr}.album-card img{min-height:200px;max-height:260px}}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);border:1px solid rgba(233,240,242,.35);background:rgba(8,12,14,.4);color:#E9F0F2;border-radius:999px;width:46px;height:46px;font-size:28px;line-height:1;cursor:pointer}
.lb-nav:hover{background:rgba(233,240,242,.14)}
.lb-nav.prev{left:max(14px,env(safe-area-inset-left,0px))}
.lb-nav.next{right:max(14px,env(safe-area-inset-right,0px))}
.lb-nav[hidden]{display:none}