/* ==========================================================================
   Profilia - Section « Par où commencer ? »  [profilia_par_ou_commencer]

   Deux volets (candidats sur sable, entreprises sur teal) puis les agences.
   Rendu serveur (pfl-par-ou-commencer.php), comportement dans
   par-ou-commencer.js. En-tête : composant partagé .pf-shead (titres.css).
   Classes préfixées pf-start-* : offres.css déclare déjà un .pf-switch.
   Aucune valeur de charte en dur : les variables locales pointent sur tokens.css.
   Le cyan de marque ne porte aucun texte : points de statut, arc, focus.
   Un seul arc dans la section, sur le volet teal.
   ========================================================================== */

.pf-start {
  --pf-start-teal: var(--teal-900);
  --pf-start-ink: var(--text-strong);
  --pf-start-ink-2: var(--ink-72);                /* 6:1 sur blanc, 5,7:1 sur sable */
  --pf-start-sand: var(--sand-200);
  --pf-start-line: var(--border-default);
  --pf-start-line-2: var(--border-strong);
  --pf-start-img: var(--ink-12);
  --pf-start-cyan-soft: var(--cyan-100);
  --pf-start-cyan-soft-text: var(--cyan-800);     /* 6,1:1 sur cyan-100 */
  --pf-start-cyan-text: var(--cyan-700);          /* 4,9:1 sur blanc */
  --pf-start-btn: var(--cyan-700);
  --pf-start-btn-hover: var(--cyan-800);
  --pf-start-brand: var(--cyan-500);              /* jamais de texte */
  --pf-start-on-dark: var(--text-on-dark);
  --pf-start-on-dark-2: rgba(255, 255, 255, .8);
  --pf-start-on-dark-line: var(--border-on-dark);
  --pf-start-on-dark-fill: rgba(255, 255, 255, .08);
  --pf-start-alert: #FFD9A0;                      /* erreur sur teal, 13:1 */
  --pf-start-focus: rgba(15, 178, 198, .45);
  --pf-start-radius: 24px;
  --pf-start-g: var(--gutter);

  position: relative;
  /* Fond sable : conclut le chapitre « Agir » et se détache des
     Actualités (blanc). Le volet Candidats et les agences passent en blanc. */
  background: var(--pf-start-sand);
  color: var(--pf-start-ink);
  font-family: var(--font-sans);
  padding: 56px 0;
  overflow-x: clip;
}
.pf-start__inner { max-width: var(--container, 1280px); margin: 0 auto; padding: 0 var(--pf-start-g); }

.pf-start *, .pf-start *::before, .pf-start *::after { box-sizing: border-box; }
.pf-start a { text-decoration: none; }
.pf-start :where(a, button, input):focus-visible { outline: 3px solid var(--pf-start-focus); outline-offset: 2px; }
.pf-start [hidden] { display: none !important; }
.pf-start .screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.pf-start__apercu {
  margin: 0 0 var(--space-5); padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--warning-soft); font: 500 13px var(--font-sans); color: var(--pf-start-ink);
}
.pf-start__sm { display: none; }

/* --- Volets ------------------------------------------------------------------ */

.pf-start__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px; align-items: stretch;
}
.pf-start-panel {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 22px;
  padding: 32px 34px; border-radius: var(--pf-start-radius);
}
.pf-start-panel > * { position: relative; }
.pf-start-panel--cand { background: var(--paper); }
.pf-start-panel--ent { background: var(--pf-start-teal); color: var(--pf-start-on-dark); }

/* Arc rogné hors cadre, un seul, en haut à droite du volet teal */
.pf-start-arc {
  position: absolute !important; top: -120px; right: -120px;
  width: 300px; height: 300px; border-radius: 50%; pointer-events: none;
  border: 50px solid rgba(15, 178, 198, .2);
  border-right-color: transparent; border-bottom-color: transparent;
}

.pf-start-tag {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px; margin-bottom: 14px;
  border-radius: var(--radius-pill); font: 600 12px var(--font-sans);
  background: var(--pf-start-cyan-soft); color: var(--pf-start-cyan-soft-text);
}
.pf-start-panel--ent .pf-start-tag { background: rgba(255, 255, 255, .12); color: var(--pf-start-on-dark); }
.pf-start-panel__title {
  margin: 0 0 6px; font: 600 28px/1.15 var(--font-sans); letter-spacing: -.025em; color: inherit;
}
.pf-start-panel__lead { margin: 0; font: 400 15px/1.5 var(--font-sans); color: var(--pf-start-ink-2); }
.pf-start-panel--ent .pf-start-panel__lead { color: var(--pf-start-on-dark-2); }

/* --- Parcours candidat -------------------------------------------------------- */

.pf-start-paths { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pf-start-path {
  display: flex; align-items: center; gap: 16px; padding: 16px 18px;
  border-radius: 18px; background: var(--paper); border: 1px solid var(--pf-start-line);
  color: var(--pf-start-ink);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.pf-start-path:hover { border-color: var(--pf-start-cyan-text); color: var(--pf-start-ink); }
.pf-start-path__n {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 600 14px var(--font-sans); background: var(--pf-start-cyan-soft); color: var(--pf-start-cyan-soft-text);
}
.pf-start-path__txt { flex: 1; min-width: 0; }
.pf-start-path__txt b { display: block; font: 600 16px/1.35 var(--font-sans); }
.pf-start-path__txt span { display: block; font: 400 13.5px/1.45 var(--font-sans); color: var(--pf-start-ink-2); }
.pf-start-path--main { background: var(--pf-start-btn); border-color: var(--pf-start-btn); color: #FFFFFF; }
.pf-start-path--main:hover { background: var(--pf-start-btn-hover); border-color: var(--pf-start-btn-hover); color: #FFFFFF; }
.pf-start-path--main .pf-start-path__n { background: rgba(255, 255, 255, .16); color: #FFFFFF; }
.pf-start-path--main .pf-start-path__txt span { color: #FFFFFF; }
.pf-start-chev {
  display: block; width: 8px; height: 8px; flex: none; margin-right: 4px;
  border-top: 1.8px solid currentColor; border-right: 1.8px solid currentColor;
  transform: rotate(45deg); color: var(--pf-start-cyan-text);
}
.pf-start-path--main .pf-start-chev { color: #FFFFFF; }

/* Statut d'ouverture */
.pf-start-status {
  margin: auto 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
  padding-top: 18px; border-top: 1px solid var(--pf-start-line);
  font: 400 13.5px/1.4 var(--font-sans); color: var(--pf-start-ink-2);
}
.pf-start-status b { font: 600 14px var(--font-sans); color: var(--pf-start-ink); }
.pf-start-dot { display: block; width: 9px; height: 9px; flex: none; border-radius: 50%; background: rgba(13, 43, 48, .3); }
.is-open .pf-start-dot { background: var(--pf-start-brand); box-shadow: 0 0 0 4px rgba(15, 178, 198, .2); }

/* --- Formulaire entreprise ---------------------------------------------------- */

.pf-start-form { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; }
.pf-start-field {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0;
  font: 500 12.5px var(--font-sans); color: var(--pf-start-on-dark-2);
}
.pf-start-field--start { grid-column: 1 / -1; }
.pf-start-field legend { padding: 0; margin-bottom: 6px; }
.pf-start-input {
  width: 100%; height: 50px; min-height: 0; padding: 0 14px; border-radius: 14px;
  border: 1px solid var(--pf-start-on-dark-line); background: var(--pf-start-on-dark-fill);
  color: var(--pf-start-on-dark); font: 500 14.5px var(--font-sans); outline: none;
}
.pf-start-input::placeholder { color: rgba(255, 255, 255, .6); opacity: 1; }
.pf-start-input:focus { border-color: var(--cyan-300); }
.pf-start-input[aria-invalid="true"] { border-color: var(--pf-start-alert); }
.pf-start-stepper {
  display: grid; grid-template-columns: 50px 1fr 50px; align-items: center; height: 50px;
  border-radius: 14px; border: 1px solid var(--pf-start-on-dark-line); background: var(--pf-start-on-dark-fill);
}
.pf-start-stepper button {
  height: 48px; border: 0; background: none; color: var(--pf-start-on-dark);
  font: 500 20px var(--font-sans); cursor: pointer; text-align: center;
}
.pf-start-stepper input {
  width: 100%; min-height: 0; height: 48px; padding: 0; border: 0; background: none; text-align: center;
  color: var(--pf-start-on-dark); font: 600 16px var(--font-sans); -moz-appearance: textfield;
}
.pf-start-stepper input::-webkit-inner-spin-button,
.pf-start-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pf-start-starts { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-start-starts label { position: relative; }
.pf-start-starts input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pf-start-starts span {
  display: inline-flex; align-items: center; height: 44px; padding: 0 14px; white-space: nowrap;
  border-radius: var(--radius-pill); border: 1px solid rgba(255, 255, 255, .3);
  font: 500 13px var(--font-sans); color: var(--pf-start-on-dark);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.pf-start-starts input:checked + span { background: #FFFFFF; color: var(--pf-start-teal); border-color: #FFFFFF; }
.pf-start-starts input:focus-visible + span { outline: 3px solid var(--pf-start-focus); outline-offset: 2px; }
.pf-start-submit {
  align-self: end; height: 50px; border: 0; border-radius: 14px; cursor: pointer;
  background: #FFFFFF; color: var(--pf-start-teal); font: 600 14.5px var(--font-sans); text-align: center;
  transition: background var(--dur-fast) var(--ease-out);
}
.pf-start-submit:hover { background: var(--pf-start-cyan-soft); }
.pf-start-submit[disabled] { opacity: .6; cursor: wait; }
.pf-start-error { grid-column: 1 / -1; margin: 0; font: 500 13px/1.45 var(--font-sans); color: var(--pf-start-alert); }
.pf-start-hp { position: absolute !important; left: -9999px; }
.pf-start-legal { grid-column: 1 / -1; margin: 0; font: 400 11.5px/1.5 var(--font-sans); color: rgba(255, 255, 255, .7); }
.pf-start-legal a { color: var(--pf-start-on-dark); text-decoration: underline; }

.pf-start-sent {
  display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 18px;
  background: var(--pf-start-on-dark-fill); border: 1px solid rgba(255, 255, 255, .16);
  font: 400 14.5px/1.55 var(--font-sans); color: rgba(255, 255, 255, .85);
}
.pf-start-sent b { font: 600 19px/1.3 var(--font-sans); color: var(--pf-start-on-dark); }
.pf-start-again {
  align-self: flex-start; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--pf-start-on-dark); font: 600 13.5px var(--font-sans); text-decoration: underline;
}

.pf-start-contact {
  margin-top: auto; display: flex; align-items: center; gap: 14px;
  padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .14);
  font: 400 13px/1.4 var(--font-sans); color: rgba(255, 255, 255, .78);
}
.pf-start-contact__photo { width: 48px; height: 48px; flex: none; border-radius: 50%; object-fit: cover; }
.pf-start-contact__who { flex: 1; min-width: 0; }
.pf-start-contact__who b { display: block; font: 600 14.5px var(--font-sans); color: var(--pf-start-on-dark); }
.pf-start-contact__tel {
  flex: none; display: flex; align-items: center; height: 44px; padding: 0 16px; white-space: nowrap;
  border-radius: 14px; border: 1px solid rgba(255, 255, 255, .3);
  color: var(--pf-start-on-dark); font: 600 14px var(--font-sans);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.pf-start-contact__tel:hover { border-color: #FFFFFF; color: var(--pf-start-on-dark); }

/* --- Agences ------------------------------------------------------------------ */

.pf-start-agences { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 20px; }
.pf-start-switch { display: none; }
.pf-start-agence {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px;
  padding: 14px 26px 14px 14px; border: 1px solid var(--pf-start-line); border-radius: var(--pf-start-radius);
  background: var(--paper); font-style: normal;
}
.pf-start-agence__map {
  position: relative; min-height: 190px; border-radius: 16px; overflow: hidden; background: var(--pf-start-img);
}
.pf-start-agence__map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.pf-start-osm {
  position: absolute; right: 6px; bottom: 6px; padding: 2px 6px; border-radius: 6px;
  background: rgba(255, 255, 255, .88); font: 500 10px/1.3 var(--font-sans); color: var(--pf-start-ink);
}
.pf-start-osm:hover { color: var(--pf-start-cyan-text); }
.pf-start-agence__body { display: flex; flex-direction: column; gap: 10px; padding: 10px 0 0; min-width: 0; }
.pf-start-agence__row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.pf-start-agence__name { flex: 1; font: 600 12.5px var(--font-sans); color: var(--pf-start-cyan-text); }
.pf-start-agence__name:hover { color: var(--pf-start-btn-hover); text-decoration: underline; }
.pf-start-agence__open { font: 500 12.5px var(--font-sans); color: var(--pf-start-ink); }
.pf-start-agence .pf-start-dot { width: 8px; height: 8px; }
.pf-start-agence.is-open .pf-start-dot { box-shadow: none; }
.pf-start-agence__addr { font: 600 16px/1.4 var(--font-sans); color: var(--pf-start-ink); }
.pf-start-agence__addr span { display: block; font-weight: 400; color: var(--pf-start-ink-2); }
.pf-start-agence__info { margin: 0; font: 400 13.5px/1.5 var(--font-sans); color: var(--pf-start-ink-2); }
.pf-start-agence__links { margin-top: auto; display: flex; flex-wrap: wrap; gap: 0 20px; }
/* Cible de 44 px de haut, sans changer l'aspect de lien texte */
.pf-start-agence__links a {
  display: inline-flex; align-items: center; min-height: var(--tap-min);
  font: 600 14px var(--font-sans); color: var(--pf-start-cyan-text); white-space: nowrap;
}
.pf-start-agence__links a:hover { color: var(--pf-start-btn-hover); }
.pf-start-l-call__m { display: none; }

/* ==========================================================================
   Tablette et mobile (< 1024 px)
   ========================================================================== */

@media (max-width: 1023px) {
  .pf-start { --pf-start-g: 40px; }
  .pf-start__lg { display: none; }
  .pf-start__sm { display: inline; }

  .pf-start__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pf-start-panel { gap: 14px; padding: 20px; border-radius: 20px; }
  .pf-start-panel__title { font-size: 20px; line-height: 1.2; }
  .pf-start-tag { height: auto; padding: 0; margin-bottom: 4px; background: none !important; color: var(--pf-start-cyan-soft-text); } /* 6,6:1 sur blanc */
  .pf-start-panel--ent .pf-start-tag { color: var(--pf-start-on-dark-2); }
  .pf-start-panel--cand .pf-start-panel__lead { display: none; }
  .pf-start-arc { top: -80px; right: -80px; width: 200px; height: 200px; border-width: 36px; }

  .pf-start-path { gap: 12px; min-height: 56px; padding: 12px 14px; border-radius: 14px; }
  .pf-start-path__n { display: none; }
  .pf-start-path__txt b { font-size: 15px; }
  .pf-start-path__txt span { font-size: 12.5px; }
  .pf-start-status { padding-top: 0; border: 0; }
  .pf-start-status__detail { display: none; }

  .pf-start-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .pf-start-field--poste, .pf-start-field--start, .pf-start-submit, .pf-start-error, .pf-start-legal { grid-column: 1 / -1; }
  /* Compteur et téléphone sur une ligne, puis les pastilles de démarrage */
  .pf-start-field--tel { order: 3; }
  .pf-start-field--start { order: 4; }
  .pf-start-submit { order: 5; }
  .pf-start-error { order: 6; }
  .pf-start-legal { order: 7; }
  .pf-start-lbl, .pf-start-field--start legend {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .pf-start-starts {
    flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none;
    margin-right: -20px; padding-right: 20px;
  }
  .pf-start-starts::-webkit-scrollbar { display: none; }
  .pf-start-starts label { flex: none; }
  .pf-start-starts span { padding: 0 12px; font-size: 12.5px; }

  .pf-start-contact { padding-top: 14px; }
  .pf-start-contact__photo { width: 40px; height: 40px; }
  /* Avec un contact nommé, le bouton « Appeler » des agences suffit ;
     sans contact, le numéro reste : c'est le seul contenu du bloc. */
  .pf-start-contact:not(.pf-start-contact--agence) .pf-start-contact__tel { display: none; }

  .pf-start-agences {
    display: flex; flex-direction: column; gap: 12px; margin-top: 12px;
    padding: 18px; border: 1px solid var(--pf-start-line); border-radius: 20px;
    background: var(--paper);
  }
  .pf-start.is-js .pf-start-switch {
    position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 4px; border-radius: var(--radius-pill); background: var(--ink-07);
  }
  .pf-start-switch button {
    min-height: var(--tap-min); padding: 4px 10px; border: 0; border-radius: var(--radius-pill);
    background: transparent; color: var(--pf-start-ink); font: 600 13px/1.2 var(--font-sans); cursor: pointer;
    text-align: center;
  }
  .pf-start-switch button[aria-pressed="true"] { background: var(--paper); box-shadow: var(--shadow-pill); }
  .pf-start-agence { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 0; border: 0; border-radius: 0; }
  .pf-start-agence + .pf-start-agence { padding-top: 18px; border-top: 1px solid var(--pf-start-line); }
  .pf-start.is-js .pf-start-agence + .pf-start-agence { padding-top: 0; border-top: 0; }
  .pf-start-agence__map { min-height: 140px; border-radius: 14px; }
  .pf-start-agence__body { padding: 0; }
  .pf-start.is-js .pf-start-agence__name { display: none; }
  .pf-start.is-js .pf-start-agence__hours { display: none; }
  .pf-start-agence__links { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .pf-start-agence__links a {
    display: flex; align-items: center; justify-content: center; height: 48px;
    border-radius: 14px; border: 1px solid var(--pf-start-line-2); color: var(--pf-start-ink); font-size: 14.5px;
  }
  .pf-start-agence__links a.pf-start-l-call { background: var(--pf-start-btn); border-color: var(--pf-start-btn); color: #FFFFFF; }
  .pf-start-l-call__num { display: none; }
  .pf-start-l-call__m { display: inline; }
}

@media (max-width: 767px) {
  .pf-start { --pf-start-g: var(--gutter); padding: 48px 0; }
}

@media (hover: none) {
  .pf-start-path:hover { border-color: var(--pf-start-line); }
  .pf-start-path--main:hover { background: var(--pf-start-btn); border-color: var(--pf-start-btn); }
}

@media (prefers-reduced-motion: reduce) {
  .pf-start * { transition: none !important; }
}

/* ==========================================================================
   Agences : titre de section et texte local (14/10/2026)
   ========================================================================== */
.pf-start-local { margin-top: 64px; }
.pf-start-local + .pf-start-agences { margin-top: 0; }
.pf-start-local__txt p { margin: 0; }
.pf-start-local__txt p + p { margin-top: 10px; }

.pf-start-agence__rdv {
  margin: 0; display: inline-flex; align-items: center; gap: 8px;
  font: 500 13px/1.4 var(--font-sans); color: var(--pf-start-ink);
}
.pf-start-agence__rdv::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pf-start-brand);
}
.pf-start-agence__more { margin: 0; }
.pf-start-agence__more a {
  display: inline-flex; align-items: center; min-height: var(--tap-min);
  font: 600 14px var(--font-sans); color: var(--pf-start-cyan-text);
  text-decoration: underline; text-underline-offset: 3px;
}
.pf-start-agence__more a:hover { color: var(--pf-start-btn-hover); }

@media (max-width: 1023px) {
  .pf-start-local { margin-top: 44px; }
  .pf-start-agence__rdv { justify-content: center; }
  .pf-start-agence__more { text-align: center; }
}

/* E-mail facultatif (pfl-emails.php) : sur la ligne du téléphone, le bouton passe dessous. */
.pf-start-submit { grid-column: 1 / -1; }

@media (max-width: 1023px) {
	.pf-start-field--mail { grid-column: 1 / -1; order: 3; }
}