/* =====================================================================
   MENU CROCS-MINILUS
   Burger + Overlay + Sidebar
   Layout: Empreintes FIXES + Panneau musique FIXE + Zone scrollable
   (logo + liens + rosette install + panneau bas)
   ===================================================================== */


/* ===============================================================
   FONT (Cherry Bomb One)
   =============================================================== */
@font-face {
  font-family: "CherryBombOne";
  src: url("/assets/fonts/CherryBombOne-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* ===============================================================
   VARIABLES (source de vérité)
   =============================================================== */
:root{
  /* Sidebar */
  --sidebar-w: 550px;

  /* Espacements globaux */
  --sidebar-pad-x: 18px;
  --sidebar-pad-top: 18px;
  --sidebar-pad-bot: 24px;
  --sidebar-gap: 16px;

  /* Empreintes récompenses (fixes) */
  --reward-slot: 44px;
  --reward-gap: 10px;
  --rewards-mt: 2px;
  --rewards-mb: 6px;

  /* Panneau haut */
  --panel-mt: 10px;

  /* Logo (dans zone scroll) */
  --logo-w: 200px;
  --logo-mt: 14px;
  --logo-mb: 10px;

  /* Drapeau langue dans le cadre musique */
  --lang-top: 18px;
  --lang-right: 34px;
  --lang-size: 42px;

  /* Panneau bas (dans zone scroll) */
  --panel-bottom-mt: 14px;
  --panel-bottom-mb: 10px;

  /* Clé de sol */
  --music-top: 38px;
  --music-left: 58px;
  --music-size: 110px;

  /* Volume */
  --vol-top: 50px;
  --vol-left: 130px;
  --vol-w: 320px;
  --vol-h: 84px;

  /* Portée interne */
  --staff-h: 54px;
  --staff-inset-y: 12px;
  --staff-inset-x: 14px;
  --knob: 22px;

  /* Boutons menu (fond PNG) */
  --menu-btn-h: 70px;

  /* =========================
     TYPO MENU (RÉGLABLE ICI)
     ========================= */
  --menu-font-family: "CherryBombOne", system-ui, sans-serif;
  --menu-font-size: 1.95rem;

  /* Décalage vertical du texte (AU PIXEL PRÈS) */
  --menu-text-offset-y: -6px;  /* - = monte / + = descend */

  /* Contour */
  --menu-stroke: 1px;
  --menu-stroke-color: rgba(0,0,0,.95);

  /* Interlettrage */
  --menu-letter-spacing: 0.02em;
  --menu-letter-spacing-hover: 0.04em;

  /* Hauteur de ligne */
  --menu-line-height: 1.1;

  /* Rosette PWA (dans menu) */
  --rosette-w: 120px;
  --rosette-label: 14px;
}


/* ===============================================================
   TYPO APPLIQUÉE (1 SEULE FOIS, PAS DE CONFLIT)
   =============================================================== */
.cm-menu,
.cm-menu a,
.cm-menu button,
.cm-install-label {
  font-family: var(--menu-font-family);
  letter-spacing: var(--menu-letter-spacing);
  line-height: var(--menu-line-height);
  text-transform: none;
}

.cm-menu a{
  color: rgba(255,255,255,.95);
  -webkit-text-stroke: var(--menu-stroke) var(--menu-stroke-color);
  paint-order: stroke fill; /* support partiel */
}


/* ===============================================================
   BURGER
   =============================================================== */
.cm-burger{
  position: fixed;
  top: 18px;
  left: 18px;
  width: 54px;
  height: 46px;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  z-index: 1200;
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(6px);
  box-shadow: 0 14px 28px rgba(0,0,0,.18);
}

.cm-burger span{
  display:block;
  height:3px;
  width:26px;
  margin:6px auto;
  border-radius:999px;
  background: rgba(255,255,255,.92);
  transition: transform .35s ease, opacity .25s ease;
}

.cm-burger.is-open span:nth-child(1){ transform: translateY(9px) rotate(45deg); }
.cm-burger.is-open span:nth-child(2){ opacity:0; }
.cm-burger.is-open span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }


/* ===============================================================
   OVERLAY
   =============================================================== */
.cm-overlay{
  position: fixed;
  inset:0;
  z-index:1100;
  background:
    radial-gradient(800px 500px at 20% 30%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(700px 400px at 70% 60%, rgba(255,255,255,.08), transparent 60%),
    rgba(10,10,10,.55);
  opacity:0;
  transition: opacity .35s ease;
  pointer-events:none;
}

.cm-overlay.is-open{
  opacity:1;
  pointer-events:auto;
}


/* ===============================================================
   SIDEBAR (ne scrolle jamais)
   =============================================================== */
.cm-sidebar{
  position: fixed;
  top:0;
  left:0;
  width: min(var(--sidebar-w), 92vw);
  height: 100vh;
  z-index:1150;

  background-color: rgba(20,15,10,.30);
  background-image: url("../assets/textures/menu-texture.png");
  background-repeat: repeat-y;
  background-position: left top;
  background-size: 100% auto;

  box-shadow:
    inset -10px 0 16px rgba(0,0,0,.40),
    18px 0 70px rgba(0,0,0,.48),
    6px 0 18px rgba(0,0,0,.28);

  transform: translateX(-105%);
  transition: transform .45s ease;
  overflow: hidden;
}

.cm-sidebar.is-open{ transform: translateX(0); }

.cm-sidebar-inner{
  height:100%;
  padding: var(--sidebar-pad-top) var(--sidebar-pad-x) var(--sidebar-pad-bot);
  display:flex;
  flex-direction:column;
  gap: var(--sidebar-gap);
  overflow: hidden;
}


/* ===============================================================
   RÉCOMPENSES (empreintes FIXES)
   =============================================================== */
.cm-rewards{
  flex: 0 0 auto;
  display:flex;
  justify-content:center;
  align-items:center;
  gap: var(--reward-gap);
  margin-top: var(--rewards-mt);
  margin-bottom: var(--rewards-mb);
  padding: 2px 0;
}

.cm-reward-slot{
  all: unset;
  width: var(--reward-slot);
  height: var(--reward-slot);
  cursor: default;
  background: url("/assets/images/empreinte-rosette.png") center/contain no-repeat;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.18));
  opacity: 1;
  -webkit-tap-highlight-color: transparent;
}

.cm-reward-slot.is-earned{
  background-image: url("/assets/images/rosette-application.png");
  opacity: 1;
}


/* ===============================================================
   PANNEAU MUSIQUE (FIXE)
   =============================================================== */
.cm-panel-top{
  position: relative;
  width: 100%;
  margin-top: var(--panel-mt);
  margin-bottom: 6px;
  isolation: isolate;
  flex: 0 0 auto;
}

.cm-panel-top__img{
  display:block;
  width:100%;
  height:auto;
  pointer-events:none;
  user-select:none;
}

/* Clé de sol */
.cm-panel-top__music{
  position: absolute;
  top: var(--music-top);
  left: var(--music-left);
  width: var(--music-size);
  height: var(--music-size);
  border:0;
  padding:0;
  cursor:pointer;
  background-color: transparent;

  /* ✅ chemins officiels underscore */
  background-image: url("../assets/textures/clef_before.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
  transition: transform .2s ease, filter .2s ease;
}

.cm-panel-top__music[aria-pressed="true"],
.cm-panel-top__music.is-on{
  background-image: url("../assets/textures/clef_after.png");
  transform: scale(1.04);
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.45));
}

.cm-panel-top__music:active{ transform: scale(0.96); }


/* Volume / portée */
.cm-panel-top__volume{
  position: absolute;
  top: var(--vol-top);
  left: var(--vol-left);
  width: var(--vol-w);
  height: var(--vol-h);
  display: flex;
  align-items: center;
}

.cm-staff{ position: relative; width: 100%; height: var(--staff-h); }

.cm-staff-lines{
  position:absolute;
  inset: var(--staff-inset-y) var(--staff-inset-x);
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.cm-staff-lines span{
  height: 2px;
  background: rgba(0,0,0,.65);
  border-radius: 999px;
  opacity: .85;
}

.cm-knob{
  position:absolute;
  top: calc(var(--staff-inset-y) + (100% - (var(--staff-inset-y) * 2)) * 0.75);
  left: 30%;
  width: var(--knob);
  height: var(--knob);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  background: url("../assets/textures/knob_ivory.png") center/contain no-repeat;
  box-shadow: 0 12px 18px rgba(0,0,0,.25);
  pointer-events: none;
}

.cm-staff-hit{
  position:absolute;
  inset:0;
  cursor:pointer;
  touch-action:none;
}


/* ===============================================================
   ZONE SCROLLABLE
   =============================================================== */
.cm-scroll{
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  display:flex;
  flex-direction:column;
  gap: 14px;

  padding-right: 2px;
}

.cm-scroll::-webkit-scrollbar{ width: 0; height: 0; }
.cm-scroll{ scrollbar-width: none; -ms-overflow-style: none; }


/* ===============================================================
   LOGO
   =============================================================== */
.cm-logo{
  width: 100%;
  display:flex;
  justify-content:center;
  margin-top: var(--logo-mt);
  margin-bottom: var(--logo-mb);
}

.cm-logo img{
  width: var(--logo-w);
  height: auto;
  max-width: 100%;
  pointer-events:none;
  user-select:none;
}


/* ===============================================================
   MENU BOUTONS
   =============================================================== */
.cm-menu{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.cm-menu a{
  display:flex;
  align-items:center;
  justify-content:center;
  height: var(--menu-btn-h);

  text-decoration:none;

  font-size: var(--menu-font-size);
  font-weight: 400; /* IMPORTANT: pas de bold pour CherryBombOne */
  line-height: 1;

  background: url("../assets/textures/bouton-before-grand.png") center/contain no-repeat;

  transition:
    transform .12s ease,
    letter-spacing .25s ease,
    background-image .12s ease;
}

/* ✅ le texte est dans un span, on le déplace au pixel */
.cm-menu a > span{
  position: relative;
  top: var(--menu-text-offset-y);
  display:inline-block;
}

.cm-menu a:hover{
  background-image: url("../assets/textures/bouton-after-grand.png");
  transform: translateY(1px);
  letter-spacing: var(--menu-letter-spacing-hover);
}

/* Variante FLEUR */
.cm-menu a.is-flower{
  background-image: url("../assets/textures/bouton-fleur-before-grand.png");
}
.cm-menu a.is-flower:hover{
  background-image: url("../assets/textures/bouton-fleur-after-grand.png");
}

/* Bouton Gazette illustré */
.cm-menu__gazette-item{
  list-style:none;
}

.cm-menu__gazette-btn{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height: var(--menu-btn-h);
  text-decoration:none;
  background-position:center;
  background-repeat:no-repeat;
  background-size:auto 100%;
  transition:
    transform .12s ease,
    filter .18s ease,
    background-image .12s ease;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.24));
}

.cm-menu__gazette-btn:hover{
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.30));
}

.cm-menu__gazette-btn--read{
  background-image: url("../assets/textures/bouton-fleur-before-grand.png");
}

.cm-menu__gazette-btn--read:hover{
  background-image: url("../assets/textures/bouton-fleur-after-grand.png");
  transform: translateY(1px);
}

.cm-menu__gazette-btn--read.is-unread{
  background-image: url("../assets/textures/bouton-news-before-grand.png");
}

.cm-menu__gazette-btn--read.is-unread:hover{
  background-image: url("../assets/textures/bouton-news-after-grand.png");
  transform: translateY(1px);
}

.cm-menu__gazette-btn-label{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 15% 0;
  text-align: center;
  color: rgba(92,36,6,.96);
  font-size: var(--menu-font-size);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--menu-letter-spacing);
  -webkit-text-stroke: 1px rgba(255,245,220,.35);
  text-shadow:
    0 1px 0 rgba(255,248,230,.28),
    0 2px 10px rgba(90,40,0,.12);
  white-space: nowrap;
  transform: translateY(1px);
  pointer-events: none;
}

.cm-menu__gazette-btn-label--read{
  font-size: var(--menu-font-size);
  letter-spacing: 0.01em;
}

.cm-menu__gazette-btn--read.is-unread .cm-menu__gazette-btn-label--read{
  opacity: 0;
}

.cm-gazette-toast-root{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1600;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  pointer-events: none;
}

.cm-gazette-toast{
  width: min(360px, calc(100vw - 24px));
  background: linear-gradient(180deg, rgba(255,250,240,.98) 0%, rgba(247,236,214,.98) 100%);
  border: 1px solid rgba(116,72,24,.24);
  border-radius: 18px;
  box-shadow: 0 18px 46px rgba(0,0,0,.28);
  opacity: 0;
  transform: translateY(14px) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: auto;
  overflow: hidden;
}

.cm-gazette-toast.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
}

.cm-gazette-toast__close{
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #f85151 0%, #b61212 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 12px rgba(112,0,0,.26);
}

.cm-gazette-toast__close:hover{
  transform: scale(1.04);
}

.cm-gazette-toast__link{
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px 40px 14px 14px;
  text-decoration: none;
  color: inherit;
}

.cm-gazette-toast__logo{
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 14px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(123,82,20,.14);
  padding: 6px;
}

.cm-gazette-toast__text{
  min-width: 0;
}

.cm-gazette-toast__kicker{
  margin-bottom: 3px;
  color: #885119;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.cm-gazette-toast__title{
  color: #4b2505;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
}

.cm-gazette-toast__meta{
  margin-top: 4px;
  color: #6b4b26;
  font-size: 12px;
  line-height: 1.35;
}

@media (max-width: 640px){
  .cm-gazette-toast-root{
    right: 12px;
    left: 12px;
    bottom: 12px;
    align-items: stretch;
  }

  .cm-gazette-toast{
    width: auto;
  }
}

/* ===============================================================
   ROSETTE PWA
   =============================================================== */
.cm-rosette-wrap{
  list-style:none;
  display:flex;
  justify-content:center;
  margin: 18px 0 8px;
}

.cm-install-badge{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 6px;

  border: 0;
  background: transparent;
  padding: 6px 6px;
  margin: 0;

  border-radius: 14px;
  cursor: pointer;

  transition: transform .18s ease, filter .18s ease;
  -webkit-tap-highlight-color: transparent;
}

.cm-install-badge img{
  width: var(--rosette-w);
  height: auto;
  display:block;
  pointer-events:none;
  user-select:none;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
}

.cm-install-label{
  font-weight: 400;
  color: #d9b56c;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
  font-size: var(--rosette-label);
}

.cm-install-badge.is-disabled,
.cm-install-badge[aria-disabled="true"]{
  opacity: 1 !important;
  filter: none !important;
  cursor: default;
}

.cm-install-badge.is-active:hover{
  transform: translateY(-2px) scale(1.03);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}

.cm-rosette-wrap.is-hidden{
  display:none !important;
}

/* Si l’appli est installée, on cache la source de rosette dès le rendu */
html.cm-pwa-installed #cmRosetteWrap,
html.cm-pwa-installed #installBadge{
  display: none !important;
}


/* ===============================================================
   PANNEAU BAS
   =============================================================== */
.cm-panel-bottom{
  margin-top: var(--panel-bottom-mt);
  margin-bottom: var(--panel-bottom-mb);
  width: 100%;
}

.cm-panel-bottom__img{
  display:block;
  width:100%;
  height:auto;
  pointer-events:none;
  user-select:none;
}

/* ===============================================================
   PANNEAU BAS — position 1/3 - 2/3 exact
   =============================================================== */
.cm-panel-bottom{
  position: relative;
  width: 100%;
}

/* image bois */
.cm-panel-bottom__img{
  display:block;
  width:100%;
  height:auto;
  pointer-events:none;
  user-select:none;
}

/* couche positionnement */
.cm-panel-bottom__social{
  position: absolute;
  inset: 0 8% 0 8%;
  display: grid;
  grid-template-columns: repeat(var(--cm-social-count, 4), minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: clamp(4px, 1.2vw, 12px);
  pointer-events: none; /* évite conflit */
}

/* boutons */
.cm-social-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(72px, 82%);
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 999px;
  pointer-events: auto;
  transition: transform .12s ease, filter .12s ease;
}

.cm-social-btn img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 999px;
  display:block;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.28));
}

/* Hover */
.cm-social-btn:hover{
  transform: scale(1.05);
}

.cm-social-btn:active{
  transform: scale(0.95);
}

/* Focus clavier */
.cm-social-btn:focus-visible{
  outline: 3px solid rgba(255,255,255,.6);
  outline-offset: 3px;
}

/* Responsive */
@media (max-width: 600px){
  .cm-panel-bottom__social{
    inset: 0 7% 0 7%;
    gap: 6px;
  }
  .cm-social-btn{
    width: min(54px, 88%);
  }
}

@media (max-width: 360px){
  .cm-panel-bottom__social{
    inset: 0 5% 0 5%;
    gap: 4px;
  }
  .cm-social-btn{
    width: min(48px, 92%);
  }
}

/* ===============================================================
   ANIMATION “gain”
   =============================================================== */
.cm-reward-fly{
  position: fixed;
  inset: 0;
  z-index: 3000;
  pointer-events: none;
}

.cm-reward-fly__img{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 180px;
  height: auto;
  transform: translate(-50%, -50%) scale(0.65);
  opacity: 0;
  filter: drop-shadow(0 18px 35px rgba(0,0,0,.35));
}

.cm-reward-fly.is-pop .cm-reward-fly__img{
  animation: cmRewardPop .55s ease both;
}

@keyframes cmRewardPop{
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(0.55) rotate(-2deg); }
  55%  { opacity: 1; transform: translate(-50%,-50%) scale(1.08) rotate(2deg); }
  100% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0deg); }
}

.cm-reward-fly.is-fly .cm-reward-fly__img{
  transition: transform .75s cubic-bezier(.2,.9,.2,1), opacity .2s ease;
}


/* ===============================================================
   RESPONSIVE (variables)
   =============================================================== */
@media (max-width: 1024px){
  :root{
    --sidebar-w: 420px;
    --panel-mt: 40px;

    --music-top: 25px;
    --music-left: 46px;
    --music-size: 85px;

    --lang-top: 14px;
    --lang-right: 26px;
    --lang-size: 34px;

    --vol-top: 30px;
    --vol-left: 100px;
    --vol-w: 250px;
    --vol-h: 78px;

    --logo-w: 170px;

    --reward-slot: 40px;
    --reward-gap: 9px;

    --rosette-w: 110px;

    --menu-font-size: 1.45rem;
    --menu-text-offset-y: -2px;
  }
  .cm-reward-fly__img{ width: 160px; }
}

@media (min-width: 600px) and (max-width: 1024px) and (orientation: portrait){
  :root{
    --logo-w: 130px;
    --logo-mt: 10px;
    --logo-mb: 8px;
  }
}

@media (max-width: 600px){
  :root{
    --sidebar-w: 340px;
    --panel-mt: 34px;

    --logo-w: 160px;
    --logo-mt: 10px;
    --logo-mb: 8px;

    --music-top: 25px;
    --music-left: 40px;
    --music-size: 60px;

    --lang-top: 12px;
    --lang-right: 20px;
    --lang-size: 30px;

    --vol-top: 30px;
    --vol-left: 75px;
    --vol-w: 200px;
    --vol-h: 52px;

    --staff-h: 46px;
    --staff-inset-y: 10px;
    --staff-inset-x: 12px;
    --knob: 18px;

    --menu-btn-h: 82px;

    --reward-slot: 36px;
    --reward-gap: 8px;

    --rosette-w: 100px;
    --rosette-label: 13px;

    --menu-font-size: 1.35rem;
    --menu-text-offset-y: -1px;
  }

  .cm-burger{
    top:14px;
    left:14px;
    width:48px;
    height:42px;
  }

  .cm-reward-fly__img{ width: 140px; }
}

@media (max-width: 360px){
  :root{
    --sidebar-w: 320px;
    --panel-mt: 30px;

    --logo-w: 145px;

    --music-top: 16px;
    --music-left: 24px;
    --music-size: 58px;

    --lang-top: 9px;
    --lang-right: 16px;
    --lang-size: 28px;

    --vol-top: 22px;
    --vol-left: 62px;
    --vol-w: 170px;
    --vol-h: 48px;

    --staff-h: 44px;
    --staff-inset-y: 9px;
    --staff-inset-x: 10px;
    --knob: 16px;

    --menu-btn-h: 78px;

    --reward-slot: 34px;
    --reward-gap: 7px;

    --rosette-w: 94px;

    --menu-font-size: 1.25rem;
    --menu-text-offset-y: -1px;
  }

  .cm-reward-fly__img{ width: 130px; }
}


/* =====================================================
   MENU AUTH
   ===================================================== */

.cm-menu-auth{
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cm-menu-auth__btn{
  display: block;
  text-align: center;
  padding: 10px 12px;
  border-radius: 16px;
  font-weight: 800;
  text-decoration: none;
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.95);
  border: 1px solid rgba(255,255,255,.15);
  transition: all .2s ease;
}

.cm-menu-auth__btn:hover{
  background: rgba(255,255,255,.18);
}

.cm-menu-auth__btn--admin{
  background: rgba(200,80,80,.25);
  border-color: rgba(200,80,80,.4);
}

.cm-menu-auth__btn--logout{
  background: rgba(0,0,0,.25);
}


/* ===============================================================
   BOUTON ALBUM DE NAISSANCE
   =============================================================== */
.cm-menu__album-item{
  list-style:none;
  margin:6px 0 10px;
}

.cm-menu__album-link{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:118px;
  width:100%;
  padding:18px 24px;
  background:url("/assets/images/ui/menu-album-naissance.webp") center/contain no-repeat;
  text-decoration:none;
}

.cm-menu__album-link span{
  display:block;
  text-align:center;
  line-height:1.02;
  color:rgba(255,255,255,.98);
  font-family:var(--menu-font-family);
  font-size:1.68rem;
  letter-spacing:.01em;
  -webkit-text-stroke:1px rgba(0,0,0,.92);
  text-shadow:0 2px 6px rgba(0,0,0,.35);
  transform:translateY(-2px);
}

@media (max-width: 760px){
  .cm-menu__album-link{
    min-height:100px;
    padding:14px 18px;
  }
  .cm-menu__album-link span{
    font-size:1.38rem;
  }
}

/* ===============================================================
   ALBUM DE NAISSANCE - BOUTON + BADGE NOTIFICATIONS
   =============================================================== */
.cm-menu__album-item{
  display:flex;
  justify-content:center;
}

.cm-menu__album-link{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:84px;
  width:min(100%, 360px);
  padding:12px 28px;
  text-decoration:none;
  background:url('/assets/images/ui/menu-album-naissance.webp') center/contain no-repeat;
}

.cm-menu__album-label{
  display:inline-block;
  text-align:center;
  line-height:1.02;
}

.cm-menu__album-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:34px;
  padding:0 10px;
  border-radius:999px;
  background:linear-gradient(135deg,#ff8298,#ff5576);
  color:#fff;
  font-weight:900;
  font-size:1rem;
  -webkit-text-stroke:0;
  box-shadow:0 8px 18px rgba(0,0,0,.28);
}

.cm-puppy-toast-root{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:1600;
  display:grid;
  gap:12px;
}

.cm-puppy-toast{
  display:grid;
  gap:4px;
  width:min(320px, calc(100vw - 36px));
  padding:14px 16px;
  border-radius:18px;
  text-decoration:none;
  color:#fff;
  background:linear-gradient(180deg, rgba(28,37,52,.98), rgba(13,19,28,.98));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 30px rgba(0,0,0,.3);
  opacity:0;
  transform:translateY(12px);
  transition:opacity .25s ease, transform .25s ease;
}

.cm-puppy-toast.is-visible{
  opacity:1;
  transform:translateY(0);
}

.cm-puppy-toast__kicker{
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#ffbfce;
}

.cm-puppy-toast__title{
  font-size:17px;
  font-weight:800;
  color:#fff6f1;
}

.cm-puppy-toast__meta{
  color:#dbe2ef;
  font-size:14px;
}

/* ===============================================================
   LANGUE / MODALE LANGUE
   =============================================================== */
.cm-lang-switch__btn{
  position: absolute;
  top: var(--lang-top);
  right: var(--lang-right);
  z-index: 2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: var(--lang-size);
  height: var(--lang-size);
  padding: 0;
  border: 0;
  background: transparent;
  cursor:pointer;
  color: rgba(255,255,255,.98);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.38));
  transition: transform .18s ease, filter .18s ease;
}

.cm-lang-switch__btn:hover{
  transform: scale(1.08);
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.46));
}

.cm-lang-switch__btn:active{
  transform: scale(0.94);
}

.cm-lang-switch__flag{
  display:block;
  width: calc(var(--lang-size) - 2px);
  height: auto;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
}

.cm-lang-modal{
  position: fixed;
  inset: 0;
  z-index: 1600;
}

.cm-lang-modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(10,10,10,.62);
  backdrop-filter: blur(4px);
}

.cm-lang-modal__dialog{
  position: relative;
  z-index: 1;
  width: min(92vw, 460px);
  margin: 10vh auto 0;
  background: linear-gradient(180deg, rgba(37,27,18,.96), rgba(20,13,9,.96));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 26px;
  box-shadow: 0 24px 60px rgba(0,0,0,.42);
  padding: 22px 20px 20px;
  color: rgba(255,255,255,.96);
}

.cm-lang-modal__dialog h2{
  margin: 0 0 8px;
  font-size: 1.45rem;
}

.cm-lang-modal__dialog p{
  margin: 0 0 14px;
  color: rgba(255,255,255,.82);
}

.cm-lang-modal__close{
  position:absolute;
  top: 12px;
  right: 12px;
  border:0;
  border-radius: 999px;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,.08);
  color: #fff;
  cursor:pointer;
}

.cm-lang-modal__choices{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}

.cm-lang-modal__choice{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: #fff;
  cursor:pointer;
  text-align:left;
}

.cm-lang-modal__choice:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
}

.cm-lang-modal__flag{
  width: 28px;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
  flex: 0 0 auto;
}
.cm-lang-modal__status{
  margin-top: 14px !important;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
}

body.cm-lang-modal-open{ overflow:hidden; }

@media (max-width: 540px){
  .cm-lang-modal__choices{ grid-template-columns: 1fr; }
}

/* ===============================================================
   PATCH FINAL - BOUTON ALBUM CHIOT AVEC LES IMAGES UTILISATEUR
   Alignement interne texte + pastille notifications
   =============================================================== */
.cm-menu__album-item{
  list-style:none !important;
  width:100% !important;
  margin:8px 0 12px !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.cm-menu__album-link{
  position:relative !important;
  display:block !important;
  flex:0 1 370px !important;
  width:min(370px, calc(100% - 72px)) !important;
  aspect-ratio:1838 / 625 !important;
  min-height:0 !important;
  height:auto !important;
  padding:0 !important;
  box-sizing:border-box !important;
  text-decoration:none !important;
  background-image:url("/assets/images/ui/menu-album-chiot-before.png?v=20260428b") !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:100% 100% !important;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.22)) !important;
  transform:none !important;
  transition:filter .12s ease !important;
  -webkit-tap-highlight-color:transparent !important;
  overflow:visible !important;
  isolation:isolate !important;
}

.cm-menu__album-link:hover,
.cm-menu__album-link:focus-visible,
.cm-menu__album-link:active{
  background-image:url("/assets/images/ui/menu-album-chiot-after.png?v=20260428b") !important;
  transform:none !important;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.22)) !important;
}

.cm-menu__album-label{
  position:absolute !important;
  z-index:1 !important;
  left:39% !important;
  top:48.5% !important;
  width:45% !important;
  display:block !important;
  text-align:center !important;
  line-height:.94 !important;
  font-family:var(--menu-font-family) !important;
  font-size:clamp(1.22rem, 4.15vw, 1.56rem) !important;
  letter-spacing:.01em !important;
  color:rgba(255,255,255,.98) !important;
  -webkit-text-stroke:1px rgba(0,0,0,.92) !important;
  paint-order:stroke fill !important;
  text-shadow:0 2px 5px rgba(0,0,0,.45) !important;
  transform:translate(-50%, -50%) !important;
  pointer-events:none !important;
  white-space:normal !important;
}

.cm-menu__album-badge{
  position:absolute !important;
  z-index:2 !important;
  left:79.2% !important;
  top:48.2% !important;
  transform:translate(-50%, -50%) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:clamp(60px, 20.5%, 82px) !important;
  height:clamp(30px, 28%, 40px) !important;
  min-width:0 !important;
  padding:0 8px !important;
  box-sizing:border-box !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,#ff7f96 0%, #ff385f 100%) !important;
  border:3px solid rgba(255,236,196,.96) !important;
  color:#fff !important;
  font-family:var(--menu-font-family) !important;
  font-size:clamp(.98rem, 3.2vw, 1.12rem) !important;
  line-height:1 !important;
  -webkit-text-stroke:0 !important;
  text-shadow:0 2px 4px rgba(120,0,30,.45) !important;
  box-shadow:0 5px 10px rgba(0,0,0,.25), inset 0 2px 3px rgba(255,255,255,.35) !important;
  pointer-events:none !important;
}

.cm-menu__album-badge[hidden]{
  display:none !important;
}

@media (max-width:760px){
  .cm-menu__album-item{
    margin:7px 0 11px !important;
  }

  .cm-menu__album-link{
    flex-basis:330px !important;
    width:min(330px, calc(100% - 64px)) !important;
  }

  .cm-menu__album-label{
    left:39% !important;
    top:48.7% !important;
    width:45% !important;
    font-size:clamp(1.08rem, 5vw, 1.38rem) !important;
    line-height:.94 !important;
  }

  .cm-menu__album-badge{
    left:79.2% !important;
    top:48.4% !important;
    width:clamp(54px, 20.8%, 74px) !important;
    height:clamp(28px, 28%, 36px) !important;
    padding:0 7px !important;
    font-size:clamp(.9rem, 4.1vw, 1rem) !important;
    border-width:2px !important;
  }
}


/* ===============================================================
   PATCH MENU DOSSIER BOSTON TEXTE TROP LONG
   Le libellé "Le Boston Terrier" est plus long que les autres.
   Correction ciblée : on réduit uniquement ce bouton.
   =============================================================== */
.cm-menu a[href="/boston-terrier.php"],
.cm-menu a[href="/origine-boston-terrier.php"]{
  font-size: clamp(1.34rem, 4.55vw, 1.56rem);
  letter-spacing: 0;
}

.cm-menu a[href="/boston-terrier.php"] > span,
.cm-menu a[href="/origine-boston-terrier.php"] > span{
  max-width: 78%;
  white-space: nowrap;
  text-align: center;
  transform: translateY(1px);
}

.cm-menu a[href="/boston-terrier.php"]:hover,
.cm-menu a[href="/origine-boston-terrier.php"]:hover{
  letter-spacing: .01em;
}

@media (max-width: 520px){
  .cm-menu a[href="/boston-terrier.php"],
  .cm-menu a[href="/origine-boston-terrier.php"]{
    font-size: clamp(1.12rem, 5.35vw, 1.34rem);
  }

  .cm-menu a[href="/boston-terrier.php"] > span,
  .cm-menu a[href="/origine-boston-terrier.php"] > span{
    max-width: 74%;
  }
}

/* ===============================================================
   PATCH MENU DOSSIER BOULEDOGUE TEXTE TROP LONG
   Le libellé "Bouledogue Français" déborde du bouton illustré.
   Correction ciblée : réduction uniquement sur ce bouton, sans toucher
   aux autres entrées du menu.
   =============================================================== */
.cm-menu a[href="/bouledogue-francais.php"]{
  font-size: clamp(1.08rem, 3.75vw, 1.34rem);
  letter-spacing: 0;
}

.cm-menu a[href="/bouledogue-francais.php"] > span{
  max-width: 82%;
  white-space: nowrap;
  text-align: center;
  transform: translateY(1px);
}

.cm-menu a[href="/bouledogue-francais.php"]:hover{
  letter-spacing: .005em;
}

@media (max-width: 520px){
  .cm-menu a[href="/bouledogue-francais.php"]{
    font-size: clamp(1rem, 4.45vw, 1.18rem);
  }

  .cm-menu a[href="/bouledogue-francais.php"] > span{
    max-width: 80%;
  }
}