/* Galeries clients — reprend la charte du portfolio (noir, or, Playfair Display + Poppins) */
:root{
  --black:#0d0d0d;
  --dark:#161616;
  --line:#262626;
  --gold:#f5b400;
  --white:#ffffff;
  --gray:#b3b3b3;
  --font-title:'Playfair Display', Georgia, serif;
  --font-body:'Poppins', 'Segoe UI', Arial, sans-serif;
  --gutter:max(16px, env(safe-area-inset-left, 0px));
  color-scheme:dark;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);background:var(--black);color:var(--white);line-height:1.6;min-height:100vh;display:flex;flex-direction:column}
body.sans-defilement{overflow:hidden}
main{flex:1}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
h1,h2{font-family:var(--font-title);font-weight:700;line-height:1.15;text-wrap:balance}
.logo-clair{filter:invert(1)} /* logo noir sur fond transparent : passé en blanc sur fond noir */
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

.container{max-width:1200px;margin:0 auto;padding:0 var(--gutter)}
.section-tag{color:var(--gold);letter-spacing:3px;text-transform:uppercase;font-size:12px;font-weight:600;margin-bottom:12px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 30px;border-radius:4px;font-weight:600;font-size:13px;letter-spacing:1px;text-transform:uppercase;text-decoration:none;transition:.3s;cursor:pointer;border:2px solid transparent}
.btn-primary{background:var(--gold);color:var(--black)}
.btn-primary:hover{background:transparent;color:var(--gold);border-color:var(--gold)}
.btn-outline{border-color:#444;color:var(--white)}
.btn-outline:hover{border-color:var(--white)}
.btn:disabled{opacity:.6;cursor:wait}
.btn svg{width:18px;height:18px}

.bandeau-demo{background:#2a2200;color:#ffe08a;font-size:13px;text-align:center;padding:8px var(--gutter)}
.bandeau-demo code{background:rgba(0,0,0,.35);padding:1px 6px;border-radius:3px}

/* ---------- Page d'accueil ---------- */
.entete{border-bottom:1px solid var(--line)}
.entete-interieur{display:flex;align-items:center;justify-content:space-between;gap:16px;height:76px}
.entete-logo img{height:38px;width:auto}
.entete-lien{font-size:13px;letter-spacing:.5px;color:var(--gray);text-decoration:none;transition:.3s}
.entete-lien:hover{color:var(--gold)}

.intro{padding-top:clamp(48px,8vw,90px);padding-bottom:clamp(32px,5vw,56px);text-align:center}
.intro h1{font-size:clamp(32px,5vw,52px);margin-bottom:14px}
.intro p:last-child{color:var(--gray);max-width:540px;margin:0 auto}

.collections{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:40px 28px}
.carte{display:block;text-decoration:none}
.carte-image{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:6px;background:var(--dark)}
.carte-image img{width:100%;height:100%;object-fit:cover;object-position:center 30%;transition:transform .7s ease}
.carte:hover .carte-image img{transform:scale(1.05)}
.carte h2{font-size:22px;margin-top:16px;transition:color .3s}
.carte:hover h2{color:var(--gold)}
.carte p{color:var(--gray);font-size:13px;letter-spacing:.5px;margin-top:4px}
.carte-cadenas{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;background:rgba(13,13,13,.75);display:grid;place-items:center;color:var(--gold)}
.carte-cadenas svg{width:17px;height:17px}
.carte-attente{aspect-ratio:3/2;border-radius:6px;background:linear-gradient(100deg,var(--dark) 40%,#1f1f1f 50%,var(--dark) 60%) 0 0/200% 100%;animation:reflet 1.4s linear infinite}
@keyframes reflet{to{background-position:-200% 0}}
.note-privee{text-align:center;color:var(--gray);font-size:13px;margin:56px auto 0;max-width:520px}

.etat{grid-column:1/-1;text-align:center;color:var(--gray);padding:60px 0}
.etat a{color:var(--gold)}

.pied{text-align:center;color:#8a8a8a;font-size:12px;padding:40px var(--gutter);margin-top:72px;border-top:1px solid var(--line)}
.pied a{color:var(--gray);transition:.3s}
.pied a:hover{color:var(--gold)}

/* ---------- Page galerie ---------- */
.retour{position:absolute;top:22px;left:var(--gutter);z-index:5}
.retour img{height:34px;width:auto}

.chargement{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;color:var(--gray);font-size:14px}
.soleil{width:46px;height:23px;border:2px solid var(--gold);border-bottom:0;border-radius:46px 46px 0 0;animation:lever 1.6s ease-in-out infinite alternate}
@keyframes lever{from{opacity:.3;transform:translateY(6px)}to{opacity:1;transform:none}}

.heros{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;justify-content:center;text-align:center;overflow:hidden;padding:120px var(--gutter) clamp(56px,10vh,110px)}
.heros-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;z-index:-2;animation:zoom 14s ease-out both}
.heros::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(10,10,10,.45),rgba(10,10,10,.1) 30%,rgba(10,10,10,.55) 60%,rgba(10,10,10,.92))}
.heros .section-tag{text-shadow:0 1px 8px rgba(0,0,0,.6)}
@keyframes zoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.heros-contenu{max-width:820px}
.heros h1{font-size:clamp(36px,7vw,72px);margin-bottom:12px}
.heros-compte{color:var(--gray);font-size:14px;margin-bottom:28px;letter-spacing:.5px}

.verrou{margin:22px auto 0;max-width:440px;text-align:left}
.verrou label{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--gray);margin-bottom:10px;justify-content:center}
.verrou label svg{color:var(--gold);width:17px;height:17px}
.verrou-ligne{display:flex;gap:8px}
.verrou input{flex:1;min-width:0;background:rgba(13,13,13,.75);border:1px solid #444;border-radius:4px;padding:12px 16px;color:var(--white);font:inherit;font-size:15px;letter-spacing:2px;text-transform:uppercase;outline:none;transition:border-color .3s}
.verrou input::placeholder{letter-spacing:.5px;text-transform:none;color:#888}
.verrou input:focus{border-color:var(--gold)}
.verrou-erreur{color:#ff8a7a;font-size:13px;margin-top:10px;text-align:center}

.barre{position:sticky;top:0;z-index:20;background:rgba(13,13,13,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
.barre.collee{background:rgba(13,13,13,.94);border-color:var(--line)}
.barre-interieur{max-width:1600px;margin:0 auto;padding:0 var(--gutter);min-height:64px;display:flex;align-items:center;gap:20px}
.barre-logo{display:none}
.barre-logo img{height:28px;width:auto}
.barre.collee .barre-logo{display:block}
.barre-titre{font-family:var(--font-title);font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.onglets{display:flex;gap:4px;flex:1;justify-content:center;overflow-x:auto;scrollbar-width:none}
.onglets::-webkit-scrollbar{display:none}
.onglets button{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:30px;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--gray);white-space:nowrap;transition:.25s;border:1px solid transparent}
.onglets button small{font-size:11px;color:#777;letter-spacing:0}
.onglets button:hover{color:var(--white)}
.onglets button[aria-pressed="true"]{color:var(--black);background:var(--gold)}
.onglets button[aria-pressed="true"] small{color:rgba(13,13,13,.65)}
.onglet-favoris svg{width:15px;height:15px}
.barre-actions{display:flex;gap:4px}
.bouton-icone{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:4px;font-size:12px;letter-spacing:.5px;color:var(--gray);text-decoration:none;transition:.25s}
.bouton-icone:hover{color:var(--gold);background:rgba(255,255,255,.05)}

.photos{max-width:1600px;margin:0 auto;padding:var(--ecart,8px) var(--gutter) 0;display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--ecart,8px);min-height:50vh;align-content:flex-start}
.vignette{position:relative;overflow:hidden;background:var(--dark);flex:none}
.vignette-ouvrir{display:block;width:100%;height:100%;cursor:zoom-in}
.vignette img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease,transform .6s ease}
.vignette.chargee img{opacity:1}
.vignette:hover img{transform:scale(1.03)}
.vignette-actions{position:absolute;right:6px;bottom:6px;display:flex;gap:4px;opacity:0;transition:opacity .25s}
.vignette:hover .vignette-actions,.vignette:focus-within .vignette-actions{opacity:1}
.vignette-actions>*{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:rgba(13,13,13,.65);color:var(--white);transition:.2s}
.vignette-actions>*:hover{background:rgba(13,13,13,.9);color:var(--gold)}
.vignette-actions svg{width:18px;height:18px}
.bouton-coeur[aria-pressed="true"] svg{fill:var(--gold);stroke:var(--gold)}
.vignette:has(.bouton-coeur[aria-pressed="true"]) .vignette-actions{opacity:1}
.vignette:has(.bouton-coeur[aria-pressed="true"]) .bouton-dl{display:none}
.vignette:hover .bouton-dl{display:grid!important}
@media (hover:none){.vignette-actions{opacity:1}.vignette-actions .bouton-dl{display:none}}

.selection{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:18px;background:rgba(22,22,22,.96);border:1px solid var(--line);border-radius:50px;padding:8px 8px 8px 24px;box-shadow:0 10px 40px rgba(0,0,0,.5);font-size:14px;white-space:nowrap;max-width:calc(100% - 32px)}
.selection .btn{border-radius:40px;padding:10px 20px;font-size:12px}

/* Visionneuse */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(8,8,8,.97);display:flex;flex-direction:column;touch-action:pan-y}
.lb-haut{display:flex;align-items:center;justify-content:space-between;padding:10px var(--gutter);min-height:60px}
.lb-compteur{font-size:13px;color:var(--gray);letter-spacing:1px}
.lb-actions{display:flex;gap:4px;align-items:center}
.lb-actions .bouton-coeur{width:42px;height:42px;display:grid;place-items:center;border-radius:4px;color:var(--gray)}
.lb-actions .bouton-coeur:hover{color:var(--gold)}
.lb-actions svg{width:22px;height:22px}
.lb-scene{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 clamp(8px,6vw,90px) 24px}
.lb-scene img{max-width:100%;max-height:100%;object-fit:contain;opacity:0;transition:opacity .35s;user-select:none;-webkit-user-drag:none}
.lb-scene img.prete{opacity:1}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;display:grid;place-items:center;border-radius:50%;color:var(--white);background:rgba(255,255,255,.06);transition:.25s}
.lb-nav:hover{background:rgba(255,255,255,.14);color:var(--gold)}
.lb-nav svg{width:26px;height:26px}
.lb-prec{left:max(12px, env(safe-area-inset-left, 0px))}
.lb-suiv{right:max(12px, env(safe-area-inset-right, 0px))}

/* Fenêtre d'envoi de la sélection */
.envoi{margin:auto;width:min(480px,calc(100% - 32px));background:var(--dark);color:var(--white);border:1px solid var(--line);border-radius:8px;padding:28px}
.envoi::backdrop{background:rgba(0,0,0,.7)}
.envoi h2{font-size:26px;margin-bottom:8px}
.envoi p{color:var(--gray);font-size:14px;margin-bottom:20px}
.envoi label{display:block;font-size:13px;color:var(--gray);margin-bottom:14px}
.envoi input,.envoi textarea{display:block;width:100%;margin-top:6px;background:var(--black);border:1px solid var(--line);border-radius:6px;padding:12px 14px;color:var(--white);font:inherit;font-size:14px;outline:none;resize:vertical}
.envoi input:focus,.envoi textarea:focus{border-color:var(--gold)}
.envoi-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}
.envoi-wa{display:block;text-align:center;margin-top:18px;font-size:13px;color:var(--gold)}

.introuvable{min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:120px var(--gutter) 40px}
.introuvable h1{font-size:clamp(28px,4vw,40px)}
.introuvable p{color:var(--gray);margin-bottom:10px}

.toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%,20px);z-index:200;background:var(--white);color:var(--black);font-size:14px;padding:12px 20px;border-radius:6px;opacity:0;pointer-events:none;transition:.3s;max-width:calc(100% - 32px);text-align:center}
.toast.visible{opacity:1;transform:translate(-50%,0)}

@media (max-width:900px){
  .barre-titre,.barre.collee .barre-logo{display:none}
  .onglets{justify-content:flex-start}
  .bouton-icone span{display:none}
}
@media (max-width:600px){
  .barre-interieur{gap:8px;min-height:56px}
  .lb-nav{display:none}
  .lb-scene{padding:0 0 16px}
  .retour img{height:28px}
  .vignette-actions{right:4px;bottom:4px}
  .vignette-actions>*{width:30px;height:30px}
  .vignette-actions svg{width:16px;height:16px}
  .onglets button{padding:7px 11px}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}