/* ==========================================================================
   Profilia - Hero d'accueil et rail de secteurs
   Consomme tokens.css. L'image de fond est portee par la section Elementor.
   ========================================================================== */

.pf-hero { color: var(--paper); }
.pf-hero *, .pf-hero *::before, .pf-hero *::after { box-sizing: border-box; }
.pf-hero :where(a) { text-decoration: none; color: inherit; }
.pf-hero :where(ul) { list-style: none; margin: 0; padding: 0; }

/* ---------- Bloc teal ---------- */
.pf-hero__top {
  position: relative;
  overflow: hidden;
  text-align: center;
}

/* Arcs de marque : seul motif decoratif de la charte, toujours rognes.
   En pseudo-elements, pour que la section reste une section Elementor. */
.pf-hero__top::before, .pf-hero__top::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.pf-hero__top::before {
  top: -300px; left: 50%; width: 900px; height: 900px; margin-left: -450px;
  border: 150px solid rgba(15, 178, 198, .14); border-bottom-color: transparent;
}
.pf-hero__top::after {
  top: 60px; right: -140px; width: 380px; height: 380px;
  border: 64px solid rgba(15, 178, 198, .2);
  border-right-color: transparent; border-bottom-color: transparent;
}
/* Un seul axe vertical, a toutes les largeurs. Elementor range les blocs
   d'une colonne en ligne avec retour automatique : sur ecran large (des
   ~1780 px), le sous-titre (58ch) et la rangee de preuves (1180 px) tenaient
   cote a cote, et le sous-titre partait a gauche. Chaque bloc a sa ligne. */
.pf-hero__top > .elementor-container > .elementor-column > .elementor-widget-wrap {
  flex-direction: column; flex-wrap: nowrap; align-items: center;
}
.pf-hero__top > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-element {
  width: 100%;
}

/* Les widgets passent au-dessus des arcs. */
.pf-hero__top > * { position: relative; z-index: 1; }

.pf-hero__inner { position: relative; padding: 62px var(--gutter) 0; }

.pf-hero__badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 11px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .09);
  font: 500 12.5px var(--font-sans); color: var(--text-on-dark);
}
.pf-hero__badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 3px rgba(15, 178, 198, .22);
}

.pf-hero h1 {
  margin: 22px auto 18px; max-width: 18ch;
  font: 600 68px/1.02 var(--font-sans); letter-spacing: -.04em;
  color: var(--text-on-dark); text-wrap: pretty;
}
.pf-hero__lead {
  margin: 0 auto; max-width: 58ch;
  font: 400 17.5px/1.55 var(--font-sans);
  color: rgba(255, 255, 255, .8); text-wrap: pretty;
}

/* ---------- Reassurance ---------- */
.pf-hero__trust {
  display: flex; align-items: center; justify-content: center; gap: 30px;
  max-width: 1180px; margin: 34px auto 0; padding-top: 26px;
  border-top: 1px solid var(--border-on-dark); flex-wrap: nowrap;
}
/* La note remplit la largeur de sa colonne : sans centrage explicite, elle
   se colle a gauche des que la colonne passe en pleine largeur sur mobile. */
.pf-hero__rating { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.pf-hero__google {
  display: flex; align-items: center; gap: 7px;
  background: var(--paper); border-radius: 10px; padding: 8px 12px;
}
.pf-hero__google svg { width: 18px; height: 18px; display: block; }
.pf-hero__google span { font: 600 14px var(--font-sans); color: var(--text-strong); letter-spacing: -.01em; }
.pf-hero__score { display: flex; align-items: baseline; gap: 6px; }
.pf-hero__score b { font: 600 19px var(--font-sans); letter-spacing: -.02em; color: var(--text-on-dark); }
.pf-hero__score span { font: 500 13.5px var(--font-sans); color: var(--text-on-dark-muted); }
.pf-hero__stars { display: inline-flex; gap: 1.5px; align-items: center; }
.pf-hero__stars svg { width: 13px; height: 13px; display: block; }
.pf-hero__sep { width: 1px; height: 30px; background: var(--border-on-dark); }
.pf-hero__claim {
  display: flex; align-items: baseline; gap: 8px;
  font: 400 13.5px var(--font-sans); color: var(--text-on-dark-muted);
}
.pf-hero__claim b { font: 600 14px var(--font-sans); color: var(--text-on-dark); white-space: nowrap; }

/* Entre 1024 et 1279 px la reassurance passe sur deux rangees plutot que
   de casser un libelle au milieu. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .pf-hero__trust { flex-wrap: wrap; gap: 14px 26px; max-width: 820px; }
  .pf-hero__sep { display: none; }
}

/* ---------- Barre de recherche a cheval ---------- */
.pf-hero__searchwrap { padding: 0 var(--gutter); margin-top: -56px; position: relative; z-index: 2; }
.pf-search {
  max-width: 1000px; margin: 0 auto; padding: 8px;
  display: grid; grid-template-columns: 1fr 1fr 232px; align-items: stretch;
  background: var(--paper); border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow: 0 14px 44px rgba(3, 25, 29, .24);
  text-align: left;
}
.pf-search__field { display: flex; align-items: center; gap: 12px; padding: 14px 18px; }
.pf-search__field + .pf-search__field { border-left: 1px solid var(--border-default); }
.pf-search__field svg { flex: none; width: 20px; height: 20px; stroke: var(--accent-text); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pf-search__field--pin svg { stroke: var(--text-muted); }
.pf-search__box { display: block; width: 100%; }
.pf-search__label { display: block; font: 500 11.5px var(--font-sans); color: var(--text-muted); }

/* Les champs ne reprennent pas l'habillage du socle : ils sont nus dans
   la carte, la carte porte la bordure. */
.pf-search input {
  border: none; outline: none; width: 100%; min-height: 0;
  background: transparent; border-radius: 0;
  padding: 2px 0 0; font: 500 15.5px var(--font-sans); color: var(--text-strong);
}
.pf-search input:focus { border: none; }
.pf-search input::placeholder { color: var(--text-muted); }

.pf-search__submit {
  display: flex; align-items: center; justify-content: center; text-align: center;
  border: none; border-radius: 14px;
  background: var(--accent-hover); color: #fff;   /* 4,6:1, la marque plafonne a 3,1 */
  font: 600 15.5px var(--font-sans); letter-spacing: -.01em; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.pf-search__submit:hover { background: var(--accent-press); }

/* ---------- Rail de secteurs ---------- */
.pf-sectors { padding: 44px 0 52px; background: var(--paper); color: var(--text-strong); }
/* En-tete centre : le titre, le sous-titre et le lien forment un axe.
   Les cartes restent alignees a gauche, le rail devant deborder a droite. */
.pf-sectors__head {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 10px;
  padding: 0 var(--gutter); margin: 0 auto 24px;
  max-width: var(--container, 1280px);
}
/* Titre de section : meme echelle que « Nos engagements » (--type-display,
   38 px ordinateur / 33 px mobile). Tous les titres de section de l'accueil
   partagent ce token, pour que la page garde une seule hierarchie. */
.pf-sectors__head h2 {
  margin: 0 0 8px;
  font: var(--type-display); letter-spacing: var(--type-display-tracking);
  color: var(--teal-900);
}
.pf-sectors__head p { margin: 0; font: var(--type-body-lg); color: var(--text-body); }
.pf-sectors__nav { display: flex; gap: 8px; flex: none; }
.pf-sectors__nav button {
  width: 44px; height: 44px; border: 1px solid var(--border-default); background: var(--paper);
  border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.pf-sectors__nav button:hover { border-color: var(--accent); }
.pf-sectors__nav button::before {
  content: ""; width: 8px; height: 8px;
  border-top: 1.8px solid var(--text-strong); border-right: 1.8px solid var(--text-strong);
}
.pf-sectors__nav .pf-prev::before { transform: rotate(-135deg); margin-left: -2px; }
.pf-sectors__nav .pf-next::before { transform: rotate(45deg); margin-right: -2px; }

.pf-sectors { position: relative; }
.pf-rail {
  display: flex; gap: 20px;
  /* Depart aligne sur le titre, debordement libre a droite. */
  padding: 4px 0 4px max(var(--gutter), calc((100% - var(--container, 1280px)) / 2 + var(--gutter)));
  /* Sans cette marge, l'accroche aligne la premiere carte sur le bord et
     le rail s'auto-decale de la valeur du remplissage des le chargement. */
  scroll-padding-left: max(var(--gutter), calc((100% - var(--container, 1280px)) / 2 + var(--gutter)));
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  /* Fondu sur les bords plutot qu'une coupe nette : le masque dit qu'il
     reste du contenu, la ou une carte tranchee dit qu'il y a un defaut.
     Un masque ne coute rien, contrairement a un flou reel sur 21 photos. */
  --fondu-g: 60px;
  --fondu-d: 60px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fondu-g), #000 calc(100% - var(--fondu-d)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fondu-g), #000 calc(100% - var(--fondu-d)), transparent 100%);
}
.pf-rail::-webkit-scrollbar { display: none; }

/* ---------- Carte de famille ----------
   Deux etats selon la presence d'un visuel : photo avec biseau, ou fond
   sable avec pictogramme. La bascule se fait sur le champ, sans reglage. */
.pf-card {
  position: relative; flex: none; width: 320px; aspect-ratio: 4 / 5;
  scroll-snap-align: start; overflow: hidden;
  border-radius: var(--radius-xl); background: var(--sand-200);
  color: var(--text-strong);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.pf-card:hover { transform: translateY(-2px); }

.pf-card__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform var(--dur-base) var(--ease-out);
}
.pf-card--photo:hover .pf-card__img { transform: scale(1.04); }

/* Voile de lisibilite : transparent sur le tiers haut, teal en pied. Le texte
   tient ses 4,5:1 quelle que soit la photo, sans dependre de sa luminosite. */
.pf-card__biseau {
  position: absolute; left: 0; right: 0; bottom: 0; height: 66%;
  background: linear-gradient(180deg, rgba(6, 43, 49, 0) 0%, rgba(6, 43, 49, .72) 48%, rgba(6, 43, 49, .95) 100%);
}

/* Pastille du compteur, en angle. Blanc a 92 % et chiffre en cyan fonce :
   5,9:1, et pas d'aplat cyan supplementaire a l'ecran. */
.pf-card__pastille {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  padding: 5px 11px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .92); color: var(--cyan-800);
  font: 500 11.5px var(--font-sans); white-space: nowrap;
}
.pf-card--soon:not(.pf-card--photo) .pf-card__pastille {
  background: var(--paper); color: var(--text-body);
}

.pf-card__pied { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px; z-index: 1; }
.pf-card__nom { display: block; font: 600 17px var(--font-sans); letter-spacing: -.02em; }
.pf-card__jobs {
  display: block; margin-top: 6px; font: 400 12.5px/1.45 var(--font-sans);
  color: var(--text-body);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.pf-card--photo .pf-card__nom { color: var(--text-on-dark); }
.pf-card--photo .pf-card__jobs { color: rgba(255, 255, 255, .74); }

/* Etat sans visuel : le pictogramme reprend sa place. */
.pf-card__icon {
  position: absolute; top: 16px; left: 16px;
  width: 48px; height: 48px; border-radius: 14px; background: var(--paper);
  display: flex; align-items: center; justify-content: center;
}
.pf-card__icon svg { width: 24px; height: 24px; stroke: var(--cyan-800); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.pf-card--soon:not(.pf-card--photo) { background: var(--sand-200); }
.pf-card--soon:not(.pf-card--photo):hover { background: var(--sand-300); transform: none; }
.pf-card--soon .pf-card__icon svg { stroke: var(--text-muted); }

/* ---------- Mobile ---------- */
@media (max-width: 1023px) {
  .pf-hero__top { padding-bottom: 56px; }
  .pf-hero__arc-1 { display: none; }
  .pf-hero__arc-2 { top: -130px; right: -140px; width: 360px; height: 360px; border-width: 62px; border-top-color: rgba(15, 178, 198, .22); }
  .pf-hero__inner { padding: 20px var(--gutter) 0; text-align: center; }
  .pf-hero h1 { margin: 14px auto 12px; font: 600 37px/1.14 var(--font-sans);   /* interlignage un peu plus aere sur mobile */ letter-spacing: -.035em; max-width: none; }
  .pf-hero__lead { margin: 0 auto 22px; font: 400 15px/1.5 var(--font-sans); max-width: none; }
  .pf-hero__trust { flex-direction: column; align-items: center; gap: 10px; margin-top: 0; padding-top: 18px; }
  .pf-hero__claim { justify-content: center; flex-wrap: wrap; text-align: center; }
  .pf-hero__sep { display: none; }
  .pf-hero__searchwrap { margin-top: -44px; }
  .pf-search { grid-template-columns: 1fr; padding: 6px; border-radius: var(--radius-lg); box-shadow: 0 12px 34px rgba(3, 25, 29, .24); }
  .pf-search__field { padding: 12px 14px; }
  .pf-search__field + .pf-search__field { border-left: none; border-top: 1px solid var(--border-default); }
  .pf-search input { font-size: 15px; }
  .pf-search__submit { height: var(--control-h-lg); margin-top: 4px; border-radius: var(--radius-md); font-size: 15px; }
  .pf-sectors { padding: 28px 0 30px; }
  .pf-sectors__head { margin-bottom: 14px; }
  
  
  .pf-sectors__nav { display: none; }      /* le doigt suffit */


  .pf-card__icon { width: 42px; height: 42px; border-radius: 12px; top: 12px; left: 12px; }
  .pf-card__icon svg { width: 22px; height: 22px; }
  .pf-card__pied { padding: 13px; }
  .pf-card__nom { font-size: 15.5px; }
  .pf-card__jobs { font-size: 12px; }
}

/* ==========================================================================
   Resume de recherche, sur l'archive des offres
   ========================================================================== */
.archive-description {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 14px 0 0; font: 400 14.5px var(--font-sans); color: var(--text-body);
}
.pf-resultats__compte { font-weight: 600; color: var(--text-strong); }
.pf-jeton {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: var(--cyan-100); color: var(--cyan-800);
  font: 500 13px var(--font-sans);
}
.pf-jeton span[aria-hidden] { font-size: 15px; line-height: 1; opacity: .7; }
.pf-jeton:hover { background: var(--cyan-300); color: var(--cyan-800); }
.pf-jeton--tout { background: transparent; color: var(--text-body); text-decoration: underline; padding-left: 4px; }
.pf-resultats__sortie { flex-basis: 100%; color: var(--text-body); }
.pf-resultats__sortie a { color: var(--accent-text); text-decoration: underline; }

/* ==========================================================================
   Briques dans Elementor
   Les widgets natifs portent le texte, notre feuille porte le style : la
   typographie reste dans les tokens et ne se duplique pas dans l'editeur.
   ========================================================================== */

.pf-hero .elementor-widget-container { margin: 0; }

/* Titre : widget Titre, en H1. */
.pf-hero__title .elementor-heading-title {
  margin: 22px auto 18px; max-width: 18ch;
  font: 600 68px/1.02 var(--font-sans); letter-spacing: -.04em;
  color: var(--text-on-dark); text-wrap: pretty;
}

/* Sous-titre : widget Editeur de texte. */
.pf-hero__lead p {
  margin: 0 auto; max-width: 58ch;
  font: 400 17.5px/1.55 var(--font-sans);
  color: rgba(255, 255, 255, .8); text-wrap: pretty;
}

/* Rangee de reassurance : section interne a trois colonnes, separees par
   un filet. Chaque argument reste un widget editable. */
.pf-hero__trustrow {
  max-width: 1180px; margin: 34px auto 0; padding-top: 26px;
  border-top: 1px solid var(--border-on-dark);
}
.pf-hero__trustrow .elementor-container { justify-content: center; }
/* Colonnes dimensionnees au contenu : en tiers egaux, le dernier argument
   se coupait et la rangee paraissait distendue. */
.pf-hero__trustrow .elementor-column {
  width: auto; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  padding: 2px 26px;
}
.pf-hero__trustrow .elementor-column + .elementor-column { border-left: 1px solid var(--border-on-dark); }
.pf-hero__trustrow .elementor-widget-wrap { justify-content: center; }

.pf-hero__claimw p {
  margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  justify-content: center; text-align: center;
  font: 400 13.5px var(--font-sans); color: var(--text-on-dark-muted);
}
.pf-hero__claimw strong { font: 600 14px var(--font-sans); color: var(--text-on-dark); white-space: nowrap; }

@media (max-width: 1023px) {
  .pf-hero__title .elementor-heading-title { margin: 14px auto 12px; font: 600 37px/1.06 var(--font-sans); letter-spacing: -.035em; max-width: none; }
  .pf-hero__lead p { font: 400 15px/1.5 var(--font-sans); max-width: none; }
  /* Trois colonnes ne tiennent pas : elles s'empilent et le filet passe
     du cote gauche au dessus. */
  .pf-hero__trustrow { margin-top: 18px; padding-top: 18px; }
  .pf-hero__trustrow .elementor-column { width: 100%; padding: 7px 0; }
  .pf-hero__trustrow .elementor-column + .elementor-column { border-left: 0; }
}

/* Carte de sortie : un carrousel doit se terminer quelque part. */
.pf-card--sortie {
  background: var(--surface-inverse); color: var(--text-on-dark);
  display: flex; align-items: flex-end;
}
.pf-card--sortie .pf-card__nom { color: var(--text-on-dark); }
.pf-card--sortie .pf-card__jobs { color: rgba(255, 255, 255, .7); -webkit-line-clamp: 3; }
.pf-card--sortie::after {
  content: ""; position: absolute; top: 20px; right: 20px;
  width: 12px; height: 12px;
  border-top: 2px solid var(--cyan-300); border-right: 2px solid var(--cyan-300);
  transform: rotate(45deg);
}
.pf-card--sortie:hover { background: var(--teal-800); }

/* Fleches dans l'en-tete, a droite, groupees avec le lien de sortie :
   c'est le groupe d'actions de l'en-tete « rubrique » (titres.css). */
@media (min-width: 1024px) {
  .pf-sectors__nav button { width: var(--control-h-md); height: var(--control-h-md); background: var(--paper); border-color: var(--border-strong); }
  .pf-sectors__nav button:hover { border-color: var(--cyan-700); }
  .pf-sectors__head { padding-right: var(--gutter); }
}

/* Lien de sortie, remonte a cote du titre : dans une boucle infinie, une
   carte finale serait croisee au hasard et perdrait son role. */
.pf-sectors__tout {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  margin: 0; padding-bottom: 2px;
  font: 600 14.5px var(--font-sans); color: var(--accent-text);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.pf-sectors__tout::after {
  content: ""; width: 7px; height: 7px;
  border-top: 1.8px solid currentColor; border-right: 1.8px solid currentColor;
  transform: rotate(45deg);
}
.pf-sectors__tout:hover { border-bottom-color: var(--accent); color: var(--accent-text); }

/* Les fleches restent actives : dans une boucle, il y a toujours une suite. */
.pf-sectors__nav button:disabled { opacity: 1; pointer-events: auto; }

@media (max-width: 1023px) {
  .pf-sectors__tout { font-size: 13.5px; }
}

/* ==========================================================================
   Rail mobile : une carte mise en avant, les voisines en amorce

   A 1,75 carte visible, la seconde etait amputee de son quart droit :
   assez pour la voir, pas assez pour la lire, et chaque geste laissait le
   rail dans une position differente. Une carte centree, accrochee au
   centre, rend chaque geste previsible.
   ========================================================================== */
@media (max-width: 1023px) {
  .pf-rail {
    --carte: calc(100vw - 112px);
    gap: 14px;
    /* Retrait symetrique : la premiere et la derniere carte peuvent se
       centrer comme les autres. */
    padding: 4px calc((100vw - var(--carte)) / 2);
    scroll-padding-left: 0;
    /* Fondu discret sur l'amorce : elle reste visible comme repere, mais
       s'estompe pour que la carte centrale garde l'attention. */
    --fondu-g: 34px;
    --fondu-d: 34px;
  }
  .pf-card {
    width: var(--carte);
    aspect-ratio: 3 / 4;
    scroll-snap-align: center;
    border-radius: var(--radius-lg);
  }
  .pf-card__pied { padding: 15px; }
  .pf-card__nom { font-size: 17px; }
  .pf-card__jobs { font-size: 12.5px; }
  .pf-card__pastille { top: 13px; right: 13px; }
  /* Le lien de sortie se recolle au sous-titre au lieu de flotter. */

  /* Degagement pour la barre basse. */
  .pf-sectors { padding-bottom: 40px; }
}

@media (max-width: 1023px) {
  /* Centrage sur mobile seulement : le titre centre au-dessus d'une carte
     centree forme un axe coherent. Sur ordinateur, quatre cartes alignees
     a gauche sous un titre centre desequilibreraient la composition. */
  .pf-sectors__head { gap: 9px; margin-bottom: 18px; }
}

/* ==========================================================================
   Refonte des contenus de l'accueil (14/10/2026)
   ========================================================================== */

/* Surtitre du hero : la signature de marque, en mono capitales (charte :
   IBM Plex Mono reservee aux eyebrows). Widget Texte, classe pf-hero__eyebrow. */
.pf-hero__eyebrow .elementor-widget-container,
.pf-hero__eyebrow p {
  margin: 0; text-align: center;
  font: var(--type-eyebrow); font-size: 12px;
  letter-spacing: var(--type-eyebrow-tracking); text-transform: uppercase;
  color: var(--text-on-dark-muted);
}

/* Titre du hero : lignes equilibrees, quel que soit le libelle. */
.pf-hero__title .elementor-heading-title { text-wrap: balance; }

/* Preuves et seconde porte, dans le hero, sous le sous-titre (shortcode
   [profilia_preuves]). Une ligne sur ordinateur : la note Google, l'anciennete,
   puis la pilule contour « Vous recrutez ? ». Sur mobile : une ligne de
   preuves raccourcie, puis la pilule. Aucun aplat cyan : l'action principale
   reste la recherche. */
.pf-proofs {
  margin: 26px auto 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 12px 24px;
}
.pf-proofs__list {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 4px 0; margin: 0; padding: 0; list-style: none;
  font: 400 14px/1.4 var(--font-sans); color: var(--text-on-dark-muted);
}
.pf-proofs__item { display: inline-flex; align-items: center; }
.pf-proofs__item + .pf-proofs__item { margin-left: 16px; padding-left: 16px; border-left: 1px solid var(--border-on-dark); }
.pf-proofs__item > a,
.pf-proofs__item > span { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap-min); }
.pf-proofs__item a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.pf-proofs__item a:hover { color: var(--text-on-dark); }
.pf-proofs__item b { font-weight: 600; color: var(--text-on-dark); }
.pf-proofs__stars { flex: none; }

.pf-proofs__b2b {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--control-h-md); padding: 0 18px;
  border: 1px solid var(--border-on-dark); border-radius: var(--radius-pill);
  font: 400 14px/1 var(--font-sans); color: var(--text-on-dark-muted);
  text-decoration: none; white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.pf-proofs__b2b b { font-weight: 600; color: var(--text-on-dark); transition: color var(--dur-fast) var(--ease-out); }
.pf-proofs__b2b::after {
  content: ""; width: 6px; height: 6px; margin-left: 4px;
  border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor;
  transform: rotate(45deg);
}
.pf-proofs__b2b:hover,
.pf-proofs__b2b:hover b { border-color: var(--cyan-300); color: var(--cyan-300); }

@media (max-width: 1023px) {
  .pf-proofs { margin-top: 4px; flex-direction: column; gap: 8px; }
  .pf-proofs__list { font-size: 13px; }
  .pf-proofs__item + .pf-proofs__item { margin-left: 12px; padding-left: 12px; }
  .pf-proofs__lg { display: none; }
  .pf-proofs__b2b { font-size: 13.5px; }
}
/* Fin du rail de secteurs : la sortie pour les metiers non listes. */
.pf-sectors__fin {
  max-width: var(--container, 1280px); margin: 20px auto 0; padding: 0 var(--gutter);
  font: var(--type-body-lg); color: var(--text-body);
}
.pf-sectors__fin a { font-weight: 600; color: var(--accent-text); text-underline-offset: 3px; }
.pf-sectors__fin a:hover { color: var(--cyan-800); }
@media (max-width: 1023px) {
  .pf-sectors__fin { text-align: center; margin-top: 14px; }
}
/* H1 long (14/10) : « Profilia Emploi Intérim / CDD / CDI à Pontoise et Paris » tient dans les petits écrans */
@media (max-width: 400px) {
  .pf-hero__title .elementor-heading-title { font-size: clamp(27px, 9.2vw, 37px) !important; }
}