/* ==========================================================================
   Sam Teddy's — Interface d'édition ("mini-CMS" local)
   Chargée sur toutes les pages, mais invisible tant qu'on n'est pas connecté.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Lien discret « Connexion » dans le pied de page
   -------------------------------------------------------------------------- */
.cms-login-link { opacity: .5; transition: opacity .2s; }
.cms-login-link:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   Fenêtre de connexion
   -------------------------------------------------------------------------- */
.cms-modal {
  position: fixed; inset: 0; z-index: 4000;
  display: none; place-items: center;
  padding: 1.5rem;
  background: rgba(26,22,18,.62);
  backdrop-filter: blur(5px);
}
.cms-modal.is-open { display: grid; }
.cms-modal__box {
  width: min(100%, 430px);
  background: var(--surface, #fff);
  color: var(--text, #2C2722);
  border: 1px solid var(--border, #E6DBCC);
  border-radius: 24px;
  padding: 1.9rem;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.5);
}
.cms-modal__head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.3rem; }
.cms-modal__head img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.cms-modal__head h2 { font-size: 1.3rem; margin: 0; line-height: 1.2; }
.cms-modal__head p { font-size: .82rem; color: var(--text-soft, #7C7267); margin: .15rem 0 0; }
.cms-modal .field { margin-bottom: .9rem; }
/* Les champs .field sont en display:grid, ce qui écrase le [hidden] du navigateur :
   il faut le forcer, sinon les champs masqués restent visibles. */
.cms-modal [hidden] { display: none !important; }
.cms-modal__msg {
  font-size: .86rem; border-radius: 12px; padding: .7rem .9rem; margin-bottom: 1rem;
  display: none;
}
.cms-modal__msg.is-error { display: block; background: #FBEDE5; color: #A45E40; border: 1px solid #E8C4B2; }
.cms-modal__msg.is-info  { display: block; background: #EDF2E9; color: #4C6644; border: 1px solid #C6D6BC; }
.cms-modal__actions { display: flex; gap: .6rem; margin-top: 1.2rem; }
.cms-modal__actions .btn { flex: 1; }
.cms-modal__foot {
  margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--border, #E6DBCC);
  font-size: .76rem; color: var(--text-soft, #7C7267); line-height: 1.6;
}
.cms-modal__foot a { cursor: pointer; }

/* --------------------------------------------------------------------------
   Barre d'outils du mode édition
   -------------------------------------------------------------------------- */
/* L'outillage n'est jamais sélectionnable ni modifiable : une sélection
   accidentelle ne peut donc pas l'emporter avec le texte. */
.cms-bar, .cms-tools, .cms-img-btn, .cms-add, .cms-help, .cms-toast, .cms-modal {
  -webkit-user-select: none;
  user-select: none;
}
.cms-bar {
  position: fixed; left: 50%; bottom: 1.1rem; translate: -50% 0; z-index: 3000;
  display: none; align-items: center; gap: .45rem;
  padding: .55rem .65rem;
  background: #23201B; color: #F2EBE1;
  border-radius: 999px;
  box-shadow: 0 18px 44px -14px rgba(0,0,0,.6);
  max-width: calc(100vw - 1.6rem);
  overflow-x: auto;
  scrollbar-width: none;
}
.cms-bar::-webkit-scrollbar { display: none; }
body.cms-on .cms-bar { display: flex; }
.cms-bar__badge {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .8rem; border-radius: 999px;
  background: #4C6644; color: #fff;
  font-size: .76rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap; flex: none;
}
.cms-bar__badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: #A8E08A;
  animation: cms-pulse 1.8s ease-in-out infinite;
}
@keyframes cms-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.cms-btn {
  border: 0; cursor: pointer; font: inherit;
  font-size: .84rem; font-weight: 700;
  padding: .48rem .85rem; border-radius: 999px;
  background: rgba(255,255,255,.1); color: #F2EBE1;
  display: inline-flex; align-items: center; gap: .4rem;
  white-space: nowrap; flex: none;
  transition: background .18s, color .18s;
}
.cms-btn:hover { background: rgba(255,255,255,.2); }
.cms-btn svg { width: 15px; height: 15px; }
.cms-btn--go { background: #6E8B63; color: #fff; }
.cms-btn--go:hover { background: #7d9c71; }
.cms-btn--save { background: #C97B5A; color: #fff; }
.cms-btn--save:hover { background: #d98d6c; }
.cms-btn--ghost { background: transparent; color: #C9C0B3; }
.cms-btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.cms-bar__sep { width: 1px; height: 22px; background: rgba(255,255,255,.16); flex: none; }
.cms-bar__dirty {
  font-size: .74rem; color: #F0C9A8; white-space: nowrap; flex: none;
  padding-right: .4rem; display: none;
}
body.cms-modifie .cms-bar__dirty { display: inline; }

/* --------------------------------------------------------------------------
   Éléments modifiables
   -------------------------------------------------------------------------- */
body.cms-edit [contenteditable="true"],
body.cms-edit [contenteditable="plaintext-only"] {
  outline: 1.5px dashed rgba(110,139,99,.55);
  outline-offset: 3px;
  border-radius: 3px;
  cursor: text;
  transition: outline-color .15s, background .15s;
}
body.cms-edit [contenteditable]:hover {
  outline-color: rgba(201,123,90,.9);
  background: rgba(201,123,90,.06);
}
body.cms-edit [contenteditable]:focus {
  outline: 2px solid #C97B5A;
  background: rgba(201,123,90,.09);
}
body.cms-edit svg { pointer-events: none; }

/* Images remplaçables — on marque le parent, sans rien ajouter au flux */
body.cms-edit .cms-img-host { position: relative; }
.cms-img-btn {
  position: absolute; inset: auto auto 8px 8px; z-index: 20;
  border: 0; cursor: pointer; font: inherit;
  font-size: .74rem; font-weight: 700;
  padding: .38rem .7rem; border-radius: 999px;
  background: rgba(28,24,20,.82); color: #fff;
  display: inline-flex; align-items: center; gap: .35rem;
  opacity: 0; transition: opacity .18s, background .18s;
  backdrop-filter: blur(4px);
}
.cms-img-btn svg { width: 13px; height: 13px; }
body.cms-edit .cms-img-host:hover > .cms-img-btn { opacity: 1; }
body.cms-edit .cms-img-btn { z-index: 25; }
.cms-img-btn:hover { background: #C97B5A; }

/* Outils de bloc (fiches lapin, produits, sections) */
.cms-tools {
  position: absolute; top: 8px; right: 8px; z-index: 30;
  display: flex; gap: .25rem;
  padding: .25rem;
  background: rgba(28,24,20,.86);
  border-radius: 999px;
  opacity: 0; pointer-events: none;
  transition: opacity .18s;
  backdrop-filter: blur(4px);
}
body.cms-edit .cms-target { position: relative; }
body.cms-edit .cms-target:hover > .cms-tools,
body.cms-edit .cms-tools:hover { opacity: 1; pointer-events: auto; }
.cms-tool {
  width: 28px; height: 28px; border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: #fff;
  display: grid; place-items: center;
  transition: background .16s;
}
.cms-tool:hover { background: rgba(255,255,255,.22); }
.cms-tool--danger:hover { background: #B4462F; }
.cms-tool svg { width: 14px; height: 14px; }
body.cms-edit .cms-target { outline: 1px dashed transparent; outline-offset: 5px; }
body.cms-edit .cms-target:hover { outline-color: rgba(110,139,99,.5); }

.cms-add {
  display: none;
  margin-top: 1.2rem;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  border: 2px dashed var(--border, #E6DBCC); background: transparent;
  color: var(--text-soft, #7C7267);
  font: inherit; font-weight: 700; font-size: .9rem; line-height: 1.2;
  padding: .7rem 1rem; border-radius: 14px; cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
body.cms-edit .cms-add {
  display: inline-flex;
  align-items: center; justify-content: center; gap: .45rem;
}
/* L'icône « + » garde une taille normale : sans cette règle elle est
   étirée par la règle globale « svg { max-width:100%; height:auto } ». */
.cms-add svg {
  width: 15px; height: 15px;
  flex: 0 0 auto;
  max-width: 15px; max-height: 15px;
  display: inline-block; vertical-align: middle;
}
.cms-add:hover { border-color: #6E8B63; color: #4C6644; background: rgba(110,139,99,.07); }

/* Bandeau d'aide */
.cms-help {
  position: fixed; right: 1.1rem; bottom: 5rem; z-index: 3000;
  width: min(320px, calc(100vw - 2.2rem));
  background: var(--surface, #fff); color: var(--text, #2C2722);
  border: 1px solid var(--border, #E6DBCC);
  border-radius: 20px; padding: 1.15rem 1.25rem;
  box-shadow: 0 24px 50px -20px rgba(0,0,0,.4);
  font-size: .85rem; line-height: 1.6;
  display: none;
}
body.cms-help-open .cms-help { display: block; }
.cms-help h3 { font-size: 1rem; margin: 0 0 .6rem; }
.cms-help ul { margin: .5rem 0 0; padding-left: 1.1rem; display: grid; gap: .35rem; }
.cms-help__close {
  position: absolute; top: .6rem; right: .6rem;
  border: 0; background: transparent; cursor: pointer; color: var(--text-soft, #7C7267);
  width: 28px; height: 28px; border-radius: 50%;
}
.cms-help__close:hover { background: var(--surface-2, #F5EDE2); }
.cms-help__close svg { width: 14px; height: 14px; margin: 0 auto; }
.cms-help__note { margin-top: .8rem; font-size: .76rem; color: var(--text-soft, #7C7267); }

/* Notification */
.cms-toast {
  position: fixed; left: 50%; bottom: 5.2rem; translate: -50% 0; z-index: 3500;
  background: #23201B; color: #F2EBE1;
  padding: .7rem 1.2rem; border-radius: 999px;
  font-size: .86rem; font-weight: 600;
  box-shadow: 0 16px 36px -14px rgba(0,0,0,.6);
  opacity: 0; pointer-events: none;
  transition: opacity .25s, translate .25s;
}
.cms-toast.is-on { opacity: 1; translate: -50% -8px; }
.cms-toast--err { background: #8C3620; }

/* On masque tout l'outillage à l'impression */
@media print {
  .cms-bar, .cms-modal, .cms-tools, .cms-img-btn, .cms-add, .cms-help, .cms-toast { display: none !important; }
}

/* Bouton de visibilité (site privé / en ligne) */
.cms-btn--prive { background: #8C6A80; color: #fff; }
.cms-btn--prive:hover { background: #9d7a91; }


/* Cadrage d'une photo : on la fait glisser dans son cadre */
.cms-img-btn--cadrer { inset: auto 8px 8px auto; }
body.cms-edit img.cms-cadrage {
  cursor: grab;
  outline: 3px solid #C97B5A;
  outline-offset: -3px;
  touch-action: none;
}
body.cms-edit img.cms-cadrage:active { cursor: grabbing; }

/* Sélecteur de statut sur les fiches lapin */
.cms-statut {
  position: absolute; top: 8px; left: 8px; z-index: 32;
  /* on neutralise les styles de formulaire du site (width:100%, etc.) */
  width: auto; max-width: 60%; min-width: 0; margin: 0; box-shadow: none;
  font: inherit; font-size: .76rem; font-weight: 700;
  padding: .3rem 1.6rem .3rem .7rem;
  border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(28,24,20,.86); color: #fff;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .45rem center;
  background-size: 11px;
  opacity: 0; pointer-events: none;
  transition: opacity .18s;
  backdrop-filter: blur(4px);
}
body.cms-edit .cms-target:hover > .cms-statut,
body.cms-edit .cms-statut:hover,
body.cms-edit .cms-statut:focus { opacity: 1; pointer-events: auto; }
.cms-statut option { background: #23201B; color: #fff; }
/* Quand le sélecteur apparaît, il remplace visuellement le badge de statut */
body.cms-edit .bunny-card.cms-target:hover .bunny-card__status,
body.cms-edit .cms-statut:focus ~ .bunny-card__media .bunny-card__status { opacity: 0; }
.bunny-card__status { transition: opacity .18s; }

/* Photo en cours de glisser-déposer depuis l'ordinateur */
body.cms-edit img.cms-drop {
  outline: 3px dashed #6E8B63;
  outline-offset: -3px;
  filter: brightness(1.08);
}
.cms-btn--annuler { background: rgba(255,255,255,.14); color: #F2EBE1; }
.cms-btn--annuler:hover { background: rgba(255,255,255,.26); }