/* ==========================================================================
   Profilia - Section « Nos engagements » (composant reutilisable)

   Deux lignes : un en-tete centre (titre, sous-titre), puis quatre
   engagements en colonnes, et les deux boutons sous un filet.
   Section Elementor classique : textes et icones s'editent dans le
   constructeur, cette feuille ne porte que la mise en forme et ne consomme
   que tokens.css. Accroche : .pf-eng sur la section.

   Specificite : Elementor cible ses widgets avec 3 classes
   (.elementor-widget-icon-box.elementor-view-default .elementor-icon...).
   Chaque regle qui le concurrence est donc ancree sur .pf-eng + la classe
   du widget, pour passer devant sans !important.

   Fond : --teal-600 (bleu petrole). Pas d'arc : le hero en porte deja.
   ========================================================================== */

.pf-eng {
  /* Opacites calees pour tenir 4,5:1 minimum sur --teal-600. */
  --pf-eng-muted: rgba(255, 255, 255, .8);
  --pf-eng-line: rgba(255, 255, 255, .16);
  --pf-eng-btn-border: rgba(255, 255, 255, .4);
  --pf-eng-highlight: rgba(127, 227, 240, .22);
  /* Pastille pleine : cyan pale, trait bleu petrole (6,4:1). */
  --pf-eng-icon-bg: var(--cyan-100);
  --pf-eng-icon: var(--teal-600);
  --pf-eng-icon-size: 56px;
  --pf-eng-glyph: 28px;
  --pf-eng-gap: 32px;
  background-color: var(--teal-600);
}

.pf-eng .pf-nowrap { white-space: nowrap; }

/* Espacements tenus par la feuille, pas par l'espacement global du kit. */
.pf-eng .elementor-widget:not(:last-child) { margin-block-end: 0; }

/* Les boutons se centrent sur la ligne. */
.pf-eng .elementor-column.pf-eng__col > .elementor-widget-wrap { justify-content: center; }

/* --- Ligne 1 : en-tete centre --------------------------------------------- */

.pf-eng .elementor-widget.pf-eng__title { margin-block-end: var(--space-4); }
.pf-eng .pf-eng__title .elementor-heading-title {
  font: var(--type-display);
  letter-spacing: var(--type-display-tracking);
  color: var(--text-on-dark);
  margin: 0;
}
.pf-eng .pf-eng__title strong { font-weight: inherit; }

/* Mot-cle decolle du mot precedent. Son filet cyan clair vient de la variante
   « fond sombre » commune (titres.css, .pf-shead--sombre). */
.pf-eng .pf-anim__cle { margin-inline-start: .08em; }

.pf-eng .elementor-widget.pf-eng__intro { margin-block-end: 56px; }
.pf-eng .pf-eng__intro,
.pf-eng .pf-eng__intro p {
  font: var(--type-body-lg);
  color: var(--pf-eng-muted);
  margin: 0 auto;
  max-width: 62ch;
  text-wrap: balance;
}
.pf-eng .pf-eng__intro sup { font-size: .68em; line-height: 0; vertical-align: .55em; }

/* --- Ligne 2 : quatre engagements ------------------------------------------ */

.pf-eng .elementor-inner-section.pf-eng__grid {
  margin-block-end: var(--space-8);
  padding-block-end: var(--space-9);
  border-bottom: 1px solid var(--pf-eng-line);
}
.pf-eng .pf-eng__grid > .elementor-container { gap: var(--pf-eng-gap); }

/* Colonnes en pile verticale, hauteur egale. */
.pf-eng .pf-eng__grid .elementor-column.pf-eng__cell > .elementor-widget-wrap {
  padding: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: stretch;
  height: 100%;
}

/* Pastille et pictogramme. */
.pf-eng .elementor-widget-icon-box.pf-eng__item .elementor-icon-box-icon { margin: 0; line-height: 0; flex: none; }
.pf-eng .elementor-widget-icon-box.pf-eng__item .elementor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pf-eng-icon-size);
  height: var(--pf-eng-icon-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--pf-eng-icon-bg);
  color: var(--pf-eng-icon);
  fill: none;
  font-size: var(--pf-eng-glyph);
}
.pf-eng .elementor-widget-icon-box.pf-eng__item .elementor-icon svg {
  width: var(--pf-eng-glyph);
  height: var(--pf-eng-glyph);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
}

.pf-eng .elementor-widget-icon-box.pf-eng__item .elementor-icon-box-title {
  font: var(--type-title);
  letter-spacing: -.02em;
  color: var(--text-on-dark);
  margin: 0 0 var(--space-2);
}
.pf-eng .elementor-widget-icon-box.pf-eng__item .elementor-icon-box-description {
  font: var(--type-body-lg);
  color: var(--pf-eng-muted);
  margin: 0;
}

/* --- Boutons secondaires, sous le filet ------------------------------------ */

.pf-eng .elementor-widget.pf-eng__btn { margin: 0 6px; }
.pf-eng .pf-eng__btn .elementor-button {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);   /* 44 px : cible tactile de la charte */
  padding: 0 22px;
  gap: 10px;
  border: 1px solid var(--pf-eng-btn-border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-on-dark);
  font: var(--type-label);
  font-size: 15px;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.pf-eng .pf-eng__btn .elementor-button:hover,
.pf-eng .pf-eng__btn .elementor-button:focus-visible {
  background: transparent;
  border-color: var(--cyan-300);
  color: var(--cyan-300);
}
.pf-eng .pf-eng__btn .elementor-button-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
}

/* --- Tablette : 2 x 2 ------------------------------------------------------ */
@media (min-width: 641px) and (max-width: 1024px) {
  .pf-eng .pf-eng__grid > .elementor-container { flex-wrap: wrap; row-gap: 40px; }
  .pf-eng .pf-eng__grid .elementor-column.pf-eng__cell { width: calc(50% - var(--pf-eng-gap) / 2); }
}

/* --- Mobile : engagements empiles, icone a gauche (reglage Elementor
   « position mobile »), separes par des filets aeres ---------------------- */
@media (max-width: 640px) {
  .pf-eng {
    --pf-eng-icon-size: 48px;
    --pf-eng-glyph: 24px;
  }
  .pf-eng .elementor-widget.pf-eng__intro { margin-block-end: var(--space-8); }
  .pf-eng .pf-eng__grid > .elementor-container { gap: 0; }
  .pf-eng .elementor-inner-section.pf-eng__grid { padding-block-end: 0; margin-block-end: var(--space-7); }
  .pf-eng .pf-eng__grid .elementor-column.pf-eng__cell > .elementor-widget-wrap {
    height: auto;
    padding: var(--space-6) 0;
  }
  .pf-eng .pf-eng__grid .elementor-column.pf-eng__cell:first-child > .elementor-widget-wrap { padding-top: 0; }
  .pf-eng .pf-eng__grid .elementor-column.pf-eng__cell + .pf-eng__cell { border-top: 1px solid var(--pf-eng-line); }
  .pf-eng .elementor-widget.pf-eng__btn { margin: 0 5px 10px; }
}

/* Surtitre de la section (widget Texte pf-shead__eyebrow), centre. */
.pf-eng .elementor-widget.pf-shead__eyebrow { margin-block-end: var(--space-3); text-align: center; }
/* ==========================================================================
   Variante « parcours » (.pf-eng--parcours, accueil, 14/10/2026)
   Ordinateur : en-tete et actions a gauche, quatre etapes numerotees a
   droite, reliees par un filet. Sous 1025 px : une colonne, en-tete centre
   (regle commune des en-tetes), etapes alignees a gauche ; sur mobile, bouton
   plein en pleine largeur. Numeros : compteur CSS, pictogrammes masques.
   Libelles d'etape poses en CSS, dans l'ordre des colonnes Elementor.
   Boutons : .pf-eng__btn--plein (principal), .pf-eng__btn--lien (texte).
   ========================================================================== */

.pf-eng.pf-eng--parcours {
  --pf-eng-step: 60px;
  --pf-eng-step-gap: 36px;
  --pf-eng-rail: rgba(255, 255, 255, .26);
}

.pf-eng.pf-eng--parcours .elementor-inner-section.pf-eng__grid {
  counter-reset: pfeng;
  margin-block-end: 0;
  padding-block-end: 0;
  border-bottom: 0;
}
.pf-eng.pf-eng--parcours .pf-eng__grid > .elementor-container {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: var(--pf-eng-step-gap);
}
.pf-eng.pf-eng--parcours .pf-eng__grid .elementor-column.pf-eng__cell {
  width: 100%;
  position: relative;
}
.pf-eng.pf-eng--parcours .pf-eng__grid .elementor-column.pf-eng__cell + .pf-eng__cell { border-top: 0; }
.pf-eng.pf-eng--parcours .pf-eng__grid .elementor-column.pf-eng__cell > .elementor-widget-wrap { padding: 0; height: auto; }
/* Filet entre deux numeros : du bas d'une pastille au haut de la suivante. */
.pf-eng.pf-eng--parcours .pf-eng__grid .elementor-column.pf-eng__cell:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--pf-eng-step) / 2 - 1px);
  top: var(--pf-eng-step);
  bottom: calc(-1 * var(--pf-eng-step-gap));
  width: 2px;
  background: var(--pf-eng-rail);
}

.pf-eng.pf-eng--parcours .elementor-widget-icon-box.pf-eng__item { counter-increment: pfeng; }
.pf-eng.pf-eng--parcours .elementor-widget-icon-box.pf-eng__item .elementor-icon-box-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
  text-align: left;
}
.pf-eng.pf-eng--parcours .elementor-widget-icon-box.pf-eng__item .elementor-icon {
  width: var(--pf-eng-step);
  height: var(--pf-eng-step);
  background: var(--teal-600);
  border: 1px solid rgba(255, 255, 255, .36);
  color: var(--text-on-dark);
}
.pf-eng.pf-eng--parcours .elementor-widget-icon-box.pf-eng__item .elementor-icon svg { display: none; }
.pf-eng.pf-eng--parcours .elementor-widget-icon-box.pf-eng__item .elementor-icon::before {
  content: counter(pfeng, decimal-leading-zero);
  font: 500 16px/1 var(--font-mono);
  letter-spacing: .04em;
}
.pf-eng.pf-eng--parcours .elementor-widget-icon-box.pf-eng__item .elementor-icon-box-content { min-width: 0; padding-top: 2px; }
.pf-eng.pf-eng--parcours .elementor-widget-icon-box.pf-eng__item .elementor-icon-box-content::before {
  display: block;
  margin-bottom: 6px;
  font: var(--type-eyebrow);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--pf-eng-muted);
}
.pf-eng.pf-eng--parcours .pf-eng__cell:nth-child(1) .elementor-icon-box-content::before { content: "Inscription"; }
.pf-eng.pf-eng--parcours .pf-eng__cell:nth-child(2) .elementor-icon-box-content::before { content: "Proposition"; }
.pf-eng.pf-eng--parcours .pf-eng__cell:nth-child(3) .elementor-icon-box-content::before { content: "Signature"; }
.pf-eng.pf-eng--parcours .pf-eng__cell:nth-child(4) .elementor-icon-box-content::before { content: "Mission"; }

/* Actions : un bouton plein, un lien texte. */
.pf-eng.pf-eng--parcours .pf-eng__btn--plein .elementor-button {
  min-height: 52px;
  padding: 0 26px;
  border-color: var(--sand-200);
  background: var(--sand-200);
  color: var(--teal-900);
  font-size: 16px;
}
.pf-eng.pf-eng--parcours .pf-eng__btn--plein .elementor-button:hover,
.pf-eng.pf-eng--parcours .pf-eng__btn--plein .elementor-button:focus-visible {
  border-color: var(--paper);
  background: var(--paper);
  color: var(--teal-900);
}
.pf-eng.pf-eng--parcours .pf-eng__btn--lien .elementor-button {
  min-height: var(--tap-min);
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 16px;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .45);
  text-underline-offset: 5px;
}
.pf-eng.pf-eng--parcours .pf-eng__btn--lien .elementor-button:hover,
.pf-eng.pf-eng--parcours .pf-eng__btn--lien .elementor-button:focus-visible {
  background: transparent;
  color: var(--cyan-300);
  text-decoration-color: currentColor;
}

/* Ordinateur : deux colonnes. */
@media (min-width: 1025px) {
  .pf-eng.pf-eng--parcours .elementor-column.pf-eng__col > .elementor-widget-wrap {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) minmax(0, 1.35fr);
    grid-template-rows: 1fr auto auto auto auto 1fr;
    column-gap: 28px;
    align-items: start;
    justify-content: stretch;
  }
  .pf-eng.pf-eng--parcours .pf-eng__col > .elementor-widget-wrap > .pf-shead__eyebrow { grid-column: 1 / 3; grid-row: 2; text-align: left; }
  .pf-eng.pf-eng--parcours .pf-eng__col > .elementor-widget-wrap > .pf-eng__title { grid-column: 1 / 3; grid-row: 3; }
  .pf-eng.pf-eng--parcours .pf-eng__col > .elementor-widget-wrap > .pf-eng__intro { grid-column: 1 / 3; grid-row: 4; }
  .pf-eng.pf-eng--parcours .pf-eng__col > .elementor-widget-wrap > .pf-eng__btn--plein { grid-column: 1; grid-row: 5; margin: 0; }
  .pf-eng.pf-eng--parcours .pf-eng__col > .elementor-widget-wrap > .pf-eng__btn--lien { grid-column: 2; grid-row: 5; margin: 0; align-self: center; justify-self: start; }
  .pf-eng.pf-eng--parcours .pf-eng__col > .elementor-widget-wrap > .pf-eng__grid { grid-column: 3; grid-row: 1 / -1; margin-inline-start: 56px; }
  .pf-eng.pf-eng--parcours .pf-eng__title strong { white-space: nowrap; }
  .pf-eng.pf-eng--parcours .pf-eng__col.pf-shead--manifeste { text-align: left; }
  .pf-eng.pf-eng--parcours .pf-eng__title .elementor-heading-title { text-align: left; }
  .pf-eng.pf-eng--parcours .elementor-widget.pf-eng__intro { margin-block-end: 36px; }
  .pf-eng.pf-eng--parcours .pf-eng__intro,
  .pf-eng.pf-eng--parcours .pf-eng__intro p { margin-inline: 0; max-width: 42ch; text-align: left; text-wrap: pretty; }
}

/* Tablette et mobile : une colonne. */
@media (max-width: 1024px) {
  .pf-eng.pf-eng--parcours .elementor-widget.pf-eng__intro { margin-block-end: var(--space-8); }
  .pf-eng.pf-eng--parcours .elementor-inner-section.pf-eng__grid { max-width: 560px; margin: 0 auto var(--space-8); }
  .pf-eng.pf-eng--parcours .elementor-widget.pf-eng__btn { margin: 0 6px; }
}
@media (max-width: 640px) {
  .pf-eng.pf-eng--parcours {
    --pf-eng-step: 44px;
    --pf-eng-step-gap: 26px;
  }
  .pf-eng.pf-eng--parcours .elementor-widget-icon-box.pf-eng__item .elementor-icon-box-wrapper { gap: 16px; }
  .pf-eng.pf-eng--parcours .elementor-widget-icon-box.pf-eng__item .elementor-icon::before { font-size: 13px; }
  .pf-eng.pf-eng--parcours .elementor-widget.pf-eng__btn--plein { width: 100%; margin: 0 0 var(--space-2); }
  .pf-eng.pf-eng--parcours .pf-eng__btn--plein .elementor-button { width: 100%; justify-content: center; }
  .pf-eng.pf-eng--parcours .elementor-widget.pf-eng__btn--lien { width: 100%; margin: 0; text-align: center; }
}