/* ═══════════════════════════════════════════════════════════════════════════
   ESPACE CLIENT — BARRE DE NAVIGATION UNIQUE
   ---------------------------------------------------------------------------
   Reprend la barre de l'application interne ROY HABITAT : pilule flottante en
   bas sur téléphone, rail vertical à gauche à partir de 769 px. Une bulle
   glisse d'un onglet à l'autre. Le cinquième bouton ouvre une feuille qui
   contient TOUT le menu du compte, plus l'accès au menu du site : le client
   n'a donc plus qu'un seul point d'entrée.
   ═══════════════════════════════════════════════════════════════════════════ */

#rec-tabbar,#rec-tabbar *,#rec-sheet,#rec-sheet *{ box-sizing:border-box; }

body.rec-page{
  --rec-rebond:cubic-bezier(.34,1.38,.5,1);
  --rec-ease:cubic-bezier(.22,1,.36,1);
  --rec-accent:#C24E26;
  --rec-encre:#1A1510;
}

/* ── L'ancien menu disparaît : un seul menu pour le client ───────────────── */
body.rec-page .rec-burger,
body.rec-page .rec-nav,
body.rec-page .rec-nav-cb{ display:none !important; }
/* Le bouton d'appel flottant du site occuperait la même place que la pilule. */
body.rec-page .rh-fab{ display:none !important; }
/* Le burger du site reste dans le DOM (la feuille s'en sert) mais sort de l'écran. */
body.rec-page .nav-burger{ display:none !important; }

/* ── Réserve d'espace pour le contenu ────────────────────────────────────── */
body.rec-page .rec-main{ padding-bottom:calc(var(--rec-tabh,104px) + 10px); }

@media(min-width:769px){
  body.rec-page .rec-app{
    display:block !important; grid-template-columns:none !important;
    padding-left:104px !important; padding-right:24px !important;
  }
  body.rec-page .rec-main{ padding-bottom:40px; }
}

/* ═══ 1. LA BARRE ════════════════════════════════════════════════════════ */
#rec-tabbar{
  position:fixed; left:27px; right:27px; max-width:386px; margin:0 auto;
  bottom:max(11px,calc(env(safe-area-inset-bottom) - 4px));
  z-index:900; display:flex; gap:0; padding:5px 8px; border-radius:999px;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(30px) saturate(200%); backdrop-filter:blur(30px) saturate(200%);
  border:.5px solid rgba(255,255,255,.5);
  box-shadow:0 8px 26px rgba(20,16,12,.12),0 1px 2px rgba(20,16,12,.04);
  transition:left .26s var(--rec-ease),right .26s var(--rec-ease),
             padding .26s var(--rec-ease),opacity .24s,transform .28s var(--rec-ease);
  touch-action:pan-y; -webkit-user-select:none; user-select:none;
  transform:translateZ(0); overflow:hidden; isolation:isolate;
}
/* La bulle qui suit l'onglet actif */
#rec-tabbar .ind{
  position:absolute; top:5px; bottom:5px; border-radius:999px;
  background:rgba(20,16,12,.085); z-index:0; opacity:0; pointer-events:none;
  transition:left .34s var(--rec-rebond),width .34s var(--rec-rebond),
             top .34s var(--rec-rebond),height .34s var(--rec-rebond),opacity .2s;
}
#rec-tabbar.sync .ind{ transition:none; }
/* Pendant le glissement du doigt, la bulle colle au doigt : pas de rebond. */
#rec-tabbar.glisse .ind{ transition:left .09s linear,width .09s linear,top .09s linear,height .09s linear; }

#rec-tabbar .rec-tab{
  position:relative; z-index:1; flex:1; min-width:0; border:0; background:none;
  font-family:inherit; cursor:pointer; display:flex; align-items:center; justify-content:center;
  padding:8px 0; border-radius:999px; color:var(--rec-encre); text-decoration:none;
  opacity:.42; transition:transform .16s,opacity .18s,padding .26s var(--rec-ease);
  -webkit-tap-highlight-color:transparent;
}
#rec-tabbar .rec-tab svg{
  width:26px; height:26px; display:block; stroke:currentColor; fill:none; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
  transition:width .26s var(--rec-ease),height .26s var(--rec-ease),stroke-width .2s;
}
#rec-tabbar .rec-tab .lb{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
#rec-tabbar .rec-tab.on,#rec-tabbar .rec-tab.survol{ opacity:1; }
#rec-tabbar .rec-tab.on svg{ stroke-width:2.4; }
#rec-tabbar .rec-tab.survol{ transform:scale(1.08); }
#rec-tabbar .rec-tab:active{ transform:scale(.9); }
#rec-tabbar .rec-tab:focus-visible{ outline:2px solid var(--rec-accent); outline-offset:-3px; }
/* Pastille de notification */
#rec-tabbar .bg{
  position:absolute; top:7px; left:calc(50% + 5px); min-width:9px; height:9px;
  border-radius:99px; background:#E8503A; border:1.5px solid rgba(252,251,249,.95);
  font-size:0; padding:0; z-index:2;
}
/* Au défilement, la barre se resserre sans descendre */
body.rec-tab-compact #rec-tabbar{ left:60px; right:60px; max-width:320px; padding:3px 6px; }
body.rec-tab-compact #rec-tabbar .rec-tab{ padding:7px 0; }
body.rec-tab-compact #rec-tabbar .rec-tab svg{ width:24px; height:24px; }
body.rec-tab-compact #rec-tabbar .ind{ top:4px; bottom:4px; }
/* Le menu du site prend toute la place : la pilule s'efface */
body.menu-open #rec-tabbar{ opacity:0; pointer-events:none; transform:translateY(24px); }

/* ═══ 2. RAIL VERTICAL À PARTIR DE 769 px ═══════════════════════════════ */
@media(min-width:769px){
  #rec-tabbar{
    left:16px; right:auto; top:50%; bottom:auto; transform:translateY(-50%);
    max-width:none; width:auto; flex-direction:column; gap:2px; padding:7px 4px;
    touch-action:pan-x;
  }
  #rec-tabbar .rec-tab{ flex:0 0 auto; width:52px; height:48px; padding:0; opacity:.45; }
  #rec-tabbar .rec-tab svg{ width:24px; height:24px; }
  #rec-tabbar .rec-tab.on svg{ stroke-width:2.3; }
  #rec-tabbar .rec-tab.survol{ transform:none; }
  #rec-tabbar .ind{ left:4px; right:4px; top:0; bottom:auto; height:48px; width:auto; }
  #rec-tabbar .bg{ top:6px; left:calc(50% + 6px); }
  body.rec-tab-compact #rec-tabbar{ left:16px; right:auto; max-width:none; padding:7px 4px; }
  body.rec-tab-compact #rec-tabbar .rec-tab{ padding:0; }
  body.rec-tab-compact #rec-tabbar .rec-tab svg{ width:24px; height:24px; }
  body.rec-tab-compact #rec-tabbar .ind{ top:0; bottom:auto; }
  body.menu-open #rec-tabbar{ opacity:1; pointer-events:auto; transform:translateY(-50%); }
}

/* ═══ 3. LA FEUILLE DE MENU ═════════════════════════════════════════════ */
#rec-fond{
  position:fixed; inset:0; z-index:1400; background:rgba(20,16,12,.42);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .28s var(--rec-ease);
}
body.rec-menu-ouvert #rec-fond{ opacity:1; pointer-events:auto; }

#rec-sheet{
  position:fixed; z-index:1401; left:10px; right:10px;
  bottom:max(10px,calc(env(safe-area-inset-bottom) + 4px));
  max-height:min(84vh,720px); overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:10px 14px calc(16px + env(safe-area-inset-bottom));
  border-radius:26px;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(30px) saturate(180%); backdrop-filter:blur(30px) saturate(180%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 -10px 60px -18px rgba(20,16,12,.42),0 2px 6px rgba(20,16,12,.06);
  opacity:0; transform:translateY(26px) scale(.985); pointer-events:none;
  transition:opacity .3s var(--rec-ease),transform .34s var(--rec-rebond);
}
body.rec-menu-ouvert #rec-sheet{ opacity:1; transform:none; pointer-events:auto; }

.rs-poignee{
  width:44px; height:4px; border-radius:99px; background:rgba(26,20,16,.16);
  margin:2px auto 12px; cursor:pointer;
}
.rs-entete{
  display:flex; align-items:center; gap:12px; padding:11px 12px; margin-bottom:12px;
  border-radius:18px; background:rgba(26,20,16,.04); text-decoration:none; color:inherit;
  border:1px solid rgba(26,20,16,.06);
}
.rs-av{
  flex:0 0 auto; width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  font:800 16px 'Sora',sans-serif; color:#fff;
  background:linear-gradient(140deg,#E8773A,#C24E26);
}
.rs-qui{ display:flex; flex-direction:column; min-width:0; }
.rs-qui b{ font:800 15px 'Sora',sans-serif; color:var(--rec-encre); line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rs-qui span{ font-size:12.5px; color:#6B6157; }
.rs-fl{ margin-left:auto; color:#9A9088; font-size:20px; line-height:1; }

.rs-titre{
  font:800 11px 'Manrope',sans-serif; letter-spacing:.14em; text-transform:uppercase;
  color:#8A8078; margin:4px 4px 9px;
}
.rs-grille{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
@media(min-width:520px){ .rs-grille{ grid-template-columns:repeat(3,1fr); } }
.rs-t{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:9px;
  padding:14px 13px; border-radius:18px; text-decoration:none;
  background:#fff; border:1px solid rgba(26,20,16,.09);
  box-shadow:0 1px 2px rgba(26,20,16,.04);
  transition:transform .18s var(--rec-ease),border-color .18s,box-shadow .18s;
  -webkit-tap-highlight-color:transparent;
}
.rs-t:hover{ transform:translateY(-2px); border-color:rgba(232,93,47,.4);
  box-shadow:0 12px 24px -16px rgba(26,20,16,.4); }
.rs-t:active{ transform:scale(.97); }
.rs-i{
  display:grid; place-items:center; width:38px; height:38px; border-radius:12px;
  background:rgba(232,93,47,.1); border:1px solid rgba(232,93,47,.2); color:var(--rec-accent);
}
.rs-i svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round; }
.rs-l{ font:800 13.5px 'Manrope',sans-serif; color:var(--rec-encre); line-height:1.25; }
.rs-t.on{ background:rgba(232,93,47,.09); border-color:rgba(232,93,47,.32); }
.rs-t.on .rs-l{ color:var(--rec-accent); }
.rs-b{
  position:absolute; top:11px; right:11px; min-width:19px; height:19px; padding:0 5px;
  border-radius:99px; background:#E8503A; color:#fff;
  font:800 11px 'Manrope',sans-serif; display:grid; place-items:center;
}

/* Passerelle vers le site */
.rs-site{ margin-top:14px; padding-top:14px; border-top:1px solid rgba(26,20,16,.09); }
.rs-passerelle{
  width:100%; display:flex; align-items:center; gap:12px; padding:14px 15px;
  border-radius:18px; cursor:pointer; text-align:left; text-decoration:none;
  font-family:inherit; color:var(--rec-encre);
  background:linear-gradient(150deg,#FFFDF7,#fff 60%);
  border:1px solid rgba(26,20,16,.1);
  box-shadow:0 1px 2px rgba(26,20,16,.04);
  transition:transform .18s var(--rec-ease),box-shadow .18s,border-color .18s;
}
.rs-passerelle:hover{ transform:translateY(-2px); border-color:rgba(232,93,47,.36);
  box-shadow:0 14px 26px -18px rgba(26,20,16,.42); }
.rs-passerelle:active{ transform:scale(.98); }
.rs-passerelle .rs-i{ background:rgba(92,172,224,.12); border-color:rgba(92,172,224,.3); color:#2C7CB5; }
.rs-pt{ display:flex; flex-direction:column; min-width:0; }
.rs-pt b{ font:800 14px 'Sora',sans-serif; line-height:1.25; }
.rs-pt span{ font-size:12.5px; color:#6B6157; }
.rs-pf{ margin-left:auto; color:#9A9088; font-size:17px; line-height:1; }

.rs-quitter{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; margin-top:12px; padding:13px; border-radius:16px;
  font:800 13.5px 'Manrope',sans-serif; color:#9E2D1A; text-decoration:none;
  background:rgba(158,45,26,.07); border:1px solid rgba(158,45,26,.16);
  transition:background .18s;
}
.rs-quitter:hover{ background:rgba(158,45,26,.12); }
.rs-quitter svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round; }

/* Panneau latéral dès 769 px, comme dans l'application */
@media(min-width:769px){
  #rec-sheet{
    left:88px; right:auto; width:364px; top:50%; bottom:auto;
    max-height:calc(100vh - 32px); border-radius:24px;
    padding:16px 16px 18px;
    transform:translate(-18px,-50%) scale(.985);
  }
  body.rec-menu-ouvert #rec-sheet{ transform:translateY(-50%); }
  .rs-poignee{ display:none; }
  .rs-grille{ grid-template-columns:1fr 1fr; }
}

@media (prefers-reduced-motion:reduce){
  #rec-tabbar,#rec-tabbar .ind,#rec-tabbar .rec-tab,#rec-sheet,#rec-fond,.rs-t,.rs-passerelle{
    transition:none !important;
  }
}

/* Bouton secondaire (« Modifier mon mot de passe » dans Mon compte) */
body.rec-page .rec-btn.ghost{
  background:#fff !important; color:var(--rec-accent) !important;
  border:1px solid rgba(232,93,47,.32) !important;
  box-shadow:0 1px 2px rgba(26,20,16,.04) !important;
  margin-top:0 !important;
}
body.rec-page .rec-btn.ghost:hover{
  background:rgba(232,93,47,.06) !important; transform:translateY(-1px);
  box-shadow:0 12px 24px -16px rgba(26,20,16,.4) !important;
}