/* Albums photos ARSEREM : même univers que le site (Inter, vert-or-rouge du Sénégal), en mouvement. */
:root{--vert:#00853f;--vert-f:#04512a;--vert-n:#032d18;--or:#fdef42;--ocre:#e8b923;--rouge:#e31b23;--encre:#0f1a14;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,system-ui,sans-serif;color:#fff;background:var(--vert-n);min-height:100vh;line-height:1.55;overflow-x:hidden}
a{color:inherit}
.fond{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.fond span{position:absolute;border-radius:50%;filter:blur(80px);animation:derive 20s ease-in-out infinite alternate}
.fond span:nth-child(1){width:600px;height:600px;background:var(--vert);opacity:.55;top:-200px;left:-180px}
.fond span:nth-child(2){width:440px;height:440px;background:#c9b400;opacity:.25;top:35%;right:-180px;animation-duration:24s}
.fond span:nth-child(3){width:320px;height:320px;background:var(--rouge);opacity:.2;bottom:-100px;left:25%;animation-duration:28s}
@keyframes derive{to{transform:translate(90px,120px) scale(1.15)}}
@keyframes monte{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

.barre{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(16px,4vw,40px);background:rgba(3,45,24,.72);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}
.marque{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;letter-spacing:.06em}
.marque img{width:40px;height:40px;border-radius:12px;background:#fff;padding:3px;object-fit:contain}
.barre nav{display:flex;gap:4px;flex-wrap:wrap}
.barre nav a{padding:8px 14px;border-radius:99px;text-decoration:none;font-weight:600;font-size:.9rem;opacity:.85;transition:background .25s,opacity .25s}
.barre nav a:hover,.barre nav a.on{background:rgba(255,255,255,.12);opacity:1}
.barre nav a.adh{background:var(--or);color:var(--encre);opacity:1}

.tete{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:clamp(40px,8vw,90px) clamp(16px,4vw,40px) 24px}
.surtitre{font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--or);animation:monte .8s .1s var(--ease) both}
h1{font-size:clamp(2.4rem,7vw,4.8rem);font-weight:800;letter-spacing:-.035em;line-height:1.02;margin:12px 0 16px;max-width:1000px}
h1 .l{display:inline-block;opacity:0;transform:translateY(60%) rotate(6deg);animation:lettre .8s var(--ease) forwards;animation-delay:calc(.15s + var(--i)*24ms)}
@keyframes lettre{to{opacity:1;transform:none}}
.chapo{max-width:680px;opacity:.85;font-size:1.05rem;animation:monte 1s .45s var(--ease) both}

.annees{position:relative;z-index:1;max-width:1180px;margin:0 auto 26px;padding:0 clamp(16px,4vw,40px);display:flex;gap:8px;flex-wrap:wrap;animation:monte 1s .6s var(--ease) both}
.annees button{padding:8px 16px;border-radius:99px;border:1.5px solid rgba(255,255,255,.2);background:transparent;color:#fff;font:inherit;font-weight:600;font-size:.88rem;cursor:pointer;transition:background .25s,border-color .25s,transform .25s var(--ease)}
.annees button:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.5)}
.annees button.on{background:#fff;color:var(--vert-n);border-color:#fff}

.cartes{position:relative;z-index:1;max-width:1180px;margin:0 auto 80px;padding:0 clamp(16px,4vw,40px);display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:34px 26px}
.carte{text-decoration:none;display:flex;flex-direction:column;gap:16px;opacity:0;animation:monte .9s var(--ease) forwards;animation-delay:calc(.5s + var(--i)*70ms)}
.carte.cache{display:none}
.pile{position:relative;display:block;aspect-ratio:4/3;margin:10px 10px 0}
.pile i{position:absolute;inset:0;border-radius:18px;background:#0b3b22 center/cover;box-shadow:0 18px 40px -20px rgba(0,0,0,.7);transition:transform .7s var(--ease)}
.pile i:nth-child(1){transform:rotate(-6deg) translate(-8px,4px)}
.pile i:nth-child(2){transform:rotate(4deg) translate(8px,-2px)}
.pile i:nth-child(3){transform:rotate(-2deg)}
.pile img{position:relative;width:100%;height:100%;object-fit:cover;border-radius:18px;display:block;box-shadow:0 30px 60px -28px rgba(0,0,0,.85);transition:transform .7s var(--ease)}
.carte:hover .pile i:nth-child(1){transform:rotate(-13deg) translate(-34px,10px)}
.carte:hover .pile i:nth-child(2){transform:rotate(11deg) translate(34px,-6px)}
.carte:hover .pile i:nth-child(3){transform:rotate(-4deg) translate(0,-16px)}
.carte:hover .pile img{transform:translateY(-8px) scale(1.02)}
.carte-txt{display:flex;flex-direction:column;gap:3px;padding:0 6px}
.carte-txt small{color:var(--or);font-weight:600;font-size:.8rem;letter-spacing:.04em}
.carte-txt b{font-size:1.12rem;line-height:1.3}
.carte-txt em{font-style:normal;opacity:.65;font-size:.85rem}
.vide{opacity:.75}

.tete-album{position:relative;z-index:1;min-height:min(70vh,560px);display:flex;align-items:flex-end;overflow:hidden;margin-bottom:34px}
.tete-fond{position:absolute;inset:-6%;background:center/cover;filter:saturate(1.1);animation:kenburns 26s ease-in-out infinite alternate}
.tete-fond::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,45,24,.25) 0%,rgba(3,45,24,.55) 45%,var(--vert-n) 100%)}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.12) translate(-2%,-1%)}}
.tete-in{position:relative;width:100%;max-width:1180px;margin:0 auto;padding:60px clamp(16px,4vw,40px) 10px}
.retour{display:inline-block;margin-bottom:22px;text-decoration:none;font-weight:600;opacity:.85;padding:7px 14px;border-radius:99px;background:rgba(0,0,0,.25);backdrop-filter:blur(8px);animation:monte .7s var(--ease) both}
.retour:hover{opacity:1}
.nb{opacity:.8;margin-top:10px;animation:monte 1s .6s var(--ease) both}
.nb b{color:var(--or)}

.mur{position:relative;z-index:1;max-width:1260px;margin:0 auto 90px;padding:0 clamp(12px,3vw,32px);columns:4 260px;column-gap:14px}
.ph{position:relative;display:block;margin-bottom:14px;break-inside:avoid;border-radius:14px;overflow:hidden;background:#0b3b22;opacity:0;transform:translateY(30px) scale(.97);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i)*30ms)}
.ph.vu{opacity:1;transform:none}
.ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease),filter .5s}
.ph:hover img{transform:scale(1.06)}
.ph span{position:absolute;left:0;right:0;bottom:0;padding:24px 12px 10px;font-size:.82rem;background:linear-gradient(transparent,rgba(0,0,0,.7));opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s var(--ease)}
.ph:hover span{opacity:1;transform:none}

.visionneuse{position:fixed;inset:0;z-index:50;background:rgba(2,20,11,.94);backdrop-filter:blur(10px);display:grid;grid-template-columns:64px 1fr 64px;align-items:center;animation:apparait .3s ease}
.visionneuse[hidden]{display:none}
@keyframes apparait{from{opacity:0}}
.visionneuse figure{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0;padding:16px 0}
.visionneuse img{max-width:100%;max-height:82vh;border-radius:10px;box-shadow:0 40px 80px -30px #000;animation:zoom .45s var(--ease)}
@keyframes zoom{from{opacity:0;transform:scale(.94)}}
.visionneuse figcaption{opacity:.85;font-size:.92rem;text-align:center;max-width:720px}
.visionneuse button{background:rgba(255,255,255,.1);border:0;color:#fff;width:48px;height:48px;border-radius:50%;font-size:1.8rem;line-height:1;cursor:pointer;justify-self:center;transition:background .25s,transform .25s var(--ease)}
.visionneuse button:hover{background:var(--or);color:var(--encre);transform:scale(1.08)}
.v-fermer{position:absolute;top:16px;right:16px}
.v-compte{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);font-size:.85rem;opacity:.7}

.pied{position:relative;z-index:1;text-align:center;padding:26px 16px 40px;opacity:.75;font-size:.85rem}
.drapeau{display:flex;width:90px;height:4px;margin:0 auto 14px;border-radius:4px;overflow:hidden}
.drapeau i{flex:1}.drapeau i:nth-child(1){background:var(--vert)}.drapeau i:nth-child(2){background:var(--or)}.drapeau i:nth-child(3){background:var(--rouge)}

/* Photos réservées : visiteur non connecté (les images reçues sont déjà floutées par le serveur) */
.verrou .ph img,.verrou .pile img,.verrou .pile i{filter:blur(8px) saturate(.85) brightness(.9)}
.verrou .ph{cursor:default}.verrou .ph:hover img{transform:none}.verrou .ph span{display:none}
.verrou .pile::after{content:"Réservé aux membres";position:absolute;left:12px;top:12px;z-index:2;padding:5px 11px;border-radius:99px;background:rgba(3,45,24,.78);backdrop-filter:blur(6px);font-size:.72rem;font-weight:700;letter-spacing:.04em}
.voile{position:absolute;inset:0;z-index:5;pointer-events:none}
.verrou .mur{min-height:460px}.mur .voile-in{margin-top:clamp(20px,6vh,70px)}
.voile-in{position:sticky;top:calc(50vh - 130px);width:min(100%,430px);margin:min(22vh,200px) auto 0;padding:28px 26px 24px;text-align:center;pointer-events:auto;
  background:rgba(3,45,24,.82);backdrop-filter:blur(18px) saturate(1.2);border:1px solid rgba(255,255,255,.14);border-radius:24px;box-shadow:0 40px 90px -30px rgba(0,0,0,.85);animation:monte .9s .7s var(--ease) both}
.voile-in b{display:block;font-size:1.35rem;letter-spacing:-.01em;line-height:1.25;margin:12px 0 6px}
.voile-in p{opacity:.8;font-size:.95rem;margin-bottom:18px}
.cadenas{display:inline-grid;place-items:center;width:62px;height:62px;border-radius:50%;background:var(--or);color:var(--encre);box-shadow:0 0 0 0 rgba(253,239,66,.5);animation:pouls 2.4s ease-out infinite}
@keyframes pouls{70%{box-shadow:0 0 0 18px rgba(253,239,66,0)}100%{box-shadow:0 0 0 0 rgba(253,239,66,0)}}
.voile-btn{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.voile-btn a{padding:11px 22px;border-radius:99px;text-decoration:none;font-weight:700;transition:transform .25s var(--ease)}
.voile-btn a:hover{transform:translateY(-2px)}
.b-or{background:var(--or);color:var(--encre)}.b-clair{background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.35)}

@media (max-width:640px){
  .barre nav a:not(.adh):not(.on){display:none}
  .mur{columns:2 140px;column-gap:8px}.ph{margin-bottom:8px;border-radius:10px}
  .visionneuse{grid-template-columns:44px 1fr 44px}.visionneuse button{width:38px;height:38px;font-size:1.4rem}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;transition-duration:.01ms !important}.ph,.carte,h1 .l{opacity:1 !important;transform:none !important}}