/* =========================================================
   L'Art au service de l'environnement — feuille de style
   Couleurs principales (modifiables ici, voir le guide) :
   --vert  : vert de l'arbre A.S.E
   --bleu  : bleu marine de L'Art dans la Rue
   --orange: boutons / accents
   ========================================================= */
:root{
  --papier:#EEE5D0;
  --papier-clair:#FBF8F1;
  --encre:#1B1B16;
  --texte-doux:#3A382F;
  --vert:#0B4A36;
  --vert-vif:#0B6B45;
  --vert-clair:#A9D18E;
  --bleu:#0A1570;
  --bleu-ciel:#0172B8;
  --orange:#C8421A;
  --orange-fonce:#A8360F;
  --peche:#F28C5E;
  --largeur-max:1280px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--encre);font-family:'Archivo','Helvetica Neue',Arial,sans-serif;font-size:17px;line-height:1.5;-webkit-text-size-adjust:100%}
img{max-width:100%;display:block}
a{color:var(--orange-fonce)}a:hover{color:#7A260A}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--encre);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:8px;top:8px;color:#fff}
.site{min-height:100vh;display:flex;flex-direction:column;background-image:radial-gradient(rgba(27,27,22,.06) 1px,transparent 1px);background-size:6px 6px;overflow-x:hidden}
main{flex-grow:1}
.wrap{width:100%;max-width:var(--largeur-max);margin:0 auto;padding-left:clamp(20px,5vw,80px);padding-right:clamp(20px,5vw,80px)}
.sec{padding-top:clamp(56px,8vw,96px);padding-bottom:clamp(56px,8vw,96px)}
.pb{padding-bottom:clamp(56px,8vw,96px)}
.g2,.g3,.g4,.g5{display:grid;gap:clamp(16px,2.4vw,32px)}
.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))}.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:center}
.split-13{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(24px,4vw,48px);align-items:start}
.split-75{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,64px);align-items:center}
.split-57{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,64px);align-items:start}
.stack{display:flex;flex-direction:column;gap:20px}
.row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.between{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 32px}
.baseline{align-items:baseline}
/* Typographie */
.h1{margin:0;font-weight:900;font-size:clamp(44px,7vw,96px);line-height:.95;letter-spacing:-.02em;text-transform:uppercase}
.h1 .dirt{display:inline-block;font-size:clamp(34px,5.4vw,80px);letter-spacing:0;line-height:1.05}
.dirt{font-family:'Rubik Dirt','Archivo',sans-serif;font-weight:400;text-transform:none}
.dh{margin:0;font-family:'Rubik Dirt','Archivo',sans-serif;font-weight:400;font-size:clamp(52px,9vw,128px);line-height:.92}
.h2{margin:0;font-weight:900;font-size:clamp(28px,4vw,48px);line-height:1.05;text-transform:uppercase}
.h2.small{font-size:clamp(24px,2.8vw,34px)}
.h3{margin:0;font-weight:900;font-size:clamp(22px,2.2vw,28px);text-transform:uppercase;line-height:1.1}
.lead{margin:0;font-size:clamp(18px,1.6vw,21px);line-height:1.55;max-width:62ch;color:var(--texte-doux)}
.muted{color:var(--texte-doux)}
.kicker{font-weight:700;font-size:15px;letter-spacing:.12em;text-transform:uppercase}
.tag{align-self:flex-start;display:inline-block;padding:8px 16px;font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;transform:rotate(-2deg)}
.photo{display:block;width:100%;object-fit:cover;border:2px solid var(--encre)}
/* En-tête */
.hdr{border-bottom:2px solid var(--encre)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--encre)}.brand:hover{color:var(--encre)}
.logo{width:64px;height:64px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.logo img{width:60px;height:60px;object-fit:contain}
.bname{display:flex;flex-direction:column;line-height:1.05;font-weight:900;font-size:16px;text-transform:uppercase;letter-spacing:.02em}
.navs{display:flex;gap:4px}
.nav{padding:0 16px;min-height:44px;display:flex;align-items:center;flex-shrink:0;text-decoration:none;color:var(--encre);font-weight:700;font-size:16px;border:2px solid transparent;border-radius:999px;white-space:nowrap}
.nav:hover{border-color:var(--encre);color:var(--encre)}
.nav[aria-current="page"]{background:var(--encre);color:var(--papier)}
/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;font-family:inherit;font-weight:700;font-size:17px;text-decoration:none;border:2px solid var(--encre);cursor:pointer;text-align:center;line-height:1.2}
.btn-o{background:var(--orange);color:#fff;border-color:var(--orange)}.btn-o:hover{background:var(--orange-fonce);border-color:var(--orange-fonce);color:#fff}
.btn-g{background:transparent;color:var(--encre)}.btn-g:hover{background:var(--encre);color:var(--papier)}
.btn-l{background:var(--papier);color:var(--encre);border-color:var(--papier)}.btn-l:hover{background:var(--peche);border-color:var(--peche);color:var(--encre)}
.btn-w{background:var(--vert-vif);color:#fff;border-color:var(--vert-vif)}.btn-w:hover{background:#08553A;border-color:#08553A;color:#fff}
.btn-g.on-dark{color:var(--papier);border-color:var(--papier)}.btn-g.on-dark:hover{background:var(--papier);color:var(--encre)}
.pill{min-height:44px;padding:0 18px;border-radius:999px;border:2px solid var(--encre);background:transparent;color:var(--encre);font-family:inherit;font-weight:700;font-size:15px;cursor:pointer;flex-shrink:0;white-space:nowrap}
.pill:hover{background:#D9CDB2}.pill[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);color:#fff}
.pills{display:flex;flex-wrap:wrap;gap:10px}
/* Pied de page */
.ftr{background:var(--encre);color:var(--papier)}
.ftr .wrap{padding-top:64px;padding-bottom:40px;display:flex;flex-direction:column;gap:48px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px}
.fcol{display:flex;flex-direction:column;gap:10px;font-size:16px;line-height:1.4}
.flab{font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.1em;color:var(--vert-clair)}
.flink{color:var(--papier);text-decoration:none}.flink:hover{color:var(--peche)}
.fbar{border-top:1px solid #3A3A33;padding-top:24px;font-size:14px;color:#BDB6A3;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
/* Accueil */
.heroimg{position:relative;height:clamp(340px,44vw,620px)}
.heroimg img{position:absolute;left:24px;top:16px;width:calc(100% - 24px);height:calc(100% - 16px);transform:rotate(2deg);border-width:3px}
.sticker{position:absolute;left:0;bottom:10px;width:clamp(140px,14vw,196px);height:clamp(140px,14vw,196px);border-radius:50%;background:var(--orange);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transform:rotate(-10deg);border:3px solid var(--encre);gap:4px;font-weight:700}
.stat{border-top:2px solid var(--encre);padding-top:20px;display:flex;flex-direction:column;gap:6px}
.statn{font-weight:900;font-size:clamp(36px,4vw,52px);line-height:1;color:var(--vert)}
.card{text-decoration:none;color:var(--encre);display:flex;flex-direction:column;gap:16px}.card:hover{color:var(--encre)}.card:hover .more{color:var(--orange-fonce)}
.card img{height:280px}
.ptile{background:#fff;border:2px solid var(--encre);height:112px;display:flex;align-items:center;justify-content:center;padding:14px}
.ptile img{max-width:100%;max-height:100%;object-fit:contain}
.event-logo{background:#fff;width:clamp(220px,28vw,360px);aspect-ratio:1;display:flex;align-items:center;justify-content:center;transform:rotate(3deg);border:3px solid var(--peche);padding:24px}
.event-logo img{width:100%;height:100%;object-fit:contain}
.dark{background:var(--bleu);color:#fff}
.green{background:var(--vert);color:var(--papier)}
/* Événement */
.eventlogo{background:#fff;width:clamp(120px,14vw,190px);aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:3px solid var(--bleu);flex-shrink:0;padding:10px}
.eventlogo img{width:100%;height:100%;object-fit:contain}
.day{border:2px solid rgba(255,255,255,.85);padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:14px}
.day.last{background:var(--peche);border-color:var(--peche);color:var(--encre)}
.dayh{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-weight:700;font-size:17px}
.dayn{font-family:'Rubik Dirt','Archivo',sans-serif;font-size:44px;color:var(--peche);line-height:1}
.day.last .dayn{color:var(--encre)}
.slot{display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;font-size:16px;line-height:1.45}
.slot b{color:var(--peche);font-weight:700}
.day.last .slot b{color:var(--encre)}
.artist{display:flex;flex-direction:column;gap:10px}
.artist img{width:100%;aspect-ratio:4/5;object-fit:cover;border:2px solid var(--encre)}
.an{font-weight:900;font-size:18px;text-transform:uppercase;line-height:1.2}
.ad{font-size:15px;color:var(--texte-doux);line-height:1.4}
.retour{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);gap:clamp(16px,2.4vw,32px)}
.retour img{height:400px}
.info{display:grid;grid-template-columns:170px minmax(0,1fr);row-gap:14px;column-gap:20px;font-size:18px;line-height:1.45;margin:0}
.info dt{font-weight:700}.info dd{margin:0}
.on-dark dt{color:var(--vert-clair)}
.box{border:2px solid var(--encre);padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:24px}
.box.black{background:var(--encre);color:var(--papier);border-color:var(--encre)}
.fig{margin:0;display:flex;flex-direction:column;gap:10px}
.fig img{aspect-ratio:4/3;height:auto}
.fig b{font-size:16px;line-height:1.3}
.fig span{font-size:14px;color:var(--texte-doux)}
/* Icônes des réseaux sociaux */
.socials{display:flex;flex-wrap:wrap;gap:12px}
.soc{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;border:2px solid var(--papier);color:var(--papier);background:transparent;text-decoration:none;transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .25s ease,transform .2s ease}
.soc svg{width:22px;height:22px;fill:currentColor;display:block}
.soc-fb:hover,.soc-fb:focus-visible{background:#1877F2;border-color:#1877F2;color:#fff;box-shadow:0 0 0 4px rgba(24,119,242,.35),0 0 24px 4px rgba(24,119,242,.75);transform:translateY(-3px) scale(1.08)}
.soc-tt:hover,.soc-tt:focus-visible{background:#000;border-color:#25F4EE;color:#fff;box-shadow:-3px -3px 0 #25F4EE,3px 3px 0 #FE2C55,0 0 22px 3px rgba(254,44,85,.55);transform:translateY(-3px) scale(1.08)}
.soc:focus-visible{outline:3px solid var(--peche);outline-offset:4px}
/* Galerie */
.trust{display:flex;flex-wrap:wrap;gap:10px}
.tchip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border:2px solid var(--encre);border-radius:999px;background:var(--papier-clair);font-weight:700;font-size:15px}
.work{display:flex;flex-direction:column;gap:10px}
.frame{position:relative;background:radial-gradient(ellipse at 50% 30%,#FCF9F0 0%,#F1E8D4 100%);border:2px solid var(--encre);aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;padding:18px;overflow:hidden;transition:box-shadow .2s ease,transform .2s ease}
.frame::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 38px rgba(27,27,22,.07)}
.frame img{position:absolute;top:18px;left:18px;width:calc(100% - 36px);height:calc(100% - 36px);object-fit:contain;object-position:center;filter:drop-shadow(0 8px 12px rgba(27,27,22,.32)) drop-shadow(0 1px 2px rgba(27,27,22,.35));animation:fondu .45s ease backwards;transition:transform .35s ease}
.frame.big{aspect-ratio:4/3;padding:22px}
.frame.big img{top:22px;left:22px;width:calc(100% - 44px);height:calc(100% - 44px)}
@media (hover:hover){.work:hover .frame{box-shadow:6px 6px 0 var(--encre);transform:translate(-2px,-2px)}.work:hover .frame img{transform:scale(1.025)}}
@keyframes fondu{from{opacity:0}to{opacity:1}}
.stbadge{position:absolute;top:10px;right:10px;background:var(--encre);color:#fff;padding:6px 12px;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.work.sold .frame img{opacity:.55}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:4px 8px;border:1.5px solid var(--encre);background:var(--papier-clair)}
.chip.eco{background:var(--vert);border-color:var(--vert);color:#fff}
.wt{font-weight:900;font-size:19px;line-height:1.2}
.wa{font-weight:700;font-size:16px;color:var(--bleu)}
.wm{font-size:15px;line-height:1.45;color:var(--texte-doux)}
.band{font-size:16px;font-weight:900;color:var(--orange-fonce)}
.filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:14px;align-items:end;padding:20px;border:2px solid var(--encre);background:var(--papier-clair)}
.fsel{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.06em}
.fsel select{min-height:48px;padding:0 12px;border:2px solid var(--encre);background:#fff;color:var(--encre);font-family:inherit;font-size:16px;font-weight:500;text-transform:none;letter-spacing:0;border-radius:0;width:100%}
.agroup{display:flex;flex-direction:column;gap:24px;padding-top:40px;border-top:2px solid var(--encre)}
.ahead{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;align-items:center}
.ahead img{width:96px;height:96px;border-radius:50%;object-fit:cover;border:2px solid var(--encre)}
.aname{font-weight:900;font-size:clamp(22px,2.4vw,28px);text-transform:uppercase;line-height:1.1}
.step{border-top:3px solid var(--encre);padding-top:20px;display:flex;flex-direction:column;gap:10px}
.green .step{border-color:var(--papier)}
.stepn{font-family:'Rubik Dirt','Archivo',sans-serif;font-size:52px;line-height:1;color:var(--orange)}
.green .stepn{color:var(--peche)}
.empty{border:2px dashed var(--encre);padding:32px;text-align:center;font-size:18px}
/* Fenêtre œuvre */
dialog.oeuvre{padding:0;border:3px solid var(--encre);background:var(--papier);color:var(--encre);width:min(1100px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto}
dialog.oeuvre::backdrop{background:rgba(27,27,22,.72)}
.dlg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.dimg{background:radial-gradient(ellipse at 50% 35%,#FCF9F0 0%,#EFE5CF 100%);display:flex;flex-direction:column;justify-content:center;gap:16px;padding:24px;border-right:2px solid var(--encre)}
.dimg > img{display:block;width:auto;max-width:100%;height:auto;max-height:52vh;margin:0 auto;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(27,27,22,.35)) drop-shadow(0 1px 2px rgba(27,27,22,.35))}
.scale{border-top:1.5px solid var(--encre);padding-top:12px;display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.scale svg{width:100%;height:150px;display:block}
.dbody{padding:clamp(20px,3vw,36px);display:flex;flex-direction:column;gap:14px;position:relative}
.close{position:sticky;top:10px;float:right;margin:10px 10px -54px 0;z-index:3;width:44px;height:44px;border-radius:50%;border:2px solid var(--encre);background:var(--papier);font-size:22px;font-weight:700;cursor:pointer;font-family:inherit;color:var(--encre)}
.close:hover{background:var(--encre);color:var(--papier)}
.meta{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px 16px;margin:0;font-size:16px;line-height:1.45}
.meta dt{font-weight:700}.meta dd{margin:0}
/* Ateliers */
.sess{border:2px solid var(--encre);padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:10px}
.sessd{font-family:'Rubik Dirt','Archivo',sans-serif;font-size:40px;color:var(--orange);line-height:1}
.fld{display:flex;flex-direction:column;gap:8px;font-weight:700;font-size:16px}
.inp{min-height:52px;padding:0 16px;border:2px solid var(--papier);background:var(--vert);color:#fff;font-family:inherit;font-size:17px;border-radius:0;width:100%}
.inp:invalid:not(:placeholder-shown){border-color:var(--peche)}
.note{font-size:15px;color:#D6E6D2}
/* Équipe et éditions passées */
.member{border:2px solid var(--encre);background:var(--papier-clair);padding:20px 22px;display:flex;flex-direction:column;gap:6px}
.mn{font-weight:900;font-size:20px;text-transform:uppercase;line-height:1.15}
.mr{font-size:16px;color:var(--texte-doux);line-height:1.35}
.ed{border:2px solid var(--encre);display:flex;flex-direction:column;background:var(--papier-clair)}
.edhead{background:var(--bleu);color:#fff;padding:16px 18px;display:flex;flex-direction:column;gap:2px}
.edyear{font-weight:900;font-size:34px;line-height:1}
.edname{font-size:15px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.edlist{list-style:none;margin:0;padding:14px 18px 18px;display:flex;flex-direction:column;gap:12px}
.edlist li{display:flex;flex-direction:column;gap:2px;line-height:1.3}
.edlist b{font-size:16px}
.edlist span{font-size:14px;color:var(--texte-doux)}
/* Résidences */
.ph{background-color:#D9CDB2;background-image:repeating-linear-gradient(135deg,rgba(27,27,22,.08) 0 2px,transparent 2px 14px);color:#4A4638;display:flex;align-items:center;justify-content:center;text-align:center;font-size:15px;font-weight:500;border:2px solid var(--encre)}
/* Adaptation tablette / téléphone */
@media (max-width:1024px){
  .g5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g4{grid-template-columns:repeat(3,minmax(0,1fr))}
  .retour{grid-template-columns:repeat(2,minmax(0,1fr))}.retour > div{grid-column:1 / -1}
  .filters{grid-template-columns:repeat(2,minmax(0,1fr))}.filters .btn{grid-column:1 / -1}
}
@media (max-width:900px){
  .split,.split-13,.split-75,.split-57{grid-template-columns:minmax(0,1fr)}
  .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g2{grid-template-columns:minmax(0,1fr)}
  .navs{width:100%;flex-wrap:wrap;gap:6px}
  .nav{padding:0 12px;min-height:40px;font-size:15px;border-color:rgba(27,27,22,.25)}
  .pills{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
  .dlg{grid-template-columns:minmax(0,1fr)}
  .dimg{border-right:0;border-bottom:2px solid var(--encre)}
  .dimg > img{max-height:38vh}
}
@media (max-width:640px){
  .g3{grid-template-columns:minmax(0,1fr)}
  .g5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g4.works{gap:24px 14px}
  .retour{grid-template-columns:minmax(0,1fr)}
  .retour img{height:260px}
  .filters{grid-template-columns:minmax(0,1fr);padding:16px}
  .row .btn,.work .btn,.dbody .btn,form .btn{width:100%}
  .work .btn{padding:0 10px;font-size:15px}
  .bname{font-size:14px}
  .logo{width:52px;height:52px}.logo img{width:48px;height:48px}
  .info{grid-template-columns:minmax(0,1fr);row-gap:4px}.info dd{margin-bottom:12px}
  .slot{grid-template-columns:minmax(0,1fr);gap:2px}
  .ahead{grid-template-columns:72px minmax(0,1fr);gap:14px}.ahead img{width:72px;height:72px}
  .wt{font-size:17px}.wm{font-size:14px}
  .card img{height:220px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.soc{transition:none}.soc:hover,.soc:focus-visible{transform:none}.frame img{animation:none;transition:none}.work:hover .frame{transform:none}.work:hover .frame img{transform:none}}