/* ==========================================================================
   Profilia - En-tetes de section (composant partage)

   .pf-shead           bloc d'en-tete : header, div ou colonne Elementor
   .pf-shead__title    titre de section : h2, ou widget Titre Elementor
   .pf-shead__lead     sous-titre : p, ou widget Texte Elementor
   .pf-shead--sombre   section sur fond teal : mot-cle souligne d'un filet
   .pf-shead--colonne  en-tete dans une colonne encore cote a cote en
                       tablette : centre seulement une fois empile (< 641 px)

   .pf-shead--rubrique   ordinateur : titre et sous-titre a gauche, sur le bord
                         des cartes ; action « voir tout » a droite, calee
                         sur la derniere ligne (Offres, Secteurs, Avis, Actualites)
   .pf-shead--manifeste  ordinateur : declaration centree sur fond sombre (Engagements)
   .pf-shead__action     action secondaire de l'en-tete : pilule contour 40 px

   Sous 1024 px, tous les en-tetes sont centres, a la meme taille et au meme
   rythme. Au-dela, deux modeles, memes ecarts : 12 px titre -> sous-titre,
   40 px en-tete -> contenu (tokens --shead-gap, --shead-mb).
   L'animation (anim.js) cible .pf-shead__title : meme cascade partout, mot-cle
   surligne en cyan pale sur fond clair, souligne d'un filet sur fond sombre.
   Charge apres les feuilles de section : a specificite egale, ces regles gagnent.
   ========================================================================== */

/* Marque du mot-cle dessinee en fond de l'element en ligne, et non en bloc :
   un mot-cle de plusieurs mots qui passe a la ligne (« candidature
   spontanee ») garde une marque qui suit le texte, ligne par ligne. Le
   balayage part de la gauche une fois la cascade terminee. Le H1 du hero garde
   sa marque propre (anim.css). */
.pf-shead .pf-anim__cle {
  display: inline;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 0% 100%;
  /* Surlignage cyan pale, fond clair : bande centree sur le corps du texte */
  background-image: linear-gradient(transparent 16%, var(--cyan-100) 16%, var(--cyan-100) 82%, transparent 82%);
  padding: 0 .12em;
  margin: 0 -.12em;
}
.pf-shead .pf-anim__cle::before { display: none; }
.pf-shead .pf-anim--pret .pf-anim__cle {
  transition: background-size 450ms var(--ease-out) var(--pf-anim-fin, 300ms);
}
.pf-shead .pf-anim--vu .pf-anim__cle { background-size: 100% 100%; }

/* Fond sombre : filet cyan clair sous le mot-cle, comme le H1 du hero.
   Un aplat cyan pale derriere un texte blanc serait illisible. */
.pf-shead--sombre .pf-anim__cle {
  background-image: linear-gradient(var(--cyan-300), var(--cyan-300));
  background-position: 0 92%;
  background-size: 0% 4px;
  padding: 0;
  margin: 0;
}
.pf-shead--sombre .pf-anim--vu .pf-anim__cle { background-size: 100% 4px; }

@media (prefers-reduced-motion: reduce) {
  .pf-shead .pf-anim--pret .pf-anim__cle { transition: none; background-size: 100% 100%; }
  .pf-shead--sombre .pf-anim--pret .pf-anim__cle { background-size: 100% 4px; }
}

@media (max-width: 1023px) {

  /* Titre : meme taille, meme interlettrage, lignes equilibrees. */
  .pf-shead h2.pf-shead__title,
  .pf-shead .pf-shead__title .elementor-heading-title {
    font: var(--type-display);
    letter-spacing: var(--type-display-tracking);
    text-wrap: balance;
  }
  .pf-shead h2.pf-shead__title { margin: 0 0 var(--space-2); }
  .pf-shead .elementor-widget.pf-shead__title { margin-block-end: var(--space-2); }
  .pf-shead .pf-shead__title .elementor-heading-title { margin: 0; }

  /* Sous-titre */
  .pf-shead .pf-shead__lead,
  .pf-shead .pf-shead__lead p { font: var(--type-body-lg); text-wrap: balance; }

  /* Centrage, sauf les en-tetes encore en colonne a cette taille */
  .pf-shead:not(.pf-shead--colonne) { text-align: center; }
  .pf-shead:not(.pf-shead--colonne) .pf-shead__lead,
  .pf-shead:not(.pf-shead--colonne) .pf-shead__lead p { margin-inline: auto; }

  /* Ecart avant le contenu, pour les en-tetes autonomes (pas les colonnes) */
  .pf-shead:not(.elementor-column) { margin-bottom: var(--space-6); }
}

@media (max-width: 640px) {
  .pf-shead--colonne { text-align: center; }
  .pf-shead--colonne .pf-shead__lead,
  .pf-shead--colonne .pf-shead__lead p { margin-inline: auto; }
}

/* ==========================================================================
   Ordinateur (>= 1024 px)
   ========================================================================== */

@media (min-width: 1024px) {

  /* Titre et sous-titre : meme echelle, memes ecarts partout */
  .pf-shead h2.pf-shead__title,
  .pf-shead .pf-shead__title .elementor-heading-title {
    font: var(--type-display);
    letter-spacing: var(--type-display-tracking);
    text-wrap: pretty;
  }
  .pf-shead h2.pf-shead__title { margin: 0 0 var(--shead-gap); }
  .pf-shead .pf-shead__title .elementor-heading-title { margin: 0; }
  .pf-shead .elementor-widget.pf-shead__title { margin-block-end: var(--shead-gap); }
  .pf-shead .pf-shead__lead,
  .pf-shead .pf-shead__lead p { font: var(--type-body-lg); max-width: 60ch; }

  /* En-tete « rubrique » : le texte a gauche, les actions a droite */
  .pf-shead.pf-shead--rubrique {
    display: flex; flex-direction: row; flex-wrap: nowrap;
    align-items: flex-end; justify-content: flex-start;
    gap: var(--space-3);
    text-align: left;
    margin-bottom: var(--shead-mb);
  }
  .pf-shead--rubrique > :first-child { flex: 1 1 auto; min-width: 0; }
  .pf-shead--rubrique .pf-shead__lead,
  .pf-shead--rubrique .pf-shead__lead p { margin-inline: 0; }

  /* En-tete « manifeste » : centre, meme ecart avant le contenu */
  .pf-shead--manifeste { text-align: center; }
  .pf-shead--manifeste .pf-shead__lead,
  .pf-shead--manifeste .pf-shead__lead p { margin-inline: auto; }
  .pf-shead--manifeste .elementor-widget.pf-shead__lead { margin-block-end: var(--shead-mb); }

  /* Action secondaire : pilule contour 40 px. Au survol, la bordure et le
     texte passent en cyan, pas le fond. */
  .pf-shead .pf-shead__action {
    display: inline-flex; align-items: center; gap: 8px; flex: none;
    height: var(--control-h-md); margin: 0; padding: 0 18px;
    border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
    background: var(--paper); color: var(--text-strong);
    font: 600 14px/1 var(--font-sans); text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }
  .pf-shead .pf-shead__action::after {
    content: ""; width: 7px; height: 7px; margin-left: -1px;
    border-top: 1.8px solid currentColor; border-right: 1.8px solid currentColor;
    transform: rotate(45deg);
  }
  .pf-shead .pf-shead__action:hover {
    border-color: var(--cyan-700); color: var(--cyan-700); background: var(--paper);
  }
}

/* Surtitre de section : mono capitales au-dessus du titre (charte). Balise p
   dans les sections en PHP, widget Texte « pf-shead__eyebrow » dans Elementor. */
.pf-shead .pf-shead__eyebrow,
.pf-shead .pf-shead__eyebrow p {
  margin: 0 0 var(--space-3);
  font: var(--type-eyebrow);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--text-muted);
}
.pf-shead .pf-shead__eyebrow p { margin: 0; }
.pf-shead .elementor-widget.pf-shead__eyebrow { margin-block-end: var(--space-3); }
.pf-shead--sombre .pf-shead__eyebrow,
.pf-shead--sombre .pf-shead__eyebrow p { color: var(--text-on-dark-muted); }