/* ═══════════════════════════════════════════════════════════════
   header-site-outils.css — Header du site (version pour pages outils)
   Extrait de style.css (variables résolues). Chargé par les pages
   outils qui veulent afficher le header du site en plus de leur
   barre d'outils. Le body de la page DOIT avoir la classe
   richer-fullpage pour que ces règles s'appliquent.
   ═══════════════════════════════════════════════════════════════ */

/* ══ HEADER / NAV / SIDE MENU ══ */
body.richer-fullpage header {
  position: fixed !important;    /* reste collé en haut au défilement (comme le blog) */
  top: 0; left: 0; right: 0;
  z-index: 999 !important;
  height: 100px;
  background: rgba(17,19,24,0.97) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,180,216,0.2);
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  box-sizing: border-box;
  width: 100%;
}

.logo {
  position: relative;
  display: inline-block;
  width: 220px;
  height: 100px;
  text-decoration: none;
  flex-shrink: 0;
}

body.richer-fullpage .logo {
  position: fixed;
  top: 0; left: 0;
  z-index: 1000;
  text-decoration: none;
}

body.richer-fullpage header {
  height: 60px;
  padding: 0 28px 0 220px;
}

.logo-person {
  position: absolute;
  top: 0; left: 0;
  height: 100px;
  width: auto;
}

.logo-richer {
  position: absolute;
  top: 34px;
  left: 91px;
  font-family: 'Exo 2', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.08em;
  line-height: 1;
}

.logo-solution {
  position: absolute;
  top: 64px;
  left: 91px;
  font-family: 'Exo 2', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #5CBFCF;
  letter-spacing: 0.08em;
  line-height: 1;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-right: 28px;
  margin-left: auto;
  height: 100%;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  height: 100%;
  margin: 0;
  padding: 0;
}

body.richer-fullpage .header-right {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-right: 28px;
  margin-left: auto;
}

body.richer-fullpage .header-nav {
  display: flex;
  gap: 4px;
  list-style: none;
}

.header-nav a {
  color: #8b95a3;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  transition: color 0.2s;
  text-transform: uppercase;
}

.header-nav a:hover { color: #00b4d8; }

/* ══════════════════════════════════
   SIDE MENU
══════════════════════════════════ */
.overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 19000;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s;
}

.overlay.open { opacity: 1; pointer-events: all; }

.side-menu {
  position: fixed;
  top: 0; right: -320px;
  width: 300px;
  height: 100%;
  height: 100dvh;
  background: #1a1d24;
  border-left: 1px solid rgba(0,180,216,0.2);
  z-index: 20000;
  transition: right 0.35s cubic-bezier(.4,0,.2,1);
  display: block;
  padding: 0;
  overflow: hidden;
}

.side-menu.open { right: 0; }

.side-menu-header {
  position: relative;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(0,180,216,0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.side-menu-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.side-menu-logo .sm-av {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a6aad, #00b4d8);
  border: 2px solid #00b4d8;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}

.side-menu-logo .r1 { font-size: 15px; font-weight: 800; color: #f0f4f8; letter-spacing: 0.05em; }
.side-menu-logo .r2 { font-size: 11px; font-weight: 600; color: #00b4d8; letter-spacing: 0.08em; }

.close-btn {
  background: none; border: none;
  color: #8b95a3; cursor: pointer;
  font-size: 22px; line-height: 1;
  padding: 4px;
  transition: color 0.2s;
}
.close-btn:hover { color: #00b4d8; }

.side-nav {
  list-style: none;
  padding: 12px 0 130px 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  height: calc(100% - 70px);
  height: calc(100dvh - 70px);
}

.side-nav li a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 24px;
  color: #8b95a3;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-left: 3px solid transparent;
  transition: all 0.2s;
}

.side-nav li a:hover {
  color: #00b4d8;
  background: rgba(0,180,216,0.06);
  border-left-color: #00b4d8;
}

.side-nav li a .nav-icon { font-size: 16px; width: 20px; text-align: center; }

.side-menu-footer {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 16px 24px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(0,180,216,0.2);
  background: #1a1d24;
}

.side-cta {
  display: block;
  background: linear-gradient(90deg, #0090b0, #00b4d8);
  color: #fff;
  text-align: center;
  padding: 12px;
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: opacity 0.2s;
}
.side-cta:hover { opacity: 0.85; }

/* ══════════════════════════════════

/* ══ BOUTON MENU MOBILE ══ */
.menu-btn {
  display: none;
  background: none;
  border: 1px solid rgba(0,180,216,0.2);
  color: #8b95a3;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  transition: all 0.2s;
  align-items: center;
  gap: 8px;
}
.menu-btn:hover { color: #00b4d8; border-color: #00b4d8; }
.hamburger { display: flex; flex-direction: column; gap: 4px; }
.hamburger span { display: block; width: 18px; height: 2px; background: currentColor; transition: all 0.2s; }

/* ══ ACTIVE LINK ══ */
.header-nav a.active,
.side-nav li a.active { color: #00b4d8; }

/* ══ RESPONSIVE HEADER ══ */
@media (max-width: 768px) {
  body.richer-fullpage header { height: 70px !important; }
  body.richer-fullpage header { padding: 0 16px; height: 70px; }
  .header-nav { display: none !important; }
  .menu-btn { display: flex !important; }
  .logo { width: 160px; height: 70px; }
  .logo-person { height: 70px; }
  .logo-richer { top: 22px; left: 54px; font-size: 16px; }
  .logo-solution { top: 44px; left: 54px; font-size: 16px; }
  .side-nav { display: flex; flex-direction: column; }
  .side-nav li a { display: flex; width: 100%; box-sizing: border-box; }
  .rs-login-btn { display: none !important; }
  .rs-auth-user { display: none !important; }
}


@media (max-width: 480px) {
  body.richer-fullpage header { height: 56px !important; }
  .logo { width: 130px; height: 56px; }
  .logo-person { height: 56px; }
  .logo-richer { top: 14px; left: 42px; font-size: 13px; letter-spacing: 0.04em; }
  .logo-solution { top: 32px; left: 42px; font-size: 13px; letter-spacing: 0.04em; }
}


/* ════════════════════════════════════════════════════════════════
   RS AUTH — Bouton Connexion + Dropdown utilisateur connecté
════════════════════════════════════════════════════════════════ */

/* ── Bouton Connexion (desktop header) ── */
.rs-login-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid #00b4d8;
  color: #00b4d8;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.rs-login-btn:hover {
  background: #00b4d8;
  color: #111318;
}

/* ── Bouton Connexion (side menu mobile) ── */
.side-login-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  background: transparent;
  border: 1px solid #00b4d8;
  color: #00b4d8;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  padding: 10px 0;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.side-login-btn:hover {
  background: #00b4d8;
  color: #111318;
}

/* ── Avatar utilisateur connecté ── */
.rs-auth-user {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(0,180,216,0.2);
  transition: border-color 0.2s;
  user-select: none;
}
.rs-auth-user:hover,
.rs-auth-user.open {
  border-color: #00b4d8;
}
.rs-auth-avatar { font-size: 16px; }
.rs-auth-name {
  font-size: 12px;
  font-weight: 700;
  color: #f0f4f8;
  letter-spacing: 0.04em;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Dropdown ── */
.rs-auth-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #1a1d26;
  border: 1px solid rgba(0,180,216,0.2);
  border-radius: 6px;
  min-width: 180px;
  z-index: 9999;
  padding: 6px 0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.rs-auth-user.open .rs-auth-dropdown { display: block; }
.rs-auth-dropdown a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-size: 13px;
  color: #8b95a3;
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}
.rs-auth-dropdown a:hover {
  color: #00b4d8;
  background: rgba(0,180,216,0.06);
}

/* ════════════════════════════════════════════════════════════════
   RS MODAL — Fenêtre de connexion
════════════════════════════════════════════════════════════════ */
.rs-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(4px);
}
.rs-modal-overlay.open {
  display: flex;
}

.rs-modal-box {
  background: #15171e;
  border: 1px solid rgba(0,180,216,0.25);
  border-radius: 10px;
  padding: 32px 28px 28px;
  width: 100%;
  max-width: 420px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
  animation: rsModalIn 0.22s ease;
}
@keyframes rsModalIn {
  from { opacity:0; transform: translateY(-16px) scale(0.97); }
  to   { opacity:1; transform: translateY(0)     scale(1);    }
}

.rs-modal-close {
  position: absolute;
  top: 12px; right: 14px;
  background: none;
  border: none;
  color: #8b95a3;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
}
.rs-modal-close:hover { color: #00b4d8; }

.rs-modal-title {
  font-size: 18px;
  font-weight: 800;
  color: #f0f4f8;
  letter-spacing: 0.05em;
  margin: 0 0 20px;
  text-align: center;
}

/* ── Onglets ── */
.rs-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(0,180,216,0.2);
  padding-bottom: 0;
}
.rs-tab {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #8b95a3;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 8px 4px 10px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  margin-bottom: -1px;
}
.rs-tab:hover { color: #00b4d8; }
.rs-tab.active {
  color: #00b4d8;
  border-bottom-color: #00b4d8;
}

/* ── Panneaux ── */
.rs-panel { display: none; }
.rs-panel.active { display: block; }

.rs-panel-desc {
  font-size: 12px;
  color: #8b95a3;
  margin: 0 0 16px;
  text-align: center;
  line-height: 1.5;
}

/* ── Formulaire ── */
.rs-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rs-form label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #8b95a3;
  text-transform: uppercase;
}
.rs-form input[type="email"],
.rs-form input[type="password"],
.rs-form input[type="text"] {
  width: 100%;
  background: #1e2130;
  border: 1px solid rgba(0,180,216,0.2);
  border-radius: 5px;
  padding: 10px 12px;
  color: #f0f4f8;
  font-size: 13px;
  box-sizing: border-box;
  transition: border-color 0.2s;
  outline: none;
}
.rs-form input:focus { border-color: #00b4d8; }

.rs-pwd-wrap {
  position: relative;
}
.rs-pwd-wrap input { padding-right: 40px; }
.rs-eye {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #8b95a3;
  cursor: pointer;
  font-size: 15px;
  opacity: 0.5;
  padding: 0;
  transition: opacity 0.2s;
}
.rs-eye:hover { opacity: 1; }

.rs-err {
  font-size: 12px;
  color: #ff4d4d;
  background: rgba(255,77,77,0.08);
  border-radius: 4px;
  padding: 8px 12px;
}

.rs-submit {
  width: 100%;
  background: linear-gradient(90deg, #0090b0, #00b4d8);
  border: none;
  border-radius: 5px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 12px 0;
  cursor: pointer;
  transition: opacity 0.2s;
  margin-top: 4px;
}
.rs-submit:hover   { opacity: 0.88; }
.rs-submit:disabled { opacity: 0.5; cursor: not-allowed; }

.rs-link {
  text-align: center;
  font-size: 12px;
  color: #8b95a3;
  text-decoration: none;
  transition: color 0.2s;
}
.rs-link:hover { color: #00b4d8; }

/* ── Responsive modal ── */
@media (max-width: 480px) {
  .rs-modal-box { padding: 24px 16px 20px; }
  .rs-tab { font-size: 10px; padding: 8px 2px 10px; }
}
/* ── Fin RS Auth CSS ── */

/* ═══════════════════════════════════════════════════════════════
   HEADER FIXE + FIL D'ARIANE
   Plus de barre d'outils empilée : les outils sont dans un menu popup
   (rs-outils-menu.php). Le header reste fixe en haut ; le fil d'Ariane,
   premier élément après le header, reçoit la marge qui réserve la
   hauteur du header (comme .blog-wrap sur le blog).
   ═══════════════════════════════════════════════════════════════ */
body.richer-fullpage .rs-crumb {
  margin-top: 100px !important;   /* réserve la hauteur du header fixe (100px) */
}
body.richer-fullpage .tool-wrap { padding-top: 20px; }

@media (max-width: 900px) {
  body.richer-fullpage .rs-crumb { margin-top: 70px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   IMPRESSION — le header site ne doit pas apparaître dans les
   documents imprimés / PDF (CV, lettre de motivation, etc.).
   ═══════════════════════════════════════════════════════════════ */
@media print {
  body.richer-fullpage header { display: none !important; }
  body.richer-fullpage .rs-crumb { display: none !important; margin-top: 0 !important; }
}