/* ═══════════════════════════════════════════════════════════════════
   EmploiServices — CHROME 2026 (Header + Footer unifiés)
   Palettes : Sovereign Navy #0f2a5c · Navy #00387C · Teal #03989e ·
   Gold #C9A227 · Lignes #e2e8f0
   Chargé via views/layouts/default.php pour le périmètre 2026 :
   recherche · presentation · contact · entreprises · profile · login/*
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────── HEADER 2026 (aligné sur la landing) ─────────────── */
.h26-header{ position:sticky; top:0; z-index:990;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid #e2e8f0; }
.h26-wrap{ max-width:1240px; margin:0 auto; padding:0 clamp(20px,4vw,48px);
  display:flex; align-items:center; gap:32px; height:72px; }
.h26-brand{ display:flex; align-items:center; text-decoration:none; }
.h26-brand img{ height:38px; width:auto; display:block; }
.h26-nav{ display:flex; gap:32px; margin-inline-start:auto; }
.h26-nav a{ color:#5b7189; font-weight:600; font-size:.9rem; position:relative; padding:6px 0;
  text-decoration:none; transition:color .3s; }
.h26-nav a::after{ content:""; position:absolute; bottom:0; inset-inline-start:0; width:0; height:2px;
  background:#03989e; transition:width .35s cubic-bezier(.16,1,.3,1); }
.h26-nav a:hover{ color:#0f2a5c; text-decoration:none; }
.h26-nav a:hover::after{ width:100%; }
.h26-cta{ display:flex; gap:12px; align-items:center; }
.h26-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:800;
  border-radius:999px; padding:11px 24px; font-size:.9rem; border:1.5px solid transparent;
  text-decoration:none; white-space:nowrap;
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s, background .25s, color .25s, border-color .25s; }
.h26-btn:active{ transform:scale(.97); }
.h26-btn-outline{ background:transparent; color:#0f2a5c; border-color:#cfd9e0; }
.h26-btn-outline:hover{ border-color:#03989e; color:#03989e; text-decoration:none; }
.h26-btn-primary{ background:#03989e; color:#fff; }
.h26-btn-primary:hover{ background:#026a6e; transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(3,152,158,.28); color:#fff; text-decoration:none; }
.h26-user{ display:flex; align-items:center; gap:8px; text-decoration:none; min-width:0; }
.h26-user svg{ width:30px; height:30px; padding:4px; border-radius:50%;
  background:#e0f4f4; color:#026f74; flex:0 0 auto; }
.h26-user-txt{ display:block; min-width:0; }
.h26-user-txt b{ display:block; color:#0f2a5c; font-size:.82rem; line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; }
.h26-user-txt i{ font-style:normal; font-size:.72rem; color:#03989e; font-weight:700; }
.h26-burger{ display:none; background:none; border:none; color:#0f2a5c; padding:8px;
  margin-inline-start:auto; cursor:pointer; }
.h26-burger svg{ width:26px; height:26px; }
@media (max-width:940px){
  .h26-nav{ display:none; }
  .h26-nav.open{ display:flex; flex-direction:column; gap:2px; position:absolute; top:72px;
    inset-inline:0; background:#fff; border-bottom:1px solid #e2e8f0;
    box-shadow:0 16px 32px -12px rgba(15,42,92,.16); padding:12px clamp(20px,4vw,48px) 16px; margin:0; }
  .h26-nav.open a{ padding:11px 0; border-bottom:1px solid #eef2f7; font-size:.95rem; color:#0f2a5c; }
  .h26-nav.open a:last-child{ border-bottom:0; }
  .h26-nav.open a::after{ display:none; }
  /* Round 26-bis (2026-09-23) — ⛔ NE JAMAIS masquer la porte candidat sur mobile : cette ligne
     laissait « Espace Recruteur » seul dans la barre et supprimait tout point d'entrée pour un
     demandeur d'emploi. Les deux portes restent affichées, en pastilles compactes. */
  .h26-cta .h26-btn-outline{ display:inline-flex; }
  .h26-cta{ margin-inline-start:auto; }
  .h26-burger{ display:block; }
}
@media (max-width:480px){
  .h26-cta .h26-btn-primary{ padding:10px 16px; font-size:.82rem; }
}

/* ─────────────── FOOTER 2026 (navy souverain) ─────────────── */
.f26-footer{ background:#0f2a5c; color:#93aec2; padding:56px 0 28px;
  border-top:4px solid #03989e; }
.f26-wrap{ max-width:1240px; margin:0 auto; padding:0 clamp(20px,4vw,48px); }
.f26-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1.1fr; gap:32px; margin-bottom:40px; }
.f26-grid h4{ font-size:.92rem; font-weight:800; color:#fff; margin:0 0 16px; }
.f26-grid a{ display:block; font-size:.88rem; padding:5px 0; color:#93aec2; text-decoration:none; transition:color .3s; }
.f26-grid a:hover{ color:#2cbfd9; text-decoration:none; }
.f26-brand img{ height:34px; display:block; }
.f26-brand p{ font-size:.86rem; max-width:34ch; margin-top:14px; line-height:1.7; }
.f26-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.f26-tag{ display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:999px;
  font-size:.72rem; font-weight:800; letter-spacing:.02em;
  background:rgba(44,191,217,.12); color:#9fe8f2; border:1px solid rgba(44,191,217,.25); }
.f26-bottom{ border-top:1px solid rgba(44,191,217,.16); padding-top:24px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:.8rem; }
.f26-social{ display:flex; gap:10px; }
.f26-social a{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08);
  display:grid; place-items:center; color:#fff; font-size:.9rem; text-decoration:none;
  transition:background .25s, transform .25s, color .25s; }
.f26-social a:hover{ background:#03989e; transform:translateY(-2px); color:#fff; text-decoration:none; }
@media (max-width:860px){ .f26-grid{ grid-template-columns:1fr 1fr; gap:24px; } }
@media (max-width:480px){ .f26-grid{ grid-template-columns:1fr; } }

/* ═══════════════ ROUND 26 (2026-09-23) — header mobile : zero debordement horizontal ═══════════════
   Mesure AVANT (Chrome emule 390x844, /recruteur/login) : innerWidth 390 · scrollWidth 548
   => 158px de debordement : .h26-cta allait jusqu'a 474px et .h26-burger commencait a 506px,
   hors ecran. Comme `.auth-page-wrap` centre la carte dans le document elargi, la carte de
   connexion apparaissait coupee a droite et decalee a gauche.
   Correctif : en dessous de 940px la barre ne garde que marque + langue + cloche + burger,
   les actions (Se connecter / Espace Recruteur / Se deconnecter) passent dans le menu deroulant. */
.h26-nav-mobile{ display: none; }
@media (max-width: 940px){
  .h26-wrap{ gap: 14px; }
  .h26-cta{ min-width: 0; gap: 8px; }
  .h26-burger{ margin-inline-start: 0; }
  .h26-nav-mobile{ display: flex; flex-direction: column; gap: 8px; padding-top: 12px; }
  .h26-nav-mobile a{ display: block; text-align: center; padding: 11px 16px; border-radius: 999px;
    font-weight: 800; font-size: .9rem; text-decoration: none;
    border: 1.5px solid #cfd9e0; color: #0f2a5c; }
  .h26-nav-mobile a:hover{ text-decoration: none; border-color: #03989e; color: #03989e; }
  .h26-nav-mobile a.is-primary{ background: #03989e; border-color: #03989e; color: #fff; }
  .h26-nav-mobile a.is-primary:hover{ background: #026a6e; color: #fff; }
  .h26-nav.open{ max-height: calc(100vh - 72px); overflow-y: auto; }
}
@media (max-width: 640px){
  .h26-wrap{ gap: 10px; padding-inline: 14px; height: 66px; }
  .h26-brand img{ height: 30px; }
  /* Round 26-bis : idem ici — la porte entreprise ne doit pas être seule non plus. */
  .h26-cta .h26-btn-primary{ display:inline-flex; }
  .h26-cta .h26-btn{ padding: 9px 13px; font-size: .8rem; gap: 6px; }
  .h26-lbl-full{ display: none; }
  .h26-lbl-short{ display: inline; }
  .h26-user-txt b{ max-width: 118px; }
  .h26-burger{ padding: 6px; }
  .h26-nav.open{ top: 66px; }
}
@media (max-width: 400px){
  .h26-brand img{ height: 26px; }
  .h26-cta{ gap: 6px; }
  .h26-user-txt{ display: none; }                  /* pastille seule sur tres petits ecrans */
}

/* ═══════════════ ROUND 26-bis (2026-09-23) — deux portes visibles sur téléphone ═══════════════
   Objectif métier : un demandeur d'emploi doit TOUJOURS voir comment se connecter depuis son
   téléphone, sans jamais élargir la page (débordement mesuré = 0px).
   • >= 941px : libellés complets (inchangé).
   • 561-640px : libellés courts « Candidat » / « Entreprise ».
   • <= 560px  : pastilles à ICÔNE (aria-label + title pour l'accessibilité) et le sélecteur de
                 langue passe dans le menu déroulant du burger. */
.h26-lbl-short{ display: none; }
.h26-btn svg{ width: 15px; height: 15px; flex: 0 0 auto; }
.h26-nav-mobile-lang{ display: none; }
.h26-nav-mobile .h26-nav-mobile-card{
  display: flex; align-items: center; gap: 10px; text-align: start;
  border: 1.5px solid #cfd9e0; border-radius: 14px; padding: 12px 14px;
  color: #0f2a5c; font-weight: 800; font-size: .9rem; text-decoration: none; background: #fff;
}
.h26-nav-mobile .h26-nav-mobile-card i{ width: 30px; height: 30px; flex: 0 0 30px; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 9px; background: #e6f7f7; color: #016a69; }
.h26-nav-mobile .h26-nav-mobile-card span{ display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.h26-nav-mobile .h26-nav-mobile-card b{ font-size: .9rem; font-weight: 800; }
.h26-nav-mobile .h26-nav-mobile-card small{ font-size: .74rem; font-weight: 600; color: #64748b; }
.h26-nav-mobile .h26-nav-mobile-card.is-primary{ background: #03989e; border-color: #03989e; color: #fff; }
.h26-nav-mobile .h26-nav-mobile-card.is-primary i{ background: rgba(255,255,255,.2); color: #fff; }
.h26-nav-mobile .h26-nav-mobile-card.is-primary small{ color: #d7f4f4; }
.h26-nav-mobile .h26-nav-mobile-card:hover{ text-decoration: none; border-color: #03989e; }
.h26-nav-mobile .h26-nav-mobile-card.is-primary:hover{ background: #026a6e; }

@media (max-width: 640px){
  .h26-cta .h26-btn{ padding: 9px 11px; font-size: .78rem; }
}
@media (max-width: 560px){
  /* la barre ne garde que : marque + pastilles à icône + burger ⇒ largeur garantie */
  .h26-wrap > .h26-cta > .es-lang-switch{ display: none !important; }
  .h26-nav-mobile-lang{ display: flex; justify-content: center; padding: 8px 0 2px; }
  .h26-cta .h26-btn{ padding: 9px; width: 38px; height: 38px; border-radius: 999px; }
  .h26-lbl-full, .h26-lbl-short{ display: none; }
  .h26-cta .h26-btn svg{ width: 18px; height: 18px; }
  .h26-cta .h26-user-txt{ display: none; }
  .h26-cta .h26-btn-outline.h26-btn-logout span,
  .h26-cta .h26-btn-logout span{ display: none; }
}
@media (max-width: 400px){
  .h26-cta .h26-btn{ width: 36px; height: 36px; padding: 8px; }
}

/* ═══════════════ ROUND 26-bis (2) — bande intermédiaire 941-1200px : zéro débordement ═══════════════
   Mesure : en compte CONNECTÉ à 1024px, la barre débordait de 36px (marque + 4 liens de navigation
   + langue + cloche + pastille « Bonjour, <nom> » + bouton de déconnexion). Le libellé de salutation
   est la seule partie compressible : au-dessous de 1100px on ne garde que « Mon espace » (l'icône de
   compte reste, elle, toujours visible) et on resserre les gouttières. */
@media (max-width: 1200px){
  .h26-wrap{ gap: 18px; }
  .h26-nav{ gap: 20px; }
}
@media (max-width: 1100px){
  .h26-user-txt b{ display: none; }            /* garde : icône de compte + « Mon espace » */
  .h26-wrap{ gap: 14px; }
  .h26-nav{ gap: 16px; }
  .h26-nav a{ font-size: .86rem; }
}