/* ============================================================================
   Datte Mama Ali — éditeur de pages (super administrateur)
   Styles innocents pour les visiteurs : rien ne s'affiche hors mode édition.
   ========================================================================== */

/* Bouton flottant « Modifier la page » */
.cms-float { position: fixed; right: 18px; bottom: 18px; z-index: 99998; display: flex; gap: 8px; align-items: center; }
.cms-float button {
  cursor: pointer; border: 0; border-radius: 999px; padding: 12px 18px;
  font: 600 14px/1 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; color: #fff;
  background: #8a5a2b; box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
}
.cms-float button:hover { background: #a06a34; }

/* Zone éditable */
html.cms-editing { padding-bottom: 64px; }
html.cms-editing .cms-editable {
  outline: 1px dashed rgba(138, 90, 43, .55); outline-offset: 2px; border-radius: 2px;
  transition: background .12s ease;
}
html.cms-editing .cms-editable:hover { background: rgba(138, 90, 43, .07); }
html.cms-editing .cms-editable:focus { outline: 2px solid #8a5a2b; background: rgba(138, 90, 43, .1); }
html.cms-editing .cms-img { cursor: pointer; outline: 2px dashed rgba(138, 90, 43, .7); outline-offset: -2px; }
html.cms-editing .cms-img:hover { filter: brightness(.86); }

/* Barre d'outils */
.cms-toolbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 99999;
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 8px 12px;
  background: #1d1a17; color: #fff; box-shadow: 0 -6px 24px rgba(0, 0, 0, .3);
  font: 500 13px/1 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.cms-toolbar .cms-sp { flex: 1 1 auto; }
.cms-toolbar button {
  cursor: pointer; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08);
  color: #fff; border-radius: 8px; padding: 8px 10px; font: 600 13px/1 inherit;
}
.cms-toolbar button:hover { background: rgba(255, 255, 255, .18); }
.cms-toolbar button[disabled] { opacity: .5; cursor: default; }
.cms-toolbar button.primary { background: #c98b3f; border-color: #c98b3f; color: #231a0f; }
.cms-toolbar button.primary:hover { background: #d99a4d; }
.cms-toolbar .cms-count { background: #c98b3f; color: #231a0f; border-radius: 999px; padding: 4px 9px; font-weight: 700; }
.cms-toolbar .cms-hint { opacity: .7; }

/* Messages */
.cms-toast {
  position: fixed; right: 18px; bottom: 74px; z-index: 100000; max-width: 320px;
  background: #1d1a17; color: #fff; padding: 12px 16px; border-radius: 10px;
  font: 600 13px/1.35 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .38);
}
.cms-toast.err { background: #8a2b2b; }

.cms-hero-hint { right: auto; left: 18px; }

/* Popup « Bannières du diaporama » (mode édition — images du slider) */
.cms-modal-ov { position: fixed; inset: 0; z-index: 100002; background: rgba(20, 16, 12, .55); display: flex; align-items: center; justify-content: center; padding: 18px; }
.cms-modal {
  width: min(780px, 100%); max-height: 88vh; display: flex; flex-direction: column;
  background: #fff; color: #241a10; border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, .4);
  font: 500 14px/1.5 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; overflow: hidden;
}
.cms-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #ead9c3; font-weight: 700; font-size: 15px; }
.cms-modal-x { border: 0; background: none; cursor: pointer; font: 700 18px/1 inherit; color: #8a5a2b; padding: 0 4px; }
.cms-modal-body { padding: 16px 18px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.cms-modal-hint { display: none; padding: 4px 18px 0; color: #8a7660; font-size: 13px; }
.cms-slide { position: relative; border: 1px solid #ead9c3; border-radius: 12px; overflow: hidden; background: #f7f1e7; }
.cms-slide > img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.cms-slide-pos { position: absolute; top: 6px; left: 6px; background: rgba(30, 20, 10, .74); color: #fff; border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 700; }
.cms-slide-acts { display: flex; gap: 6px; padding: 8px; }
.cms-slide-acts button { border: 1px solid #c99b63; background: #fff; color: #7a4a1c; border-radius: 8px; padding: 5px 10px; cursor: pointer; font: 700 12px/1 inherit; }
.cms-slide-acts button:hover { background: #c99b63; color: #fff; }
.cms-slide-acts button[disabled] { opacity: .45; cursor: default; background: #fff; color: #7a4a1c; }
.cms-slide-rp { display: flex; gap: 6px; align-items: center; padding: 0 8px 10px; flex-wrap: wrap; }
.cms-slide-rp[hidden] { display: none; }
.cms-slide-rp .rp-img { width: 68px; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; cursor: pointer; border: 1px solid #ead9c3; }
.cms-slide-rp .rp-img:hover { outline: 2px solid #8a5a2b; }
.cms-slide-rp > button { border: 1px dashed #c99b63; background: #fff6ea; color: #7a4a1c; border-radius: 8px; padding: 5px 10px; cursor: pointer; font: 700 12px/1 inherit; }
.cms-modal-foot { display: flex; gap: 8px; align-items: center; padding: 12px 18px; border-top: 1px solid #ead9c3; flex-wrap: wrap; }
.cms-modal-foot .cms-modal-flex { flex: 1 1 auto; }
.cms-modal-foot button { border: 1px solid #c99b63; background: #fff; color: #7a4a1c; border-radius: 8px; padding: 9px 14px; cursor: pointer; font: 700 13px/1 inherit; }
.cms-modal-foot button:hover { background: #c99b63; color: #fff; }
.cms-modal-foot button[disabled] { opacity: .45; cursor: default; background: #fff; color: #7a4a1c; }
.cms-modal-foot button[data-slide-save]:not([disabled]) { background: #8a5a2b; border-color: #8a5a2b; color: #fff; }
.cms-modal-foot button[data-slide-save]:not([disabled]):hover { background: #a06a34; }

/* Indice visuel pour l'admin/owner : les images de la page sont cliquables */
html.cms-quick img { cursor: pointer; }
html.cms-quick img:hover { outline: 2px dashed rgba(138, 90, 43, .85); outline-offset: 2px; }
html.cms-quick img.cms-img:hover { outline-color: rgba(138, 90, 43, .9); }

/* Popup « Modifier cette image » (remplacer / masquer / ajouter) */
.cms-q-body { display: block; text-align: center; }
.cms-qprev { max-width: 100%; max-height: 280px; object-fit: contain; border-radius: 10px; display: block; margin: 0 auto 10px; box-shadow: 0 4px 18px rgba(0, 0, 0, .12); }
.cms-qhint { margin: 0; color: #8a7660; font-size: 13px; }
.cms-qstatus { margin: 0 0 6px; color: #8a5a2b; font-weight: 700; font-size: 13px; }
.cms-qacts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.cms-qacts button { border: 1px solid #c99b63; background: #fff; color: #7a4a1c; border-radius: 8px; padding: 9px 14px; cursor: pointer; font: 700 13px/1 inherit; }
.cms-qacts button:hover { background: #c99b63; color: #fff; }
.cms-qacts button[hidden] { display: none; }
.cms-qadds { margin-top: 16px; text-align: left; border-top: 1px solid #ead9c3; padding-top: 12px; }
.cms-qadds[hidden] { display: none; }
.cms-qadds-t { font-weight: 700; font-size: 13px; color: #6b4a25; margin-bottom: 8px; }
.cms-qadds-list { display: flex; flex-wrap: wrap; gap: 10px; }
.cms-qadd-item { position: relative; width: 108px; }
.cms-qadd-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; border: 1px solid #ead9c3; display: block; }
.cms-qadd-item button { position: absolute; top: 4px; right: 4px; border: 0; background: rgba(30, 20, 10, .74); color: #fff; border-radius: 999px; width: 22px; height: 22px; line-height: 1; cursor: pointer; font-weight: 700; }
.cms-qadd-item button:hover { background: #8a2b2b; }
.cms-modal-foot button[data-q-save]:not([disabled]) { background: #8a5a2b; border-color: #8a5a2b; color: #fff; }
.cms-modal-foot button[data-q-save]:not([disabled]):hover { background: #a06a34; }

/* Images ajoutées en direct par l'admin : insérées dans le flux, après leur bloc d'origine */
.cms-added { display: block; width: 100%; height: auto; margin: 0; }
html.cms-quick .cms-added { outline: 2px dashed rgba(138, 90, 43, .55); outline-offset: -2px; }