body{
  margin:0;
  font-family: Georgia, serif;
  background:#f4efe6;
  overflow-x:hidden;
}

/*body.home{
  min-height:100vh;
  background-image: url("/assets/images/acceuil.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}*/

.section{
  padding:80px 10%;
  color:#2b221a;
}

/* =========================================================
   LOCK SCROLL (menu ouvert) — version robuste PC + Android
   ========================================================= */

/* Fallback classique */
body.cm-menu-open{
  overflow:hidden;
}

/* Lock béton (fixe le body pour empêcher scroll/inertie) */
body.cm-menu-open{
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
  top: var(--cm-scroll-lock-top, 0px);
  overscroll-behavior: none;
}


/* =========================================================
   FOCUS & TAP — harmonisation globale (mobile + tablette)
   ========================================================= */

/* Supprime le flash bleu au tap (iOS / Android) */
*{
  -webkit-tap-highlight-color: transparent;
}

/* Neutralise le focus bleu natif */
a:focus,
a:focus-visible,
button:focus,
button:focus-visible,
input:focus,
input:focus-visible,
input[type="range"]:focus,
input[type="range"]:focus-visible{
  outline: none;
}

/* Focus personnalisé (cohérent avec l'univers bois) */
a:focus-visible,
button:focus-visible,
input[type="range"]:focus-visible{
  box-shadow: 0 0 0 3px rgba(180,140,90,.55); /* chêne clair */
  border-radius: 12px;
}


/* ===============================================================
   CURSEUR PATTE — override des cursors "pointer" du navigateur/CSS
   Activé seulement si html.cm-cursor-paw est présent
   =============================================================== */
:root{
  --cm-paw-open: url("/assets/cursor/paw-open_2.png") 24 22, auto;
  --cm-paw-closed: url("/assets/cursor/paw-closed_2.png") 24 22, auto;
}

html.cm-cursor-paw,
html.cm-cursor-paw body{
  cursor: var(--cm-paw-open);
}

/* Tous les enfants héritent (évite que certains repassent en pointer) */
html.cm-cursor-paw *,
html.cm-cursor-paw body *{
  cursor: inherit;
}

/* Force la patte sur les éléments interactifs (là où Windows remet sa “main”) */
html.cm-cursor-paw a,
html.cm-cursor-paw button,
html.cm-cursor-paw input,
html.cm-cursor-paw textarea,
html.cm-cursor-paw select,
html.cm-cursor-paw label,
html.cm-cursor-paw [role="button"],
html.cm-cursor-paw [role="slider"],
html.cm-cursor-paw [role="link"],
html.cm-cursor-paw .cm-burger,
html.cm-cursor-paw .cm-staff-hit{
  cursor: var(--cm-paw-open) !important;
}

/* Patte fermée uniquement sur interaction réelle */
html.cm-cursor-paw a:active,
html.cm-cursor-paw button:active,
html.cm-cursor-paw .mascot:active,
html.cm-cursor-paw .cm-burger:active,
html.cm-cursor-paw .cm-staff-hit:active{
  cursor: var(--cm-paw-closed) !important;
}

/* Mascottes */
html.cm-cursor-paw .mascot,
html.cm-cursor-paw .mascot *{
  cursor: var(--cm-paw-open) !important;
}

/* =========================================================
   OPEN APP (après installation) — design amélioré
   ========================================================= */

.cm-openapp{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 1700;

  display: flex;
  justify-content: center;
  pointer-events: none; /* seul le panel est cliquable */
}

.cm-openapp.is-hidden{ display:none; }

.cm-openapp__panel{
  pointer-events: auto;

  width: min(760px, 100%);
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 12px;

  padding: 14px 14px;
  border-radius: 20px;

  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 22px 55px rgba(0,0,0,.22);
  backdrop-filter: blur(10px);

  transform: translateY(18px);
  opacity: 0;
  animation: cmOpenAppIn .28s ease forwards;
}

@keyframes cmOpenAppIn{
  to { transform: translateY(0); opacity: 1; }
}

/* Petit “badge” icône */
.cm-openapp__icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;

  background: rgba(47,42,36,.08);
  border: 1px solid rgba(0,0,0,.08);

  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.cm-openapp__icon img{
  width: 26px;
  height: 26px;
  display: block;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.18));
}

/* Texte */
.cm-openapp__text{
  color:#241f1a;
  font-weight: 900;
  line-height: 1.15;
  font-size: 14px;
}

.cm-openapp__text small{
  display:block;
  margin-top: 4px;
  font-weight: 800;
  opacity: .75;
}

/* Bouton principal */
.cm-openapp__btn{
  border: 0;
  border-radius: 16px;
  padding: 10px 14px;

  background: linear-gradient(180deg, #2f2a24, #1f1a15);
  color:#fff;
  font-weight: 1000;
  cursor:pointer;

  box-shadow: 0 12px 26px rgba(0,0,0,.22);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.cm-openapp__btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(0,0,0,.26);
  filter: brightness(1.03);
}

.cm-openapp__btn:active{
  transform: translateY(0);
  box-shadow: 0 10px 20px rgba(0,0,0,.20);
}

/* Bouton fermeture */
.cm-openapp__close{
  border: 0;
  width: 40px;
  height: 40px;
  border-radius: 14px;

  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.65);
  cursor:pointer;

  display: grid;
  place-items: center;

  transition: transform .15s ease, background .15s ease;
}

.cm-openapp__close:hover{
  background: rgba(0,0,0,.10);
  transform: translateY(-1px);
}

.cm-openapp__close:active{
  transform: translateY(0);
}

/* Responsive: empile proprement */
@media (max-width: 520px){
  .cm-openapp__panel{
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon text"
      "btn  close";
    gap: 10px;
  }

  .cm-openapp__icon{ grid-area: icon; }
  .cm-openapp__text{ grid-area: text; }

  .cm-openapp__btn{
    grid-area: btn;
    width: 100%;
    justify-self: stretch;
  }

  .cm-openapp__close{
    grid-area: close;
    justify-self: end;
  }
}

/* ===============================================================
   ÉDITEUR D'IMAGE CENTRALISÉ
   =============================================================== */
html.cm-media-editor-open,
html.cm-media-editor-open body{ overflow:hidden; }
.cm-media-editor{ position:fixed; inset:0; z-index:100000; display:none; }
.cm-media-editor.is-open{ display:block; }
.cm-media-editor__backdrop{ position:absolute; inset:0; background:rgba(5,10,18,.78); backdrop-filter: blur(8px); }
.cm-media-editor__dialog{
  position:relative; z-index:1; width:min(1120px, calc(100vw - 24px)); max-height:calc(100vh - 24px);
  margin:12px auto; background:linear-gradient(180deg, #222c3b 0%, #1a2230 100%); color:#eef2f7;
  border-radius:28px; border:1px solid rgba(255,255,255,.08); box-shadow:0 28px 68px rgba(0,0,0,.48);
  display:flex; flex-direction:column; overflow:hidden;
}
.cm-media-editor__head,
.cm-media-editor__actions{ padding:16px 20px; background:rgba(255,255,255,.03); }
.cm-media-editor__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.cm-media-editor__head strong{ display:block; font-size:22px; color:#f7fafc; }
.cm-media-editor__head p{ margin:6px 0 0; color:rgba(232,238,247,.76); }
.cm-media-editor__close{
  border:none; background:#253041; color:#e7eef9; width:42px; height:42px; border-radius:999px;
  font-size:28px; line-height:1; cursor:pointer; border:1px solid rgba(255,255,255,.08);
}
.cm-media-editor__body{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:18px; padding:18px 20px 12px; min-height:0; }
.cm-media-editor__stage-wrap{ min-height:0; }
.cm-media-editor__stage{
  position:relative; min-height:420px; height:min(62vh, 620px); border-radius:24px;
  background:
    linear-gradient(45deg, rgba(255,255,255,.05) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.05) 75%),
    linear-gradient(45deg, rgba(255,255,255,.05) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.05) 75%),
    #111923;
  background-size:22px 22px; background-position:0 0, 11px 11px; overflow:hidden; cursor:grab;
  border:1px solid rgba(255,255,255,.08);
}
.cm-media-editor__stage:active{ cursor:grabbing; }
.cm-media-editor__image{
  position:absolute; left:50%; top:50%; transform:none; user-select:none; -webkit-user-drag:none; max-width:none; max-height:none; pointer-events:none;
  box-shadow:0 20px 36px rgba(0,0,0,.28);
}
.cm-media-editor__crop-window{
  position:absolute; left:50%; top:50%; border:2px solid rgba(255,255,255,.95); border-radius:22px;
  box-shadow:0 0 0 9999px rgba(7,12,20,.58), inset 0 0 0 1px rgba(255,255,255,.18);
  pointer-events:none;
}
.cm-media-editor__watermark{
  position:absolute; left:50%; top:50%; transform:none; pointer-events:none; z-index:2; filter: drop-shadow(0 4px 14px rgba(0,0,0,.28));
}
.cm-media-editor__controls{ display:flex; flex-direction:column; gap:14px; }
.cm-media-editor__group{ display:flex; flex-direction:column; gap:12px; padding:14px; border-radius:18px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); }
.cm-media-editor__controls .cm-field,
.cm-media-editor__controls .cm-field span{ color:#eef2f7; }
.cm-media-editor__controls input[type="text"],
.cm-media-editor__controls input[type="number"],
.cm-media-editor__controls input[type="date"],
.cm-media-editor__controls input[type="email"],
.cm-media-editor__controls input[type="url"],
.cm-media-editor__controls input[type="password"],
.cm-media-editor__controls select,
.cm-media-editor__controls textarea{
  background:#111923; color:#f6f9ff; border:1px solid rgba(255,255,255,.14);
}
.cm-media-editor__controls input[type="range"]{ width:100%; accent-color:#6b8cff; }
.cm-media-editor__tip{ font-size:13px; line-height:1.55; color:rgba(232,238,247,.78); padding:12px 14px; border-radius:16px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); }
.cm-media-editor__actions{ display:flex; justify-content:flex-end; gap:12px; }
@media (max-width: 900px){
  .cm-media-editor__dialog{ width:min(100vw - 12px, 1120px); margin:6px auto; max-height:calc(100vh - 12px); }
  .cm-media-editor__body{ grid-template-columns:1fr; }
  .cm-media-editor__stage{ height:min(52vh, 480px); min-height:300px; }
}


/* =========================================================
   PAGE UNIVERS — fond chasse au trésor
   ========================================================= */
body.page-univers{
  min-height:100vh;
  background:#22170f url("/assets/images/univers-chasse-tresor-boston.webp") center center / cover no-repeat fixed;
}

body.page-univers::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,246,218,.08), transparent 42%),
    linear-gradient(180deg, rgba(45,24,10,.06), rgba(45,24,10,.20));
}

.cm-universe-page{
  min-height:100vh;
  padding:0;
  background:transparent;
}

.cm-universe-page__title{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}

@media (max-width: 760px){
  body.page-univers{
    background-attachment:scroll;
    background-position:58% center;
  }
}
