/* ==========================================================================
   Profilia - En-tete et navigation
   Consomme tokens.css. Aucune couleur, fonte, rayon ou duree redeclare ici :
   seules les valeurs propres a l'en-tete sont definies.
   Mobile < 1024px : barre 60px + panneau. Desktop : barre utilitaire + 72px.
   ========================================================================== */

.pf-hd {
  --hd-bar: 68px;
  --hd-bar-lg: 84px;
  --hd-utility: 34px;
  --hd-offset: 0px;          /* barre d'administration WordPress */

  position: sticky;
  top: var(--hd-offset);
  z-index: 900;
  background: var(--paper);
  font-family: var(--font-sans);
  color: var(--text-strong);
}
.pf-hd *, .pf-hd *::before, .pf-hd *::after { box-sizing: border-box; }

/* Remise a zero des controles.
   :where() annule la specificite : chaque composant garde la main sans avoir
   a surencherir. Sans reset de couleur sur button, la valeur systeme du
   navigateur s'applique - c'est l'origine du rose observe. */
.pf-hd :where(a) { text-decoration: none; color: inherit; }
.pf-hd :where(ul) { list-style: none; margin: 0; padding: 0; }
.pf-hd :where(button) {
  appearance: none; -webkit-appearance: none;
  margin: 0; padding: 0;
  background: none; border: 0;
  color: inherit; font: inherit; text-align: inherit;
}

/* Lien d'evitement - premier element focusable de la page. */
.pf-skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 1100;
  background: var(--accent); color: #fff; padding: 12px 18px;
  border-radius: var(--radius-sm); font: var(--type-label);
  transition: top var(--dur-fast) var(--ease-out);
}
.pf-skip:focus { top: 12px; }

/* ---------- Barre utilitaire ----------
   Presente aux deux tailles. Sur mobile elle porte la preuve (compteur
   d'offres) et l'appel : les deux seules choses que la barre principale
   ne peut pas montrer. */
.pf-hd__utility {
  display: flex; align-items: center; justify-content: space-between;
  height: 34px; padding: 0 var(--gutter);
  background: var(--surface-inverse);
  font: var(--type-meta-mono); color: var(--text-on-dark-muted);
}
.pf-util-left, .pf-util-right { display: flex; align-items: center; gap: var(--space-4); }
/* Les liens de service passent avant la note : celle-ci se cale au bord. */
.pf-util-liens { display: flex; align-items: center; gap: var(--space-4); order: -1; }
.pf-hd__utility a { transition: color var(--dur-fast) var(--ease-out); }
.pf-hd__utility a:hover { color: var(--cyan-300); }

.pf-live {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--cyan-300);
}
.pf-live__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(15,178,198,.22);
}
.pf-util-tel { color: var(--text-on-dark); letter-spacing: .02em; }

/* Note Google. Le logotype porte la caution, les etoiles la lisibilite
   immediate, le chiffre la precision. Aucun aplat : le bandeau reste une
   zone de service. */
.pf-hd { --star-vide: rgba(255,255,255,.26); }
.pf-avis {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--on-dark-78, rgba(255,255,255,.78));
}
.pf-avis b { color: #fff; font-weight: 500; }
.pf-avis__g { width: 14px; height: 14px; flex: none; display: block; }
.pf-avis__stars { display: inline-flex; gap: 1.5px; align-items: center; }
.pf-avis__stars svg { width: 11px; height: 11px; display: block; }
.pf-avis__nb { color: var(--text-on-dark-muted); }
a.pf-avis:hover b { color: var(--cyan-300); }

/* Sur mobile, on garde le compteur et le numero. Le reste passe dans le panneau. */
@media (max-width: 1023px) {
  /* Le compteur d'offres a gauche, la note Google a droite. Les liens
     de service partent dans le panneau : ils y sont deja. */
  .pf-util-agences, .pf-util-liens { display: none; }
  .pf-hd__utility { height: 32px; font-size: 11px; }
  .pf-avis { gap: 6px; }
  .pf-avis__stars svg { width: 10px; height: 10px; }
}
.pf-live__court { display: none; }
/* Sous 380 px, le libelle complet et le volume d'avis ne tiennent plus
   ensemble : le mot « avis » tombe, le chiffre reste. */
@media (max-width: 379px) {
  .pf-hd__utility { padding: 0 var(--space-3); font-size: 10.5px; }
  .pf-avis { gap: 5px; }
  .pf-avis__nb { font-size: 0; }
  .pf-avis__nb::before { content: attr(data-nb); font-size: 10.5px; }
}

/* ---------- Barre principale ---------- */
.pf-hd__bar {
  height: var(--hd-bar);
  display: flex; align-items: center; gap: var(--space-4);
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--border-default);
  background: var(--paper);
}
.pf-hd__logo { display: flex; align-items: center; flex: none; }
.pf-hd__logo img { height: 28px; width: auto; display: block; }

.pf-hd__tools { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-2); justify-content: flex-end; }
.pf-hd__burger {
  width: var(--icon-btn); height: var(--icon-btn);
  border: none; background: var(--teal-800); border-radius: var(--radius-sm);
  display: grid; align-content: center; justify-items: center; gap: 4px;
  cursor: pointer; transition: background var(--dur-fast) var(--ease-out);
}
.pf-hd__burger:hover { background: var(--accent); }
.pf-hd__burger i {
  display: block; width: 16px; height: 1.8px;
  background: #fff; border-radius: 2px;
  transition: transform var(--dur-fast) var(--ease-out);
}
/* Panneau ouvert : les deux traits se croisent. Le bouton reste le meme,
   il change seulement d'etat - une croix a cote d'un burger obligerait
   l'utilisateur a choisir entre deux commandes pour une seule action. */
.pf-hd[data-open="true"] .pf-hd__burger i:first-child { transform: translateY(2.9px) rotate(45deg); }
.pf-hd[data-open="true"] .pf-hd__burger i:last-child  { transform: translateY(-2.9px) rotate(-45deg); }

.pf-hd__desknav, .pf-hd__deskcta, .pf-hd__shortcuts, .pf-hd__spacer { display: none; }
.pf-hd .pf-mega { display: none; }

/* ---------- Panneau mobile ---------- */
.pf-hd__panel {
  position: fixed; left: 0; right: 0;
  /* Mesure reelle du bas de la barre, posee par le script : la barre
     utilitaire et la barre d'administration changent la hauteur totale. */
  top: var(--hd-panel-top, calc(var(--hd-bar) + var(--hd-offset)));
  bottom: 0;
  background: var(--surface-inverse);
  display: flex; flex-direction: column;
  padding: 18px var(--gutter) 0;
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-out);
  visibility: hidden;
  z-index: 950;
}
.pf-hd[data-open="true"] .pf-hd__panel { transform: none; visibility: visible; }
body.pf-locked { overflow: hidden; }

/* Appel a l'action de la barre mobile. Remplit l'espace laisse par la
   navigation et donne au candidat un chemin permanent vers le vivier. */
.pf-hd__cta {
  display: flex; align-items: center; justify-content: center;
  height: var(--control-h-md); padding: 0 var(--space-5);
  background: var(--accent); color: #fff;
  border-radius: var(--radius-pill);
  font: 600 13.5px var(--font-sans); white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out);
}
.pf-hd__cta:hover { background: var(--accent-hover); color: #fff; }
/* Panneau ouvert : le panneau porte ses propres actions, une seule
   action principale reste visible a la fois. */
.pf-hd[data-open="true"] .pf-hd__cta { display: none; }

/* Bascule d'audience, en tete du panneau. Surface sombre. */
.pf-seg {
  position: relative; display: flex; flex: none;
  padding: 4px; background: var(--fill-on-dark); border-radius: var(--radius-pill);
}
.pf-seg__pill {
  position: absolute; top: 4px; left: 4px;
  width: calc(50% - 4px); height: calc(100% - 8px);
  background: var(--accent); border-radius: var(--radius-pill);
  transition: transform var(--dur-base) var(--ease-out);
}
.pf-hd[data-audience="entreprise"] .pf-seg__pill { transform: translateX(100%); }
.pf-seg button {
  position: relative; flex: 1; height: var(--control-h-md);
  border: none; background: none; color: var(--text-on-dark);
  font: 600 13.5px var(--font-sans); text-align: center; cursor: pointer;
}
.pf-seg button[aria-pressed="true"] { color: var(--teal-900); }
.pf-hd__lists { flex: 1; min-height: 0; overflow-y: auto; padding-top: var(--space-3); }
.pf-list { display: none; }
.pf-hd[data-audience="candidat"] .pf-list[data-view="candidat"],
.pf-hd[data-audience="entreprise"] .pf-list[data-view="entreprise"] { display: block; }

.pf-list > li + li > .pf-list__top { border-top: 1px solid var(--border-on-dark); }
.pf-list__top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: var(--tap-min); padding: 14px 0;
  font: 600 15.5px var(--font-sans); color: var(--text-on-dark);
  transition: color var(--dur-fast) var(--ease-out);
}
.pf-list__top:hover { color: var(--cyan-300); }
.pf-list__top--has::after {
  content: ""; flex: none; width: 6px; height: 6px;
  border-top: 1.5px solid rgba(255,255,255,.45);
  border-right: 1.5px solid rgba(255,255,255,.45);
  transform: rotate(45deg);
}
.pf-list__sub { margin-bottom: var(--space-2); }
.pf-list__sub a {
  display: flex; align-items: baseline; gap: var(--space-2);
  min-height: 38px; padding: 8px 0 8px var(--space-3);
  font: 400 14px var(--font-sans); color: rgba(255,255,255,.78);
  transition: color var(--dur-fast) var(--ease-out);
}
.pf-list__sub a:hover { color: var(--text-on-dark); }
.pf-tel { font: var(--type-meta-mono); color: var(--cyan-300); margin-left: auto; }
.pf-tel--pending { color: rgba(255,255,255,.38); }
.pf-count { font: 500 12px var(--font-mono); color: var(--accent-text); }
.pf-hd__panel .pf-count { color: var(--cyan-300); }

.pf-hd__panelcta {
  flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 14px 0 18px; border-top: 1px solid var(--border-on-dark);
}
.pf-hd__panelcta a {
  height: var(--control-h-lg); display: flex; align-items: center; justify-content: center;
  padding: 0 var(--space-3); text-align: center;
  border-radius: var(--radius-pill); font: 600 14px var(--font-sans); color: var(--text-on-dark);
  line-height: 1.2; text-wrap: balance;
  transition: background var(--dur-fast) var(--ease-out);
}
.pf-hd__panelcta .pf-out { border: 1px solid var(--border-on-dark); }
.pf-hd__panelcta .pf-out:hover { background: rgba(255,255,255,.1); }
.pf-hd__panelcta .pf-fill { background: var(--accent); }
.pf-hd__panelcta .pf-fill:hover { background: var(--accent-hover); }
.pf-hd[data-audience="candidat"] .pf-when-ent,
.pf-hd[data-audience="entreprise"] .pf-when-cand { display: none; }

/* ==========================================================================
   Ordinateur
   ========================================================================== */
@media (min-width: 1024px) {

  .pf-hd__bar { height: var(--hd-bar-lg); padding: 0 var(--gutter); gap: var(--space-8); }

  .pf-hd__logo img { height: 32px; }
  /* Sur ordinateur, les deux actions textuelles suffisent : l'icone ferait
     une troisieme cible pour la meme destination que « Nos offres ». */
  .pf-hd__tools, .pf-hd__burger, .pf-hd__panel { display: none; }
  .pf-hd__shortcuts { display: flex; }
  .pf-hd__spacer { display: block; flex: 1; }

  .pf-hd__desknav { display: flex; align-items: stretch; height: var(--hd-bar-lg); }
  .pf-hd__desknav ul { display: flex; gap: var(--space-7); }
  .pf-hd__desknav li { display: flex; }
  .pf-hd__desknav button, .pf-hd__desknav a {
    display: flex; align-items: center; gap: var(--space-2); padding: 0 2px;
    border: none; background: none; cursor: pointer;
    font: 500 14.5px var(--font-sans); color: var(--text-strong);
    transition: color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  }
  .pf-hd__desknav button::after {
    content: ""; width: 5px; height: 5px;
    border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted);
    transform: rotate(45deg) translateY(-1px);
  }
  .pf-hd__desknav button:hover, .pf-hd__desknav a:hover { color: var(--accent-text); }
  .pf-hd__desknav [aria-expanded="true"] { color: var(--accent-text); box-shadow: inset 0 -2px 0 var(--accent); }
  .pf-hd__desknav [aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); }

  /* ---------- Raccourcis candidats ----------
     Trois entrees sur un conteneur sable. Aucune n'est un aplat cyan :
     l'accent ne vit que dans les icones, la regle d'une seule action
     principale par ecran reste tenue. */
  .pf-hd__shortcuts {
    display: flex; align-items: center; gap: var(--space-1);
    padding: 5px;
    background: var(--sand-200);
    border-radius: var(--radius-pill);
  }
  .pf-sc {
    display: flex; align-items: center; gap: 10px;
    height: 44px; padding: 0 16px 0 5px;
    border-radius: var(--radius-pill);
    font: 600 13.5px var(--font-sans); color: var(--text-strong);
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }
  .pf-sc:hover { background: var(--paper); color: var(--accent-text); }
  .pf-sc__ico {
    flex: none; width: 34px; height: 34px;
    display: grid; place-items: center;
    background: var(--paper); border-radius: 50%;
    color: var(--accent-text);
    transition: background var(--dur-fast) var(--ease-out);
  }
  .pf-sc:hover .pf-sc__ico { background: var(--cyan-100); }
  .pf-sc__ico svg { width: 17px; height: 17px; display: block; }

  /* Entre 1024 et 1199 px, la barre ne tient pas trois entrees.
     On retire la recherche : la rubrique Nos offres mene deja au meme
     endroit, les deux autres n'ont pas d'equivalent dans le menu. */
  @media (max-width: 1199px) {
    .pf-sc--emploi { display: none; }
  }
  /* ---------- Menus deroulants ---------- */
  .pf-mega {
    background: var(--paper);
    border-bottom: 1px solid var(--border-default);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: var(--space-8) var(--gutter);
  }
  .pf-hd .pf-mega[data-open="true"] { display: grid; }
  .pf-mega--offres { gap: var(--space-9); }
  /* Colonnes calees a gauche, encart pousse a droite : avec deux colonnes
     de contenu, des colonnes en 1fr laissent un vide de 250 px. */
  .pf-mega--c3 { grid-template-columns: 260px 260px 320px; justify-content: space-between; }
  .pf-mega--c4 { grid-template-columns: 240px 240px 240px 320px; justify-content: space-between; }
  .pf-mega--agences { grid-template-columns: 340px 340px; gap: var(--space-5); }

  .pf-mega__title {
    margin: 0 0 var(--space-3);
    font: 500 11px var(--font-mono); letter-spacing: var(--type-eyebrow-tracking);
    text-transform: uppercase; color: var(--text-body);
  }
  .pf-mega__link {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
    padding: 10px 0; font: 400 14.5px var(--font-sans); color: var(--text-strong);
    transition: color var(--dur-fast) var(--ease-out);
  }
  .pf-mega__link:hover { color: var(--accent-text); }

  .pf-promo {
    position: relative; overflow: hidden; display: block;
    background: var(--sand-200); border-radius: var(--radius-lg); padding: var(--space-6);
    transition: background var(--dur-fast) var(--ease-out);
  }
  .pf-promo:hover { background: var(--sand-300); }
  .pf-promo::before {
    content: ""; position: absolute; top: -70px; right: -70px;
    width: 170px; height: 170px; border: 30px solid rgba(15,178,198,.18);
    border-radius: 50%; border-right-color: transparent; border-bottom-color: transparent;
  }
  .pf-promo b { position: relative; display: block; font: 600 18px/1.25 var(--font-sans); letter-spacing: var(--type-display-tracking); color: var(--text-strong); }
  .pf-promo span { position: relative; display: block; margin-top: var(--space-2); font: 400 13.5px/1.5 var(--font-sans); color: var(--text-body); }

  .pf-agence { border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-5); }
  .pf-agence h3, .pf-agence .pf-agence__nom { margin: 0; font: 600 16px var(--font-sans); color: var(--text-strong); }
  .pf-agence p { margin: 6px 0 0; font: 400 13px/1.5 var(--font-sans); color: var(--text-body); }
  .pf-agence__tel { display: inline-block; margin-top: 10px; font: 500 13px var(--font-mono); color: var(--accent-text); }
  .pf-agence__tel--pending { color: var(--text-muted); }
  .pf-agence__foot {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-top: var(--space-4); padding-top: var(--space-3);
    border-top: 1px solid var(--border-default); font: 500 13.5px var(--font-sans);
  }
  .pf-agence__foot a { color: var(--accent-text); }
}

@media (min-width: 1280px) {
  .pf-hd__utility, .pf-hd__bar, .pf-mega { padding-left: var(--space-9); padding-right: var(--space-9); }
}

/* ==========================================================================
   Barre basse mobile
   Trois canaux de conversion, pas une navigation. Elle ne reprend pas les
   rubriques du menu : consulter, candidater, appeler.
   ========================================================================== */

.pf-tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 880;                    /* sous le panneau (950), au-dessus du contenu */
  display: grid;
  background: var(--paper);
  border-top: 1px solid var(--border-default);
  box-shadow: 0 -6px 22px rgba(13, 43, 48, .07);
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  /* Masquee tant que le premier ecran n'a pas defile. */
  transform: translateY(100%);
  transition: transform var(--dur-fast) var(--ease-out);
}
.pf-tabbar[data-visible="true"] { transform: translateY(0); }

.pf-tabbar__item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px;
  min-height: 62px;                /* seuil tactile de 44 px largement depasse */
  padding: 13px 6px 10px;
  color: var(--text-body);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.pf-tabbar__item + .pf-tabbar__item { border-left: 1px solid var(--border-default); }
/* Pas de :hover - il n'existe pas au doigt. */
.pf-tabbar__item:active { background: var(--sand-200); }
.pf-tabbar__item:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }

.pf-tabbar__icon { position: relative; display: inline-flex; line-height: 0; }
.pf-tabbar__icon svg {
  width: 24px; height: 24px;
  fill: none; stroke: var(--accent);
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.pf-tabbar__label { font: 500 12px/1.25 var(--font-sans); text-align: center; text-wrap: balance; }

/* Etat actif : filet cyan en haut, encre cyan foncee, libelle appuye. */
.pf-tabbar__item[aria-current="page"] {
  box-shadow: inset 0 2px 0 var(--accent);
  color: var(--accent-text);
}
.pf-tabbar__item[aria-current="page"] .pf-tabbar__label { font-weight: 600; }

/* Badge du stock. Blanc sur cyan de marque = 2,5:1 ; sur cyan de texte = 5,9:1. */
.pf-tabbar__badge {
  position: absolute; top: -8px; right: -15px;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--accent-text); color: #fff;
  font: 600 11px/19px var(--font-mono); text-align: center;
}

/* Barre visible : l'action de l'en-tete s'efface. Un seul aplat cyan a l'ecran. */
.pf-hd[data-tabbar="true"] .pf-hd__cta {
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
}

/* Le contenu ne passe pas sous la barre. */
@media (max-width: 1023px) {
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}
/* Ordinateur : la barre n'existe pas, le bandeau utilitaire fait le travail. */
@media (min-width: 1024px) {
  .pf-tabbar { display: none; }
  body { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .pf-tabbar { transition: none; } }