/* professionnels.css : la famille « professionnels » dans le système Arche.
   Hub /professionnels/, fiches métier (tpl/professionnel.php, terrestres et
   nautiques) et /partenariat-conciergerie/.

   Le héros de la famille a sa propre grille (baie de 580 px, titre calé sur
   le haut de l'arche), plus large que celle de core.css. Or cette feuille
   est différée : quand elle arrivait après le premier rendu, la baie
   grandissait et glissait de 38 px, le titre descendait de 58 px (CLS de
   0,30 à 0,38 mesuré, image LCP comprise). Tout le bloc du héros, entre les
   repères « critique:debut » et « critique:fin », est donc AUSSI injecté en
   ligne juste avant le héros par pro_css_critique() (tpl/professionnel-
   outils.php) : il s'applique avant le premier rendu, et cette feuille ne
   fait plus que le redire à l'identique. Une seule source, aucune copie à
   tenir à jour à la main.

   Sans JavaScript, ces règles donnent l'écran final : aucune opacité nulle,
   aucun clip-path fermé, aucun transform d'attente. Le mouvement est posé par
   motion.js à partir des attributs data-* (docs/motion-api.md). */

@layer components {

  /* critique:debut */
  /* ======================================================================
     Héros : la lumière de l'accueil, un rameau en filigrane et la moulure
     de pierre qui suit la baie à 14 px.
     ====================================================================== */
  .pro-hero {
    background:
      radial-gradient(60% 55% at 80% 20%, rgba(255, 246, 228, .9), rgba(255, 246, 228, 0) 70%),
      radial-gradient(40% 40% at 8% 90%, rgba(226, 208, 180, .38), rgba(226, 208, 180, 0) 70%),
      var(--chaux);
  }
  /* Le texte et la baie passent devant l'ombre et le rameau. */
  .pro-hero > .wrap { position: relative; z-index: 1; }
  .rameau--pro { width: min(40vw, 540px); height: min(40vw, 540px); top: -8%; left: -7%; transform: rotate(-8deg); }
  .pro-hero__titre { line-height: 1.06; }
  /* Le corps du chapo et la cadence des blocs, que rest.css (différée aussi)
     donne à tous les héros : redits ici pour que le texte ne se recompose
     pas à son arrivée, ce qui repoussait les boutons. */
  .pro-hero__texte > .lead { max-width: 31em; font-size: var(--fs-lead); line-height: 1.65; color: var(--encre-doux); }
  .pro-hero__texte > * + * { margin-block-start: var(--esp-m); }
  .pro-hero__liens { margin-top: 2rem; }
  .pro-hero__delai { margin-top: 1.1rem; font: italic 1.12rem / 1.3 var(--serif); color: var(--encre-doux); }
  .pro-hero__delai .u-num { font-size: .84em; font-style: normal; }
  .pro-hero__liens .u-num { letter-spacing: .03em; }
  .pro-hero__panneau::before {
    content: ""; position: absolute; inset: -14px -14px 0; z-index: -1; pointer-events: none;
    border: 1px solid var(--pierre); border-bottom: 0; border-radius: var(--cintre);
  }
  /* La légende d'ambiance sous la baie, comme sur l'accueil : elle décrit
     un lieu, jamais un chantier. */
  .pro-hero__legende { position: absolute; left: 0; bottom: -2.4rem; max-width: none; margin: 0; font: 1.02rem / 1.3 var(--serif); color: var(--encre-doux); }
  .pro-hero__legende em { color: var(--argile); }
  @media (min-width: 900px) {
    /* Comme l'accueil : une baie de 580 px (44 % de la grille au plus), et
       le bloc de texte (surtitre, titre, texte) calé sur le haut de la baie.
       Avant, la baie faisait 540 px et un padding de 9vh poussait le titre
       90 px sous son sommet : le texte flottait, loin de l'arche. Quatre
       rangées : surtitre, titre, texte, puis un ressort qui absorbe la
       hauteur restante de la baie. */
    .pro-hero__grille { grid-template-columns: minmax(0, 1fr) minmax(0, min(44%, 580px)); grid-template-rows: auto auto auto minmax(0, 1fr); }
    .pro-hero__grille > .pro-hero__surtitre { grid-column: 1; grid-row: 1; margin-bottom: 1.3rem; padding-top: clamp(.25rem, 1.5vh, 1rem); }
    .pro-hero__grille > .pro-hero__titre { grid-column: 1; grid-row: 2; align-self: start; padding-top: 0; }
    .pro-hero__grille > .pro-hero__texte { grid-column: 1; grid-row: 3; }
    .pro-hero__grille > .pro-image { grid-row: 1 / span 4; height: clamp(520px, 74svh, 720px); margin-bottom: 2.4rem; }
  }
  @media (max-width: 899px) {
    .rameau--pro { width: 90vw; height: 90vw; top: -10%; left: -34%; }
    .pro-hero__surtitre { margin-bottom: .7rem; }
    .pro-hero__legende { display: none; }
    .pro-hero__titre { font-size: clamp(2.15rem, 1.2rem + 4.4vw, 2.9rem); }
    .pro-hero__panneau::before { inset: -8px -8px 0; }
    .pro-hero__texte > .lead { font-size: 1rem; line-height: 1.6; }
    .pro-hero__liens { margin-top: 1.25rem; gap: 12px 14px; }
    .pro-hero__delai { font-size: 1.05rem; }
  }
  /* Tablette en portrait : la règle commune de core.css (toute la largeur,
     400 px de haut au plus) faisait de la baie un demi-disque de 700 × 379 px
     presque sans montants, une bande de photo. Ici la baie reste une arche
     haute, comme dans Arche : 520 px de large au plus, calée sur le texte. */
  @media (min-width: 600px) and (max-width: 899px) {
    .pro-hero__grille > .pro-image { width: min(100%, 520px); height: clamp(460px, 56svh, 640px); justify-self: start; }
    .pro-hero__panneau::before { inset: -10px -10px 0; }
  }
  /* critique:fin */

  /* Un chiffre dans un texte serif garde la valeur des lettres. */
  :is(.stat > span, .pro-plan__texte, .pro-change__liste li, .pro-perimetre__liste li, .pro-vue h3) .u-num { font-size: .84em; font-weight: 400; font-style: normal; }

  /* ======================================================================
     Hub · les métiers : la baie collante change de vue (data-vues).
     La baie collante n'existe que là où motion.js la fait changer de vue :
     bureau à pointeur fin, JavaScript présent, mouvement permis. Partout
     ailleurs (téléphone, tablette tactile, sans JS, mouvement réduit),
     elle laisserait la chambre d'hôtel à côté des restaurants et des
     bureaux : chaque métier y montre sa propre baie, à côté de son texte
     sur grand écran, au-dessus sur téléphone.
     ====================================================================== */
  .pro-vues { position: relative; padding-block: var(--section-y) calc(var(--section-y) * .5); }
  .pro-vues__tete { max-width: 46rem; margin-bottom: clamp(3rem, 8vh, 6rem); }
  .pro-vues__tete .lead { margin-top: var(--esp-m); }
  .pro-vues__grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 8vw, 140px); }
  .pro-vues__baie { display: none; }
  .pro-vues__arche { height: calc(100% - 52px); box-shadow: var(--ombre-baie); }
  .pro-vues__arche img { position: absolute; inset: 0; opacity: 0; transform: scale(1.06); transition: opacity 1.6s var(--doux), transform 2.4s var(--doux); }
  .pro-vues__arche img.is-actif { opacity: 1; transform: none; }
  /* Le nom du métier sous la baie : seulement quand motion.js le fait suivre. */
  .pro-vues__repere { max-width: none; margin: 18px auto 0; text-align: center; font: italic 1.3rem / 1.3 var(--serif); color: var(--argile); visibility: hidden; }
  html.js-bureau .pro-vues__repere { visibility: visible; }
  .pro-vue h3 { margin-bottom: 1.1rem; font-size: clamp(2.2rem, 1.4rem + 1.8vw, 3.3rem); }
  .pro-vue > p:not(.surtitre) { max-width: 30em; color: var(--encre-doux); }
  .pro-vue > p:last-child { margin-top: 1.8rem; }
  .pro-vue__arche { display: block; width: 100%; box-shadow: var(--ombre-baie); }
  .pro-vues__liste { display: grid; gap: clamp(4rem, 10vh, 7rem); }
  @media (min-width: 600px) {
    /* Sans la baie collante : la baie à gauche, le texte à droite, puis
       l'inverse au métier suivant, comme une galerie de portiques. Dès la
       tablette : en dessous de 900 px, six blocs identiques empilés (baie,
       surtitre, titre, texte, bouton) faisaient une colonne de 6 000 px
       et laissaient la moitié droite vide sous chaque grande baie. */
    .pro-vue { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: minmax(0, 1fr) repeat(4, auto) minmax(0, 1fr); column-gap: clamp(40px, 7vw, 120px); }
    .pro-vue__arche { grid-column: 1; grid-row: 1 / -1; height: clamp(380px, 62svh, 560px); }
    .pro-vue > :not(.pro-vue__arche) { grid-column: 2; }
    .pro-vue > .surtitre { grid-row: 2; }
    .pro-vue > h3 { grid-row: 3; }
    .pro-vue > p:not(.surtitre, :last-child) { grid-row: 4; }
    .pro-vue > p:last-child { grid-row: 5; }
    .pro-vue:nth-child(even) { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
    .pro-vue:nth-child(even) > .pro-vue__arche { grid-column: 2; }
    .pro-vue:nth-child(even) > :not(.pro-vue__arche) { grid-column: 1; }
  }
  @media (min-width: 900px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    html.js .pro-vues__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    html.js .pro-vues__baie { display: block; position: sticky; top: 13svh; height: 74svh; max-height: 760px; align-self: start; }
    html.js .pro-vues__liste { display: block; }
    html.js .pro-vue { display: flex; flex-direction: column; justify-content: center; min-height: 74svh; padding-block: 6vh; }
    html.js .pro-vue__arche { display: none; }
  }
  @media (max-width: 899px) {
    .pro-vues { padding-block: 12vh 2vh; }
    .pro-vues__liste { gap: 11vh; }
    .pro-vue h3 { font-size: clamp(2rem, 1.3rem + 3vw, 2.6rem); }
    .pro-vue > p:last-child { margin-top: 1.3rem; }
  }
  @media (min-width: 600px) and (max-width: 899px) {
    .pro-vues__liste { gap: clamp(3.5rem, 8vh, 5rem); }
    .pro-vue { column-gap: clamp(28px, 5vw, 44px); }
    .pro-vue__arche { height: clamp(340px, 46vw, 400px); }
  }
  @media (max-width: 599px) {
    /* Une baie par métier, au-dessus de son texte, plus petite que l'écran
       et posée tantôt à gauche, tantôt à droite (une sur deux en anse) :
       la colonne se lit comme une suite de portiques, pas comme une pile. */
    .pro-vue__arche { width: 78%; aspect-ratio: 4 / 5; max-height: 52svh; margin-bottom: 26px; }
    .pro-vue:nth-child(even) .pro-vue__arche { margin-left: auto; }
  }

  /* ======================================================================
     Hub · les lieux : passer sous l'arche (data-seuil). Le titre et sa
     phrase restent sur l'enduit, la photo n'en porte aucun.
     ====================================================================== */
  .pro-seuil { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: clamp(1.5rem, 4vh, 2.5rem); min-height: 100svh; padding: clamp(4rem, 10vh, 7rem) var(--marge) 0; background: var(--enduit); }
  .pro-seuil::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 50% at 50% 26%, rgba(255, 246, 228, .7), transparent 70%); }
  .pro-seuil__tete { max-width: 46rem; margin-inline: auto; text-align: center; }
  .pro-seuil__tete .surtitre { justify-content: center; }
  .pro-seuil__tete h2 { font-size: clamp(2.1rem, 1.3rem + 2vw, 3.4rem); }
  .pro-seuil__texte { margin: 1rem auto 0; font-size: var(--fs-lead); color: var(--encre-doux); }
  .pro-seuil__baie { flex: 1 1 auto; display: flex; flex-direction: column; width: 100%; max-width: 1200px; margin: 0 auto; }
  .pro-seuil__fenetre { position: relative; flex: 1 1 auto; min-height: 52svh; width: 100%; overflow: hidden; border-radius: 50% 50% 0 0 / 24% 24% 0 0; background: var(--sable); }
  /* La fenêtre s'ouvre depuis son centre (motion.js, clip-path) : la légende
     est centrée sous elle, sans quoi elle restait seule au bord gauche,
     décrochée de l'image pendant tout le passage. */
  .pro-seuil__legende { max-width: none; padding-block: .9rem 1.6rem; text-align: center; font: 1.02rem / 1.3 var(--serif); color: var(--encre-doux); }
  .pro-seuil__legende em { color: var(--argile); }
  .pro-seuil__fenetre :is(picture, img) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .pro-seuil__fenetre img { object-position: 50% 62%; transform-origin: 50% 70%; }
  @media (max-width: 899px) {
    .pro-seuil { min-height: 0; padding-top: 4.5rem; }
    .pro-seuil__fenetre { flex: none; height: 112vw; max-height: 620px; min-height: 0; border-radius: 50% 50% 0 0 / 18% 18% 0 0; }
    .pro-seuil__legende { font-size: .95rem; }
  }

  /* ---- Repères du hub et du partenariat (composant .stats de rest.css) ---- */
  .pro-chiffres { padding-block: var(--section-y-s); }

  /* ======================================================================
     Fiche · les engagements chiffrés : le titre et sa baie en anse à gauche,
     quatre engagements numérotés dans leur petite arche de pierre.
     ====================================================================== */
  .pro-engagements { padding-block: var(--section-y); background: var(--enduit); }
  .pro-engagements__grille { display: grid; gap: var(--esp-xl) clamp(2.5rem, 7vw, 8rem); align-items: center; }
  .pro-engagements__baie { width: min(100%, 420px); height: clamp(280px, 44svh, 440px); margin-top: var(--esp-l); box-shadow: var(--ombre-baie); }
  .pro-engagements__baie picture { inset: -6% 0; }
  .pro-engagements__tete { min-width: 0; }
  .pro-engagements__tete h2 { max-width: 10em; }
  .pro-engagements__liste { border-top: var(--filet); }
  .pro-engagement { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: .45rem 1.5rem; align-items: start; max-width: none; padding-block: clamp(1.4rem, 3vh, 2.1rem); border-bottom: var(--filet); }
  .pro-engagement__num { grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 48px; padding-top: 6px; border: 1px solid var(--pierre); border-radius: 999px 999px 4px 4px; background: var(--chaux-clair); font-size: 1rem; color: var(--argile); }
  .pro-engagement__terme { font-size: clamp(1.5rem, 1.2rem + .8vw, 2rem); }
  .pro-engagement__valeur { color: var(--encre-doux); }
  @media (min-width: 900px) {
    .pro-engagements__grille { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  }
  @media (max-width: 899px) {
    .pro-engagements__baie { width: min(84%, 520px); height: auto; aspect-ratio: 5 / 4; }
  }

  /* ======================================================================
     Fiche · le périmètre : une baie et sa liste en feuilles d'olivier.
     Fiche nautique : les prestations de bord et la condition à quai.
     ====================================================================== */
  .pro-perimetre { padding-block: var(--section-y); }
  .pro-perimetre__grille { display: grid; gap: var(--esp-xl) clamp(2.5rem, 7vw, 8rem); align-items: center; }
  .pro-perimetre__baie { height: clamp(380px, 72svh, 660px); box-shadow: var(--ombre-baie); }
  .pro-perimetre__baie picture { inset: -6% 0; }
  /* Photo en 16:9 (tpl/professionnel.php, $baieFixe) : pas de parallaxe, donc
     pas de débord à couvrir ; recadrée par cover, elle reste à sa taille native. */
  .pro-perimetre__baie--fixe picture { inset: 0; }
  /* La persienne reste une ombre légère : sur une literie blanche, plus
     forte, elle ne laissait voir qu'une tache claire. */
  .pro-perimetre__baie .arche__ombre { opacity: .35; }
  .pro-perimetre__texte, .pro-vues__liste { min-width: 0; }
  /* Fiche nautique : la liste de bord est plus longue que la baie n'est haute. */
  .pro-perimetre--bord .pro-perimetre__grille { align-items: start; }
  /* La niche des références suit : son padding haut suffit, sans quoi
     300 px d'enduit vide séparaient l'encadré « À quai » de la niche. */
  .pro-perimetre--bord { padding-bottom: calc(var(--section-y) * .5); }
  .pro-perimetre__liste { gap: 1rem; margin-top: var(--esp-l); }
  .pro-perimetre__liste li { padding-left: 28px; font: 400 clamp(1.2rem, 1.05rem + .45vw, 1.4rem) / 1.35 var(--serif); }
  .pro-perimetre__liste li::before { top: .45em; }
  @media (min-width: 900px) {
    .pro-perimetre__grille { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
    /* La liste de bord est longue : la baie l'accompagne au lieu de laisser
       une colonne vide sous elle. */
    .pro-perimetre--bord .pro-perimetre__baie { position: sticky; top: 14svh; }
  }
  @media (max-width: 899px) {
    /* Sur tablette, la baie ne prend pas toute la largeur : elle resterait plus haute que l'écran. */
    .pro-perimetre__baie { width: min(88%, 480px); height: auto; aspect-ratio: 4 / 5; max-height: 64svh; }
  }

  .pro-bord { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 2rem; margin-top: var(--esp-l); border-top: var(--filet); }
  @media (min-width: 600px) { .pro-bord { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .pro-bord li { max-width: none; border-bottom: var(--filet); }
  /* Chaque entrée ouvre une prestation : sur écran tactile, sans survol, rien
     ne le disait. La flèche des pilules (var(--fleche), comme .lien::after)
     se pose à droite, alignée au milieu du nom et de la saison. */
  .pro-bord a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; column-gap: 1rem; row-gap: .15rem; min-height: 64px; padding-block: .8rem; }
  .pro-bord a > span { grid-column: 1; }
  .pro-bord a::after { content: ""; grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 15px; height: 10px; background: var(--fleche) center / contain no-repeat; transition: transform var(--dur-survol) var(--doux); }
  .pro-bord a:is(:hover, :focus-visible)::after { transform: translateX(5px); }
  .pro-bord__nom { font: 400 1.25rem / 1.25 var(--serif); color: var(--encre); transition: color var(--dur-survol) var(--doux), transform var(--dur-survol) var(--doux); }
  .pro-bord__saison { font: italic 1rem / 1.3 var(--serif); color: var(--encre-doux); }
  .pro-bord a:is(:hover, :focus-visible) .pro-bord__nom { color: var(--argile); transform: translateX(6px); }
  .pro-quai { margin-top: var(--esp-l); }
  .pro-quai h3 { font-size: clamp(1.45rem, 1.2rem + .6vw, 1.8rem); }
  .pro-quai p:not(:has(> .lien)) { color: var(--encre-doux); }

  /* ======================================================================
     Fiche · le plan d'entretien : une phrase posée sur le lin, un rameau.
     ====================================================================== */
  .pro-plan { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--section-y); background: var(--lin); text-align: center; }
  .rameau--plan { width: min(34vw, 460px); height: min(34vw, 460px); right: -6%; bottom: -14%; transform: scaleX(-1) rotate(10deg); }
  .pro-plan__grille { position: relative; z-index: 1; max-width: 58rem; margin-inline: auto; }
  .pro-plan__grille .surtitre { justify-content: center; }
  .pro-plan__grille h2 { margin-inline: auto; }
  .pro-plan__texte { max-width: 34em; margin: var(--esp-l) auto 0; font: 400 clamp(1.3rem, 1.05rem + .9vw, 1.85rem) / 1.45 var(--serif); color: var(--encre); }
  @media (max-width: 899px) { .rameau--plan { width: 80vw; height: 80vw; right: -36%; bottom: -10%; } }

  /* ======================================================================
     Fiche · les références : une niche d'enduit, haut en anse de panier.
     ====================================================================== */
  .pro-references { padding-block: var(--section-y); }
  .pro-references__niche {
    max-width: 46rem; margin-inline: auto; padding: clamp(4rem, 8vw, 6.5rem) clamp(1.5rem, 5vw, 4.5rem) clamp(2.5rem, 5vw, 4rem);
    border-radius: 50% 50% var(--rayon) var(--rayon) / 130px 130px var(--rayon) var(--rayon);
    background: var(--enduit); box-shadow: var(--ombre-douce); text-align: center;
  }
  .pro-references__niche .surtitre { justify-content: center; }
  .pro-references__niche h2 { font-size: var(--fs-h2-s); }
  .pro-references__niche > p:last-child { margin: var(--esp-m) auto 0; color: var(--encre-doux); }
  @media (max-width: 599px) {
    .pro-references__niche { border-radius: 50% 50% var(--rayon) var(--rayon) / 70px 70px var(--rayon) var(--rayon); }
  }

  /* ======================================================================
     Partenariat · ce que ça change : le lin, les feuilles d'olivier, une baie.
     ====================================================================== */
  .pro-change { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--section-y); background: var(--lin); }
  .rameau--change { width: min(32vw, 440px); height: min(32vw, 440px); left: -6%; bottom: -16%; transform: rotate(-14deg); }
  .pro-change__grille { position: relative; z-index: 1; display: grid; gap: var(--esp-xl) clamp(2.5rem, 7vw, 8rem); align-items: center; }
  .pro-change__texte .lead { margin-top: var(--esp-m); }
  .pro-change__liste { display: grid; gap: 1.1rem; margin-top: var(--esp-l); }
  .pro-change__liste li { position: relative; max-width: 30em; padding-left: 28px; font: 400 clamp(1.2rem, 1.05rem + .45vw, 1.36rem) / 1.35 var(--serif); }
  .pro-change__liste li::before { content: ""; position: absolute; left: 0; top: .45em; width: 9px; height: 16px; border-radius: 0 100% 0 100%; background: var(--olive); opacity: .7; transform: rotate(28deg); }
  .pro-change__baie { height: clamp(360px, 66svh, 620px); box-shadow: var(--ombre-baie); }
  .pro-change__baie picture { inset: -6% 0; }
  @media (min-width: 900px) { .pro-change__grille { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
  @media (max-width: 899px) {
    .rameau--change { width: 80vw; height: 80vw; left: -30%; bottom: -8%; }
    .pro-change__baie { width: 86%; margin-left: auto; height: auto; aspect-ratio: 1 / 1; }
  }

  /* ======================================================================
     Partenariat · le déroulé sous la voûte (data-voute) : l'arc de pierre,
     quatre points, quatre temps numérotés dans leur petite arche.
     ====================================================================== */
  .pro-deroule { position: relative; overflow: hidden; padding: var(--section-y) var(--marge) calc(var(--section-y) * .85); background: var(--enduit); text-align: center; }
  .pro-deroule::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 40% at 50% 30%, rgba(255, 246, 228, .7), transparent 70%); }
  .pro-deroule__tete { position: relative; max-width: 760px; margin: 0 auto 8vh; }
  .pro-deroule__tete .surtitre { justify-content: center; }
  .pro-deroule__tete h2 { margin-inline: auto; }
  .pro-voute { position: relative; max-width: 1180px; margin: 0 auto; }
  .pro-voute__arc { position: relative; aspect-ratio: 1000 / 300; }
  .pro-voute__trait { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .pro-voute__trait path { fill: none; stroke: var(--pierre); stroke-width: 1.2; }
  .pro-voute__point { position: absolute; left: var(--x); top: var(--y); bottom: -18px; width: 1px; margin-left: -.5px; background: linear-gradient(180deg, rgba(164, 105, 74, .55), rgba(205, 184, 149, 0)); transform-origin: top; }
  .pro-voute__point::before { content: ""; position: absolute; top: -5px; left: -4.5px; width: 10px; height: 10px; border-radius: 50%; background: var(--chaux-clair); border: 1.3px solid var(--argile); }
  .pro-etapes { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 34px; }
  .pro-etapes li { max-width: none; padding: 0 6px; }
  .pro-etapes__num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 48px; padding-top: 6px; border: 1px solid var(--pierre); border-radius: 999px 999px 4px 4px; background: var(--chaux-clair); font-size: 1rem; color: var(--argile); }
  .pro-etapes h3 { margin: 1.1rem auto .7rem; max-width: 12em; font-size: clamp(1.4rem, 1.2rem + .5vw, 1.65rem); }
  .pro-etapes p { margin: 0 auto; max-width: 22em; font-size: .95rem; line-height: 1.6; color: var(--encre-doux); }
  .pro-deroule__lien { position: relative; margin-top: 7vh; justify-content: center; }
  @media (max-width: 899px) {
    .pro-deroule { padding-block: 12vh 10vh; }
    .pro-deroule__tete { margin-bottom: 6vh; }
    .pro-voute__arc { display: none; }
    .pro-etapes { grid-template-columns: minmax(0, 1fr); gap: 44px; margin-top: 0; }
  }

  /* ---- Partenariat · les offres par métier, en pilules fond lin ---- */
  .pro-offres { padding-block: var(--section-y) calc(var(--section-y) * .4); }
  .pro-offres__grille { display: grid; gap: var(--esp-l) clamp(2.5rem, 7vw, 8rem); align-items: center; }
  .pro-offres__tete .lead { margin-top: var(--esp-m); }
  .pro-offres__liste { margin-top: 0; }
  @media (min-width: 900px) { .pro-offres__grille { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

  /* ---- Partenariat · la demande : le formulaire dans un panneau d'enduit ---- */
  .pro-demande { padding-block: var(--section-y); }
  .pro-demande__grille { display: grid; gap: var(--esp-xl) clamp(2.5rem, 6vw, 7rem); align-items: start; }
  .pro-demande__tete .lead { margin-top: var(--esp-m); }
  .pro-demande__form { max-width: 44rem; padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--rayon); background: var(--enduit); }
  .form__etape { display: flex; align-items: center; gap: .9rem; font: 400 var(--fs-h4) / 1.2 var(--serif); }
  .form__etape > span { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 40px; padding-top: 5px; border: 1px solid var(--pierre); border-radius: 999px 999px 4px 4px; background: var(--chaux-clair); font: 400 .82rem / 1 var(--sans); font-variant-numeric: var(--fvn); color: var(--argile); }
  @media (min-width: 900px) {
    .pro-demande__grille { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
    .pro-demande__tete { position: sticky; top: calc(var(--h-entete) + 2.5rem); }
  }
  /* Cibles de 44 px : la ligne de consentement entière (la case seule fait
     22 px) et le lien de la politique, dont le padding agrandit la zone de
     clic sans changer l'interligne. */
  .pro-demande__form .field--consent label { min-height: 44px; }
  .pro-demande__form .field--consent label a { padding-block: 11px; }
  .pro-demande__urgence > span { flex: 1 1 100%; }
  @media (max-width: 599px) { .pro-demande__form { margin-inline: calc(-1 * var(--gout) / 2); padding: 1.4rem 1.1rem; } }
}