/* ============ HEADER GLOBAL (navbar + mobile menu) ============
   Extrait de style_index.css pour etre charge sur TOUTES les pages
   sans polluer le reste de la mise en page (login, formulaires, etc.)
   ============================================================== */

:root{
  --sat:0px;
  --primary-50:#ecfdf5;
  --primary-100:#d1fae5;
  --primary-300:#6ee7b7;
  --primary-light:#34d399;
  --primary:#10b981;
  --primary-rgb:16,185,129;
  --primary-dark:#059669;
  --primary-darker:#047857;
  --primary-800:#065f46;
  --primary-900:#064e3b;
  --slate-50:#f8fafc;
  --slate-100:#f1f5f9;
  --slate-200:#e2e8f0;
  --slate-300:#cbd5e1;
  --slate-400:#94a3b8;
  --slate-500:#64748b;
  --slate-600:#475569;
  --slate-700:#334155;
  --slate-800:#1e293b;
  --slate-900:#0f172a;
  --yellow-400:#facc15;
  --blue-500:#3b82f6;
  --blue-600:#2563eb;
  --purple-500:#a855f7;
  --orange-500:#f97316;
  --red-500:#ef4444;
  --shadow-soft:0 4px 12px rgba(0,0,0,0.05);
  --shadow-md:0 10px 30px rgba(0,0,0,0.08);
  --shadow-lg:0 20px 50px rgba(0,0,0,0.12);
  --shadow-xl:0 30px 80px rgba(0,0,0,0.18);
  --shadow-primary:0 10px 30px rgba(var(--primary-rgb),0.25);
  --ease:cubic-bezier(0.25,0.46,0.45,0.94);
  --ease-spring:cubic-bezier(0.175,0.885,0.32,1.275);
  --ease-out:cubic-bezier(0.16,1,0.3,1);
}

/* ============ MOBILE MENU ============ */
.mobile-menu{
  position:fixed;inset:0;z-index:150;
  pointer-events:none;
  visibility:hidden;
  transition:visibility 0s linear .5s;
}
.mobile-menu.open{
  pointer-events:auto;
  visibility:visible;
  transition:visibility 0s linear 0s;
}
.mobile-menu-backdrop{
  position:absolute;inset:0;
  background:rgba(15,23,42,0);
  backdrop-filter:blur(0px);
  -webkit-backdrop-filter:blur(0px);
  transition:background-color .5s var(--ease-out),backdrop-filter .5s var(--ease-out),-webkit-backdrop-filter .5s var(--ease-out);
}
.mobile-menu.open .mobile-menu-backdrop{
  background:rgba(15,23,42,0.45);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.mobile-menu-panel{
  position:absolute;
  top:0;right:0;bottom:0;
  width:88%;max-width:380px;
  background:linear-gradient(180deg,#fff 0%,#f0fdf4 100%);
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .55s cubic-bezier(0.32,0.72,0,1);
  box-shadow:-30px 0 80px rgba(0,0,0,0.25);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.mobile-menu.open .mobile-menu-panel{transform:translateX(0);}

.mobile-menu-head{
  padding:20px 24px;
  padding-top:calc(20px + var(--sat,0px));
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(var(--primary-rgb),0.12);
  background:white;
  position:sticky;top:0;
  z-index:5;
}
.mobile-menu-logo{
  display:flex;align-items:center;gap:10px;
  font-family:'Inter',sans-serif;
  font-size:20px;font-weight:800;
  letter-spacing:-0.02em;
  background:linear-gradient(135deg,var(--primary-dark),var(--blue-600));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.mobile-menu-logo-mark{
  width:38px;height:38px;
  background:linear-gradient(135deg,var(--primary-light),var(--primary-dark));
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(var(--primary-rgb),0.35);
  flex-shrink:0;
}
.mobile-menu-logo-mark svg{width:24px;height:24px;}
/* Marque du logo (cheval blanc transparent) incrustee dans le badge degrade. */
.mobile-menu-logo-mark picture{display:flex;}
.mobile-menu-logo-mark img{display:block;width:28px;height:25px;object-fit:contain;}

.mobile-menu-close{
  width:44px;height:44px;
  background:linear-gradient(135deg,var(--slate-100),var(--slate-200));
  border:none;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  position:relative;
  cursor:pointer;
  transition:all .35s var(--ease-spring);
  flex-shrink:0;
}
/* Belle croix : vraie icône Tabler (au lieu des 2 barres CSS) + halo doux au repos. */
.mobile-menu-close{box-shadow:0 4px 12px rgba(15,23,42,.10),inset 0 0 0 1px rgba(15,23,42,.05);}
.mobile-menu-close i{
  font-size:22px;line-height:1;color:var(--slate-700);
  transition:color .3s,transform .35s var(--ease-spring);
}
.mobile-menu-close:hover{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  transform:scale(1.1);
  box-shadow:0 12px 26px rgba(var(--primary-rgb),0.45);
}
.mobile-menu-close:hover i{color:#fff;transform:rotate(90deg);}
.mobile-menu-close:active{transform:scale(0.95);}

.mobile-menu-nav{
  flex:1;
  padding:16px 16px 8px;
  display:flex;flex-direction:column;gap:4px;
}
.mobile-menu-link{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;
  border-radius:16px;
  color:var(--slate-800);
  text-decoration:none;
  transition:all .35s var(--ease);
  position:relative;
  background:transparent;
  opacity:0;
  transform:translateX(40px);
}
.mobile-menu.open .mobile-menu-link{
  animation:menuLinkIn .55s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.mobile-menu.open .mobile-menu-link[data-i="0"]{animation-delay:.18s;}
.mobile-menu.open .mobile-menu-link[data-i="1"]{animation-delay:.24s;}
.mobile-menu.open .mobile-menu-link[data-i="2"]{animation-delay:.3s;}
.mobile-menu.open .mobile-menu-link[data-i="3"]{animation-delay:.36s;}
.mobile-menu.open .mobile-menu-link[data-i="4"]{animation-delay:.42s;}
.mobile-menu.open .mobile-menu-link[data-i="5"]{animation-delay:.48s;}
@keyframes menuLinkIn{
  to{opacity:1;transform:translateX(0);}
}
.mobile-menu-link::before{
  content:'';
  position:absolute;
  left:0;top:50%;
  width:3px;height:0;
  background:linear-gradient(180deg,var(--primary-light),var(--primary-dark));
  border-radius:0 4px 4px 0;
  transform:translateY(-50%);
  transition:height .35s var(--ease-spring);
}
.mobile-menu-link:hover,
.mobile-menu-link:active{
  background:linear-gradient(135deg,rgba(var(--primary-rgb),0.08),rgba(59,130,246,0.05));
  transform:translateX(4px);
}
.mobile-menu-link:hover::before{height:60%;}
.mobile-menu-link:hover .mobile-menu-link-icon{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:white;
  transform:rotate(-8deg) scale(1.1);
}
.mobile-menu-link:hover .mobile-menu-link-arrow{
  color:var(--primary-dark);
  transform:translateX(4px);
}
.mobile-menu-link-icon{
  width:44px;height:44px;
  background:white;
  border:1px solid rgba(var(--primary-rgb),0.15);
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  color:var(--primary-dark);
  flex-shrink:0;
  transition:all .35s var(--ease-spring);
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
.mobile-menu-link-icon svg{
  width:22px;height:22px;
  display:block;
}
.mobile-menu-link-text{
  flex:1;display:flex;flex-direction:column;
  min-width:0;
}
.mobile-menu-link-title{
  font-size:15px;font-weight:600;
  color:var(--slate-800);
  letter-spacing:-0.01em;
}
.mobile-menu-link-sub{
  font-size:12px;
  color:var(--slate-500);
  margin-top:2px;
}
.mobile-menu-link-arrow{
  width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  color:var(--slate-400);
  transition:all .3s ease;
  flex-shrink:0;
}
.mobile-menu-link-arrow svg{
  width:18px;height:18px;
  display:block;
}

.mobile-menu-foot{
  padding:16px 24px 12px;
  display:flex;flex-direction:column;gap:10px;
  border-top:1px solid rgba(var(--primary-rgb),0.12);
  background:white;
  opacity:0;
  transform:translateY(20px);
}
.mobile-menu.open .mobile-menu-foot{
  animation:menuFootIn .55s cubic-bezier(0.34,1.56,0.64,1) .55s forwards;
}
@keyframes menuFootIn{
  to{opacity:1;transform:translateY(0);}
}
.mobile-menu-btn-ghost{
  padding:14px 20px;
  border:2px solid var(--slate-200);
  border-radius:14px;
  font-size:15px;font-weight:600;
  color:var(--slate-700);
  background:white;
  text-decoration:none;
  text-align:center;
  transition:all .3s ease;
}
.mobile-menu-btn-ghost:hover{
  border-color:var(--primary);
  color:var(--primary-dark);
}
.mobile-menu-btn-primary{
  padding:14px 20px;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:white;
  border-radius:14px;
  font-size:15px;font-weight:600;
  text-decoration:none;
  display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 6px 18px rgba(var(--primary-rgb),0.35);
  transition:all .3s ease;
}
.mobile-menu-btn-primary:hover{
  background:linear-gradient(135deg,var(--primary-dark),var(--primary-darker));
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(var(--primary-rgb),0.45);
}
.mobile-menu-btn-primary i{font-size:16px;}

/* ============ NAVBAR ============ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding-top:var(--sat,0px);
  transition:all .5s ease;
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
  box-shadow:0 4px 20px rgba(0,0,0,0.08);
  border-bottom:1px solid rgba(var(--primary-rgb),0.15);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
}
/* Sur l'index (hero plein ecran), la nav demarre transparente puis devient pleine au scroll */
body.has-hero .nav{
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
  border-bottom:none;
}
body.has-hero .nav.scrolled,
.nav.scrolled{
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
  box-shadow:0 4px 20px rgba(0,0,0,0.08);
  border-bottom:1px solid rgba(var(--primary-rgb),0.15);
}
.nav-inner{
  max-width:1280px;margin:0 auto;
  padding:16px 24px;
  display:flex;align-items:center;justify-content:space-between;
}
.logo-wrap{display:flex;align-items:center;gap:12px;text-decoration:none;}
.logo-mark{
  width:44px;height:44px;
  background:linear-gradient(135deg,var(--primary-light) 0%,var(--primary-dark) 100%);
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  color:white;font-size:20px;
  box-shadow:var(--shadow-primary);
  position:relative;
  animation:headerFloat 3s ease-in-out infinite;
}
/* Marque du logo (cheval blanc transparent) incrustee dans le badge degrade.
   Proportions reprises du logo source : le cheval occupe ~74% de la largeur du
   carre et ~66% de sa hauteur. */
.logo-mark picture{display:flex;}
.logo-mark img{display:block;width:32px;height:29px;object-fit:contain;}
@media (prefers-reduced-motion:reduce){
  .logo-mark,.logo-mark::after{animation:none;}
}
.logo-mark::after{
  content:'';
  position:absolute;
  top:-3px;right:-3px;
  width:12px;height:12px;
  background:var(--yellow-400);
  border-radius:50%;
  animation:headerPulse 2s infinite;
}
@keyframes headerFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
@keyframes headerPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(250,204,21,0.5);}
  50%{box-shadow:0 0 0 6px rgba(250,204,21,0);}
}
.logo-text .logo-title{
  display:block;margin:0;
  font-size:24px;font-weight:800;
  letter-spacing:-0.02em;
  transition:all .5s ease;
  background:linear-gradient(to right,var(--primary-dark),var(--blue-600));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  margin:0;
}
body.has-hero .nav:not(.scrolled) .logo-text .logo-title{
  background:none;
  -webkit-text-fill-color:white;
  color:white;
}
.logo-text p{
  font-size:11px;font-weight:500;
  letter-spacing:0.02em;
  margin:-2px 0 0;
  color:var(--primary-dark);
  transition:color .5s ease;
}
body.has-hero .nav:not(.scrolled) .logo-text p{color:rgba(255,255,255,0.9);}

.nav-links{display:flex;align-items:center;gap:8px;}
.nav-link{
  position:relative;
  padding:10px 16px;
  font-size:14px;font-weight:500;
  border-radius:10px;
  transition:all .3s ease;
  display:flex;align-items:center;gap:8px;
  color:var(--slate-700);
  text-decoration:none;
}
body.has-hero .nav:not(.scrolled) .nav-link{color:white;}
.nav-link:hover{
  background:var(--primary-50);
  color:var(--primary-dark);
}
body.has-hero .nav:not(.scrolled) .nav-link:hover{
  background:rgba(255,255,255,0.1);
  color:var(--primary-light);
}
.nav-link i{font-size:14px;}
.nav-link::after{
  content:'';
  position:absolute;
  bottom:4px;left:50%;
  width:0;height:2px;
  background:var(--primary-light);
  transition:all .3s ease;
  transform:translateX(-50%);
}
.nav-link:hover::after{width:60%;}

.nav-cta{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:white;
  padding:12px 24px;
  border-radius:999px;
  font-size:14px;font-weight:600;
  display:flex;align-items:center;gap:8px;
  text-decoration:none;
  transition:all .3s ease;
  box-shadow:var(--shadow-md);
}
.nav-cta:hover{
  background:linear-gradient(135deg,var(--primary-dark),var(--primary-darker));
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(var(--primary-rgb),0.4);
}

/* ---- Bouton déconnexion (icône seule) ---- */
.nav-logout-link { opacity: .6; }
.nav-logout-link:hover { opacity: 1; color: #dc2626 !important; }

/* ---- Lien "Devenir hôte" dans la nav ---- */
.nav-link-host {
  color: var(--primary-dark) !important;
  font-weight: 700 !important;
}
body.has-hero .nav:not(.scrolled) .nav-link-host { color: #fff !important; opacity: .9; }

/* ---- Lien "Mon espace" pro ---- */
.nav-link-pro {
  font-weight: 700 !important;
  color: var(--primary-dark) !important;
}
body.has-hero .nav:not(.scrolled) .nav-link-pro { color: #fff !important; }

/* ---- Dropdown profil ---- */
.nav-user-menu { position: relative; }

.nav-user-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 12px;
  gap: 6px;
}

.nav-chevron { font-size: 12px !important; transition: transform .2s; }
.nav-user-menu.open .nav-chevron { transform: rotate(180deg); }

.nav-user-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 210px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(15,23,42,.12);
  padding: 8px;
  z-index: 200;
}
.nav-user-menu.open .nav-user-dropdown { display: block; }

.nav-user-dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: #334155;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background .12s;
}
.nav-user-dropdown a i { font-size: 16px; color: #94a3b8; }
.nav-user-dropdown a:hover { background: #f8fafc; }
.nav-user-dropdown a:hover i { color: var(--primary); }

.nav-user-pro-link { color: var(--primary-dark) !important; font-weight: 700 !important; }
.nav-user-pro-link i { color: var(--primary) !important; }

.nav-user-logout { color: #dc2626 !important; }
.nav-user-logout i { color: #fca5a5 !important; }
.nav-user-logout:hover { background: #fef2f2 !important; }

.nav-user-separator {
  height: 1px;
  background: #f1f5f9;
  margin: 4px 8px;
}

.nav-mobile-btn{
  display:none;
  width:52px;height:52px;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  border:none;
  border-radius:16px;
  color:white;
  align-items:center;justify-content:center;
  transition:all .3s ease;
  box-shadow:0 8px 20px rgba(var(--primary-rgb),0.4),0 0 0 3px rgba(255,255,255,0.95);
  position:relative;
  cursor:pointer;
}
/* Icône du menu en SVG inline (ne dépend d'aucune webfont) : toujours visible. */
.nav-mobile-btn svg{display:block;width:26px;height:26px;color:#fff;}
.nav-mobile-btn i{display:block;font-size:27px;line-height:1;}
.nav-mobile-btn::before,
.nav-mobile-btn::after,
.nav-mobile-btn span{display:none !important;}
.nav-mobile-btn:hover{
  transform:scale(1.05);
  box-shadow:0 12px 28px rgba(var(--primary-rgb),0.5),0 0 0 3px rgba(255,255,255,1);
}

@media (max-width:980px){
  .nav-links{display:none;}
  .nav-mobile-btn{display:flex;}
  .nav-cta{display:none;}
}

/* Decale le contenu des pages SANS hero pour ne pas etre masque par la nav fixe.
   Exclut l'espace hote qui a sa propre sidebar et masque la nav globale. */
body:not(.has-hero):not(.opd-eh-page){
  padding-top:calc(80px + var(--sat,0px));
}

/* Lien Espace hôte dans la navbar */
.nav-link-pro {
  background: rgba(var(--primary-rgb), .1);
  color: var(--primary) !important;
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: 600;
}
.nav-link-pro:hover {
  background: rgba(var(--primary-rgb), .18);
}
.nav-link-pro i { color: var(--primary) !important; }

/* Bouton Espace hôte dans le menu mobile */
.mobile-menu-btn-pro {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 13px 18px;
  border-radius: 12px;
  background: rgba(var(--primary-rgb), .1);
  color: var(--primary);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 8px;
  transition: background .15s;
}
.mobile-menu-btn-pro:hover { background: rgba(var(--primary-rgb), .18); }

/* ── LES TROIS BOUTONS DU PIED DU MENU MOBILE — harmonisés (13/09/2026) ──────
   Ils étaient dessinés chacun de leur côté : rayon 12 px contre 14, padding 13
   contre 14, « Espace hôte » aligné à gauche quand les deux autres étaient
   centrés, et « Mon compte » sans la moindre gouttière entre son icône et son
   libellé (« ⊗Mon compte »). Trois boutons empilés qui ne partagent aucune de
   leurs mesures, ça se voit immédiatement, même sans savoir pourquoi.

   Une seule règle les met d'accord. Ils gardent en revanche trois POIDS
   différents, et c'est voulu : « Déconnexion » est plein, « Espace hôte » est
   teinté, « Mon compte » est sur fond blanc — la hiérarchie se lit à la couleur,
   pas à la géométrie. */
.mobile-menu-foot .mobile-menu-btn-pro,
.mobile-menu-foot .mobile-menu-btn-ghost,
.mobile-menu-foot .mobile-menu-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 18px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 10px;
    text-decoration: none;
    transition: transform .18s cubic-bezier(.22,.61,.36,1), box-shadow .18s ease, background .18s ease;
}
.mobile-menu-foot .mobile-menu-btn-pro i,
.mobile-menu-foot .mobile-menu-btn-ghost i,
.mobile-menu-foot .mobile-menu-btn-primary i { font-size: 17px; line-height: 1; flex-shrink: 0; }

/* « Espace hôte » : teinté ET cerclé. Sans bordure il flottait, plus pâle que
   les deux autres, comme s'il était désactivé. */
.mobile-menu-foot .mobile-menu-btn-pro {
    background: rgba(var(--primary-rgb), .1);
    border: 1.5px solid rgba(var(--primary-rgb), .25);
    color: var(--primary-dark);
}
.mobile-menu-foot .mobile-menu-btn-pro:hover {
    background: rgba(var(--primary-rgb), .16);
    border-color: var(--primary);
}
/* Le bouton blanc reprend la même épaisseur de trait que le teinté : 2 px à côté
   de 1,5 px, on le voyait plus lourd sans savoir dire pourquoi. */
.mobile-menu-foot .mobile-menu-btn-ghost { border-width: 1.5px; }

.mobile-menu-foot .mobile-menu-btn-pro:active,
.mobile-menu-foot .mobile-menu-btn-ghost:active,
.mobile-menu-foot .mobile-menu-btn-primary:active { transform: scale(.985); }

/* Le dernier bouton ne pousse pas la marge du pied. */
.mobile-menu-foot > *:last-child { margin-bottom: 0; }