/* ============================================================
   Destination Excellence — Mode édition client
   Couche d'interface superposée au site. N'affecte le site
   public que lorsque le mode édition est actif (?edit).
   ============================================================ */

/* --- Barre d'outils flottante --- */
#mdedit-bar{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  z-index:2147483000; display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:16px;
  background:rgba(24,18,13,.92); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.7); border:1px solid rgba(255,255,255,.12);
  font-family:'Jost',system-ui,sans-serif; color:#f4ece0;
  max-width:calc(100vw - 24px); flex-wrap:wrap; justify-content:center;
}
#mdedit-bar .mde-brand{
  display:flex; align-items:center; gap:8px; font-weight:500; font-size:13px;
  letter-spacing:.04em; padding-right:6px; margin-right:2px;
  border-right:1px solid rgba(255,255,255,.14);
}
#mdedit-bar .mde-dot{width:9px;height:9px;border-radius:50%;background:#9aa0a6}
#mdedit-bar.is-editing .mde-dot{background:#46c46a;box-shadow:0 0 0 4px rgba(70,196,106,.22)}
#mdedit-bar button{
  font-family:inherit; font-size:13px; font-weight:400; letter-spacing:.02em;
  padding:8px 14px; border-radius:10px; cursor:pointer; border:1px solid transparent;
  background:rgba(255,255,255,.08); color:#f4ece0; transition:background .15s,transform .1s,opacity .15s;
  white-space:nowrap;
}
#mdedit-bar button:hover{background:rgba(255,255,255,.16)}
#mdedit-bar button:active{transform:translateY(1px)}
#mdedit-bar button:disabled{opacity:.4;cursor:default}
#mdedit-bar button.mde-primary{background:#7a1f2b;border-color:#8c2533}
#mdedit-bar button.mde-primary:hover{background:#8c2533}
#mdedit-bar button.mde-go{background:#1f6b3a;border-color:#247a42}
#mdedit-bar button.mde-go:hover{background:#247a42}
#mdedit-bar .mde-status{font-size:12px;opacity:.75;min-width:0;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* badge "brouillon non publié" */
#mdedit-bar .mde-dirty{display:none;font-size:11px;padding:3px 8px;border-radius:20px;
  background:rgba(214,160,70,.2);color:#f0c780;border:1px solid rgba(214,160,70,.35)}
#mdedit-bar.is-dirty .mde-dirty{display:inline-block}

/* flèches annuler / rétablir */
#mdedit-bar .mde-undo,#mdedit-bar .mde-redo{font-size:17px;line-height:1;padding:7px 11px}

/* afficher / masquer des sections — interrupteur */
.mde-toggle{display:flex;align-items:center;gap:14px;width:100%;padding:14px 4px;cursor:pointer}
.mde-toggle input{position:absolute;opacity:0;width:0;height:0}
.mde-toggle .mde-toggle-txt{flex:1;display:flex;flex-direction:column;gap:3px}
.mde-toggle .mde-toggle-txt small{color:var(--ink-soft,#7a726a);font-size:12px}
.mde-switch{flex:none;width:44px;height:26px;border-radius:20px;background:#cfc7bd;position:relative;transition:background .18s}
.mde-switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s}
.mde-toggle input:checked ~ .mde-switch{background:#1f6b3a}
.mde-toggle input:checked ~ .mde-switch::after{transform:translateX(18px)}

/* --- Affordances en mode édition --- */
/* En édition, on désactive les animations d'apparition au scroll : tout doit
   rester visible (sinon les cartes reconstruites restent à opacity:0). */
html.mde-editing .reveal{opacity:1!important;transform:none!important}

html.mde-editing [data-mde-text]{
  outline:1.5px dashed rgba(122,31,43,.0); outline-offset:3px;
  border-radius:3px; transition:outline-color .15s,background .15s; cursor:text;
}
html.mde-editing [data-mde-text]:hover{
  outline-color:rgba(122,31,43,.55); background:rgba(122,31,43,.06);
}
html.mde-editing [data-mde-text]:focus{
  outline:2px solid #7a1f2b; background:rgba(122,31,43,.08); cursor:text;
}
html.mde-editing [data-mde-img]{cursor:pointer}
/* position:relative seulement sur les éléments "static" : sinon on casse
   les fonds en position:absolute (svc-photo, band-bg) qui s'effondrent. */
html.mde-editing [data-mde-img].mde-pos{position:relative}
html.mde-editing [data-mde-img]::after{
  content:"📷 Replace"; position:absolute; inset:0; margin:auto;
  width:max-content; height:max-content; padding:7px 12px; border-radius:10px;
  background:rgba(24,18,13,.78); color:#fff; font-family:'Jost',sans-serif; font-size:13px;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .15s; pointer-events:none; z-index:5;
}
html.mde-editing [data-mde-img]:hover::after{opacity:1}
html.mde-editing [data-mde-img]:hover{outline:2px solid #7a1f2b;outline-offset:-2px}
html.mde-editing img[data-mde-img]{display:inline-block}

/* champ modifié (pas encore publié) */
html.mde-editing [data-mde-changed]{outline-color:rgba(31,107,58,.5)!important}

/* --- Modale de connexion --- */
#mdedit-login{
  position:fixed; inset:0; z-index:2147483600; display:flex; align-items:center; justify-content:center;
  background:rgba(18,14,10,.6); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-family:'Jost',system-ui,sans-serif;
}
#mdedit-login .mde-card{
  width:min(360px,92vw); background:#f6f0e6; color:#241812; border-radius:20px;
  padding:30px 28px; box-shadow:0 40px 90px -30px rgba(0,0,0,.6); text-align:center;
}
#mdedit-login h2{font-family:'Fraunces',serif;font-weight:400;font-size:24px;margin:0 0 6px}
#mdedit-login p{font-size:13px;opacity:.7;margin:0 0 20px;line-height:1.5}
#mdedit-login input{
  width:100%; padding:13px 14px; border-radius:11px; border:1px solid rgba(36,24,18,.2);
  background:#fff; font-family:inherit; font-size:15px; box-sizing:border-box; margin-bottom:12px;
}
#mdedit-login input:focus{outline:2px solid #7a1f2b;border-color:#7a1f2b}
#mdedit-login button{
  width:100%; padding:13px; border-radius:11px; border:none; cursor:pointer;
  background:#7a1f2b; color:#fff; font-family:inherit; font-size:15px; font-weight:500;
}
#mdedit-login button:hover{background:#8c2533}
#mdedit-login .mde-err{color:#b03a2e;font-size:12px;min-height:16px;margin-top:6px}

/* toast */
#mdedit-toast{
  position:fixed; left:50%; bottom:90px; transform:translateX(-50%) translateY(10px);
  z-index:2147483200; background:rgba(24,18,13,.94); color:#f4ece0;
  font-family:'Jost',sans-serif; font-size:13px; padding:11px 18px; border-radius:12px;
  opacity:0; transition:opacity .2s,transform .2s; pointer-events:none; box-shadow:0 20px 50px -20px rgba(0,0,0,.6);
}
#mdedit-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* panneau Photos */
#mde-photos{
  position:fixed; inset:0; z-index:2147483400; display:flex; align-items:flex-start; justify-content:center;
  background:rgba(16,12,9,.62); backdrop-filter:blur(3px); padding:40px 16px; overflow:auto;
}
#mde-photos .mph-box{
  width:min(960px,100%); background:#fbf7f1; border-radius:16px; padding:22px 22px 28px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6); font-family:'Jost',sans-serif;
}
#mde-photos .mph-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
#mde-photos .mph-head h2{margin:0;font-family:'Cormorant Garamond',serif;font-size:26px;color:#23201c;font-weight:600}
#mde-photos .mph-close{
  border:1px solid rgba(34,28,23,.25); background:#fff; color:#23201c; cursor:pointer;
  padding:8px 16px; border-radius:10px; font-family:inherit; font-size:14px;
}
#mde-photos .mph-close:hover{background:#f0e8dc}
#mde-photos .mph-hint{margin:6px 0 18px;color:#6b6256;font-size:13px;line-height:1.5}
#mde-photos .mph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px}
#mde-photos .mph-cell{display:flex;flex-direction:column;gap:8px}
#mde-photos .mph-thumb{
  width:100%; aspect-ratio:4/3; border-radius:11px; background:#e7ded0 center/cover no-repeat;
  border:1px solid rgba(34,28,23,.12);
}
#mde-photos .mph-lab{font-size:12px;color:#6b6256;line-height:1.3}
#mde-photos .mph-btn{
  border:none; cursor:pointer; padding:9px 12px; border-radius:9px;
  background:#7a1f2b; color:#fff; font-family:inherit; font-size:13px; font-weight:500;
}
#mde-photos .mph-btn:hover{background:#8c2533}

/* --- Gestionnaires Bannière / Itinéraires / Avis --- */
#mde-photos .mde-mgr-body{margin-top:14px;font-family:'Jost',sans-serif;color:#241812}
.mde-list{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.mde-li{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid rgba(34,28,23,.14);
  border-radius:12px;background:#fff}
.mde-li-thumb{flex:0 0 auto;width:56px;height:42px;border-radius:8px;background:#e7ded0 center/cover no-repeat;border:1px solid rgba(34,28,23,.12)}
.mde-li-thumb.big{width:120px;height:78px}
.mde-li-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.mde-li-main strong{font-weight:600;font-size:15px}
.mde-li-sub{font-size:12px;color:#6b6256;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mde-li-act{display:flex;gap:6px;flex-wrap:wrap}
.mde-li-act button{border:1px solid rgba(34,28,23,.2);background:#f6f0e6;color:#241812;cursor:pointer;
  padding:6px 10px;border-radius:8px;font-family:inherit;font-size:13px}
.mde-li-act button:hover{background:#ece2d2}
.mde-del{color:#fff!important;background:#9b3a2c!important;border-color:#8c2533!important}
.mde-del:hover{background:#7a1f2b!important}
.mde-add{margin-top:4px}
.mde-back{background:none;border:none;color:#7a1f2b;cursor:pointer;font-family:inherit;font-size:14px;padding:4px 0;margin-bottom:10px}
.mde-form{display:flex;flex-direction:column;gap:12px}
.mde-f{display:flex;flex-direction:column;gap:4px;font-size:13px;color:#6b6256}
.mde-f input,.mde-f textarea,.mde-stop input,.mde-stop textarea{
  border:1px solid rgba(34,28,23,.2);border-radius:9px;padding:9px 11px;font-family:inherit;
  font-size:14px;color:#241812;background:#fff;width:100%;box-sizing:border-box}
.mde-f input:focus,.mde-f textarea:focus,.mde-stop input:focus,.mde-stop textarea:focus{outline:2px solid #7a1f2b;border-color:#7a1f2b}
.mde-sub{margin:8px 0 0;font-family:'Cormorant Garamond',serif;font-size:20px;color:#23201c}
.mde-photo-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.mde-form-foot{display:flex;justify-content:space-between;gap:10px;margin-top:8px;flex-wrap:wrap}
.mde-ghost{border:1px dashed rgba(34,28,23,.35);background:#fbf7f1;color:#241812;cursor:pointer;
  padding:9px 12px;border-radius:9px;font-family:inherit;font-size:13px}
.mde-ghost:hover{background:#f0e8dc}
.mde-stops{display:flex;flex-direction:column;gap:12px}
.mde-stop{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid rgba(34,28,23,.14);border-radius:11px;background:#fff}
.mde-stop-top{display:flex;align-items:center;gap:8px}
.mde-stop-n{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:#7a1f2b;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600}
.mde-stop-top button{margin-left:auto;border:1px solid rgba(34,28,23,.2);background:#f6f0e6;cursor:pointer;
  padding:4px 9px;border-radius:7px;font-family:inherit;font-size:13px}
.mde-stop-top button[data-a="sdel"]{margin-left:4px}
.mde-stop-thumb{width:100%;height:96px;border-radius:9px;background:#e7ded0 center/cover no-repeat;border:1px solid rgba(34,28,23,.12)}
.mde-banner-actions{display:flex;flex-direction:column;gap:10px;max-width:320px}

@media(max-width:560px){
  #mdedit-bar{bottom:12px;gap:7px;padding:8px 10px}
  #mdedit-bar button{padding:7px 10px;font-size:12px}
  #mdedit-bar .mde-status{display:none}
  #mde-photos{padding:16px 8px}
  #mde-photos .mph-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
}