/* ============ MOVWED — Charte globale ============ */
:root { --bg:#ffffff; --text:#111; --line:#e6e6e6; --shadow:0 10px 24px rgba(0,0,0,.08); }
*{ box-sizing:border-box } html,body{ margin:0; padding:0 }
body{
  font-family:"Didot","Didot LT STD","Bodoni MT","Times New Roman",serif;
  color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* ============ TOPBAR (logo + hamburger à droite) ============ */
.topbar{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  height:64px; padding:0 16px; background:transparent; gap:12px;
}
.brand{ font-weight:700; font-size:26px; letter-spacing:5px; color:#000; white-space:nowrap; flex:0 0 auto; }

#mw-menu-toggle{
  display:inline-flex; flex:0 0 auto; flex-direction:column; gap:6px;
  width:32px; height:24px; padding:0; border:0; background:transparent; cursor:pointer;
}
#mw-menu-toggle span{ display:block; height:2px; width:100%; background:#000 }

.menu{
  position:absolute; right:16px; top:64px;
  background:#fff; border:1px solid #eee; border-radius:10px; box-shadow:var(--shadow);
  padding:10px 14px; min-width:180px;
}
.menu a{ display:block; padding:10px 0; text-decoration:none; color:#000; font-size:16px }
.menu a:hover{ text-decoration:underline }

@media (min-width:900px){
  #mw-menu-toggle{ display:none }
  #mw-menu{ display:flex !important; position:static; background:transparent; border:0; box-shadow:none; gap:28px; padding:0; min-width:unset }
  #mw-menu a{ display:inline-block; padding:0 }
}

/* iPhone Pro Max & co (jusqu’à 430 px) */
@media (max-width:430px){
  .topbar{ padding:0 14px; height:60px }
  .brand{ font-size:24px; letter-spacing:4px }
  #mw-menu-toggle{ width:30px; height:22px; gap:5px }
  .menu{ right:14px; top:60px }
}

/* Petits écrans (≤375 px) */
@media (max-width:375px){
  .brand{ font-size:22px; letter-spacing:3px }
  .menu{ min-width:160px }
}

/* ============ HERO (fond unique) ============ */
.hero{
  position:relative; min-height:72vh;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:url("photo-accueil.jpg") center/cover no-repeat;
}
.hero-text{
  background:rgba(255,255,255,.75);
  padding:40px 28px; border-radius:16px; box-shadow:0 8px 25px rgba(0,0,0,.08);
  max-width:700px; margin:0 16px; animation:fadeUp 1.1s ease-out both;
}
.hero-text h1{ margin:0 0 .4em; font-size:40px; font-weight:600; letter-spacing:.5px; color:#000 }
.hero-text h2{ margin:0; font-size:18px; font-weight:400; color:#333 }

/* ===== HERO compact : tout visible sans scroll sur mobile ===== */
.hero.hero-compact{
  min-height:100svh; padding:72px 16px 40px;
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px;
}

/* ============ Upload (sur le même fond, carte blanche) ============ */
.upload-box{
  background:#fff; color:#000;
  width:100%; max-width:820px; margin:18px 16px 28px; padding:20px;
  border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow);
}
.upload-box h3{ margin:0 0 10px; font-size:26px; font-weight:600 }
.format-note{ margin:4px 0 14px; color:#666; font-style:italic; font-size:14px }
.input-message{ width:100%; border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:16px; margin-bottom:10px }
.input-file{ width:100%; border:1px dashed #bbb; border-radius:10px; padding:10px 12px; font-size:16px; background:#fff }
.btn{
  width:100%; margin-top:12px; padding:12px 14px; background:#000; color:#fff;
  border:0; border-radius:8px; font-size:16px; cursor:pointer;
  transition:transform .2s, box-shadow .2s, background .2s, color .2s;
}
.btn:hover{ background:#fff; color:#000; border:1px solid #000; box-shadow:0 4px 14px rgba(0,0,0,.15) }
.btn:active{ transform:translateY(1px) }
.status{ color:#444; font-size:14px; margin-top:8px }

/* ============ Footer (fixe, une seule ligne) ============ */
.foot{
  position:fixed; bottom:0; left:0; right:0;
  background:transparent; padding:8px 12px; font-size:12px; color:#777;
  white-space:nowrap; text-align:center; pointer-events:none;
}
.hero.hero-compact{ padding-bottom:52px } /* éviter que le footer masque le contenu */

/* ============ Responsive contenus ============ */
@media (max-width:430px){
  .hero-text{ padding:18px 16px; max-width:360px }
  .hero-text h1{ font-size:clamp(22px,6vw,26px) }
  .hero-text h2{ font-size:clamp(13px,3.8vw,16px) }
  .upload-box{ padding:14px 14px; margin:0; max-width:360px; border-radius:14px }
  .format-note{ font-size:12px }
  .btn{ padding:10px 12px; font-size:15px }
}
@media (max-width:375px){
  .hero-text{ max-width:320px }
  .upload-box{ max-width:320px }
}

/* ============ Galerie & Admin (stylés, invariants) ============ */
.gallery-page,.gallery-wrap,main.gallery,.galerie,.galerie-wrap{ padding:100px 20px 60px; max-width:1200px; margin:0 auto }
.gallery-page h1,.gallery-wrap h1,main.gallery h1,.galerie h1,.galerie-wrap h1{ font-size:32px; margin:0 0 10px; font-weight:600 }
.gallery-grid,.grid,.list-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px }
.gallery-grid .item,.grid .item,.list-grid .item,.gallery-grid figure,.grid figure,.list-grid figure,.card-media,.media-item{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.06);
  transition:transform .15s, box-shadow .15s;
}
.gallery-grid .item:hover,.grid .item:hover,.list-grid .item:hover,.card-media:hover,.media-item:hover{
  transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.10)
}
.gallery-grid img,.grid img,.list-grid img,.gallery-grid video,.grid video,.list-grid video{ width:100%; height:auto; display:block }

.admin,.admin-page,main.admin,#admin{ padding:100px 20px 60px; max-width:1100px; margin:0 auto }
.admin h1,.admin-page h1,main.admin h1,#admin h1{ font-size:30px; margin:0 0 12px; font-weight:600 }
.pin-box,.admin-login,.lock-card{
  background:#fff; border:1px solid #eee; border-radius:14px; box-shadow:0 8px 22px rgba(0,0,0,.08);
  padding:20px; max-width:520px; margin:0 auto 24px; text-align:center;
}
.pin-box input[type="password"],.pin-box input[type="text"],.admin-login input,.lock-card input{
  width:100%; border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:16px; margin:8px 0 12px;
}

/* ============ Effet ============ */
@keyframes fadeUp{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)} }

/* ===== ADMIN COMPACT (tout tient sur 1 écran mobile) ===== */
.admin-page{
  min-height: 100svh;           /* tient compte des barres iOS/Android */
  display: flex;
  flex-direction: column;
  background:#fff;
}

.mw-topbar{                     /* déjà présent chez toi, rappel léger */
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* zone centrale qui doit occuper l’espace entre header et footer */
.admin-fit{
  flex: 1;
  display: grid;
  place-items: center;          /* centre vertical + horizontal */
  padding: 12px 16px;
}

/* Carte PIN compacte mais lisible */
.pin-card{
  width: min(420px, 92vw);
  padding: 16px 18px;
  border: 1px solid #eee;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
  text-align: left;
}

.pin-card h2{
  font-size: clamp(20px, 3.8vw, 24px);
  margin: 0 0 8px;
  letter-spacing: .4px;
}

.pin-sub{
  margin: 0 0 10px;
  color: #444;
}

.pin-row{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.pin-input{
  height: 40px;
  padding: 0 10px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.btn{
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  border: none;
  font: inherit;
  background:#000;
  color:#fff;
  cursor:pointer;
}

.err{ color:#c00; margin-top:8px; }

/* Footer : 1 seule ligne, toujours visible, police réduite si besoin */
.site-foot{
  text-align: center;
  padding: 10px 12px;
  border-top: 1px solid #eee;
  white-space: nowrap;
  font-size: clamp(11px, 1.6vw, 13px);
  color:#444;
}
.site-foot .nowrap{ white-space: nowrap; }

/* Ajustements si petit écran en hauteur */
@media (max-height: 740px){
  .pin-card{ padding: 12px 14px; }
  .pin-card h2{ margin-bottom:6px; }
  .pin-sub{ margin-bottom:8px; }
  .pin-input, .btn{ height: 38px; }
}
/* ===== MOVWED — Footer compact (mobile & desktop) ===== */
.footer{
  margin-top:auto;            /* reste collé en bas sans position:fixed */
  text-align:center;
  white-space:nowrap;         /* force une seule ligne */
  line-height:1;
  font-size:12px;             /* taille réduite */
  padding:6px 10px;           /* moins haut */
  background:#fff;            /* laisse ton fond blanc */
}

/* Ultra-compact sur petits écrans type iPhone 6.7" */
@media (max-width:430px){
  .footer{
    font-size:11px;
    padding:5px 8px;
  }
}
/* TEST 2 min — à retirer ensuite */
.footer { background:#f5f5f5 !important; }/* TEST 2 min — à retirer ensuite */

/* Harmonisation du logo MOVWED sur toutes les pages */
.mw-brand {
  font-family: "Didot", "Times New Roman", serif;
  font-weight: 500;
  font-size: 1.8rem; /* taille identique à la page d’accueil */
  letter-spacing: 0.08em;
  color: #000; /* bien noir, comme sur la home */
}

/* Ajustement mobile : on garde la proportion */
@media (max-width: 480px) {
  .mw-brand {
    font-size: 1.5rem;
  }
}

/* Taille uniforme des miniatures (photo et vidéo) */
.gallery-grid .g-item img,
.gallery-grid .g-item video {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 6px;
}
/* ===== Harmonisation header MOVWED (même rendu que l’accueil) ===== */
.mw-topbar{position:sticky;top:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:#fff;}
.mw-brand{font-family:"Didot","EB Garamond",serif;font-weight:700;font-size:28px;letter-spacing:.06em;color:#000;}
@media (max-width:900px){ .mw-brand{font-size:24px;} }

.mw-burger{appearance:none;background:transparent;border:0;width:36px;height:28px;display:inline-flex;flex-direction:column;gap:6px;cursor:pointer;}
.mw-bar{display:block;height:2px;width:100%;background:#000;border-radius:1px;}

.mw-menu{position:absolute;right:20px;top:58px;background:#fff;border:1px solid #e6e6e6;border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,.08);padding:12px 14px;min-width:180px;display:none;}
.mw-menu.is-open{display:block;}
.mw-menu a{display:block;padding:10px 12px;text-decoration:none;color:#000;font-family:"Didot","EB Garamond",serif;font-size:16px;}
.mw-menu a:hover{text-decoration:underline;}

/* ===== Admin : panneau PIN centré / 1 écran ===== */
.admin-page{min-height:100dvh;display:flex;flex-direction:column;}
.pin-gate{flex:1;display:flex;align-items:center;justify-content:center;padding:16px;}
.pin-card{max-width:560px;width:clamp(280px,92vw,560px);background:#fff;border:1px solid #eee;border-radius:12px;padding:18px;box-shadow:0 8px 24px rgba(0,0,0,.08);}
.pin-row{display:flex;gap:10px;margin-top:8px;}
.pin-input{flex:1;}

/* ===== Footer compact (même gabarit que l’accueil) ===== */
.footer{font-size:12px;padding:6px 10px;white-space:nowrap;color:#777;border-top:1px solid #eee;background:#fff;}
@media (max-width:430px){ .footer{font-size:11px;} }
/* === MOVWED | Anti-wrap header fix (galerie/admin) ==================== */
.mw-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  background:#fff;
  white-space:nowrap;            /* empêche le retour à la ligne */
}

.mw-topbar .mw-brand{
  margin:0;
  flex:1 1 auto;                 /* le logo prend l’espace dispo, mais peut rétrécir un peu */
  font-family:"Didot","EB Garamond",serif;
  font-weight:700;
  font-size:28px;                /* même gabarit que l’accueil */
  letter-spacing:.06em;
  color:#000;
}

.mw-topbar .mw-burger{
  flex:0 0 36px;                 /* réserve la place du burger pour éviter le wrap */
  width:36px; height:28px;
  display:inline-flex;
  flex-direction:column;
  gap:6px;
  background:transparent; border:0; cursor:pointer;
}

/* Menu déroulant */
.mw-menu{
  position:absolute; right:16px; top:58px;
  background:#fff; border:1px solid #e6e6e6; border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  padding:12px 14px; min-width:180px; display:none;
}
.mw-menu.is-open{ display:block; }
.mw-menu a{ display:block; padding:10px 12px; color:#000; text-decoration:none; }
.mw-menu a:hover{ text-decoration:underline; }

/* Petits écrans : on compresse un peu le logo pour éviter toute casse */
@media (max-width:430px){
  .mw-topbar{ padding:10px 12px; }
  .mw-topbar .mw-brand{ font-size:24px; letter-spacing:.05em; }
}

/* Coupe l’ancien menu “brut” s’il traîne encore */
.nav-links, .hamburger, #menu{ display:none !important; }/* === MOVWED | Anti-wrap header fix (galerie/admin) ==================== */
.mw-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  background:#fff;
  white-space:nowrap;            /* empêche le retour à la ligne */
}

.mw-topbar .mw-brand{
  margin:0;
  flex:1 1 auto;                 /* le logo prend l’espace dispo, mais peut rétrécir un peu */
  font-family:"Didot","EB Garamond",serif;
  font-weight:700;
  font-size:28px;                /* même gabarit que l’accueil */
  letter-spacing:.06em;
  color:#000;
}

.mw-topbar .mw-burger{
  flex:0 0 36px;                 /* réserve la place du burger pour éviter le wrap */
  width:36px; height:28px;
  display:inline-flex;
  flex-direction:column;
  gap:6px;
  background:transparent; border:0; cursor:pointer;
}

/* Menu déroulant */
.mw-menu{
  position:absolute; right:16px; top:58px;
  background:#fff; border:1px solid #e6e6e6; border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  padding:12px 14px; min-width:180px; display:none;
}
.mw-menu.is-open{ display:block; }
.mw-menu a{ display:block; padding:10px 12px; color:#000; text-decoration:none; }
.mw-menu a:hover{ text-decoration:underline; }

/* Petits écrans : on compresse un peu le logo pour éviter toute casse */
@media (max-width:430px){
  .mw-topbar{ padding:10px 12px; }
  .mw-topbar .mw-brand{ font-size:24px; letter-spacing:.05em; }
}

/* Coupe l’ancien menu “brut” s’il traîne encore */
.nav-links, .hamburger, #menu{ display:none !important; }

/* === Auto-fit mobile : header/foot fixes + centrage du contenu === */

/* 1) Tailles fluides, stables sur tous les mobiles */
:root{
  --mw-header-h: clamp(56px, 9svh, 84px);   /* logo + burger */
  --mw-footer-h: clamp(22px, 3.2svh, 36px); /* 1 ligne, pas de scroll */
}

/* 2) Header et footer s’alignent sur ces hauteurs */
.mw-topbar{ height: var(--mw-header-h); }
.footer{
  min-height: var(--mw-footer-h);
  line-height: 1.2;
  font-size: clamp(11px, 1.2vw, 12px); /* plus petit sur petits écrans */
  padding: 6px 10px;
  white-space: nowrap;                  /* forcer une seule ligne */
}

/* 3) Gabarit de page : header / contenu / footer sur 100% de la hauteur vue */
html, body{ height: 100%; }
body{
  display: grid;
  grid-template-rows: var(--mw-header-h) 1fr var(--mw-footer-h);
}

/* 4) Zone principale : centrée, sans débord, toujours visible sans scroll */
.admin-page main,
.gallery-wrap{
  min-height: calc(100svh - var(--mw-header-h) - var(--mw-footer-h));
  display: grid;
  place-items: center;                   /* centre vertical + horizontal */
  padding: clamp(8px, 2.5svh, 24px) 16px;
}

/* 5) Cartes (PIN / Accès galerie) : largeur/hauteur maîtrisées */
.pin-card,
.upload-card,        /* si ta galerie utilise la même carte visuelle */
.gate-card{          /* au cas où le nom diffère, sans effet si absent */
  width: min(680px, 92vw);
  max-height: calc(100svh - var(--mw-header-h) - var(--mw-footer-h) - 6svh);
  overflow: auto;                      /* évite tout débord sur petits écrans */
  margin: 0 auto;
}

/* 6) Petites hauteurs (ex. iPhone SE / clavier affiché) : compacter un peu */
@media (max-height: 700px){
  .pin-card h2,
  .upload-card h2{ font-size: 1.3rem; margin-bottom: .4rem; }
  .pin-card p,
  .upload-card p{ margin-bottom: .6rem; }
  .btn{ padding: 10px 14px; font-size: 0.95rem; }
}

/* Switch langue en footer (injection auto par JS) */
.mw-lang-switch{ font-family:"Didot","EB Garamond",serif; font-size:12px; opacity:.8; }
.mw-lang-switch button{ background:transparent; border:0; padding:0 6px; cursor:pointer; }
.mw-lang-switch .active{ text-decoration:underline; opacity:1; }

/* Sécuriser l’alignement du header partout, sans toucher le HTML */
.mw-topbar{ display:flex; align-items:center; justify-content:space-between; }

/* Centrage contenu Admin (si besoin) */
.admin-main{
  min-height: calc(100svh - var(--mw-header-h,64px) - var(--mw-footer-h,28px));
  display: grid;
  place-items: center;
  padding: 12px 16px;
}