/* PBE Expert : thème corporatif « sciences de la vie » (direction approuvée en aperçu, apercu/accueil.html).
   Photos d'abord, marine profond, un seul accent rouge (le B du logo), titres légers en Hanken Grotesk.
   Règles : aucun !important ; le contour du focus reste visible ; chaque mise en page à deux colonnes a sa version
   téléphone placée après elle. */

:root {
  --logo-blue: #0089c0; /* le cyan du logo, assez foncé pour se lire sur du blanc (fins de titres) */
  --navy: #0a1c2e; --navy-2: #0f2740; --navy-3: #15324f;
  --sky: #8fc9e8; --cyan: #00aeef; --red: #bf1e2e; --red-2: #a31826;
  --body-ink: #3c4a56;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Base ---------- */
body { font-size: 1.03rem; }
.wrap { max-width: 82.5rem; padding-inline: clamp(1rem, 4vw, 3.5rem); }
h1, h2 { font-weight: 300; letter-spacing: -.025em; }
h1 strong, h2 strong { font-weight: 600; color: var(--logo-blue); } /* son choix du 2026-10-22 : la fin du titre au bleu du logo */
/* sur les fonds sombres ou bleus (hauts de page sur photo, sections marine, film) : la fin du titre reste blanche, en gras (sa demande du 2026-10-22) */
.px-pagehead :is(h1, h2) strong, .px-dark :is(h1, h2) strong, .film :is(h1, h2) strong, .px-perks :is(h1, h2) strong { color: inherit; }
h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem); line-height: 1.08; }
h3 { font-weight: 500; letter-spacing: -.01em; }
.section { padding-block: clamp(4.5rem, 3rem + 6vw, 8.5rem); }
.section-alt { background: var(--surface); border: 0; }
.eyebrow { color: var(--primary); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .9rem; } /* en majuscules : sa demande du 2026-10-27 */
.px-intro { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--body-ink); max-width: 38rem; }
.text-link { color: var(--primary); text-decoration: none; display: inline-flex; align-items: center; min-height: 2.75rem; }
.text-link::after { display: inline-block; transition: transform .25s var(--ease); }
.text-link:hover::after { transform: translateX(4px); }

/* Boutons */
.button { border-radius: 0; padding: .95rem 1.6rem; min-height: 3.1rem; transition: background .25s, color .25s, border-color .25s; }
.button:hover { filter: none; }
.px-red { background: var(--red); border-color: var(--red); color: #fff; }
.px-red:hover { background: var(--red-2); border-color: var(--red-2); }
.px-line { background: transparent; border-color: rgba(255, 255, 255, .65); color: #fff; }
.px-line:hover { background: #fff; color: var(--ink); border-color: #fff; }
.px-dark-line { background: transparent; border-color: var(--ink); color: var(--ink); }
.px-dark-line:hover { background: var(--ink); color: #fff; }

/* ---------- Bandeau « Groupe PBE » ---------- */
.px-group { margin: 0 auto 0 0; display: flex; align-items: center; gap: .55rem; }
.px-group span { color: #fff; font-weight: 600; display: inline-flex; align-items: center; gap: .55rem; }
.px-group span::before { content: ""; width: 6px; height: 6px; background: var(--sky); }
.px-group a { color: #fff; }

/* ---------- En-tête ---------- */
.site-header { background: #fff; border-bottom: 1px solid var(--line); backdrop-filter: none; }
.header-row { min-height: 5rem; }
.brand img { height: 3rem; }
.nav-list { gap: .4rem; }
.nav-list a { padding: .55rem .8rem; font-weight: 500; font-size: .98rem; }
.nav-list a[aria-current] { color: var(--primary); box-shadow: inset 0 -2px 0 var(--red); }
.nav-list a.nav-cta { background: var(--red); color: #fff; border-radius: 0; padding: .8rem 1.2rem; margin-left: .8rem; }
.nav-list a.nav-cta:hover { background: var(--red-2); }

/* Accueil : l'en-tête est posé sur la photo, puis devient blanc et fixe au défilement (theme.js). */

/* ---------- Accueil : haut de page en vidéo (boucle muette de 15 s, plein écran) ---------- */

/* ---------- Chiffres et référentiels ---------- */
.px-figures { border-bottom: 1px solid var(--line); }
.px-figures ul { list-style: none; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.px-figures li { padding: 2.75rem 1.75rem 2.5rem 0; }
.px-figures li + li { padding-left: 2rem; border-left: 1px solid var(--line); }
.px-figures strong { display: block; font-family: var(--font-heading); font-weight: 300; font-size: clamp(2.8rem, 2rem + 2.6vw, 4.2rem); line-height: 1; letter-spacing: -.03em; color: var(--navy); }
.px-figures sup { font-size: .45em; color: var(--primary); font-weight: 500; vertical-align: .95em; margin-left: 2px; }
.px-figures li > span { display: block; margin-top: .75rem; color: var(--body-ink); font-size: .95rem; max-width: 24ch; }

/* ---------- À propos (accueil) ---------- */
.px-points { list-style: none; margin: 2.2rem 0 2.3rem; padding: 0; border-top: 1px solid var(--line); }
.px-points li { display: grid; grid-template-columns: 2.75rem 1fr; gap: .9rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.px-points li > span { font-weight: 600; font-size: .82rem; color: var(--primary); padding-top: .2rem; }
.px-points h3 { font-family: var(--font-heading); font-size: 1.12rem; margin: 0; }
.px-points p { margin: .2rem 0 0; color: var(--body-ink); font-size: .95rem; }

/* ---------- En-têtes de section ---------- */
.px-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem 3rem; flex-wrap: wrap; margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.px-head-row h2 { margin: 0; }
.px-head-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 3rem; align-items: end; margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.px-head-2 h2 { margin: 0; }
.px-head-2 .px-intro { margin: 0; }

/* ---------- Cartes d'expertise ---------- */
.px-card-body { position: relative; padding: 1.9rem 1.9rem 2rem; display: flex; flex-direction: column; flex: 1; }
.px-card-body::before { content: ""; position: absolute; left: 1.9rem; top: 0; width: 2.75rem; height: 2px; background: var(--primary); transition: width .5s var(--ease); }
.px-card-body h3 { font-family: var(--font-heading); font-size: 1.55rem; line-height: 1.15; margin: 0; }
.px-card-body > p { color: var(--body-ink); font-size: .97rem; margin: .8rem 0 1.15rem; }
.px-taglist { list-style: none; margin: 0 0 1.6rem; padding: 0; border-top: 1px solid var(--line); }
.px-taglist li { display: flex; justify-content: space-between; gap: .75rem; padding: .62rem 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.px-taglist small { color: var(--muted); font-size: .74rem; font-weight: 600; letter-spacing: .06em; white-space: nowrap; padding-top: .12rem; }
.px-card-body .text-link { margin-top: auto; }

/* ---------- Sections sombres ---------- */
.px-dark { background: var(--navy); color: #fff; }
.px-dark h2, .px-dark h3 { color: #fff; }
.px-dark .eyebrow { color: var(--sky); }
.px-dark .px-intro { color: #fff; }

/* Secteurs : mosaïque de photos */
.px-bento { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 17.5rem; gap: .9rem; }
.px-tile { position: relative; overflow: hidden; background: var(--navy-2); }
.px-tile.big { grid-column: span 2; grid-row: span 2; }
.px-tile.wide { grid-column: span 2; }
.px-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.px-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6, 18, 30, .92) 0%, rgba(6, 18, 30, .55) 50%, rgba(6, 18, 30, .08) 82%); }
.px-tile-tx { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem 1.6rem; z-index: 2; }
.px-tile small { font-size: .85rem; font-weight: 600; color: var(--sky); }
.px-tile h3 { font-family: var(--font-heading); font-size: 1.45rem; line-height: 1.15; margin: .35rem 0 0; }
.px-tile.big h3 { font-size: 2.1rem; }
.px-tile h3 a { color: #fff; text-decoration: none; }
.px-tile h3 a::after { content: ""; position: absolute; inset: 0; }
.px-tile p { margin: .5rem 0 0; color: #c9d6df; font-size: .9rem; line-height: 1.5; }
.px-tile.big p { max-width: 44ch; margin-top: .75rem; }
.px-tile h3 a:focus-visible { outline: 0; }
.px-tile:focus-within { outline: 3px solid var(--cyan); outline-offset: -3px; }

/* ---------- Réalisations (accueil) ---------- */
.px-proj figure { margin: 0; overflow: hidden; aspect-ratio: 16 / 11; }
.px-proj figure img { width: 100%; height: 100%; object-fit: cover; }
.px-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: 1.3rem 0 0; font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.px-meta span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; background: var(--muted); margin-right: 1.1rem; vertical-align: 3px; }
.px-proj h3 { font-family: var(--font-heading); font-size: clamp(1.3rem, 1.1rem + .6vw, 1.65rem); margin: .55rem 0 0; }
.px-proj p:not(.px-meta) { color: var(--body-ink); margin: .5rem 0 0; font-size: .97rem; }

/* ---------- Logos clients ---------- */
.px-logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.px-logos li { background: #fff; height: 6.9rem; display: grid; place-items: center; padding: 1.1rem; }
.px-logos img { max-height: 3.5rem; width: auto; max-width: 100%; object-fit: contain; filter: grayscale(1) contrast(1.1); opacity: .62; mix-blend-mode: multiply; transition: filter .4s, opacity .4s; }
.px-logos li:hover img { filter: none; opacity: 1; }

/* ---------- Présence internationale ---------- */
.px-world { overflow: hidden; }

/* ---------- Formation et événements (accueil) ---------- */
.px-know-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 1.6rem; }
.px-know-grid figure { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; }
.px-know-grid li:first-child figure { aspect-ratio: 16 / 11; }
.px-know-grid img { width: 100%; height: 100%; object-fit: cover; }
.px-tag { margin: 1.25rem 0 0; font-size: .88rem; font-weight: 600; color: var(--primary); }
.px-know-grid h3 { font-family: var(--font-heading); font-size: 1.3rem; line-height: 1.25; margin: .5rem 0 0; }
.px-know-grid p:not(.px-tag) { color: var(--body-ink); font-size: .95rem; margin: .5rem 0 0; }

/* ---------- Carrières (bandeau photo du modèle) ---------- */
.px-careers { min-height: 34rem; display: flex; align-items: center; }
.px-careers::after { background: linear-gradient(90deg, rgba(6, 18, 30, .9) 0%, rgba(6, 18, 30, .7) 45%, rgba(6, 18, 30, .2) 100%); }
.px-careers .eyebrow { color: #9fd3ee; }
.px-careers h2 { max-width: 16ch; }
.px-careers .button.px-red { background: var(--red); border-color: var(--red); color: #fff; }

/* ---------- Appel final ---------- */
.px-cta-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: center; }
.px-cinfo { margin: 0; border-top: 1px solid var(--line); }
.px-cinfo div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: 1.15rem 0; border-bottom: 1px solid var(--line); }
.px-cinfo dt { font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: .2rem; }
.px-cinfo dd { margin: 0; }

/* ---------- Pages intérieures : haut de page photo ---------- */
.px-pagehead { position: relative; color: #fff; background: var(--navy); overflow: hidden; isolation: isolate; }
.px-pagehead > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.px-pagehead::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6, 18, 30, .9) 0%, rgba(6, 18, 30, .65) 50%, rgba(6, 18, 30, .2) 100%); }
.px-pagehead .wrap { padding-block: clamp(5rem, 3.5rem + 6vw, 9rem) clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.px-pagehead .eyebrow { color: #9fd3ee; }
.px-pagehead h1 { color: #fff; font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.4rem); line-height: 1.04; max-width: 16ch; margin: 0; }
.px-pagehead .lead { color: #d3dee6; margin: 1.5rem 0 0; max-width: 40rem; }

/* Expertises : sections alternées photo / texte */
.px-xp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.px-xp + .px-xp { margin-top: clamp(4rem, 8vw, 7rem); }
.px-xp figure { margin: 0; overflow: hidden; aspect-ratio: 4 / 3.4; position: sticky; top: 7rem; }
.px-xp figure img { width: 100%; height: 100%; object-fit: cover; }
.px-xp.reverse figure { order: 2; }
.px-xp h2 { margin: 0; }
.px-xp > div > p:not(.eyebrow) { color: var(--body-ink); font-size: 1.05rem; margin: 1.2rem 0 1.6rem; max-width: 36rem; }
.px-xp .px-taglist li { font-size: .97rem; padding: .85rem 0; }
.px-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem; counter-reset: s; }
.px-steps li { border-top: 2px solid var(--sky); padding-top: 1.3rem; }
.px-steps li > span { font-family: var(--font-heading); font-size: .9rem; color: var(--sky); font-weight: 600; letter-spacing: .08em; }
.px-steps h3 { font-family: var(--font-heading); font-size: 1.3rem; margin: .6rem 0 .5rem; }
.px-steps p { color: #fff; font-size: .95rem; margin: 0; }

/* Secteurs : index détaillé */
.px-sector-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.px-sector-list li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 1rem 2rem; padding: 1.8rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.px-sector-list .n { font-family: var(--font-heading); color: var(--primary); font-weight: 600; font-size: .9rem; }
.px-sector-list h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 400; margin: 0; }
.px-sector-list p { margin: 0; color: var(--body-ink); }
.px-sector-list small { font-size: .74rem; font-weight: 600; letter-spacing: .1em; color: var(--primary); white-space: nowrap; }
.px-band { background: var(--surface); }
.px-band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; padding-block: clamp(3rem, 5vw, 4.5rem); }
.px-band h2 { margin: 0; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); }
.px-band p:not(.eyebrow) { margin: .6rem 0 0; color: var(--body-ink); max-width: 36rem; }

/* Réalisations : projets en liste */
.px-cases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; }
.px-cases > li { display: flex; flex-direction: column; background: var(--surface); }
.px-cases figure { margin: 0; overflow: hidden; aspect-ratio: 16 / 11; }
.px-cases figure img { width: 100%; height: 100%; object-fit: cover; }
.px-cases .px-logo-panel { aspect-ratio: 16 / 11; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); padding: 2rem; }
.px-cases .px-logo-panel img { max-height: 5rem; width: auto; max-width: 80%; object-fit: contain; }
.px-cases .px-case-body { padding: 0 1.6rem 1.8rem; }
.px-cases h3 { font-family: var(--font-heading); font-size: 1.35rem; margin: .5rem 0 0; }
.px-cases p:not(.px-meta) { color: var(--body-ink); margin: .5rem 0 0; font-size: .97rem; }

/* Formation : agrément, cours, événements */
.px-accred { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.px-cert { border: 1px solid var(--line); border-top: 3px solid var(--primary); padding: 2rem; background: #fff; }
.px-cert strong { display: block; font-family: var(--font-heading); font-weight: 300; font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); letter-spacing: -.02em; line-height: 1; margin: .3rem 0 1rem; color: var(--navy); }
.px-cert p { margin: 0 0 .8rem; color: var(--body-ink); }
.px-courses { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2.5rem; border-top: 1px solid var(--line); }
.px-courses li { break-inside: avoid; padding: 1rem 0 1rem 1.8rem; border-bottom: 1px solid var(--line); position: relative; font-weight: 500; }
.px-courses li::before { content: ""; position: absolute; left: 0; top: 1.55rem; width: .9rem; height: 2px; background: var(--primary); }
.px-events { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.px-events li { display: grid; grid-template-columns: 5rem minmax(0, 1fr) auto; gap: 1rem 2rem; padding: 1.25rem 0; border-bottom: 1px solid rgba(255, 255, 255, .14); align-items: baseline; }
.px-events .y { font-family: var(--font-heading); color: var(--sky); font-weight: 600; }
.px-events strong { font-family: var(--font-heading); font-weight: 500; font-size: 1.15rem; }
.px-events small { color: #fff; font-size: .9rem; }
.px-gal { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.px-gal figure { margin: 0; overflow: hidden; aspect-ratio: 3 / 2; }
.px-gal img { width: 100%; height: 100%; object-fit: cover; }

/* À propos */
.px-story { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 6rem); }
.px-story h2 { margin: 0; }
.px-story p { color: var(--body-ink); font-size: 1.05rem; }
/* Page Formation : la fiche de profil du formateur sous l'agrément ; fiche Assurance qualité : la couverture du magazine.
   Ces visuels du Dr. Aziz sont répartis sur des pages différentes, jamais deux sur la même. */
.px-accred-side { display: grid; gap: 2.5rem; }
.px-trainer { margin: 0; max-width: 36rem; }
.px-trainer a { display: block; }
.px-trainer img { display: block; width: 100%; height: auto; box-shadow: 0 18px 40px rgba(10, 30, 60, .16); transition: transform .3s var(--ease); }
.px-trainer figcaption { padding-top: 1.2rem; color: var(--body-ink); line-height: 1.5; }
.px-trainer small { display: block; font-size: .98rem; font-weight: 600; color: var(--primary); margin-bottom: .9rem; }
.px-trainer b { display: block; font-family: var(--font-heading); font-weight: 500; font-size: 1.2rem; color: var(--ink); margin-bottom: .25rem; }
.px-dpress { background: var(--surface); }
.px-dpress-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.px-dpress-cover { display: block; justify-self: end; width: min(100%, 22rem); }
.px-dpress-cover img { display: block; width: 100%; height: auto; box-shadow: 0 26px 56px rgba(10, 30, 60, .24); transition: transform .3s var(--ease); }
.px-dpress h2 { margin: 0 0 1.3rem; }
.px-dpress-text p { color: var(--body-ink); max-width: 36rem; margin: 0 0 1rem; }
.px-dpress-text .px-dpress-source { font-size: .9rem; font-weight: 600; color: var(--navy); margin-bottom: 1.4rem; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .px-trainer a:hover img, .px-dpress-cover:hover img { transform: translateY(-4px); } }
@media (max-width: 760px) {
  .px-dpress-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .px-dpress-cover { justify-self: start; width: min(72%, 17rem); }
}
.px-values { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; }
.px-values li { background: #fff; padding: 2rem; border-top: 3px solid var(--primary); }
.px-values span { font-family: var(--font-heading); color: var(--primary); font-weight: 600; font-size: .9rem; }
.px-values h3 { font-family: var(--font-heading); font-size: 1.3rem; margin: .7rem 0 .5rem; }
.px-values p { margin: 0; color: var(--body-ink); }
.s-statement { font-weight: 300; letter-spacing: -.02em; }
.s-statement em { color: var(--primary); }

/* Carrières */
.px-profiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3rem; border-top: 1px solid var(--line); }
.px-profiles li { padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.px-profiles h3 { font-family: var(--font-heading); font-size: 1.25rem; margin: 0; }
.px-profiles p { margin: .4rem 0 0; color: var(--body-ink); }

/* Nous joindre */
.contact-details { border-radius: 0; border-top: 3px solid var(--primary); }
.contact-form form { background: var(--surface); padding: clamp(1.4rem, 3vw, 2.6rem); }
input, select, textarea { border-radius: 0; }

/* ---------- Pied de page foncé ---------- */
.site-footer { background: var(--navy); color: #fff; border-top: 0; margin-top: 0; padding-top: 4.5rem; }
.site-footer .brand img { filter: brightness(0) invert(1); height: 3.4rem; }
.site-footer .footer-title { color: #fff; }
.site-footer .footer-list a, .site-footer a { color: #d3dee6; }
.site-footer a:hover { color: #fff; }
.px-social { list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.px-social a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border: 1px solid rgba(255, 255, 255, .25); text-decoration: none; font-size: .88rem; font-weight: 600; }
.px-social a:hover { background: var(--red); border-color: var(--red); }
.px-group-strip { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 2.8rem; }
.px-group-strip p { margin: 0; padding: 1.3rem 0; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.8rem; font-size: .9rem; }
.px-group-strip strong { color: #fff; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; }
.px-group-strip span, .px-group-strip a { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; }
.px-group-strip span::before, .px-group-strip a::before { content: ""; width: 6px; height: 6px; background: var(--sky); }
.site-footer .footer-bottom { border-top-color: rgba(255, 255, 255, .12); margin-top: 0; color: #fff; }

/* ---------- Apparitions au défilement (theme.js ; rien de caché sans script) ---------- */
[data-reveal].is-waiting { opacity: 0; transform: translateY(1.5rem); }
[data-reveal].is-in { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform .9s var(--ease); }

/* Zoom léger des photos au survol : ordinateur seulement, jamais avec « réduire les animations ». */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .px-tile img, .px-proj figure img, .px-know-grid img, .px-cases figure img { transition: transform 1s var(--ease); }
  .px-tile:hover img, .px-proj:hover figure img, .px-know-grid li:hover img, .px-cases > li:hover figure img { transform: scale(1.05); }
}

/* ============ Tablettes ============ */
@media (max-width: 1180px) {
  .px-logos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .px-know-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .px-know-grid li:first-child { grid-column: 1 / -1; }
  .px-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .px-figures ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .px-figures li:nth-child(3) { padding-left: 0; border-left: 0; }
  .px-figures li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .px-head-2, .px-cta-grid, .px-xp, .px-accred, .px-story { grid-template-columns: minmax(0, 1fr); }
  .px-xp figure { position: static; }
  .px-xp.reverse figure { order: 0; }
  .px-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 15rem; }
  .px-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .px-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .px-sector-list li { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .px-sector-list li p, .px-sector-list li small { grid-column: 2; }
}

/* ============ Téléphones ============ */
@media (max-width: 760px) {
  .header-row { min-height: 4.25rem; }
  .brand img { height: 2.6rem; }
  .nav-list a { padding: .85rem 0; }
  .nav-list a.nav-cta { margin-left: 0; }
  .px-figures li { padding: 1.9rem 1rem 1.7rem 0; }
  .px-figures li + li { padding-left: 1rem; }
  .px-figures li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .px-bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 14rem; }
  .px-tile.big, .px-tile.wide { grid-column: auto; }
  .px-tile.big { grid-row: span 2; }
  .px-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .px-logos li { height: 5.4rem; padding: .75rem; }
  .px-know-grid, .px-cases, .px-values, .px-profiles, .px-steps, .px-gal { grid-template-columns: minmax(0, 1fr); }
  .px-courses { columns: 1; }
  .px-cinfo div { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .px-events li { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .px-events small { grid-column: 2; }
  /* téléphone : étiquettes à ~20 px de leur titre, rien collé à une photo, cibles de 44 px */
  .px-figures { padding-top: 1.5rem; }
  .px-tile h3, .px-proj h3, .px-cases h3 { margin-top: 1.25rem; }
  .footer-credit { min-height: 2.75rem; }
  .px-group a { display: none; }
}

/* Crédit du studio sur le pied de page foncé : le mot « Studio » en blanc (contraste). */
.site-footer .credit-mark { color: #fff; }

/* Lien texte : une espace avant la flèche ; libellé des référentiels en casse normale (2026-10-19). */
.text-link::after { margin-left: .35em; }

/* ============ Fiches services et secteurs (pages générées, 2026-10-19) ============
   Haut de page coupé en deux (texte sur gris clair, photo à droite : convient aux photos en hauteur), introduction et
   colonne d'appoint, socle numéroté, accordéons par secteur ou par service, étapes sur bande marine, étiquettes. */

.px-dhead { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); min-height: clamp(30rem, 64vh, 41rem); background: var(--surface); }
.px-dhead-text { display: flex; flex-direction: column; justify-content: center; padding: clamp(3rem, 2rem + 4vw, 6rem) clamp(2rem, 4vw, 4.5rem) clamp(3rem, 2rem + 4vw, 5rem) calc(max(0px, (100% - 82.5rem) / 2) + clamp(1rem, 4vw, 3.5rem)); }
.px-dhead h1 { font-size: clamp(2.4rem, 1.4rem + 3.2vw, 4.1rem); line-height: 1.04; margin: 0; max-width: 15ch; text-wrap: balance; }
.px-dhead .lead { color: var(--body-ink); margin: 1.5rem 0 0; max-width: 36rem; }
.px-dhead-refs { margin: 2.2rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: .9rem; color: var(--muted); max-width: 36rem; }
.px-dhead-refs span { display: block; color: var(--primary); font-weight: 600; margin-bottom: .25rem; }
.px-dhead-media { margin: 0; position: relative; min-height: 18rem; }
.px-dhead-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.px-dhead-media img[src*="gestion-ingenieur-tuyauterie"] { object-position: 6% 50%; } /* Gestion de projets : l’ingénieur est à gauche de la photo, il reste entier quand le cadre est presque carré */
.px-crumbs ol { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-wrap: wrap; align-items: center; font-size: .9rem; }
.px-crumbs li + li::before { content: "/"; color: #a9b6c1; margin: 0 .6rem; }
.px-crumbs a { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; min-height: 2.75rem; min-width: 2.75rem; }
.px-crumbs a:hover { color: var(--primary); text-decoration: underline; }

.px-dintro-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 3rem clamp(3rem, 6vw, 6rem); align-items: start; }
.px-dintro-text { max-width: 46rem; }
.px-dintro-text p { color: var(--body-ink); margin: 0 0 1.1rem; }
.px-dintro-text p:first-child { font-family: var(--font-heading); font-size: clamp(1.25rem, 1.05rem + .7vw, 1.55rem); line-height: 1.45; font-weight: 300; color: var(--ink); margin-bottom: 1.6rem; }
.px-dserved { border-left: 1px solid var(--line); padding-left: clamp(1.5rem, 3vw, 2.5rem); }
.px-dserved h2, .px-dproducts h2, .px-dothers h2 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; letter-spacing: 0; color: var(--primary); margin: 0 0 .8rem; }
.px-dserved ul { list-style: none; margin: 0; padding: 0; }
.px-dserved a { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; min-height: 2.75rem; padding: .45rem 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.px-dserved img { width: 3.6rem; height: 2.6rem; object-fit: cover; display: block; }
.px-dserved a::after { content: "→"; color: var(--primary); transition: transform .25s var(--ease); }
.px-dserved a:hover { color: var(--primary); }
.px-dserved a:hover::after { transform: translateX(4px); }
.px-dfact { margin: 0; border-left: 1px solid var(--line); padding-left: clamp(1.5rem, 3vw, 2.5rem); color: var(--body-ink); }
.px-dfact strong { display: block; font-family: var(--font-heading); font-size: clamp(3.6rem, 2.4rem + 4vw, 6rem); font-weight: 300; line-height: 1; color: var(--primary); letter-spacing: -.03em; margin-bottom: .8rem; }

.px-dintro + .px-dcore, .px-dintro + .px-dproducts { padding-top: 0; }
.px-dsec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 3rem; align-items: end; border-top: 1px solid var(--line); padding-top: clamp(2.5rem, 4vw, 3.5rem); margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.px-dsec-head h2 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); margin: 0; }
.px-dsec-head p { margin: 0; color: var(--body-ink); max-width: 32rem; }
.px-dcore-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 4vw, 4rem); }
.px-dcore-list li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); padding: 1.05rem 0; border-top: 1px solid var(--line); }
.px-dcore-list span { font-family: var(--font-heading); font-size: .85rem; font-weight: 600; color: var(--primary); letter-spacing: .06em; padding-top: .15rem; }

.px-dgroups { background: var(--surface); }
.px-dgroups-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 2rem clamp(3rem, 6vw, 6rem); align-items: start; }
.px-dgroups .px-dsec-head { display: block; border: 0; padding: 0; margin: 0; position: sticky; top: 7rem; }
.px-dgroups .px-dsec-head p { margin-top: 1rem; }
.px-acc { border-bottom: 1px solid #d3dbe2; }
.px-acc-item { border-top: 1px solid #d3dbe2; }
.px-acc-item summary { list-style: none; display: flex; align-items: center; gap: 1rem; min-height: 2.75rem; padding: 1.15rem 0; cursor: pointer; font-family: var(--font-heading); font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); font-weight: 500; color: var(--ink); }
.px-acc-item summary::-webkit-details-marker { display: none; }
.px-acc-item summary::after { content: ""; flex: none; width: .7rem; height: .7rem; border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: translateY(-.2rem) rotate(45deg); transition: transform .25s var(--ease); }
.px-acc-item[open] summary::after { transform: translateY(.15rem) rotate(-135deg); }
.px-acc-item summary:hover .px-acc-name { color: var(--primary); }
.px-acc-name { flex: 1; }
.px-acc-img { flex: none; width: 5.2rem; height: 3.6rem; object-fit: cover; transition: transform .5s var(--ease); }
.px-acc-item[open] .px-acc-img { transform: scale(1.04); }
.px-acc-count { font-family: var(--font-body); font-size: .82rem; font-weight: 600; color: var(--muted); min-width: 2rem; text-align: right; }
.px-acc-body { padding: 0 0 1.6rem; }
.px-acc-body ul { list-style: none; margin: 0 0 .6rem; padding: 0; }
.px-acc-body li { position: relative; padding: .42rem 0 .42rem 1.3rem; color: var(--body-ink); font-size: .98rem; }
.px-acc-body li::before { content: ""; position: absolute; left: 0; top: 1.02em; width: 6px; height: 6px; background: var(--primary); }

.px-phases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem clamp(1.5rem, 3vw, 2.5rem); }
.px-phase h3 { font-family: var(--font-heading); font-size: 1.3rem; margin: 0 0 .6rem; padding-top: 1.2rem; border-top: 2px solid var(--sky); }
.px-phase ol { list-style: none; margin: 0; padding: 0; }
.px-phase li { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); padding: .55rem 0; border-bottom: 1px solid rgba(255, 255, 255, .12); color: #fff; font-size: .94rem; }
.px-phase li span { color: var(--sky); font-family: var(--font-heading); font-size: .8rem; font-weight: 600; letter-spacing: .06em; padding-top: .15rem; }
.px-dsteps .px-head-row p { color: #fff; margin: 0; } .px-dsteps .px-head-row p.eyebrow { margin-bottom: .9rem; } /* étiquette en majuscules : jamais collée au titre */

.px-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.px-tags li { border: 1px solid var(--line); background: #fff; padding: .55rem .95rem; font-size: .95rem; color: var(--ink); }

.px-focus-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2.5rem clamp(1.25rem, 2.5vw, 2rem); }
.px-focus-list li { border-top: 2px solid var(--sky); padding-top: 1.2rem; }
.px-focus-list span { color: var(--sky); font-family: var(--font-heading); font-size: .85rem; font-weight: 600; letter-spacing: .08em; }
.px-focus-list h3 { font-family: var(--font-heading); font-size: 1.15rem; margin: .6rem 0 .5rem; }
.px-focus-list p { color: #fff; font-size: .93rem; margin: 0; }
.px-dfocus .px-head-row p { color: #fff; margin: 0; } .px-dfocus .px-head-row p.eyebrow { margin-bottom: .9rem; }

.px-dothers { padding-block: clamp(3.5rem, 2.5rem + 3vw, 5rem); }
.px-dall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem 1.2rem; }
.px-dall.is-sectors { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.px-dall a { display: block; color: var(--ink); text-decoration: none; }
.px-dall img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: .8rem; transition: filter .3s, opacity .3s; }
.px-dall .n { display: block; font-family: var(--font-heading); font-size: .8rem; font-weight: 600; color: var(--primary); letter-spacing: .06em; }
.px-dall strong { display: block; font-family: var(--font-heading); font-weight: 500; font-size: 1.02rem; line-height: 1.3; }
.px-dall small { display: block; margin-top: .25rem; font-size: .82rem; font-weight: 600; color: var(--muted); }
.px-dall a:hover strong { color: var(--primary); text-decoration: underline; }
.px-dall li.is-here img { filter: grayscale(1); opacity: .55; }
.px-dall li.is-here strong { color: var(--muted); }

@media (max-width: 1180px) {
  .px-phases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .px-focus-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .px-dall.is-sectors { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .px-dhead { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .px-dhead-text { padding: 3rem clamp(1rem, 4vw, 3.5rem) 2.75rem; }
  .px-dhead-media { min-height: 0; aspect-ratio: 16 / 9; }
  .px-dintro-grid, .px-dgroups-grid { grid-template-columns: minmax(0, 1fr); }
  .px-dgroups .px-dsec-head { position: static; }
  .px-dsec-head { grid-template-columns: minmax(0, 1fr); }
  .px-dall, .px-dall.is-sectors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  /* sur téléphone, l’image d’abord, puis le titre dans le même premier écran (son choix A du 2026-10-28) */
  .px-dhead-text { padding-top: 1.6rem; }
  .px-dhead-media { order: -1; aspect-ratio: 16 / 10; }
  .px-dserved, .px-dfact { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 1.75rem; }
  .px-dcore-list, .px-phases, .px-focus-list { grid-template-columns: minmax(0, 1fr); }
  .px-dall, .px-dall.is-sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem .9rem; }
  .px-acc-img { width: 3.8rem; height: 2.8rem; }
  .px-acc-body li { font-size: .95rem; }
  .px-tags { gap: .45rem; }
  .px-tags li { font-size: .88rem; padding: .4rem .7rem; }
}

/* Expertises : les huit services ; à l'ordinateur, la photo du service survolé (ou atteint au clavier) s'affiche en
   grand à côté de la liste ; sur tablette et téléphone, chaque rangée montre sa vignette. */
.px-svc-pick { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.px-svc-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid #d3dbe2; }
.px-svc-rows a { display: grid; grid-template-columns: 3rem minmax(0, 1fr) 1.5rem; gap: .4rem 1rem; align-items: baseline; padding: 1.25rem 0; border-bottom: 1px solid #d3dbe2; color: var(--ink); text-decoration: none; }
.px-svc-rows a::after { content: "→"; color: var(--primary); transition: transform .25s var(--ease); }
.px-svc-thumb { display: none; }
.px-svc-rows .n { font-family: var(--font-heading); font-size: .9rem; font-weight: 600; color: var(--primary); letter-spacing: .06em; }
.px-svc-rows strong { display: block; font-family: var(--font-heading); font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); font-weight: 500; }
.px-svc-rows .d { display: block; color: var(--body-ink); font-size: .95rem; margin-top: .3rem; }
.px-svc-rows a:hover strong, .px-svc-rows a:focus-visible strong { color: var(--primary); }
.px-svc-rows a:hover::after { transform: translateX(4px); }
.px-svc-photos { position: sticky; top: 7rem; height: clamp(26rem, 62vh, 36rem); overflow: hidden; background: var(--navy); }
.px-svc-photos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease); }
.px-svc-pick:has(.px-svc-rows li:hover, .px-svc-rows li:focus-within) .px-svc-photos img { opacity: 0; }
.px-svc-pick:has(.px-svc-rows li:nth-child(1):hover) .px-svc-photos > img:nth-of-type(1), .px-svc-pick:has(.px-svc-rows li:nth-child(1):focus-within) .px-svc-photos > img:nth-of-type(1),
.px-svc-pick:has(.px-svc-rows li:nth-child(2):hover) .px-svc-photos > img:nth-of-type(2), .px-svc-pick:has(.px-svc-rows li:nth-child(2):focus-within) .px-svc-photos > img:nth-of-type(2),
.px-svc-pick:has(.px-svc-rows li:nth-child(3):hover) .px-svc-photos > img:nth-of-type(3), .px-svc-pick:has(.px-svc-rows li:nth-child(3):focus-within) .px-svc-photos > img:nth-of-type(3),
.px-svc-pick:has(.px-svc-rows li:nth-child(4):hover) .px-svc-photos > img:nth-of-type(4), .px-svc-pick:has(.px-svc-rows li:nth-child(4):focus-within) .px-svc-photos > img:nth-of-type(4),
.px-svc-pick:has(.px-svc-rows li:nth-child(5):hover) .px-svc-photos > img:nth-of-type(5), .px-svc-pick:has(.px-svc-rows li:nth-child(5):focus-within) .px-svc-photos > img:nth-of-type(5),
.px-svc-pick:has(.px-svc-rows li:nth-child(6):hover) .px-svc-photos > img:nth-of-type(6), .px-svc-pick:has(.px-svc-rows li:nth-child(6):focus-within) .px-svc-photos > img:nth-of-type(6),
.px-svc-pick:has(.px-svc-rows li:nth-child(7):hover) .px-svc-photos > img:nth-of-type(7), .px-svc-pick:has(.px-svc-rows li:nth-child(7):focus-within) .px-svc-photos > img:nth-of-type(7),
.px-svc-pick:has(.px-svc-rows li:nth-child(8):hover) .px-svc-photos > img:nth-of-type(8), .px-svc-pick:has(.px-svc-rows li:nth-child(8):focus-within) .px-svc-photos > img:nth-of-type(8) { opacity: 1; }
@media (max-width: 980px) {
  .px-svc-pick { grid-template-columns: minmax(0, 1fr); }
  .px-svc-photos { display: none; }
  .px-svc-rows a { grid-template-columns: 5.5rem minmax(0, 1fr) 1.2rem; align-items: center; }
  .px-svc-thumb { display: block; width: 5.5rem; height: 4.2rem; object-fit: cover; grid-row: 1; }
  .px-svc-rows .n { display: none; }
}
.px-sector-list h2 a { color: inherit; text-decoration: none; }
.px-sector-list h2 a:hover { color: var(--primary); text-decoration: underline; }
@media (max-width: 980px) {
  .px-svc-rows a { grid-template-columns: 2.5rem minmax(0, 1fr) 1.5rem; }
  .px-svc-rows .d { grid-column: 2; grid-row: 2; }
}

/* À propos : distinctions, une rangée par reconnaissance (année, titre, organisme) sur bande marine. */
.px-award-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .16); }
.px-award-list li { display: grid; grid-template-columns: 6rem minmax(0, 1.1fr) minmax(0, 1fr); gap: .3rem 2rem; align-items: baseline; padding: 1.35rem 0; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.px-award-list .y { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 300; color: var(--sky); letter-spacing: -.01em; }
.px-award-list li.rep .y { color: #fff; }
.px-award-list strong { font-family: var(--font-heading); font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); font-weight: 500; color: #fff; }
.px-award-list .by { color: #fff; font-size: .95rem; }
@media (max-width: 760px) {
  .px-award-list li { grid-template-columns: 4.2rem minmax(0, 1fr); }
  .px-award-list .y { font-size: 1.25rem; }
  .px-award-list .by { grid-column: 2; }
}

/* Contact : les bureaux par continent (siège social souligné d'un filet marine). */
.px-regions { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 2.5rem clamp(2rem, 4vw, 3.5rem); }
.px-region { display: flex; flex-direction: column; }
.px-region h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; color: var(--primary); margin: 0 0 1rem; }
.px-region ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; flex: 1; }
.px-region:first-child ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.px-region:last-child ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.px-region li { background: #fff; padding: 0 1.4rem 1.6rem; border-top: 3px solid var(--line); }
.px-region li img { display: block; max-width: none; width: calc(100% + 2.8rem); margin: 0 -1.4rem 1.3rem; aspect-ratio: 16 / 10; object-fit: cover; }
.px-region li img[src*="casablanca"] { object-position: 50% 0; }
.px-region li.hq { border-top-color: var(--navy); }
.px-region strong { display: block; font-family: var(--font-heading); font-size: 1.3rem; font-weight: 500; }
.px-region small { display: block; font-size: .85rem; font-weight: 600; color: var(--primary); margin: .2rem 0 .9rem; }
.px-region address { font-style: normal; color: var(--body-ink); font-size: .95rem; line-height: 1.6; }
@media (max-width: 1180px) {
  .px-regions { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .px-region:first-child ul, .px-region:last-child ul { grid-template-columns: minmax(0, 1fr); }
}

/* Secteurs : une carte photo par secteur (sa photo « signature »), la première en grand. */
.px-sector-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem clamp(1.25rem, 2.5vw, 2rem); }
.px-sector-cards li:first-child { grid-column: span 2; }
.px-sector-cards a { display: block; color: var(--ink); text-decoration: none; }
.px-sector-cards figure { margin: 0 0 1.2rem; height: clamp(14rem, 20vw, 17rem); overflow: hidden; background: var(--surface); }
.px-sector-cards img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.px-sector-cards small { font-size: .78rem; font-weight: 600; letter-spacing: .06em; color: var(--primary); }
.px-sector-cards h2 { font-family: var(--font-heading); font-size: clamp(1.35rem, 1.1rem + .8vw, 1.7rem); font-weight: 400; line-height: 1.2; margin: .4rem 0 .5rem; }
.px-sector-cards h2::after { content: " →"; color: var(--primary); transition: margin .25s var(--ease); }
.px-sector-cards p { margin: 0; color: var(--body-ink); font-size: .97rem; }
.px-sector-cards a:hover h2 { color: var(--primary); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .px-sector-cards a:hover img { transform: scale(1.05); } }
@media (max-width: 980px) {
  .px-sector-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .px-sector-cards li:first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .px-sector-cards { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .px-sector-cards figure { height: 13rem; }
}

/* À propos : l'histoire accompagnée de deux vraies photos d'équipe (l'une sur l'autre) ; l'équipe en portraits couleur
   d'une même séance photo. */
.px-story-photos { margin-top: clamp(2rem, 4vw, 3rem); }
.px-story-photos img { display: block; width: 100%; height: auto; }
/* Carrières : chaque profil avec la photo de son service ; la vie d'équipe en mosaïque de vraies photos. */
.px-profiles:has(figure) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem clamp(1.25rem, 2.5vw, 2rem); border: 0; }
.px-profiles:has(figure) li { padding: 0; border: 0; }
.px-profiles figure { margin: 0 0 1.1rem; aspect-ratio: 4 / 3; overflow: hidden; }
.px-profiles figure img { width: 100%; height: 100%; object-fit: cover; }
.px-culture-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, clamp(11rem, 17vw, 15rem)); gap: 8px; }
.px-culture-grid li { overflow: hidden; }
.px-culture-grid li:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.px-culture-grid li:nth-child(2) { grid-column: span 2; }
.px-culture-grid img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) {
  .px-culture-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 14rem 9rem 9rem; }
  .px-culture-grid li:nth-child(1) { grid-column: 1 / -1; grid-row: auto; }
  .px-culture-grid li:nth-child(2) { grid-column: 1 / -1; }
}
@media (max-width: 980px) { .px-profiles:has(figure) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; } }
.px-credits { margin: 2rem 0 0; font-size: .875rem; color: var(--muted); }
.px-credits a { color: inherit; }

/* Accueil : les visages de l'équipe (téléphone : on la fait glisser). */
.px-faces { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1.1rem; }
.px-faces img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; margin-bottom: .8rem; }
.px-faces strong { display: block; font-family: var(--font-heading); font-weight: 500; font-size: 1rem; line-height: 1.25; }
.px-faces span { display: block; color: var(--muted); font-size: .85rem; line-height: 1.4; margin-top: .2rem; }
@media (max-width: 980px) {
  .px-faces { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; }
  .px-faces li { flex: none; width: 12.5rem; scroll-snap-align: start; }
}

/* Actualités : à la une (photo et texte), les nouvelles de l'année en cartes avec la ville de l'événement, une carte
   LinkedIn, puis les archives en rangées (année, date, titre, type et lieu). Le même bloc de cartes sur l'accueil. */
.px-featured-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2.5rem clamp(2.5rem, 5vw, 5rem); align-items: center; }
.px-featured-grid figure { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; }
.px-featured-grid img { width: 100%; height: 100%; object-fit: cover; }
.px-featured h2 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.7rem); margin: .8rem 0 1.2rem; text-wrap: balance; }
.px-featured p:not(.px-news-meta) { color: var(--body-ink); }
.px-news-meta { margin: 0; font-size: .88rem; color: var(--muted); }
.px-news-meta .tag { display: inline-block; font-weight: 600; color: var(--primary); margin-right: .4rem; }
.px-news { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem clamp(1.25rem, 2.5vw, 2rem); }
.px-news > li { background: #fff; padding: 0 1.4rem 1.6rem; }
.px-news figure { margin: 0 -1.4rem 1.2rem; aspect-ratio: 16 / 10; overflow: hidden; }
.px-news figure img { width: 100%; height: 100%; object-fit: cover; }
.px-news h3 { font-family: var(--font-heading); font-size: 1.22rem; line-height: 1.3; margin: .5rem 0 .2rem; }
.px-news h3 a { color: inherit; text-decoration: none; }
.px-news h3 a:hover { color: var(--primary); text-decoration: underline; }
.px-news .place { margin: 0 0 .7rem; font-size: .9rem; font-weight: 600; color: var(--ink); }
.px-news p { color: var(--body-ink); font-size: .95rem; }
.px-news > li.px-news-follow { background: var(--navy); color: #fff; padding: 2rem 1.6rem; display: flex; flex-direction: column; justify-content: center; }
.px-news-follow h3 { color: #fff; font-size: 1.5rem; font-weight: 400; margin: 0 0 .8rem; }
.px-news-follow h3 strong { font-weight: 600; }
.px-news-follow p { color: #fff; margin: 0 0 1.4rem; }
.px-news-follow .button { align-self: flex-start; }
.px-archive { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.px-archive li { display: grid; grid-template-columns: 5rem 11rem minmax(0, 1fr); gap: .3rem 1.6rem; align-items: baseline; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.px-archive .y { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 300; color: var(--primary); }
.px-archive li.rep .y { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.px-archive li.rep { border-top-color: transparent; }
.px-archive .d { grid-column: 2; grid-row: 1; }
.px-archive li > div { grid-column: 3; grid-row: 1; }
.px-archive .d { font-size: .9rem; color: var(--muted); }
.px-archive strong { display: block; font-weight: 500; color: var(--ink); }
.px-archive .p { display: block; font-size: .88rem; color: var(--muted); margin-top: .2rem; }
@media (max-width: 980px) {
  .px-featured-grid { grid-template-columns: minmax(0, 1fr); }
  .px-news { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .px-news.is-short li:last-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .px-news { grid-template-columns: minmax(0, 1fr); }
  .px-archive li { grid-template-columns: 3.6rem minmax(0, 1fr); }
  .px-archive .d { grid-column: 2; grid-row: 1; }
  .px-archive li > div { grid-column: 2; grid-row: 2; }
}

/* Crédits photos : une rangée par photo (ce qu'elle montre ; auteur et licence liée à la source). */
.px-credits-page h2 { font-size: 1.5rem; margin: 0 0 1rem; }
.px-credits-page h2:not(:first-child) { margin-top: 3rem; }
.px-credit-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.px-credit-list li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: .2rem 2rem; padding: .8rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.px-credit-list li span:last-child { color: var(--muted); }
@media (max-width: 760px) { .px-credit-list li { grid-template-columns: minmax(0, 1fr); } }

/* Actualités, la une : bande de cinq photos de la cérémonie, trois citations, le film, puis la photo de groupe. */
.px-riyad-strip { list-style: none; margin: clamp(2.5rem, 4vw, 3.5rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.px-riyad-strip img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.px-quotes-title { font-family: var(--font-body); font-size: 1rem; font-weight: 600; color: var(--primary); margin: clamp(3rem, 5vw, 4rem) 0 1.2rem; }
.px-quotes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 3vw, 2.5rem); }
.px-quotes li { border-top: 2px solid var(--primary); padding-top: 1.3rem; display: flex; flex-direction: column; }
.px-quotes blockquote { margin: 0 0 1.2rem; flex: 1; }
.px-quotes blockquote p { margin: 0; font-family: var(--font-heading); font-size: 1.12rem; line-height: 1.5; font-weight: 300; color: var(--ink); }
.px-quotes blockquote p::before { content: "« "; }
.px-quotes blockquote p::after { content: " »"; }
.px-quotes .who { margin: 0; font-size: .9rem; color: var(--muted); }
.px-quotes .who strong { display: block; color: var(--ink); font-weight: 600; }
.px-group-photo img { display: block; width: 100%; max-height: 34rem; object-fit: cover; }
@media (max-width: 980px) {
  .px-quotes { grid-template-columns: minmax(0, 1fr); }
  .px-riyad-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .px-riyad-strip li:nth-child(n+4) { display: none; }
}

/* Actualités : cartes cliquables (la carte entière est le lien), filtre par catégorie, page article. */
.px-news-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2rem clamp(1.25rem, 2.5vw, 2rem); }
.px-news-cards > li[hidden] { display: none; }
.px-news-cards a { display: flex; flex-direction: column; height: 100%; background: #fff; color: var(--ink); text-decoration: none; padding: 0 1.4rem 1.5rem; }
.px-news-cards figure { margin: 0 -1.4rem 1.1rem; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface); }
.px-news-cards figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.px-news-cards h3 { font-family: var(--font-heading); font-size: 1.15rem; line-height: 1.32; font-weight: 500; margin: .45rem 0 .3rem; }
.px-news-cards .place { margin: auto 0 0; padding-top: .3rem; font-size: .88rem; font-weight: 600; color: var(--muted); }
.px-news-cards a:hover h3 { color: var(--primary); text-decoration: underline; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .px-news-cards a:hover figure img { transform: scale(1.04); } }
.section-alt .px-news-cards a { background: #fff; }
.section:not(.section-alt) .px-news-cards a { background: var(--surface); }
.px-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2rem; }
.px-filter button { min-height: 2.75rem; padding: .45rem .95rem; border: 1px solid #c9d3dc; background: #fff; color: var(--ink); font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; }
.px-filter button span { color: var(--muted); font-weight: 500; margin-left: .2rem; }
.px-filter button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.px-filter button[aria-pressed="true"] span { color: #fff; }
.px-featured-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.px-featured-img img { width: 100%; height: 100%; object-fit: cover; }
.px-featured h2 a { color: inherit; text-decoration: none; }
.px-featured h2 a:hover { color: var(--primary); }
.px-follow { background: var(--surface); }

.px-art-head { padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 0 clamp(2rem, 3vw, 3rem); }
.px-art-head h1 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.5rem); line-height: 1.08; max-width: 24ch; margin: .8rem 0 0; text-wrap: balance; }
.px-art-head .lead { margin: 1.3rem 0 0; color: var(--body-ink); max-width: 46rem; }
.px-art-hero { margin: 0 auto; max-width: 82.5rem; padding-inline: clamp(1rem, 4vw, 3.5rem); }
.px-art-hero img { display: block; width: 100%; max-height: 38rem; object-fit: cover; background: var(--surface); }
.px-art-grid { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 2.5rem clamp(2.5rem, 6vw, 6rem); padding-block: clamp(2.5rem, 4vw, 4rem); align-items: start; }
.px-art-text { max-width: 44rem; }
.px-art-text p, .px-art-text li { color: var(--body-ink); font-size: 1.05rem; line-height: 1.7; }
.px-art-text h2 { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.7rem); font-weight: 500; margin: 2.2rem 0 .8rem; }
.px-art-text > :first-child { margin-top: 0; }
.px-art-text ul { padding-left: 1.2rem; }
.px-art-text li { margin: .35rem 0; }
.px-art-side { border-top: 2px solid var(--primary); padding-top: 1.2rem; } /* plus collante : sur un écran bas, son bas (la carte) ne se voyait jamais */
.px-art-side dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem 1rem; font-size: .93rem; }
.px-art-side dt { color: var(--muted); }
.px-art-side dd { margin: 0; font-weight: 600; }
.px-art-side h2 { font-family: var(--font-body); font-size: .95rem; font-weight: 600; color: var(--primary); margin: 1.8rem 0 .4rem; letter-spacing: 0; }
.px-art-side ul { list-style: none; margin: 0; padding: 0; }
.px-art-side li a { display: flex; align-items: center; min-height: 2.75rem; border-bottom: 1px solid var(--line); text-decoration: none; }
.px-art-side li a::after { content: "→"; margin-left: auto; padding-left: .8rem; }
.px-art-grid:has(.px-art-text.is-empty) { grid-template-columns: minmax(0, 1fr); }
.px-art-text.is-empty { display: none; }
.px-art-grid:has(.px-art-text.is-empty) .px-art-side { position: static; max-width: 30rem; }
.px-art-quotes, .px-art-gallery, .px-art-docs { padding-bottom: clamp(2.5rem, 4vw, 4rem); }
.px-art-quotes > h2, .px-art-gallery > h2, .px-art-docs > h2 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; color: var(--primary); letter-spacing: 0; margin: 0 0 1.1rem; }
.px-art-docs > p { margin: -.6rem 0 1.1rem; color: var(--muted); font-size: .92rem; }
.px-gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.px-gallery.n1 { grid-template-columns: minmax(0, 1fr); max-width: 52rem; }
.px-gallery.n2, .px-gallery.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.px-gallery.n5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.px-gallery.n5 li:nth-child(-n+3) { grid-column: span 2; }
.px-gallery.n5 li:nth-child(n+4) { grid-column: span 3; }
/* 7 photos : la première sur toute la largeur, les six autres en deux rangées pleines (jamais une photo seule en bas) */
.px-gallery li:first-child:nth-last-child(7) { grid-column: 1 / -1; }
.px-gallery li:first-child:nth-last-child(7) img { aspect-ratio: 21 / 9; }
.px-gallery a, .px-docs a { display: block; overflow: hidden; }
.px-gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s var(--ease); }
.px-gallery a:hover img { transform: scale(1.03); }
.px-docs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1rem; }
.px-docs a { border: 1px solid var(--line); background: #fff; padding: .6rem; }
.px-docs img { display: block; width: 100%; height: 12rem; object-fit: contain; }
.px-docs a:hover { border-color: var(--primary); }
.px-art-more { background: var(--surface); }
.px-art-more .px-head-row h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin: 0; }
.px-art-more .px-news-cards a { background: #fff; }
.film + .px-art-docs { padding-top: clamp(2.5rem, 4vw, 4rem); }

/* Témoignages : la citation du client en grand, celles des participants à côté. */
.px-testi-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2.5rem clamp(3rem, 6vw, 6rem); align-items: start; }
.px-testi-main { margin: 0; border-left: 3px solid var(--primary); padding-left: clamp(1.5rem, 3vw, 2.5rem); }
.px-testi-main blockquote { margin: 0; }
.px-testi-main blockquote p { margin: 0; font-family: var(--font-heading); font-weight: 300; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem); line-height: 1.3; color: var(--ink); }
.px-testi-main blockquote p::before { content: "« "; } .px-testi-main blockquote p::after { content: " »"; }
.px-testi-main figcaption { margin-top: 1.5rem; color: var(--muted); }
.px-testi-main figcaption strong { color: var(--ink); font-size: 1.1rem; margin-right: .4rem; }
.px-testi-side h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); margin: 0 0 1.5rem; }
.px-testi-side ul { list-style: none; margin: 0; padding: 0; }
.px-testi-side li { border-top: 1px solid var(--line); padding: 1.2rem 0; }
.px-testi-side blockquote { margin: 0 0 .6rem; }
.px-testi-side blockquote p { margin: 0; color: var(--body-ink); }
.px-testi-side blockquote p::before { content: "« "; } .px-testi-side blockquote p::after { content: " »"; }
.px-testi-side .who { margin: 0; font-size: .9rem; color: var(--muted); }
.px-testi-side .who strong { color: var(--ink); margin-right: .4rem; }
.px-testi-training .px-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.px-events a { display: contents; color: inherit; text-decoration: none; }
.px-events li:has(a:hover) strong { text-decoration: underline; }
.px-on-dark { color: #fff; }

@media (max-width: 980px) {
  .px-news-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .px-news-cards.is-three > li:nth-child(3) { grid-column: 1 / -1; }
  .px-art-grid, .px-testi-grid { grid-template-columns: minmax(0, 1fr); }
  .px-art-side { position: static; }
  .px-gallery, .px-gallery.n5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .px-gallery.n5 li:nth-child(n) { grid-column: auto; }
  .px-gallery.n5 li:first-child { grid-column: 1 / -1; }
  .px-testi-training .px-quotes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .px-news-cards { grid-template-columns: minmax(0, 1fr); }
  .px-news-cards.is-three > li:nth-child(3) { grid-column: auto; }
  .px-filter { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * clamp(1rem, 4vw, 3.5rem)); padding: 0 clamp(1rem, 4vw, 3.5rem) .4rem; }
  .px-filter button { flex: none; }
  .px-art-hero { padding-inline: 0; }
  .px-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .px-docs img { height: 9rem; }
}

/* Réalisations : page d'un projet (faits clés en bandeau, liste cochée de ce que nous avons fait, référentiels). */
.px-stretch { display: inline-block; padding-block: .6rem; margin-block: -.6rem; color: inherit; text-decoration: none; }
.px-stretch::after { content: ""; position: absolute; inset: 0; }
.px-proj { position: relative; }
.px-stretch:hover { color: var(--primary); text-decoration: underline; }
.px-proj-head { padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 0 0; }
.px-proj-head-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 3rem; align-items: start; }
.px-proj-head h1 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem); line-height: 1.08; max-width: 22ch; margin: .8rem 0 0; text-wrap: balance; }
.px-proj-head .lead { margin: 1.3rem 0 0; color: var(--body-ink); max-width: 46rem; }
.px-proj-brand { width: 13rem; padding: 1.2rem; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; margin-top: 3.5rem; }
.px-proj-brand img { max-width: 100%; max-height: 5rem; width: auto; height: auto; }
.px-proj-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); margin: clamp(2rem, 3vw, 2.8rem) 0 clamp(2rem, 3vw, 2.8rem); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.px-proj-facts div { padding: 1rem 1.2rem 1.1rem 0; }
.px-proj-facts div + div { padding-left: 1.2rem; border-left: 1px solid var(--line); }
.px-proj-facts dt { font-size: .82rem; color: var(--muted); margin-bottom: .25rem; }
.px-proj-facts dd { margin: 0; font-weight: 600; color: var(--ink); line-height: 1.4; }
.px-proj-body { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: 2.5rem clamp(2.5rem, 6vw, 5rem); padding-block: clamp(2.5rem, 4vw, 4rem); align-items: start; }
.px-proj-body.is-list { grid-template-columns: minmax(0, 1fr); }
.px-proj-did { background: var(--surface); padding: 1.8rem 1.8rem 1.5rem; border-top: 3px solid var(--primary); }
.px-proj-did h2 { font-size: 1.35rem; font-weight: 500; margin: 0 0 1rem; }
.px-checks { list-style: none; margin: 0; padding: 0; }
.px-checks li { position: relative; padding: .45rem 0 .45rem 1.7rem; border-bottom: 1px solid var(--line); font-size: .96rem; color: var(--ink); }
.px-checks li::before { content: ""; position: absolute; left: .15rem; top: .82rem; width: .55rem; height: .3rem; border-left: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: rotate(-45deg); }
.px-proj-body.is-list .px-checks { columns: 2; column-gap: 3rem; }
.px-proj-body.is-list .px-checks li { break-inside: avoid; }
.px-proj-refs { margin: 1.3rem 0 0; font-size: .88rem; color: var(--muted); }
.px-proj-refs span { display: block; font-weight: 600; color: var(--primary); margin-bottom: .2rem; }
.px-proj-links { padding-bottom: clamp(2.5rem, 4vw, 4rem); }
.px-proj-links h2 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; color: var(--primary); letter-spacing: 0; margin: 0 0 .6rem; }
.px-proj-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.px-proj-links a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .4rem 1rem; border: 1px solid var(--line); text-decoration: none; font-weight: 600; font-size: .93rem; }
.px-proj-links a::after { content: "→"; margin-left: .6rem; }
.px-proj-links a:hover { border-color: var(--primary); }
.px-proj-featured { margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.px-proj-featured h3 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); line-height: 1.2; font-weight: 400; margin: .7rem 0 1rem; }
.px-proj-featured h3 a { color: inherit; text-decoration: none; }
.px-proj-featured h3 a:hover { color: var(--primary); }
.px-proj-featured p:not(.px-news-meta) { color: var(--body-ink); }
@media (max-width: 980px) {
  .px-proj-head-grid, .px-proj-body { grid-template-columns: minmax(0, 1fr); }
  .px-proj-brand { margin-top: 0; width: 11rem; }
  .px-proj-body.is-list .px-checks { columns: 1; }
}
@media (max-width: 760px) {
  .px-proj-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .px-proj-facts div, .px-proj-facts div + div { padding: .9rem .8rem .9rem 0; border-left: 0; border-top: 1px solid var(--line); }
  .px-proj-did { padding: 1.4rem 1.2rem; }
}

/* Audit de conformité : la grille d'audit en tableau de bord (un carré par point de contrôle, coloré par niveau de risque). */
.px-audit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem clamp(2.5rem, 6vw, 5.5rem); align-items: end; }
.px-audit-intro h2 { margin-top: .9rem; }
.px-audit-intro > p:not(.eyebrow), .px-audit-foot p { color: #fff; margin: 1rem 0 0; }
.px-audit-matrix { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 5px; margin-bottom: 1.2rem; max-width: 30rem; }
.px-audit-matrix i, .px-audit-dots i { display: block; aspect-ratio: 1; background: rgba(255, 255, 255, .3); }
/* Sans rouge sur bleu (sa remarque du 2026-10-21 sur l’image aux carrés) : blanc = critique, bleu ciel = majeur, gris = mineur. */
.px-audit-matrix .c, .px-audit-dots .c, .px-audit-levels .c::before { background: rgba(255, 255, 255, .92); }
.px-audit-matrix .M, .px-audit-dots .M, .px-audit-levels .M::before { background: var(--sky); }
.px-audit-levels { list-style: none; margin: 0; padding: 0; }
.px-audit-levels li { position: relative; padding: .45rem 0 .45rem 1.5rem; color: #fff; font-size: .94rem; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.px-audit-levels li::before { content: ""; position: absolute; left: 0; top: .82rem; width: .7rem; height: .7rem; background: rgba(255, 255, 255, .3); }
.px-audit-levels strong { color: #fff; font-weight: 600; margin-right: .3rem; }
.px-audit-domains { list-style: none; margin: clamp(2.5rem, 4vw, 3.5rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .12); }
.px-audit-domains li { background: var(--navy); padding: 1.3rem 1.2rem 1.2rem; display: flex; flex-direction: column; }
.px-audit-domains .n { font-family: var(--font-heading); font-size: .8rem; font-weight: 600; letter-spacing: .08em; color: var(--sky); }
.px-audit-domains h3 { font-size: 1.08rem; font-weight: 500; margin: .5rem 0 .35rem; }
.px-audit-domains p { margin: 0; color: #fff; font-size: .88rem; line-height: 1.5; }
.px-audit-domains .px-audit-count { margin-top: auto; padding-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; color: #fff; font-size: .84rem; font-weight: 600; }
.px-audit-dots { display: grid; grid-template-columns: repeat(10, .5rem); gap: 3px; }
.px-audit-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem clamp(2.5rem, 6vw, 5.5rem); margin-top: clamp(2.5rem, 4vw, 3.5rem); align-items: start; }
.px-audit-foot .px-audit-extra { margin: 0; color: #fff; font-family: var(--font-heading); font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem); line-height: 1.35; border-left: 3px solid var(--red); padding-left: 1.2rem; }
.px-audit-foot > div > p:first-child { margin-top: 0; }
.px-audit-foot .px-audit-refs { font-size: .9rem; color: var(--sky); }
.px-audit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.6rem; margin-top: 1.6rem; }
.px-audit-actions .text-link { color: #fff; text-decoration: underline; text-underline-offset: .25em; }
@media (max-width: 1100px) { .px-audit-domains li { padding: 1.1rem 1rem 1rem; } .px-audit-domains h3 { font-size: 1rem; } .px-audit-domains p { font-size: .84rem; } }
@media (max-width: 960px) { .px-audit-domains { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px) { .px-audit-grid, .px-audit-foot { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .px-audit-domains { grid-template-columns: minmax(0, 1fr); } }

/* Article avec vidéo : la vidéo remplace l'image du haut et se voit sans défiler (sa demande, 2026-10-19) : à côté du
   titre sur ordinateur, juste sous le titre sur téléphone (le résumé passe après). */
.px-art-head-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "title film" "lead film"; gap: 1.4rem clamp(2rem, 4vw, 3.5rem); align-items: start; }
.px-art-head-grid .px-art-title { grid-area: title; } .px-art-head-grid .px-art-film { grid-area: film; } .px-art-head-grid .lead { grid-area: lead; margin-top: 0; }
.px-art-film { padding: 0; background: none; color: var(--ink); }
.px-art-film .film-frame { margin: 0; width: 100%; }
.px-art-film .film-top { margin-top: .9rem; }
.has-film h1 { font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem); }
@media (max-width: 980px) { .px-art-head-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "film" "lead"; } }

/* À propos : la direction à part, puis l'équipe en grille égale filtrable, et un profil par personne dans un panneau
   latéral (option A, son choix du 2026-10-21) ; accueil : onze visages, deux rangées centrées (6 puis 5). */
@media (min-width: 981px) {
  .px-faces { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem 1.1rem; }
  .px-faces li { width: calc((100% - 5 * 1.1rem) / 6); }
}
.px-team-block + .px-team-block { margin-top: clamp(3rem, 5vw, 4.5rem); }
.px-team-h { font-family: var(--font-heading); font-weight: 500; font-size: clamp(1.4rem, 1.15rem + .8vw, 1.85rem); margin: 0 0 1.5rem; }
.px-dept-tag { margin: 0 0 .4rem; font-size: .85rem; font-weight: 600; color: var(--primary); line-height: 1.35; }
.px-role { margin: .3rem 0 0; color: var(--body-ink); font-size: .93rem; line-height: 1.45; }
.px-more { margin-top: 1rem; min-height: 2.75rem; padding: 0 1.1rem; border: 1px solid var(--navy); background: #fff; color: var(--navy); font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; transition: background .2s, color .2s; }
.px-more:hover, .px-more:focus-visible { background: var(--navy); color: #fff; }
.px-leaders { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; }
.px-leaders > li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: #fff; }
.px-leaders img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.px-leaders > li > div { padding: clamp(1.4rem, 2.5vw, 2.2rem); align-self: center; }
.px-leaders h4 { font-family: var(--font-heading); font-weight: 500; font-size: clamp(1.25rem, 1.05rem + .6vw, 1.55rem); line-height: 1.2; margin: 0; }
.px-team-staff-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.5rem; }
.px-team-staff-head .px-team-h { margin: 0; }
.px-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.px-chips button { min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.px-chips button:hover { border-color: var(--navy); }
.px-chips button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.px-staff { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2.4rem 1.2rem; }
.px-staff > li { display: flex; flex-direction: column; }
.px-staff img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; margin-bottom: 1rem; }
.px-staff h4 { font-family: var(--font-heading); font-weight: 500; font-size: 1.12rem; margin: 0; }
.px-staff .px-more { margin-top: auto; align-self: flex-start; }
.px-staff .px-role { margin-bottom: 1rem; }
.px-join { justify-content: flex-end; padding: 1.5rem; background: var(--navy); color: #fff; min-height: 14rem; }
.px-join .px-dept-tag { color: var(--sky); }
.px-join h4 { color: #fff; margin-bottom: 1rem; }
.px-join .text-link { color: #fff; }
.px-drawer { margin: 0 0 0 auto; height: 100dvh; max-height: none; width: min(40rem, 100vw); max-width: 100vw; border: 0; padding: 2.2rem clamp(1.4rem, 3vw, 2.6rem) 2.6rem; background: #fff; color: var(--ink); overflow-y: auto; }
.px-drawer:focus, .px-drawer:focus-visible { outline: none; }
.px-drawer::backdrop { background: rgba(6, 18, 30, .55); }
.px-drawer-close { position: absolute; top: .8rem; right: .8rem; width: 2.75rem; height: 2.75rem; border: 0; background: var(--surface); font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--ink); }
.px-drawer-head { padding: 0 3rem 1.4rem 0; margin-bottom: 1.4rem; border-bottom: 1px solid var(--line); }
.px-drawer-dept { margin: 0 0 .5rem; font-size: .9rem; font-weight: 600; color: var(--primary); }
.px-drawer h2 { font-family: var(--font-heading); font-weight: 500; font-size: 1.65rem; line-height: 1.2; margin: 0; }
.px-drawer-role { margin: .6rem 0 0; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--primary); }
.px-drawer-mail { margin: 1rem 0 0; }
.px-drawer-mail a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; color: var(--navy); }
.px-drawer > p { color: var(--body-ink); }
.px-drawer > p:first-of-type { font-family: var(--font-heading); font-weight: 300; font-size: 1.15rem; line-height: 1.55; color: var(--ink); }
.px-drawer h3 { font-size: 1rem; margin: 1.8rem 0 .6rem; color: var(--navy); }
.px-drawer .px-tags li { background: var(--surface); border-color: var(--surface); font-size: .88rem; }
.px-plain { margin: 0; padding-left: 1.1rem; color: var(--body-ink); } .px-plain li { padding: .25rem 0; }
.px-path { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.px-path li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; padding: .55rem 0 .55rem 1rem; position: relative; color: var(--body-ink); line-height: 1.45; }
.px-path li::before { content: ""; position: absolute; left: -6px; top: 1rem; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--primary); }
.px-path li:first-child::before { background: var(--primary); }
.px-path span { font-weight: 600; color: var(--navy); font-size: .9rem; }
@media (max-width: 1180px) { .px-staff { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 980px) {
  .px-leaders { grid-template-columns: minmax(0, 1fr); }
  .px-staff { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .px-leaders > li { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
  .px-leaders > li > div { padding: 1.1rem; }
  .px-staff { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem 1rem; }
  .px-staff h4 { font-size: 1.05rem; }
  .px-role { font-size: .9rem; }
  .px-staff .px-more { width: 100%; padding: 0 .6rem; }
  .px-join { min-height: 0; padding: 1.1rem; }
  .px-path li { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
}

/* Carrières : postes ouverts (accordéon) et avantages */
.px-job-list { border-top: 1px solid var(--line); }
.px-job { border-bottom: 1px solid var(--line); }
.px-job summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto 1rem; align-items: center; gap: 1rem 2rem; min-height: 2.75rem; padding: 1.4rem 0; cursor: pointer; }
.px-job summary::-webkit-details-marker { display: none; }
.px-job summary::after { content: ""; width: .7rem; height: .7rem; border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: translateY(-.2rem) rotate(45deg); transition: transform .25s var(--ease); }
.px-job[open] summary::after { transform: translateY(.15rem) rotate(-135deg); }
.px-job-t { font-family: var(--font-heading); font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); font-weight: 500; color: var(--ink); }
.px-job summary:hover .px-job-t { color: var(--primary); }
.px-job-meta { display: flex; flex-wrap: wrap; gap: .5rem; }
.px-job-meta span { padding: .3rem .7rem; background: var(--surface); font-size: .85rem; font-weight: 600; color: var(--navy); white-space: nowrap; }
.px-job-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem clamp(2rem, 5vw, 4rem); padding: .4rem 0 2rem; }
.px-job-body h3 { font-size: 1rem; color: var(--navy); margin: 0 0 .5rem; }
.px-job-go { grid-column: 1 / -1; margin: 0; }
.px-perks { background: var(--navy); color: #fff; }
.px-perks-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2.5rem clamp(2.5rem, 6vw, 6rem); align-items: start; }
.px-perks .eyebrow { color: var(--sky); }
.px-perks h2 { color: #fff; margin: 0; }
.px-perk-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1.6rem; counter-reset: perk; }
.px-perk-list li { counter-increment: perk; padding: 1.3rem 0 1.4rem; border-top: 1px solid rgba(255, 255, 255, .16); }
.px-perk-list li::before { content: counter(perk, decimal-leading-zero); display: block; font-family: var(--font-heading); font-size: .85rem; font-weight: 600; color: var(--sky); margin-bottom: .6rem; }
.px-perk-list h3 { font-family: var(--font-heading); font-weight: 500; font-size: 1.15rem; color: #fff; margin: 0 0 .35rem; }
.px-perk-list p { margin: 0; color: #fff; font-size: .95rem; line-height: 1.5; }

/* Formation : historique des formations données et conférences */
.px-history-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem clamp(2.5rem, 6vw, 6rem); }
.px-history-cols h3 { font-size: 1rem; color: var(--primary); margin: 0 0 .6rem; }
.px-ledger { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--navy); }
.px-ledger li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .95rem 0; border-bottom: 1px solid var(--line); }
.px-ledger strong { font-family: var(--font-heading); font-weight: 500; font-size: 1.12rem; color: var(--ink); }
.px-ledger span { font-size: .9rem; font-weight: 600; color: var(--navy); white-space: nowrap; font-variant-numeric: tabular-nums; }
.px-history-sub { margin: 1.8rem 0 .7rem; font-weight: 600; color: var(--navy); }
.px-talks { margin-top: 1rem; padding-top: .2rem; }

/* À propos : le sens de PBE. Les lettres arrivent en contour, puis se remplissent tour à tour (couleurs du logo). */
.px-letters { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.px-letters li { padding: 0 clamp(1.2rem, 3vw, 2.6rem); border-left: 1px solid var(--line); }
.px-letters li:first-child { padding-left: 0; border-left: 0; }
.px-letter { display: block; font-family: var(--font-heading); font-weight: 600; font-size: clamp(6rem, 4rem + 9vw, 11rem); line-height: .8; letter-spacing: -.04em; color: var(--c, var(--navy)); margin-bottom: 1.4rem; }
/* Couleurs exactes du logo (2026-10-21, sa demande) : P #00aeef, B le rouge du logo #bf1e2e, E le bleu du logo #006692. */
.px-letters li:nth-child(1) { --c: var(--cyan); } .px-letters li:nth-child(2) { --c: var(--red); } .px-letters li:nth-child(3) { --c: var(--primary); }
@supports (-webkit-text-stroke: 1px black) {
  .px-letter { -webkit-text-stroke: 2px var(--c, var(--navy)); transition: color .9s var(--ease) .5s; }
  .px-letters li:nth-child(2) .px-letter { transition-delay: .85s; } .px-letters li:nth-child(3) .px-letter { transition-delay: 1.2s; }
  .px-letters.is-waiting .px-letter { color: transparent; }
}
.px-letters h3 { font-family: var(--font-heading); font-weight: 500; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin: 0; color: var(--ink); }
.px-origin { margin: .35rem 0 0; font-size: .92rem; color: var(--body-ink); }
.px-origin span { font-weight: 600; color: var(--primary); }
.px-words { margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .95rem; line-height: 1.6; color: var(--ink); }
.px-tagline { margin: .8rem 0 0; font-family: var(--font-heading); font-weight: 300; font-size: 1.1rem; color: var(--body-ink); }
@media (prefers-reduced-motion: reduce) { .px-letter { transition: none !important; } }

@media (max-width: 980px) {
  .px-perks-grid, .px-history-cols { grid-template-columns: minmax(0, 1fr); }
  .px-perk-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .px-job summary { grid-template-columns: minmax(0, 1fr) 1rem; }
  .px-job-meta { grid-column: 1; grid-row: 2; }
  .px-job summary::after { grid-column: 2; grid-row: 1; }
  .px-job-body { grid-template-columns: minmax(0, 1fr); }
  .px-perk-list { grid-template-columns: minmax(0, 1fr); }
  .px-letters { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
  .px-letters li { padding: 0; border-left: 0; display: grid; grid-template-columns: 5rem minmax(0, 1fr); column-gap: 1.1rem; align-items: start; }
  .px-letters li > * { grid-column: 2; }
  .px-letters li > .px-letter { grid-column: 1; grid-row: 1 / span 4; font-size: 5.6rem; margin: 0; }
}

/* Accueil (son choix du 2026-10-21) : option A « Preuve d'abord » + « Par où commencer ? » ; le reste de l'accueil est gardé. */
.px-trust { padding: clamp(1.6rem, 3vw, 2.4rem) 0; border-bottom: 1px solid var(--line); background: #fff; }
.px-trust-h { margin: 0 0 1rem; font-family: var(--font-body); font-size: .95rem; font-weight: 600; letter-spacing: 0; color: var(--muted); text-align: center; }
.px-need-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 1.4rem; }
.px-need-tabs button { text-align: left; padding: 1rem 1.1rem; min-height: 4rem; border: 1px solid var(--line); background: #fff; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; line-height: 1.35; }
.px-need-tabs button:hover { border-color: var(--navy); }
.px-need-tabs button[aria-selected="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.px-need-panel { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 1.5rem clamp(1.5rem, 4vw, 3rem); border-top: 3px solid var(--navy); padding-top: 1.5rem; }
.px-need-panel[hidden] { display: none; }
.px-need-panel + .px-need-panel:not([hidden]) { margin-top: 2rem; }
.px-need-svc { list-style: none; margin: 0; padding: 0; counter-reset: need; }
.px-need-svc li { counter-increment: need; border-bottom: 1px solid var(--line); }
.px-need-svc a { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: .6rem; padding: 1rem 0; color: var(--ink); text-decoration: none; }
.px-need-svc a::before { content: counter(need, decimal-leading-zero); grid-row: 1 / span 2; font-family: var(--font-heading); font-weight: 600; font-size: .85rem; color: var(--primary); padding-top: .15rem; }
.px-need-svc strong { font-family: var(--font-heading); font-weight: 500; font-size: 1.12rem; }
.px-need-svc span { color: var(--body-ink); font-size: .93rem; line-height: 1.45; margin-top: .2rem; }
.px-need-svc a:hover strong { color: var(--primary); text-decoration: underline; }
.px-need-card { display: block; color: var(--ink); text-decoration: none; background: #fff; }
.px-need-card img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.px-need-card .px-tag, .px-need-card strong { display: block; padding: 0 1.1rem; }
.px-need-card .px-tag { margin: 1rem 0 .3rem; }
.px-need-card strong { padding-bottom: 1.2rem; font-weight: 600; line-height: 1.35; }
.px-need-card:hover strong { color: var(--primary); }
.px-case-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem clamp(2rem, 5vw, 4rem); align-items: center; }
.px-case-grid figure { margin: 0; } .px-case-grid img { width: 100%; height: auto; display: block; aspect-ratio: 3 / 2; object-fit: cover; }
.px-kpis { margin: 1.4rem 0 0; border-top: 1px solid var(--line); }
.px-kpis div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.px-kpis dt { color: var(--muted); font-size: .9rem; } .px-kpis dd { margin: 0; font-weight: 600; color: var(--ink); }
.px-case-links { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.6rem; margin-top: 1.6rem; }
.px-read-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.px-read-cards a { display: block; color: var(--ink); text-decoration: none; }
.px-read-cards figure { margin: 0 0 .9rem; overflow: hidden; }
.px-read-cards img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .5s var(--ease); }
.px-read-cards h3 { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 500; line-height: 1.35; margin: 0; }
.px-read-cards a:hover h3 { color: var(--primary); text-decoration: underline; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .px-read-cards a:hover img { transform: scale(1.04); } }
@media (max-width: 980px) {
  .px-need-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .px-need-panel, .px-case-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .px-read-cards { grid-template-columns: minmax(0, 1fr); }
  .px-need-tabs { grid-template-columns: minmax(0, 1fr); }
  .px-trust { padding: 2.6rem 0; }
}

/* Grand menu « en images » (option A, son choix du 2026-10-21) : un panneau sous Expertises et Secteurs. */
.has-mega { display: flex; align-items: center; }
.px-mega-btn { width: 1.6rem; height: 2.75rem; margin-left: -.5rem; border: 0; background: none; color: inherit; cursor: pointer; display: inline-grid; place-items: center; }
.px-mega-btn::before { content: ""; width: .42rem; height: .42rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.15rem) rotate(45deg); transition: transform .2s var(--ease); }
.has-mega.is-open .px-mega-btn::before { transform: translateY(.1rem) rotate(-135deg); }
.px-mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 24px 40px -24px rgba(10, 28, 46, .35); z-index: 60; }
.px-mega[hidden] { display: none; }
.px-mega-in { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 2rem clamp(2rem, 4vw, 3.5rem); padding-block: 2rem 2.2rem; }
.px-mega-k { margin: 0 0 .6rem; font-size: .9rem; font-weight: 600; color: var(--primary); }
.px-mega-t { margin: 0 0 1.2rem; font-family: var(--font-heading); font-weight: 300; font-size: 1.45rem; line-height: 1.2; color: var(--ink); }
.px-mega-t strong { font-weight: 600; }
.px-mega-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
#menu-secteurs .px-mega-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.px-mega-grid a { display: block; color: var(--ink) !important; text-decoration: none; font-weight: 500; font-size: .9rem; line-height: 1.35; padding: 0; box-shadow: none !important; }
.px-mega-grid img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: .5rem; transition: transform .4s var(--ease); }
.px-mega-grid a:hover span { color: var(--primary); text-decoration: underline; }
.px-mega .text-link { color: var(--primary) !important; padding: 0; box-shadow: none !important; }
@media (max-width: 760px) {
  .has-mega { flex-wrap: wrap; }
  .has-mega > a { flex: 1; width: auto; }
  .px-mega-btn { width: 2.75rem; margin-left: 0; border-bottom: 1px solid var(--line); height: auto; align-self: stretch; color: var(--ink) !important; }
  .px-mega { position: static; flex-basis: 100%; box-shadow: none; border-top: 0; }
  .px-mega-in { grid-template-columns: minmax(0, 1fr); padding: .6rem 0 1rem; gap: .6rem; }
  .px-mega-intro { display: none; }
  .px-mega-grid, #menu-secteurs .px-mega-grid { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .px-mega-grid a { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: .8rem; align-items: center; padding: .35rem 0; border: 0; }
  .px-mega-grid img { margin: 0; aspect-ratio: 4 / 3; }
}

/* Pages de service : ajouts de l'option A (son choix du 2026-10-21) — boutons du haut, petit menu collant sous l'en-tête,
   défis, livrables, un projet en exemple et les questions fréquentes. */
.px-dhead-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.8rem; margin: 1.6rem 0 0; }
.px-subnav { position: sticky; top: var(--hdr, 5rem); z-index: 40; background: #fff; border-bottom: 1px solid var(--line); }
.px-subnav .wrap { display: flex; gap: .2rem 1.6rem; overflow-x: auto; align-items: center; scrollbar-width: none; }
.px-subnav a { white-space: nowrap; min-height: 3.2rem; min-width: 2.75rem; justify-content: center; display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .92rem; }
.px-subnav a:hover { color: var(--primary); }
.px-subnav .px-subnav-cta { margin-left: auto; color: var(--red); }
#defis, #livrables, #projet, #questions { scroll-margin-top: calc(var(--hdr, 5rem) + 3.4rem); }
.px-chal-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
.px-chal-list li { border-top: 3px solid var(--navy); padding-top: 1.1rem; }
.px-chal-list span { font-size: .82rem; font-weight: 600; color: var(--primary); letter-spacing: .08em; }
.px-chal-list h3 { font-family: var(--font-heading); font-weight: 500; font-size: 1.18rem; margin: .45rem 0 .4rem; }
.px-chal-list p { color: var(--body-ink); margin: 0; font-size: .96rem; line-height: 1.55; }
.px-deliver-grid, .px-faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem clamp(2rem, 5vw, 4.5rem); align-items: start; }
.px-deliver-grid h2, .px-faq-grid h2 { margin: 0; }
.px-deliver .px-checks li { font-size: 1.02rem; padding-block: .7rem; }
.px-dproject-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; max-width: 52rem; }
.px-dproject-cards.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
.px-dproject-cards a { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; background: #fff; color: var(--ink); text-decoration: none; }
.px-dproject-cards.is-two a { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.px-dproject-cards figure { margin: 0; overflow: hidden; }
.px-dproject-cards img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .5s var(--ease); }
.px-dproject-cards a > span { display: block; padding: 1.3rem 1.4rem 1.5rem; }
.px-dproject-cards .px-tag { display: block; margin: 0 0 .4rem; }
.px-dproject-cards strong { display: block; font-family: var(--font-heading); font-weight: 500; font-size: 1.2rem; line-height: 1.35; }
.px-dproject-cards a:hover strong { color: var(--primary); text-decoration: underline; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .px-dproject-cards a:hover img { transform: scale(1.04); } }
.px-faq-list details { border-bottom: 1px solid var(--line); padding: .9rem 0; }
.px-faq-list details:first-child { border-top: 1px solid var(--line); }
.px-faq-list summary { font-weight: 600; cursor: pointer; min-height: 2.75rem; display: flex; align-items: center; }
.px-faq-list p { margin: .3rem 0 .5rem; color: var(--body-ink); }
@media (max-width: 980px) {
  .px-chal-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1.2rem; }
  .px-deliver-grid, .px-faq-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .px-chal-list, .px-dproject-cards.is-two { grid-template-columns: minmax(0, 1fr); }
  .px-dproject-cards a { grid-template-columns: minmax(0, 1fr); }
  .px-subnav .px-subnav-cta { display: none; }
}
.px-dproject-cards.is-two li { display: flex; } .px-dproject-cards.is-two a { flex: 1; }

/* Page Savoir-faire (son choix du 2026-10-21) : le guide à la une, les contenus filtrables, les ressources réglementaires. */
.px-sf-feature { padding-bottom: 0; }
.px-sf-wide { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); background: var(--navy); color: #fff; text-decoration: none; }
.px-sf-wide img { width: 100%; height: 100%; display: block; object-fit: cover; aspect-ratio: 16 / 9; }
.px-sf-wide > span { padding: clamp(1.4rem, 3vw, 2.6rem); display: flex; flex-direction: column; justify-content: center; gap: .7rem; }
.px-sf-wide .px-tag { margin: 0; color: var(--sky); }
.px-sf-wide strong { font-family: var(--font-heading); font-weight: 500; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); line-height: 1.2; }
.px-sf-wide .px-sf-d { color: #fff; }
.px-sf-wide:hover strong { text-decoration: underline; }
.px-sf-cards li[hidden] { display: none; }
.px-sf-cards { row-gap: 2.2rem; }
.px-sf-more { margin: 2.2rem 0 0; }
.px-res-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem clamp(2rem, 4vw, 3.5rem); }
.px-res-group h3 { font-family: var(--font-heading); font-weight: 500; font-size: 1.3rem; margin: 0 0 .8rem; padding-bottom: .7rem; border-bottom: 2px solid var(--navy); }
.px-res-lang { margin: -.5rem 0 .4rem; font-size: .85rem; color: var(--muted); }
.px-res-group ul { list-style: none; margin: 0; padding: 0; }
.px-res-group a { display: block; padding: .85rem 2rem .85rem 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; position: relative; }
.px-res-group a::after { content: "↗"; position: absolute; right: .2rem; top: .9rem; color: var(--primary); font-weight: 600; }
.px-res-group strong { display: block; font-weight: 600; line-height: 1.4; }
.px-res-group span { display: block; color: var(--body-ink); font-size: .9rem; margin-top: .15rem; }
.px-res-group a:hover strong { color: var(--primary); text-decoration: underline; }
@media (max-width: 980px) { .px-sf-wide, .px-res-groups { grid-template-columns: minmax(0, 1fr); } }

/* Carte interactive de l'accueil (son choix du 2026-10-21) : arcs depuis Montréal, un repère par type (sans rouge sur bleu),
   le lieu choisi à droite avec sa photo. */
.px-world .px-chips { margin-bottom: 1.2rem; }
.px-chips.is-dark button { background: transparent; border-color: rgba(255, 255, 255, .25); color: #fff; display: inline-flex; align-items: center; gap: .55rem; }
.px-chips.is-dark button:hover { border-color: #fff; }
.px-chips.is-dark button[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--navy); }
.sw { flex: none; width: .7rem; height: .7rem; border-radius: 50%; background: #fff; }
.sw.is-tout { background: conic-gradient(#fff 0 33%, var(--cyan) 0 66%, transparent 0); box-shadow: inset 0 0 0 2px var(--sky); }
.sw.is-hq { border-radius: 2px; transform: rotate(45deg); }
.sw.is-projet { background: var(--cyan); }
.sw.is-mission { background: transparent; box-shadow: inset 0 0 0 2px var(--sky); }
.px-chips.is-dark button[aria-pressed="true"] .sw.is-bureau, .px-chips.is-dark button[aria-pressed="true"] .sw.is-tout { box-shadow: inset 0 0 0 2px var(--navy); }
.px-imap-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 1.5rem clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.px-imap { position: relative; }
.px-imap > img { display: block; width: 100%; height: auto; opacity: .9; }
.px-arcs { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.px-arcs path { fill: none; stroke: var(--sky); stroke-width: 1.2; stroke-opacity: .55; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; transition: stroke-dashoffset 1.6s var(--ease), stroke-opacity .3s; }
.px-imap.is-waiting .px-arcs path { stroke-dashoffset: 1; }
.px-arcs path:nth-child(2) { transition-delay: .1s; } .px-arcs path:nth-child(3) { transition-delay: .2s; } .px-arcs path:nth-child(4) { transition-delay: .3s; }
.px-arcs path:nth-child(5) { transition-delay: .4s; } .px-arcs path:nth-child(6) { transition-delay: .5s; } .px-arcs path:nth-child(7) { transition-delay: .6s; }
.px-arcs path:nth-child(8) { transition-delay: .7s; } .px-arcs path:nth-child(9) { transition-delay: .8s; }
.px-arcs path.is-off { stroke-opacity: .08; }
.px-arcs path.is-on { stroke-opacity: 1; stroke-width: 2; }
.px-pin { position: absolute; transform: translate(-50%, -50%); width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.px-pin::before { content: ""; width: .8rem; height: .8rem; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, .14); transition: transform .2s var(--ease), box-shadow .2s; }
.px-pin.is-hq::before { width: .9rem; height: .9rem; border-radius: 2px; transform: rotate(45deg); box-shadow: 0 0 0 6px rgba(255, 255, 255, .18), 0 0 18px rgba(143, 201, 232, .6); }
.px-pin.is-projet::before { background: var(--cyan); box-shadow: 0 0 0 5px rgba(0, 174, 239, .2); }
.px-pin.is-mission::before { background: var(--navy); box-shadow: inset 0 0 0 2.5px var(--sky), 0 0 0 5px rgba(143, 201, 232, .14); }
.px-pin span { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, .2rem); white-space: nowrap; padding: .25rem .55rem; background: #fff; color: var(--navy); font-size: .8rem; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.px-pin:hover span, .px-pin:focus-visible span, .px-pin[aria-pressed="true"] span, .px-pin.is-hq span { opacity: 1; transform: translate(-50%, -.1rem); }
.px-pin:hover::before, .px-pin[aria-pressed="true"]::before { transform: scale(1.35); }
.px-pin.is-hq:hover::before, .px-pin.is-hq[aria-pressed="true"]::before { transform: rotate(45deg) scale(1.3); }
.px-pin[hidden] { display: none; }
.px-imap-card { background: #fff; color: var(--ink); }
.px-imap-card[hidden] { display: none; }
.px-imap-card figure { margin: 0; }
.px-imap-card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.px-imap-card > div { padding: 1.3rem 1.4rem 1.5rem; }
.px-imap-tag { display: flex; align-items: center; gap: .5rem; margin: 0 0 .4rem; font-size: .85rem; font-weight: 600; color: var(--primary); }
.px-imap-tag .sw { background: var(--navy); } .px-imap-tag .sw.is-projet { background: var(--cyan); } .px-imap-tag .sw.is-mission { background: transparent; box-shadow: inset 0 0 0 2px var(--primary); }
.px-imap-card h3 { font-family: var(--font-heading); font-weight: 500; font-size: 1.5rem; margin: 0 0 .6rem; color: var(--ink); }
.px-imap-card .text-link { color: var(--primary); }
.px-imap-card ul { margin: 0 0 1rem; padding-left: 1.1rem; color: var(--body-ink); font-size: .95rem; }
.px-imap-card li { padding: .15rem 0; }
.px-imap-list { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.4rem; }
.px-imap-list button { min-height: 2.75rem; padding: 0 .9rem; border: 1px solid rgba(255, 255, 255, .2); background: transparent; color: #fff; font: inherit; font-size: .9rem; cursor: pointer; }
.px-imap-list button:hover { color: #fff; border-color: #fff; }
.px-imap-list button[aria-pressed="true"] { color: #fff; border-color: var(--sky); box-shadow: inset 0 -2px 0 var(--sky); }
.px-imap-list button[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .px-arcs path { transition: none; } .px-imap.is-waiting .px-arcs path { stroke-dashoffset: 0; } }
@media (max-width: 980px) { .px-imap-grid { grid-template-columns: minmax(0, 1fr); } .px-imap-side { max-width: 34rem; } }
@media (max-width: 760px) {
  .px-pin::before { width: .6rem; height: .6rem; box-shadow: 0 0 0 4px rgba(255, 255, 255, .14); }
  .px-pin span { display: none; }
  .px-imap-list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-top: 1rem; }
  .px-imap-list button { flex: none; }
}

/* ==========================================================================================================
   Bleu ciel PBE au lieu du bleu marine (sa demande du 2026-10-21 : le marine fait générique). Le bleu ciel exact du logo
   (#00aeef) est trop clair pour du texte blanc (2,4:1) ; les fonds avec texte prennent donc le même bleu ciel un cran
   plus profond (#0a7bbd, 4,6:1 avec le blanc), et le bleu du logo reste pour les accents. Tout texte sur ces fonds est
   blanc pur (une teinte plus pâle ne passerait plus 4,5:1).
   ========================================================================================================== */
:root { --sky-deep: #0a7bbd; --sky-shade: #0866a0; }
.site-footer, .px-dark, .px-perks, .px-join, .px-sf-wide, .px-news-follow, .px-svc-photos { background-color: var(--sky-deep); }
.px-group a, .site-footer, .site-footer .footer-list a, .site-footer a, .site-footer .footer-bottom,
.px-dark .eyebrow, .px-dark .px-intro, .px-events .y, .px-steps li > span, .px-steps p,
.px-phase li, .px-phase li span, .px-dsteps .px-head-row p, .px-focus-list span, .px-focus-list p, .px-dfocus .px-head-row p,
.px-award-list .y, .px-award-list .by, .px-news-follow p,
.px-audit-intro > p:not(.eyebrow), .px-audit-foot p, .px-audit-levels li, .px-audit-domains .n, .px-audit-domains p, .px-audit-foot .px-audit-refs,
.px-join .px-dept-tag, .px-perks .eyebrow, .px-perk-list li::before, .px-perk-list p,
.px-sf-wide .px-tag, .px-sf-wide .px-sf-d, .px-imap-list button { color: #fff; }
.px-dark .text-link, .px-dark a.text-link { color: #fff; }
.px-group span::before, .px-group-strip span::before, .px-group-strip a::before { background: #fff; }
.px-social a:hover { background: #fff; border-color: #fff; color: var(--sky-deep); }
.px-dark .button.px-red, .px-perks .button.px-red { background: #fff; border-color: #fff; color: var(--sky-shade); }
.px-dark .button.px-red:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
/* sur le bleu ciel, les cases du tableau d'audit deviennent des cadres (un fond plus pâle ferait perdre le contraste) */
.px-audit-domains li { background: var(--sky-deep); }
.px-audit-matrix .M, .px-audit-dots .M, .px-audit-levels .M::before { background: #bfe6f9; }
/* sélections et boutons sur fond clair : le bleu ciel profond plutôt que le marine */
.px-chips button[aria-pressed="true"], .px-need-tabs button[aria-selected="true"], .px-filter button[aria-pressed="true"] { background: var(--sky-deep); border-color: var(--sky-deep); }
.px-more:hover, .px-more:focus-visible { background: var(--sky-deep); border-color: var(--sky-deep); }
.px-chips.is-dark button[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--sky-shade); }
.px-pin.is-mission::before { background: var(--sky-shade); }

/* Carte de l'accueil : une photo de Montréal sous un filtre bleu ciel, les points de la carte en blanc. Le filtre est assez
   couvrant (88 %) pour que le texte blanc reste lisible même sur les parties claires de la photo. */
.px-world { background: linear-gradient(90deg, rgba(8, 102, 160, .9) 0%, rgba(10, 123, 189, .88) 60%, rgba(10, 123, 189, .86) 100%), url("/assets/img/photos/ville-montreal.webp") center 40% / cover no-repeat; }
.px-imap > img { filter: brightness(0) invert(1); opacity: .62; }
.px-pin.is-projet::before { background: #fff; box-shadow: 0 0 0 3px var(--cyan), 0 0 0 7px rgba(255, 255, 255, .2); }
.px-arcs path { stroke: #fff; stroke-opacity: .9; stroke-width: 1.6; }
.px-imap-list button { border-color: rgba(255, 255, 255, .45); }
.px-imap-list button[aria-pressed="true"] { border-color: #fff; box-shadow: inset 0 -3px 0 #fff; }
.sw.is-projet { background: #fff; box-shadow: 0 0 0 2px var(--cyan); }
.sw.is-mission { box-shadow: inset 0 0 0 2px #fff; }
.px-chips.is-dark button[aria-pressed="true"] .sw.is-mission { box-shadow: inset 0 0 0 2px var(--sky-shade); }
.px-imap-tag .sw.is-projet { background: var(--cyan); box-shadow: none; }

.px-award-list .rep .y, .px-aw.rep .y { color: #fff; opacity: 1; }

/* Règle (sa demande, 2026-10-21) : la description va SOUS le grand titre, jamais à côté. Un lien (« Tous les… ») peut
   rester à droite du titre ; le paragraphe passe sur sa propre ligne, dessous. */
.px-head-row > p, .px-head-row > .px-intro { flex: 0 0 100%; order: 2; margin: 0; max-width: none; padding-inline-end: max(0px, calc(100% - 46rem)); }
.px-head-2, .px-dsec-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
.px-head-2 .px-intro, .px-dsec-head p { max-width: 46rem; }
/* Équipe : la case Carrières porte le logo de PBE (sa demande) */
.px-join { justify-content: space-between; gap: 1.4rem; }
.px-staff .px-join-logo { display: block; width: min(78%, 11rem); height: auto; aspect-ratio: auto; object-fit: contain; margin: 0; filter: brightness(0) invert(1); }
/* Profil : la photo de la personne à gauche du nom (sa demande) */
.px-drawer-head { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.4rem; align-items: center; }
.px-drawer-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 760px) { .px-drawer-head { grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; } .px-staff .px-join-logo { width: 6.5rem; } }

/* Pied de page (sa demande du 2026-10-25) : la mise en page d'avant, sur toute sa hauteur et toute sa largeur sa photo de
   la Terre vue de l'espace (photo 141, le bord lumineux de la planète à droite) ; à gauche, un voile sombre garde le texte
   blanc très lisible. Le filet aux trois couleurs du logo en haut ; la toute dernière bande (droits) reste unie. */
.site-footer { --foot-photo: url("/assets/img/photos/pied-terre.webp"); position: relative; isolation: isolate; background: linear-gradient(90deg, rgba(2, 6, 13, .94) 0%, rgba(2, 6, 13, .84) 38%, rgba(2, 6, 13, .58) 70%, rgba(2, 6, 13, .3) 100%), var(--foot-photo) 70% 30% / cover no-repeat; background-color: #02060d; }
.site-footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--cyan, #00aeef) 0 33.33%, #bf1e2e 33.33% 66.66%, #006692 66.66%); }
.site-footer .footer-bottom { background: #02060d; box-shadow: 0 0 0 100vmax #02060d; clip-path: inset(0 -100vmax); } /* la bande unie va d’un bord à l’autre sans élargir la page */
@media (max-width: 760px) {
  .site-footer { --foot-photo: url("/assets/img/photos/mini/pied-terre.webp"); background: linear-gradient(180deg, rgba(2, 6, 13, .55) 0%, rgba(2, 6, 13, .88) 45%, rgba(2, 6, 13, .95) 100%), var(--foot-photo) 75% 0 / 190% auto no-repeat; background-color: #02060d; }
}

/* Identité PBE (son choix du 2026-10-21 : signatures 1 et 3).
   1. Icônes maison, une par expertise (_source/contenu/icones.cjs) : trait arrondi comme les lettres du logo, bleu ciel
      profond et un détail dans le bleu ciel du logo. Liste des services de la page Expertises et haut des pages de service.
   3. P · B · E, le fil conducteur, « pas abuser, juste quelques fois » : seulement les trois familles de la page Expertises
      (et « Notre nom » sur À propos, qui existait déjà). Ne pas l'ajouter ailleurs sans son accord. */
.px-ico { display: block; width: 2.6rem; height: 2.6rem; fill: none; stroke: var(--sky-deep); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.px-ico .a { stroke: var(--cyan); }
.px-dhead-ico { width: clamp(3.4rem, 2.8rem + 1.6vw, 4.4rem); height: auto; aspect-ratio: 1; margin: 0 0 1.4rem; }
.px-svc-rows .n { align-self: center; }
.px-svc-rows .n .px-ico { width: 2.5rem; height: 2.5rem; transition: transform .25s var(--ease); }
.px-svc-rows a:hover .px-ico, .px-svc-rows a:focus-visible .px-ico { transform: translateY(-2px); }
.px-pbe-mark { --c: var(--cyan); display: flex; align-items: center; gap: 1.1rem; margin: 0 0 1.5rem; }
.px-pbe-mark.is-b { --c: var(--red); } .px-pbe-mark.is-e { --c: var(--primary); }
.px-pbe-mark .l { font-family: var(--font-heading); font-weight: 600; font-size: clamp(3.4rem, 2.6rem + 2.4vw, 4.6rem); line-height: .8; letter-spacing: -.03em; color: var(--c); }
.px-pbe-mark .w { display: flex; flex-direction: column; gap: .3rem; padding-left: 1.1rem; border-left: 2px solid var(--c); font-size: .9rem; font-weight: 600; letter-spacing: .02em; color: var(--primary); }
.px-pbe-mark strong { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 600; letter-spacing: .04em; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .px-svc-rows .n .px-ico { transition: none; } }

/* Boutons des situations de l’accueil : lignes équilibrées, jamais un mot seul (« … une / usine »). */
.px-need-tabs button, .px-need-card strong { text-wrap: balance; }

/* Logos des clients plus grands (sa demande du 2026-10-21) : cases plus hautes et marges réduites dans le mur de logos,
   boîte du logo plus grande sur les pages de projet. */
.px-logos li { height: 8.2rem; padding: .8rem; }
.px-logos img { max-height: 5rem; }
.px-cases .px-logo-panel img { max-height: 6.2rem; }
.px-proj-brand { width: 16rem; padding: 1.4rem; }
.px-proj-brand img { max-height: 6.6rem; }
@media (max-width: 760px) { .px-logos li { height: 6.4rem; padding: .6rem; } .px-logos img { max-height: 3.9rem; } .px-proj-brand { width: 13rem; } }

/* Article avec une affiche en hauteur (couverture de magazine) : l'affiche reste entière, dans une colonne plus large à
   droite du texte, au-dessus des détails de l'article (sa demande du 2026-10-21 : « pas en pleine largeur »). */
.px-art-grid.has-cover { grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); }
.px-art-grid.has-cover .px-art-side { position: static; border-top: 0; padding-top: 0; }
.px-art-cover { margin: 0 0 1.8rem; }
.px-art-cover a { display: block; box-shadow: 0 1.2rem 2.4rem -1.2rem rgba(6, 18, 30, .35); }
.px-art-cover img { display: block; width: 100%; height: auto; }
.px-art-cover figcaption { margin-top: .9rem; font-size: .9rem; color: var(--muted); line-height: 1.5; }
.px-art-grid.has-cover .px-art-side dl { border-top: 2px solid var(--primary); padding-top: 1.2rem; }
@media (max-width: 980px) { .px-art-grid.has-cover { grid-template-columns: minmax(0, 1fr); } .px-art-cover { max-width: 22rem; } }

/* Page Formation (2026-10-21) : formations en deux familles, historique en trois colonnes verticales (le conférencier invité
   a plus d'impact en liste qu'en étiquettes), et le profil du formateur en contenu de page plutôt qu'en image. */
.px-courses-h { margin: 1.8rem 0 .8rem; font-family: var(--font-body); font-size: 1rem; font-weight: 600; color: var(--primary); }
@media (min-width: 981px) { .px-history-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem clamp(2rem, 4vw, 4rem); } }
.px-exec { background: linear-gradient(115deg, #fff 0%, #fff 48%, #eaf5fb 100%); }
.px-exec-in { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
/* la photo commence à la hauteur du titre (ses retours du 2026-10-24 : symétrie) ; la barre de couleur posée au-dessus
   s'aligne sur le haut du texte */
.px-exec-photo { margin: calc(6px + .5rem) 0 0; position: relative; }
.px-exec-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.px-exec-photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; background: linear-gradient(90deg, var(--cyan) 0 33.33%, var(--red) 33.33% 66.66%, var(--primary) 66.66%); }
.px-exec-k { display: inline-block; margin: 0 0 1.1rem; padding-bottom: .7rem; border-bottom: 3px solid var(--red); font-size: .85rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--primary); }
.px-exec-main h2 { margin: 0; font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.02; color: var(--navy); }
.px-exec-creds { margin: .5rem 0 0; font-size: 1.05rem; font-weight: 500; color: var(--muted); }
.px-exec-role { margin: 1rem 0 0; font-size: clamp(.92rem, .86rem + .3vw, 1.08rem); font-weight: 600; letter-spacing: .12em; line-height: 1.55; text-transform: uppercase; color: var(--primary); text-wrap: balance; }
.px-exec-bio { margin: 1.4rem 0 0; max-width: 40rem; font-size: 1.05rem; line-height: 1.7; color: var(--body-ink); }
.px-exec-stats { list-style: none; margin: 2rem 0 0; padding: 1.4rem 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.px-exec-stats li + li { border-left: 1px solid var(--line); padding-left: 1.4rem; }
.px-exec-stats strong { display: block; margin-bottom: .75rem; padding-bottom: .6rem; font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem); line-height: 1; color: var(--navy); background: linear-gradient(var(--red), var(--red)) left bottom / 2.4rem 3px no-repeat; }
.px-exec-stats li:last-child strong { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); line-height: 1.2; }
.px-exec-stats span { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .14em; line-height: 1.5; text-transform: uppercase; color: var(--body-ink); }
.px-exec-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem clamp(2.5rem, 6vw, 6rem); margin-top: clamp(3rem, 5vw, 4.5rem); }
.px-exec-h { display: flex; align-items: center; gap: 1rem; margin: 0 0 .6rem; font-family: var(--font-body); font-size: .9rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--navy); }
.px-exec-h::before { content: ""; flex: none; width: 2.4rem; height: 3px; background: var(--red); }
.px-exec-list { list-style: none; margin: 0; padding: 0; }
.px-exec-list li { padding: .95rem 0; border-bottom: 1px solid var(--line); }
.px-exec-list strong { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 1.12rem; color: var(--navy); }
.px-exec-list span { display: block; margin-top: .2rem; font-size: .95rem; color: var(--body-ink); }
.px-exec-list.is-lead li { padding: 1.3rem 0; }
.px-exec-list.is-lead strong { font-size: 1.25rem; }
@media (max-width: 980px) { .px-exec-in, .px-exec-cols { grid-template-columns: minmax(0, 1fr); } .px-exec-photo { max-width: 24rem; } }
@media (max-width: 760px) { .px-exec-stats { grid-template-columns: minmax(0, 1fr); } .px-exec-stats li + li { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 1.1rem; } }

/* Pied de page : le logo en très grand et la devise (2026-10-21). */
.px-foot-hero { display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 4rem); margin-bottom: clamp(2.2rem, 4vw, 3.2rem); padding-bottom: clamp(2.2rem, 4vw, 3.2rem); border-bottom: 1px solid rgba(255, 255, 255, .18); }
.px-foot-logo { flex: none; display: block; }
.px-foot-logo img { display: block; width: auto; height: clamp(5.5rem, 3rem + 7vw, 10.5rem); filter: brightness(0) invert(1); }
.px-foot-slogan { margin: 0; padding-left: clamp(1.5rem, 4vw, 4rem); border-left: 3px solid var(--cyan); font-family: var(--font-heading); font-weight: 300; font-size: clamp(1.7rem, 1.1rem + 2.6vw, 3.4rem); line-height: 1.12; letter-spacing: -.01em; color: #fff; text-wrap: balance; }
.px-foot-slogan strong { font-weight: 600; }
@media (max-width: 760px) { .px-foot-hero { flex-direction: column; align-items: flex-start; } .px-foot-slogan { padding: 1.2rem 0 0; border-left: 0; border-top: 3px solid var(--cyan); } }

/* Équipe : la case « Envie de nous rejoindre ? » montre une silhouette à la place d'une photo : la prochaine personne, c'est vous. */
.px-staff .px-join { justify-content: flex-start; gap: 1.2rem; padding-top: 0; }
.px-join-you { display: grid; place-items: end center; margin: 0 -1.5rem; aspect-ratio: 4 / 5; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .16)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); }
.px-join-you svg { display: block; width: 74%; height: auto; fill: rgba(255, 255, 255, .9); }
@media (max-width: 760px) { .px-join-you { margin: 0 -1.1rem; } }

/* Titres sur photo : au survol, le lien reste blanc et se souligne en bleu ciel (le bleu foncé du survol par défaut se
   perdait sur la photo, sa remarque du 2026-10-21). */
.px-tile h3 a:hover, .px-tile h3 a:focus-visible { color: #fff; text-decoration: underline; text-decoration-color: var(--cyan); text-decoration-thickness: 2px; text-underline-offset: .22em; }

/* À propos · Notre engagement en fiche qualité (2026-10-21). */
.px-pledge-doc { position: relative; max-width: 64rem; margin: 0 auto; padding: clamp(1.4rem, 3vw, 2.6rem) clamp(1.3rem, 4vw, 3.4rem); background: #fff; box-shadow: 0 0 0 1px var(--line), 0 1.8rem 3.4rem -1.8rem rgba(6, 18, 30, .3); }
.px-pledge-doc::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg, var(--cyan) 0 33.33%, var(--red) 33.33% 66.66%, var(--primary) 66.66%); }
.px-pledge-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1.5rem; margin: 0; padding: .4rem 0 1rem; border-bottom: 2px solid var(--navy); font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--primary); }
.px-pledge-list { list-style: none; margin: 0; padding: 0; }
.px-pledge-list li { display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; gap: .8rem 1.6rem; align-items: center; padding: clamp(1.2rem, 2.4vw, 1.8rem) 0; border-bottom: 1px solid var(--line); }
.px-pledge-list .n { font-family: var(--font-heading); font-weight: 300; font-size: clamp(2.2rem, 1.6rem + 1.8vw, 3.2rem); line-height: 1; color: var(--sky-deep); }
.px-pledge-list h3 { margin: 0 0 .35rem; font-size: clamp(1.2rem, 1.05rem + .5vw, 1.5rem); }
.px-pledge-list p { margin: 0; color: var(--body-ink); max-width: 40rem; }
.px-pledge-list .ok { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .85rem .45rem .7rem; border: 2px solid var(--primary); color: var(--primary); font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.px-pledge-list .ok svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 0; }
.px-pledge-sign { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem; padding-top: 1.8rem; }
.px-pledge-sign p { margin: 0; min-width: min(100%, 18rem); padding-top: .55rem; border-top: 1px solid var(--ink); font-size: .95rem; color: var(--body-ink); }
.px-pledge-doc.is-armed .ok { opacity: 0; transform: translateX(-.5rem); }
.px-pledge-doc.is-armed .ok svg { stroke-dashoffset: 24; }
.px-pledge-doc.is-on .ok { opacity: 1; transform: none; transition: opacity .35s, transform .35s var(--ease); }
.px-pledge-doc.is-on .ok svg { stroke-dashoffset: 0; transition: stroke-dashoffset .5s .2s; }
.px-pledge-doc.is-on li:nth-child(2) .ok { transition-delay: .6s; }
.px-pledge-doc.is-on li:nth-child(2) .ok svg { transition-delay: .8s; }
.px-pledge-doc.is-on li:nth-child(3) .ok { transition-delay: 1.2s; }
.px-pledge-doc.is-on li:nth-child(3) .ok svg { transition-delay: 1.4s; }
@media (max-width: 760px) { .px-pledge-list li { grid-template-columns: 2.8rem minmax(0, 1fr); } .px-pledge-list .ok { grid-column: 2; justify-self: start; } }

/* À propos · Distinctions et nominations (2026-10-21) : chiffres, trois titres, frise qui se remplit à la lecture. */
.px-honors-stats { list-style: none; margin: 0 0 clamp(2.5rem, 5vw, 4rem); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, .35); border-bottom: 1px solid rgba(255, 255, 255, .35); }
.px-honors-stats li { padding: clamp(1.4rem, 3vw, 2.2rem) clamp(.8rem, 2vw, 1.6rem); text-align: center; }
.px-honors-stats li + li { border-left: 1px solid rgba(255, 255, 255, .35); }
.px-honors-stats strong { display: block; font-family: var(--font-heading); font-weight: 600; font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.6rem); line-height: 1; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
.px-honors-stats li > span { display: block; margin-top: .7rem; font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.px-honors-feat { list-style: none; margin: 0 0 clamp(3rem, 6vw, 4.5rem); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
.px-honors-feat li { position: relative; padding: clamp(1.4rem, 2.6vw, 2rem); background: rgba(3, 32, 56, .34); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.px-honors-feat li::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--cyan); }
.px-honors-ico { display: block; width: 3.2rem; height: 3.2rem; margin-bottom: 1.1rem; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.px-honors-ico .a { stroke: var(--cyan); }
.px-honors-feat h3 { margin: 0 0 .6rem; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); color: #fff; }
.px-honors-feat p { margin: 0; color: #fff; font-size: .95rem; line-height: 1.6; }
.px-honors-h { margin: 0 0 1.6rem; font-family: var(--font-body); font-size: .85rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #fff; text-align: center; }
.px-honors-time { --p: 1; position: relative; list-style: none; margin: 0; padding: 0; }
.px-honors-time::before, .px-honors-time::after { content: ""; position: absolute; top: 0; left: 50%; width: 2px; margin-left: -1px; height: 100%; background: rgba(255, 255, 255, .3); }
.px-honors-time::after { height: calc(var(--p) * 100%); background: #fff; box-shadow: 0 0 12px rgba(0, 174, 239, .9); }
.px-honors-time li { position: relative; width: 50%; padding: 0 clamp(1.6rem, 4vw, 3.4rem) clamp(1.8rem, 3vw, 2.6rem) 0; text-align: right; }
.px-honors-time li:nth-child(even) { margin-left: 50%; padding: 0 0 clamp(1.8rem, 3vw, 2.6rem) clamp(1.6rem, 4vw, 3.4rem); text-align: left; }
.px-honors-time li::before { content: ""; position: absolute; top: .55rem; right: -.55rem; z-index: 1; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--sky-deep); box-shadow: 0 0 0 2px #fff; transition: background .3s, box-shadow .3s; }
.px-honors-time li:nth-child(even)::before { right: auto; left: -.55rem; }
.px-honors-time .y { display: block; font-family: var(--font-heading); font-weight: 300; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1; color: #fff; }
.px-honors-time strong { display: block; margin-top: .45rem; font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.05rem, .98rem + .3vw, 1.25rem); color: #fff; }
.px-honors-time .by { display: block; margin-top: .25rem; font-size: .9rem; color: #fff; }
@media (prefers-reduced-motion: no-preference) { .px-honors-time.is-live li { transform: translateY(.8rem); transition: transform .5s var(--ease); } .px-honors-time.is-live li.is-lit { transform: none; } }
.px-honors-time.is-live li.is-lit::before { background: var(--cyan); box-shadow: 0 0 0 2px #fff, 0 0 0 7px rgba(0, 174, 239, .35); }
@media (min-width: 761px) and (max-width: 980px) { .px-honors-feat { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .px-honors-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .px-honors-stats li:nth-child(3) { border-left: 0; }
  .px-honors-stats li:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, .35); }
  .px-honors-feat { grid-template-columns: minmax(0, 1fr); }
  .px-honors-time::before, .px-honors-time::after { left: .55rem; }
  .px-honors-time li, .px-honors-time li:nth-child(even) { width: auto; margin-left: 0; padding: 0 0 1.8rem 2.4rem; text-align: left; }
  .px-honors-time li::before, .px-honors-time li:nth-child(even)::before { left: 0; right: auto; }
}

/* Logos officiels en blanc dans les titres (Santé Canada, MAPAQ) ; même hauteur de zone que l’icône CPMT. */
.px-honors-mark { display: flex; align-items: center; height: 3.4rem; margin-bottom: 1.1rem; }
.px-honors-mark .px-honors-ico { margin-bottom: 0; }
.px-honors-logo { display: block; width: auto; max-width: 100%; filter: brightness(0) invert(1); }
.px-honors-logo.is-hc { height: 1.75rem; }
.px-honors-logo.is-mapaq { height: 3.3rem; }
.px-honors-logo.is-cpmt { height: 3.4rem; }

/* Accueil · Témoignages (2026-10-21) : fond bleu nuit éclairé de bleu ciel, citation du client en très grand, mots qui
   s'allument à la lecture, avis des participants en cartes. */
.px-voices { position: relative; overflow: hidden; color: #fff; background: radial-gradient(56rem 30rem at 88% 0%, rgba(0, 174, 239, .32), transparent 62%), radial-gradient(40rem 26rem at 0% 100%, rgba(0, 102, 146, .45), transparent 65%), linear-gradient(135deg, #031c31 0%, #06345a 100%); }
.px-voices .eyebrow { color: #9fd3ee; }
.px-voices h2 { color: #fff; }
.px-voices-main { position: relative; margin: 0 0 clamp(2.5rem, 5vw, 4rem); padding-left: clamp(0rem, 6vw, 6rem); }
.px-voices-mark { position: absolute; left: -.08em; top: -.32em; font-family: var(--font-heading); font-weight: 600; font-size: clamp(7rem, 4rem + 10vw, 14rem); line-height: 1; color: var(--cyan); opacity: .55; pointer-events: none; }
.px-voices-main blockquote { margin: 0; }
.px-voices-main blockquote p { position: relative; max-width: 54rem; margin: 0; font-family: var(--font-heading); font-weight: 300; font-size: clamp(1.7rem, 1.1rem + 2.5vw, 3.1rem); line-height: 1.22; letter-spacing: -.01em; color: #fff; text-wrap: balance; }
.px-voices-main blockquote p.is-lit-on .w { color: rgba(255, 255, 255, .42); transition: color .25s; }
.px-voices-main blockquote p.is-lit-on .w.on { color: #fff; }
.px-voices-main figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin-top: 1.8rem; }
.px-voices-main figcaption strong { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 600; color: #fff; }
.px-voices-main figcaption span { padding: .25rem .7rem; border: 1px solid rgba(255, 255, 255, .45); font-size: .85rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.px-voices-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
.px-voices-cards li { position: relative; padding: clamp(1.4rem, 2.6vw, 2rem); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.px-voices-cards li::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--cyan), transparent); }
.px-voices-cards blockquote { margin: 0 0 1rem; }
.px-voices-cards blockquote p { margin: 0; font-size: 1.08rem; line-height: 1.65; color: #fff; }
.px-voices-cards blockquote p::before { content: "« "; } .px-voices-cards blockquote p::after { content: " »"; }
.px-voices-cards .who { margin: 0; font-size: .92rem; color: #cfe3f0; }
.px-voices-cards .who strong { margin-right: .5rem; color: #fff; }
@media (prefers-reduced-motion: reduce) { .px-voices-main blockquote p.is-lit-on .w { color: #fff; } }
@media (max-width: 760px) { .px-voices-cards { grid-template-columns: minmax(0, 1fr); } .px-voices-mark { position: static; display: block; height: .55em; margin-bottom: .2rem; } }
.px-voices-main blockquote p::after { content: " »"; }

/* Film : la partie lue de la barre de lecture en bleu ciel (le texte du lecteur reste blanc ou encre). */
.film { --film-accent: var(--cyan); }
.px-art-film { --film-accent: var(--primary); } /* sur fond blanc, le bleu du logo (le bleu ciel y serait trop pâle) */

/* Formation · Congrès et événements en cartes photo (2026-10-21) : le texte posé sur l'image, sous un dégradé sombre ;
   le plus récent en grande carte, un second en grand plus bas, les autres autour. */
.px-evcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(12rem, 16vw, 14.5rem); grid-auto-flow: dense; gap: 12px; }
.px-evcards li:nth-child(1) { grid-column: 1 / span 2; grid-row: span 2; }
.px-evcards li:nth-child(6) { grid-column: 3 / span 2; grid-row: span 2; }
.px-evcards a { position: relative; display: flex; align-items: flex-end; height: 100%; overflow: hidden; isolation: isolate; color: #fff; text-decoration: none; background: var(--navy-2, #06213a); }
.px-evcards img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.px-evcards a::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(4, 18, 32, .94) 0%, rgba(4, 18, 32, .62) 48%, rgba(4, 18, 32, .08) 100%); }
.px-evcards-tx { display: block; padding: clamp(1rem, 1.8vw, 1.4rem); }
.px-evcards .y { display: inline-block; margin-bottom: .45rem; padding: .15rem .5rem; background: var(--cyan); color: #04213a; font-size: .78rem; font-weight: 700; letter-spacing: .06em; }
.px-evcards strong { display: block; font-family: var(--font-heading); font-weight: 500; font-size: 1.02rem; line-height: 1.3; text-wrap: balance; }
.px-evcards li:nth-child(1) strong, .px-evcards li:nth-child(6) strong { font-size: clamp(1.3rem, 1.05rem + .9vw, 1.75rem); }
.px-evcards small { display: block; margin-top: .4rem; font-size: .85rem; color: #e4eef5; }
.px-evcards a:hover strong, .px-evcards a:focus-visible strong { text-decoration: underline; text-decoration-color: var(--cyan); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.px-evcards a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .px-evcards a:hover img { transform: scale(1.05); } }
@media (max-width: 980px) { .px-evcards { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 13rem; } .px-evcards li:nth-child(6) { grid-column: 1 / span 2; grid-row: span 1; } .px-evcards li:nth-child(1) { grid-row: span 1; } }
@media (max-width: 560px) { .px-evcards { grid-template-columns: minmax(0, 1fr); } .px-evcards li:nth-child(1), .px-evcards li:nth-child(6) { grid-column: auto; } }

/* Portrait du profil du formateur : la bande aux trois couleurs du logo en haut (son essai du 2026-10-21). */
.px-exec-photo::after { top: -6px; bottom: auto; }

/* Formation · Catalogue (2026-10-21) : deux cartes larges par rangée, photo à gauche, numéro, titre et demande. */
.px-catalog-h { display: flex; align-items: baseline; gap: 1rem; margin: clamp(2.6rem, 4vw, 3.6rem) 0 1.4rem; font-size: clamp(1.35rem, 1.1rem + .8vw, 1.8rem); }
.px-head-row + .px-catalog-h { margin-top: 0; }
.px-catalog-h span { font-family: var(--font-heading); font-weight: 300; font-size: 1.4em; line-height: 1; color: var(--sky-deep); }
.px-course-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.px-course-grid li { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); min-height: 14rem; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .3s, transform .3s var(--ease); }
.px-course-grid img { display: block; width: 100%; height: 100%; object-fit: cover; }
.px-course-grid li > div { display: flex; flex-direction: column; gap: .7rem; padding: clamp(1.2rem, 2vw, 1.6rem); border-left: 3px solid var(--sky-deep); }
.px-course-n { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--primary); }
.px-course-grid h4 { flex: 1; margin: 0; font-family: var(--font-heading); font-weight: 500; font-size: clamp(1.08rem, 1rem + .3vw, 1.25rem); line-height: 1.35; color: var(--ink); text-wrap: balance; }
.px-course-ask { align-self: flex-start; display: inline-flex; align-items: center; min-height: 2.75rem; padding: .55rem 1.05rem; background: var(--sky-deep); color: #fff; font-size: .92rem; font-weight: 600; text-decoration: none; transition: background .2s; }
.px-course-ask::after { content: "→"; margin-left: .55rem; transition: transform .2s; }
.px-course-ask:hover, .px-course-ask:focus-visible { background: var(--primary); color: #fff; }
.px-course-ask:hover::after { transform: translateX(3px); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .px-course-grid li:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--line), 0 1.4rem 2.6rem -1.4rem rgba(6, 18, 30, .35); } }
.px-catalog-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; margin-top: clamp(2.6rem, 4vw, 3.6rem); padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2.4rem); background: var(--surface); border-left: 4px solid var(--red); }
.px-catalog-cta p { margin: 0; max-width: 46rem; font-size: 1.1rem; color: var(--ink); }
@media (max-width: 980px) { .px-course-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .px-course-grid li { grid-template-columns: minmax(0, 1fr); } .px-course-grid img { aspect-ratio: 16 / 9; height: auto; } .px-course-grid li > div { border-left: 0; border-top: 3px solid var(--sky-deep); } }

/* Formation · L'agrément en certificat (2026-10-21) : papier ivoire, cadre guilloché comme un diplôme, filet intérieur,
   coins marqués, signature officielle de la CPMT, numéro en grand, référence à la loi. Aucun sceau inventé. */
.px-cert { max-width: 58rem; margin: 0 auto; padding: 0; border: clamp(24px, 3.6vw, 40px) solid #f1ebd8; border-image: url("/assets/img/cadre-guilloche.svg") 56 round; background: #fffdf7; box-shadow: 0 2px 0 rgba(255, 255, 255, .6) inset, 0 1.8rem 3.4rem -1.8rem rgba(6, 18, 30, .45), 0 .2rem .6rem rgba(6, 18, 30, .12); }
/* 2026-10-25 (sa remarque : des bords « fake et cheap ») : vrai cadre guilloché (cadre-guilloche.cjs), papier ivoire au grain
   léger et légèrement ombré vers les bords, double filet doré à l'intérieur, sans les coins en équerre. */
.px-cert-in { position: relative; padding: clamp(2rem, 4.5vw, 3.4rem) clamp(1.4rem, 5vw, 4rem); text-align: center;
  background: url("/assets/img/papier.svg"), radial-gradient(ellipse at 50% 42%, #fffef9 0%, #fffcf3 58%, #f6efdc 100%);
  box-shadow: inset 0 0 0 6px #fffcf3, inset 0 0 0 7px #c4b07a, inset 0 0 0 10px #fffcf3, inset 0 0 0 11px #d9cba0; }
.px-cert-k { margin: 0 0 1.3rem; font-size: .8rem; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: var(--primary); }
.px-cert-logo { display: block; width: auto; height: 3.4rem; margin: 0 auto 1.5rem; filter: brightness(0); opacity: .86; }
.px-cert h2 { margin: 0; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); font-weight: 500; }
.px-cert .px-cert-no { display: block; margin: .3rem 0 1.4rem; font-family: var(--font-heading); font-weight: 300; font-size: clamp(2.4rem, 1.6rem + 3vw, 3.9rem); line-height: 1.05; letter-spacing: .02em; color: var(--navy); }
.px-cert-in > p:not(.px-cert-k) { max-width: 42rem; margin: 0 auto .8rem; color: var(--body-ink); }
.px-cert-in > .px-cert-law { margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid #cdd6de; font-size: .92rem; font-style: italic; color: var(--muted); }
.px-course-ph { position: relative; display: block; overflow: hidden; }
.px-course-ph img { position: absolute; inset: 0; }
@media (max-width: 560px) { .px-course-ph { aspect-ratio: 16 / 9; } }
.px-cert-in > .px-cert-mention { font-family: var(--font-heading); font-size: 1.08rem; font-style: italic; color: var(--ink); }
.px-cert-law a { color: var(--primary); font-style: normal; font-weight: 600; }

/* À propos · Notre nom en hexagones (2026-10-22) : P · Procédé (PBE Expert), B · Bâtiment (PBE Rénov), E · Énergie
   (GreenTech Canada). Dessin SVG décoratif (aria-hidden) ; le texte lisible est dans la liste de droite. */
.px-name-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.px-hex-wrap { display: grid; place-items: center; }
.px-hex { display: block; width: 100%; max-width: 30rem; height: auto; overflow: visible; filter: drop-shadow(0 14px 22px rgba(6, 18, 30, .18)); }
.px-hex .hx { transform-box: fill-box; transform-origin: center; transition: transform .35s var(--ease), filter .35s; }
.px-hex .in { fill: none; stroke: rgba(255, 255, 255, .38); stroke-width: 1.4; transform-box: fill-box; transform-origin: center; transform: scale(.9); }
.px-hex text { fill: #fff; text-anchor: middle; font-family: var(--font-heading); }
.px-hex .L { font-size: 50px; font-weight: 600; }
.px-hex .W { font-size: 16px; font-weight: 600; letter-spacing: .02em; }
.px-hex .C { font-size: 10.5px; font-weight: 500; letter-spacing: .01em; opacity: .92; }
.px-hex-wrap.is-waiting .hx { opacity: 0; transform: translateY(14px) scale(.86); }
.px-hex-wrap.is-in .hx { opacity: 1; transform: none; transition: opacity .5s, transform .6s cubic-bezier(.2, 1.3, .4, 1); }
.px-hex-wrap.is-in .hx:nth-of-type(2) { transition-delay: .12s; } .px-hex-wrap.is-in .hx:nth-of-type(3) { transition-delay: .24s; }
.px-hex-wrap.is-in .hx:nth-of-type(4) { transition-delay: .36s; } .px-hex-wrap.is-in .hx:nth-of-type(5) { transition-delay: .48s; }
.px-hex-wrap.is-in .hx:nth-of-type(6) { transition-delay: .6s; }
.px-name-grid:has(.px-name-list .is-p:hover) .hx-p, .px-name-grid:has(.px-name-list .is-b:hover) .hx-b, .px-name-grid:has(.px-name-list .is-e:hover) .hx-e { transform: scale(1.06); filter: brightness(1.08); }
.px-name-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.px-name-list li { --c: var(--sky-deep); padding: 1.2rem 1.4rem 1.3rem; background: #fff; box-shadow: 0 0 0 1px var(--line); border-left: 4px solid var(--c); transition: box-shadow .3s; }
.px-name-list li.is-b { --c: var(--red); } .px-name-list li.is-e { --c: var(--primary); }
.px-name-list li:hover { box-shadow: 0 0 0 1px var(--line), 0 1rem 2rem -1.2rem rgba(6, 18, 30, .3); }
.px-name-top { display: flex; align-items: center; gap: 1rem; margin-bottom: .6rem; }
.px-name-top .l { font-family: var(--font-heading); font-weight: 600; font-size: 2.6rem; line-height: .9; color: var(--c); }
.px-name-top h3 { flex: 1; margin: 0; font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); }
.px-name-logo { display: block; width: auto; max-width: 10rem; height: 3rem; object-fit: contain; }
.px-name-list .is-e .px-name-logo { height: 3.9rem; }
.px-name-list p { margin: 0 0 .5rem; color: var(--body-ink); }
.px-name-list .px-words { font-size: .9rem; font-weight: 600; letter-spacing: .04em; color: var(--c); }
.px-name-list .px-tagline { margin: 0; font-family: var(--font-heading); font-style: italic; color: var(--muted); }
.px-name-list a { color: var(--primary); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .px-hex-wrap.is-waiting .hx { opacity: 1; transform: none; } }
@media (max-width: 980px) { .px-name-grid { grid-template-columns: minmax(0, 1fr); } .px-hex { max-width: 22rem; } }
.px-group .px-group-gt { font-weight: 400; margin-left: .9rem; } .px-group .px-group-gt::before { display: none; }
@media (max-width: 560px) { .px-group .px-group-gt { display: none; } }

/* À propos · Notre histoire (2026-10-22) : photo de l'équipe pleine hauteur au bord gauche, texte et jalons à droite. */
.px-story2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(34rem, 72vh, 44rem); background: var(--surface); }
.px-story2-photo { position: relative; margin: 0; overflow: hidden; }
.px-story2-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 45% 40%; }
.px-story2-photo figcaption { position: absolute; left: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); padding: .55rem .9rem; background: #fff; color: var(--ink); font-size: .9rem; font-weight: 600; box-shadow: 0 .6rem 1.4rem -0.6rem rgba(6, 18, 30, .35); border-left: 3px solid var(--red); }
.px-story2-text { display: flex; flex-direction: column; justify-content: center; padding: clamp(3rem, 2rem + 4vw, 6rem) calc(max(0px, 100% - 41.25rem) + clamp(1rem, 4vw, 3.5rem)) clamp(3rem, 2rem + 4vw, 5rem) clamp(2rem, 5vw, 5rem); }
.px-story2-text h2 { margin: 0 0 1.4rem; font-size: clamp(2rem, 1.4rem + 2.2vw, 3.1rem); line-height: 1.08; }
.px-story2-text > p:not(.eyebrow) { margin: 0 0 1rem; max-width: 36rem; font-size: 1.05rem; line-height: 1.7; color: var(--body-ink); }
.px-rail { position: relative; list-style: none; margin: 1.8rem 0 0; padding: 1.6rem 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; max-width: 40rem; }
.px-rail::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--red) 50%, var(--primary)); }
.px-rail li { position: relative; }
.px-rail li::before { content: ""; position: absolute; top: calc(-1.6rem - 5px); left: 0; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--sky-deep); }
.px-rail .y { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 1.5rem; line-height: 1; color: var(--navy); }
.px-rail .t { display: block; margin-top: .45rem; font-size: .9rem; line-height: 1.45; color: var(--body-ink); }
@media (max-width: 980px) {
  .px-story2 { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .px-story2-photo { aspect-ratio: 16 / 11; }
  .px-story2-text { padding: clamp(2.5rem, 6vw, 3.5rem) clamp(1rem, 4vw, 3.5rem); }
}
@media (max-width: 560px) { .px-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.6rem; } .px-rail li:nth-child(n + 3)::before { display: none; } }

/* Article · fiche courte de l'expert en fin de texte (2026-10-22) : rôle, résumé, expertises, courriel, lien vers son profil. */
.px-person { margin-top: clamp(2.2rem, 4vw, 3rem); padding: clamp(1.4rem, 3vw, 2rem); background: var(--surface); border-top: 3px solid var(--sky-deep); }
.px-person h2 { margin: .2rem 0 .2rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.px-person .px-person-role { margin: 0 0 1rem; font-size: .92rem; font-weight: 600; letter-spacing: .04em; color: var(--primary); }
.px-person-tags { list-style: none; margin: 1rem 0 1.4rem; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.px-person-tags li { margin: 0; padding: .35rem .7rem; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: .88rem; color: var(--ink); }
.px-person-links { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.6rem; margin: 0; }
.px-art-text .px-person-tags { padding-left: 0; } .px-art-text .px-person-tags li { margin: 0; font-size: .88rem; line-height: 1.4; }

/* Moyens de joindre un expert : courriel (protégé), téléphone, LinkedIn (2026-10-22). */
.px-exec-contact, .px-drawer-links { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; margin: 1.6rem 0 0; }
.px-exec-contact a:not(.button), .px-drawer-links a, .px-person-links a:not(.button):not(.text-link) { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--primary); font-weight: 600; }
.px-drawer-links { margin-top: .4rem; }

/* Espaces vides repérés le 2026-10-22 : la colonne courte suit le défilement à côté de la longue. */
@media (min-width: 981px) { .px-dgroups-grid > .px-dsec-head { position: sticky; top: calc(var(--hdr, 5rem) + 4.5rem); } }
/* la colonne des coordonnées ne colle que si l’écran est assez haut pour la montrer en entier */
@media (min-width: 981px) and (min-height: 860px) { .contact-grid > :last-child { position: sticky; top: calc(var(--hdr, 5rem) + 1.5rem); } }
.px-dsec-cta { margin: 1.6rem 0 0; }
@media (min-width: 981px) { .px-art-head-grid { grid-template-rows: 1fr 1fr; } .px-art-head-grid .px-art-title { align-self: end; } .px-art-head-grid .lead { align-self: start; } }

/* Boucles vidéo des hauts de page (2026-10-22) : par-dessus la photo, même cadrage. */
.px-loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.px-pagehead > .px-loop { z-index: -2; }
.px-loop[hidden] { display: none; }

/* À propos · Nos partenaires (2026-10-22) : partenaires industriels en cartes, puis le mur de logos du réseau. */
.px-partners-h { margin: clamp(2.2rem, 4vw, 3rem) 0 1.2rem; font-family: var(--font-body); font-size: .85rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--primary); }
.px-head-row + .px-partners-h { margin-top: 0; }
.px-indus { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.9rem, 1.6vw, 1.3rem); }
.px-indus li { padding: 1.4rem 1.3rem 1.5rem; background: #fff; box-shadow: 0 0 0 1px var(--line); border-top: 3px solid var(--sky-deep); }
.px-indus-tag { margin: 0 0 .6rem; font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.px-indus h4 { margin: 0 0 .6rem; font-family: var(--font-heading); font-size: 1.15rem; line-height: 1.3; color: var(--navy); }
.px-indus p:not(.px-indus-tag) { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--body-ink); }
.px-plogos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.px-plogos li { display: grid; place-items: center; height: 7.6rem; padding: 1rem; background: #fff; }
.px-plogos a { display: grid; place-items: center; width: 100%; height: 100%; }
.px-plogos img { display: block; width: auto; max-width: 100%; max-height: 4.4rem; object-fit: contain; filter: grayscale(1); opacity: .78; transition: filter .3s, opacity .3s; }
.px-plogos a[href]:hover img, .px-plogos a[href]:focus-visible img { filter: none; opacity: 1; }
.px-partners-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin: clamp(2rem, 3vw, 2.6rem) 0 0; padding: 1.3rem 1.6rem; background: var(--surface); border-left: 4px solid var(--red); }
.px-partners-ask span { font-size: 1.05rem; color: var(--ink); }
@media (max-width: 980px) { .px-indus { grid-template-columns: repeat(2, minmax(0, 1fr)); } .px-plogos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .px-indus { grid-template-columns: minmax(0, 1fr); } .px-plogos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .px-plogos li { height: 6.2rem; } }
.px-indus-note:empty { display: none; }
.px-indus .px-indus-note { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); font-size: .9rem; font-weight: 600; color: var(--primary); }
.px-plogos { display: flex; flex-wrap: wrap; justify-content: center; background: none; border: 0; gap: 0; }
.px-plogos li { flex: 0 0 calc(100% / 6); box-shadow: inset 0 0 0 .5px var(--line); }
@media (max-width: 980px) { .px-plogos li { flex-basis: calc(100% / 3); } }
@media (max-width: 560px) { .px-plogos li { flex-basis: 50%; } }

/* Page Équipements de remplissage aseptique (2026-10-22). */
.px-equip-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
.px-equip-steps li { padding-top: 1.1rem; border-top: 3px solid var(--sky-deep); }
.px-equip-steps .n { display: block; font-family: var(--font-heading); font-weight: 300; font-size: 2.4rem; line-height: 1; color: var(--sky-deep); }
.px-equip-steps h3 { margin: .7rem 0 .5rem; font-size: 1.3rem; }
.px-equip-steps p { margin: 0; color: var(--body-ink); }
.px-equip-cont-h { margin: clamp(2.2rem, 4vw, 3rem) 0 .8rem; font-size: .85rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--primary); }
.px-equip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.4rem, 3vw, 2.4rem); }
/* quatre vidéos depuis le 2026-10-27 : une grille 2 × 2, sans vidéo pleine largeur */
.px-equip-film { padding: 0; background: none; color: var(--ink); --film-accent: var(--primary); }
.px-equip-film .film-frame { width: 100%; margin: 0; }
.px-equip-film .film-top { display: block; margin-top: 1rem; }
.px-equip-film h3 { margin: 0 0 .4rem; font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem); }
.px-equip-film .film-top p { margin: 0 0 .8rem; color: var(--body-ink); max-width: 46rem; }
.px-equip-fin-steps { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; counter-reset: s; }
.px-equip-fin-steps li { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); color: #fff; font-weight: 600; }
.px-equip-fin-steps span { display: grid; place-items: center; flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: #fff; color: var(--sky-shade); font-weight: 700; }
.px-equip-scope { margin: 0 0 1.4rem; max-width: 46rem; color: #fff; }
.px-equip-note { margin: 1.4rem 0 0; max-width: 52rem; font-size: .88rem; color: #fff; }
@media (max-width: 980px) { .px-equip-steps, .px-equip-fin-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .px-equip-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .px-equip-steps, .px-equip-fin-steps { grid-template-columns: minmax(0, 1fr); } }
/* La brochure du financement (page Bausch) : la vraie première page, inclinée, et le lien de téléchargement */
.px-equip-broch { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 2.4rem); align-items: center; max-width: 46rem; margin: 0 0 1.8rem; padding: 1.4rem clamp(1.2rem, 3vw, 2rem) 1.4rem 1.6rem; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); border-left: 4px solid var(--red); color: #fff; text-decoration: none; transition: background .25s; }
.px-equip-broch:hover { background: rgba(255, 255, 255, .11); }
.px-equip-broch-ph { display: block; transform: rotate(-4deg); transition: transform .35s; }
.px-equip-broch-ph img { display: block; width: 100%; height: auto; box-shadow: 0 14px 30px rgba(0, 0, 0, .45); }
.px-equip-broch:hover .px-equip-broch-ph { transform: rotate(0) translateY(-4px); }
.px-equip-broch-copy { display: grid; gap: .45rem; }
.px-equip-broch .k { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #9fd3ee; }
.px-equip-broch strong { font-family: var(--font-heading); font-weight: 500; font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); line-height: 1.25; text-wrap: balance; }
.px-equip-broch .d { color: #d3dee6; line-height: 1.55; }
.px-equip-broch .go { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); column-gap: .8rem; align-items: center; margin-top: .45rem; font-weight: 700; line-height: 1.3; }
.px-equip-broch .go::after { content: "↓"; order: -1; grid-row: span 2; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; background: var(--red); color: #fff; font-weight: 700; transition: transform .25s; }
.px-equip-broch:hover .go::after { transform: translateY(3px); }
.px-equip-broch .go small { grid-column: 2; font-size: .82rem; font-weight: 400; color: #c3d1db; }
.px-equip-broch:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 560px) { .px-equip-broch { grid-template-columns: 5.6rem minmax(0, 1fr); padding: 1.2rem 1rem 1.3rem 1.1rem; gap: .5rem 1.1rem; align-items: start; } .px-equip-broch-copy { display: contents; } .px-equip-broch-ph { grid-row: span 2; } .px-equip-broch .k { align-self: end; } .px-equip-broch :is(.d, .go) { grid-column: 1 / -1; } .px-equip-broch .d { margin-top: .7rem; } }
@media (prefers-reduced-motion: reduce) { .px-equip-broch-ph, .px-equip-broch:hover .px-equip-broch-ph { transform: rotate(-4deg); } }
.px-indus-more:empty { display: none; } .px-indus .px-indus-more { margin-top: .9rem; }


/* ============ Accueil : le film du haut (option E, son choix du 2026-10-22) ============
   Un film clair sans filtre sombre, une carte blanche fixe, un grand mot par chapitre, la barre des chapitres en bas. */
.px-reel { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: min(calc(100svh - 7.6rem), 52rem); overflow: hidden; background: #dfe9f0; }
.px-reel-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.px-reel-in { position: relative; padding-block: clamp(2.5rem, 8vh, 5rem) 2rem; }
.px-reel-card { width: min(38rem, 100%); padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1.4rem, 3vw, 2.8rem); background: #fff; box-shadow: 0 2rem 4rem -1.6rem rgba(6, 18, 30, .45); }
.px-reel-k { margin: 0 0 1.1rem; font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--primary); }
.px-reel h1 { margin: 0; max-width: none; font-family: var(--font-heading); font-weight: 300; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.3rem); line-height: 1.06; letter-spacing: -.02em; color: var(--navy); }
/* « Des installations / qui inspirent / confiance. » en grand (ses demandes du 2026-10-27) : trois lignes qui ne se coupent
   jamais, la carte blanche suit la largeur du titre, la taille suit aussi la hauteur de l'écran pour tenir dans le premier écran */
@media (min-width: 761px) { .px-reel-card { width: fit-content; max-width: 100%; } .px-reel h1 { font-size: min(clamp(2.4rem, 1.1rem + 3.4vw, 4.6rem), 7.6vh); line-height: 1.02; white-space: nowrap; } .px-reel-d { max-width: 36rem; } }
@media (max-width: 760px) { .px-reel h1 { font-size: clamp(1.9rem, 9vw, 2.5rem); } }
@media (min-width: 761px) and (max-height: 760px) { .px-reel-in { padding-block: 1rem 1rem; } .px-reel-card { padding-block: 1.35rem; } .px-reel-k { margin-bottom: .6rem; } .px-reel-rule { margin: .8rem 0 .75rem; } .px-reel-d { max-width: 38rem; font-size: 1rem; line-height: 1.5; } .px-reel-act { margin-top: 1rem; } }
.px-reel h1 strong { font-weight: 600; color: var(--sky-deep); }
.px-reel-rule { display: block; width: 3.4rem; height: 3px; margin: 1.3rem 0 1.2rem; background: var(--red); }
.px-reel-d { margin: 0; max-width: 34rem; color: var(--body-ink); font-size: clamp(1rem, .95rem + .25vw, 1.12rem); line-height: 1.6; }
.px-reel-act { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.8rem; margin: 1.6rem 0 0; }
.px-reel-act .button { background: var(--sky-deep); border-color: var(--sky-deep); color: #fff; }
.px-reel-act .button:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
/* le grand mot du chapitre monte d'un coup avec l'éclair blanc du film ; les autres sont cachés après leur sortie */
.px-reel-word { position: absolute; right: clamp(1rem, 4vw, 3.5rem); bottom: 7.4rem; margin: 0; display: grid; justify-items: end; overflow: hidden; pointer-events: none; font-family: var(--font-heading); font-weight: 600; font-size: clamp(3rem, 5.4vw, 7.5rem); line-height: 1; letter-spacing: -.03em; text-transform: uppercase; color: #fff; text-shadow: 0 .06em .5em rgba(6, 18, 30, .4); }
.px-reel-word span { grid-area: 1 / 1; padding-bottom: .08em; transform: translateY(-110%); visibility: hidden; transition: transform .5s cubic-bezier(.2, .8, .2, 1), visibility 0s .5s; }
.px-reel-word span.is-on { transform: none; visibility: visible; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.px-reel-word span.is-on ~ span { transform: translateY(110%); }
.px-reel-chapters { position: relative; background: rgba(255, 255, 255, .94); box-shadow: 0 -1px 0 rgba(6, 18, 30, .08); }
.px-reel-bar { display: flex; align-items: center; gap: 1rem; }
.px-reel-chapters ol { flex: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.px-reel-chapters li button { position: relative; display: grid; grid-template-columns: auto 1fr; gap: .1rem .8rem; width: 100%; padding: 1.1rem 1rem 1.25rem 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--navy); }
.px-reel-chapters .n { grid-row: 1 / 3; font-family: var(--font-heading); font-weight: 300; font-size: 1.9rem; line-height: 1; color: #9fb2c3; }
.px-reel-chapters strong { font-family: var(--font-heading); font-size: 1.15rem; }
.px-reel-chapters .d { font-size: .88rem; color: var(--body-ink); }
.px-reel-chapters i { position: absolute; left: 0; right: 1rem; top: 0; height: 3px; overflow: hidden; background: #d5dfe7; }
.px-reel-chapters i::after { content: ""; position: absolute; inset: 0; background: var(--red); transform-origin: left; transform: scaleX(var(--p, 0)); }
.px-reel-chapters [aria-current="true"] .n { color: var(--sky-deep); }
.px-reel-pause { position: relative; flex: none; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line); background: #fff; color: var(--navy); cursor: pointer; }
.px-reel-pause span::before, .px-reel-pause span::after { content: ""; position: absolute; top: 50%; left: calc(50% - 5px); width: 3px; height: .8rem; background: currentColor; transform: translateY(-50%); }
.px-reel-pause span::after { left: calc(50% + 2px); }
.px-reel-pause.is-paused span::before { left: calc(50% - 3px); width: 0; height: 0; background: none; border-left: .65rem solid currentColor; border-top: .42rem solid transparent; border-bottom: .42rem solid transparent; }
.px-reel-pause.is-paused span::after { content: none; }
.px-reel-pause:hover { border-color: var(--sky-deep); color: var(--sky-deep); }
@media (min-width: 761px) and (max-width: 900px) { .px-reel-word { display: none; } }
@media (max-width: 980px) { .px-reel-chapters ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ============ Accueil : « Ce que nous faisons » en panneaux (option F, son choix du 2026-10-22) ============ */
.px-dof-panels { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; height: min(70svh, 36rem); }
.px-dof-panels li { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; transition: flex-grow .7s var(--ease); }
.px-dof-panels li.is-open, .px-dof-panels:not(.is-live) li:first-child { flex-grow: 2.6; }
.px-dof-panels a { position: absolute; inset: 0; display: block; color: var(--navy); text-decoration: none; }
.px-dof-panels a:focus-visible { outline: 3px solid var(--sky-deep); outline-offset: -3px; }
.px-dof-panels img, .px-dof-panels video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.px-dof-panels video { opacity: 0; transition: opacity .6s; }
.px-dof-panels li.is-open video { opacity: 1; }
.px-dof-tx { position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1.1rem; display: block; padding: 1.1rem 1.3rem; background: #fff; box-shadow: 0 .8rem 1.6rem -1rem rgba(6, 18, 30, .5); }
.px-dof-tx small { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .14em; color: var(--red); }
.px-dof-tx strong { display: block; margin-top: .2rem; font-family: var(--font-heading); font-size: 1.1rem; line-height: 1.15; }
.px-dof-d, .px-dof-list { display: block; max-height: 0; overflow: hidden; transition: max-height .5s; }
.px-dof-d { margin-top: .25rem; font-size: .9rem; color: var(--body-ink); }
.px-dof-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.px-dof-list em { padding: .3rem .6rem; font-style: normal; font-size: .82rem; font-weight: 600; color: var(--sky-shade); background: #eaf3f9; }
.px-dof-panels li.is-open .px-dof-tx, .px-dof-panels:not(.is-live) li:first-child .px-dof-tx { border-top: 3px solid var(--red); }
.px-dof-panels li.is-open .px-dof-tx strong, .px-dof-panels:not(.is-live) li:first-child .px-dof-tx strong { font-size: clamp(1.2rem, 1rem + .8vw, 1.7rem); }
.px-dof-panels li.is-open :is(.px-dof-d, .px-dof-list), .px-dof-panels:not(.is-live) li:first-child :is(.px-dof-d, .px-dof-list) { max-height: 9rem; }
.px-dof-panels li.is-open .px-dof-list, .px-dof-panels:not(.is-live) li:first-child .px-dof-list { margin-top: .8rem; }
@media (prefers-reduced-motion: reduce) { .px-reel-word span, .px-dof-panels li, .px-dof-panels video, .px-dof-d, .px-dof-list { transition: none; } }

@media (max-width: 760px) {
  /* téléphone : le film en bande pleine largeur, bien visible, avec le grand mot ; la carte chevauche son bas */
  .px-reel { min-height: 0; background: #fff; }
  .px-reel-media { position: relative; height: 46svh; }
  .px-reel-word { display: grid; justify-items: start; top: calc(46svh - 6.4rem); bottom: auto; left: 1rem; right: 1rem; font-size: 2.6rem; }
  .px-reel-in { padding-block: 0 1.5rem; margin-top: -2.4rem; }
  .px-reel-k { margin-bottom: 1.25rem; }
  .px-reel-chapters { padding-bottom: 2rem; }
  .px-reel-chapters .d { display: none; }
  /* panneaux empilés : fermés en bandeaux photo avec une petite étiquette, l'ouvert a la place de ses services */
  .px-dof-panels { flex-direction: column; height: auto; }
  .px-dof-panels li { flex: none; height: 7.5rem; transition: height .6s var(--ease); }
  .px-dof-panels li.is-open, .px-dof-panels:not(.is-live) li:first-child { height: 25rem; }
  .px-dof-tx { left: .8rem; right: .8rem; bottom: .8rem; }
  .px-dof-panels.is-live li:not(.is-open) .px-dof-tx { right: auto; display: flex; align-items: baseline; gap: .6rem; padding: .55rem .9rem; }
  .px-dof-panels.is-live li:not(.is-open) .px-dof-tx strong { margin: 0; }
  .px-dof-panels.is-live li:not(.is-open) :is(.px-dof-d, .px-dof-list) { display: none; }
}

/* ============ Ses remarques du 2026-10-22 (téléphone) ============ */
/* « Ils nous font confiance » : un vrai titre, bien plus grand */
.px-trust-h { margin: 0 0 clamp(1.4rem, 3vw, 2.2rem); font-family: var(--font-heading); font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); font-weight: 500; line-height: 1.15; letter-spacing: -.015em; color: var(--navy); }
/* la dernière case du mur de logos invite le visiteur et remplit la rangée à toutes les largeurs (32 logos : 8, 6, 4
   puis 3 colonnes) ; à recalculer si le nombre de logos change */
/* témoignage : le guillemet standard, posé au-dessus de la citation (il ne touche plus le texte, ni sur téléphone ni
   sur ordinateur) */
.px-voices-main { padding-left: 0; }
.px-voices-mark { position: static; display: block; height: .5em; margin: 0 0 clamp(.8rem, 2vw, 1.4rem); font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: clamp(5.5rem, 3.5rem + 5vw, 9rem); line-height: .9; color: var(--cyan); opacity: 1; overflow: visible; }
.px-voices-main blockquote p::after { content: none; }
/* « Formation et événements » : toute la carte se clique (le titre est le lien) */
.px-know-grid li { position: relative; }
.px-know-grid h3 a { color: inherit; text-decoration: none; }
.px-know-grid h3 a::after { content: ""; position: absolute; inset: 0; }
.px-know-grid li:hover h3 a, .px-know-grid h3 a:focus-visible { text-decoration: underline; text-decoration-color: var(--cyan); text-decoration-thickness: 2px; text-underline-offset: .22em; }
.px-know-grid h3 a:focus-visible { outline: none; }
.px-know-grid h3 a:focus-visible::after { outline: 3px solid var(--sky-deep); outline-offset: 4px; }

/* Cadre des huit services (Expertises, 2026-10-22) : par défaut deux photos (la salle de procédés, et les flacons en
   encart) ; au survol ou au clavier, la photo du service en pleine résolution */
.px-svc-cover { position: absolute; inset: 0; transition: opacity .6s var(--ease); }
.px-svc-photos .px-svc-cover img { opacity: 1; }
.px-svc-photos .px-svc-cover .px-svc-inset { inset: auto auto 1.2rem 1.2rem; width: 44%; height: auto; aspect-ratio: 4 / 3; border: 5px solid #fff; box-shadow: 0 1.2rem 2.4rem -1rem rgba(6, 18, 30, .55); }
.px-svc-pick:has(.px-svc-rows li:hover, .px-svc-rows li:focus-within) .px-svc-cover { opacity: 0; }

/* Ressources et Secteurs (sa remarque du 2026-10-22, téléphone) : le texte est posé dans un panneau gris qui tient à sa
   photo, comme les cartes des Réalisations ; on voit tout de suite quel texte va avec quelle image */
.px-sf-cards a, .px-sector-cards a { display: flex; flex-direction: column; height: 100%; background: var(--surface); }
.px-sf-cards a { padding: 0 1.2rem 1.3rem; }
.px-sf-cards figure { margin: 0 -1.2rem .9rem; }
.px-sector-cards a { padding: 0 1.4rem 1.5rem; }
.px-sector-cards figure { margin: 0 -1.4rem 1.2rem; }
.section-alt .px-sf-cards a, .section-alt .px-sector-cards a { background: #fff; }

/* ============ Accueil : « Parlons de votre projet », le plan d'usine cGMP qui se dessine (option A, 2026-10-22) ============
   Le titre du dessin, le plan et le cartouche ont exactement la même largeur. */
.px-plan-cta { background: #f2f8fc; }
.px-plan-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.px-plan-cta h2 { margin: 0; }
.px-plan-sheet { padding: clamp(.9rem, 2vw, 1.5rem); background-color: #fff; background-image: linear-gradient(rgba(10, 123, 189, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 123, 189, .07) 1px, transparent 1px); background-size: 20px 20px; border: 1px solid #c9dbe8; box-shadow: 0 1.6rem 3rem -2rem rgba(6, 18, 30, .35); }
.px-plan-title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .3rem 1rem; margin: 0 0 .8rem; padding: .55rem .8rem; border: 2px solid var(--navy); background: #fff; }
.px-plan-title strong { font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); }
.px-plan-title span { font-size: .78rem; font-weight: 600; letter-spacing: .06em; color: var(--sky-shade); }
.px-plan { display: block; width: 100%; height: auto; }
.px-plan .ln { fill: none; stroke: var(--navy); stroke-linejoin: round; }
.px-plan .w { stroke-width: 3.2; }
.px-plan .dr { stroke-width: 1.2; stroke: #4d6a84; }
.px-plan .eq { stroke-width: 1.4; stroke: var(--sky-deep); }
.px-plan-vials circle { fill: #fff; stroke: var(--sky-deep); stroke-width: 1.2; }
.px-plan-pipe { fill: none; stroke: var(--cyan); stroke-width: 1.6; stroke-dasharray: 5 4; }
.px-plan-tx text { font-family: var(--font-body); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; fill: var(--navy); text-anchor: middle; }
.px-plan-tx .iso { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: none; fill: var(--sky-shade); }
.px-plan-pin .dot { fill: var(--red); }
.px-plan-pin .ring { fill: none; stroke: var(--red); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.px-plan-pin text { font-family: var(--font-body); font-size: 12px; font-weight: 700; fill: var(--red); text-anchor: middle; }
/* dessin : armé seulement si le script tourne et que le plan est encore sous l'écran */
.px-plan.is-armed .ln { stroke-dasharray: 1; stroke-dashoffset: 1; }
.px-plan.is-armed :is(.px-plan-vials, .px-plan-pipe, .px-plan-tx, .px-plan-pin) { opacity: 0; }
.px-plan.is-armed.is-drawn .ln { animation: px-draw 1s cubic-bezier(.4, 0, .2, 1) forwards; }
.px-plan.is-armed.is-drawn :is(.px-plan-vials, .px-plan-pipe, .px-plan-tx, .px-plan-pin) { animation: px-fade .6s ease forwards; }
.px-plan.is-drawn .d2 { animation-delay: .35s; } .px-plan.is-drawn .d3 { animation-delay: .6s; } .px-plan.is-drawn .d4 { animation-delay: .95s; }
.px-plan.is-drawn .d5 { animation-delay: 1.2s; } .px-plan.is-drawn .d6, .px-plan.is-drawn .px-plan-vials { animation-delay: 1.45s; }
.px-plan.is-drawn .px-plan-pipe { animation-delay: 1.75s; } .px-plan.is-drawn .px-plan-tx { animation-delay: 1.9s; } .px-plan.is-drawn .px-plan-pin { animation-delay: 2.2s; }
.px-plan.is-drawn .px-plan-pin .ring, .px-plan:not(.is-armed) .px-plan-pin .ring { animation: px-pin 1.8s ease-out 2.6s infinite; }
@keyframes px-draw { to { stroke-dashoffset: 0; } }
@keyframes px-fade { to { opacity: 1; } }
@keyframes px-pin { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .px-plan .ln, .px-plan * { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; } }
/* cartouche : quatre colonnes (deux paires par rangée) sur toute la largeur du plan */
.px-plan-block { margin: .8rem 0 0; display: grid; grid-template-columns: minmax(0, 6.6rem) minmax(0, 1fr) minmax(0, 6.6rem) minmax(0, 1fr); border: 2px solid var(--navy); background: #fff; font-size: .9rem; }
.px-plan-block > div { display: contents; }
.px-plan-block dt, .px-plan-block dd { margin: 0; padding: .5rem .7rem; border-top: 1px solid #c9dbe8; }
.px-plan-block dt { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sky-shade); border-right: 1px solid #c9dbe8; }
.px-plan-block dd { color: var(--navy); }
.px-plan-block > div:nth-child(even) dd { border-right: 1px solid #c9dbe8; }
.px-plan-block address { font-style: normal; }
.px-plan-block .px-plan-brand dt, .px-plan-block .px-plan-brand dd { border-top: 0; background: var(--navy); color: #fff; }
.px-plan-block .px-plan-brand dt { font-size: .9rem; letter-spacing: .12em; border-right-color: rgba(255, 255, 255, .25); }
.px-plan-block .px-plan-brand dd { grid-column: 2 / -1; font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: #cfe3f1; }
@media (max-width: 980px) { .px-plan-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .px-plan-block { grid-template-columns: minmax(0, 6.4rem) minmax(0, 1fr); }
  .px-plan-block > div:nth-child(even) dd { border-right: 0; }
  .px-plan-block .px-plan-brand dd { grid-column: 2; }
}
/* plan : « cGMP » garde sa minuscule ; tableau en deux colonnes tant que le plan est étroit ; textes du plan lisibles sur
   téléphone */
.px-plan-title strong { text-transform: none; letter-spacing: .06em; font-size: .9rem; }
@media (max-width: 1240px) {
  .px-plan-block { grid-template-columns: minmax(0, 6.6rem) minmax(0, 1fr); }
  .px-plan-block > div:nth-child(even) dd { border-right: 0; }
  .px-plan-block .px-plan-brand dd { grid-column: 2; }
}
@media (max-width: 560px) {
  .px-plan-tx text { font-size: 14px; letter-spacing: 0; }
  .px-plan-tx .iso { font-size: 13px; }
  .px-plan-pin text { font-size: 20px; }
}

/* Expertises : la fiche « Demande de projet » (option C, 2026-10-22), sur fond clair après la méthode en bleu */
.px-req { background: #eef6fb; }
.px-req-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.px-req h2 { margin: 0; }
.px-req .px-cinfo { margin-top: 1.6rem; }
.px-req-sheet { padding: clamp(1.4rem, 3vw, 2.4rem); background: #fff; color: var(--navy); border-top: 6px solid; border-image: linear-gradient(90deg, var(--cyan) 0 33.3%, var(--red) 33.3% 66.6%, var(--primary) 66.6%) 1; box-shadow: 0 2rem 4rem -2.4rem rgba(6, 18, 30, .45); }
.px-req-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; margin: 0 0 1.4rem; padding-bottom: .9rem; border-bottom: 2px solid var(--navy); }
.px-req-head strong { font-family: var(--font-heading); font-size: 1.35rem; }
.px-req-head span { align-self: center; font-size: .8rem; font-weight: 700; letter-spacing: .08em; color: var(--sky-shade); }
.px-req-q { margin: 0 0 .6rem; font-weight: 600; }
.px-req-opts { list-style: none; margin: 0; padding: 0; }
.px-req-opts a { display: flex; align-items: center; gap: .9rem; min-height: 2.9rem; padding: .55rem .6rem; border-bottom: 1px solid var(--line); color: var(--navy); font-weight: 600; text-decoration: none; }
.px-req-opts a::before { content: ""; flex: none; width: 1.15rem; height: 1.15rem; border: 2px solid var(--navy); background: #fff; }
.px-req-opts a::after { content: "→"; margin-left: auto; color: var(--sky-deep); opacity: 0; transform: translateX(-.4rem); transition: opacity .2s, transform .2s; }
.px-req-opts a:hover, .px-req-opts a:focus-visible { background: #eef6fb; }
.px-req-opts a:hover::before, .px-req-opts a:focus-visible::before { border-color: var(--sky-deep); background: var(--sky-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.4'/%3E%3C/svg%3E") center / 85% no-repeat; }
.px-req-opts a:hover::after, .px-req-opts a:focus-visible::after { opacity: 1; transform: none; }
.px-req-or { margin: 1.2rem 0 0; font-size: .95rem; color: var(--body-ink); }
.px-req-sign { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; margin: 1.8rem 0 0; padding-top: .8rem; border-top: 1px solid var(--navy); }
.px-req-sign span { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sky-shade); }
.px-req-sign strong { font-family: var(--font-heading); }
@media (prefers-reduced-motion: reduce) { .px-req-opts a::after { transition: none; } }
@media (max-width: 860px) { .px-req-grid { grid-template-columns: minmax(0, 1fr); } }

/* Huit services (sa précision du 2026-10-22) : les deux photos l'une sous l'autre, sans chevauchement */
.px-svc-cover { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; background: var(--surface); }
.px-svc-photos .px-svc-cover img { position: static; width: 100%; height: 100%; object-fit: cover; }

/* Formation et événements (accueil, sa remarque du 2026-10-22) : trois colonnes égales, même format de photo, et le
   texte de chaque carte dans un panneau qui tient à sa photo */
.px-know-grid li { display: flex; flex-direction: column; padding: 0 1.3rem 1.4rem; background: var(--surface); }
.px-know-grid figure, .px-know-grid li:first-child figure { aspect-ratio: 4 / 3; margin: 0 -1.3rem 1rem; }
.section-alt .px-know-grid li { background: #fff; }
@media (min-width: 761px) { .px-know-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .px-know-grid li:first-child { grid-column: auto; } }

/* Article « PBE Expert, votre partenaire en conformité BPF » (sa demande du 2026-10-22) : l'affiche « +300 projets »
   grandit jusqu'au bord droit de l'écran ; le texte garde la marge habituelle à gauche */
@media (min-width: 981px) {
  body[data-page="partenaire-conformite-bpf-2023"] .px-art-grid.has-cover { width: auto; max-width: none; margin-left: max(0px, (100% - 82.5rem) / 2); margin-right: 0; padding-right: 0; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); }
  body[data-page="partenaire-conformite-bpf-2023"] .px-art-side > :not(.px-art-cover) { padding-right: clamp(1rem, 4vw, 3.5rem); }
  body[data-page="partenaire-conformite-bpf-2023"] .px-art-cover figcaption { padding-right: clamp(1rem, 4vw, 3.5rem); }
}

/* Témoignage de l'accueil (sa référence du 2026-10-22) : fond clair à motif de triangles, grand guillemet carré et
   transparent derrière le début de la citation, citation plus grande dont les mots s'allument à la lecture */
.px-voices { color: var(--navy); background-color: #f4f7fa; background-image: linear-gradient(45deg, rgba(10, 123, 189, .055) 50%, transparent 50%), linear-gradient(-45deg, rgba(0, 102, 146, .04) 50%, transparent 50%), linear-gradient(135deg, rgba(10, 123, 189, .03) 50%, transparent 50%); background-size: 240px 240px, 360px 360px, 300px 300px; }
.px-voices .eyebrow { color: var(--sky-shade); }
.px-voices h2 { color: var(--navy); }
.px-voices-main { position: relative; isolation: isolate; padding: clamp(2rem, 5vw, 3.5rem) 0 0 clamp(1.5rem, 6vw, 5.5rem); }
.px-voices .px-voices-mark { position: absolute; left: 0; top: 0; z-index: -1; display: block; width: clamp(6.5rem, 4rem + 9vw, 12rem); height: auto; margin: 0; fill: var(--sky-deep); opacity: .18; transform: rotate(180deg); }
.px-voices-main blockquote p { color: var(--navy); font-size: clamp(1.8rem, 1.1rem + 2.8vw, 3.3rem); }
.px-voices-main blockquote p.is-lit-on .w { color: rgba(10, 28, 46, .26); }
.px-voices-main blockquote p.is-lit-on .w.on { color: var(--navy); }
.px-voices-main figcaption strong { color: var(--navy); }
.px-voices-main figcaption span { border-color: var(--navy); color: var(--navy); }
.px-voices-cards li { background: #fff; box-shadow: 0 1rem 2rem -1.6rem rgba(6, 18, 30, .35); }
.px-voices-cards blockquote p { color: var(--body-ink); }
.px-voices-cards .who { color: var(--muted); }
.px-voices-cards .who strong { color: var(--navy); }
@media (prefers-reduced-motion: reduce) { .px-voices-main blockquote p.is-lit-on .w { color: var(--navy); } }
@media (max-width: 760px) { .px-voices-main { padding: 2.2rem 0 0 1rem; } .px-voices .px-voices-mark { width: 6rem; } }

/* « Parlons de votre projet » (accueil, sa demande du 2026-10-22) : titre et texte nettement plus grands */
.px-plan-cta .eyebrow { font-size: .86rem; }
.px-plan-cta h2 { font-size: clamp(2.7rem, 1.4rem + 3.8vw, 5rem); line-height: 1.02; letter-spacing: -.025em; }
.px-plan-cta .px-intro { max-width: 32rem; margin-top: 1.4rem; font-size: clamp(1.18rem, 1rem + .55vw, 1.45rem); line-height: 1.55; }
.px-plan-cta .actions { margin-top: 2rem; }
.px-imap-card .is-portrait img { object-position: center 10%; } /* portrait d'une personne : la tête reste entière (sa remarque du 2026-10-22) */

/* « Parlons de votre projet », version 2 (2026-10-22) : deux moitiés pleine largeur ; à gauche, le très grand titre sur
   marine quadrillé ; à droite, le plan sur papier quadrillé, le bouton posé dans le vestiaire du plan */
.px-plan-cta { padding: 0; background: none; }
.px-plan-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.px-plan-left { display: flex; align-items: center; padding: clamp(3.5rem, 7vw, 7rem) clamp(1.5rem, 5vw, 5.5rem); background-color: var(--navy); background-image: linear-gradient(rgba(143, 201, 232, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 201, 232, .07) 1px, transparent 1px); background-size: 28px 28px; color: #fff; }
.px-plan-left-in { max-width: 40rem; margin-left: auto; }
.px-plan-cta .px-plan-left .eyebrow { color: #8fd8f5; font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; }
.px-plan-cta .px-plan-left h2 { margin: 0; color: #fff; font-size: clamp(2.3rem, 1rem + 3.4vw, 4.4rem); font-weight: 300; line-height: .98; letter-spacing: -.035em; }
.px-plan-cta .px-plan-left h2 strong { color: inherit; font-weight: 600; }
.px-plan-cta .px-plan-left .px-intro { max-width: 30rem; margin-top: 1.8rem; color: #cfe0ec; font-size: clamp(1.2rem, 1rem + .6vw, 1.5rem); }
.px-plan-right { display: flex; flex-direction: column; justify-content: center; gap: 1.2rem; padding: clamp(2rem, 4vw, 4rem) clamp(1rem, 4vw, 4rem); background-color: #f2f8fc; background-image: linear-gradient(rgba(10, 123, 189, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 123, 189, .07) 1px, transparent 1px); background-size: 20px 20px; }
.px-plan-right .px-plan-sheet { width: min(100%, 40rem); margin-right: auto; }
.px-plan-stage { position: relative; }
.px-plan-door { position: absolute; left: 6.5%; top: 60%; width: 31%; min-height: 0; padding: .7rem .5rem; justify-content: center; font-size: clamp(.78rem, .55rem + .45vw, 1rem); line-height: 1.15; text-align: center; box-shadow: 0 .8rem 1.6rem -.8rem rgba(191, 30, 46, .6); }
.px-plan-door::after { content: "\00a0\2192"; }
.px-plan-caption { width: min(100%, 40rem); margin: 0 auto 0 0; color: var(--body-ink); font-size: 1rem; text-align: center; }
@media (max-width: 980px) {
  .px-plan-split { grid-template-columns: minmax(0, 1fr); }
  .px-plan-left-in { margin-left: 0; }
  .px-plan-right .px-plan-sheet, .px-plan-caption { margin-inline: auto; }
}
@media (max-width: 560px) { .px-plan-door { position: static; width: 100%; margin-top: .8rem; padding: .9rem 1rem; font-size: 1rem; } }
.px-plan-split .px-plan-block { grid-template-columns: minmax(0, 6.6rem) minmax(0, 1fr); }
.px-plan-split .px-plan-block > div:nth-child(even) dd { border-right: 0; }
.px-plan-split .px-plan-block .px-plan-brand dd { grid-column: 2; }

/* ===== Recrutement de l'accueil, Carrières enrichie, Efficacité énergétique (aperçus approuvés le 2026-10-22) ===== */
/* Bandeau du recrutement : le portrait coupé en diagonale */
.px-recrute { --tile: clamp(6rem, 10vw, 9.5rem); position: relative; overflow: hidden; isolation: isolate; }
.px-recrute { background: #08305a; color: #fff; }
.px-recrute-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 60%; z-index: -2; clip-path: polygon(34% 0, 100% 0, 100% 100%, 0 100%); }
.px-recrute-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 22%; }
.px-recrute-in { position: relative; min-height: clamp(24rem, 34vw, 31rem); display: flex; align-items: center; padding-block: clamp(3rem, 6vw, 4.5rem); }
.px-recrute-text { max-width: min(33rem, 46%); }
.px-recrute .eyebrow { color: #8fd8f5; }
.px-recrute h2 { margin: 0; color: #fff; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1.08; }
.px-recrute h2 strong { color: inherit; }
.px-recrute-rule { display: block; width: 4.5rem; height: 3px; margin: 1.4rem 0; background: var(--cyan); }
.px-recrute-text > p { color: #dbe8f2; }
.px-recrute-act { margin: 1.8rem 0 0; }
.px-recrute .px-recrute-act .button { background: var(--cyan); border-color: var(--cyan); color: #04223d; }
.px-recrute .px-recrute-act .button:hover { background: #fff; border-color: #fff; color: #04223d; }
@media (max-width: 760px) {
  .px-recrute { display: flex; flex-direction: column; }
  .px-recrute-photo { position: relative; width: 100%; height: 19rem; clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%); }
  .px-recrute-text { max-width: none; }
  .px-recrute-in { min-height: 0; padding-block: 2rem 3rem; }
}

/* 14. La page Efficacité énergétique */
.px-en-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.px-en-photo { margin: 0; }
.px-en-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.px-en-offer h2 { margin: 0; }
.px-en-list { list-style: none; margin: 2rem 0 0; padding: 0; }
.px-en-list li { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 1rem; padding: 1.2rem 0; border-top: 1px solid var(--line); }
.px-en-list .n { font-family: var(--font-heading); font-size: 1.7rem; font-weight: 300; line-height: 1; color: var(--sky-deep); }
.px-en-list h3 { margin: 0 0 .3rem; font-size: 1.15rem; }
.px-en-list p { margin: 0; color: var(--body-ink); }
.px-en-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.px-en-cards a { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--line); color: var(--navy); text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.px-en-cards a:hover { border-color: var(--sky-deep); box-shadow: 0 1.2rem 2.4rem -1.6rem rgba(6, 18, 30, .4); }
.px-en-cards img, .px-en-badge { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.px-en-badge { display: grid; place-items: end start; box-sizing: border-box; padding: 1.2rem; background: linear-gradient(135deg, var(--primary), var(--sky-deep)); color: #fff; font-family: var(--font-heading); font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem); font-weight: 600; line-height: 1.15; }
.px-en-cards strong { display: block; padding: 1.1rem 1.2rem .4rem; font-family: var(--font-heading); font-size: 1.12rem; line-height: 1.25; }
.px-en-cards strong + span { display: block; padding: 0 1.2rem 1.3rem; color: var(--body-ink); font-size: .95rem; }
.px-en-gt-in { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding: clamp(1.5rem, 3vw, 2.4rem); border: 1px solid var(--line); border-top: 4px solid #3aa655; }
.px-en-gt-in img { width: 100%; height: auto; }
.px-en-gt-in h2 { margin: 0 0 .8rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); }
.px-en-gt-in p { margin: 0; color: var(--body-ink); }
@media (max-width: 860px) { .px-en-grid, .px-en-cards { grid-template-columns: minmax(0, 1fr); } .px-en-photo img { aspect-ratio: 16 / 10; } }
@media (max-width: 560px) { .px-en-gt-in { grid-template-columns: minmax(0, 1fr); } .px-en-gt-in img { max-width: 9rem; } }

/* 13 bis. Bandeau du recrutement, version 2 : un motif scientifique le long de la diagonale (molécules ou P&ID) */
.px-recrute-v2 .px-motif { position: absolute; top: 0; bottom: 0; left: 41%; width: clamp(9rem, 17vw, 15rem); height: 100%; z-index: -1; pointer-events: none; fill: none; stroke: rgba(143, 216, 245, .55); stroke-width: 1.6; }
.px-motif-mol .rg circle { stroke: rgba(143, 216, 245, .35); }
.px-motif-mol .at { fill: var(--cyan); stroke: none; }
@media (max-width: 760px) { .px-recrute-v2 .px-motif { display: none; } }

/* 14 bis. Page Efficacité énergétique : GreenTech et GreeNRG, aux verts de GreenTech, avec le bandeau défilant de
   l'ancien site GreeNRG (arrêté avec « réduire les animations ») */
.px-en-gt2 { --gt-1: #276741; --gt-2: #9ac355; background: #f2f8ee; padding-bottom: clamp(3rem, 6vw, 5rem); }
.px-en-gt2-head { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.px-en-gt2-head img { width: 100%; height: auto; }
.px-en-gt2 .eyebrow { color: var(--gt-1); }
.px-en-gt2 h2 { margin: 0; } .px-en-gt2 h2 strong { color: var(--gt-1); }
.px-en-tick { margin: clamp(2rem, 4vw, 3rem) 0; display: flex; overflow: hidden; background: var(--gt-1); color: #fff; }
.px-en-tick ul { flex: none; display: flex; list-style: none; margin: 0; padding: 0; animation: px-tick 38s linear infinite; }
.px-en-tick li { padding: 1rem 0; font-family: var(--font-heading); font-size: clamp(1.05rem, .9rem + .5vw, 1.35rem); font-weight: 500; white-space: nowrap; }
.px-en-tick li::after { content: "〰"; margin: 0 1.3rem; color: var(--gt-2); }
@keyframes px-tick { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .px-en-tick ul { animation: none; flex-wrap: wrap; } .px-en-tick ul[aria-hidden] { display: none; } .px-en-tick { padding-inline: 1rem; } }
.px-en-tech { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.px-en-tech li { padding: 1.4rem 1.4rem 1.5rem; background: #fff; border-top: 4px solid var(--gt-2); }
.px-en-tech .n { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 300; color: var(--gt-1); }
.px-en-tech h3 { margin: .4rem 0 .4rem; font-size: 1.15rem; }
.px-en-tech p { margin: 0; color: var(--body-ink); font-size: .95rem; }
@media (max-width: 860px) { .px-en-tech { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 560px) { .px-en-tech { grid-template-columns: minmax(0, 1fr); } .px-en-gt2-head { grid-template-columns: minmax(0, 1fr); } .px-en-gt2-head img { max-width: 9rem; } }

/* 16. Carrières enrichie : bandeau photo + carte blanche, avis de l'équipe, « Mieux nous connaître » */
.px-adl { position: relative; display: flex; align-items: center; min-height: clamp(28rem, 42vw, 38rem); overflow: hidden; background: #dfe9f0; }
.px-adl-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; }
.px-adl-in { position: relative; width: 100%; padding-block: clamp(2.5rem, 5vw, 4rem); }
.px-adl-card { width: min(33rem, 100%); padding: clamp(1.6rem, 3vw, 2.6rem); background: #fff; box-shadow: 0 2rem 4rem -2rem rgba(6, 18, 30, .45); border-top: 5px solid; border-image: linear-gradient(90deg, var(--cyan) 0 33.3%, var(--red) 33.3% 66.6%, var(--primary) 66.6%) 1; }
.px-adl h2 { margin: 0 0 1rem; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.12; }
.px-adl h2 strong { color: var(--sky-deep); }
.px-adl-card > p { color: var(--body-ink); }
.px-adl-act { margin: 1.6rem 0 0; }
.px-adl-act .button { background: var(--sky-deep); border-color: var(--sky-deep); color: #fff; }
.px-adl-act .button::after { content: "\00a0\2192"; }
@media (max-width: 760px) {
  .px-adl { display: block; min-height: 0; background: #fff; }
  .px-adl-photo { position: relative; height: 18rem; object-position: 78% 25%; }
  .px-adl-in { padding-block: 0 2.5rem; margin-top: -2.5rem; }
}
.px-voix { background-color: #f4f7fa; background-image: linear-gradient(45deg, rgba(10, 123, 189, .05) 50%, transparent 50%), linear-gradient(-45deg, rgba(0, 102, 146, .035) 50%, transparent 50%); background-size: 240px 240px, 360px 360px; }
.px-voix-main { position: relative; isolation: isolate; margin: 0 0 clamp(2rem, 4vw, 3rem); padding: clamp(1.8rem, 4vw, 3rem) 0 0 clamp(1.5rem, 5vw, 4.5rem); max-width: 58rem; }
.px-voix-mark { position: absolute; left: 0; top: 0; z-index: -1; width: clamp(6rem, 3.5rem + 8vw, 10.5rem); fill: var(--sky-deep); opacity: .18; transform: rotate(180deg); }
.px-voix-main blockquote { margin: 0; }
.px-voix-title { margin: 0 0 .8rem; font-family: var(--font-heading); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem); font-weight: 600; line-height: 1.15; color: var(--navy); }
.px-voix-main blockquote p:not(.px-voix-title) { margin: 0; font-family: var(--font-heading); font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); font-weight: 300; line-height: 1.5; color: var(--navy); }
.px-voix-main figcaption { margin-top: 1.2rem; font-size: .85rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sky-shade); }
.px-voix-wall { list-style: none; margin: 0; padding: 0; columns: 3 18rem; column-gap: 1.2rem; }
.px-voix-wall li { break-inside: avoid; margin: 0 0 1.2rem; padding: 1.4rem 1.4rem 1.3rem; background: #fff; box-shadow: 0 1rem 2rem -1.6rem rgba(6, 18, 30, .35); border-top: 3px solid var(--cyan); }
.px-voix-wall li.is-dark { background: var(--navy); border-top-color: var(--red); }
.px-voix-q { display: block; width: 2.2rem; margin-bottom: .8rem; fill: var(--cyan); transform: rotate(180deg); }
.px-voix-wall h3 { margin: 0 0 .5rem; font-size: 1.15rem; line-height: 1.25; }
.px-voix-wall li > p { margin: 0; color: var(--body-ink); font-size: .97rem; line-height: 1.6; }
.px-voix-wall .px-voix-role { margin-top: 1rem; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sky-shade); }
.px-voix-wall li.is-dark h3 { color: #fff; }
.px-voix-wall li.is-dark > p { color: #d7e4ee; }
.px-voix-wall li.is-dark .px-voix-role { color: #8fd8f5; }
.px-mieux { background: #f7f8fa; }
.px-mieux h2 { margin: 0; }
.px-mieux-rule { display: block; width: 4.5rem; height: 3px; margin: 1.1rem 0 1.8rem; background: var(--cyan); }
.px-mieux-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.px-mieux-cards a { position: relative; display: flex; align-items: center; min-height: 6.5rem; padding: 1.2rem 1.4rem 1.2rem 6rem; background: #fff; color: var(--navy); text-decoration: none; overflow: hidden; transition: box-shadow .2s; }
.px-mieux-cards a::after { content: "\2192"; margin-left: auto; padding-left: 1rem; font-size: 1.3rem; color: var(--navy); transition: transform .2s; }
.px-mieux-cards .tri { position: absolute; left: 0; top: 0; width: 4.5rem; height: 4.5rem; background: linear-gradient(135deg, var(--navy) 50%, #dbe5ee 50%); }
.px-mieux-cards .tri::after { content: ""; position: absolute; left: 0; top: 100%; width: 4.5rem; height: 2rem; background: linear-gradient(45deg, #eef3f7 50%, transparent 50%); }
.px-mieux-cards strong { font-family: var(--font-heading); font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); }
.px-mieux-cards a:hover { box-shadow: 0 1rem 2rem -1.4rem rgba(6, 18, 30, .4); }
.px-mieux-cards a:hover::after { transform: translateX(4px); }
@media (max-width: 860px) { .px-mieux-cards { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .px-mieux-cards a, .px-mieux-cards a::after { transition: none; } }

/* 16 bis. Carrières v2 : mention de traduction des avis ; « Mieux nous connaître » en dossiers PBE (onglets P·B·E) */
.px-voix-tr, .px-voix-role span { font-weight: 600; letter-spacing: .04em; text-transform: none; }
.px-voix-main figcaption .px-voix-tr { margin-left: .8rem; }
.px-mieux { background-color: #f2f8fc; background-image: linear-gradient(rgba(10, 123, 189, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 123, 189, .06) 1px, transparent 1px); background-size: 20px 20px; }
.px-dossiers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
.px-dossiers li { --tab: var(--cyan); padding-top: 2.1rem; }
.px-dossiers li.is-b { --tab: var(--red); } .px-dossiers li.is-e { --tab: var(--primary); }
.px-dossiers a { position: relative; display: block; height: 100%; padding: 1.6rem 1.6rem 1.4rem; background: #fff; color: var(--navy); text-decoration: none; border-top: 4px solid var(--tab); box-shadow: 0 1.2rem 2.4rem -1.8rem rgba(6, 18, 30, .45); overflow: visible; transition: transform .3s var(--ease), box-shadow .3s; }
.px-dos-tab { position: absolute; left: -0px; bottom: 100%; padding: .45rem .9rem .35rem; background: var(--tab); color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .12em; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 0 100%); padding-right: 1.6rem; }
.px-dos-body { position: relative; z-index: 1; display: grid; gap: .2rem; }
.px-dos-n { font-family: var(--font-heading); font-size: clamp(2.6rem, 1.8rem + 2.4vw, 3.8rem); font-weight: 600; line-height: 1; color: var(--tab); }
.px-dos-l { color: var(--body-ink); font-size: .95rem; }
.px-dossiers strong { margin-top: 1rem; font-family: var(--font-heading); font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem); }
.px-dossiers strong::after { content: "\00a0\2192"; color: var(--tab); transition: margin .25s var(--ease); }
.px-dossiers img { display: block; width: calc(100% + 3.2rem); max-width: none; height: 0; margin: 0 -1.6rem -1.4rem; object-fit: cover; opacity: 0; transition: height .45s var(--ease), opacity .3s, margin .45s var(--ease); }
.px-dossiers a:hover, .px-dossiers a:focus-visible { transform: translateY(-.35rem); box-shadow: 0 1.8rem 3rem -1.8rem rgba(6, 18, 30, .55); }
.px-dossiers a:hover img, .px-dossiers a:focus-visible img { height: 9rem; margin-top: 1.2rem; opacity: 1; }
@media (hover: none) { .px-dossiers img { height: 8rem; margin-top: 1.2rem; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .px-dossiers a, .px-dossiers img { transition: none; } }
@media (max-width: 860px) { .px-dossiers { grid-template-columns: minmax(0, 1fr); } }

/* 13 ter. Bandeau du recrutement, version claire (sa demande du 2026-10-22 : la moitié gauche en clair aussi) */
.px-recrute-v2.is-light { background: #eef6fb; color: var(--navy); }
.px-recrute-v2.is-light .eyebrow { color: var(--sky-shade); }
.px-recrute-v2.is-light h2 { color: var(--navy); }
.px-recrute-v2.is-light h2 strong { color: var(--sky-deep); }
.px-recrute-v2.is-light .px-recrute-rule { background: var(--red); }
.px-recrute-v2.is-light .px-recrute-text > p { color: var(--body-ink); }
.px-recrute-v2.is-light .px-recrute-act .button { background: var(--sky-deep); border-color: var(--sky-deep); color: #fff; }
.px-recrute-v2.is-light .px-recrute-act .button:hover { background: var(--primary); border-color: var(--primary); }
.px-recrute-v2.is-light .px-motif { stroke: rgba(10, 123, 189, .42); }
.px-recrute-v2.is-light .px-motif-mol .rg circle { stroke: rgba(10, 123, 189, .26); }
.px-recrute-v2.is-light .px-motif-mol .at { fill: var(--sky-deep); }

/* 16 ter. Lecteur d'avis : thèmes comptés, onglets AVIS-xx aux couleurs P·B·E, l'avis choisi en grand */
.px-lec-themes { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1.6rem; }
.px-lec-themes > span { margin-right: .4rem; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sky-shade); }
.px-lec-themes button { min-height: 2.75rem; padding: .45rem .9rem; border: 1px solid #b9cfdf; background: #fff; color: var(--navy); font: inherit; font-weight: 600; cursor: pointer; }
.px-lec-themes button b { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; margin-left: .3rem; background: var(--sky-deep); color: #fff; font-size: .82rem; }
.px-lec-themes button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.px-lec-themes button[aria-pressed="true"] b { background: var(--cyan); color: var(--navy); }
.px-lec-grid { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: clamp(1rem, 2.5vw, 2rem); align-items: start; }
.px-lec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; max-height: 38rem; overflow-y: auto; padding-right: .3rem; }
.px-lec-list > div { --tab: var(--cyan); transition: opacity .25s; }
.px-lec-list > div.is-b { --tab: var(--red); } .px-lec-list > div.is-e { --tab: var(--primary); }
.px-lec-list > div.is-dim { display: none; }
.px-lec-list button { display: grid; width: 100%; gap: .15rem; padding: .7rem .9rem .75rem 1rem; border: 0; border-left: 5px solid var(--tab); background: #fff; color: var(--navy); font: inherit; text-align: left; cursor: pointer; box-shadow: 0 .6rem 1.4rem -1.2rem rgba(6, 18, 30, .4); transition: transform .2s, background .2s; }
.px-lec-list .ref { font-size: .72rem; font-weight: 700; letter-spacing: .12em; color: var(--sky-shade); }
.px-lec-list strong { font-family: var(--font-heading); font-size: 1rem; line-height: 1.25; }
.px-lec-list .role { font-size: .85rem; color: var(--body-ink); }
.px-lec-list button[aria-selected="true"] { background: var(--navy); color: #fff; transform: translateX(.4rem); }
.px-lec-list button[aria-selected="true"] .ref, .px-lec-list button[aria-selected="true"] .role { color: #cfe3f1; }
.px-lec-panel { --tab: var(--cyan); position: relative; isolation: isolate; min-height: 24rem; padding: clamp(1.8rem, 4vw, 3rem); background: #fff; border-top: 6px solid var(--tab); box-shadow: 0 2rem 4rem -2.6rem rgba(6, 18, 30, .5); }
.px-lec-panel.is-b { --tab: var(--red); } .px-lec-panel.is-e { --tab: var(--primary); }
.px-lec-panel + .px-lec-panel { margin-top: 1.2rem; }
.px-lec.is-live .px-lec-panel + .px-lec-panel { margin-top: 0; }
.px-lec-mark { position: absolute; right: clamp(1rem, 3vw, 2.4rem); top: clamp(1rem, 3vw, 2rem); z-index: -1; width: clamp(5rem, 3rem + 6vw, 8.5rem); fill: var(--tab); opacity: .14; transform: rotate(180deg); }
.px-lec-panel .ref { margin: 0 0 .8rem; font-size: .78rem; font-weight: 700; letter-spacing: .12em; color: var(--sky-shade); }
.px-lec-panel h3 { margin: 0 0 1rem; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem); line-height: 1.15; max-width: 30ch; }
.px-lec-panel blockquote { margin: 0; }
.px-lec-panel blockquote p { margin: 0; font-family: var(--font-heading); font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); font-weight: 300; line-height: 1.6; color: var(--navy); }
.px-lec-panel .role { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: 1.4rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line); font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sky-shade); }
.px-lec-panel .role span { font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--body-ink); }
.px-lec.is-live .px-lec-panel[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .px-lec-list > div, .px-lec-list button { transition: none; } }
@media (max-width: 860px) {
  .px-lec-grid { grid-template-columns: minmax(0, 1fr); }
  .px-lec-list { display: flex; max-height: none; overflow-x: auto; padding: 0 0 .5rem; scroll-snap-type: x mandatory; }
  .px-lec-list > div { flex: 0 0 14rem; scroll-snap-align: start; }
  .px-lec-list button[aria-selected="true"] { transform: none; }
  .px-lec-panel { min-height: 0; }
}

.px-dossiers li.is-p .px-dos-tab { color: var(--navy); }
.px-dossiers li.is-p .px-dos-n { color: #0089c0; }
/* 14 ter. Page Efficacité énergétique v3 */
.px-en3-head .actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; margin-top: 2rem; }
.px-en3-badge { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .4rem .9rem; border: 1px solid rgba(255, 255, 255, .55); color: #fff; font-weight: 600; text-decoration: none; }
.px-en3-badge::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: #3aa655; box-shadow: 0 0 0 4px rgba(58, 166, 85, .25); }
.px-en3-badge:hover { background: rgba(255, 255, 255, .12); }
.px-en3-why { background: var(--navy); color: #fff; }
.px-en3-why-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.px-en3-why .eyebrow { color: #8fd8f5; }
.px-en3-why h2 { margin: 0; color: #fff; font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem); line-height: 1.05; }
.px-en3-why h2 strong { color: inherit; }
.px-en3-why-list { list-style: none; margin: 0; padding: 0; counter-reset: w; }
.px-en3-why-list li { counter-increment: w; position: relative; padding: 1.1rem 0 1.1rem 3.6rem; border-top: 1px solid rgba(255, 255, 255, .18); color: #cfe0ec; }
.px-en3-why-list li::before { content: "0" counter(w); position: absolute; left: 0; top: 1rem; font-family: var(--font-heading); font-size: 1.6rem; font-weight: 300; color: var(--cyan); }
.px-en3-why-list b { display: block; margin-bottom: .2rem; color: #fff; font-size: 1.1rem; }
.px-bilan { background-color: #f2f8fc; background-image: linear-gradient(rgba(10, 123, 189, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 123, 189, .06) 1px, transparent 1px); background-size: 20px 20px; }
.px-bilan-bar { display: inline-flex; margin: 0 0 1.4rem; border: 2px solid var(--navy); background: #fff; }
.px-bilan-bar button { min-height: 2.75rem; padding: .5rem 1.2rem; border: 0; background: none; color: var(--navy); font: inherit; font-weight: 700; cursor: pointer; }
.px-bilan-bar button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.px-bilan-fig { margin: 0; padding: clamp(1rem, 3vw, 2rem); background: #fff; border: 1px solid #c9dbe8; box-shadow: 0 1.6rem 3rem -2rem rgba(6, 18, 30, .35); }
.px-bilan-svg { display: block; width: 100%; height: auto; }
.px-bilan-svg .fl { fill: none; stroke-linecap: butt; opacity: .85; transition: stroke-width .9s cubic-bezier(.2, .8, .2, 1), opacity .6s; }
.px-bilan-svg .in-en { stroke: var(--red); } .px-bilan-svg .in-eau { stroke: var(--cyan); } .px-bilan-svg .in-mat { stroke: var(--primary); } .px-bilan-svg .in-ren { stroke: #3aa655; }
.px-bilan-svg .out-prod { stroke: var(--navy); } .px-bilan-svg .out-rej { stroke: #9aa7b3; } .px-bilan-svg .out-chal { stroke: #e07a3f; }
.px-bilan-svg .rec { stroke: #e07a3f; stroke-dasharray: 10 8; stroke-width: 4; }
.px-bilan-svg .us { fill: var(--navy); }
.px-bilan-svg .us-t { fill: #fff; font-family: var(--font-heading); font-size: 17px; font-weight: 600; text-anchor: middle; }
.px-bilan-svg .lb text { fill: var(--navy); font-family: var(--font-body); font-size: 15px; font-weight: 700; }
.px-bilan-svg .lb .r { text-anchor: end; } .px-bilan-svg .lb .m { text-anchor: middle; } .px-bilan-svg .lb .ren { fill: #2d7f43; } .px-bilan-svg .lb .rec-t { fill: #b0531d; }
/* avant : beaucoup de pertes ; après : des pertes réduites, de la chaleur récupérée, du renouvelable */
.is-avant .in-en { stroke-width: 44px; } .is-avant .in-eau { stroke-width: 30px; } .is-avant .in-mat { stroke-width: 30px; } .is-avant .in-ren { stroke-width: 0; opacity: 0; }
.is-avant .out-prod { stroke-width: 34px; } .is-avant .out-rej { stroke-width: 38px; } .is-avant .out-chal { stroke-width: 34px; } .is-avant .rec, .is-avant .rec-t, .is-avant .ren { opacity: 0; }
.is-apres .in-en { stroke-width: 22px; } .is-apres .in-eau { stroke-width: 18px; } .is-apres .in-mat { stroke-width: 24px; } .is-apres .in-ren { stroke-width: 16px; opacity: .85; }
.is-apres .out-prod { stroke-width: 40px; } .is-apres .out-rej { stroke-width: 12px; } .is-apres .out-chal { stroke-width: 8px; } .is-apres .rec, .is-apres .rec-t, .is-apres .ren { opacity: 1; }
.px-bilan-svg .rec, .px-bilan-svg .rec-t, .px-bilan-svg .ren { transition: opacity .6s .3s; }
.px-bilan-fig figcaption { margin-top: .9rem; color: var(--body-ink); font-size: .9rem; }
.px-en3-aid-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.px-en3-aid-list li { padding: 1.5rem 1.5rem 1.6rem; background: #fff; border-left: 5px solid #3aa655; }
.px-en3-aid-list .k { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #2d7f43; }
.px-en3-aid-list strong { display: block; margin: .3rem 0 .5rem; font-family: var(--font-heading); font-size: 1.5rem; color: var(--navy); }
.px-en3-aid-list p { margin: 0; color: var(--body-ink); }
.px-en3-gt { --gt-1: #276741; --gt-2: #9ac355; background: #f2f8ee; padding-bottom: clamp(3rem, 6vw, 5rem); }
.px-en3-gt .eyebrow { color: var(--gt-1); } .px-en3-gt h2 strong { color: var(--gt-1); }
.px-en3-pipe { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; position: relative; }
.px-en3-pipe::before { content: ""; position: absolute; left: 1.4rem; right: 1.4rem; top: 1.4rem; height: 4px; background: repeating-linear-gradient(90deg, var(--gt-2) 0 14px, transparent 14px 22px); animation: px-pipe 1.2s linear infinite; }
@keyframes px-pipe { to { background-position: 22px 0; } }
.px-en3-pipe li { position: relative; }
.px-en3-pipe .n { position: relative; z-index: 1; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--gt-1); color: #fff; font-weight: 700; box-shadow: 0 0 0 6px #f2f8ee; }
.px-en3-pipe strong { display: block; margin: 1rem 0 .3rem; font-family: var(--font-heading); font-size: 1.2rem; color: var(--navy); }
.px-en3-pipe p { margin: 0; color: var(--body-ink); font-size: .95rem; }
.px-en3-ai { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.4rem; align-items: center; margin-top: 2rem; padding: 1.3rem 1.5rem; background: var(--navy); color: #fff; }
.px-en3-ai-k { margin: 0; display: grid; place-items: center; width: 4rem; height: 4rem; border: 2px solid var(--gt-2); font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: var(--gt-2); }
.px-en3-ai ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.px-en3-ai li { color: #cfe0ec; font-size: .95rem; } .px-en3-ai strong { color: #fff; }
.px-en3-gt .px-en-tick { margin: clamp(2rem, 4vw, 3rem) 0; display: flex; overflow: hidden; background: var(--gt-1); color: #fff; }
.px-en3-fam { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; }
.px-en3-fam button { min-height: 2.75rem; padding: .45rem 1rem; border: 1px solid #b7d3a3; background: #fff; color: var(--gt-1); font: inherit; font-weight: 600; cursor: pointer; }
.px-en3-fam button[aria-pressed="true"] { background: var(--gt-1); border-color: var(--gt-1); color: #fff; }
.px-en3-tech { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.px-en3-tech li { position: relative; padding: 1.4rem 1.4rem 1.5rem; background: #fff; border-top: 4px solid var(--gt-2); transition: transform .25s, box-shadow .25s; }
.px-en3-tech li[hidden] { display: none; }
.px-en3-tech li:hover { transform: translateY(-.25rem); box-shadow: 0 1.2rem 2.4rem -1.8rem rgba(6, 18, 30, .4); }
.px-en3-tech .ai { position: absolute; right: 1rem; top: 1rem; padding: .15rem .45rem; border: 1px solid var(--gt-1); font-size: .72rem; font-weight: 700; color: var(--gt-1); }
.px-en3-tech .n { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 300; color: var(--gt-1); }
.px-en3-tech h3 { margin: .3rem 0 .4rem; font-size: 1.15rem; }
.px-en3-tech p { margin: 0; color: var(--body-ink); font-size: .95rem; }
.px-en3-quote { background: #fff; }
.px-en3-quote-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.px-en3-quote figure { margin: 0; padding-left: 1.6rem; border-left: 5px solid #3aa655; }
.px-en3-quote blockquote { margin: 0; }
.px-en3-quote blockquote p { margin: 0; font-family: var(--font-heading); font-size: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); font-weight: 300; line-height: 1.3; color: var(--navy); }
.px-en3-quote figcaption { display: grid; margin-top: 1.2rem; } .px-en3-quote figcaption strong { font-size: 1.1rem; } .px-en3-quote figcaption span { color: var(--body-ink); font-size: .92rem; }
.px-en3-film { position: relative; display: block; color: #fff; text-decoration: none; box-shadow: 0 1.6rem 3rem -2rem rgba(6, 18, 30, .5); }
.px-en3-film img { display: block; width: 100%; height: auto; }
.px-en3-film span { position: absolute; left: 1rem; bottom: 1rem; padding: .5rem .9rem; background: var(--red); font-weight: 700; }
.px-en3-film span::before { content: "\25B6\00a0"; }
.px-en3-idea { background: var(--navy); color: #fff; }
.px-en3-idea-head { max-width: 46rem; margin-bottom: 2rem; }
.px-en3-idea .eyebrow { color: #8fd8f5; } .px-en3-idea h2 { margin: 0 0 1rem; color: #fff; } .px-en3-idea h2 strong { color: inherit; } .px-en3-idea-head p { color: #cfe0ec; }
.px-en3-roles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.px-en3-roles a { display: grid; gap: .3rem; height: 100%; padding: 1.4rem 1.5rem; border: 1px solid rgba(255, 255, 255, .3); color: #fff; text-decoration: none; transition: background .2s, border-color .2s; }
.px-en3-roles strong { font-family: var(--font-heading); font-size: 1.5rem; }
.px-en3-roles strong::after { content: "\00a0\2192"; color: var(--cyan); }
.px-en3-roles span { color: #cfe0ec; }
.px-en3-roles a:hover, .px-en3-roles a:focus-visible { background: rgba(255, 255, 255, .08); border-color: var(--cyan); }
@media (prefers-reduced-motion: reduce) { .px-en3-pipe::before { animation: none; } .px-bilan-svg .fl, .px-en3-tech li { transition: none; } }
@media (max-width: 980px) { .px-en3-why-in, .px-en3-quote-in { grid-template-columns: minmax(0, 1fr); } .px-en3-pipe, .px-en3-tech, .px-en3-aid-list, .px-en3-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .px-en3-ai ul { grid-template-columns: minmax(0, 1fr); } .px-en3-pipe::before { display: none; } }
@media (max-width: 560px) { .px-en3-pipe, .px-en3-tech, .px-en3-aid-list, .px-en3-roles { grid-template-columns: minmax(0, 1fr); } .px-en3-ai { grid-template-columns: minmax(0, 1fr); } }
.px-bilan-legend { display: none; }
@media (max-width: 560px) {
  .px-bilan-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem 1rem; list-style: none; margin: 1rem 0 0; padding: 0; font-size: .9rem; color: var(--navy); }
  .px-bilan-legend li::before { content: ""; display: inline-block; width: 1.4rem; height: .6rem; margin-right: .5rem; vertical-align: middle; background: var(--c); }
  .lg-ren { --c: #3aa655; } .lg-en { --c: var(--red); } .lg-eau { --c: var(--cyan); } .lg-mat { --c: var(--primary); } .lg-prod { --c: var(--navy); } .lg-rej { --c: #9aa7b3; } .lg-chal { --c: #e07a3f; }
}

/* 14 quater. Énergie v4 : engagements en boucle fermée, laboratoires de R-D, OTE-CBRN, quatre parties prenantes */
.px-en4-pledge { background: #fff; }
.px-en4-pledge-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.px-ring { width: 100%; max-width: 26rem; height: auto; margin-inline: auto; }
.px-ring .loop { fill: none; stroke: #9ac355; stroke-width: 3; stroke-dasharray: 6 6; }
.px-ring .arr { fill: #276741; }
.px-ring .nd circle { fill: #fff; stroke: #276741; stroke-width: 2.5; transition: fill .2s; }
.px-ring .nd text { fill: #276741; font-family: var(--font-heading); font-size: 16px; font-weight: 700; text-anchor: middle; }
.px-ring .nd.is-on circle { fill: #276741; } .px-ring .nd.is-on text { fill: #fff; }
.px-ring .c1 { fill: var(--navy); font-family: var(--font-heading); font-size: 24px; font-weight: 600; text-anchor: middle; }
.px-ring .c2 { fill: #276741; font-family: var(--font-body); font-size: 11px; font-weight: 700; text-anchor: middle; letter-spacing: .04em; }
.px-en4-pl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem 1.6rem; }
.px-en4-pl li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: .7rem; padding: .9rem .6rem; border-top: 1px solid var(--line); cursor: default; transition: background .2s; }
.px-en4-pl li.is-on { background: #f2f8ee; }
.px-en4-pl .n { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 2px solid #276741; color: #276741; font-weight: 700; }
.px-en4-pl h3 { margin: .2rem 0 .3rem; font-size: 1.05rem; }
.px-en4-pl p { margin: 0; color: var(--body-ink); font-size: .93rem; }
.px-en4-motto { margin: 2rem 0 0; padding-left: 1.2rem; border-left: 4px solid #9ac355; font-family: var(--font-heading); font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); font-weight: 300; color: var(--navy); }
.px-en4-labs { margin-top: 2rem; padding: clamp(1.4rem, 3vw, 2.2rem); background: #fff; border-top: 4px solid var(--gt-1, #276741); }
.px-en4-labs h3 { margin: 0 0 .4rem; font-size: clamp(1.3rem, 1.1rem + .6vw, 1.7rem); }
.px-en4-labs > p { margin: 0 0 1.2rem; color: var(--body-ink); }
.px-en4-labs ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.4rem; }
.px-en4-labs li { display: grid; gap: .25rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.px-en4-labs li strong { color: var(--gt-1, #276741); }
.px-en4-labs li span { color: var(--body-ink); font-size: .93rem; }
.px-en4-com { margin: 1.4rem 0 0; padding: 1rem 1.2rem; background: #f2f8ee; color: var(--navy); }
.px-en4-ote { background: var(--navy); color: #fff; }
.px-en4-ote-head { max-width: 50rem; }
.px-en4-ote .eyebrow { color: #9ac355; } .px-en4-ote h2 { margin: 0 0 1rem; color: #fff; } .px-en4-ote h2 strong { color: inherit; } .px-en4-ote-head p { color: #cfe0ec; }
.px-en4-letters { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .6rem; }
.px-en4-letters li { display: grid; gap: .4rem; justify-items: center; padding: 1.1rem .4rem 1rem; border: 2px solid rgba(255, 255, 255, .25); text-align: center; }
.px-en4-letters li.is-ote { border-color: #9ac355; } .px-en4-letters li.is-cbrn { border-color: var(--cyan); }
.px-en4-letters .l { font-family: var(--font-heading); font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem); font-weight: 600; line-height: 1; }
.px-en4-letters li.is-ote .l { color: #9ac355; } .px-en4-letters li.is-cbrn .l { color: var(--cyan); }
.px-en4-letters .t { font-size: .85rem; color: #e1ecf4; }
.px-en4-groups { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: 1rem 0 0; font-size: .9rem; color: #cfe0ec; }
.px-en4-groups span::before { content: ""; display: inline-block; width: .7rem; height: .7rem; margin-right: .5rem; vertical-align: middle; }
.px-en4-groups .is-ote::before { background: #9ac355; } .px-en4-groups .is-cbrn::before { background: var(--cyan); }
.px-en4-out-t { margin: 2.4rem 0 1rem; color: #fff; font-size: 1.2rem; }
.px-en4-out { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.px-en4-out li { padding: 1.2rem 1.2rem 1.3rem; background: rgba(255, 255, 255, .06); border-top: 3px solid #9ac355; }
.px-en4-out strong { font-family: var(--font-heading); font-size: 1.3rem; color: #fff; }
.px-en4-out p { margin: .4rem 0 0; color: #cfe0ec; font-size: .93rem; }
.px-en3-roles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .px-en4-pledge-in { grid-template-columns: minmax(0, 1fr); } .px-en4-labs ul, .px-en4-out, .px-en3-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .px-en4-letters { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .px-en4-pl, .px-en4-labs ul, .px-en4-out, .px-en3-roles { grid-template-columns: minmax(0, 1fr); } .px-en4-letters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .px-ring .nd circle, .px-en4-pl li { transition: none; } }
/* ===== Ses choix du 2026-10-22 : bande de conformité à sceaux, dernière tuile des logos, badge d'accès (Carrières) ===== */
/* Bande de conformité : un vrai titre, chaque exigence et ce qu'elle couvre, un sceau de validation qui se pose */
.px-regs { position: relative; background: #f3f7fa; border-block: 1px solid var(--line); }
.px-regs .wrap { padding-block: clamp(2.4rem, 4.5vw, 3.4rem); }
.px-seal-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.px-regs h2 { margin: 0 0 clamp(1.3rem, 3vw, 2rem); font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); }
.px-regs ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.px-regs li { display: grid; align-content: start; gap: .35rem; padding: 1.2rem .8rem .2rem; border-left: 1px solid var(--line); }
.px-regs li:first-child { padding-left: 0; border-left: 0; }
.px-regs li strong { font-family: var(--font-heading); font-size: clamp(.98rem, .9rem + .3vw, 1.15rem); font-weight: 600; line-height: 1.2; color: var(--navy); }
.px-regs li > span { font-size: .8rem; line-height: 1.3; color: var(--muted); }
.px-seal { width: 3.5rem; height: 3.5rem; margin-bottom: .35rem; overflow: visible; transform: rotate(-10deg); transition: opacity .25s, transform .45s cubic-bezier(.3, 1.5, .5, 1); }
.px-seal circle { fill: none; stroke: var(--logo-blue); }
.px-seal .o { stroke-width: 1.6; }
.px-seal .i { fill: rgba(0, 137, 192, .08); stroke-width: 1; stroke-dasharray: 2 2.2; }
.px-seal text { fill: var(--logo-blue); font-family: var(--font-body); font-size: 5.3px; font-weight: 700; }
.px-seal .ck { fill: none; stroke: var(--logo-blue); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 26; stroke-dashoffset: 0; transition: stroke-dashoffset .35s var(--ease) .35s; }
.px-regs.is-armed:not(.is-play) .px-seal { opacity: 0; transform: rotate(-32deg) scale(1.6); }
.px-regs.is-armed:not(.is-play) .px-seal .ck { stroke-dashoffset: 26; }
.px-regs li:nth-child(2) .px-seal { transition-delay: 0.12s; } .px-regs li:nth-child(2) .ck { transition-delay: 0.47s; }
.px-regs li:nth-child(3) .px-seal { transition-delay: 0.24s; } .px-regs li:nth-child(3) .ck { transition-delay: 0.59s; }
.px-regs li:nth-child(4) .px-seal { transition-delay: 0.36s; } .px-regs li:nth-child(4) .ck { transition-delay: 0.71s; }
.px-regs li:nth-child(5) .px-seal { transition-delay: 0.48s; } .px-regs li:nth-child(5) .ck { transition-delay: 0.83s; }
.px-regs li:nth-child(6) .px-seal { transition-delay: 0.60s; } .px-regs li:nth-child(6) .ck { transition-delay: 0.95s; }
.px-regs li:nth-child(7) .px-seal { transition-delay: 0.72s; } .px-regs li:nth-child(7) .ck { transition-delay: 1.07s; }
.px-regs li:nth-child(8) .px-seal { transition-delay: 0.84s; } .px-regs li:nth-child(8) .ck { transition-delay: 1.19s; }
.px-regs li:nth-child(9) .px-seal { transition-delay: 0.96s; } .px-regs li:nth-child(9) .ck { transition-delay: 1.31s; }
@media (max-width: 980px) {
  .px-regs ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .px-regs li, .px-regs li:first-child { padding: 1rem .8rem 1rem 0; border-left: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px) { .px-regs ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* téléphone : deux colonnes, « EMA (annexe 1) » tient sans écraser la case */
/* Chaque exigence sur une seule ligne, avec plus d'espace (propriétaire, 2026-10-25) : EMA-Annexe 1, « notre cheval de
   bataille », en grande case à gauche ; les huit autres en grille 4 × 2, le sceau à côté du nom. */
.px-regs li strong { white-space: nowrap; }
.px-regs li > span:empty { display: none; } /* EMA-Annexe 1 seul, sans « Europe » (2026-10-25) */
@media (min-width: 981px) {
  .px-regs ul { grid-template-columns: minmax(0, 1.25fr) repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
  .px-regs li, .px-regs li:first-child { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .9rem; row-gap: .15rem; padding: 1.15rem 1.2rem; border-left: 0; background: #f3f7fa; }
  .px-regs li .px-seal { grid-row: span 2; width: 2.9rem; height: 2.9rem; margin: 0; }
  .px-regs li strong { align-self: end; }
  .px-regs li > span { align-self: start; }
  .px-regs li:first-child { grid-row: span 2; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: start; row-gap: .45rem; padding: 1.6rem 1.8rem; background: #fff; box-shadow: inset 0 4px 0 var(--red); }
  .px-regs li:first-child .px-seal { grid-row: auto; width: 4.6rem; height: 4.6rem; margin-bottom: .3rem; }
  .px-regs li:first-child strong { font-size: clamp(1.45rem, 1rem + 1vw, 1.95rem); align-self: auto; }
  .px-regs li:first-child > span { font-size: .95rem; align-self: auto; }
}
@media (min-width: 981px) and (max-width: 1239px) { .px-regs li:not(:first-child) { grid-template-columns: minmax(0, 1fr); align-content: start; align-items: start; } .px-regs li:not(:first-child) .px-seal { grid-row: auto; margin-bottom: .35rem; } .px-regs li:not(:first-child) :is(strong, span) { align-self: auto; } }
@media (prefers-reduced-motion: reduce) { .px-seal, .px-seal .ck { transition: none; } }
/* Dernière tuile des logos : une case libre au pointillé. Avec 48 logos, chaque rangée est pleine à 8, 6, 4 et 3
   colonnes, la tuile prend donc une rangée entière (à revoir si le nombre de logos change). */
.px-logos li.px-logos-you { grid-column: 1 / -1; height: auto; min-height: 7rem; padding: 0; place-items: stretch; background: #fff; }
.px-logos-you a { display: flex; align-items: center; justify-content: center; gap: .6rem 1.2rem; margin: .8rem; padding: .8rem; box-sizing: border-box; border: 2px dashed rgba(10, 123, 189, .5); color: var(--navy); text-align: center; text-decoration: none; transition: background .25s, border-color .25s; }
.px-you-plus { position: relative; flex: none; width: 2.8rem; height: 2.8rem; border: 2px solid var(--sky-deep); border-radius: 50%; transition: transform .4s var(--ease), background .25s; }
.px-you-plus::before, .px-you-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.1rem; height: 2px; background: var(--sky-deep); transform: translate(-50%, -50%); }
.px-you-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.px-logos-you strong { font-family: var(--font-heading); font-size: clamp(1.25rem, 1rem + .9vw, 1.8rem); font-weight: 500; }
.px-logos-you a:hover, .px-logos-you a:focus-visible { background: #eef6fb; border-style: solid; border-color: var(--sky-deep); }
.px-logos-you a:hover .px-you-plus, .px-logos-you a:focus-visible .px-you-plus { transform: rotate(90deg); background: var(--sky-deep); }
.px-logos-you a:hover .px-you-plus::before, .px-logos-you a:hover .px-you-plus::after, .px-logos-you a:focus-visible .px-you-plus::before, .px-logos-you a:focus-visible .px-you-plus::after { background: #fff; }
@media (max-width: 760px) { .px-logos li.px-logos-you { min-height: 5.6rem; } .px-logos-you a { margin: .5rem; padding: .5rem; } .px-you-plus { width: 2.2rem; height: 2.2rem; } .px-you-plus::before, .px-you-plus::after { width: .9rem; } .px-logos-you strong { font-size: 1.15rem; } }
/* Badge d'accès (Carrières) : suspendu à son cordon ; il se balance une fois en arrivant, se redresse au survol */
.px-badge-sec { position: relative; overflow: hidden; background: #eef6fb; }
.px-badge-sec::before { content: "GMP"; position: absolute; right: -1%; bottom: -14%; font-family: var(--font-heading); font-size: clamp(10rem, 24vw, 22rem); font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 2px rgba(10, 123, 189, .13); pointer-events: none; }
.px-badge-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: clamp(2rem, 5vw, 5rem); align-items: start; padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.px-badge-text { align-self: center; max-width: 33rem; padding-top: clamp(3rem, 6vw, 4.5rem); }
.px-badge-text h2 { margin: 0; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1.08; }
.px-badge-rule { display: block; width: 4.5rem; height: 3px; margin: 1.4rem 0; background: var(--red); }
.px-badge-text > p:not(.eyebrow) { color: var(--body-ink); }
.px-badge-act { margin: 1.8rem 0 0; }
.px-badge-hang { display: flex; flex-direction: column; align-items: center; }
.px-badge-strap { width: 2.2rem; height: clamp(4rem, 8vw, 6.5rem); background: var(--navy); border-inline: 2px solid var(--cyan); }
.px-badge-clip { width: 3.4rem; height: 1.2rem; margin-top: -2px; border-radius: 4px; background: linear-gradient(#d3dbe2, #8f9ca8); }
.px-badge { position: relative; margin: -.35rem 0 0; width: clamp(15rem, 22vw, 18.5rem); background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 2.4rem 4rem -1.6rem rgba(6, 18, 30, .45), 0 0 0 1px rgba(10, 28, 46, .06); transform: rotate(-4deg); transform-origin: 50% -2.5rem; transition: transform .6s var(--ease); }
.px-badge-sec.is-play .px-badge-card { animation: px-swing 2.2s cubic-bezier(.3, .7, .3, 1) backwards; }
@keyframes px-swing { 0% { transform: rotate(10deg); } 35% { transform: rotate(-9deg); } 60% { transform: rotate(-1deg); } 80% { transform: rotate(-5.5deg); } 100% { transform: rotate(-4deg); } }

.px-badge-top { position: relative; display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: 1.5rem 1rem .8rem; background: var(--navy); color: #fff; }
.px-badge-top::before { content: ""; position: absolute; top: .5rem; left: 50%; width: 2.6rem; height: .45rem; margin-left: -1.3rem; border-radius: 99px; background: #eef6fb; }
.px-badge-logo { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.px-badge-logo i { font-style: normal; color: var(--cyan); } .px-badge-logo i:nth-child(2) { color: #ff6b77; } .px-badge-logo i:nth-child(3) { color: #fff; }
.px-badge-zone { font-size: .7rem; font-weight: 700; line-height: 1.3; letter-spacing: .12em; text-align: right; text-transform: uppercase; color: #8fd8f5; }
.px-badge-photo { margin: 1rem 1rem 0; aspect-ratio: 1 / 1.05; overflow: hidden; background: #dfe9f1; }
.px-badge-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transform: scale(1.25); transform-origin: 53% 30%; }
.px-badge-id { display: grid; gap: .45rem; margin: .9rem 1rem 0; }
.px-badge-id div { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: .5rem; align-items: baseline; padding-bottom: .4rem; border-bottom: 1px dashed var(--line); }
.px-badge-id dt { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.px-badge-id dd { margin: 0; font-family: var(--font-heading); font-size: .9rem; font-weight: 600; line-height: 1.25; color: var(--navy); }
.px-badge-id div:first-child dd { font-size: 1.4rem; color: var(--logo-blue); }
.px-badge-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: .8rem; margin: .9rem 1rem 0; padding-bottom: 1rem; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.px-badge-code { width: 8rem; height: 1.9rem; background: repeating-linear-gradient(90deg, var(--navy) 0 2px, transparent 2px 4px, var(--navy) 4px 5px, transparent 5px 8px, var(--navy) 8px 11px, transparent 11px 13px); }
.px-badge::after { content: ""; display: block; height: 6px; background: linear-gradient(90deg, var(--cyan) 0 33.3%, var(--red) 33.3% 66.6%, var(--primary) 66.6%); }
@media (max-width: 760px) {
  .px-badge-in { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .px-badge-text { padding-top: 2.6rem; }
  .px-badge-strap { height: 2.6rem; }
  .px-badge-sec::before { bottom: -4%; }
}
@media (prefers-reduced-motion: reduce) { .px-badge-inner { transition: none; } .px-badge-sec.is-play .px-badge-card { animation: none; } }

/* ===== À propos, ses retours du 2026-10-23 ===== */
/* Notre nom : un rideau à la couleur de la lettre monte au survol (ou au toucher), avec le logo de l'entreprise en blanc */
.px-name-list li { position: relative; overflow: hidden; }
.px-name-curtain { position: absolute; inset: 0; display: grid; place-items: center; background: var(--c); transform: translateY(101%); transition: transform .55s cubic-bezier(.7, 0, .2, 1); }
.px-name-curtain img { display: block; width: auto; max-width: 52%; max-height: 62%; object-fit: contain; opacity: 0; transform: translateY(.6rem); transition: opacity .35s .2s, transform .45s .2s var(--ease); }
.px-name-list li:hover .px-name-curtain, .px-name-list li:focus-within .px-name-curtain { transform: none; }
.px-name-list li:hover .px-name-curtain img, .px-name-list li:focus-within .px-name-curtain img { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .px-name-curtain { transform: none; opacity: 0; transition: opacity .2s; } .px-name-list li:hover .px-name-curtain, .px-name-list li:focus-within .px-name-curtain { opacity: 1; } .px-name-curtain img { transition: none; } }
/* La phrase au mot qui change */
.px-swap { display: inline-block; vertical-align: bottom; color: var(--logo-blue); font-weight: 500; }
.px-swap span + span { display: none; }
.px-swap.is-live { position: relative; height: 1.3em; overflow: hidden; transition: width .45s var(--ease); }
.px-swap.is-live span { position: absolute; left: 0; top: 0; display: block; white-space: nowrap; opacity: 0; transform: translateY(100%); transition: transform .45s var(--ease), opacity .45s; }
.px-swap.is-live span.is-on { opacity: 1; transform: none; }
.px-swap.is-live span.is-out { transform: translateY(-100%); }
/* La CPMT */
.px-honors-logo.is-cpmt { height: 3.3rem; }
/* Partenaires : la case « Devenir partenaire » au bout de chaque liste */
.px-indus li.px-indus-you { grid-column: span 2; padding: 0; background: #fff; border-top: 0; box-shadow: none; }
.px-indus-you a, .px-plogos-you a { display: flex; align-items: center; align-content: center; justify-content: center; flex-wrap: wrap; gap: .5rem 1rem; height: 100%; min-height: 7rem; padding: .8rem; box-sizing: border-box; border: 2px dashed rgba(10, 123, 189, .5); color: var(--navy); text-align: center; text-decoration: none; transition: background .25s, border-color .25s; }
.px-indus-you strong, .px-plogos-you strong { font-family: var(--font-heading); font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); font-weight: 500; }
.px-indus-you a > span:last-child { font-weight: 700; color: var(--sky-shade); } .px-indus-you a > span:last-child::after { content: "\00a0\2192"; }
.px-plogos li.px-plogos-you { padding: .5rem; }
.px-plogos-you a { min-height: 0; width: 100%; }
.px-plogos-you strong { font-size: 1.05rem; }
.px-indus-you a:hover, .px-indus-you a:focus-visible, .px-plogos-you a:hover, .px-plogos-you a:focus-visible { background: #eef6fb; border-style: solid; border-color: var(--sky-deep); }
.px-indus-you a:hover .px-you-plus, .px-plogos-you a:hover .px-you-plus, .px-indus-you a:focus-visible .px-you-plus, .px-plogos-you a:focus-visible .px-you-plus { transform: rotate(90deg); background: var(--sky-deep); }
.px-indus-you a:hover .px-you-plus::before, .px-indus-you a:hover .px-you-plus::after, .px-plogos-you a:hover .px-you-plus::before, .px-plogos-you a:hover .px-you-plus::after { background: #fff; }
.px-plogos-you .px-you-plus { width: 2.2rem; height: 2.2rem; } .px-plogos-you .px-you-plus::before, .px-plogos-you .px-you-plus::after { width: .9rem; }
@media (max-width: 560px) { .px-indus li.px-indus-you { grid-column: auto; } }

/* ===== Pages des partenaires industriels (2026-10-23) ===== */
.px-pt-photo.is-partenaire-lunan { object-position: center 30%; } .px-pt-photo.is-partenaire-pioneer-quality-experts { object-position: center 35%; }
.px-pt-head .px-pt-site { color: #fff; }
.px-pt-k { margin: 0 0 1.2rem; font-family: var(--font-body); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sky-shade); }
.px-pt-facts { padding-block: clamp(2.2rem, 4vw, 3rem); border-bottom: 1px solid var(--line); }
.px-pt-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem 1.6rem; margin: 0; }
.px-pt-dl div { --c: var(--cyan); padding-top: .8rem; border-top: 3px solid var(--c); }
.px-pt-dl div:nth-child(3n+2) { --c: var(--red); } .px-pt-dl div:nth-child(3n) { --c: var(--primary); }
.px-pt-dl dt { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.px-pt-dl dd { margin: .3rem 0 0; font-family: var(--font-heading); font-size: 1.08rem; font-weight: 600; line-height: 1.3; color: var(--navy); }
.px-pt-h { margin: 0 0 1.2rem; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); }
.px-pt-two-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.px-pt-makes ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.px-pt-makes li { padding: .55rem .85rem; background: #f3f7fa; border-left: 3px solid var(--sky-deep); font-size: .92rem; font-weight: 600; color: var(--navy); }
.px-pt-gives ol { display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.px-pt-gives li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1rem; padding: 1.1rem 1.2rem; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.px-pt-gives .n { grid-row: span 2; font-family: var(--font-heading); font-size: 1.8rem; font-weight: 300; line-height: 1; color: var(--logo-blue); }
.px-pt-gives h3 { margin: 0 0 .3rem; font-size: 1.1rem; }
.px-pt-gives p { margin: 0; color: var(--body-ink); }
.px-pt-steps h2 { margin: 0 0 clamp(1.6rem, 3vw, 2.4rem); }
.px-pt-steps ol { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.px-pt-steps ol::before { content: ""; position: absolute; left: 1.5rem; right: 1.5rem; top: 1.5rem; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--red), var(--primary)); transform-origin: left; transition: transform 1.2s var(--ease); }
.px-pt-steps.is-armed:not(.is-play) ol::before { transform: scaleX(0); }
.px-pt-steps li { position: relative; }
.px-pt-steps .n { position: relative; display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1rem; border-radius: 50%; background: var(--navy); color: #fff; font-family: var(--font-heading); font-weight: 700; }
.px-pt-steps h3 { margin: 0 0 .4rem; font-size: 1.1rem; }
.px-pt-steps p { margin: 0; color: var(--body-ink); }
.px-pt-film-in { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.px-pt-film h2 { margin: 0 0 1rem; }
.px-pt-film video { display: block; width: 100%; height: auto; background: var(--navy); }
.px-pt-media ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; }
.px-pt-media a { display: grid; gap: .7rem; color: var(--navy); text-decoration: none; }
.px-pt-play { position: relative; display: block; overflow: hidden; }
.px-pt-play img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .5s var(--ease); }
.px-pt-play::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3.4rem; height: 3.4rem; margin: -1.7rem; border-radius: 50%; background: rgba(10, 28, 46, .78) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5z' fill='%23fff'/%3E%3C/svg%3E") center / 1.6rem no-repeat; transition: background-color .3s; }
.px-pt-media a:hover img, .px-pt-media a:focus-visible img { transform: scale(1.04); }
.px-pt-media a:hover .px-pt-play::after, .px-pt-media a:focus-visible .px-pt-play::after { background-color: var(--red); }
.px-pt-media strong { font-size: .95rem; line-height: 1.35; }
.px-pt-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; }
.px-pt-cards a { display: grid; gap: .35rem; height: 100%; padding: 1.2rem 1.2rem 1.3rem; box-sizing: border-box; background: #fff; box-shadow: 0 0 0 1px var(--line); border-top: 3px solid var(--sky-deep); color: var(--navy); text-decoration: none; transition: box-shadow .3s; }
.px-pt-cards a:hover, .px-pt-cards a:focus-visible { box-shadow: 0 0 0 1px var(--line), 0 1rem 2rem -1.2rem rgba(6, 18, 30, .35); }
.px-pt-cards .tag { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.px-pt-cards strong { font-family: var(--font-heading); font-size: 1.1rem; line-height: 1.3; }
.px-pt-cards span:last-child { font-size: .9rem; color: var(--body-ink); }
@media (max-width: 980px) { .px-pt-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .px-pt-two-in, .px-pt-film-in { grid-template-columns: minmax(0, 1fr); } .px-pt-steps ol, .px-pt-media ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .px-pt-steps ol::before { display: none; } }
@media (max-width: 560px) { .px-pt-steps ol, .px-pt-media ul, .px-pt-cards { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .px-pt-steps ol::before { transition: none; } }
/* À propos : chaque carte de partenaire industriel mène à sa page (la carte entière, un seul lien) */
.px-indus li:not(.px-indus-you) { position: relative; display: flex; flex-direction: column; transition: box-shadow .3s; }
.px-indus h4 a { color: inherit; text-decoration: none; }
.px-indus h4 a::after { content: ""; position: absolute; inset: 0; }
.px-indus li:not(.px-indus-you):hover, .px-indus li:not(.px-indus-you):focus-within { box-shadow: 0 0 0 1px var(--line), 0 1rem 2rem -1.2rem rgba(6, 18, 30, .35); }
.px-indus h4 a:focus-visible { outline: none; } .px-indus li:focus-within { outline: 2px solid var(--sky-deep); outline-offset: 2px; }
.px-indus-go { margin-top: auto; padding-top: 1rem; font-size: .9rem; font-weight: 700; color: var(--sky-shade); }
.px-indus-go::after { content: "\00a0\2192"; }

/* ===== Témoignages (2026-10-23) : le logo ou le nom du client toujours au même endroit, au-dessus de la citation ===== */
.px-brand { display: flex; align-items: center; height: 3rem; margin-bottom: 1.1rem; }
.px-brand img { display: block; width: auto; height: auto; max-width: 9.5rem; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.px-brand span { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--navy); }
.px-tr { margin: .9rem 0 0; font-size: .78rem; color: var(--muted); }
.px-orig { margin-top: 0; font-size: .85rem; }
.px-orig summary { display: inline-block; padding: .6rem 0; cursor: pointer; font-weight: 600; color: var(--sky-shade); text-decoration: underline; text-underline-offset: .2em; }
.px-orig summary::-webkit-details-marker { display: none; }
.px-orig p { margin: .6rem 0 0; padding-left: .9rem; border-left: 2px solid var(--line); font-style: italic; color: var(--body-ink); }
/* L'accueil : une voix à la fois, centrée, qui change seule toutes les 7 s (arrêt au survol, au clavier ou au bouton) */
.px-vc-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem 2rem; }
.px-vc-head h2 { margin: 0; }
.px-vc-ctrl { display: flex; gap: .5rem; margin: 0; }
.px-vc-ctrl button { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; padding: 0; border: 1px solid var(--navy); background: #fff; color: var(--navy); font-size: 1.1rem; cursor: pointer; }
.px-vc-ctrl button:hover, .px-vc-ctrl button:focus-visible { background: var(--navy); color: #fff; }
.px-vc-pause span { width: .7rem; height: .8rem; border-inline: 3px solid currentColor; box-sizing: border-box; }
.px-vc-pause[aria-pressed="true"] span { width: 0; height: 0; border: 0; border-left: .6rem solid currentColor; border-top: .4rem solid transparent; border-bottom: .4rem solid transparent; }
.px-vc-mark { display: block; width: clamp(3.2rem, 5vw, 4.4rem); margin: clamp(1.6rem, 3vw, 2.4rem) auto 0; fill: var(--cyan); opacity: .3; transform: rotate(180deg); }
.px-vc-stage { display: grid; gap: 2.4rem; }
.px-vc-slide { display: flex; flex-direction: column; align-items: center; margin: 0; text-align: center; }
.px-vc-slide .px-brand { justify-content: center; margin-top: 1.4rem; }
.px-vc-slide blockquote { max-width: 50rem; margin: 0; }
.px-vc-slide blockquote p { margin: 0; font-family: var(--font-heading); font-size: clamp(1.35rem, 1rem + 1.4vw, 2.1rem); font-weight: 300; line-height: 1.38; color: var(--navy); }
.px-vc-slide figcaption { display: grid; gap: .15rem; margin-top: 1.4rem; }
.px-vc-slide figcaption strong { font-size: 1.05rem; color: var(--navy); }
.px-vc-slide figcaption span { font-size: .9rem; color: var(--body-ink); }
.px-vc-dots { display: none; justify-content: center; gap: .4rem; list-style: none; margin: 1.8rem 0 0; padding: 0; }
.px-vc-dots li { width: 2rem; height: 4px; background: rgba(10, 28, 46, .14); transition: background .3s; }
.px-vc-dots li.is-on:nth-child(3n+1) { background: var(--cyan); } .px-vc-dots li.is-on:nth-child(3n+2) { background: var(--red); } .px-vc-dots li.is-on:nth-child(3n) { background: var(--primary); }
.px-vc.is-live .px-vc-stage { gap: 0; }
.px-vc.is-live .px-vc-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(.8rem); transition: opacity .6s, transform .6s var(--ease), visibility .6s; }
.px-vc.is-live .px-vc-slide.is-on { opacity: 1; visibility: visible; transform: none; }
.px-vc.is-live .px-vc-dots { display: flex; }
@media (prefers-reduced-motion: reduce) { .px-vc.is-live .px-vc-slide { transition: none; transform: none; } }
/* À propos : le mur, au coin replié */
.px-vw-wall { columns: 3 19rem; column-gap: 1.2rem; list-style: none; margin: 0; padding: 0; }
.px-vw-wall li { --c: var(--cyan); position: relative; margin: 0 0 1.2rem; padding: 1.5rem 1.5rem 1.3rem; break-inside: avoid; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--c); clip-path: polygon(0 0, calc(100% - 2.2rem) 0, 100% 2.2rem, 100% 100%, 0 100%); }
.px-vw-wall li:nth-child(3n+2) { --c: var(--red); } .px-vw-wall li:nth-child(3n) { --c: var(--primary); }
.px-vw-wall li::before { content: ""; position: absolute; top: -4px; right: 0; width: 2.2rem; height: 2.2rem; background: linear-gradient(to bottom left, transparent 50%, #d9e5ee 50%); }
.px-vw-wall blockquote { margin: 0; } .px-vw-wall blockquote p { margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--navy); }
.px-vw-who { margin: 1rem 0 0; font-size: .88rem; color: var(--body-ink); } .px-vw-who strong { display: block; color: var(--navy); }
/* Un témoignage sur sa page */
.px-vq-in { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.px-vq-in h2 { margin: 0; }
.px-vq-card { position: relative; margin: 0; padding: clamp(1.6rem, 3vw, 2.2rem); background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--cyan); clip-path: polygon(0 0, calc(100% - 2.4rem) 0, 100% 2.4rem, 100% 100%, 0 100%); }
.px-vq-card::before { content: ""; position: absolute; top: -4px; right: 0; width: 2.4rem; height: 2.4rem; background: linear-gradient(to bottom left, transparent 50%, #d9e5ee 50%); }
.px-vq-card blockquote { margin: 0; } .px-vq-card blockquote p { margin: 0; font-family: var(--font-heading); font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); font-weight: 300; line-height: 1.55; color: var(--navy); }
.px-vq-card figcaption { display: grid; gap: .1rem; margin-top: 1.2rem; } .px-vq-card figcaption strong { color: var(--navy); } .px-vq-card figcaption span { font-size: .9rem; color: var(--body-ink); }
.px-vq-card.is-wide { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
@media (max-width: 860px) { .px-vq-in { grid-template-columns: minmax(0, 1fr); } }

/* ===== Accueil, les experts : la bande qui défile (2026-10-23) ===== */
.px-strip { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab; padding: .4rem 0 1rem; }
.px-strip::-webkit-scrollbar { display: none; }
.px-strip.is-drag { cursor: grabbing; user-select: none; }
.px-strip-track { display: flex; align-items: flex-start; gap: 1.4rem; width: max-content; list-style: none; margin: 0; padding: 0 1.25rem; }
.px-strip-track li { flex: none; width: clamp(11rem, 15vw, 14rem); }
.px-strip-track li:nth-child(4n+2) { margin-top: 3.5rem; } .px-strip-track li:nth-child(4n+3) { margin-top: 1.5rem; } .px-strip-track li:nth-child(4n) { margin-top: 5rem; }
.px-strip-track a { display: block; color: var(--navy); text-decoration: none; }
.px-strip-track img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 15%; -webkit-user-drag: none; transition: transform .5s var(--ease), box-shadow .5s; }
.px-strip-track a:hover img, .px-strip-track a:focus-visible img { transform: translateY(-.35rem); box-shadow: 0 1.2rem 2rem -1.4rem rgba(6, 18, 30, .5); }
.px-strip-track strong { display: block; margin-top: .75rem; font-family: var(--font-heading); }
.px-strip-track span { display: block; font-size: .85rem; line-height: 1.3; color: var(--body-ink); }
.px-strip-pause { margin-top: 1.4rem; padding: .55rem .9rem; border: 1px solid var(--line); background: #fff; color: var(--navy); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.px-strip-pause[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
@media (prefers-reduced-motion: reduce) { .px-strip-track img { transition: none; } }

/* ===== « 300 fois » (Expertises, 2026-10-23) : scène pilotée par le défilement (--p de 0 à 1, posé par le script) ===== */
.px-times { background: #fff; }
.px-times-stick { padding-block: clamp(3.5rem, 7vw, 5rem); }
.px-times h2 { max-width: 22ch; margin: 0; font-size: clamp(2rem, 1.3rem + 3vw, 4rem); font-weight: 300; line-height: 1.1; }
.px-times-num { margin: .4rem 0 0; font-family: var(--font-heading); font-size: clamp(7rem, 4rem + 18vw, 20rem); font-weight: 700; line-height: .85; letter-spacing: -.04em; color: var(--navy); transform-origin: left bottom; }
.px-times-num .x { display: inline-block; margin-left: .04em; font-size: .78em; font-weight: 600; line-height: 1; vertical-align: top; transform: translateY(.06em); color: var(--red); }
.px-times-words { display: flex; flex-wrap: wrap; gap: .6rem 2.4rem; list-style: none; margin: 1.6rem 0 0; padding: 0; font-family: var(--font-heading); font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem); }
.px-times-words a { color: var(--navy); text-decoration: none; }
.px-times-words a:hover, .px-times-words a:focus-visible { text-decoration: underline; text-underline-offset: .2em; }
.px-times-words li::before { content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .45em; background: var(--cyan); }
.px-times-words li:nth-child(2)::before { background: var(--red); } .px-times-words li:nth-child(3)::before { background: var(--primary); } .px-times-words li:nth-child(4)::before { background: var(--navy); }
.px-times.is-live { height: 260vh; }
.px-times.is-live .px-times-stick { position: sticky; top: var(--hdr, 5rem); height: calc(100vh - var(--hdr, 5rem)); display: flex; align-items: safe center; padding-block: clamp(2.5rem, 8vh, 5rem); overflow: hidden; }
.px-times.is-live .px-times-num { font-size: min(clamp(7rem, 4rem + 18vw, 20rem), 30vh); }
.px-times.is-live .l2 { opacity: clamp(0, calc((var(--p, 0) - .1) / .1), 1); }
.px-times.is-live .l3 { opacity: clamp(0, calc((var(--p, 0) - .22) / .1), 1); }
.px-times.is-live .px-times-num { opacity: clamp(0, calc((var(--p, 0) - .3) / .08), 1); transform: scale(calc(.55 + .45 * clamp(0, (var(--p, 0) - .3) / .4, 1))); }
.px-times.is-live .px-times-words li { opacity: 0; }
.px-times.is-live .px-times-words li:focus-within { opacity: 1 !important; }
.px-times.is-live .px-times-words li:nth-child(1) { opacity: clamp(0, calc((var(--p, 0) - .72) / .05), 1); }
.px-times.is-live .px-times-words li:nth-child(2) { opacity: clamp(0, calc((var(--p, 0) - .78) / .05), 1); }
.px-times.is-live .px-times-words li:nth-child(3) { opacity: clamp(0, calc((var(--p, 0) - .84) / .05), 1); }
.px-times.is-live .px-times-words li:nth-child(4) { opacity: clamp(0, calc((var(--p, 0) - .9) / .05), 1); }

/* ===== Articles et projets enrichis (son choix du 2026-10-23 : le magazine combiné à la fiche de projet) ===== */
/* le haut en magazine : la photo en grand, le titre dessus (blanc, fin de titre comprise) */
.px-art-mag { position: relative; display: flex; align-items: flex-end; min-height: clamp(24rem, 46vw, 34rem); overflow: hidden; isolation: isolate; color: #fff; }
.px-art-mag-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.px-art-mag::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(6, 18, 30, .35), rgba(6, 18, 30, .1) 35%, rgba(6, 18, 30, .82)); }
.px-art-mag .wrap { width: 100%; padding-block: 2rem 4.6rem; }
.px-art-mag .px-crumbs, .px-art-mag .px-crumbs a { color: rgba(255, 255, 255, .88); }
.px-art-tag { display: inline-block; margin: 0 0 1rem; padding: .35rem .7rem; background: var(--red); color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.px-art-mag h1 { max-width: 22ch; margin: 0; font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.8rem); line-height: 1.06; color: #fff; }
.px-art-mag h1 strong { color: inherit; }
/* « en bref » : quand, où, format (et la catégorie si elle dit autre chose) */
.px-art-facts { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); list-style: none; margin: 1.6rem 0 0; padding: 0; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.px-article.is-mag .px-art-facts { margin-top: -2.4rem; box-shadow: 0 1.6rem 3rem -1.8rem rgba(6, 18, 30, .45); }
.px-art-facts li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); column-gap: .8rem; padding: 1.1rem 1.3rem; border-left: 1px solid var(--line); }
.px-art-facts li:first-child { border-left: 0; }
.px-art-facts svg { grid-row: span 2; width: 2.2rem; height: 2.2rem; fill: none; stroke: #0a6f9f; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.px-art-facts li:nth-child(2) svg { stroke: var(--red); } .px-art-facts li:nth-child(3) svg { stroke: var(--primary); } .px-art-facts li:nth-child(4) svg { stroke: var(--navy); }
.px-art-facts span { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.px-art-facts strong { font-size: .98rem; line-height: 1.3; color: var(--navy); }
.px-art-lead { margin: 0 0 2rem; padding-left: 1.2rem; border-left: 4px solid var(--cyan); font-family: var(--font-heading); font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); line-height: 1.42; color: var(--navy); }
/* à droite : les expertises et secteurs liés en images, la ville sur la carte */
.px-art-side h2 { margin: 0 0 1rem; font-size: 1rem; }
.px-art-links { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.px-art-links li + li { margin-top: .7rem; }
.px-art-links a { color: var(--primary); font-weight: 600; }
.px-art-links a.has-img { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .8rem; align-items: center; color: var(--navy); text-decoration: none; }
.px-art-links a.has-img img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.px-art-links a.has-img:hover span, .px-art-links a.has-img:focus-visible span { text-decoration: underline; }
.px-art-map { position: relative; display: block; color: #fff; text-decoration: none; }
.px-art-map img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.px-art-map::before { content: ""; position: absolute; left: 50%; top: 38%; width: .9rem; height: .9rem; margin: -.45rem; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 .35rem rgba(191, 30, 46, .35); }
.px-art-map span { position: absolute; left: 0; right: 0; bottom: 0; display: grid; padding: 1.6rem .9rem .8rem; background: linear-gradient(transparent, rgba(6, 18, 30, .85)); font-size: .85rem; }
/* les documents en éventail (quatre au plus) ; ils s'ouvrent au survol */
.px-docs.is-fan { display: flex; padding: .6rem 0 0 .5rem; }
.px-docs.is-fan li { flex: none; width: 9.5rem; margin: 0 -2.5rem 0 0; transition: transform .35s var(--ease), margin .35s var(--ease); }
.px-docs.is-fan li:nth-child(1) { transform: rotate(-6deg); } .px-docs.is-fan li:nth-child(2) { transform: rotate(2deg) translateY(-.5rem); } .px-docs.is-fan li:nth-child(3) { transform: rotate(8deg); } .px-docs.is-fan li:nth-child(4) { transform: rotate(-3deg) translateY(.3rem); }
.px-docs.is-fan:hover li, .px-docs.is-fan:focus-within li { margin-right: 1rem; transform: none; }
.px-docs.is-fan img { box-shadow: 0 .8rem 1.6rem -1rem rgba(6, 18, 30, .5); }
@media (max-width: 760px) { .px-docs.is-fan { padding-left: 0; } .px-docs.is-fan li { width: 5.4rem; margin-right: -1.6rem; } .px-art-facts li { border-left: 0; border-top: 1px solid var(--line); } .px-art-facts li:first-child { border-top: 0; } }
@media (prefers-reduced-motion: reduce) { .px-docs.is-fan li { transition: none; } }
/* le projet : le haut en deux parties */
.px-proj-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: #f3f7fa; }
.px-proj-split-text { align-self: center; padding: clamp(2rem, 4.5vw, 3.6rem) clamp(1.25rem, 4vw, 3.5rem) clamp(2.4rem, 5vw, 4rem) max(1.25rem, (100vw - 80rem) / 2); }
.px-proj-logo { display: block; width: auto; max-width: 10rem; max-height: 4.5rem; margin: 0 0 1.2rem; mix-blend-mode: multiply; }
.px-proj-split h1 { margin: 0 0 1rem; font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); line-height: 1.1; }
.px-proj-split .lead { margin: 0; color: var(--body-ink); }
.px-proj-split-photo { margin: 0; } .px-proj-split-photo img { display: block; width: 100%; height: 100%; min-height: 22rem; object-fit: cover; }
.px-proj-seals { display: flex; flex-wrap: wrap; gap: .9rem 1.6rem; list-style: none; margin: 1.6rem 0 0; padding: 0; }
.px-proj-seals li { display: flex; align-items: center; gap: .6rem; }
.px-seal-s { width: 3rem; height: 3rem; fill: none; stroke: var(--logo-blue); transform: rotate(-10deg); }
.px-seal-s circle { stroke-width: 1.6; } .px-seal-s .i { stroke-width: 1; stroke-dasharray: 2 2.2; fill: rgba(0, 137, 192, .08); } .px-seal-s .ck { stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.px-proj-seals strong { font-size: .95rem; color: var(--navy); }
/* la fiche en cartouche de plan */
.px-cartouche { margin-top: clamp(2.4rem, 5vw, 3.4rem); border: 2px solid var(--navy); }
.px-cartouche-t { margin: 0; padding: .5rem .9rem; background: var(--navy); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.px-cartouche dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--navy); }
.px-cartouche dl div { padding: .8rem .9rem; background-color: #fff; background-image: linear-gradient(rgba(10, 123, 189, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 123, 189, .06) 1px, transparent 1px); background-size: 16px 16px; }
.px-cartouche dl div:last-child:nth-child(3n+2) { grid-column: span 2; } .px-cartouche dl div:last-child:nth-child(3n+1) { grid-column: span 3; }
.px-cartouche dt { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.px-cartouche dd { margin: .2rem 0 0; font-family: var(--font-heading); font-weight: 600; color: var(--navy); }
/* les lettres du mandat : le mot anglais, sa traduction dessous */
.px-epcmv { margin-top: 2rem; } .px-epcmv > p { margin: 0 0 .8rem; color: var(--body-ink); }
.px-epcmv ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; list-style: none; margin: 0; padding: 0; }
.px-epcmv li { display: grid; gap: .15rem; align-content: start; padding: .9rem 1rem; background: #f3f7fa; color: var(--muted); }
.px-epcmv .l { font-family: var(--font-heading); font-size: 2.2rem; font-weight: 700; line-height: 1; color: #c5d3df; }
.px-epcmv li strong { margin-top: .3rem; font-size: .95rem; color: var(--navy); }
.px-epcmv .fr { font-size: .8rem; }
.px-epcmv li.is-on { background: var(--navy); color: #cfe0ec; }
.px-epcmv li.is-on strong { color: #fff; }
.px-epcmv li.is-on .l { color: var(--cyan); } .px-epcmv li.is-on:nth-child(3n+2) .l { color: #ff6b77; } .px-epcmv li.is-on:nth-child(3n) .l { color: #8fd8f5; }
.px-proj-quote { margin-top: clamp(2rem, 4vw, 3rem); }
@media (max-width: 860px) {
  .px-proj-split { grid-template-columns: minmax(0, 1fr); } .px-proj-split-text { padding: 2rem 1.25rem 2.4rem; }
  .px-cartouche dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } .px-cartouche dl div:last-child:nth-child(3n+2), .px-cartouche dl div:last-child:nth-child(3n+1) { grid-column: auto; } .px-cartouche dl div:last-child:nth-child(odd) { grid-column: span 2; }
  .px-epcmv ol { grid-template-columns: minmax(0, 1fr); } .px-epcmv li { grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: .6rem; } .px-epcmv .l { grid-row: span 2; font-size: 1.8rem; } .px-epcmv li strong { margin-top: 0; }
}
.px-art-side .px-art-links a.has-img::after { content: none; }

/* Partenaires : « Pourquoi passer par PBE Expert » (sa remarque du 2026-10-23 : PBE reste la porte d'entrée) */
.px-pt-why h2 { margin: 0 0 clamp(1.6rem, 3vw, 2.4rem); }
.px-pt-why ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; }
.px-pt-why li { padding: 1.3rem 1.3rem 1.4rem; background: rgba(255, 255, 255, .06); border-top: 3px solid var(--cyan); }
.px-pt-why li:nth-child(3n+2) { border-top-color: #ff6b77; } .px-pt-why li:nth-child(3n) { border-top-color: #8fd8f5; }
.px-pt-why h3 { margin: 0 0 .4rem; font-size: 1.1rem; color: #fff; }
.px-pt-why p { margin: 0; color: #cfe0ec; }
.px-pt-facts-in { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem 2.4rem; }
.px-pt-facts-in .px-pt-dl { flex: 1 1 30rem; }
.px-pt-logo { flex: none; margin: 0; padding: 1rem 1.4rem; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.px-pt-logo img { display: block; width: auto; max-width: 11rem; max-height: 4rem; object-fit: contain; }
.px-pt-why { background: var(--navy); }

/* ===== Mouvement (ses choix du 2026-10-23), en ajout : le flacon (accueil), le mot qui change (Réalisations), les huit
   services qui se rassemblent (Expertises). Sans script ou avec « réduire les animations » : sections immobiles. ===== */
/* le flacon */
.px-vial { position: relative; background: var(--navy); color: #fff; }
.px-vial-stick { position: relative; min-height: 80vh; overflow: hidden; isolation: isolate; display: grid; align-content: end; justify-items: center; gap: 2rem; padding: 4rem 1.25rem; }
.px-vial-poster, .px-vial-canvas { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.px-vial-canvas { display: none; }
.px-vial-stick::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(6, 18, 30, .55), transparent 40%, rgba(6, 18, 30, .7)); }
.px-vial-title { text-align: center; }
.px-vial-title .eyebrow { color: #8fd8f5; }
.px-vial-title h2 { max-width: 20ch; margin: 0 auto .8rem; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem); line-height: 1.05; color: #fff; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.px-vial-title h2 strong { color: inherit; }
.px-vial-title p:not(.eyebrow) { margin: 0; color: #e4eef6; }
.px-vial-panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; width: min(60rem, 100%); padding: 1.3rem 1.5rem; box-sizing: border-box; background: #fff; color: var(--navy); }
.px-vial-panel > p:first-child { margin: 0; flex: 1 1 22rem; font-family: var(--font-heading); font-size: 1.15rem; }
.px-vial-panel .actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; margin: 0; }
.px-vial.is-live { height: 380vh; }
.px-vial.is-live .px-vial-stick { position: sticky; top: var(--hdr, 5rem); height: calc(100vh - var(--hdr, 5rem)); min-height: 0; padding: 0; display: block; }
.px-vial.is-live .px-vial-canvas { display: block; }
.px-vial.is-live.is-ready .px-vial-poster { visibility: hidden; }
.px-vial.is-live .px-vial-title { position: absolute; left: 0; right: 0; top: 6%; padding: 0 1.25rem; transform: translateY(calc(-30vh * var(--p, 0))); opacity: clamp(0, calc(1 - (var(--p, 0) - .1) / .14), 1); }
.px-vial.is-live .px-vial-stick::after { background: linear-gradient(rgba(6, 18, 30, .55), transparent 40%); }
.px-vial.is-live .px-vial-panel { position: absolute; left: 50%; bottom: 7vh; width: min(60rem, calc(100% - 2.5rem)); transform: translate(-50%, calc((1 - clamp(0, (var(--p, 0) - .86) / .12, 1)) * 160%)); opacity: clamp(0, calc((var(--p, 0) - .86) / .08), 1); }
@media (max-width: 760px) { .px-vial.is-live .px-vial-title { top: 4%; } .px-vial.is-live .px-vial-title h2 { font-size: 1.7rem; } }
/* le mot qui change */
.px-roller { position: relative; display: flex; align-items: center; min-height: clamp(28rem, 44vw, 36rem); overflow: hidden; isolation: isolate; background: var(--navy); color: #fff; }
.px-roller-bg img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s; }
.px-roller-bg img:first-child, .px-roller.is-live .px-roller-bg img.is-on { opacity: 1; }
.px-roller.is-live .px-roller-bg img:first-child:not(.is-on) { opacity: 0; }
.px-roller::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6, 18, 30, .9), rgba(6, 18, 30, .6) 55%, rgba(6, 18, 30, .3)); }
.px-roller-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 2rem; align-items: center; width: 100%; padding-block: 3rem 4.5rem; }
.px-roller h2 { margin: 0; font-size: clamp(1.75rem, 1.3rem + 2.6vw, 3.6rem); font-weight: 300; line-height: 1.15; color: #fff; }
.px-roller-words { display: inline-grid; justify-items: start; vertical-align: bottom; overflow: hidden; transition: width .45s var(--ease); }
.px-roller-b { display: block; }
.px-roller-words span { grid-area: 1 / 1; padding: 0 .3em; font-weight: 600; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .3); }
.px-roller-words span + span { visibility: hidden; }
.px-roller.is-live .px-roller-words span { visibility: visible; opacity: 0; transform: translateY(70%); transition: opacity .45s, transform .45s var(--ease); }
.px-roller.is-live .px-roller-words span.is-on { opacity: 1; transform: none; }
.px-roller.is-live .px-roller-words span.is-out { transform: translateY(-70%); }
.px-roller-cards { position: relative; display: grid; }
.px-roller-card { grid-area: 1 / 1; display: grid; gap: .4rem; align-content: start; padding: 1.4rem; background: #fff; border-top: 4px solid var(--cyan); color: var(--navy); text-decoration: none; }
.px-roller-card + .px-roller-card { visibility: hidden; }
.px-roller.is-live .px-roller-card { visibility: hidden; opacity: 0; transition: opacity .5s, visibility .5s; }
.px-roller.is-live .px-roller-card.is-on { visibility: visible; opacity: 1; }
.px-roller-card .k { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.px-roller-card strong { font-family: var(--font-heading); font-size: 1.2rem; line-height: 1.25; }
.px-roller-card > span:not(.k):not(.go) { font-size: .9rem; color: var(--body-ink); }
.px-roller-card .go { margin-top: .3rem; font-weight: 700; color: var(--sky-shade); } .px-roller-card .go::after { content: "\00a0\2192"; }
.px-roller-pause { position: absolute; right: 1.25rem; bottom: 1.25rem; padding: .5rem .9rem; border: 1px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .12); color: #fff; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
@media (max-width: 760px) { .px-roller-in { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .px-roller-bg img, .px-roller.is-live .px-roller-words span, .px-roller.is-live .px-roller-card { transition: none; } }
/* les huit services se rassemblent */
.px-gather-title { margin-bottom: 2rem; text-align: center; } .px-gather-title h2 { margin: 0; } .px-gather-title .px-intro { margin: 1rem auto 0; }
.px-gather-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; list-style: none; margin: 0 0 clamp(2rem, 4vw, 3rem); padding: 0; }
.px-gather-tiles a { position: relative; display: block; overflow: hidden; color: #fff; text-decoration: none; }
.px-gather-tiles img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s var(--ease); }
.px-gather-tiles a:hover img, .px-gather-tiles a:focus-visible img { transform: scale(1.05); }
.px-gather-tiles span { position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem .8rem .7rem; background: linear-gradient(transparent, rgba(6, 18, 30, .85)); font-weight: 600; font-size: .92rem; line-height: 1.25; }
.px-gather.is-live { --q: clamp(0, calc((var(--p, 0) - .12) / .55), 1); height: 230vh; }
.px-gather.is-live .px-gather-stick { position: sticky; top: var(--hdr, 5rem); height: calc(100vh - var(--hdr, 5rem)); display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.px-gather.is-live .px-gather-title { position: relative; z-index: 3; }
.px-gather.is-live .px-gather-tiles { margin-bottom: 0; }
.px-gather.is-live .px-gather-tiles li { transform: translate(calc(var(--x) * (1 - var(--q))), calc(var(--y) * (1 - var(--q)))) scale(calc(.8 + .2 * var(--q))); }
.px-gather-tiles li:nth-child(4n+1) { --x: -18vw; } .px-gather-tiles li:nth-child(4n+2) { --x: -7vw; } .px-gather-tiles li:nth-child(4n+3) { --x: 7vw; } .px-gather-tiles li:nth-child(4n) { --x: 18vw; }
.px-gather-tiles li:nth-child(-n+4) { --y: -4vh; } .px-gather-tiles li:nth-child(n+5) { --y: 5vh; }
@media (max-width: 760px) { .px-gather-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .px-gather.is-live { height: 200vh; } .px-gather.is-live .px-gather-tiles li { transform: none; opacity: clamp(0, calc(var(--q) * 2), 1); } }

/* ===== Photos des fiches (sa demande du 2026-10-23 : plus de photos) : rangée décalée des secteurs (chaque photo glisse
   un peu à sa vitesse au défilement), photo sous le titre des livrables des services. ===== */
.px-dphotos { display: grid; grid-template-columns: 1.1fr .9fr 1.2fr .85fr; gap: clamp(.6rem, 1.4vw, 1.1rem); align-items: start; list-style: none; margin-top: clamp(3rem, 6vw, 5rem); margin-bottom: 0; padding-bottom: 3rem; }
.px-dphotos.is-3 { grid-template-columns: 1.15fr .9fr 1.1fr; }
.px-dphotos li { --s: 0; transform: translateY(calc(var(--k, 0) * var(--s) * 1px)); }
.px-dphotos img { display: block; width: 100%; height: auto; object-fit: cover; aspect-ratio: 4 / 5; }
.px-dphotos li:nth-child(1) { --s: 30; }
.px-dphotos li:nth-child(2) { --s: -24; margin-top: 4.5rem; } .px-dphotos li:nth-child(2) img { aspect-ratio: 1; }
.px-dphotos li:nth-child(3) { --s: 44; margin-top: 1.5rem; } .px-dphotos li:nth-child(3) img { aspect-ratio: 3 / 4; }
.px-dphotos li:nth-child(4) { --s: -16; margin-top: 6.5rem; }
.px-dphotos .is-right img { object-position: 100% 50%; }
.px-deliver-fig { margin: 2rem 0 0; }
.px-deliver-fig img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 760px) {
  .px-dphotos, .px-dphotos.is-3 { grid-template-columns: 1fr 1fr; padding-bottom: 1rem; }
  .px-dphotos li:nth-child(2) { margin-top: 2.5rem; } .px-dphotos li:nth-child(3) { margin-top: -1rem; } .px-dphotos li:nth-child(4) { margin-top: 1.5rem; }
  .px-dphotos.is-3 li:nth-child(3) { grid-column: 1 / -1; margin-top: 0; } .px-dphotos.is-3 li:nth-child(3) img { aspect-ratio: 16 / 9; }
  .px-deliver-fig { margin-top: 1.2rem; }
}

/* ===== Ses retours du 2026-10-23 (soir) : « Huit services » tient dans l'écran, de l'air avant la liste, qui ne répète
   plus les photos des tuiles (cadre photo retiré, liste sur deux colonnes, icônes au lieu des vignettes). ===== */
.px-gather.is-live .px-gather-stick { justify-content: safe center; padding-block: clamp(1.5rem, 5vh, 3.5rem); }
.px-gather.is-live .px-gather-title { margin-bottom: clamp(1rem, 3.5vh, 2.2rem); }
.px-gather.is-live .px-gather-tiles { width: min(100%, calc((100vh - var(--hdr, 5rem) - 17rem) * 3.4)); margin-inline: auto; }
.px-gather.is-live .px-gather-tiles img { aspect-ratio: 16 / 9; }
@media (max-width: 760px) { .px-gather.is-live .px-gather-tiles img { aspect-ratio: 4 / 3; } }
.px-gather + .px-svc-pick { margin-top: clamp(3.5rem, 8vw, 6.5rem); }
.px-svc-pick { display: block; }
.px-svc-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 4.5rem); border-top: 0; }
.px-svc-rows li:nth-child(-n+2) a { border-top: 1px solid #d3dbe2; }
.px-svc-rows .n { display: block; }
.px-svc-rows .n svg, .px-svc-rows .n .px-ico { width: 2rem; height: 2rem; }
.px-svc-thumb { display: none !important; }
@media (max-width: 980px) { .px-svc-rows .n { display: block; } .px-svc-rows a { grid-template-columns: 2.5rem minmax(0, 1fr) 1.2rem; } }
@media (max-width: 760px) {
  .px-gather.is-live { height: auto; }
  .px-gather.is-live .px-gather-stick { position: static; height: auto; padding-block: 0; }
  .px-gather.is-live .px-gather-tiles { width: 100%; }
  .px-gather.is-live .px-gather-tiles li { opacity: 1; transform: none; }
  .px-svc-rows { grid-template-columns: minmax(0, 1fr); }
  .px-svc-rows li:nth-child(2) a { border-top: 0; }
}
/* la silhouette « Envie de nous rejoindre » à l'échelle des portraits : la tête dans le tiers du haut, les épaules
   sur toute la largeur, comme un reflet des cartes voisines */
.px-join-you { place-items: end stretch; }
.px-join-you svg { width: 100%; fill: #e9f3fa; }

/* ===== Fiches de service, ses choix du 2026-10-23 (soir) : les défis en cartes photo qui se retournent au survol (D3),
   cliquables vers le formulaire déjà rempli ; les livrables en documents remis (L1), toujours centrés. ===== */
.px-chal-row { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); gap: .9rem; }
.px-chal-cards { grid-column: 2 / -1; display: grid; grid-template-columns: subgrid; margin: 0; padding: 0; list-style: none; }
.px-chal-dots { display: none; }
.px-chal-lead { display: flex; flex-direction: column; justify-content: flex-end; padding: 1.6rem; background: var(--navy); }
.px-chal-lead .eyebrow { color: #8fd8f5; }
.px-chal-lead h2, .px-chal-lead h2 strong { margin: .5rem 0 0; color: #fff; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem); }
.px-chal-card a { display: block; height: 100%; color: inherit; text-decoration: none; perspective: 1200px; }
.px-chal-card a:focus-visible { outline: 3px solid var(--logo-blue); outline-offset: 3px; }
.px-chal-flip { position: relative; aspect-ratio: 3 / 4; transform-style: preserve-3d; transition: transform .7s var(--ease); }
.px-chal-front, .px-chal-back { position: absolute; inset: 0; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.px-chal-front img { display: block; width: 100%; height: 100%; object-fit: cover; }
.px-chal-front .cap { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 2.8rem 1rem 1rem; background: linear-gradient(transparent, rgba(6, 18, 30, .9)); color: #fff; font-family: var(--font-heading); font-size: 1.02rem; font-weight: 600; line-height: 1.25; }
.px-chal-front .cap .n { display: block; margin-bottom: .25rem; color: #8fd8f5; font-size: .8rem; letter-spacing: .08em; }
.px-chal-back { display: flex; flex-direction: column; gap: .5rem; padding: 1.1rem 1.1rem 1.2rem; background: #fff; border-top: 4px solid var(--logo-blue); box-shadow: 0 14px 34px rgba(10, 28, 46, .14); transform: rotateY(180deg); }
.px-chal-back .n { margin: 0; color: var(--primary); font-size: .8rem; font-weight: 700; letter-spacing: .08em; }
.px-chal-back h3 { margin: 0; color: var(--navy); font-family: var(--font-heading); font-size: 1.05rem; font-weight: 600; line-height: 1.25; }
.px-chal-back .d { margin: 0; color: var(--body-ink); font-size: .9rem; line-height: 1.5; }
.px-chal-back .go { margin: auto 0 0; align-self: flex-start; padding: .55rem .9rem; background: var(--red); color: #fff; font-size: .85rem; font-weight: 700; }
.px-chal-back .go::after { content: "\00a0\2192"; }
@media (hover: hover) { .px-chal-card a:hover .px-chal-flip, .px-chal-card a:focus-visible .px-chal-flip { transform: rotateY(180deg); } }
@media (prefers-reduced-motion: reduce) { .px-chal-flip { transition: none; } }
@media (hover: none) {
  .px-chal-flip { aspect-ratio: auto; transform: none !important; }
  .px-chal-front { position: relative; aspect-ratio: 4 / 3; } .px-chal-front .cap { display: none; }
  .px-chal-back { position: relative; padding: .9rem 0 0; border-top: 0; box-shadow: none; background: none; transform: none; }
}
@media (max-width: 1279px) { .px-chal-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } .px-chal-lead, .px-chal-cards { grid-column: 1 / -1; } .px-chal-lead { padding: 1.4rem 1.6rem; } }
/* Sur téléphone (son choix du 2026-10-28) : on glisse les cartes au doigt, une carte à 84 % de la largeur et le bord de la
   suivante visible, toutes de la même hauteur ; les traits P·B·E dessous suivent la carte affichée (theme.js) */
@media (max-width: 760px) {
  .px-chal-row { display: block; }
  .px-chal-cards { display: flex; gap: .8rem; margin: .9rem calc(50% - 50vw) 0; padding: 0 calc(50vw - 50%) .3rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(1rem, 4vw); scrollbar-width: none; overscroll-behavior-x: contain; }
  .px-chal-cards::-webkit-scrollbar { display: none; }
  .px-chal-cards > li { flex: 0 0 84%; scroll-snap-align: start; }
  .px-chal-card a { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); }
  .px-chal-flip { flex: 1; display: flex; flex-direction: column; aspect-ratio: auto; transform: none !important; }
  .px-chal-front { position: relative; aspect-ratio: 4 / 3; } .px-chal-front .cap { display: none; }
  .px-chal-back { position: relative; flex: 1; padding: 1rem 1rem 1.1rem; border-top: 0; box-shadow: none; background: none; transform: none; }
  .px-chal-back h3 { font-size: 1.15rem; }
  .px-chal-back .d { font-size: .95rem; }
  .px-chal-dots { display: flex; justify-content: center; gap: .4rem; margin: 1rem 0 0; padding: 0; list-style: none; }
  .px-chal-dots li { width: 1.6rem; height: 4px; background: var(--line); transition: background .25s; }
  .px-chal-dots li.is-on:nth-child(3n+1) { background: var(--cyan); } .px-chal-dots li.is-on:nth-child(3n+2) { background: var(--red); } .px-chal-dots li.is-on:nth-child(3n) { background: var(--primary); }
}
.px-deliver-head { margin-bottom: clamp(1.8rem, 4vw, 3rem); text-align: center; }
.px-deliver-head h2 { margin: .4rem 0 0; }
.px-dlv { --g: clamp(1rem, 2.5vw, 1.8rem); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--g); margin: 0; padding: 0; list-style: none; }
.px-dlv li { position: relative; flex: 0 1 calc((100% - 2 * var(--g)) / 3); box-sizing: border-box; min-height: 10.5rem; padding: 1.4rem 1.4rem 1.6rem; background: #fff; border-top: 4px solid var(--logo-blue); box-shadow: 0 12px 30px rgba(10, 28, 46, .09); clip-path: polygon(0 0, calc(100% - 1.8rem) 0, 100% 1.8rem, 100% 100%, 0 100%); }
.px-dlv li::after { content: ""; position: absolute; top: 0; right: 0; width: 1.8rem; height: 1.8rem; background: linear-gradient(225deg, transparent 50%, #c9d5df 50%); }
.px-dlv .ref { margin: 0 0 .8rem; color: var(--muted); font-size: .74rem; font-weight: 700; letter-spacing: .12em; }
.px-dlv .t { margin: 0 0 1rem; color: var(--navy); font-family: var(--font-heading); font-size: 1.08rem; font-weight: 500; line-height: 1.35; }
.px-dlv .lines { display: block; width: 70%; height: 2.2rem; background: repeating-linear-gradient(#e3e9ef 0 2px, transparent 2px 10px); }
.px-dlv.is-armed li { opacity: 0; transform: translateY(18px); }
.px-dlv.is-armed.is-play li { opacity: 1; transform: none; transition: opacity .5s, transform .6s var(--ease); }
.px-dlv.is-armed.is-play li:nth-child(2) { transition-delay: .1s; } .px-dlv.is-armed.is-play li:nth-child(3) { transition-delay: .2s; } .px-dlv.is-armed.is-play li:nth-child(4) { transition-delay: .3s; }
.px-dlv.is-armed.is-play li:nth-child(5) { transition-delay: .4s; } .px-dlv.is-armed.is-play li:nth-child(6) { transition-delay: .5s; } .px-dlv.is-armed.is-play li:nth-child(7) { transition-delay: .6s; }
@media (max-width: 980px) { .px-dlv li { flex-basis: calc((100% - var(--g)) / 2); } }
@media (max-width: 560px) { .px-dlv li { flex-basis: 100%; min-height: 0; } }

/* ===== Dans chaque gélule, une usine entière (accueil, brief ChatGPT, 2026-10-23). Sans script ou avec « réduire les
   animations » : les cinq chapitres en images fixes, puis le logo. ===== */
.px-caps { position: relative; background: #0a1c2e; color: #fff; }
.px-caps-stick { position: relative; overflow: hidden; isolation: isolate; }
.px-caps-canvas, .px-caps-bar, .px-caps-poster { display: none; }
.px-caps-story { --g: 1rem; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--g); margin: 0; padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 4vw, 3.5rem) 1rem; list-style: none; }
.px-caps-story li { flex: 0 1 calc((100% - 2 * var(--g)) / 3); background: #fff; color: var(--navy); }
.px-caps:not(.is-live) .cap .t br { display: none; }
@media (max-width: 980px) { .px-caps-story li { flex-basis: calc((100% - var(--g)) / 2); } }
@media (max-width: 560px) { .px-caps-story li { flex-basis: 100%; } }
.px-caps-story img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.px-caps .cap { padding: 1rem 1.1rem 1.2rem; }
.px-caps .cap .eyebrow { margin: 0; color: var(--primary); }
.px-caps .cap .eyebrow .n { margin-right: .6rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.px-caps .cap .t { margin: .4rem 0 0; color: var(--navy); font-family: var(--font-heading); font-size: clamp(1.3rem, 1rem + 1.1vw, 2rem); font-weight: 300; line-height: 1.2; }
.px-caps .cap .t strong { color: var(--logo-blue); font-weight: 600; }
.px-caps-brand { display: grid; place-items: center; padding: 1.5rem clamp(1rem, 4vw, 3.5rem) clamp(3rem, 6vw, 5rem); }
.px-caps-card { display: grid; justify-items: center; gap: 1rem; width: min(30rem, 100%); padding: 2rem 2.2rem; box-sizing: border-box; background: #fff; color: var(--navy); text-align: center; box-shadow: 0 24px 60px rgba(6, 18, 30, .3); }
.px-caps-card img { width: 11rem; height: auto; }
.px-caps-card p { margin: 0; }
.px-caps-card .actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .6rem 1.4rem; }
.px-caps.is-live { height: 580vh; }
.px-caps.is-live .px-caps-stick { position: sticky; top: var(--hdr, 5rem); height: calc(100vh - var(--hdr, 5rem)); }
.px-caps.is-live .px-caps-canvas, .px-caps.is-live .px-caps-poster { display: block; position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.px-caps.is-live .px-caps-poster { z-index: -2; object-fit: cover; }
.px-caps.is-live.is-ready .px-caps-poster { visibility: hidden; }
.px-caps.is-live .px-caps-story { display: block; padding: 0; }
.px-caps.is-live .px-caps-story li { --o: clamp(0, min((var(--p) - var(--a)) / .025, (var(--b) - var(--p)) / .025), 1); position: absolute; left: clamp(1rem, 4vw, 3.5rem); bottom: clamp(1.5rem, 7vh, 4rem); width: min(31rem, calc(100% - 2rem)); box-shadow: 0 18px 44px rgba(6, 18, 30, .28); opacity: var(--o); transform: translateY(calc((1 - var(--o)) * 22px)); }
.px-caps.is-live .px-caps-story img { display: none; }
.px-caps.is-live .c-01 { --a: -1; --b: .175; } .px-caps.is-live .c-02 { --a: .175; --b: .325; } .px-caps.is-live .c-03 { --a: .325; --b: .455; }
.px-caps.is-live .c-04 { --a: .455; --b: .65; } .px-caps.is-live .c-05 { --a: .65; --b: .775; }
.px-caps.is-live .px-caps-brand { position: absolute; inset: 0; padding: 1rem; visibility: hidden; opacity: clamp(0, calc((var(--p) - .8) / .06), 1); }
.px-caps.is-live.is-end .px-caps-brand { visibility: visible; }
.px-caps.is-live .px-caps-card { transform: scale(calc(.94 + .06 * clamp(0, (var(--p) - .8) / .06, 1))); }
.px-caps.is-live .px-caps-bar { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .18); }
.px-caps.is-live .px-caps-bar::after { content: ""; display: block; width: calc(var(--p) * 100%); height: 100%; background: var(--cyan); }
@media (max-width: 760px) {
  .px-caps.is-live { height: 520vh; }
  .px-caps.is-live .px-caps-story li { left: 1rem; right: 1rem; bottom: 1.2rem; width: auto; }
  .px-caps-card { padding: 1.5rem 1.2rem; } .px-caps-card img { width: 9rem; }
}

/* ===== Le P&ID vivant (Ingénierie des procédés, son choix du 2026-10-23, amélioré) : une feuille de plan claire avec son
   cartouche ; une fin lente où la photo glisse à côté du dessin. ===== */
.px-pid { position: relative; background: #eef3f7; }
.px-pid-stick { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(1.5rem, 3.5vw, 3rem); align-items: center; padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 4vw, 3.5rem); max-width: 90rem; margin: 0 auto; box-sizing: border-box; }
.px-pid-text h2 { margin: .4rem 0 1.4rem; font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.7rem); }
.px-pid-notes { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.px-pid-notes li { --on: 1; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .8rem; padding: .7rem .8rem; border-left: 3px solid rgba(0, 137, 192, calc(.15 + .85 * var(--on))); background: rgba(255, 255, 255, calc(var(--on) * .9)); }
.px-pid-notes .n { color: var(--primary); font-family: var(--font-heading); font-weight: 700; }
.px-pid-notes h3 { margin: 0 0 .2rem; color: var(--navy); font-size: 1rem; }
.px-pid-notes p { margin: 0; color: var(--body-ink); font-size: .92rem; line-height: 1.45; }
.px-pid-sheet { position: relative; padding: clamp(.8rem, 2vw, 1.4rem) clamp(.8rem, 2vw, 1.4rem) 3.6rem; overflow: hidden; background-color: #fbfdfe; background-image: linear-gradient(rgba(0, 137, 192, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 137, 192, .07) 1px, transparent 1px); background-size: 24px 24px; border: 2px solid var(--navy); box-shadow: 0 20px 50px rgba(10, 28, 46, .1); }
.px-pid-sheet::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(10, 28, 46, .35); pointer-events: none; }
.px-pid-svg { display: block; width: 100%; height: auto; }
.px-pid-svg .lbl text { fill: var(--navy); font-size: 15px; font-weight: 700; letter-spacing: .03em; }
.px-pid-svg .eq { fill: #fff; stroke: var(--navy); stroke-width: 2.5; }
.px-pid-svg .lvl { fill: rgba(0, 174, 239, .35); transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(.8); }
.px-pid-svg .pipe { fill: none; stroke: #9fb2c3; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.px-pid-svg .flow { fill: none; stroke: var(--logo-blue); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: .012 .02; }
.px-pid-svg .valve line { stroke: var(--navy); stroke-width: 3; } .px-pid-svg .valve path { stroke: var(--navy); stroke-width: 2; fill: var(--cyan); } .px-pid-svg .valve circle { fill: var(--navy); }
.px-pid-svg .ins line { stroke: var(--navy); stroke-width: 2; stroke-dasharray: 4 4; } .px-pid-svg .ins circle { fill: #fff; stroke: var(--navy); stroke-width: 2.5; }
.px-pid-svg .ins text { fill: var(--navy); font-size: 15px; font-weight: 800; text-anchor: middle; } .px-pid-svg .ins .rd { fill: var(--logo-blue); font-size: 17px; }
.px-pid-block { position: absolute; right: 14px; bottom: 14px; display: grid; grid-template-columns: auto auto auto auto; margin: 0; border: 1.5px solid var(--navy); background: #fff; font-size: .7rem; }
.px-pid-block div { padding: .25rem .55rem; border-left: 1px solid rgba(10, 28, 46, .35); } .px-pid-block div:first-child { border-left: 0; }
.px-pid-block dt { color: var(--muted); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .px-pid-block dd { margin: 0; color: var(--navy); font-weight: 700; }
.px-pid-real { margin: 1rem 0 0; }
.px-pid-real img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.px-pid-real figcaption { position: absolute; top: .8rem; left: .8rem; padding: .25rem .6rem; background: var(--navy); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.px-pid:not(.is-live) .px-pid-real { position: relative; } .px-pid:not(.is-live) .px-pid-real figcaption { top: .6rem; }
.px-pid.is-live { height: 400vh; --dr: clamp(0, calc((var(--p) - .03) / .22), 1); --ph: clamp(0, calc((var(--p) - .74) / .18), 1); }
.px-pid.is-live .px-pid-stick { position: sticky; top: var(--hdr, 5rem); height: calc(100vh - var(--hdr, 5rem)); max-width: none; padding-block: clamp(1rem, 4vh, 2.5rem); }
.px-pid.is-live .px-pid-notes li { --on: clamp(0, min((var(--p) - var(--a)) / .02, (var(--b) - var(--p)) / .02), 1); }
.px-pid.is-live .k-0 { --a: -1; --b: .12; } .px-pid.is-live .k-1 { --a: .12; --b: .27; } .px-pid.is-live .k-2 { --a: .27; --b: .42; } .px-pid.is-live .k-3 { --a: .42; --b: .55; } .px-pid.is-live .k-4 { --a: .55; --b: .72; } .px-pid.is-live .k-5 { --a: .72; --b: 2; }
.px-pid.is-live .px-pid-svg .pipe { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--dr)); }
.px-pid.is-live .px-pid-svg .lvl { transform: scaleY(calc(clamp(0, (var(--p) - .12) / .18, 1) * .8)); }
.px-pid.is-live .px-pid-svg .flow { stroke-dashoffset: calc(var(--p) * -6); opacity: clamp(0, calc((var(--p) - .27) / .05), 1); }
.px-pid.is-live .px-pid-svg .valve path { fill-opacity: clamp(0, calc((var(--p) - var(--at)) * 25), 1); }
.px-pid.is-live .px-pid-svg .v-1 { --at: .43; } .px-pid.is-live .px-pid-svg .v-2 { --at: .47; } .px-pid.is-live .px-pid-svg .v-3 { --at: .51; }
.px-pid.is-live .px-pid-svg .ins { opacity: clamp(0, calc((var(--p) - var(--at)) * 20), 1); }
.px-pid.is-live .px-pid-svg .i-1 { --at: .56; } .px-pid.is-live .px-pid-svg .i-2 { --at: .6; } .px-pid.is-live .px-pid-svg .i-3 { --at: .64; } .px-pid.is-live .px-pid-svg .i-4 { --at: .68; }
.px-pid.is-live .px-pid-real { position: absolute; top: 14px; bottom: 14px; right: 14px; width: 52%; margin: 0; border: 6px solid #fff; box-shadow: -18px 0 40px rgba(10, 28, 46, .25); transform: translateX(calc((1 - var(--ph)) * 115%)); }
.px-pid.is-live .px-pid-real img { height: 100%; aspect-ratio: auto; }
@media (max-width: 980px) {
  .px-pid-stick { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .px-pid.is-live .px-pid-stick { align-content: start; }
  .px-pid.is-live .px-pid-text h2 { margin-bottom: .8rem; font-size: 1.45rem; }
  .px-pid.is-live .px-pid-notes { position: relative; min-height: 5.6rem; }
  .px-pid.is-live .px-pid-notes li { position: absolute; inset: 0 0 auto; opacity: var(--on); }
  .px-pid.is-live .px-pid-real { width: auto; left: 14px; }
  .px-pid-block { font-size: .6rem; } .px-pid-sheet { padding-bottom: 3rem; }
}
/* ===== L'hélice qui devient PBE (Biotechnologie, son choix du 2026-10-23) ===== */
.px-helix { position: relative; background: #050f1b; color: #fff; }
.px-helix-stick { position: relative; overflow: hidden; padding: 3rem 1.25rem; }
.px-helix-canvas { display: none; }
.px-helix-still { margin: 0; text-align: center; font-family: var(--font-heading); font-size: clamp(5rem, 3rem + 10vw, 12rem); font-weight: 700; letter-spacing: .2em; line-height: 1; }
.px-helix-still .b { color: var(--cyan); } .px-helix-still .r { color: #e2475a; }
.px-helix-words { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.6rem; margin: 1.6rem 0 0; padding: 0; list-style: none; font-weight: 600; color: rgba(255, 255, 255, .85); }
.px-helix-words li.is-on { color: #fff; }
.px-helix.is-live { height: 380vh; }
.px-helix.is-live .px-helix-stick { position: sticky; top: var(--hdr, 5rem); height: calc(100vh - var(--hdr, 5rem)); padding: 0; }
.px-helix.is-live .px-helix-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.px-helix.is-live .px-helix-still { display: none; }
.px-helix.is-live .px-helix-words { position: absolute; left: 0; right: 0; bottom: 2rem; margin: 0; padding: 0 1.25rem; color: rgba(255, 255, 255, .6); }
.px-helix.is-live .px-helix-words li.is-on { color: #fff; }
/* le P&ID sur ordinateur : les cinq titres restent visibles, seule la note en cours montre son texte ; la scène commence
   sous le petit menu collant des fiches (Défis, Livrables…) */
@media (min-width: 981px) {
  .px-pid.is-live .px-pid-notes li { padding-block: .45rem; }
  .px-pid.is-live .px-pid-notes p { max-height: calc(var(--on) * 5em); overflow: hidden; opacity: var(--on); }
  .px-pid.is-live .px-pid-notes h3 { margin: 0; }
  .px-pid.is-live .px-pid-notes li[style], .px-pid.is-live .px-pid-notes li { --gap: calc(var(--on) * .2rem); } .px-pid.is-live .px-pid-notes h3 { margin-bottom: var(--gap); }
}
.px-pid.is-live .px-pid-stick { overflow: hidden; }
.px-subnav ~ .px-pid.is-live .px-pid-stick { top: calc(var(--hdr, 5rem) + 3.2rem); height: calc(100vh - var(--hdr, 5rem) - 3.2rem); }
@media (min-width: 981px) and (max-height: 700px) { .px-pid.is-live .px-pid-text h2 { margin-bottom: .7rem; font-size: 1.55rem; } .px-pid.is-live .px-pid-notes li { padding-block: .3rem; } .px-pid.is-live .px-pid-notes p { font-size: .86rem; } .px-pid.is-live .px-pid-stick { padding-block: .8rem; } }

/* ===== Le registre des projets (Réalisations, d'après le portfolio de PBE Expert, 2026-10-23) : ce qui nous distingue,
   chaque mandat filtrable par domaine, l'index des clients. Sans script : tous les mandats, sans filtre. ===== */
.px-pf-head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 5vw, 4rem); align-items: end; margin-bottom: clamp(2rem, 4vw, 3rem); }
.px-pf-head h2 { margin: .4rem 0 .8rem; } .px-pf-head .px-intro { margin: 0; }
.px-pf-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.px-pf-figs li { padding: 1.1rem 1.2rem; border-top: 4px solid var(--logo-blue); background: #f3f6f9; }
.px-pf-figs strong { display: block; color: var(--navy); font-family: var(--font-heading); font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem); font-weight: 700; line-height: 1; }
.px-pf-figs span { display: block; margin-top: .4rem; color: var(--body-ink); font-size: .9rem; }
.px-pf-apart { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin: 0 0 clamp(2.5rem, 5vw, 3.5rem); padding: 0; list-style: none; counter-reset: ap; }
.px-pf-apart li { counter-increment: ap; padding: 1.2rem 1.3rem; background: var(--navy); color: #fff; }
.px-pf-apart li::before { content: "0" counter(ap); display: block; margin-bottom: .6rem; color: #8fd8f5; font-size: .8rem; font-weight: 700; letter-spacing: .1em; }
.px-pf-apart h3 { margin: 0 0 .4rem; color: #fff; font-size: 1.1rem; } .px-pf-apart p { margin: 0; color: #dbe9f4; font-size: .93rem; }
.px-pf-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .8rem; }
.px-pf-bar button { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .45rem .9rem; border: 1.5px solid #c9d5df; background: #fff; color: var(--navy); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.px-pf-bar button span { padding: .05rem .45rem; border-radius: 999px; background: #e9eff4; color: var(--body-ink); font-size: .78rem; }
.px-pf-bar button[aria-pressed="true"] { border-color: var(--navy); background: var(--navy); color: #fff; } .px-pf-bar button[aria-pressed="true"] span { background: rgba(255, 255, 255, .18); color: #fff; }
.px-pf-bar button:focus-visible { outline: 3px solid var(--logo-blue); outline-offset: 2px; }
.px-pf-catlead { min-height: 1.5em; margin: 0 0 1.2rem; color: var(--body-ink); font-style: italic; }
.px-pf-list { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--navy); }
.px-pf-list > li { --c: var(--logo-blue); display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) minmax(0, 9.5rem); gap: 1rem 2rem; padding: 1.4rem 0 1.4rem 1.2rem; border-bottom: 1px solid #dde5ec; box-shadow: inset 4px 0 0 var(--c); }
.px-pf-list > li[hidden] { display: none; }
.px-pf-list > li[data-cats^="st"] { --c: var(--cyan); } .px-pf-list > li[data-cats^="eu"] { --c: var(--navy); } .px-pf-list > li[data-cats^="va"] { --c: var(--logo-blue); }
.px-pf-list > li[data-cats^="on"] { --c: var(--red); } .px-pf-list > li[data-cats^="os"] { --c: #0a5f8a; } .px-pf-list > li[data-cats^="co"] { --c: #6b7c8f; } .px-pf-list > li[data-cats^="cq"] { --c: #1f9d55; }
.px-pf-list .ref { margin: 0 0 .3rem; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .12em; }
.px-pf-list h3 { margin: 0 0 .3rem; color: var(--navy); font-size: 1.15rem; line-height: 1.25; }
.px-pf-list .meta { margin: 0; color: var(--body-ink); font-size: .88rem; } .px-pf-list .meta:empty { display: none; }
.px-pf-list .cost { margin: .8rem 0 0; color: var(--navy); font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; line-height: 1; }
.px-pf-list .cost span { display: block; margin-bottom: .2rem; color: var(--muted); font-family: var(--font-body); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.px-pf-list .cat { margin: 0 0 .25rem; color: var(--primary); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.px-pf-list .kind { margin: 0 0 .4rem; color: var(--navy); font-weight: 600; }
.px-pf-list .scope { margin: 0; color: var(--body-ink); font-size: .95rem; line-height: 1.6; }
.px-pf-list .go { display: inline-block; margin-top: .4rem; padding-block: .6rem; color: var(--sky-shade); font-weight: 700; } .px-pf-list .go::after { content: "\00a0\2192"; }
.px-pf-list .regs { display: flex; flex-wrap: wrap; align-content: flex-start; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.px-pf-list .regs:empty { display: none; }
.px-pf-list .regs li { padding: .25rem .5rem; border: 2px solid var(--navy); outline: 1px solid var(--navy); outline-offset: 2px; color: var(--navy); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.px-pf-clients { margin-top: clamp(3rem, 6vw, 4.5rem); }
.px-pf-ch { max-width: 44rem; margin-bottom: 1.5rem; } .px-pf-ch h3 { margin: 0 0 .5rem; color: var(--navy); font-family: var(--font-heading); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 300; } .px-pf-ch p { margin: 0; color: var(--body-ink); }
.px-pf-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.px-pf-cols > div { padding: 1.1rem 1.2rem 1.3rem; background: #f3f6f9; border-top: 4px solid var(--c, var(--logo-blue)); }
.px-pf-cols > div:nth-child(1) { --c: var(--cyan); } .px-pf-cols > div:nth-child(2) { --c: var(--red); } .px-pf-cols > div:nth-child(3) { --c: #0a5f8a; } .px-pf-cols > div:nth-child(4) { --c: #1f9d55; }
.px-pf-cols .n { margin: 0 0 .8rem; color: var(--navy); font-weight: 700; } .px-pf-cols .n span { margin-left: .3rem; color: var(--muted); font-weight: 600; }
.px-pf-cols ul { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; } .px-pf-cols li { color: var(--ink); font-size: .93rem; }
@media (max-width: 980px) {
  .px-pf-head { grid-template-columns: minmax(0, 1fr); }
  .px-pf-list > li { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .px-pf-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) { .px-pf-apart { grid-template-columns: minmax(0, 1fr); } .px-pf-cols { grid-template-columns: minmax(0, 1fr); } }

/* ===== Le Groupe PBE en un coup d'œil (À propos, d'après la matrice du groupe 2026) : l'organigramme se trace à l'arrivée
   à l'écran (le groupe, les trois entreprises, l'énergie transversale, les services partagés), puis les cinq unités
   d'affaires de GreenTech et la matrice des fonctions. Sans script ou avec « réduire les animations » : tout est posé. ===== */
.px-gm-head { max-width: 46rem; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.px-gm-head h2 { margin: .4rem 0 .8rem; } .px-gm-head .px-intro { margin: 0 auto; }
.px-gm-chart { position: relative; display: grid; gap: 1.6rem; }
.px-gm-top { position: relative; justify-self: center; width: min(26rem, 100%); padding: 1.3rem 1.5rem; box-sizing: border-box; background: var(--navy); color: #fff; text-align: center; }
.px-gm-top .nm { margin: 0; font-family: var(--font-heading); font-size: 1.6rem; font-weight: 700; }
.px-gm-top .ln { margin: .2rem 0 .3rem; color: #8fd8f5; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.px-gm-top .mt { margin: 0; color: #dbe9f4; font-style: italic; }
.px-gm-top::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 1.6rem; background: var(--navy); transform-origin: top; }
.px-gm-cos { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin: 0; padding: 1.6rem 0 0; list-style: none; }
.px-gm-cos::before { content: ""; position: absolute; top: 0; left: calc(100% / 6); right: calc(100% / 6); height: 2px; background: var(--navy); transform-origin: center; }
.px-gm-cos > li { --c: var(--logo-blue); position: relative; padding: 1.3rem 1.3rem 1.4rem; background: #fff; border: 1px solid #dde5ec; border-top: 5px solid var(--c); box-shadow: 0 14px 32px rgba(10, 28, 46, .06); }
.px-gm-cos > li::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: calc(1.6rem + 5px); margin-bottom: 0; background: var(--navy); transform: translateY(-5px); }
.px-gm-cos .is-e { --c: #1f9d55; } .px-gm-cos .is-b { --c: var(--red); }
.px-gm-cos .role { margin: 0; color: var(--c); font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.px-gm-cos .is-e .role { color: #17803f; }
.px-gm-cos h3 { margin: .9rem 0 .5rem; color: var(--navy); font-size: 1.3rem; }
.px-gm-cos .ln { margin: 0 0 1rem; color: var(--body-ink); font-size: .93rem; }
.px-gm-chart .bk + .bk { margin-top: .9rem; }
.px-gm-chart .bt { margin: 0 0 .35rem; color: var(--navy); font-size: .88rem; font-weight: 700; }
.px-gm-chart ul ul, .px-gm-chart .bk ul, .px-gm-energy ul { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.px-gm-chart .bk li, .px-gm-energy li { position: relative; padding-left: 1rem; color: var(--body-ink); font-size: .9rem; line-height: 1.45; }
.px-gm-chart .bk li::before, .px-gm-energy li::before { content: ""; position: absolute; left: 0; top: .6em; width: .4rem; height: .4rem; background: var(--c, var(--logo-blue)); }
.px-gm-energy { --c: #00aeef; padding: 1.3rem 1.5rem; background: linear-gradient(90deg, #e6f6fd, #eaf7ef); border-left: 5px solid var(--cyan); }
.px-gm-energy .k, .px-gm-shared .k { margin: 0; color: var(--primary); font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.px-gm-energy h3 { margin: .9rem 0 .9rem; color: var(--navy); font-size: 1.25rem; }
.px-gm-energy .cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.px-gm-shared { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: 1rem 1.3rem; border: 1.5px dashed #9fb2c3; }
.px-gm-shared ul { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.px-gm-shared li { padding: .35rem .7rem; background: #eef3f7; color: var(--navy); font-size: .88rem; font-weight: 600; }
.px-gm-chart.is-armed .px-gm-top, .px-gm-chart.is-armed .px-gm-cos > li, .px-gm-chart.is-armed .px-gm-energy, .px-gm-chart.is-armed .px-gm-shared { opacity: 0; transform: translateY(16px); }
.px-gm-chart.is-armed .px-gm-top::after { transform: scaleY(0); } .px-gm-chart.is-armed .px-gm-cos::before { transform: scaleX(0); }
.px-gm-chart.is-armed.is-play .px-gm-top, .px-gm-chart.is-armed.is-play .px-gm-cos > li, .px-gm-chart.is-armed.is-play .px-gm-energy, .px-gm-chart.is-armed.is-play .px-gm-shared { opacity: 1; transform: none; transition: opacity .5s, transform .6s var(--ease); }
.px-gm-chart.is-armed.is-play .px-gm-top::after { transform: none; transition: transform .4s .4s; } .px-gm-chart.is-armed.is-play .px-gm-cos::before { transform: none; transition: transform .5s .7s; }
.px-gm-chart.is-armed.is-play .px-gm-cos > li:nth-child(1) { transition-delay: 1s; } .px-gm-chart.is-armed.is-play .px-gm-cos > li:nth-child(2) { transition-delay: 1.15s; } .px-gm-chart.is-armed.is-play .px-gm-cos > li:nth-child(3) { transition-delay: 1.3s; }
.px-gm-chart.is-armed.is-play .px-gm-energy { transition-delay: 1.6s; } .px-gm-chart.is-armed.is-play .px-gm-shared { transition-delay: 1.8s; }
.px-gm-sub { max-width: 46rem; margin: clamp(3rem, 6vw, 4.5rem) 0 1.4rem; }
.px-gm-sub h3 { margin: 0 0 .5rem; color: var(--ink); font-family: var(--font-heading); font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); font-weight: 300; } .px-gm-sub h3 strong { color: var(--logo-blue); font-weight: 600; }
.px-gm-sub p { margin: 0; color: var(--body-ink); }
.px-gm-bu ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .9rem; margin: 0; padding: 0; list-style: none; }
.px-gm-bu li { display: flex; flex-direction: column; padding: 1.1rem 1.1rem 1.2rem; background: #fff; border: 1px solid #dde5ec; border-top: 4px solid #1f9d55; }
.px-gm-bu .n { color: #17803f; font-size: .76rem; font-weight: 800; letter-spacing: .12em; }
.px-gm-bu h4 { margin: .35rem 0 .4rem; color: var(--navy); font-size: 1rem; line-height: 1.3; }
.px-gm-bu li > p { margin: 0; color: var(--body-ink); font-size: .88rem; line-height: 1.45; }
.px-gm-bu .pt { margin-top: auto !important; padding-top: .8rem; color: var(--navy) !important; font-weight: 700; }
.px-gm-scroll { overflow-x: auto; }
.px-gm-mx table { width: 100%; min-width: 40rem; table-layout: fixed; border-collapse: collapse; background: #fff; }
.px-gm-mx th, .px-gm-mx td { padding: .8rem 1rem; border: 1px solid #dde5ec; text-align: left; font-size: .93rem; }
.px-gm-mx thead th { background: var(--navy); color: #fff; font-weight: 700; }
.px-gm-mx thead th:nth-child(2) { box-shadow: inset 0 -4px 0 var(--logo-blue); } .px-gm-mx thead th:nth-child(3) { box-shadow: inset 0 -4px 0 #1f9d55; } .px-gm-mx thead th:nth-child(4) { box-shadow: inset 0 -4px 0 var(--red); }
.px-gm-mx tbody th { background: #f3f6f9; color: var(--navy); font-weight: 700; }
.px-gm-mx td { color: var(--body-ink); }
.px-gm-mx tbody tr:hover td, .px-gm-mx tbody tr:hover th { background: #eaf4fa; }
@media (max-width: 980px) { .px-gm-cos { grid-template-columns: minmax(0, 1fr); } .px-gm-cos::before, .px-gm-cos > li::before, .px-gm-top::after { display: none; } .px-gm-bu ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .px-gm-energy .cols, .px-gm-bu ol { grid-template-columns: minmax(0, 1fr); } }

/* ===== Les projets GreeNRG fiche par fiche (Efficacité énergétique, d'après ses présentations, 2026-10-23) : un onglet
   par projet, une fiche technique, les chiffres clés. Sans script : toutes les fiches, l'une sous l'autre. ===== */
.px-gx-head { max-width: 48rem; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); } .px-gx-head h2 { margin: .4rem 0 .8rem; } .px-gx-head .px-intro { margin: 0; }
.px-gx-panels { display: grid; gap: 1.5rem; }
.px-gx-panel { padding: clamp(1.3rem, 3vw, 2.2rem); background: #fff; border-top: 5px solid #1f9d55; box-shadow: 0 16px 36px rgba(10, 28, 46, .06); }
.px-gx-panel .kind { margin: 0; color: #17803f; font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.px-gx-panel h3 { margin: .8rem 0 .6rem; color: var(--navy); font-family: var(--font-heading); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 600; }
.px-gx-panel .lead { max-width: 52rem; margin: 0 0 1.4rem; color: var(--ink); font-size: 1.05rem; line-height: 1.6; }
.px-gx-panel .figs { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0 0 1.6rem; padding: 0; list-style: none; }
.px-gx-panel .figs li { flex: 1 1 10rem; padding: .9rem 1rem; background: #eef7f1; border-left: 4px solid #1f9d55; }
.px-gx-panel .figs strong { display: block; color: var(--navy); font-family: var(--font-heading); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 700; line-height: 1.1; }
.px-gx-panel .figs span { display: block; margin-top: .3rem; color: var(--body-ink); font-size: .86rem; }
.px-gx-panel .sheet { margin: 0; border-top: 2px solid var(--navy); }
.px-gx-panel .sheet > div { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: .4rem 1.5rem; padding: .85rem 0; border-bottom: 1px solid #dde5ec; }
.px-gx-panel .sheet dt { color: var(--navy); font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.px-gx-panel .sheet dd { margin: 0; color: var(--body-ink); font-size: .95rem; line-height: 1.6; }
.px-gx-panel .tbl { margin-top: 1.6rem; overflow-x: auto; }
.px-gx-panel table { width: 100%; min-width: 30rem; border-collapse: collapse; }
.px-gx-panel caption { padding-bottom: .6rem; color: var(--navy); font-weight: 700; text-align: left; }
.px-gx-panel th, .px-gx-panel td { padding: .6rem .8rem; border: 1px solid #dde5ec; font-size: .9rem; text-align: left; }
.px-gx-panel thead th { background: var(--navy); color: #fff; } .px-gx-panel tbody th { background: #f3f6f9; color: var(--navy); }
.px-gx-panel td { color: var(--body-ink); }
.px-gx-panel .note { margin: 1.4rem 0 0; padding-left: 1rem; border-left: 3px solid #9fb2c3; color: var(--body-ink); font-size: .9rem; font-style: italic; }
.px-gx.is-js .px-gx-in { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2rem); align-items: start; }
.px-gx.is-js .px-gx-panel[hidden] { display: none; }
.px-gx-tabs { display: grid; gap: .3rem; }
.px-gx-tabs button { display: grid; gap: .15rem; width: 100%; min-height: 44px; padding: .75rem .9rem; border: 0; border-left: 4px solid transparent; background: #fff; color: var(--navy); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.px-gx-tabs button .k { color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.px-gx-tabs button[aria-selected="true"] { border-left-color: #1f9d55; background: var(--navy); color: #fff; } .px-gx-tabs button[aria-selected="true"] .k { color: #8fd8f5; }
.px-gx-tabs button:focus-visible { outline: 3px solid var(--logo-blue); outline-offset: 2px; }
@media (max-width: 980px) {
  .px-gx.is-js .px-gx-in { grid-template-columns: minmax(0, 1fr); }
  .px-gx-tabs { display: flex; overflow-x: auto; gap: .4rem; padding-bottom: .4rem; }
  .px-gx-tabs button { flex: 0 0 auto; width: auto; border-left: 0; border-bottom: 4px solid transparent; }
  .px-gx-tabs button[aria-selected="true"] { border-bottom-color: #1f9d55; }
  .px-gx-panel .sheet > div { grid-template-columns: minmax(0, 1fr); }
}
/* fiches GreeNRG : la photo en bandeau, le parcours intrants → procédé → produits, flèches animées */
.px-gx-panel .ph { margin: calc(-1 * clamp(1.3rem, 3vw, 2.2rem)) calc(-1 * clamp(1.3rem, 3vw, 2.2rem)) 1.4rem; }
.px-gx-panel .ph img { display: block; width: 100%; height: clamp(10rem, 22vw, 15rem); object-fit: cover; }
.px-gx-panel .flow { display: flex; align-items: stretch; gap: .4rem; margin: 0 0 1.4rem; padding: 0; list-style: none; }
.px-gx-panel .flow li:not(.arr) { flex: 1 1 0; padding: .8rem .9rem; background: var(--navy); color: #fff; font-weight: 600; font-size: .92rem; line-height: 1.35; }
.px-gx-panel .flow li:nth-child(3) { background: #0a5276; } .px-gx-panel .flow li:nth-child(5) { background: #146b37; }
.px-gx-panel .flow .k { display: block; margin-bottom: .3rem; color: #fff; opacity: .92; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.px-gx-panel .flow .arr { flex: 0 0 2.6rem; display: grid; place-items: center; }
.px-gx-panel .flow .arr svg { width: 100%; height: auto; overflow: visible; }
.px-gx-panel .flow .arr path { fill: none; stroke: var(--navy); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.px-gx-panel .flow .arr path:first-child { stroke-dasharray: 5 5; animation: px-gx-flow 1s linear infinite; }
@keyframes px-gx-flow { to { stroke-dashoffset: -10; } }
@media (prefers-reduced-motion: reduce) { .px-gx-panel .flow .arr path:first-child { animation: none; } }
@media (max-width: 760px) { .px-gx-panel .flow { flex-direction: column; } .px-gx-panel .flow .arr { flex-basis: 1.6rem; } .px-gx-panel .flow .arr svg { width: 1.6rem; transform: rotate(90deg); } }
/* fiches GreeNRG en mosaïque (son dossier d'inspiration : photo et tuiles de chiffres en couleur à côté du texte) */
.px-gx-panel { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.7fr); gap: clamp(1.2rem, 3vw, 2.2rem); align-items: start; }
.px-gx-panel .vis { position: sticky; top: calc(var(--hdr, 5rem) + 1rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.px-gx-panel .vis:empty { display: none; }
.px-gx-panel .vis .ph { grid-column: 1 / -1; margin: 0; }
.px-gx-panel .vis .ph img { height: auto; aspect-ratio: 4 / 5; }
.px-gx-panel .vis .figs { display: contents; }
/* une fiche avec photo et schémas (photos ajoutées le 2026-10-24) : la photo passe en paysage et la colonne défile avec le texte,
   sinon son bas ne se voit jamais sur un portable */
.px-gx-panel .vis:has(.figs):has(.ph) { position: static; } .px-gx-panel .vis:has(.figs) .ph img { aspect-ratio: 3 / 2; }
.px-gx-panel .vis .figs li { display: flex; flex-direction: column; justify-content: space-between; gap: .6rem; min-height: 8.5rem; margin: 0; padding: 1rem; border: 0; color: #fff; background: linear-gradient(160deg, #146b37, #0f5132); }
.px-gx-panel .vis .figs li:nth-child(2) { background: linear-gradient(160deg, #0a5276, #0a3a55); }
.px-gx-panel .vis .figs li:nth-child(3) { background: var(--navy); }
.px-gx-panel .vis .figs li:nth-child(4) { background: linear-gradient(160deg, #0089c0, #0a5f8a); }
.px-gx-panel .vis .figs li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.px-gx-panel .vis .figs strong { color: #fff; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); }
.px-gx-panel .vis .figs span { color: #e4f1ea; font-size: .86rem; }
.px-gx-panel .vis .figs li:nth-child(2) span, .px-gx-panel .vis .figs li:nth-child(3) span, .px-gx-panel .vis .figs li:nth-child(4) span { color: #dbe9f4; }
.px-gx-panel .ph { margin: 0; }
.px-gx-panel .txt { min-width: 0; }
.px-gx-panel .txt .kind { margin-top: 0; }
@media (max-width: 760px) { .px-gx-panel { grid-template-columns: minmax(0, 1fr); } .px-gx-panel .vis { position: static; } .px-gx-panel .vis .ph img { aspect-ratio: 16 / 9; } }
/* fiches GreeNRG : les onglets au-dessus, sur une ou deux lignes, pour laisser toute la largeur à la fiche */
.px-gx.is-js .px-gx-in { display: block; }
.px-gx-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.px-gx-tabs button { flex: 0 0 auto; width: auto; border-left: 0; border-bottom: 4px solid transparent; }
.px-gx-tabs button[aria-selected="true"] { border-bottom-color: #1f9d55; }
.px-gx-panel .vis .figs strong { font-size: clamp(1.3rem, 1rem + .9vw, 1.8rem); overflow-wrap: anywhere; }
.px-gx-panel .flow li:not(.arr) { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 980px) { .px-gx-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .4rem; } }

/* ===== Cannabis thérapeutique EU-GMP (fiche Cannabis médical, 2026-10-24) : les huit étapes à l'horizontale au défilement,
   la frontière GACP / EU-GMP, CBD ou THC, les modes de culture et l'extraction, les équipements, les produits. ===== */
.px-cn { position: relative; background: #0b1f14; color: #fff; }
.px-cn-stick { position: relative; overflow: hidden; isolation: isolate; padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 4vw, 3.5rem); }
.px-cn-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.px-cn-bg.is-b { opacity: 0; }
.px-cn-stick::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6, 18, 12, .82), rgba(6, 18, 12, .7) 45%, rgba(6, 18, 30, .88)); }
.px-cn-head { max-width: 44rem; } .px-cn-head .eyebrow { color: #b6e8c8; }
.px-cn-head h2, .px-cn-head h2 strong { margin: .4rem 0 .8rem; color: #fff; } .px-cn-head p:not(.eyebrow) { margin: 0; color: #e2efe7; }
.px-cn-rail { display: none; }
.px-cn-track { display: grid; gap: .8rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.px-cn-track li { position: relative; padding: 1.1rem 1.2rem 1.2rem; background: rgba(255, 255, 255, .96); color: var(--navy); border-top: 4px solid #1f9d55; }
.px-cn-track li.is-gmp { border-top-color: var(--logo-blue); }
.px-cn-track .n { color: #17803f; font-family: var(--font-heading); font-size: .9rem; font-weight: 800; } .px-cn-track .is-gmp .n { color: var(--primary); }
.px-cn-track h3 { margin: .5rem 0 .35rem; color: var(--navy); font-size: 1.1rem; } .px-cn-track p { margin: 0; color: var(--body-ink); font-size: .92rem; line-height: 1.5; }
.px-cn-gate { margin: 1rem 0 0; color: #b6e8c8; font-weight: 700; }
@media (min-width: 761px) {
  .px-cn-track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .px-cn-track li:nth-child(3)::before { content: "EU-GMP"; position: absolute; top: -1.9rem; left: 0; padding: .15rem .5rem; background: var(--logo-blue); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .1em; }
  .px-cn-track { row-gap: 2.6rem; padding-top: 1.6rem; }
  .px-cn.is-live { height: 360vh; --q: clamp(0, calc((var(--p) - .2) / .68), 1); }
  .px-cn.is-live .px-cn-stick { position: sticky; top: var(--hdr, 5rem); display: flex; flex-direction: column; justify-content: center; height: calc(100vh - var(--hdr, 5rem)); padding-block: clamp(1.5rem, 4vh, 3rem); box-sizing: border-box; }
  .px-cn.is-live .px-cn-bg.is-b { opacity: clamp(0, calc((var(--q) - .24) / .08), 1); }
  .px-cn.is-live .px-cn-rail { position: relative; display: flex; height: 2.2rem; margin-top: 1.6rem; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
  .px-cn.is-live .px-cn-rail .z { display: flex; align-items: center; padding: 0 .8rem; }
  .px-cn.is-live .px-cn-rail .a { flex: 2; background: rgba(31, 157, 85, .9); } .px-cn.is-live .px-cn-rail .b { flex: 6; background: rgba(0, 137, 192, calc(.25 + .7 * clamp(0, (var(--q) - .24) / .08, 1))); }
  .px-cn.is-live .px-cn-rail::after { content: ""; position: absolute; left: 0; top: 100%; height: 3px; width: calc(var(--q) * 100%); background: #fff; }
  .px-cn.is-live .px-cn-track { display: flex; gap: 1rem; width: max-content; margin-top: 1.2rem; padding-top: 1.8rem; transform: translateX(calc(var(--q) * -1 * (8 * 19rem + 7rem - 100vw + 2 * clamp(1rem, 4vw, 3.5rem)))); }
  .px-cn.is-live .px-cn-track li { flex: 0 0 18rem; opacity: calc(.45 + .55 * clamp(0, (var(--q) * 8.4 - var(--i)) * 2, 1)); }
  .px-cn.is-live .px-cn-track li:nth-child(1) { --i: 0; } .px-cn.is-live .px-cn-track li:nth-child(2) { --i: 1; } .px-cn.is-live .px-cn-track li:nth-child(3) { --i: 2; } .px-cn.is-live .px-cn-track li:nth-child(4) { --i: 3; }
  .px-cn.is-live .px-cn-track li:nth-child(5) { --i: 4; } .px-cn.is-live .px-cn-track li:nth-child(6) { --i: 5; } .px-cn.is-live .px-cn-track li:nth-child(7) { --i: 6; } .px-cn.is-live .px-cn-track li:nth-child(8) { --i: 7; }
  .px-cn.is-live .px-cn-gate { opacity: clamp(0, calc((var(--q) - .22) / .06), 1); }
}
/* CBD ou THC */
.px-cbd-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.px-cbd-text h2 { margin: .4rem 0 .8rem; }
.px-cbd-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: 1.4rem; }
.px-cbd-duo > div { padding: 1.1rem 1.2rem; color: #fff; }
.px-cbd-duo .is-cbd { background: linear-gradient(160deg, #146b37, #0f5132); } .px-cbd-duo .is-thc { background: linear-gradient(160deg, #a3222f, #7a1822); }
.px-cbd-duo h3 { margin: 0 0 .4rem; color: #fff; font-size: 1rem; } .px-cbd-duo p { margin: 0; color: #f1f5f2; font-size: .92rem; }
.px-cbd-lim { margin: 0; padding: 1.5rem; background: #fff; border: 1px solid #dde5ec; box-shadow: 0 16px 36px rgba(10, 28, 46, .06); }
.px-cbd-lim figcaption { margin-bottom: 1.1rem; color: var(--navy); font-weight: 700; }
.px-cbd-lim ul { display: grid; gap: .9rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.px-cbd-lim li { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: .8rem; align-items: center; }
.px-cbd-lim .r { color: var(--body-ink); font-size: .92rem; } .px-cbd-lim strong { color: var(--navy); font-family: var(--font-heading); font-size: 1.15rem; }
.px-cbd-lim .bar { height: .9rem; background: linear-gradient(90deg, #a3222f, #e2475a); transform-origin: left; }
.px-cbd-lim .w-100 { width: 100%; } .px-cbd-lim .w-30 { width: 30%; } .px-cbd-lim .w-20 { width: 20%; }
.px-cbd-lim.is-armed .bar { transform: scaleX(0); } .px-cbd-lim.is-armed.is-play .bar { transform: none; transition: transform 1.2s var(--ease); }
.px-cbd-lim.is-armed.is-play li:nth-child(2) .bar { transition-delay: .2s; } .px-cbd-lim.is-armed.is-play li:nth-child(3) .bar { transition-delay: .4s; }
.px-cbd-lim > p { margin: 0; color: var(--body-ink); font-size: .88rem; font-style: italic; }
/* modes de culture et extraction */
.px-grow-head, .px-cq-head, .px-nhp-head { max-width: 46rem; margin-bottom: clamp(1.6rem, 3.5vw, 2.4rem); }
.px-grow-head h2, .px-cq-head h2, .px-nhp-head h2 { margin: .4rem 0 .8rem; }
.px-grow-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; counter-reset: g; }
.px-grow-list li { counter-increment: g; padding: 1.2rem; background: #fff; border-top: 4px solid #1f9d55; }
.px-grow-list li::before { content: "0" counter(g); display: block; margin-bottom: .5rem; color: #17803f; font-family: var(--font-heading); font-size: 1.6rem; font-weight: 700; }
.px-grow-list h3 { margin: 0 0 .4rem; color: var(--navy); font-size: 1.05rem; } .px-grow-list p { margin: 0; color: var(--body-ink); font-size: .92rem; }
.px-ext { margin-top: 2rem; padding: 1.5rem; background: var(--navy); color: #fff; }
.px-ext h3 { margin: 0 0 1rem; color: #fff; font-size: 1.15rem; }
.px-ext .cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem; }
.px-ext ul { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.px-ext li { position: relative; padding-left: 2rem; font-weight: 600; }
.px-ext .ok li::before, .px-ext .no li::before { position: absolute; left: 0; top: -.05rem; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; font-size: .85rem; font-weight: 800; }
.px-ext .ok li::before { content: "\2713"; background: #1f9d55; } .px-ext .no li::before { content: "\2715"; background: #c0392b; }
.px-ext .no + p { margin: .8rem 0 0; color: #dbe9f4; font-size: .9rem; }
/* équipements */
.px-cq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.px-cq-grid > div { padding: 1.2rem 1.3rem; background: #f3f6f9; border-top: 4px solid var(--navy); }
.px-cq-grid > .is-u { border-top-color: var(--logo-blue); }
.px-cq-grid h3 { margin: 0 0 .8rem; color: var(--navy); font-size: 1.05rem; }
.px-cq-grid ul { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.px-cq-grid li { padding: .35rem .65rem; background: #fff; border: 1px solid #dde5ec; color: var(--ink); font-size: .88rem; }
.px-cq-tissue { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: 1.5rem; margin-top: 1.4rem; padding: 1.3rem 1.4rem; border-left: 5px solid #1f9d55; background: #eef7f1; }
.px-cq-tissue h3 { margin: 0; color: var(--navy); font-size: 1.1rem; } .px-cq-tissue p { margin: 0; color: var(--body-ink); }
/* produits de santé naturels */
.px-nhp-fams { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.px-nhp-fams li { overflow: hidden; background: #fff; box-shadow: 0 12px 30px rgba(10, 28, 46, .07); }
.px-nhp-fams img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s var(--ease); }
.px-nhp-fams li:hover img { transform: scale(1.04); }
.px-nhp-fams div { padding: 1rem 1.1rem 1.2rem; } .px-nhp-fams h3 { margin: 0 0 .35rem; color: var(--navy); font-size: 1.05rem; } .px-nhp-fams p { margin: 0; color: var(--body-ink); font-size: .9rem; }
.px-nhp-foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1.6rem; }
.px-nhp-foot p { margin: 0; color: var(--body-ink); font-size: .93rem; }
.px-nhp-foot h3 { margin: 0 0 .5rem; color: var(--navy); font-size: 1rem; } .px-nhp-foot ul { margin: 0; padding-left: 1.1rem; color: var(--body-ink); font-size: .93rem; }
@media (max-width: 980px) { .px-cbd-in, .px-ext .cols { grid-template-columns: minmax(0, 1fr); } .px-grow-list, .px-nhp-fams { grid-template-columns: repeat(2, minmax(0, 1fr)); } .px-cq-grid, .px-nhp-foot { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .px-grow-list, .px-nhp-fams, .px-cbd-duo { grid-template-columns: minmax(0, 1fr); } .px-cbd-lim li { grid-template-columns: 7rem minmax(0, 1fr) auto; } .px-cq-tissue { grid-template-columns: minmax(0, 1fr); gap: .5rem; } }
@media (min-width: 761px) and (max-height: 700px) { .px-cn.is-live .px-cn-head h2 { margin: .2rem 0 .4rem; font-size: 1.6rem; } .px-cn.is-live .px-cn-head p:not(.eyebrow) { font-size: .88rem; line-height: 1.45; } .px-cn.is-live .px-cn-rail { margin-top: .9rem; height: 1.8rem; } .px-cn.is-live .px-cn-track { margin-top: .6rem; padding-top: 1.6rem; } .px-cn.is-live .px-cn-track li { padding: .8rem .9rem; } .px-cn.is-live .px-cn-track p { font-size: .85rem; } .px-cn-gate { margin-top: .6rem; } }

/* ===== Santé des femmes (Réalisations, 2026-10-24) : la photo sur la droite, la carte qui la chevauche à gauche ===== */
.px-wh { position: relative; padding-block: clamp(3rem, 7vw, 6rem); overflow: hidden; background: #f3f6f9; }
.px-wh-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 62%; margin: 0; }
.px-wh-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.px-wh-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #f3f6f9 0, rgba(243, 246, 249, 0) 22%); }
.px-wh-in { position: relative; }
.px-wh-card { width: min(36rem, 100%); padding: clamp(1.5rem, 3vw, 2.4rem); background: #fff; border-top: 5px solid var(--red); box-shadow: 0 24px 60px rgba(10, 28, 46, .14); }
.px-wh-card h2 { margin: .4rem 0 .8rem; } .px-wh-card .lead { margin: 0 0 1.2rem; color: var(--body-ink); }
.px-wh-card ul { display: grid; gap: .8rem; margin: 0 0 1.4rem; padding: 0; list-style: none; }
.px-wh-card li { padding-left: 1rem; border-left: 3px solid var(--logo-blue); }
.px-wh-card li h3 { margin: 0 0 .2rem; color: var(--navy); font-size: 1rem; } .px-wh-card li p { margin: 0; color: var(--body-ink); font-size: .93rem; }
.px-wh-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.2rem; border-top: 1px solid #dde5ec; }
.px-wh-foot .stat { display: flex; align-items: center; gap: .8rem; margin: 0; }
.px-wh-foot .stat strong { color: var(--red); font-family: var(--font-heading); font-size: 3rem; font-weight: 700; line-height: 1; }
.px-wh-foot .stat span { max-width: 13rem; color: var(--navy); font-size: .9rem; font-weight: 600; }
@media (max-width: 760px) { .px-wh { padding-top: 0; } .px-wh-photo { position: relative; width: auto; height: 16rem; } .px-wh-photo::after { background: linear-gradient(0deg, #f3f6f9 0, rgba(243, 246, 249, 0) 30%); } .px-wh-in { margin-top: -3rem; } }
.px-wh-card h2 { font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.25rem); }
@media (max-width: 760px) { .px-wh-card h2 br { display: none; } }

/* ===== L'expérience alimentaire (fiche Alimentaire, 2026-10-24) ===== */
.px-fd { position: relative; display: flex; align-items: center; min-height: clamp(26rem, 48vw, 34rem); padding-block: clamp(2.5rem, 6vw, 4.5rem); overflow: hidden; isolation: isolate; }
.px-fd-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.px-fd::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6, 18, 30, .78), rgba(6, 18, 30, .2) 70%); }
.px-fd-in { width: 100%; }
.px-fd-card { width: min(38rem, 100%); padding: clamp(1.4rem, 3vw, 2.2rem); background: rgba(255, 255, 255, .97); border-top: 5px solid #1f9d55; box-shadow: 0 24px 60px rgba(6, 18, 30, .3); }
.px-fd-card h2 { margin: .4rem 0 1.2rem; }
.px-fd-card ul { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.px-fd-card li { padding: .5rem .85rem; border: 1.5px solid var(--navy); color: var(--navy); font-family: var(--font-heading); font-size: 1rem; font-weight: 600; }
.px-fd-card ul.is-armed li { opacity: 0; transform: translateY(10px); }
.px-fd-card ul.is-armed.is-play li { opacity: 1; transform: none; transition: opacity .4s, transform .5s var(--ease); }
.px-fd-card ul.is-armed.is-play li:nth-child(1) { transition-delay: 0.00s; } .px-fd-card ul.is-armed.is-play li:nth-child(2) { transition-delay: 0.07s; } .px-fd-card ul.is-armed.is-play li:nth-child(3) { transition-delay: 0.14s; } .px-fd-card ul.is-armed.is-play li:nth-child(4) { transition-delay: 0.21s; } .px-fd-card ul.is-armed.is-play li:nth-child(5) { transition-delay: 0.28s; } .px-fd-card ul.is-armed.is-play li:nth-child(6) { transition-delay: 0.35s; } .px-fd-card ul.is-armed.is-play li:nth-child(7) { transition-delay: 0.42s; } .px-fd-card ul.is-armed.is-play li:nth-child(8) { transition-delay: 0.49s; } .px-fd-card ul.is-armed.is-play li:nth-child(9) { transition-delay: 0.56s; } .px-fd-card ul.is-armed.is-play li:nth-child(10) { transition-delay: 0.63s; } .px-fd-card ul.is-armed.is-play li:nth-child(11) { transition-delay: 0.70s; }
.px-fm-head { max-width: 40rem; margin: 0 auto clamp(1.6rem, 3.5vw, 2.4rem); text-align: center; } .px-fm-head h2 { margin: .4rem 0 0; }
.px-fm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.2rem); align-items: stretch; }
.px-fm-grid .col h3 { margin: 0 0 .8rem; color: var(--navy); font-size: 1.05rem; }
.px-fm-grid ol { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; counter-reset: f; }
.px-fm-grid ol li { counter-increment: f; display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: center; padding: .45rem .6rem; background: #f3f6f9; color: var(--ink); font-size: .92rem; }
.px-fm-grid ol li::before { content: counter(f, decimal-leading-zero); color: #17803f; font-weight: 800; font-size: .8rem; }
.px-fm-grid .col:last-child ol li::before { color: var(--primary); }
.px-fm-grid .mid { position: relative; margin: 0; overflow: hidden; }
.px-fm-grid .mid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.px-fm-grid.is-armed ol li { opacity: 0; } .px-fm-grid.is-armed.is-play ol li { opacity: 1; transition: opacity .35s; }
.px-fm-grid.is-armed.is-play ol li:nth-child(1) { transition-delay: 0.00s; } .px-fm-grid.is-armed.is-play ol li:nth-child(2) { transition-delay: 0.06s; } .px-fm-grid.is-armed.is-play ol li:nth-child(3) { transition-delay: 0.12s; } .px-fm-grid.is-armed.is-play ol li:nth-child(4) { transition-delay: 0.18s; } .px-fm-grid.is-armed.is-play ol li:nth-child(5) { transition-delay: 0.24s; } .px-fm-grid.is-armed.is-play ol li:nth-child(6) { transition-delay: 0.30s; } .px-fm-grid.is-armed.is-play ol li:nth-child(7) { transition-delay: 0.36s; } .px-fm-grid.is-armed.is-play ol li:nth-child(8) { transition-delay: 0.42s; } .px-fm-grid.is-armed.is-play ol li:nth-child(9) { transition-delay: 0.48s; } .px-fm-grid.is-armed.is-play ol li:nth-child(10) { transition-delay: 0.54s; } .px-fm-grid.is-armed.is-play ol li:nth-child(11) { transition-delay: 0.60s; } .px-fm-grid.is-armed.is-play ol li:nth-child(12) { transition-delay: 0.66s; }
.px-fx-head { max-width: 46rem; margin-bottom: clamp(1.6rem, 3.5vw, 2.4rem); } .px-fx-head h2 { margin: .4rem 0 .8rem; }
.px-fx-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2rem); align-items: start; }
.px-fx-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin: 0; padding: 0; list-style: none; }
.px-fx-list li { padding: 1rem 1.1rem; background: #fff; border-top: 3px solid var(--logo-blue); }
.px-fx-list h3 { margin: 0 0 .35rem; color: var(--navy); font-size: .98rem; line-height: 1.3; } .px-fx-list p { margin: 0; color: var(--body-ink); font-size: .88rem; }
.px-fx-bal { padding: 1.4rem 1.5rem; background: var(--navy); color: #fff; }
.px-fx-bal .k { margin: 0; color: #8fd8f5; font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.px-fx-bal h3 { margin: .9rem 0 .3rem; color: #fff; font-size: 1.2rem; } .px-fx-bal .role { margin: 0 0 1rem; color: #dbe9f4; font-style: italic; }
.px-fx-bal ul { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.px-fx-bal li { position: relative; padding-left: 1rem; color: #e4eef6; font-size: .9rem; line-height: 1.45; } .px-fx-bal li::before { content: ""; position: absolute; left: 0; top: .55em; width: .4rem; height: .4rem; background: #1f9d55; }
@media (max-width: 980px) { .px-fm-grid, .px-fx-grid { grid-template-columns: minmax(0, 1fr); } .px-fm-grid .mid { height: 14rem; } .px-fx-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .px-fx-list { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 981px) { .px-fm-grid ol { grid-auto-rows: 1fr; } .px-fm-grid ol li { min-height: 3.1rem; box-sizing: border-box; } }

/* ===== La méthode, d'après ses diapositives (2026-10-24) : la règle d'or n° 1 et les 45 % (Conception des installations),
   la roue PPURS, le cycle de vie d'un projet (Gestion de projets). Sans script ou avec « réduire les animations » : tout posé. ===== */
.px-gr-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.px-gr-text h2 { margin: .4rem 0 .8rem; }
.px-gr-stat { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.5rem; margin: 1.8rem 0 0; padding: 1.4rem 1.5rem; background: #fff5f6; border-left: 6px solid var(--red); }
.px-gr-dots { display: grid; grid-template-columns: repeat(10, .62rem); gap: .24rem; }
.px-gr-dots i { width: .62rem; height: .62rem; border-radius: 2px; background: #ecd3d6; }
.px-gr-dots i.r { background: var(--red); }
.px-gr-stat p { margin: 0; }
.px-gr-stat strong { display: block; color: var(--red); font-family: var(--font-heading); font-size: clamp(2.8rem, 2.2rem + 2vw, 3.8rem); font-weight: 700; line-height: 1; white-space: nowrap; }
.px-gr-stat .l { display: block; margin-top: .5rem; color: var(--navy); font-size: 1.02rem; font-weight: 600; line-height: 1.4; }
.px-gr-stat.is-armed .px-gr-dots i.r { background: #ecd3d6; }
.px-gr-stat.is-armed.is-play .px-gr-dots i.r { background: var(--red); transition: background-color .3s; }
.px-gr-stat.is-armed.is-play .px-gr-dots i:nth-child(n+11) { transition-delay: .15s; } .px-gr-stat.is-armed.is-play .px-gr-dots i:nth-child(n+21) { transition-delay: .3s; }
.px-gr-stat.is-armed.is-play .px-gr-dots i:nth-child(n+31) { transition-delay: .45s; } .px-gr-stat.is-armed.is-play .px-gr-dots i:nth-child(n+41) { transition-delay: .6s; }
@media (max-width: 400px) { .px-gr-stat { gap: 1rem; padding: 1.2rem 1.1rem; } .px-gr-dots { grid-template-columns: repeat(10, .5rem); gap: .2rem; } .px-gr-dots i { width: .5rem; height: .5rem; } }
.px-gr-list { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.px-gr-list li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); align-items: center; padding: .6rem .8rem; background: #f3f6f9; color: var(--ink); font-size: .95rem; }
.px-gr-list .n { color: var(--primary); font-family: var(--font-heading); font-weight: 800; }
.px-gr-list li:first-child { padding: 1rem .9rem; background: var(--navy); color: #fff; font-family: var(--font-heading); font-size: 1.1rem; font-weight: 600; }
.px-gr-list li:first-child .n { color: #8fd8f5; }
.px-gr-list.is-armed li { opacity: 0; transform: translateX(14px); } .px-gr-list.is-armed.is-play li { opacity: 1; transform: none; transition: opacity .35s, transform .45s var(--ease); }
.px-gr-list.is-armed.is-play li:nth-child(1) { transition-delay: 0.00s; } .px-gr-list.is-armed.is-play li:nth-child(2) { transition-delay: 0.08s; } .px-gr-list.is-armed.is-play li:nth-child(3) { transition-delay: 0.16s; } .px-gr-list.is-armed.is-play li:nth-child(4) { transition-delay: 0.24s; } .px-gr-list.is-armed.is-play li:nth-child(5) { transition-delay: 0.32s; } .px-gr-list.is-armed.is-play li:nth-child(6) { transition-delay: 0.40s; } .px-gr-list.is-armed.is-play li:nth-child(7) { transition-delay: 0.48s; } .px-gr-list.is-armed.is-play li:nth-child(8) { transition-delay: 0.56s; } .px-gr-list.is-armed.is-play li:nth-child(9) { transition-delay: 0.64s; } .px-gr-list.is-armed.is-play li:nth-child(10) { transition-delay: 0.72s; }
.px-ur-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.px-ur-text h2 { margin: .4rem 0 .8rem; }
.px-ur-points { display: grid; gap: .5rem; margin: 1.2rem 0; padding: 0; list-style: none; }
.px-ur-points li { position: relative; padding-left: 1.2rem; color: var(--body-ink); } .px-ur-points li::before { content: ""; position: absolute; left: 0; top: .55em; width: .5rem; height: .5rem; background: var(--logo-blue); }
.px-ur-chain { display: flex; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.px-ur-chain li { padding: .45rem .9rem; border-radius: 999px; background: #fff; border: 2px solid #1f9d55; color: var(--navy); font-weight: 800; letter-spacing: .06em; }
.px-ur-chain li:nth-child(2) { border-color: var(--logo-blue); } .px-ur-chain li:nth-child(3) { border-color: var(--red); }
.px-ur-wheel { margin: 0; } .px-ur-wheel svg { display: block; width: 100%; height: auto; overflow: visible; }
.px-ur-wheel .bg { fill: #e6edf3; } .px-ur-wheel .fg { fill: var(--c, var(--logo-blue)); }
.px-ur-wheel .s-1 { --c: #e07b39; } .px-ur-wheel .s-2 { --c: #e3a72f; } .px-ur-wheel .s-3 { --c: #1f9d55; } .px-ur-wheel .s-4 { --c: #0089c0; } .px-ur-wheel .s-5 { --c: #c0392b; } .px-ur-wheel .s-6 { --c: #8a6d3b; } .px-ur-wheel .s-7 { --c: #5f8f3e; } .px-ur-wheel .s-8 { --c: #2f6fae; }
.px-ur-wheel .lb { fill: var(--navy); font-size: 16px; font-weight: 700; } .px-ur-wheel .lb .p { fill: var(--c); font-size: 21px; font-weight: 800; }
.px-ur-wheel .nb { fill: #fff; font-size: 15px; font-weight: 800; paint-order: stroke; stroke: rgba(0, 0, 0, .25); stroke-width: 2px; }
.px-ur-wheel .hub { fill: var(--navy); } .px-ur-wheel .hub-t { fill: #fff; font-size: 17px; font-weight: 800; } .px-ur-wheel .hub-s { fill: #8fd8f5; font-size: 13px; font-weight: 700; }
.px-ur-wheel .sg { transform-origin: 200px 200px; }
.px-ur-wheel.is-armed .sg { opacity: 0; transform: scale(.7) rotate(-20deg); }
.px-ur-wheel.is-armed.is-play .sg { opacity: 1; transform: none; transition: opacity .4s, transform .7s var(--ease); }
.px-ur-wheel.is-armed.is-play .s-1 { transition-delay: 0.0s; } .px-ur-wheel.is-armed.is-play .s-2 { transition-delay: 0.1s; } .px-ur-wheel.is-armed.is-play .s-3 { transition-delay: 0.2s; } .px-ur-wheel.is-armed.is-play .s-4 { transition-delay: 0.3s; } .px-ur-wheel.is-armed.is-play .s-5 { transition-delay: 0.4s; } .px-ur-wheel.is-armed.is-play .s-6 { transition-delay: 0.5s; } .px-ur-wheel.is-armed.is-play .s-7 { transition-delay: 0.6s; } .px-ur-wheel.is-armed.is-play .s-8 { transition-delay: 0.7s; }
.px-lc-head { max-width: 48rem; margin-bottom: 1.8rem; } .px-lc-head h2 { margin: .4rem 0 .8rem; }
.px-lc-chart { position: relative; padding: 1.4rem 1.4rem 1.2rem; background: #fff; border: 1px solid #dde5ec; }
.px-lc-rows { display: grid; gap: .55rem; margin: 0; padding: 0 0 .6rem; list-style: none; }
.px-lc-rows li { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1rem; align-items: center; }
.px-lc-rows .nm { margin: 0; color: var(--navy); font-size: .92rem; font-weight: 600; line-height: 1.25; } .px-lc-rows .nm span { display: block; color: var(--muted); font-size: .76rem; font-weight: 500; } .px-lc-rows .nm span:empty { display: none; }
.px-lc-rows .tr { position: relative; height: 2rem; background: repeating-linear-gradient(90deg, #eef2f6 0 1px, transparent 1px 2.5%); }
.px-lc-rows .bar { position: absolute; top: .2rem; bottom: .2rem; left: 0; width: 100%; display: flex; align-items: center; padding: 0 .35rem; box-sizing: border-box; overflow: hidden; background: var(--logo-blue); color: #fff; font-size: .72rem; font-weight: 700; white-space: nowrap; transform-origin: left; }
.px-lc-rows > li:nth-child(4) .bar, .px-lc-rows > li:nth-child(5) .bar { background: #0a5f8a; } .px-lc-rows > li:nth-child(6) .bar, .px-lc-rows > li:nth-child(7) .bar { background: var(--navy); }
.px-lc-rows.is-lanes .tr { height: 1.2rem; } .px-lc-rows.is-lanes .bar { top: .35rem; bottom: .35rem; background: #9fb2c3 !important; }
.px-lc-lt { margin: 1rem 0 .5rem; color: var(--muted); font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.px-lc-docs { position: relative; height: 2.6rem; margin: 0 0 .2rem 16rem; padding: 0; list-style: none; }
.px-lc-docs li { position: absolute; top: .8rem; transform: translateX(-50%); }
.px-lc-docs li span { display: block; padding: .2rem .45rem; border-radius: 3px; background: var(--red); color: #fff; font-size: .7rem; font-weight: 700; }
.px-lc-docs li::before { content: ""; position: absolute; left: 50%; bottom: 100%; height: .6rem; border-left: 2px solid var(--red); }
.px-lc-total { margin: .6rem 0 0; padding-top: .8rem; border-top: 1px solid #dde5ec; color: var(--body-ink); font-size: .92rem; } .px-lc-total strong { color: var(--navy); }
.px-lc-chart.is-armed .bar { transform: scaleX(0); } .px-lc-chart.is-armed .px-lc-docs li { opacity: 0; }
.px-lc-chart.is-armed.is-play .bar { transform: none; transition: transform .7s cubic-bezier(.2, .8, .2, 1); } .px-lc-chart.is-armed.is-play .px-lc-docs li { opacity: 1; transition: opacity .3s; }
.px-lc-chart.is-armed.is-play .px-lc-rows > li:nth-child(1) .bar { transition-delay: 0.00s; } .px-lc-chart.is-armed.is-play .px-lc-rows > li:nth-child(2) .bar { transition-delay: 0.22s; } .px-lc-chart.is-armed.is-play .px-lc-rows > li:nth-child(3) .bar { transition-delay: 0.44s; } .px-lc-chart.is-armed.is-play .px-lc-rows > li:nth-child(4) .bar { transition-delay: 0.66s; } .px-lc-chart.is-armed.is-play .px-lc-rows > li:nth-child(5) .bar { transition-delay: 0.88s; } .px-lc-chart.is-armed.is-play .px-lc-rows > li:nth-child(6) .bar { transition-delay: 1.10s; } .px-lc-chart.is-armed.is-play .px-lc-rows > li:nth-child(7) .bar { transition-delay: 1.32s; }
.px-lc-chart.is-armed.is-play .px-lc-docs li:nth-child(1) { transition-delay: 0.40s; } .px-lc-chart.is-armed.is-play .px-lc-docs li:nth-child(2) { transition-delay: 0.65s; } .px-lc-chart.is-armed.is-play .px-lc-docs li:nth-child(3) { transition-delay: 0.90s; } .px-lc-chart.is-armed.is-play .px-lc-docs li:nth-child(4) { transition-delay: 1.15s; } .px-lc-chart.is-armed.is-play .px-lc-docs li:nth-child(5) { transition-delay: 1.40s; } .px-lc-chart.is-armed.is-play .px-lc-docs li:nth-child(6) { transition-delay: 1.65s; } .px-lc-chart.is-armed.is-play .px-lc-docs li:nth-child(7) { transition-delay: 1.90s; } .px-lc-chart.is-armed.is-play .px-lc-docs li:nth-child(8) { transition-delay: 2.15s; } .px-lc-chart.is-armed.is-play .px-lc-docs li:nth-child(9) { transition-delay: 2.40s; }
.px-lc-gloss { margin-top: 1.2rem; }
.px-lc-gloss summary { display: inline-block; padding: .6rem 0; color: var(--sky-shade); font-weight: 700; cursor: pointer; }
.px-lc-gloss dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem 1.5rem; margin: .6rem 0 0; }
.px-lc-gloss dl div { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: .5rem; padding: .35rem 0; border-bottom: 1px solid #dde5ec; font-size: .88rem; }
.px-lc-gloss dt { color: var(--red); font-weight: 800; } .px-lc-gloss dd { margin: 0; color: var(--body-ink); }
@media (max-width: 980px) { .px-gr-in, .px-ur-in { grid-template-columns: minmax(0, 1fr); } .px-lc-gloss dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .px-lc-rows li { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .px-lc-docs { display: flex; flex-wrap: wrap; gap: .4rem; height: auto; margin-left: 0; } .px-lc-docs li { position: static; transform: none; } .px-lc-docs li::before { display: none; }
  .px-lc-gloss dl { grid-template-columns: minmax(0, 1fr); }
}
.px-ur-wheel .nb.is-small { fill: var(--navy); stroke: none; }
@media (max-width: 760px) { .px-lc-head h2 br { display: none; } }

/* ===== Gestion de chantier (26 tâches) et programme de formation BPF (2026-10-24) ===== */
.px-cw-head { max-width: 46rem; } .px-cw-head { margin-bottom: clamp(1.6rem, 3.5vw, 2.4rem); }
.px-cw-head h2 { margin: .4rem 0 .8rem; }
.px-cw-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; padding: 1rem; background: repeating-linear-gradient(-45deg, #f5c518 0 14px, #1b1b1b 14px 28px); }
.px-cw-board .col { padding: 1.1rem 1rem 1.2rem; background: #fff; }
.px-cw-board .h { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin: 0 0 .8rem; padding-bottom: .6rem; border-bottom: 2px solid var(--navy); color: var(--navy); font-weight: 800; }
.px-cw-board .h .c { display: grid; place-items: center; min-width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--navy); color: #fff; font-size: .8rem; }
.px-cw-board ul { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.px-cw-board li { position: relative; padding-left: 1.7rem; color: var(--ink); font-size: .9rem; line-height: 1.4; }
.px-cw-board li::before { content: ""; position: absolute; left: 0; top: .1rem; width: 1.05rem; height: 1.05rem; border: 2px solid #1f9d55; border-radius: 3px; }
.px-cw-board li::after { content: ""; position: absolute; left: .38rem; top: .22rem; width: .32rem; height: .62rem; border: solid #1f9d55; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.px-cw-board.is-armed li::after { opacity: 0; transform: rotate(45deg) scale(.4); }
.px-cw-board.is-armed.is-play li::after { opacity: 1; transform: rotate(45deg); transition: opacity .2s, transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.px-cw-board.is-armed.is-play li:nth-child(1)::after { transition-delay: 0.15s; } .px-cw-board.is-armed.is-play li:nth-child(2)::after { transition-delay: 0.27s; } .px-cw-board.is-armed.is-play li:nth-child(3)::after { transition-delay: 0.39s; } .px-cw-board.is-armed.is-play li:nth-child(4)::after { transition-delay: 0.51s; } .px-cw-board.is-armed.is-play li:nth-child(5)::after { transition-delay: 0.63s; } .px-cw-board.is-armed.is-play li:nth-child(6)::after { transition-delay: 0.75s; } .px-cw-board.is-armed.is-play li:nth-child(7)::after { transition-delay: 0.87s; } .px-cw-board.is-armed.is-play li:nth-child(8)::after { transition-delay: 0.99s; }
@media (max-width: 980px) { .px-cw-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .px-cw-board { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .px-cw-head h2 br { display: none; } }

/* >>> programme de FormAction™ (formation-programme.cjs ; son choix F5 du 2026-10-25) : panneau clair, photo fondue à
   droite, sceau « Certifié par PBE Expert », acquis symétriques, six cartes (cinq modules à photo fine, l'invitation),
   médaille réaliste. Sans script ou avec « réduire les animations » : la médaille et sa coche sont posées. */
.px-tq { padding-bottom: clamp(3rem, 6vw, 5rem); }
.px-tq-band { position: relative; overflow: hidden; background: linear-gradient(100deg, #fff 0%, #eef6fb 55%, #dcedf8 100%); color: var(--navy); }
.px-tq-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 48%; margin: 0; }
.px-tq-photo img { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 14%, #000 40%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 14%, #000 40%); }
.px-tq-photo figcaption { position: absolute; right: 1.2rem; bottom: 1.2rem; z-index: 2; padding: .5rem .9rem; background: var(--red); color: #fff; font-weight: 800; letter-spacing: .04em; }
.px-tq-in { position: relative; padding-block: clamp(3rem, 6vw, 5rem); }
.px-tq-text { width: min(37rem, 54%); }
.px-tq-text .eyebrow { color: color-mix(in srgb, var(--primary) 82%, #000); }
.px-tq-title { display: flex; align-items: center; gap: 1.4rem; margin: .4rem 0 .9rem; }
.px-tq-title h2 { margin: 0; color: var(--navy); } .px-tq-title h2 strong { color: var(--primary); }
.px-tq-text > p:not(.eyebrow) { margin: 0 0 1.5rem; color: var(--body-ink); }
.px-tq-text h3 { margin: 0 0 .8rem; color: var(--navy); font-size: 1.05rem; }
.px-tq-out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1.4rem; margin: 0; padding: 0; list-style: none; }
.px-tq-out li { position: relative; display: flex; align-items: center; min-height: calc(2 * 1.45em); padding-left: 1.8rem; color: var(--body-ink); font-size: .9rem; line-height: 1.45; text-wrap: balance; }
.px-tq-out li::before { content: "\2713"; position: absolute; left: 0; top: 50%; display: grid; place-items: center; width: 1.2rem; height: 1.2rem; margin-top: -.6rem; border-radius: 50%; background: color-mix(in srgb, var(--cyan) 72%, #000); color: #fff; font-size: .72rem; font-weight: 800; }
.px-tq-out li:nth-child(4n+2)::before, .px-tq-out li:nth-child(4n+3)::before { background: var(--red); }
.px-fa-seal { flex: none; width: 7.4rem; height: auto; overflow: visible; }
.px-fa-seal .rose { fill: var(--navy); } .px-fa-seal .i { fill: #fff; stroke: var(--cyan); stroke-width: 2; }
.px-fa-seal .rb.a { fill: var(--cyan); } .px-fa-seal .rb.b { fill: var(--red); }
.px-fa-seal .s { fill: var(--navy); font-family: var(--font-body); font-size: 7.2px; font-weight: 800; letter-spacing: .16em; text-anchor: middle; }
.px-fa-seal .pbe { font-family: var(--font-heading); font-size: 25px; font-weight: 800; letter-spacing: .04em; text-anchor: middle; stroke-width: .9px; paint-order: stroke; }
.px-fa-seal .pbe .p { fill: var(--cyan); stroke: var(--cyan); } .px-fa-seal .pbe .b { fill: var(--red); stroke: var(--red); } .px-fa-seal .pbe .e { fill: var(--primary); stroke: var(--primary); }
.px-tq-grid { list-style: none; margin: clamp(2.2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.px-tq-grid > li { --c: var(--cyan); display: grid; grid-template-rows: auto 1fr; background: #fff; border: 1px solid var(--line); border-bottom: 4px solid var(--c); box-shadow: 0 1.2rem 2.4rem -1.8rem rgba(10, 28, 46, .45); }
.px-tq-grid > li.is-b { --c: var(--red); } .px-tq-grid > li.is-e { --c: var(--primary); }
.px-tq-grid figure { position: relative; margin: 0; }
.px-tq-grid figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 5; object-fit: cover; }
.px-tq-grid .n { position: absolute; left: 1rem; bottom: -1.2rem; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; background: color-mix(in srgb, var(--c) 72%, #000); color: #fff; font: 800 1rem var(--font-heading); }
.px-tq-grid .bd { padding: 1.7rem 1.2rem 1.2rem; }
.px-tq-grid h3 { margin: 0 0 .6rem; color: var(--navy); font-size: 1.08rem; }
.px-tq-grid ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .25rem; color: var(--body-ink); font-size: .86rem; }
.px-tq-grid .is-join { position: relative; overflow: hidden; background: radial-gradient(28rem 18rem at 100% 100%, rgba(0, 137, 192, .45), transparent 65%), var(--navy); border: 0; border-top: 5px solid; border-image: linear-gradient(90deg, var(--cyan) 0 33.3%, var(--red) 33.3% 66.6%, var(--primary) 66.6%) 1; }
.px-tq-grid .is-join .bd { position: relative; display: grid; align-content: center; gap: .55rem; padding: 1.8rem 1.6rem; }
.px-tq-grid .is-join .px-fa-seal { position: absolute; right: -1.6rem; bottom: -2.2rem; width: 9.5rem; opacity: .16; transform: rotate(-14deg); }
.px-tq-grid .is-join .px-fa-seal .rose { fill: #fff; } .px-tq-grid .is-join .px-fa-seal .i { fill: var(--navy); } .px-tq-grid .is-join .px-fa-seal .s { fill: #fff; }
.px-tq-grid .is-join .k { margin: 0; color: #8fd8f5; font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.px-tq-grid .is-join h3 { margin: .8rem 0 0; color: #fff; font-size: clamp(1.35rem, 1.1rem + .8vw, 1.7rem); line-height: 1.15; } .px-tq-grid .is-join h3 strong { color: #8fd8f5; }
.px-tq-grid .is-join p:not(.k):not(.go) { margin: 0; color: #dbe9f4; font-size: .92rem; }
.px-tq-grid .is-join .go { margin: .5rem 0 0; } .px-tq-grid .is-join .button { gap: .55rem; }
.px-tq-cert { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2.4rem); align-items: center; max-width: 52rem; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; padding: clamp(1.2rem, 3vw, 2rem); background: linear-gradient(135deg, #fff, #fdf6f7); border: 1px solid #ecd9dc; box-shadow: 0 1.4rem 2.6rem -1.8rem rgba(10, 28, 46, .35); }
.px-tq-cert .medal svg { display: block; width: clamp(7rem, 12vw, 9rem); height: auto; overflow: visible; filter: drop-shadow(0 6px 10px rgba(80, 55, 5, .28)); }
.px-tq-cert .eng { fill: #7a5a0e; font-family: var(--font-body); font-size: 7.6px; font-weight: 800; letter-spacing: .08em; }
.px-tq-cert .ck { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 80; }
.px-tq-cert .k { margin: 0; color: var(--red); font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.px-tq-cert h3 { margin: .8rem 0 .5rem; color: var(--navy); font-family: var(--font-heading); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.px-tq-cert .tx p:not(.k) { margin: 0; color: var(--body-ink); }
.px-tq-cert.is-armed .medal { transform: scale(1.8) rotate(-12deg); opacity: 0; } .px-tq-cert.is-armed .ck { stroke-dashoffset: 80; }
.px-tq-cert.is-armed.is-play .medal { transform: none; opacity: 1; transition: transform .6s cubic-bezier(.3, 1.4, .5, 1) .2s, opacity .3s .2s; }
.px-tq-cert.is-armed.is-play .ck { stroke-dashoffset: 0; transition: stroke-dashoffset .6s ease .8s; }
@media (max-width: 980px) {
  .px-tq-photo { position: relative; width: auto; height: 18rem; }
  .px-tq-photo img { -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 45%); mask-image: linear-gradient(0deg, transparent 0%, #000 45%); }
  .px-tq-text { width: auto; } .px-tq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) { .px-fa-seal.is-head { width: 5.4rem; } .px-tq-title { gap: 1rem; } .px-tq-out { grid-template-columns: minmax(0, 1fr); } .px-tq-out li { min-height: 0; max-width: 22rem; } .px-tq-out li:nth-child(n)::before { background: color-mix(in srgb, var(--cyan) 72%, #000); } .px-tq-out li:nth-child(2n)::before { background: var(--red); } }
@media (max-width: 560px) { .px-tq-grid { grid-template-columns: minmax(0, 1fr); } .px-tq-cert { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } }
/* <<< programme de FormAction™ */
/* partenaires industriels : une couleur par unité d'affaires de GreenTech, la tuile « Devenez partenaire » sur toute la ligne */
.px-indus li.is-eq { border-top-color: var(--logo-blue); } .px-indus li.is-pr { border-top-color: var(--red); } .px-indus li.is-pk { border-top-color: #0a5f8a; } .px-indus li.is-en { border-top-color: #1f9d55; } .px-indus li.is-pa { border-top-color: var(--navy); }
.px-indus li.is-eq .px-indus-tag { color: var(--primary); } .px-indus li.is-pk .px-indus-tag { color: #0a5f8a; } .px-indus li.is-en .px-indus-tag { color: #17803f; } .px-indus li.is-pa .px-indus-tag { color: var(--navy); }
.px-indus li.px-indus-you { grid-column: 1 / -1; }
/* le flacon (Pharmaceutique), ses retours du 2026-10-24 : la phrase en légende sur la ligne, plus sur le flacon ; le
   panneau blanc à cheval sur le bas de l'image et l'espace blanc qui suit, avec une ombre légère dessous */
.px-vial-cap { max-width: 34rem; margin: .8rem auto 0; color: #e4eef6; text-align: center; }
.px-vial.is-live .px-vial-cap { position: absolute; left: clamp(1rem, 4vw, 3.5rem); bottom: 14vh; margin: 0; padding: .9rem 1.1rem; max-width: 26rem; background: rgba(6, 18, 30, .78); border-left: 4px solid var(--cyan); text-align: left; font-size: 1.05rem; opacity: clamp(0, min(calc((var(--p, 0) - .5) / .05), calc((.95 - var(--p, 0)) / .05)), 1); }
.px-vial-bridge { position: relative; z-index: 4; height: 0; }
.px-vial-bridge .px-vial-panel { position: absolute; left: 50%; top: 0; bottom: auto; width: min(60rem, calc(100% - 2.5rem)); transform: translate(-50%, -50%); opacity: 1; box-shadow: 0 26px 30px -20px rgba(10, 28, 46, .45), 0 2px 6px rgba(10, 28, 46, .08); }
.px-vial { margin-bottom: 0; }
.px-vial-stick { padding-bottom: 7rem; }
.px-vial.is-live .px-vial-stick { padding-bottom: 0; }
.px-vial-bridge + .section { padding-top: calc(clamp(3rem, 6vw, 5rem) + 3.5rem); }
@media (max-width: 760px) { .px-vial-panel > p:first-child br { display: none; } .px-vial-bridge + .section { padding-top: calc(clamp(3rem, 6vw, 5rem) + 7rem); } .px-vial.is-live .px-vial-cap { right: 1rem; bottom: 10vh; } }

/* ===== Au sein du Groupe PBE : PBE Rénov (Gestion de projets, 2026-10-24) ===== */
.px-rv-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(1.2rem, 3vw, 2.4rem); align-items: center; padding: clamp(1.3rem, 3vw, 2rem); background: #fff; border-left: 6px solid var(--red); box-shadow: 0 16px 40px rgba(10, 28, 46, .08); }
.px-rv-logo { width: clamp(8rem, 14vw, 11rem); height: auto; }
.px-rv-text h2 { margin: .5rem 0 .4rem; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); }
.px-rv-text p:not(.eyebrow) { margin: 0; color: var(--body-ink); }
.px-rv-go { background: var(--navy); color: #fff; }
@media (max-width: 760px) { .px-rv-card { grid-template-columns: minmax(0, 1fr); } }

/* ===== Technologies installées (Désinfection, refait le 2026-10-24) : les preuves, puis quatre panneaux photo par lieu ===== */
.px-ds-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: end; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.px-ds-head h2 { margin: .4rem 0 .8rem; } .px-ds-head .px-intro { margin: 0; }
.px-ds-proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: 0; padding: 0; list-style: none; }
.px-ds-proof li { padding: 1.2rem 1.2rem 1.3rem; background: var(--navy); color: #fff; }
.px-ds-proof li + li { background: #0a5276; }
.px-ds-proof strong { display: block; color: #fff; font-family: var(--font-heading); font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); font-weight: 700; line-height: 1; }
.px-ds-proof sub { font-size: .45em; }
.px-ds-proof li > span { display: block; margin-top: .6rem; color: #dbe9f4; font-size: .88rem; line-height: 1.45; }
.px-ds-proof.is-armed li { opacity: 0; transform: translateY(14px); } .px-ds-proof.is-armed.is-play li { opacity: 1; transform: none; transition: opacity .4s, transform .5s var(--ease); } .px-ds-proof.is-armed.is-play li + li { transition-delay: .2s; }
.px-ds-zones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.px-ds-zone { overflow: hidden; background: #fff; box-shadow: 0 14px 34px rgba(10, 28, 46, .08); }
.px-ds-zone figure { position: relative; margin: 0; height: clamp(9rem, 15vw, 12rem); overflow: hidden; }
.px-ds-zone figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.px-ds-zone:hover figure img { transform: scale(1.05); }
.px-ds-zone figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 18, 30, .85), rgba(6, 18, 30, .2) 75%); }
.px-ds-zone figcaption { position: absolute; left: 1.2rem; right: 1.2rem; bottom: 1rem; z-index: 1; display: flex; align-items: center; gap: .9rem; color: #dbe9f4; font-size: .85rem; }
.px-ds-zone figcaption strong { display: block; color: #fff; font-family: var(--font-heading); font-size: 1.3rem; font-weight: 600; }
.px-ds-zone figcaption .c { flex: none; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--c); color: #fff; font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700; }
.px-ds-zone.z-1 { --c: var(--logo-blue); } .px-ds-zone.z-2 { --c: var(--red); } .px-ds-zone.z-3 { --c: #1f9d55; } .px-ds-zone.z-4 { --c: #0a5f8a; }
.px-ds-zone figure { border-bottom: 4px solid var(--c); }
.px-ds-zone ul { display: grid; margin: 1.3rem 0 0; padding: 0 1.2rem .9rem; list-style: none; }
.px-ds-zone li:first-child { padding-top: 0; }
.px-ds-zone li { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: .3rem 1rem; padding: .7rem 0; border-bottom: 1px solid #e3e9ef; }
.px-ds-zone li:last-child { border-bottom: 0; }
.px-ds-zone .nm { color: var(--navy); font-weight: 800; }
.px-ds-zone .nm::before { content: ""; display: inline-block; width: .55rem; height: .55rem; margin-right: .5rem; border-radius: 50%; background: var(--c); vertical-align: .05em; }
.px-ds-zone .d { color: var(--body-ink); font-size: .92rem; line-height: 1.45; }
.px-ds-zone.is-armed li { opacity: 0; transform: translateX(-10px); } .px-ds-zone.is-armed.is-play li { opacity: 1; transform: none; transition: opacity .35s, transform .45s var(--ease); }
.px-ds-zone.is-armed.is-play li:nth-child(2) { transition-delay: .1s; } .px-ds-zone.is-armed.is-play li:nth-child(3) { transition-delay: .2s; } .px-ds-zone.is-armed.is-play li:nth-child(4) { transition-delay: .3s; }
@media (max-width: 980px) { .px-ds-head, .px-ds-zones { grid-template-columns: minmax(0, 1fr); } .px-ds-head h2 br { display: none; } }
@media (max-width: 560px) { .px-ds-proof { grid-template-columns: minmax(0, 1fr); } .px-ds-zone li { grid-template-columns: minmax(0, 1fr); } }
.px-pagehead > img.is-flip { transform: scaleX(-1); }

/* ===== Une expertise reconnue (À propos, juste après le haut de page, 2026-10-24) : trois cartes d'accréditation ===== */
.px-acc3 { background: linear-gradient(180deg, #f3f6f9, #fff); }
.px-acc3-head { max-width: 44rem; margin: 0 auto clamp(1.8rem, 4vw, 2.6rem); text-align: center; }
.px-acc3-head h2 { margin: .4rem 0 .6rem; } .px-acc3-head p:not(.eyebrow) { margin: 0; color: var(--body-ink); }
.px-acc3-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.6rem); margin: 0; padding: 0; list-style: none; }
.px-acc3-list > li { --c: var(--logo-blue); position: relative; display: flex; flex-direction: column; padding: 1.6rem 1.5rem 1.7rem; background: #fff; border: 1px solid #dde5ec; border-top: 6px solid var(--c); box-shadow: 0 18px 40px rgba(10, 28, 46, .07); }
.px-acc3-list > li.is-hc { --c: #d52b1e; } .px-acc3-list > li.is-mapaq { --c: #095797; } .px-acc3-list > li.is-cpmt { --c: var(--navy); }
.px-acc3-mark { display: flex; align-items: center; height: 4.2rem; margin-bottom: 1.2rem; padding-bottom: 1.1rem; border-bottom: 1px solid #e3e9ef; }
.px-acc3-logo { display: block; width: auto; max-width: 100%; }
.px-acc3-logo.is-hc { height: 1.9rem; } .px-acc3-logo.is-mapaq { height: 3.4rem; } .px-acc3-logo.is-cpmt { height: 3.4rem; filter: brightness(0) saturate(100%); }
.px-acc3-list h3 { margin: 0 0 .5rem; color: var(--navy); font-size: 1.2rem; }
.px-acc3-list p { margin: 0; color: var(--body-ink); font-size: .95rem; }
.px-acc3-seal { position: absolute; top: 1.1rem; right: 1.1rem; width: 3rem; height: 3rem; }
.px-acc3-seal svg { width: 100%; height: 100%; fill: none; stroke: var(--c); }
.px-acc3-seal circle { stroke-width: 3; } .px-acc3-seal circle + circle { stroke-width: 1.5; stroke-dasharray: 3 3; } .px-acc3-seal path { stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.px-acc3-list.is-armed > li { opacity: 0; transform: translateY(18px); } .px-acc3-list.is-armed .px-acc3-seal { opacity: 0; transform: scale(2) rotate(-20deg); }
.px-acc3-list.is-armed.is-play > li { opacity: 1; transform: none; transition: opacity .45s, transform .55s var(--ease); }
.px-acc3-list.is-armed.is-play .px-acc3-seal { opacity: 1; transform: rotate(-8deg); transition: opacity .25s .5s, transform .45s cubic-bezier(.3, 1.5, .5, 1) .5s; }
.px-acc3-list.is-armed.is-play > li:nth-child(2), .px-acc3-list.is-armed.is-play > li:nth-child(2) .px-acc3-seal { transition-delay: .15s; } .px-acc3-list.is-armed.is-play > li:nth-child(3), .px-acc3-list.is-armed.is-play > li:nth-child(3) .px-acc3-seal { transition-delay: .3s; }
@media (max-width: 860px) { .px-acc3-list { grid-template-columns: minmax(0, 1fr); } }
.px-acc3-list > li { margin-top: 1.5rem; }
.px-acc3-seal { top: -1.6rem; right: 1.2rem; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: #fff; box-shadow: 0 6px 16px rgba(10, 28, 46, .15); }

/* ===== Carrières, ses retours du 2026-10-24 ===== */
.px-adl.is-hero { min-height: clamp(30rem, 46vw, 40rem); }
.px-adl.is-hero h1 { margin: .5rem 0 1rem; font-size: clamp(2rem, 1.3rem + 2.2vw, 3rem); line-height: 1.1; }
.px-adl.is-hero h1 strong { color: var(--sky-deep); }
.px-join-band .wrap { padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.px-join-band h2 { margin: 0 0 1rem; color: #fff; font-size: clamp(2rem, 1.3rem + 2.2vw, 3rem); } .px-join-band h2 strong { color: inherit; }
.px-join-band .lead { color: #e4eef6; }
.px-join-band-act { margin: 1.6rem 0 0; }
/* le badge qui se retourne : au survol (souris) ou au bouton (toucher, clavier) */
.px-badge-card { position: relative; margin-top: -.35rem; perspective: 1400px; transform-origin: 50% -6rem; }
.px-badge-inner { display: grid; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.3, .8, .3, 1); }
.px-badge-inner > .px-badge { grid-area: 1 / 1; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.px-badge.is-back { display: flex; flex-direction: column; transform: rotateY(180deg); }
@media (hover: hover) { .px-badge-hang:hover .px-badge-inner { transform: rotateY(180deg); } }
.px-badge-card.is-flipped .px-badge-inner { transform: rotateY(180deg); }
/* toute la carte se touche pour la retourner (sa demande du 2026-10-24 : pas d'icône, le survol suffit sur ordinateur) */
.px-badge-turn { position: absolute; inset: 0; z-index: 3; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.px-badge-turn:focus-visible { outline: 3px solid var(--logo-blue); outline-offset: 6px; }
.px-badge-skills { flex: 1; padding: .9rem 1rem 0; }
.px-badge-skills .k { margin: .7rem 0 .4rem; color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.px-badge-skills .k:first-child { margin-top: 0; }
.px-badge-skills ul { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.px-badge-skills li { position: relative; padding-left: 1.2rem; color: var(--navy); font-size: .84rem; font-weight: 600; line-height: 1.35; }
.px-badge-skills li::before { content: "\2713"; position: absolute; left: 0; color: #1f9d55; font-weight: 800; }
.px-badge-skills .is-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.px-badge-skills .is-tags li { padding: .2rem .55rem; border: 1px solid #c9d5df; border-radius: 99px; font-size: .78rem; }
.px-badge-skills .is-tags li::before { content: none; }
.px-badge.is-back .px-badge-foot { margin-top: auto; padding-top: .9rem; }

/* ===== Carrières, postes ouverts (2026-10-24) : le tableau d'affichage, comme un tableau des départs ===== */
.px-tab-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.px-tab-head h2 { margin: 0 0 1rem; } .px-tab-head .px-intro { margin: 0; }
/* en clair depuis sa demande du 2026-10-27 (« je déteste ce bleu navy », le point vert « fait gimmick ») */
.px-tab { position: relative; border: 1px solid #d6e2ea; background: #fff; color: var(--body-ink); box-shadow: 0 1.6rem 3rem -2.2rem rgba(10, 40, 70, .35); }
.px-tab::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: linear-gradient(90deg, var(--cyan) 0 33.3%, var(--red) 33.3% 66.6%, var(--primary) 66.6%); }
.px-tab-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.05rem 1.5rem; border-bottom: 1px solid #d6e2ea; background: linear-gradient(180deg, #eef7fc, #f8fbfd); }
.px-tab-brand { font-family: var(--font-heading); font-size: .95rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); }
.px-tab-brand i { font-style: normal; color: var(--logo-blue); } .px-tab-brand i:nth-child(2) { color: var(--red); } .px-tab-brand i:nth-child(3) { color: var(--primary); }
.px-tab-clock { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.px-tab-clock > span:first-child { margin-right: .4rem; color: #5d6d7a; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.px-tab-cols, .px-tab-row summary { display: grid; grid-template-columns: 4.8rem minmax(0, 1fr) 9.5rem 10rem 13rem 1rem; align-items: center; gap: 1rem; padding-inline: 1.5rem; }
.px-tab-cols { padding-block: .7rem; border-bottom: 1px solid #d6e2ea; color: #5d6d7a; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.px-tab-cols span:last-child { grid-column: span 2; }
.px-tab-rows { margin: 0; padding: 0; list-style: none; }
.px-tab-row + .px-tab-row { border-top: 1px solid #e3ebf1; }
.px-tab-row summary { position: relative; min-height: 4.6rem; padding-block: 1rem; list-style: none; cursor: pointer; transition: background .2s; }
.px-tab-row summary::-webkit-details-marker { display: none; }
.px-tab-row summary:hover, .px-tab-row details[open] summary { background: #f2f8fc; }
.px-tab-row summary:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; }
.px-tab-row summary::after { content: ""; width: .6rem; height: .6rem; border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: translateY(-.2rem) rotate(45deg); transition: transform .25s var(--ease); }
.px-tab-row details[open] summary::after { transform: translateY(.1rem) rotate(-135deg); }
.px-tab .c-code { color: var(--primary); font-family: var(--font-heading); font-size: .95rem; font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.px-tab .c-title { color: var(--navy); font-family: var(--font-heading); font-size: 1.15rem; font-weight: 600; line-height: 1.3; }
.px-tab .c-type, .px-tab .c-xp { color: var(--body-ink); font-size: .93rem; }
.px-tab .c-status { color: var(--navy); font-size: .9rem; font-weight: 600; }
.px-tab .led { display: none; }
.px-tab-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 2.5rem; padding: 1.6rem 1.5rem 1.7rem 7.3rem; border-top: 1px solid #e3ebf1; background: #f7fbfd; color: var(--ink); }
.px-tab-body h3 { margin: 0 0 .5rem; color: var(--navy); font-family: var(--font-heading); font-size: 1.05rem; font-weight: 600; }
.px-tab-body.is-poste { grid-template-columns: minmax(0, 1fr); }
.px-tab-sum { margin: 0; color: var(--body-ink); }
.px-tab-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.px-tab-chips li { padding: .25rem .6rem; border: 1px solid var(--line); background: var(--surface); color: var(--navy); font-size: .82rem; font-weight: 600; }
.px-tab-go { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.6rem; margin: .3rem 0 0; }
.px-tab-more { color: var(--primary); font-weight: 700; }
.px-tab-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin: 0; padding: 1.1rem 1.5rem; border-top: 1px solid #d6e2ea; }
.px-tab-all { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; color: var(--navy); font-weight: 700; text-underline-offset: .25em; }
.px-tab-all::after { content: "→"; color: var(--primary); }
/* l'arrivée : les lignes se retournent une à une, comme les palettes d'un tableau des départs */
.px-tab.is-armed .px-tab-row summary { opacity: 0; transform: perspective(700px) rotateX(-85deg); transform-origin: 50% 0; }
.px-tab.is-armed.is-play .px-tab-row summary { opacity: 1; transform: none; transition: opacity .3s, transform .6s cubic-bezier(.3, 1.4, .5, 1); }
.px-tab.is-armed.is-play .px-tab-row:nth-child(2) summary { transition-delay: .14s; } .px-tab.is-armed.is-play .px-tab-row:nth-child(3) summary { transition-delay: .28s; }
.px-tab.is-armed.is-play .px-tab-row:nth-child(4) summary { transition-delay: .42s; } .px-tab.is-armed.is-play .px-tab-row:nth-child(n+5) summary { transition-delay: .56s; }
@media (max-width: 1100px) { .px-tab-cols, .px-tab-row summary { grid-template-columns: 4.2rem minmax(0, 1fr) 8.5rem 11.5rem 1rem; } .px-tab .c-xp, .px-tab-cols span:nth-child(4) { display: none; } }
@media (max-width: 760px) {
  .px-tab-cols { display: none; }
  .px-tab-top { padding-inline: 1.1rem; }
  .px-tab-row summary { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "code status" "title title" "type xp"; gap: .5rem 1rem; padding: 1.1rem 2.8rem 1.1rem 1.1rem; }
  .px-tab .c-code { grid-area: code; } .px-tab .c-status { grid-area: status; justify-self: end; } .px-tab .c-title { grid-area: title; }
  .px-tab .c-type { grid-area: type; } .px-tab .c-xp { grid-area: xp; display: block; justify-self: end; text-align: right; }
  .px-tab-row summary::after { position: absolute; right: 1.2rem; top: 50%; }
  .px-tab-body { grid-template-columns: minmax(0, 1fr); padding: 1.3rem 1.1rem 1.4rem; }
  .px-tab-foot { padding-inline: 1.1rem; }
}

/* ===== Offres d'emploi (/carrieres/postes, 2026-10-24) ===== */
.px-of-head { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(3rem, 2rem + 4vw, 5.5rem); background: linear-gradient(180deg, #eef3f7, #fff); }
.px-of-head-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(2.5rem, 5vw, 5rem); }
.px-of-head h1 { margin: .3rem 0 1.1rem; font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.4rem); line-height: 1.02; }
.px-of-head .lead { max-width: 34rem; margin: 0; }
.px-of-facts { display: flex; margin: 2rem 0; padding: 0; list-style: none; border-block: 1px solid #d5dfe7; }
.px-of-facts li { flex: 1; padding: 1rem 1rem 1rem 0; }
.px-of-facts li + li { padding-left: 1.2rem; border-left: 1px solid #d5dfe7; }
.px-of-facts strong { display: block; color: var(--navy); font-family: var(--font-heading); font-size: clamp(1.9rem, 1.4rem + 1.5vw, 2.6rem); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.px-of-facts span { display: block; margin-top: .35rem; color: var(--muted); font-size: .88rem; }
.px-of-act { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.8rem; margin: 0; }
.px-of-why { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; color: var(--navy); font-weight: 700; text-underline-offset: .25em; }
.px-of-why::after { content: "→"; }
.px-of-photo { position: relative; isolation: isolate; margin: 0 1.4rem 1.4rem 0; }
.px-of-photo::before { content: ""; position: absolute; inset: 1.4rem -1.4rem -1.4rem 1.4rem; z-index: -1; background: var(--navy); }
.px-of-photo::after { content: ""; position: absolute; left: -.7rem; top: 2rem; width: .7rem; height: 5rem; background: var(--red); }
.px-of-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.px-of-sec-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 2.8rem); }
.px-of-sec-head h2 { margin: 0 0 1rem; } .px-of-sec-head .px-intro { margin: 0; }
.px-of-tools { display: grid; gap: .9rem; margin-bottom: 1.4rem; }
.px-of-search input { max-width: 34rem; }
.px-of-facet { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.px-of-facet > span { margin-right: .4rem; color: var(--muted); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.px-of-facet button { min-height: 2.75rem; padding: .4rem .9rem; border: 1px solid #c9d5df; background: #fff; color: var(--navy); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.px-of-facet button[aria-pressed="true"] { border-color: var(--navy); background: var(--navy); color: #fff; }
.px-of-count { margin: 0 0 1rem; color: var(--navy); font-weight: 700; }
.px-of-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 1.2rem; margin: 0; padding: 0; list-style: none; }
.px-of-card { --c: var(--cyan); position: relative; display: flex; flex-direction: column; padding: 1.5rem 1.5rem 1.3rem; background: #fff; border: 1px solid #dde5ec; border-top: 5px solid var(--c); box-shadow: 0 14px 30px rgba(10, 28, 46, .06); transition: transform .3s var(--ease), box-shadow .3s; }
.px-of-card:hover { transform: translateY(-4px); box-shadow: 0 24px 46px rgba(10, 28, 46, .13); }
.px-of-card.is-b { --c: var(--red); } .px-of-card.is-e { --c: var(--primary); }
.px-of-meta { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 .8rem; color: var(--muted); font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.px-of-meta .code { color: var(--c); font-variant-numeric: tabular-nums; }
.px-of-card.is-p .px-of-meta .code { color: var(--primary); } /* le cyan du logo est trop pâle sur blanc en petit */
.px-of-card h3 { margin: 0 0 .9rem; font-family: var(--font-heading); font-size: 1.3rem; font-weight: 600; line-height: 1.25; }
.px-of-card h3 a { color: var(--navy); text-decoration: none; }
.px-of-card h3 a::after { content: ""; position: absolute; inset: 0; }
.px-of-card h3 a:focus-visible { outline: none; } .px-of-card:has(h3 a:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.px-of-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.px-of-chips li { padding: .25rem .6rem; border: 1px solid var(--line); background: var(--surface); color: var(--navy); font-size: .82rem; font-weight: 600; }
.px-of-sum { margin: 0 0 1.2rem; color: var(--body-ink); font-size: .96rem; }
.px-of-miss { display: grid; gap: .4rem; margin: 0 0 1.2rem; padding: 0; list-style: none; }
.px-of-miss li { position: relative; padding-left: 1.2rem; color: var(--body-ink); font-size: .94rem; line-height: 1.45; }
.px-of-miss li::before { content: ""; position: absolute; left: 0; top: .55em; width: .45rem; height: .45rem; background: var(--c); }
.px-of-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .8rem; margin: auto 0 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.px-of-when { color: var(--muted); font-size: .85rem; font-weight: 600; }
.px-of-acts { position: relative; z-index: 1; display: flex; gap: .6rem; }
.px-of-acts .button { min-height: 2.75rem; padding: .6rem 1.2rem; }
.px-of-card.is-spont { border: 0; background: var(--navy); color: #dbe7f1; box-shadow: none; }
.px-of-card.is-spont .px-of-meta { color: var(--sky); }
.px-of-card.is-spont h3 { color: #fff; }
.px-of-card.is-spont .px-of-sum { color: #c9d9e6; }
.px-of-card.is-spont .px-of-foot { border-top-color: rgba(255, 255, 255, .15); }
.px-of-card.is-spont .button { background: #fff; border-color: #fff; color: var(--navy); }
@media (max-width: 900px) {
  .px-of-head-in { grid-template-columns: minmax(0, 1fr); }
  .px-of-photo { order: -1; max-width: 34rem; }
}
@media (max-width: 560px) {
  .px-of-facts li { padding-right: .6rem; } .px-of-facts li + li { padding-left: .7rem; }
  .px-of-facts span { font-size: .8rem; }
}

/* le formulaire de candidature, en trois étapes */
.px-ap-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: stretch; gap: clamp(2rem, 5vw, 4.5rem); }
.px-ap-side { display: flex; flex-direction: column; } /* la photo prend la place qui reste : elle finit à la même hauteur que le formulaire (sa demande du 2026-10-27, symétrie) */
.px-ap-side h2 { margin: 0 0 1rem; }
.px-ap-side > p:not(.eyebrow) { margin: 0; color: var(--body-ink); }
.px-ap-steps { display: grid; gap: .7rem; margin: 1.8rem 0; padding: 0; list-style: none; }
.px-ap-steps li { display: flex; align-items: center; gap: .9rem; color: var(--muted); font-weight: 700; }
.px-ap-steps span { display: grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; border: 2px solid #c9d5df; border-radius: 50%; background: #fff; font-family: var(--font-heading); font-size: .95rem; transition: background .3s, border-color .3s, color .3s; }
.px-ap-steps li.is-on { color: var(--navy); } .px-ap-steps li.is-on span { border-color: var(--navy); background: var(--navy); color: #fff; }
.px-ap-steps li.is-done span { border-color: #1f7a45; background: #1f7a45; color: #fff; }
.px-ap-photo { flex: 1 1 0; min-height: 10rem; margin: 0; }
.px-ap-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.px-ap-card { padding: clamp(1.4rem, 3vw, 2.5rem); border-top: 6px solid var(--navy); background: #fff; box-shadow: 0 22px 50px rgba(10, 28, 46, .08); }
.px-ap-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.px-ap-form .field-row { align-items: end; } /* un libellé sur deux lignes ne décale pas les cases voisines */
.px-ap-form fieldset > legend { margin-bottom: 1.4rem; padding: 0; color: var(--navy); font-family: var(--font-heading); font-size: clamp(1.35rem, 1.2rem + .5vw, 1.7rem); font-weight: 500; }
.px-ap-form fieldset > legend .eyebrow { display: block; margin-bottom: .3rem; font-family: var(--font-body, inherit); font-size: .85rem; }
.px-ap-form legend:focus { outline: none; }
.px-ap-group { margin-bottom: 1.15rem; }
.px-ap-group > legend { margin-bottom: .5rem; font-weight: 600; }
.px-ap-checks { display: flex; flex-wrap: wrap; gap: .5rem; }
.px-ap-checks label { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; padding: .45rem .9rem; border: 1px solid #c9d5df; background: var(--surface); font-weight: 600; cursor: pointer; }
.px-ap-checks label:has(input:checked) { border-color: var(--navy); background: #e8f1f8; }
.px-ap-checks input { width: 1.2rem; height: 1.2rem; min-height: 0; margin: 0; padding: 0; }
.px-ap-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .35rem; border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent); background: var(--surface); }
.px-ap-tags:focus-within { outline: 3px solid var(--accent); outline-offset: 1px; }
.px-ap-tags ul { display: contents; }
.px-ap-tags li { display: inline-flex; align-items: center; gap: .2rem; padding: .25rem .25rem .25rem .7rem; background: var(--navy); color: #fff; font-size: .9rem; font-weight: 600; list-style: none; }
.px-ap-tags li button { width: 1.9rem; height: 1.9rem; border: 0; background: none; color: #fff; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.px-ap-tags input { flex: 1 1 12rem; min-width: 0; border: 0; background: transparent; }
.px-ap-tags input:focus-visible { outline: none; }
.px-ap-file input { padding: .9rem; border-style: dashed; background: #fff; }
.px-ap-offline { margin: 0 0 1.6rem; padding: .9rem 1rem; border-left: 4px solid var(--red); background: #fbeff0; color: var(--ink); font-size: .95rem; }
.px-ap-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .8rem 1.2rem; margin-top: .4rem; }
.px-ap-back { margin-right: auto; min-height: 2.75rem; padding: .5rem 0; border: 0; background: none; color: var(--navy); font: inherit; font-weight: 700; cursor: pointer; }
.px-ap-sent { text-align: center; padding: 1.5rem .5rem; }
.px-ap-sent:focus { outline: none; }
.px-ap-seal { display: inline-block; width: 4.5rem; height: 4.5rem; }
.px-ap-seal svg { width: 100%; height: 100%; fill: none; stroke: #1f7a45; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.px-ap-sent h3 { margin: 1rem 0 .6rem; color: var(--navy); font-family: var(--font-heading); font-size: 1.6rem; }
.px-ap-sent p { max-width: 30rem; margin: 0 auto; color: var(--body-ink); }
@media (max-width: 900px) {
  .px-ap-grid { grid-template-columns: minmax(0, 1fr); }
  .px-ap-side { position: static; }
  .px-ap-photo { display: none; }
  .px-ap-steps { grid-auto-flow: column; justify-content: start; gap: 1.2rem; margin-bottom: 0; }
}
@media (max-width: 560px) { .px-ap-steps li { font-size: .85rem; gap: .5rem; } .px-ap-steps span { width: 2.2rem; height: 2.2rem; } }

/* la page d'un poste (functions/carrieres/[slug].js) */
.px-jp-draft { margin: 0 0 1.5rem; padding: .8rem 1rem; border-left: 4px solid var(--red); background: #fbeff0; }
.px-jp-back { margin: 0 0 1.6rem; } .px-jp-back a { color: var(--primary); font-weight: 700; }
.px-jp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); align-items: start; gap: clamp(2rem, 5vw, 4.5rem); }
.px-jp-main h1 { margin: .3rem 0 1rem; font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.4rem); line-height: 1.08; }
.px-jp-main .lead { margin: 0 0 2rem; }
.px-jp-body h2 { margin: 2rem 0 .8rem; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); font-weight: 500; }
.px-jp-body ol { padding-left: 1.3rem; }
.px-jp-side { position: sticky; top: 6.5rem; padding: 1.5rem; border-top: 6px solid var(--navy); background: var(--surface); }
.px-jp-side dl { display: grid; gap: .8rem; margin: 0 0 1.4rem; }
.px-jp-side dt { color: var(--muted); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.px-jp-side dd { margin: .15rem 0 0; color: var(--navy); font-weight: 600; }
.px-jp-side .button { width: 100%; }
.px-jp-share { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; margin: 1.2rem 0 0; font-size: .92rem; }
.px-jp-share span { width: 100%; color: var(--muted); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.px-jp-share a, .px-jp-share button { min-height: 2.75rem; padding: 0; border: 0; background: none; color: var(--primary); font: inherit; font-weight: 700; cursor: pointer; }
.px-jp-others { margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 2rem; border-top: 1px solid var(--line); }
.px-jp-others h2 { margin: 0 0 1rem; font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem); }
.px-jp-others ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.px-jp-others li { display: grid; gap: .3rem; padding: 1rem 1.1rem; border: 1px solid var(--line); }
.px-jp-others a { color: var(--navy); font-weight: 700; } .px-jp-others span { color: var(--muted); font-size: .88rem; }
.px-jp-gone { max-width: 40rem; text-align: center; }
@media (max-width: 900px) { .px-jp-grid { grid-template-columns: minmax(0, 1fr); } .px-jp-side { position: static; } }

/* ===== Motion d'ingénierie (2026-10-24, _source/outils/mouvement-ingenierie.cjs) ===== */
/* Du plan à la photo (Conception des installations) */
.px-pp { position: relative; background: #0b2a4a; }
.px-pp-stick { position: relative; min-height: 80vh; overflow: hidden; isolation: isolate; }
.px-pp.is-live { height: 260vh; --q: clamp(0, calc((var(--p) - .12) / .62), 1); }
.px-pp.is-live .px-pp-stick { position: sticky; top: var(--hdr, 5rem); height: calc(100vh - var(--hdr, 5rem)); min-height: 0; }
.px-pp-plan, .px-pp-photo, .px-pp-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.px-pp.is-live .px-pp-photo { clip-path: inset(0 calc((1 - var(--q)) * 100%) 0 0); }
.px-pp-scan { display: none; }
.px-pp.is-live .px-pp-scan { display: block; position: absolute; top: 0; bottom: 0; left: calc(var(--q) * 100%); width: 2px; background: #8fd8f5; box-shadow: 0 0 18px 6px rgba(143, 216, 245, .55); opacity: clamp(0, calc(min(var(--q), 1 - var(--q)) * 20), 1); }
.px-pp-cap { position: absolute; left: clamp(1rem, 4vw, 3.5rem); bottom: 2rem; z-index: 3; max-width: 31rem; padding: 1.5rem 1.6rem; background: #fff; box-shadow: 0 20px 44px rgba(6, 18, 30, .25); }
.px-pp-cap h2 { margin: .3rem 0 .7rem; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); }
.px-pp-cap p:not(.eyebrow) { margin: 0; color: var(--body-ink); }
.px-pp-tag { position: absolute; top: 1.2rem; z-index: 3; margin: 0; padding: .35rem .75rem; background: rgba(11, 42, 74, .82); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.px-pp-tag.is-l { left: 1.2rem; } .px-pp-tag.is-r { right: 1.2rem; }
.px-pp:not(.is-live) .px-pp-tag.is-l { display: none; }
@media (max-width: 760px) { .px-pp-cap { left: 1rem; right: 1rem; bottom: 1rem; padding: 1.1rem 1.2rem; } }

/* Le cycle en V (C&Q, validation et maintenance) */
.px-vm-head { max-width: 46rem; margin-bottom: 1.5rem; } .px-vm-head h2 { margin: 0 0 1rem; } .px-vm-head .px-intro { margin: 0; }
.px-vm-svg { display: block; width: 100%; height: auto; }
.px-vm-svg .arm { fill: none; stroke: var(--navy); stroke-width: 3; stroke-dasharray: 1; }
.px-vm-svg .lk line { stroke: var(--logo-blue); stroke-width: 2; stroke-dasharray: 1; }
.px-vm-svg .lk text { fill: var(--primary); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-anchor: middle; text-transform: uppercase; }
.px-vm-svg .nd rect { fill: #fff; stroke: var(--navy); stroke-width: 2; } .px-vm-svg .nd.r rect { fill: #eef7fc; } .px-vm-svg .nd.c rect { fill: var(--navy); }
.px-vm-svg .nd .a { fill: var(--navy); font-size: 16px; font-weight: 800; } .px-vm-svg .nd .b { fill: var(--body-ink); font-size: 13px; }
.px-vm-svg .nd.c .a, .px-vm-svg .nd.c .b { fill: #fff; }
.px-vm-svg.is-armed .arm, .px-vm-svg.is-armed .lk line { stroke-dashoffset: 1; } .px-vm-svg.is-armed .nd, .px-vm-svg.is-armed .lk text { opacity: 0; }
.px-vm-svg.is-armed.is-play .arm { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s ease-in-out; }
.px-vm-svg.is-armed.is-play .nd { opacity: 1; transition: opacity .4s; }
.px-vm-svg.is-armed.is-play .n-1 { transition-delay: .1s; } .px-vm-svg.is-armed.is-play .n-2 { transition-delay: .4s; } .px-vm-svg.is-armed.is-play .n-3 { transition-delay: .7s; }
.px-vm-svg.is-armed.is-play .n-4 { transition-delay: 1s; } .px-vm-svg.is-armed.is-play .n-5 { transition-delay: 1.3s; } .px-vm-svg.is-armed.is-play .n-6 { transition-delay: 1.6s; }
.px-vm-svg.is-armed.is-play .lk line { stroke-dashoffset: 0; transition: stroke-dashoffset .8s ease-out; } .px-vm-svg.is-armed.is-play .lk text { opacity: 1; transition: opacity .4s; }
.px-vm-svg.is-armed.is-play .k-3 line, .px-vm-svg.is-armed.is-play .k-3 text { transition-delay: 2s; } .px-vm-svg.is-armed.is-play .k-2 line, .px-vm-svg.is-armed.is-play .k-2 text { transition-delay: 2.5s; } .px-vm-svg.is-armed.is-play .k-1 line, .px-vm-svg.is-armed.is-play .k-1 text { transition-delay: 3s; }
.px-vm-pairs { display: none; }
@media (max-width: 760px) {
  .px-vm-svg { display: none; }
  .px-vm-pairs { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
  .px-vm-pairs li { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .5rem; }
  .px-vm-pairs li > span:not(.t) { display: block; padding: .7rem .75rem; border: 2px solid var(--navy); background: #fff; color: var(--body-ink); font-size: .84rem; line-height: 1.3; }
  .px-vm-pairs .q { background: #eef7fc; }
  .px-vm-pairs b { display: block; color: var(--navy); font-size: 1.05rem; }
  .px-vm-pairs .t { color: var(--primary); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); }
  .px-vm-pairs li.c { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .px-vm-pairs li.c > span { min-width: 60%; border-color: var(--navy); background: var(--navy); color: #dbe7f1; text-align: center; }
  .px-vm-pairs li.c b { color: #fff; }
}

/* Le flux laminaire (Layouts et spécifications) */
.px-lf { position: relative; min-height: 36rem; overflow: hidden; background: linear-gradient(#eaf3f9, #fff); }
.px-lf-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.px-lf-in { position: relative; display: flex; align-items: center; min-height: 36rem; }
.px-lf-card { max-width: 27rem; padding: 1.7rem; background: rgba(255, 255, 255, .94); box-shadow: 0 18px 40px rgba(10, 28, 46, .08); }
.px-lf-card h2 { margin: .3rem 0 .8rem; font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); }
.px-lf-card p:not(.eyebrow) { margin: 0; color: var(--body-ink); }
@media (max-width: 760px) { .px-lf, .px-lf-in { min-height: 40rem; } .px-lf-in { align-items: flex-end; padding-bottom: 1.5rem; } .px-lf-card { padding: 1.3rem; } }

/* Le skid qui s'assemble (Intégration des systèmes) */
.px-sk { background: #fff; } /* blanc : la section suivante (livrables) est grise */
.px-sk-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); align-items: center; gap: 2rem; }
.px-sk-head h2 { margin: 0 0 1rem; } .px-sk-head .px-intro { margin: 0; }
.px-sk-svg { display: block; width: 100%; height: auto; overflow: visible; }
.px-sk-svg .p path { fill: none; stroke: var(--navy); stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 1; }
.px-sk-svg .p-2 path { stroke: var(--logo-blue); } .px-sk-svg .p-4 path { stroke: #00aeef; stroke-width: 4; stroke-linecap: round; }
.px-sk-svg .lb line { stroke: var(--red); stroke-width: 1.5; } .px-sk-svg .lb circle { fill: var(--red); }
.px-sk-svg .lb .nb { fill: var(--navy); } .px-sk-svg .lb .nn { fill: #fff; font-size: 19px; font-weight: 800; text-anchor: middle; }
.px-sk-svg .lb .tx { fill: var(--navy); font-size: 21px; font-weight: 700; }
.px-sk-svg.is-armed .p path { stroke-dashoffset: 1; } .px-sk-svg.is-armed .lb { opacity: 0; }
.px-sk-svg.is-armed.is-play .p path { stroke-dashoffset: 0; transition: stroke-dashoffset 1s ease-in-out; }
.px-sk-svg.is-armed.is-play .p-2 path { transition-delay: .8s; } .px-sk-svg.is-armed.is-play .p-3 path { transition-delay: 1.6s; } .px-sk-svg.is-armed.is-play .p-4 path { transition-delay: 2.2s; }
.px-sk-svg.is-armed.is-play .lb { opacity: 1; transition: opacity .4s; }
.px-sk-svg.is-armed.is-play .l-1 { transition-delay: 3.2s; } .px-sk-svg.is-armed.is-play .l-2 { transition-delay: 3.5s; } .px-sk-svg.is-armed.is-play .l-3 { transition-delay: 3.8s; } .px-sk-svg.is-armed.is-play .l-4 { transition-delay: 4.1s; } .px-sk-svg.is-armed.is-play .l-5 { transition-delay: 4.4s; }
.px-sk-legend { display: none; }
@media (max-width: 980px) { .px-sk-in { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .px-sk-svg .lb .tx { display: none; } .px-sk-svg .lb .nb { r: 26px; } .px-sk-svg .lb .nn { font-size: 30px; }
  .px-sk-legend { display: grid; gap: .45rem; margin: 1rem 0 0; padding: 0; list-style: none; counter-reset: sk; }
  .px-sk-legend li { display: flex; align-items: center; gap: .7rem; color: var(--navy); font-weight: 700; counter-increment: sk; }
  .px-sk-legend li::before { content: counter(sk); display: grid; place-items: center; flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--navy); color: #fff; font-size: .85rem; }
}

/* ===== Navigation (2026-10-24, _source/outils/navigation.cjs) ===== */
/* l'en-tête se cache en descendant et revient en remontant ; un mince trait suit la lecture */
.site-header { transition: transform .35s var(--ease), box-shadow .35s; }
.site-header.is-away { transform: translateY(-100%); }
.site-header.is-back { box-shadow: 0 10px 28px -18px rgba(10, 28, 46, .45); }
.px-read { position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: var(--red); transform: scaleX(var(--read, 0)); transform-origin: left; opacity: 0; transition: opacity .3s; }
.site-header.is-back .px-read { opacity: 1; }
html.is-hdr-away .px-subnav { top: 0; }
.px-subnav { transition: top .35s var(--ease); }
@media (prefers-reduced-motion: reduce) { .site-header, .px-subnav { transition: none; } }

/* le bouton qui accompagne la lecture (ordinateur et tablette) */
.px-float { position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 45; display: inline-flex; align-items: center; gap: .6rem; min-height: 3rem; padding: .85rem 1.4rem; background: var(--red); color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 14px 30px -12px rgba(120, 15, 25, .55); opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity .35s, transform .35s, background .2s; }
.px-float.is-on { opacity: 1; transform: none; pointer-events: auto; }
.px-float:hover { background: var(--red-2); }
.px-float:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

/* la barre du téléphone */
.px-mbar { display: none; }
@media (max-width: 760px) {
  .px-float { display: none; }
  .px-mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -18px rgba(10, 28, 46, .35); }
  .px-mbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; padding: 4px 2px; color: var(--muted); font-size: .72rem; font-weight: 700; line-height: 1.15; text-align: center; text-decoration: none; }
  .px-mbar svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .px-mbar a[aria-current] { color: var(--navy); } .px-mbar a[aria-current] span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--red); }
  .px-mbar a.is-cta { margin: 0 2px; background: var(--red); color: #fff; }
  .px-mbar a:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* le menu sur tablette (761 à 1010 px) : le bouton Menu, comme sur téléphone (avec Carrières, sept liens ne tiennent plus
   sur une ligne) ; de 1011 à 1180 px, le menu complet, resserré, sur une ligne (son Chrome fait 1060 px de large). */
.nav-list > li > a { white-space: nowrap; }
@media (min-width: 1011px) and (max-width: 1180px) {
  .nav-list { gap: .1rem; }
  .nav-list a { padding: .55rem .45rem; font-size: .92rem; }
  .nav-list a.nav-cta { padding: .75rem 1rem; margin-left: .5rem; }
}
@media (min-width: 761px) and (max-width: 1010px) {
  .header-row { gap: .75rem; }
  .nav-toggle { display: inline-flex; flex-shrink: 0; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 .9rem; background: transparent; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 1.1rem; height: 2px; background: currentColor; position: relative; }
  .nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle-bars::before { top: -6px; } .nav-toggle-bars::after { top: 6px; }
  .nav-list { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; max-height: calc(100vh - 5rem); overflow: auto; background: var(--background); border-bottom: 1px solid var(--line); padding: .5rem clamp(1rem, 4vw, 3.5rem) 1.25rem; box-shadow: 0 18px 30px -20px rgba(10, 28, 46, .35); }
  .site-nav[data-open] .nav-list { display: flex; }
  .nav-list a { width: 100%; padding: .85rem 0; border-bottom: 1px solid var(--line); }
  .nav-list a.nav-cta { margin: .75rem 0 0; text-align: center; border-bottom: 0; }
  .site-nav { margin-left: auto; }
  .has-mega { flex-wrap: wrap; }
  .has-mega > a { flex: 1; width: auto; }
  .px-mega-btn { width: 2.75rem; margin-left: 0; border-bottom: 1px solid var(--line); height: auto; align-self: stretch; color: var(--ink) !important; }
  .px-mega { position: static; flex-basis: 100%; box-shadow: none; border-top: 0; }
  .px-mega-in { grid-template-columns: minmax(0, 1fr); padding: .6rem 0 1rem; gap: .6rem; }
  .px-mega-intro { display: none; }
  .px-mega-grid, #menu-secteurs .px-mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem 1.5rem; }
  .px-mega-grid a { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: .8rem; align-items: center; padding: .35rem 0; border: 0; }
  .px-mega-grid img { margin: 0; aspect-ratio: 4 / 3; }
}

/* ===== Rythme des fonds (audit du 2026-10-24) : jamais deux sections grises de suite ===== */
/* pages de service : groupes (gris), projet (blanc, cartes encadrées), questions (gris) */
.px-dgroups + .px-dproject { background: #fff; }
.px-dgroups + .px-dproject .px-dproject-cards a { box-shadow: 0 0 0 1px var(--line), 0 18px 40px rgba(10, 28, 46, .07); }
.px-dgroups + .px-dproject + .px-faq { background: var(--surface); }
/* assurance qualité : presse (gris), groupes (blanc), projet (gris), questions (blanc) */
.px-dpress + .px-dgroups { background: #fff; }
.px-dpress + .px-dgroups + .px-dproject { background: var(--surface); }
.px-dpress + .px-dgroups + .px-dproject .px-dproject-cards a { box-shadow: none; }
.px-dpress + .px-dgroups + .px-dproject + .px-faq { background: #fff; }
/* la bande finale passe au blanc quand la section d'avant est grise */
.section-alt + .px-band { background: #fff; border-top: 1px solid var(--line); }
/* À propos : l'histoire (grise) puis l'équipe passe en blanc ; Efficacité énergétique : après le haut de page sombre, la
   section « pourquoi » passe en clair (sa règle : jamais deux sections sombres de suite) */
.px-story2 + .px-team { background: #fff; }
.px-en3-head + .px-en3-why { background: var(--surface); color: var(--ink); }
.px-en3-head + .px-en3-why .eyebrow { color: var(--primary); }
.px-en3-head + .px-en3-why h2 { color: var(--navy); } .px-en3-head + .px-en3-why h2 strong { color: var(--logo-blue); }
.px-en3-head + .px-en3-why .px-en3-why-list li { border-top-color: var(--line); color: var(--body-ink); }
.px-en3-head + .px-en3-why .px-en3-why-list li::before { color: var(--primary); }
.px-en3-head + .px-en3-why .px-en3-why-list b { color: var(--navy); }

/* ===== La maîtrise de l'invisible (Layouts et spécifications, 2026-10-24) ===== */
.px-iv { position: relative; display: flex; align-items: center; min-height: clamp(30rem, 72vh, 44rem); overflow: hidden; isolation: isolate; background: #0b1f33 url("/assets/video/maitrise-invisible.jpg") center / cover; }
.px-iv-video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.px-iv.is-playing .px-iv-video { opacity: 1; }
.px-iv::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6, 18, 30, .84), rgba(6, 18, 30, .5) 45%, rgba(6, 18, 30, .05) 78%); }
.px-iv-in { width: 100%; padding-block: clamp(3rem, 6vw, 5rem); }
.px-iv-card { max-width: 28rem; color: #fff; }
.px-iv-card .eyebrow { color: #8fd8f5; }
.px-iv-card h2, .px-iv-card h2 strong { margin: .3rem 0 .9rem; color: #fff; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem); }
.px-iv-card p:not(.eyebrow) { margin: 0 0 1.2rem; color: #dbe9f4; }
.px-iv-card ul { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.px-iv-card li { position: relative; padding-left: 1.4rem; color: #fff; font-weight: 600; }
.px-iv-card li::before { content: ""; position: absolute; left: 0; top: .55em; width: .55rem; height: .55rem; border-radius: 50%; background: var(--cyan); }
@media (max-width: 760px) { .px-iv { align-items: flex-end; } .px-iv::before { background: linear-gradient(rgba(6, 18, 30, .3), rgba(6, 18, 30, .88) 58%); } }

/* ===== Grand menu Expertises : Équipements aseptiques et Efficacité énergétique avec leur bandeau (2026-10-24) ===== */
.px-mega-intro .px-mega-extra { display: block; margin-top: 1rem; color: var(--navy) !important; font-weight: 600; font-size: .9rem; line-height: 1.35; text-decoration: none; box-shadow: none !important; padding: 0; }
.px-mega-extra img { display: block; width: 100%; height: 3.6rem; margin-bottom: .45rem; object-fit: cover; transition: transform .4s var(--ease); }
.px-mega-extra:hover span { color: var(--primary); text-decoration: underline; }
@media (max-width: 1010px) {
  .px-mega-intro { display: grid; gap: .2rem; padding-bottom: .4rem; }
  .px-mega-intro > :not(.px-mega-extra) { display: none; }
  .px-mega-intro .px-mega-extra { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: .8rem; align-items: center; margin: 0; padding: .35rem 0; }
  .px-mega-extra img { height: auto; aspect-ratio: 4 / 3; margin: 0; }
}

/* passe d'expérience utilisateur (2026-10-24) : l'étiquette d'un secteur se lit sur n'importe quelle photo ; un témoignage
   court se centre dans sa scène au lieu de laisser un vide dessous */
.px-tile small { display: inline-block; padding: .2rem .55rem; background: rgba(6, 18, 30, .78); color: #fff; font-size: .78rem; letter-spacing: .02em; }
.px-vc.is-live .px-vc-slide { align-self: center; }

/* la frise de « Notre histoire » (À propos) : deux colonnes jusqu'à 1280 px, chaque date avec son trait, pour que le texte
   ne déborde pas d'une colonne trop étroite ; « Nos coordonnées » (Contact) tient dans son encadré */
@media (max-width: 1280px) {
  .px-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem 1.6rem; }
  .px-rail::before { display: none; }
  .px-rail li { padding-top: 1.6rem; border-top: 2px solid var(--sky-deep); }
  .px-rail li:nth-child(2) { border-top-color: var(--red); } .px-rail li:nth-child(4) { border-top-color: var(--primary); }
  .px-rail li::before { top: -7px; }
}
.contact-details h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); overflow-wrap: break-word; }
/* Témoignages, carte blanche (sa demande du 2026-10-24) : le texte sur une carte blanche, les guillemets posés sur son bord
   juste au-dessus du nom du client, le nom plus grand ; la hauteur suit le témoignage affiché (plus de grand vide) ; on
   glisse à gauche ou à droite pour changer de témoignage. */
.px-vc-mark { position: relative; z-index: 2; width: clamp(3rem, 4.4vw, 3.8rem); margin: clamp(1.4rem, 3vw, 2rem) auto -1.7rem; opacity: 1; }
.px-vc-slide { width: 100%; max-width: 56rem; margin: 0 auto; padding: clamp(2.4rem, 4vw, 3rem) clamp(1.2rem, 4vw, 3.2rem) clamp(1.4rem, 3vw, 2rem); box-sizing: border-box; background: #fff; border: 1px solid var(--line); box-shadow: 0 1.6rem 3rem -1.8rem rgba(10, 28, 46, .4); }
.px-vc-slide .px-brand { margin-top: 0; }
.px-vc-slide .px-brand span { font-size: 1.25rem; }
.px-vc-slide figcaption strong { font-size: 1.25rem; }
.px-vc.is-live .px-vc-slide { align-self: start; }
.px-vc.is-live .px-vc-stage { touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; transition: height .5s var(--ease); }
.px-vc.is-live .px-vc-stage img { -webkit-user-drag: none; }
.px-vc.is-live .px-vc-stage.is-drag { cursor: grabbing; user-select: none; }
.px-vc.is-live .px-vc-stage.is-drag .px-vc-slide.is-on { transition: none; }
.px-orig.is-swap p[lang] { display: none; }
@media (max-width: 760px) { .px-vc-slide .px-brand span, .px-vc-slide figcaption strong { font-size: 1.12rem; } }
@media (prefers-reduced-motion: reduce) { .px-vc.is-live .px-vc-stage { transition: none; } }

/* « Continuer la visite » (2026-10-24, _source/outils/parcours.cjs) : la page suivante en grande carte avant l'appel final */
.px-next { padding-block: clamp(2.5rem, 5vw, 4rem); background: #fff; }
.px-next-main { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 19rem; overflow: hidden; background: #f2f6f9; color: inherit; text-decoration: none; box-shadow: 0 1.4rem 3rem -2.2rem rgba(10, 28, 46, .45); }
.px-next-main::before { content: ""; position: absolute; top: 0; left: 0; right: 0; z-index: 1; height: 5px; background: linear-gradient(90deg, var(--cyan) 0 33.3%, var(--red) 33.3% 66.6%, var(--primary) 66.6%); }
.px-next-ph { position: relative; overflow: hidden; }
.px-next-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.px-next-ph img[src*="menu-nos-clients-equipe"] { object-position: 50% 0%; } /* le montage « Nos clients » (carte vers Réalisations) : la rangée du haut entière, les visages ne sont pas coupés */
.px-next-main:hover .px-next-ph img, .px-next-main:focus-within .px-next-ph img { transform: scale(1.05); }
/* la carte entière mène à la page (lien étiré) ; les pastilles, au-dessus, mènent chacune à sa fiche */
.px-next-link { color: inherit; text-decoration: none; }
.px-next-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.px-next-link:focus-visible { outline: none; }
.px-next-main:has(.px-next-link:focus-visible) { outline: 3px solid var(--primary); outline-offset: 4px; }
.px-next-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: .75rem; padding: clamp(1.8rem, 4vw, 3rem); }
.px-next-copy .eyebrow { margin: 0; color: var(--red); }
.px-next-copy strong { color: var(--navy); font-family: var(--font-heading); font-size: clamp(1.9rem, 1.3rem + 2vw, 2.8rem); font-weight: 600; line-height: 1.1; }
.px-next-copy .d { max-width: 34rem; color: var(--body-ink); line-height: 1.6; }
.px-next-copy .pv { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 0; padding: 0; list-style: none; }
.px-next-copy .pv a { display: inline-flex; align-items: center; min-height: 1.9rem; padding: .3rem .7rem; border: 1px solid #c9d7e2; background: #fff; color: var(--navy); font-size: .82rem; font-weight: 600; text-decoration: none; transition: border-color .2s, background .2s, color .2s; }
.px-next-copy .pv a:hover, .px-next-copy .pv a:focus-visible { border-color: var(--primary); background: var(--primary); color: #fff; }
.px-next-copy .pv .is-key a { border-color: var(--red); background: var(--red); color: #fff; }
.px-next-copy .pv .is-key a:hover, .px-next-copy .pv .is-key a:focus-visible { border-color: var(--red-2); background: var(--red-2); color: #fff; }
.px-next-copy .go { display: inline-flex; align-items: center; gap: .6rem; margin-top: .4rem; padding: .8rem 1.2rem; background: var(--red); color: #fff; font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.px-next-copy .go i { font-style: normal; transition: transform .3s var(--ease); }
.px-next-main:hover .go i, .px-next-main:focus-within .go i { transform: translateX(4px); }
.px-next-more { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .8rem; margin: 1.2rem 0 0; font-size: .95rem; }
.px-next-more span { color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.px-next-more a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border: 1px solid #c9d7e2; background: #fff; color: var(--primary); font-weight: 600; text-decoration: none; transition: border-color .2s, color .2s; }
.px-next-more a:hover, .px-next-more a:focus-visible { border-color: var(--primary); color: var(--navy); }
@media (max-width: 760px) {
  .px-next-main { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .px-next-link { display: inline-block; min-height: 2.5rem; }
  .px-next-copy .pv a { min-height: 2.5rem; }
  .px-next-ph { height: 13rem; }
}
@media (prefers-reduced-motion: reduce) { .px-next-ph img, .px-next-copy .go i { transition: none; } }

/* « Vous avez une idée ? » (sa demande du 2026-10-24 au soir) : les quatre carrés en blanc, le titre en bleu ciel, sur une
   rangée ; un liseré P·B·E en haut de chacun. Le bleu ciel est celui du logo, assez foncé pour se lire sur du blanc. */
.px-en3-roles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.px-en3-roles a { --c: var(--cyan); align-content: start; background: #fff; border: 0; border-top: 4px solid var(--c); color: var(--navy); box-shadow: 0 1.2rem 2.4rem -1.6rem rgba(0, 0, 0, .55); transition: transform .25s var(--ease), box-shadow .25s; }
.px-en3-roles li:nth-child(2) a { --c: var(--red); } .px-en3-roles li:nth-child(3) a { --c: var(--primary); }
.px-en3-roles strong { color: var(--logo-blue); line-height: 1.2; }
.px-en3-roles strong::after { color: var(--red); }
.px-en3-roles span { color: var(--body-ink); }
.px-en3-roles a:hover, .px-en3-roles a:focus-visible { background: #fff; border-color: var(--c); transform: translateY(-4px); box-shadow: 0 1.6rem 2.8rem -1.6rem rgba(0, 0, 0, .7); }
@media (max-width: 980px) { .px-en3-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .px-en3-roles { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .px-en3-roles a { transition: none; } .px-en3-roles a:hover, .px-en3-roles a:focus-visible { transform: none; } }

/* Pied de page sur téléphone (sa demande du 2026-10-24 au soir) : deux colonnes, plus aérées que la pile d'une seule. */
@media (max-width: 520px) {
  .site-footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.2rem; }
  .site-footer .footer-grid .footer-list { font-size: .92rem; }
  .site-footer .footer-grid address, .site-footer .footer-grid a { overflow-wrap: anywhere; }
}

/* Le Groupe PBE (ses retours du 2026-10-24 au soir) : l'organigramme apparaît plus vite (déclenché dès son entrée à
   l'écran, delais raccourcis), une photo pour l'expertise transversale, une bande photo mince au-dessus de chaque unité
   d'affaires, et une bannière photo pleine largeur avant les fonctions partagées. */
.px-gm-chart.is-armed.is-play .px-gm-top::after { transition-delay: .15s; } .px-gm-chart.is-armed.is-play .px-gm-cos::before { transition-delay: .25s; }
.px-gm-chart.is-armed.is-play .px-gm-cos > li:nth-child(1) { transition-delay: .3s; } .px-gm-chart.is-armed.is-play .px-gm-cos > li:nth-child(2) { transition-delay: .4s; } .px-gm-chart.is-armed.is-play .px-gm-cos > li:nth-child(3) { transition-delay: .5s; }
.px-gm-chart.is-armed.is-play .px-gm-energy { transition-delay: .6s; }
.px-gm-energy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr); padding: 0; }
.px-gm-energy .ph { position: relative; min-height: 12rem; margin: 0; overflow: hidden; }
.px-gm-energy .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.px-gm-energy .ph figcaption { position: absolute; left: .8rem; bottom: .8rem; padding: .3rem .6rem; background: rgba(10, 28, 46, .78); color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .06em; }
.px-gm-energy .tx { padding: 1.3rem 1.5rem; }
.px-gm-bu li { overflow: hidden; }
.px-gm-bu li .ph { display: block; width: calc(100% + 2.2rem); max-width: none; height: 4.2rem; margin: -1.1rem -1.1rem .9rem; object-fit: cover; }
.px-gm-banner { position: relative; isolation: isolate; display: flex; align-items: center; min-height: clamp(20rem, 36vw, 29rem); overflow: hidden; color: #fff; }
.px-gm-banner > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.px-gm-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6, 18, 30, .9) 0%, rgba(6, 18, 30, .7) 42%, rgba(6, 18, 30, .1) 75%); }
.px-gm-banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, var(--cyan) 0 33.3%, var(--red) 33.3% 66.6%, var(--primary) 66.6%); }
.px-gm-banner .wrap { padding-block: 3rem; }
.px-gm-banner .k { margin: 0 0 .9rem; color: #8fd8f5; font-size: .85rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.px-gm-banner .t { max-width: 42rem; margin: 0 0 1rem; font-family: var(--font-heading); font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem); font-weight: 300; line-height: 1.1; }
.px-gm-banner .t strong { color: #8fd8f5; font-weight: 600; }
.px-gm-banner .d { max-width: 32rem; margin: 0; color: #d6e6f2; font-size: 1.05rem; line-height: 1.6; }
@media (max-width: 760px) {
  .px-gm-energy { grid-template-columns: minmax(0, 1fr); } .px-gm-energy .ph { min-height: 10rem; }
  .px-gm-banner { align-items: flex-end; min-height: 28rem; } .px-gm-banner::before { background: linear-gradient(0deg, rgba(6, 18, 30, .92) 0%, rgba(6, 18, 30, .6) 55%, rgba(6, 18, 30, .15) 100%); }
}

/* Témoignages de l'accueil : les flèches de part et d'autre de la carte (sa demande du 2026-10-24) */
.px-vc-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(.6rem, 2vw, 1.4rem); align-items: center; }
.px-vc-arrow { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; padding: 0; border: 1px solid var(--navy); border-radius: 50%; background: #fff; color: var(--navy); font-size: 1.2rem; cursor: pointer; box-shadow: 0 .8rem 1.6rem -1rem rgba(10, 28, 46, .45); transition: background .2s, color .2s, transform .2s var(--ease); }
.px-vc-arrow:hover, .px-vc-arrow:focus-visible { background: var(--navy); color: #fff; }
.px-vc-arrow.is-prev:hover { transform: translateX(-2px); } .px-vc-arrow.is-next:hover { transform: translateX(2px); }
.px-vc-arrow[hidden] { display: none; }
@media (max-width: 760px) { .px-vc-row { grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem .6rem; } .px-vc-row .px-vc-stage { grid-column: 1 / -1; grid-row: 1; } .px-vc-arrow { grid-row: 2; width: 2.75rem; height: 2.75rem; } .px-vc-arrow.is-prev { grid-column: 1; } .px-vc-arrow.is-next { grid-column: 3; } }

/* La gélule en immersion (sa demande du 2026-10-24) : le film colle en haut de l'écran et le remplit (l'en-tête reste
   caché pendant la scène), le bouton flottant se retire ; les légendes deviennent discrètes, sans carte blanche : un
   petit texte blanc sur une ombre douce, un trait cyan, pour que l'attention reste sur le film. */
.px-caps.is-live .px-caps-stick { top: 0; height: 100vh; height: 100svh; }
html.is-immersive .site-header { transform: translateY(-100%); }
html.is-immersive .px-float { opacity: 0 !important; visibility: hidden !important; pointer-events: none; }
.px-caps.is-live .px-caps-story li { width: min(24rem, calc(100% - 2rem)); padding-left: 1rem; background: none; border-left: 3px solid var(--cyan); box-shadow: none; color: #fff; }
.px-caps.is-live .px-caps-story li::before { content: ""; position: absolute; inset: -2.5rem -6rem -2rem -3rem; z-index: -1; background: radial-gradient(closest-side, rgba(6, 18, 30, .55), transparent); pointer-events: none; }
.px-caps.is-live .cap { padding: 0; }
.px-caps.is-live .cap .eyebrow { color: #8fd8f5; font-size: .8rem; } .px-caps.is-live .cap .eyebrow .n { color: rgba(255, 255, 255, .7); }
.px-caps.is-live .cap .t { margin-top: .25rem; color: #fff; font-size: clamp(1.05rem, .9rem + .6vw, 1.4rem); text-shadow: 0 2px 14px rgba(6, 18, 30, .6); }
.px-caps.is-live .cap .t strong { color: #8fd8f5; }
html.is-immersive .px-mbar { transform: translateY(110%); }
.px-mbar { transition: transform .3s var(--ease); }
@media (max-width: 760px) { .px-caps.is-live .px-caps-story li { bottom: 2rem; } }

/* Ce que comprend le service, en fiche de document contrôlé (son choix du 2026-10-24, option D de l'aperçu) */
.px-proto { position: relative; max-width: 62rem; margin: 0 auto; padding: clamp(1.3rem, 3vw, 2.4rem); background: #fff; border: 1px solid #d9e1e7; box-shadow: 0 30px 60px -32px rgba(10, 28, 46, .4); }
.px-proto::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--cyan) 0 33.3%, var(--red) 33.3% 66.6%, var(--primary) 66.6%); }
.px-proto .hd { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.2rem; align-items: center; padding-bottom: 1rem; border-bottom: 2px solid var(--navy); }
.px-proto .hd img { display: block; width: 4.4rem; height: auto; }
.px-proto .k { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.px-proto .hd .t { margin: .15rem 0 0; font-family: var(--font-heading); font-size: 1.15rem; font-weight: 600; color: var(--navy); }
.px-proto .pg { margin: 0; font-size: .78rem; color: var(--muted); }
.px-proto .cols, .px-proto li { display: grid; grid-template-columns: 3rem minmax(0, 1fr) 4.5rem; gap: 1rem; align-items: center; }
.px-proto .cols { margin: 0; padding: .7rem 0; border-bottom: 1px solid #d9e1e7; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.px-proto .cols span:last-child { text-align: center; }
.px-proto ol { margin: 0; padding: 0; list-style: none; }
.px-proto li { padding: .9rem 0; border-bottom: 1px dashed #d3dce3; }
.px-proto li .n { font-family: var(--font-heading); font-weight: 700; color: var(--logo-blue); }
.px-proto li strong { display: block; color: var(--navy); font-size: 1rem; line-height: 1.35; }
.px-proto li div > span { display: block; margin-top: .25rem; color: var(--body-ink); font-size: .9rem; line-height: 1.5; }
.px-proto li div > span:empty { display: none; }
.px-proto .ck { justify-self: center; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border: 2px solid var(--navy); border-radius: 4px; }
.px-proto .ck svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: #1f9d55; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.px-proto .ck path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.px-proto.is-armed .ck path { stroke-dashoffset: 1; }
.px-proto.is-armed.is-play .ck path { stroke-dashoffset: 0; transition: stroke-dashoffset .35s var(--ease) var(--d, 0s); }
.px-proto .ft { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.2rem; }
.px-proto .sig { margin: .25rem 0 0; font-family: var(--font-heading); font-size: 1.25rem; font-style: italic; font-weight: 500; color: var(--navy); }
.px-proto .stamp { width: 7.6rem; color: var(--red); transform: rotate(-12deg); mix-blend-mode: multiply; opacity: .92; }
.px-proto .stamp svg { display: block; width: 100%; height: auto; }
.px-proto .stamp circle { fill: none; stroke: currentColor; stroke-width: 3.5; } .px-proto .stamp circle + circle { stroke-width: 1.6; }
.px-proto .stamp .r { font-family: var(--font-heading); font-size: 13px; font-weight: 800; fill: currentColor; }
.px-proto .stamp .c { font-family: var(--font-heading); font-size: 24px; font-weight: 800; fill: currentColor; }
.px-proto.is-armed .stamp { opacity: 0; transform: rotate(-12deg) scale(1.9); }
.px-proto.is-armed.is-play .stamp { opacity: .92; transform: rotate(-12deg) scale(1); transition: opacity .2s calc(var(--n, 10) * .18s + .4s), transform .45s cubic-bezier(.3, 1.6, .5, 1) calc(var(--n, 10) * .18s + .4s); }
.px-proto li:nth-child(1) { --d: .2s; } .px-proto li:nth-child(2) { --d: .38s; } .px-proto li:nth-child(3) { --d: .56s; } .px-proto li:nth-child(4) { --d: .74s; } .px-proto li:nth-child(5) { --d: .92s; } .px-proto li:nth-child(6) { --d: 1.1s; } .px-proto li:nth-child(7) { --d: 1.28s; }
.px-proto li:nth-child(8) { --d: 1.46s; } .px-proto li:nth-child(9) { --d: 1.64s; } .px-proto li:nth-child(10) { --d: 1.82s; } .px-proto li:nth-child(11) { --d: 2s; } .px-proto li:nth-child(12) { --d: 2.18s; } .px-proto li:nth-child(13) { --d: 2.36s; } .px-proto li:nth-child(14) { --d: 2.54s; }
.px-proto:has(li:nth-child(5)) { --n: 5; } .px-proto:has(li:nth-child(8)) { --n: 8; } .px-proto:has(li:nth-child(11)) { --n: 11; } .px-proto:has(li:nth-child(14)) { --n: 14; }
@media (max-width: 760px) {
  .px-proto { padding: 1.1rem .9rem; }
  .px-proto .hd { grid-template-columns: auto minmax(0, 1fr); gap: .8rem; } .px-proto .hd img { width: 3.4rem; } .px-proto .pg { display: none; }
  .px-proto .cols, .px-proto li { grid-template-columns: 2rem minmax(0, 1fr) 2.2rem; gap: .6rem; }
  .px-proto .cols span:last-child { font-size: 0; } .px-proto .ck { width: 1.6rem; height: 1.6rem; }
  .px-proto .ft { align-items: flex-end; } .px-proto .stamp { width: 6rem; }
}
.px-proto { overflow: hidden; } /* le sceau, agrandi avant de se poser, ne déborde pas sur téléphone */

/* La tuile « Envie de nous rejoindre ? » en badge d'accès vierge (son choix R1 du 2026-10-24), dans la grille de l'équipe */
.px-staff .px-join-r1 { justify-content: flex-start; gap: 0; padding: 0; background: none; color: var(--navy); }
.px-join-r1 .px-jb { position: relative; display: flex; flex-direction: column; align-items: center; aspect-ratio: 4 / 5; margin-bottom: 1rem; overflow: hidden; background: #eef6fb; text-decoration: none; }
.px-join-r1 .strap { width: 1.3rem; height: 9%; background: var(--navy); border-inline: 2px solid var(--cyan); }
.px-join-r1 .clip { width: 2.1rem; height: .75rem; margin-top: -2px; border-radius: 3px; background: linear-gradient(#d3dbe2, #8f9ca8); }
.px-join-r1 .bd { display: flex; flex-direction: column; width: 72%; margin-top: -.2rem; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 1.2rem 2rem -1rem rgba(6, 18, 30, .45); transform-origin: 50% -30%; }
.px-join-r1:hover .bd, .px-join-r1:focus-within .bd { animation: px-jb-swing 1.6s var(--ease); }
@keyframes px-jb-swing { 25% { transform: rotate(4deg); } 55% { transform: rotate(-3deg); } 80% { transform: rotate(1.5deg); } 100% { transform: none; } }
.px-join-r1 .top { display: flex; justify-content: space-between; align-items: center; gap: .3rem; padding: .65rem .55rem .4rem; background: var(--navy); color: #fff; }
.px-join-r1 .lg { font: 700 .7rem var(--font-heading); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.px-join-r1 .lg i { font-style: normal; color: var(--cyan); } .px-join-r1 .lg i:nth-child(2) { color: #ff6b77; } .px-join-r1 .lg i:nth-child(3) { color: #fff; }
.px-join-r1 .z { color: #8fd8f5; font-size: .5rem; font-weight: 700; letter-spacing: .1em; line-height: 1.25; text-align: right; text-transform: uppercase; }
.px-join-r1 .ph { display: grid; place-items: center; margin: .5rem .5rem 0; aspect-ratio: 1 / .8; border: 2px dashed #9fb3c3; background: #f3f7fa; color: #5f7484; font-size: .68rem; font-weight: 600; }
.px-join-r1 .id { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .3rem; align-items: baseline; margin: .4rem .5rem 0; padding-bottom: .25rem; border-bottom: 1px dashed var(--line); }
.px-join-r1 .id .k { color: var(--muted); font-size: .5rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.px-join-r1 .id .v { color: var(--navy); font: 600 .68rem/1.2 var(--font-heading); } .px-join-r1 .id:first-of-type .v { color: var(--logo-blue); font-size: .95rem; }
.px-join-r1 .bd::after { content: ""; display: block; height: 4px; margin-top: .5rem; background: linear-gradient(90deg, var(--cyan) 0 33.3%, var(--red) 33.3% 66.6%, var(--primary) 66.6%); }
.px-join-r1 .px-dept-tag { color: var(--primary); } .px-join-r1 h4 { margin-bottom: .6rem; color: var(--navy); } .px-join-r1 .text-link { color: var(--primary); }
@media (prefers-reduced-motion: reduce) { .px-join-r1:hover .bd, .px-join-r1:focus-within .bd { animation: none; } }

/* >>> la biomasse */
.px-bm-head { max-width: 46rem; margin-bottom: 1.8rem; } .px-bm-head h2 { margin: 0 0 1rem; } .px-bm-head .px-intro { margin: 0; }
.px-bm .f-c, .px-bm .l-c, .px-bm .p-c { --fc: var(--logo-blue); } .px-bm .f-h, .px-bm .l-h, .px-bm .p-h { --fc: #2bb3e6; } .px-bm .f-l, .px-bm .l-l, .px-bm .p-l { --fc: var(--navy-3); }
.px-bm-key { display: none; }
.px-bm1-svg { display: block; width: 100%; height: auto; overflow: visible; }
.px-bm1-svg .pan { fill: #fff; stroke: #dde6ed; stroke-width: 1; filter: drop-shadow(0 10px 18px rgba(10, 28, 46, .08)); }
.px-bm1-svg .bundle rect { fill: #efe6d8; stroke: #8a6a45; stroke-width: 3; }
.px-bm1-svg .bundle text { fill: #6b4f2e; font-family: var(--font-heading); font-size: 20px; font-weight: 700; text-anchor: middle; }
.px-bm1-svg .fr { transform-box: fill-box; transform-origin: center; }
.px-bm1-svg .fr path { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.px-bm1-svg .g-c path { stroke: var(--logo-blue); } .px-bm1-svg .g-h path { stroke: #2bb3e6; } .px-bm1-svg .g-l path { stroke: var(--navy-3); stroke-width: 3.5; } .px-bm1-svg .g-l circle { fill: var(--navy); }
.px-bm1-svg .lb text { text-anchor: middle; } .px-bm1-svg .lb .t { fill: var(--navy); font-family: var(--font-heading); font-size: 22px; font-weight: 700; }
.px-bm1-svg .lb .p { fill: var(--fc); font-family: var(--font-heading); font-size: 34px; font-weight: 800; }
.px-bm1-svg .chip rect { fill: color-mix(in srgb, var(--fc) 10%, #fff); stroke: var(--fc); stroke-width: 1.2; } .px-bm1-svg .chip text { fill: var(--navy); font-size: 13.5px; font-weight: 600; text-anchor: middle; }
.px-bm1-svg .pan.p-c, .px-bm1-svg .pan.p-h, .px-bm1-svg .pan.p-l { stroke-width: 1; }
.px-bm1-svg.is-armed .bundle { opacity: 1; } .px-bm1-svg.is-armed .lb, .px-bm1-svg.is-armed .pan { opacity: 0; }
.px-bm1-svg.is-armed .g-c { transform: translate(330px, 0) scale(.5); } .px-bm1-svg.is-armed .g-h { transform: scale(.5); } .px-bm1-svg.is-armed .g-l { transform: translate(-330px, 0) scale(.5); }
.px-bm1-svg .bundle { opacity: 0; }
.px-bm1-svg.is-armed.is-play .bundle { opacity: 0; transition: opacity .5s .5s; }
.px-bm1-svg.is-armed.is-play .fr { transform: none; transition: transform 1.4s cubic-bezier(.6, 0, .2, 1) .6s; }
.px-bm1-svg.is-armed.is-play .pan { opacity: 1; transition: opacity .6s 1.5s; }
.px-bm1-svg.is-armed.is-play .lb { opacity: 1; transition: opacity .5s 1.9s; } .px-bm1-svg.is-armed.is-play .l-h { transition-delay: 2.05s; } .px-bm1-svg.is-armed.is-play .l-l { transition-delay: 2.2s; }
.px-bm1-svg.is-play .g-c path { stroke-dasharray: .7 .06; animation: px-bm-run 6s linear 2.2s infinite; }
@keyframes px-bm-run { to { stroke-dashoffset: -1.52; } }
.px-bm1-svg.is-play .g-l circle { animation: px-bm-pulse 2.4s ease-in-out 2.2s infinite alternate; } .px-bm1-svg.is-play .g-l circle:nth-of-type(even) { animation-delay: 3.2s; }
@keyframes px-bm-pulse { to { opacity: .35; } }
@media (max-width: 760px) {
  .px-bm1-svg .lb, .px-bm1-svg .pan { display: none; } .px-bm1-svg { aspect-ratio: 1000 / 240; } .px-bm1-svg { overflow: hidden; }
  .px-bm-key { display: grid; gap: .8rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
  .px-bm-key li { display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; align-items: baseline; padding: .85rem 1rem; border-left: 5px solid var(--fc); background: #fff; }
  .px-bm-key strong { color: var(--navy); font-family: var(--font-heading); font-size: 1.05rem; } .px-bm-key .p { color: var(--fc); font-weight: 800; }
  .px-bm-key .o { grid-column: 1 / -1; color: var(--body-ink); font-size: .92rem; }
}
@media (prefers-reduced-motion: reduce) { .px-bm1-svg .g-c path, .px-bm1-svg .g-l circle { animation: none; } }
/* <<< la biomasse */

/* Les sous-menus en images (son choix M1 du 2026-10-24) : cinq cartes, le titre et une ligne qui dit ce qu'on y trouve */
@media (min-width: 1011px) { .px-mega-sub .px-mega-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* téléphone et tablette : la liste à vignettes, comme les autres menus (2026-10-25) */
.px-mega-sub .px-mega-grid span { display: block; font-weight: 600; }
.px-mega-sub .px-mega-grid small { display: block; margin-top: .15rem; color: var(--muted); font-size: .8rem; font-weight: 400; line-height: 1.35; }
@media (max-width: 1010px) { .px-mega-sub .px-mega-grid small { display: none; } }

/* Avec les sous-menus (2026-10-24), sept flèches : de 1011 à 1280 px, flèches plus étroites et liens resserrés, pour que
   le menu tienne sur une ligne dans tous les navigateurs (Firefox comprend). Sous 1011 px, le bouton Menu. */
@media (min-width: 1011px) and (max-width: 1280px) {
  .nav-list .px-mega-btn { width: 1.5rem; margin-left: -.45rem; }
  .nav-list > li > a:not(.nav-cta) { padding-inline: .4rem; }
}
@media (min-width: 1011px) and (max-width: 1180px) {
  .nav-list > li > a:not(.nav-cta) { padding-inline: .22rem; font-size: .88rem; }
  .nav-list a.nav-cta { padding: .7rem .85rem; margin-left: .3rem; }
}
/* 2026-10-26 : « EMA-Annexe 1 » entre dans le menu (neuf entrées) : les liens se resserrent pour que tout tienne sur une ligne */
@media (min-width: 1011px) and (max-width: 1180.98px) {
  .nav-list > li > a:not(.nav-cta) { padding-inline: .14rem; font-size: .84rem; }
  .nav-list .px-mega-btn { width: 1.3rem; margin-left: -.35rem; }
  .nav-list a.nav-cta { padding: .65rem .7rem; margin-left: .2rem; font-size: .86rem; }
}
@media (min-width: 1180.99px) and (max-width: 1280.98px) { .nav-list > li > a:not(.nav-cta) { padding-inline: .2rem; font-size: .9rem; } }
@media (min-width: 1280.99px) { .nav-list > li > a:not(.nav-cta) { padding-inline: .35rem; } }
@media (min-width: 1280.99px) and (max-width: 1400px) { .nav-list .px-mega-btn { width: 1.5rem; margin-left: -.45rem; } }

/* Les cinq unités d'affaires cliquables (sa demande du 2026-10-24) et « Groupe PBE » en tête du tableau des fonctions */
.px-gm-bu li { padding: 0; }
.px-gm-bu li > a { display: flex; flex-direction: column; height: 100%; padding: 1.1rem 1.1rem 1.2rem; box-sizing: border-box; color: inherit; text-decoration: none; transition: background .2s; }
.px-gm-bu li { transition: transform .25s var(--ease), box-shadow .25s; }
.px-gm-bu li:hover { transform: translateY(-4px); box-shadow: 0 1.2rem 2.4rem -1.6rem rgba(10, 28, 46, .45); }
.px-gm-bu li > a .go { margin-top: .6rem; color: #17803f; font-weight: 800; transition: transform .25s var(--ease); }
.px-gm-bu li:hover > a .go { transform: translateX(4px); }
.px-gm-mx thead th.grp { color: #8fd8f5; letter-spacing: .04em; }
@media (prefers-reduced-motion: reduce) { .px-gm-bu li, .px-gm-bu li > a .go { transition: none; } .px-gm-bu li:hover { transform: none; } }

/* « EMA-Annexe 1 » dans le texte courant (theme.js) : trait de surligneur, sans changer la largeur du texte */
.px-nw { white-space: nowrap; }
.px-a1 { white-space: nowrap; background: linear-gradient(transparent 58%, rgba(0, 174, 239, .3) 58%, rgba(0, 174, 239, .3) 92%, transparent 92%); color: inherit; font-weight: inherit; padding: 0; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.px-dark .px-a1, .px-pagehead .px-a1, .film .px-a1 { background: linear-gradient(transparent 58%, rgba(0, 174, 239, .55) 58%, rgba(0, 174, 239, .55) 92%, transparent 92%); color: #fff; }
@media (forced-colors: active) { .px-a1 { background: none; text-decoration: underline; } }

/* Témoignages d'À propos « à la une » (son choix T1, 2026-10-25 ; temoignages-une.cjs) : un cadre blanc, un guillemet
   carré juste au-dessus du texte, les logos à droite. Les citations sont empilées dans la même case : la hauteur ne
   saute pas quand elles changent. */
.px-vt-in { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 2.4rem); align-items: start; }
.px-vt-stage { position: relative; }
.px-vt-figs { display: grid; }
.px-vt-figs > .px-vt-big { grid-area: 1 / 1; }
.px-vt-big { position: relative; margin: 0; padding: clamp(1.8rem, 3.6vw, 2.8rem) clamp(1.6rem, 3.6vw, 3rem); background: #fff; border-top: 5px solid var(--cyan); box-shadow: 0 1.8rem 3.4rem -2rem rgba(10, 28, 46, .45); }
.px-vt.is-ready .px-vt-big { transition: opacity .45s ease, visibility .45s; }
.px-vt.is-ready .px-vt-big:not(.is-on) { opacity: 0; visibility: hidden; }
.px-vt-q { display: block; width: clamp(3.4rem, 2.6rem + 2.4vw, 4.8rem); height: auto; margin: 0 0 .9rem; fill: var(--cyan); }
.px-vt-big .px-brand { position: absolute; top: clamp(1.8rem, 3.6vw, 2.8rem); right: clamp(1.6rem, 3.6vw, 3rem); height: 2.6rem; margin: 0; justify-content: flex-end; }
.px-vt-big .px-brand img { max-height: 2.6rem; width: auto; }
.px-vt-one + .px-vt-one { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.px-vt-big blockquote { margin: 0; }
.px-vt-big blockquote p { margin: 0; color: var(--navy); font-family: var(--font-heading); font-size: clamp(1.12rem, 1rem + .55vw, 1.45rem); font-weight: 300; line-height: 1.5; }
.px-vt-who { display: grid; gap: .1rem; margin: 1rem 0 0; }
.px-vt-who strong { color: var(--navy); font-size: 1.08rem; }
.px-vt-who span { color: var(--body-ink); font-size: .9rem; }
.px-vt-arrow { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; margin-top: -1.45rem; border: 0; border-radius: 50%; background: var(--navy); color: #fff; font-size: 1.15rem; cursor: pointer; box-shadow: 0 .6rem 1.2rem -.5rem rgba(10, 28, 46, .5); transition: background .2s, transform .2s; }
.px-vt-arrow:hover, .px-vt-arrow:focus-visible { background: var(--red); }
.px-vt-arrow.is-prev { left: -1.45rem; } .px-vt-arrow.is-next { right: -1.45rem; }
.px-vt-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: 0; padding: 0; list-style: none; }
.px-vt-pick button { display: grid; place-items: center; width: 100%; min-height: 5.4rem; padding: .8rem; border: 1px solid var(--line); border-bottom: 3px solid transparent; background: #fff; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s var(--ease); }
.px-vt-pick button:hover { transform: translateY(-2px); }
.px-vt-pick button[aria-pressed="true"] { border-bottom-color: var(--cyan); box-shadow: 0 .8rem 1.6rem -1rem rgba(10, 28, 46, .4); }
.px-vt-pick button:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.px-vt-pick .px-brand { height: 2.2rem; margin: 0; justify-content: center; }
.px-vt-pick .px-brand img { max-height: 2.2rem; width: auto; }
.px-vt-pick .px-brand > span { font-size: .82rem; font-weight: 700; color: var(--navy); text-align: center; }
.px-vt-pause { justify-self: start; margin-top: .9rem; min-height: 2.5rem; padding: 0 1rem; border: 1px solid var(--line); background: #fff; color: var(--navy); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; }
.px-vt-side { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (max-width: 980px) {
  .px-vt-in { grid-template-columns: minmax(0, 1fr); }
  .px-vt-pick { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 9rem; overflow-x: auto; padding-bottom: .4rem; }
}
@media (max-width: 760px) {
  .px-vt-big { padding-top: 1.6rem; }
  .px-vt-big .px-brand { position: static; justify-content: flex-start; margin-bottom: 1rem; }
  .px-vt-arrow.is-prev { left: -.6rem; } .px-vt-arrow.is-next { right: -.6rem; }
  .px-vt-arrow { top: auto; bottom: -1.45rem; margin-top: 0; }
  .px-vt-stage { margin-bottom: 1.8rem; }
}
@media (prefers-reduced-motion: reduce) { .px-vt.is-ready .px-vt-big { transition: none; } .px-vt-pick button { transition: none; } }
.px-vt-big.is-long blockquote p { font-size: clamp(.98rem, .94rem + .2vw, 1.08rem); line-height: 1.6; font-weight: 400; }
.px-vt-big.is-short blockquote p { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); line-height: 1.4; }
.px-vt-figs > .px-vt-big { display: flex; flex-direction: column; justify-content: center; }
.px-vt-pick .px-brand { max-width: 100%; overflow: hidden; }
.px-vt-pick .px-brand img, .px-vt-big .px-brand img { max-width: 100%; object-fit: contain; }
.px-vt-in > * { min-width: 0; }
.px-vt-side > *, .px-vt-figs > * { min-width: 0; } .px-vt-pick { max-width: 100%; }
.px-vt-pick button { position: relative; } /* ses libellés pour lecteurs d’écran restent dans la rangée qui défile */

/* Notre méthode, Expertises (son choix du 2026-10-25 : X1 + les photos de X3) : quatre cases aux couleurs P·B·E, une photo
   fine en haut de chacune, le flacon qui avance sur le tapis. */
.px-mt-line ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.px-mt-line li { --c: var(--cyan); display: grid; align-content: start; overflow: hidden; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--c); }
.px-mt-line li:nth-child(2) { --c: var(--red); } .px-mt-line li:nth-child(3) { --c: var(--primary); }
.px-mt-line li img { display: block; width: 100%; aspect-ratio: 8 / 3; height: auto; object-fit: cover; }
.px-mt-line .bd { display: grid; gap: .5rem; padding: 1.1rem 1.2rem 1.3rem; }
.px-mt-line .n { color: var(--c); font-family: var(--font-heading); font-size: 1.6rem; font-weight: 700; line-height: 1; }
.px-mt-line li:nth-child(1) .n, .px-mt-line li:nth-child(4) .n { color: var(--sky-shade, #0079a8); }
.px-mt-line h3 { margin: 0; color: var(--navy); font-size: 1.12rem; }
.px-mt-line p { margin: 0; color: var(--body-ink); font-size: .92rem; line-height: 1.5; }
.px-mt-line .belt { position: relative; height: 4.6rem; margin-top: 1rem; }
.px-mt-line .belt::before { content: ""; position: absolute; left: 0; right: 0; bottom: .6rem; height: 14px; border-radius: 7px; background: repeating-linear-gradient(90deg, #9fb0bf 0 3px, #d7e0e7 3px 22px); animation: px-belt 1.2s linear infinite; }
@keyframes px-belt { to { background-position: 22px 0; } }
.px-mt-line .vial { position: absolute; left: calc(100% - 2.4rem); bottom: 1.6rem; width: 1.9rem; }
.px-mt-line .vial svg { display: block; width: 100%; height: auto; } .px-mt-line .cap { fill: var(--navy); } .px-mt-line .gl { fill: rgba(255, 255, 255, .9); stroke: var(--navy); stroke-width: 2.5; } .px-mt-line .lq { fill: var(--cyan); }
.px-mt-line.is-armed .vial { left: 0; } .px-mt-line.is-armed li { border-top-color: var(--line); } .px-mt-line.is-armed li img { opacity: .25; filter: grayscale(1); } /* le texte reste toujours lisible */
.px-mt-line.is-armed.is-play .vial { left: calc(100% - 2.4rem); transition: left 3.6s cubic-bezier(.45, 0, .55, 1) .3s; }
.px-mt-line.is-armed.is-play li { border-top-color: var(--c); transition: border-color .4s; } .px-mt-line.is-armed.is-play li img { opacity: 1; filter: none; transition: opacity .5s, filter .5s; transition-delay: inherit; }
.px-mt-line.is-armed.is-play li:nth-child(1), .px-mt-line.is-armed.is-play li:nth-child(1) img { transition-delay: .3s; } .px-mt-line.is-armed.is-play li:nth-child(2), .px-mt-line.is-armed.is-play li:nth-child(2) img { transition-delay: 1.2s; } .px-mt-line.is-armed.is-play li:nth-child(3), .px-mt-line.is-armed.is-play li:nth-child(3) img { transition-delay: 2.1s; } .px-mt-line.is-armed.is-play li:nth-child(4), .px-mt-line.is-armed.is-play li:nth-child(4) img { transition-delay: 3s; }
@media (max-width: 980px) { .px-mt-line ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .px-mt-line ol { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .px-mt-line .belt::before { animation: none; } }
.px-mt-line li { box-shadow: 0 1rem 2rem -1.6rem rgba(10, 28, 46, .4); }


/* Page Contact (son choix P1, 2026-10-25 ; contact-parcours.cjs) : le besoin d'abord, la vidéo d'une salle propre, le
   formulaire en quatre étapes visibles avec une barre qui se remplit, puis le contact direct et les bureaux. */
.px-ct-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: clamp(36rem, calc(100svh - 5rem), 46rem); padding: clamp(2.4rem, 4.5vw, 3.6rem) 0 clamp(2.8rem, 5vw, 4rem); background: #02060d; color: #fff; }
.px-ct-hero > .wrap { position: relative; z-index: 1; width: 100%; }
.px-ct-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 5px; background: linear-gradient(90deg, var(--cyan) 0 33.3%, var(--red) 33.3% 66.6%, var(--primary) 66.6%); }
.px-ct-film { position: absolute; inset: 0; z-index: -1; margin: 0; }
.px-ct-film::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, rgba(2, 8, 18, .93) 0%, rgba(2, 8, 18, .8) 40%, rgba(2, 8, 18, .22) 60%, rgba(2, 8, 18, 0) 76%); }
.px-ct-film > img, .px-ct-film > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.px-ct-film > video { z-index: 1; }
.px-ct-copy { max-width: 40rem; }
.px-ct-hero .eyebrow, .px-ct-hero h1 strong { color: #8fd8f5; }
.px-ct-hero h1 { margin: .4rem 0 .8rem; color: #fff; font-size: clamp(2.2rem, 1.3rem + 2.9vw, 3.7rem); line-height: 1.05; text-wrap: balance; }
.px-ct-hero .lead { margin: 0 0 1.3rem; color: #d5e3ee; }
.px-ct-q { margin: 0 0 .7rem; color: #fff; font-weight: 700; }
.px-ct-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 0 0 1.5rem; }
.px-ct-chip { position: relative; display: flex; align-items: center; padding: .68rem .9rem .68rem 2.5rem; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: .9rem; font-weight: 600; line-height: 1.3; text-decoration: none; transition: background .2s, border-color .2s, color .2s; }
.px-ct-chip::before { content: ""; position: absolute; left: .9rem; top: 50%; width: .95rem; height: .95rem; margin-top: -.475rem; border: 1.5px solid #8fd8f5; transition: background .2s, border-color .2s; }
.px-ct-chip:hover, .px-ct-chip:focus-visible { border-color: #8fd8f5; background: rgba(255, 255, 255, .14); }
.px-ct-chip[aria-current="true"] { background: #fff; border-color: #fff; color: var(--navy); }
.px-ct-chip[aria-current="true"]::before { background: var(--red); border-color: var(--red); box-shadow: inset 0 0 0 2px #fff; }
.px-ct-go { margin: 0; }
.px-ct-hero .button, .px-ct-form .button { gap: .55rem; }
.px-ct-proof { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 1.4rem 0 0; padding: 0; list-style: none; color: #b9cfdf; font-size: .84rem; font-weight: 600; }
.px-ct-proof li { position: relative; padding-left: .9rem; }
.px-ct-proof li::before { content: ""; position: absolute; left: 0; top: .5em; width: .4rem; height: .4rem; background: var(--cyan); }
.px-ct-proof li:nth-child(2)::before { background: var(--red); } .px-ct-proof li:nth-child(3)::before { background: #2bb3e6; }

.px-ct-form { background: #f3f6f8; }
.px-ct-form-in { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
.px-ct-main h2 { margin: .3rem 0 .5rem; } .px-ct-lead { margin: 0 0 1.4rem; color: var(--body-ink); }
.px-ct-bar { position: relative; z-index: 3; /* fixe en haut du formulaire : elle ne suit plus le défilement (sa demande du 2026-10-27, elle passait sur les choix) */ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin: 0 0 1.2rem; padding: .7rem .9rem; list-style: none; background: rgba(243, 246, 248, .94); backdrop-filter: blur(6px); }
.px-ct-bar li { display: flex; align-items: center; gap: .5rem; padding-top: .6rem; border-top: 3px solid #d3dee6; color: var(--muted); font-size: .84rem; font-weight: 600; transition: border-color .3s, color .3s; }
.px-ct-bar li span { display: grid; place-items: center; flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 1.5px solid currentColor; font-size: .8rem; }
.px-ct-bar li.is-here { border-top-color: var(--red); color: var(--navy); }
.px-ct-bar li.is-done { border-top-color: var(--primary); color: var(--primary); }
.px-ct-bar li.is-done span { background: var(--primary); border-color: var(--primary); color: #fff; }
.px-ct-step { margin: 0 0 1rem; padding: 1.5rem 1.6rem 1.6rem; border: 0; border-top: 4px solid var(--cyan); background: #fff; box-shadow: 0 1rem 2rem -1.6rem rgba(10, 28, 46, .4); scroll-margin-top: calc(var(--hdr, 5rem) + 5rem); }
.px-ct-step[data-step="1"] { border-top-color: var(--red); } .px-ct-step[data-step="2"] { border-top-color: var(--primary); } .px-ct-step[data-step="3"] { border-top-color: var(--navy); }
.px-ct-step legend { float: left; width: 100%; display: flex; align-items: center; gap: .7rem; margin: 0 0 .3rem; padding: 0; color: var(--navy); font-family: var(--font-heading); font-size: 1.3rem; font-weight: 600; }
.px-ct-step legend + * { clear: both; }
.px-ct-step legend .n { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; background: var(--navy); color: #fff; font-size: .95rem; font-weight: 800; }
.px-ct-step .hint { margin: 0 0 1rem; color: var(--muted); font-size: .9rem; }
.px-ct-sub { margin: .2rem 0 .6rem; color: var(--navy); font-size: .9rem; font-weight: 700; }
.px-ct-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.px-ct-tile { display: flex; gap: .7rem; align-items: flex-start; padding: .85rem 1rem; border: 1.5px solid #d3dee6; background: #fff; cursor: pointer; transition: border-color .2s, background .2s; }
.px-ct-tile:hover { border-color: var(--primary); } .px-ct-tile:has(input:checked) { border-color: var(--primary); background: #eef6fb; }
.px-ct-tile:has(input:focus-visible) { outline: 3px solid var(--primary); outline-offset: 2px; }
.px-ct-tile input { flex: none; margin-top: .25rem; width: 1.1rem; height: 1.1rem; accent-color: var(--primary); }
.px-ct-tile strong { display: block; color: var(--navy); font-size: .95rem; } .px-ct-tile small { display: block; margin-top: .15rem; color: var(--muted); font-size: .8rem; line-height: 1.4; }
.px-ct-pills { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.1rem; }
.px-ct-pill { min-height: 2.5rem; padding: .4rem .9rem; border: 1.5px solid #c9d7e2; border-radius: 99px; background: #fff; color: var(--navy); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.px-ct-pill:hover { border-color: var(--primary); }
.px-ct-pill[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.px-ct-aside { display: grid; gap: 1.1rem; padding: 1.6rem; background: #fff; border-top: 5px solid var(--cyan); box-shadow: 0 1rem 2rem -1.6rem rgba(10, 28, 46, .4); }
.px-ct-aside .k, .px-ct-aside .k2 { margin: 0; color: var(--red); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.px-ct-aside .k2 { margin-top: .5rem; color: var(--primary); }
.px-ct-aside h2 { margin: 0; color: var(--navy); font-size: 1.4rem; line-height: 1.2; }
.px-ct-aside img { width: 100%; height: auto; } .px-ct-aside p { margin: 0; color: var(--body-ink); }
.px-ct-sum { margin: .4rem 0 1.3rem; }
.px-ct-sum .k2 { margin: 0; color: var(--primary); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.px-ct-sum ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.px-ct-sum li { display: grid; gap: .05rem; padding: .45rem .7rem; background: #f1f6fa; border-left: 3px solid var(--primary); font-size: .88rem; color: var(--navy); }
.px-ct-sum li b { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.px-ct-next { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.px-ct-next li { display: flex; align-items: center; gap: .8rem; color: var(--navy); font-weight: 600; }
.px-ct-next span { display: grid; place-items: center; flex: none; width: 2.3rem; height: 2.3rem; background: color-mix(in srgb, var(--cyan) 62%, #000); color: #fff; font: 800 .85rem var(--font-heading); }
.px-ct-next li:nth-child(2) span { background: var(--red); } .px-ct-next li:nth-child(3) span { background: var(--primary); }

.px-ct-direct-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.6rem, 4vw, 3.6rem); align-items: start; }
.px-ct-direct h2 { margin: .3rem 0 1.4rem; }
.px-ct-dl { margin: 0; border-top: 1px solid var(--line); }
.px-ct-dl > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.px-ct-dl dt { color: var(--muted); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.px-ct-dl dd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin: 0; }
.px-ct-dl dd a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--navy); font-size: 1.1rem; font-weight: 600; }
.px-ct-dl button { min-height: 2.5rem; padding: 0 .9rem; border: 1px solid var(--line); background: #fff; color: var(--primary); font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; }
.px-ct-dl button.is-done { color: #17803f; border-color: #1f9d55; }
.px-ct-off .tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.2rem; }
.px-ct-off .tabs button { min-height: 2.6rem; padding: .4rem 1rem; border: 1px solid var(--line); border-radius: 99px; background: #fff; color: var(--navy); font: inherit; font-weight: 600; cursor: pointer; }
.px-ct-off .tabs button[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.px-ct-off figure { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; } .px-ct-off [role="tabpanel"][hidden] { display: none; }
.px-ct-off figure img { width: 100%; height: 100%; object-fit: cover; }
.px-ct-off figcaption { position: absolute; left: 1rem; bottom: 1rem; display: grid; gap: .15rem; max-width: 82%; padding: 1rem 1.2rem; background: #fff; box-shadow: 0 1rem 2rem -1.2rem rgba(10, 28, 46, .55); }
.px-ct-off .r { color: var(--red); font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.px-ct-off strong { color: var(--navy); font-size: 1.25rem; } .px-ct-off address { color: var(--body-ink); font-size: .9rem; font-style: normal; line-height: 1.45; }
.px-ct-reach { margin: .8rem 0 0; color: var(--muted); font-size: .88rem; }
@media (max-width: 980px) { .px-ct-form-in, .px-ct-direct-in { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .px-ct-hero { display: block; min-height: 0; padding: 0 0 2.6rem; }
  .px-ct-film { position: relative; z-index: 0; aspect-ratio: 16 / 10; margin-bottom: 1.2rem; }
  .px-ct-film::after { background: linear-gradient(180deg, rgba(2, 6, 13, 0) 55%, #02060d 100%); }
  .px-ct-chips { grid-template-columns: minmax(0, 1fr); }
  .px-ct-sum ul { grid-template-columns: minmax(0, 1fr); }
  .px-ct-tiles { grid-template-columns: minmax(0, 1fr); }
  .px-ct-bar { grid-template-columns: repeat(4, auto); justify-content: space-between; } .px-ct-bar li { font-size: 0; gap: 0; } .px-ct-bar li span { font-size: .8rem; }
  .px-ct-dl > div { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .px-ct-off figure { aspect-ratio: auto; } .px-ct-off figure img { height: auto; aspect-ratio: 16 / 10; }
  .px-ct-off figcaption { position: static; max-width: none; box-shadow: none; }
  .px-ct-step { padding: 1.2rem 1.1rem 1.3rem; }
}

/* Présence internationale de l'accueil (son choix W1 du 2026-10-25 ; presence-continents.cjs) : la Terre vue de l'espace
   en fond, quatre cartes de continent en verre dépoli avec leur photo et leurs lieux, les chiffres en bas. */
.px-w1 { position: relative; isolation: isolate; overflow: hidden; padding: clamp(3rem, 6vw, 5rem) 0; background: radial-gradient(50rem 36rem at 85% 30%, rgba(0, 120, 200, .25), transparent 60%), #02060d; color: #fff; }
.px-w1-earth { position: absolute; right: -14rem; top: -10rem; z-index: -1; width: 46rem; height: auto; opacity: .55; border-radius: 50%; -webkit-mask-image: radial-gradient(circle, #000 60%, transparent 71%); mask-image: radial-gradient(circle, #000 60%, transparent 71%); }
.px-w1-head { max-width: 50rem; margin-bottom: 2rem; }
.px-w1-head .eyebrow, .px-w1-head h2 strong { color: #8fd8f5; }
.px-w1-head h2 { margin: .3rem 0 .8rem; color: #fff; }
.px-w1-head p:not(.eyebrow) { margin: 0; color: #cfe0ec; }
.px-w1-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.px-w1-grid > li { overflow: hidden; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-top: 4px solid var(--cyan); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.px-w1-grid > li.c1 { border-top-color: var(--red); } .px-w1-grid > li.c2 { border-top-color: #2bb3e6; } .px-w1-grid > li.c3 { border-top-color: #1f9d55; }
.px-w1-grid figure { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; }
.px-w1-grid figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.px-w1-grid > li:hover figure img { transform: scale(1.05); }
.px-w1-grid figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .7rem .9rem; background: linear-gradient(180deg, transparent, rgba(2, 6, 13, .85)); font: 600 1.1rem var(--font-heading); }
.px-w1-grid figcaption .n { margin-right: .5rem; color: #8fd8f5; font-size: .8rem; }
.px-w1-grid > li > ul { display: grid; gap: .25rem; margin: 1rem 0 0; padding: 0 .5rem .8rem; list-style: none; }
.px-w1-grid li li a { display: block; padding: .45rem .4rem; color: inherit; text-decoration: none; transition: background .2s; }
.px-w1-grid li li a:hover, .px-w1-grid li li a:focus-visible { background: rgba(255, 255, 255, .08); }
.px-w1-grid strong { display: block; color: #fff; font-size: .95rem; }
.px-w1-grid li li a:hover strong { text-decoration: underline; text-underline-offset: .2em; }
.px-w1-grid li li span { display: block; color: #b9cfdf; font-size: .82rem; line-height: 1.4; }
.px-w1-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0 0; padding: 1.4rem 0 0; border-top: 1px solid rgba(255, 255, 255, .15); list-style: none; color: #b9cfdf; font-size: .88rem; }
.px-w1-stats strong { display: block; color: #fff; font: 700 2rem var(--font-heading); }
@media (max-width: 1010px) { .px-w1-grid, .px-w1-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .px-w1-grid { grid-template-columns: minmax(0, 1fr); } .px-w1-grid figure { aspect-ratio: 2 / 1; } .px-w1-earth { width: 30rem; right: -12rem; } }
@media (prefers-reduced-motion: reduce) { .px-w1-grid figure img { transition: none; } .px-w1-grid > li:hover figure img { transform: none; } }

/* Institut Pasteur (sa photo du 2026-10-25) : le cadrage garde l'enseigne, à droite de la photo */
img[src*="projet-institut-pasteur"] { object-position: 100% 70%; }

/* Pied de page (sa demande du 2026-10-25) : « Le site » en deux colonnes, la colonne n'est plus deux fois plus haute que
   les autres. Sur téléphone, cette liste prend toute la largeur. */
.site-footer .footer-list.is-two { display: grid; grid-template-columns: repeat(2, max-content); grid-template-rows: repeat(6, auto); grid-auto-flow: column; column-gap: 2.2rem; }
@media (min-width: 861px) { .site-footer .footer-grid { grid-template-columns: 1.3fr 1fr 1.7fr 1fr; } }
@media (max-width: 860px) { .site-footer .footer-grid > .is-site { grid-column: 1 / -1; } }
/* >>> mur des nominations (nominations-mur.cjs ; son choix N4 du 2026-10-25) : un certificat droit par distinction,
   cadre guilloché fin, papier ivoire, logo de l'organisme, sceau doré ; sur fond clair, sous le haut bleu de la section. */
.px-honors { padding-bottom: clamp(2.6rem, 5vw, 3.6rem); }
.px-n4 { background: linear-gradient(180deg, #eef3f7, #f7f9fb); }
.px-n4-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.px-n4-h { margin: 0 0 1.8rem; color: var(--navy); font-family: var(--font-heading); font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); font-weight: 500; }
.px-n4-wall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem 1.2rem; }
.px-n4-wall li { --c: var(--cyan); display: grid; }
.px-n4-wall li.is-b { --c: var(--red); } .px-n4-wall li.is-e { --c: var(--primary); }
.px-n4-wall .paper { position: relative; display: grid; grid-template-rows: 3.6rem auto auto 1fr; justify-items: center; gap: .45rem; padding: 1.1rem .8rem 3.1rem; text-align: center; border: 15px solid #f1ebd8; border-image: url("/assets/img/cadre-guilloche.svg") 56 round; background: url("/assets/img/papier.svg"), radial-gradient(ellipse at 50% 35%, #fffef9 0%, #fffcf3 60%, #f6efdc 100%); box-shadow: inset 0 0 0 3px #fffcf3, inset 0 0 0 4px #c4b07a, 0 1.2rem 2rem -1.3rem rgba(10, 28, 46, .55); transition: transform .3s var(--ease), box-shadow .3s; }
.px-n4-wall li:hover .paper { transform: translateY(-4px); box-shadow: inset 0 0 0 3px #fffcf3, inset 0 0 0 4px #c4b07a, 0 1.6rem 2.4rem -1.3rem rgba(10, 28, 46, .6); }
.px-n4-wall .lg { display: grid; place-items: center; height: 3.6rem; margin: 0; }
.px-n4-wall .lg img { width: auto; height: auto; max-width: 9rem; max-height: 3.2rem; }
.px-n4-wall .lg img.is-hc { max-width: 7rem; max-height: 1.4rem; }
.px-n4-wall .lg img.is-wide { max-width: 9.4rem; max-height: 2.2rem; }
.px-n4-wall .lg img.is-sq { max-height: 2.4rem; }
.px-n4-wall .lg img.is-cpmt { filter: brightness(0); opacity: .85; }
.px-n4-wall .y { margin: .2rem 0 0; font-family: var(--font-heading); font-size: 1.75rem; font-weight: 700; line-height: 1; color: color-mix(in srgb, var(--c) 68%, #000); }
.px-n4-wall strong { font-family: var(--font-heading); font-size: 1rem; line-height: 1.3; color: var(--navy); text-wrap: balance; }
.px-n4-wall .by { margin: 0; align-self: end; font-size: .8rem; line-height: 1.35; color: var(--body-ink); }
.px-n4-wall .by span { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.px-n4-wall .seal { position: absolute; right: .55rem; bottom: .45rem; width: 2.5rem; height: 2.5rem; filter: drop-shadow(0 2px 3px rgba(80, 55, 5, .3)); }
.px-n4-wall .seal .o { fill: url(#px-n4-gold); stroke: #8a6410; stroke-width: .5; } .px-n4-wall .seal .r { fill: none; stroke: #a27a17; stroke-width: 1; }
.px-n4-wall .seal .f { fill: url(#px-n4-face); } .px-n4-wall .seal .ck { fill: none; stroke: #6b4c08; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 999px) { .px-n4-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .px-n4-wall { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .px-n4-wall .by { font-size: .92rem; } .px-n4-wall .by span { font-size: .78rem; } }
@media (prefers-reduced-motion: reduce) { .px-n4-wall .paper { transition: none; } }
/* <<< mur des nominations */

/* Menu du téléphone et de la tablette (sa remarque du 2026-10-25 : on ne pouvait pas descendre jusqu'au bout d'Expertises) :
   le menu ouvert défile au doigt dans la hauteur de l'écran, la page derrière ne bouge plus, la barre du bas et le bouton
   flottant s'effacent pendant qu'il est ouvert. */
@media (max-width: 1010px) {
  .site-nav[data-open] .nav-list { max-height: calc(100dvh - var(--hdr, 4.5rem)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: 2.5rem; }
  html.is-nav-open { overflow: hidden; }
  html.is-nav-open .px-mbar, html.is-nav-open .px-float { visibility: hidden; }
}

/* Témoignages (sa remarque du 2026-10-25) : sur ordinateur, les flèches de l'accueil restent à la même hauteur, quelle que
   soit la longueur de la citation ; sur téléphone, plus de flèches : on glisse la citation au doigt (les points disent où
   l'on est). */
@media (min-width: 761px) { .px-vc-row { align-items: start; } .px-vc-arrow { margin-top: clamp(4.5rem, 8vw, 6.5rem); } }
@media (max-width: 760px) {
  .px-vc-arrow, .px-vc-arrow[hidden], .px-vt-arrow, .px-vt-arrow[hidden] { display: none; }
  .px-vt-stage { margin-bottom: 0; }
  .px-vt.is-ready .px-vt-figs { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
}

/* Fiches d'expertise (sa demande du 2026-10-25) : l'icône à gauche du titre, à la hauteur de sa première ligne, au lieu
   d'être au-dessus ; le titre gagne de la place. */
/* 2026-10-25, sa 2e demande : le titre bien à gauche, l'icône en petit appui à sa droite, à la hauteur de la première ligne */
.px-dhead-title { display: flex; align-items: flex-start; gap: clamp(.7rem, 1.4vw, 1.1rem); font-size: clamp(2.4rem, 1.4rem + 3.2vw, 4.1rem); }
.px-dhead-title .px-dhead-ico { flex: none; width: .62em; height: .62em; margin: .22em 0 0; opacity: .9; }
.px-dhead-title h1 { font-size: 1em; }
.px-dhead-title h1 { min-width: 0; }
@media (max-width: 420px) { .px-dhead-title { font-size: 2.15rem; gap: .5rem; } .px-dhead-title .px-dhead-ico { width: .6em; height: .6em; } }

/* Bas de l'accueil, le plan (sa demande du 2026-10-25) : à gauche, la question, le bouton (il quitte le plan) et la phrase,
   le titre à la hauteur de celui du plan ; le cartouche du plan plus court (PBE Expert sur une ligne, lignes resserrées). */
@media (min-width: 981px) {
  .px-plan-left { align-items: flex-start; padding-top: calc(clamp(2rem, 4vw, 4rem) + clamp(.9rem, 2vw, 1.5rem) + .2rem); }
  .px-plan-right { justify-content: flex-start; }
}
.px-plan-go { margin: 1.8rem 0 0; } .px-plan-go .button { gap: .55rem; }
.px-plan-cta .px-plan-left .px-intro { margin-top: 1.6rem; }
.px-plan-title { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.px-plan-title p { margin: 0; display: grid; gap: .1rem; } .px-plan-title small { color: var(--sky-shade); font-size: .78rem; font-weight: 700; letter-spacing: .06em; }
.px-plan-title > span { white-space: nowrap; }
.px-plan-split .px-plan-block { grid-template-columns: minmax(0, 7.8rem) minmax(0, 1fr); }
.px-plan-block dt, .px-plan-block dd { padding: .36rem .7rem; }
.px-plan-block dt { white-space: nowrap; }
@media (max-width: 420px) { .px-plan-split .px-plan-block { grid-template-columns: minmax(0, 6.8rem) minmax(0, 1fr); } .px-plan-block dt { white-space: normal; } .px-plan-title { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .px-plan-split .px-plan-block { grid-template-columns: minmax(0, 7.4rem) minmax(0, 1fr); } .px-plan-block .px-plan-brand dt { white-space: nowrap; font-size: .8rem; letter-spacing: .08em; } }
/* >>> cycle en V (cycle-v.cjs ; son choix V1 du 2026-10-25) */
.px-cv { position: relative; isolation: isolate; overflow: hidden; padding: clamp(3rem, 6vw, 5rem) 0; }
.px-cv::before { content: ""; position: absolute; inset: -24px; z-index: -2; background: url("/assets/img/photos/carrieres-ingenieurs.webp") center / cover; filter: blur(9px) saturate(.85); }
.px-cv::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(236, 243, 250, .88), rgba(220, 233, 245, .7)); }
.px-cv-head { max-width: 46rem; margin-bottom: 2rem; } .px-cv-head h2 { margin: .3rem 0 .6rem; } .px-cv-head h2 strong { color: var(--primary); } .px-cv-head p:not(.eyebrow) { margin: 0; color: var(--ink); }
.px-cv-in { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: clamp(1.4rem, 3vw, 2.6rem); align-items: center; }
.px-cv-v { position: relative; aspect-ratio: 100 / 64; filter: drop-shadow(0 1rem 1.4rem rgba(4, 30, 60, .18)); }
.px-cv-v .bx { position: absolute; width: 28%; height: 16%; display: grid; place-items: center; transform: skewX(-14deg); background: linear-gradient(180deg, #2bb0f5 0%, #0a63c9 100%); box-shadow: 0 .9rem 1.6rem -1rem rgba(4, 40, 90, .7), inset 0 1px 0 rgba(255, 255, 255, .35); border-radius: 6px; }
.px-cv-v .bx > span { display: grid; transform: skewX(14deg); color: #fff; text-align: center; font-size: clamp(.68rem, .5rem + .45vw, .9rem); line-height: 1.2; }
.px-cv-v .bx b { font: 700 clamp(.95rem, .6rem + .8vw, 1.35rem) var(--font-heading); }
.px-cv-v .l0 { left: 0; top: 2%; } .px-cv-v .l1 { left: 6%; top: 24%; } .px-cv-v .l2 { left: 12%; top: 46%; }
.px-cv-v .r0 { left: 72%; top: 2%; } .px-cv-v .r1 { left: 66%; top: 24%; } .px-cv-v .r2 { left: 60%; top: 46%; }
.px-cv-v .c { left: 33%; top: 74%; width: 34%; background: linear-gradient(180deg, #1c86d6 0%, #08408f 100%); }
.px-cv-v .dn, .px-cv-v .up { position: absolute; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; transform: translateX(-50%); }
.px-cv-v .dn { border-top: 10px solid #0a3b66; } .px-cv-v .up { border-bottom: 10px solid #0a3b66; }
.px-cv-v .d0 { left: 13%; top: 19.5%; } .px-cv-v .d1 { left: 20%; top: 41.5%; } .px-cv-v .d2 { left: 30%; top: 66%; }
.px-cv-v .u2 { left: 70%; top: 66%; } .px-cv-v .u1 { left: 79%; top: 41.5%; } .px-cv-v .u0 { left: 86%; top: 19.5%; }
.px-cv-v .lk { position: absolute; display: grid; align-items: end; justify-items: center; height: 8%; margin: 0; border-bottom: 2px solid #0a3b66; }
.px-cv-v .lk::before, .px-cv-v .lk::after { content: ""; position: absolute; bottom: -7px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.px-cv-v .lk::before { left: -2px; border-right: 10px solid #0a3b66; } .px-cv-v .lk::after { right: -2px; border-left: 10px solid #0a3b66; }
.px-cv-v .lk span { margin-bottom: .35rem; padding: .22rem .7rem; border-radius: 99px; background: #0a3b66; color: #fff; font-size: clamp(.6rem, .45rem + .3vw, .74rem); font-weight: 800; letter-spacing: .08em; line-height: 1.25; text-align: center; text-transform: uppercase; white-space: nowrap; }
.px-cv-v .k0 { left: 29.5%; width: 41%; top: 2%; } .px-cv-v .k1 { left: 35.5%; width: 29%; top: 24%; } .px-cv-v .k2 { left: 41.5%; width: 17%; top: 46%; height: 9%; }
.px-cv-v .k2 span { white-space: normal; padding: .2rem .5rem; border-radius: 8px; }
.px-cv-legend { display: none; margin: .8rem 0 0; color: var(--navy); font-size: .9rem; font-weight: 700; }
.px-cv-steps { display: grid; gap: 1.6rem; margin: 0; padding: 1.4rem 1.2rem; list-style: none; color: #fff; background: rgba(6, 32, 56, .78); border: 1px solid rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1.2rem 2.4rem -1.6rem rgba(4, 30, 60, .5); }
.px-cv-steps li { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .8rem; align-items: center; }
.px-cv-steps li + li::before { content: ""; position: absolute; left: 1.5rem; top: -1.6rem; width: 2px; height: 1.3rem; transform: translateX(-50%); background: currentColor; opacity: .6; }
.px-cv-steps .n { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 2px solid currentColor; font: 700 1.25rem var(--font-heading); }
.px-cv-steps li.is-on .n { background: linear-gradient(180deg, #2bb0f5, #0a63c9); border-color: #0a63c9; box-shadow: 0 0 0 6px rgba(43, 176, 245, .25); }
.px-cv-steps b { display: block; font: 700 1rem var(--font-heading); } .px-cv-steps li > span:last-child { font-size: .84rem; line-height: 1.3; }
@media (max-width: 980px) { .px-cv-in { grid-template-columns: minmax(0, 1fr); } .px-cv-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .px-cv-steps li { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } .px-cv-steps li + li::before { display: none; } }
@media (max-width: 560px) { .px-cv-v { aspect-ratio: 100 / 80; } .px-cv-v .bx { width: 30%; } .px-cv-steps { grid-template-columns: minmax(0, 1fr); } .px-cv-v .lk span { display: none; } .px-cv-legend { display: block; } }
.px-cv .px-cv-in { grid-template-columns: minmax(0, 1fr) 21rem; }
.px-cv-v .bx { border: 0; padding: 0; font: inherit; cursor: pointer; transition: transform .25s, filter .25s, opacity .25s, box-shadow .25s; }
.px-cv-v .bx:hover { transform: skewX(-14deg) translateY(-3px); } .px-cv-v .bx:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.px-cv-v.has-pick .bx { filter: saturate(.35) brightness(1.15); opacity: .6; }
.px-cv-v.has-pick .bx.is-on { filter: none; opacity: 1; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--red), 0 1rem 1.6rem -1rem rgba(4, 40, 90, .7); }
.px-cv-v .lk { transition: opacity .3s; } .px-cv-v.has-pick .lk { opacity: .25; } .px-cv-v.has-pick .lk.is-on { opacity: 1; } .px-cv-v .lk.is-on span { background: var(--red); }
.px-cv-card { align-self: center; padding: 1.5rem 1.4rem; color: #fff; background: rgba(6, 32, 56, .86); border-top: 4px solid var(--red); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1.2rem 2.4rem -1.6rem rgba(4, 30, 60, .5); }
.px-cv-card .k { margin: 0 0 .6rem; color: #8fd8f5; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.px-cv-card h3 { margin: 0 0 1rem; color: #fff; font-size: 1.15rem; font-weight: 500; line-height: 1.35; }
.px-cv-card .we { margin: 0 0 1rem; color: #d5e3ee; font-size: .92rem; } .px-cv-card .we b { color: #fff; }
.px-cv-card .pair { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; margin: 0; padding-top: .9rem; border-top: 1px solid rgba(255, 255, 255, .2); color: #d5e3ee; font-size: .9rem; }
.px-cv-card .pair span { color: #8fd8f5; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .px-cv-card .pair b { color: #fff; }
@media (max-width: 980px) { .px-cv .px-cv-in { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .px-cv-v .bx > span { font-size: .62rem; } .px-cv-v .bx b { font-size: .95rem; } }
@media (prefers-reduced-motion: reduce) { .px-cv-v .bx, .px-cv-v .lk { transition: none; } }
/* <<< cycle en V */
/* >>> titres du formateur (formateur-titres.cjs ; son choix E1 du 2026-10-25) */
.px-ft9 { --r: #0079a8; --p: var(--red); --d: #17803f; margin-top: clamp(2.6rem, 5vw, 4rem); }
.px-ft9 .is-r { --c: var(--r); } .px-ft9 .is-p { --c: var(--p); } .px-ft9 .is-d { --c: var(--d); }
.px-ft9-head { display: flex; justify-content: flex-end; margin-bottom: 1rem; }
.px-ft9-head h3 { margin: 0; color: var(--navy); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); } .px-ft9-head h3 strong { color: var(--primary); }
.px-ft9-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: 0; padding: 0; list-style: none; color: var(--navy); font-size: .86rem; font-weight: 700; }
.px-ft9-legend li { display: flex; align-items: center; gap: .45rem; } .px-ft9-legend li::before { content: ""; width: .8rem; height: .8rem; background: var(--c); }
.px-ft9-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.px-ft9-grid > li { position: relative; display: grid; grid-template-columns: 6.4rem minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 1.1rem; align-items: center; min-height: 7.4rem; padding: 1.2rem 1.3rem; background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--c); box-shadow: 0 1rem 2rem -1.6rem rgba(10, 28, 46, .45); overflow: hidden; outline: none; transition: transform .25s, box-shadow .25s; }
.px-ft9-grid .v { grid-row: 1 / 3; justify-self: center; display: grid; place-items: center; width: 4.4rem; height: 4.4rem; padding: .75rem; border-radius: 50%; background: color-mix(in srgb, var(--c) 9%, #fff); box-sizing: border-box; }
.px-ft9-grid .v.is-logo { width: 6.4rem; height: 4.2rem; padding: .35rem .4rem; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.px-ft9-grid .v svg { width: 100%; height: 100%; fill: none; stroke: var(--c); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.px-ft9-grid .v img { width: 100%; height: 100%; object-fit: contain; } .px-ft9-grid .v img.is-cpmt { filter: brightness(0); opacity: .85; }
.px-ft9-grid strong { align-self: end; color: var(--navy); font-family: var(--font-heading); font-size: 1.12rem; line-height: 1.2; }
.px-ft9-grid .w { align-self: start; margin-top: .15rem; color: color-mix(in srgb, var(--c) 78%, #000); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.px-ft9-grid .d { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem 1.4rem; background: var(--c); color: #fff; font-size: .92rem; font-weight: 600; text-align: center; opacity: 0; transition: opacity .25s; }
.px-ft9-grid > li:hover, .px-ft9-grid > li:focus-visible { transform: translateY(-3px); box-shadow: 0 1.4rem 2.4rem -1.6rem rgba(10, 28, 46, .55); }
.px-ft9-grid > li:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.px-ft9-grid > li:hover .d, .px-ft9-grid > li:focus-visible .d { opacity: 1; }
@media (max-width: 980px) { .px-ft9-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .px-ft9-grid { grid-template-columns: minmax(0, 1fr); }
  .px-ft9-grid .d { position: static; grid-column: 1 / -1; margin-top: .6rem; padding: 0; background: none; color: var(--body-ink); text-align: left; justify-self: start; place-items: start; opacity: 1; font-weight: 400; }
  .px-ft9-grid > li:hover, .px-ft9-grid > li:focus-visible { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .px-ft9-grid > li, .px-ft9-grid .d { transition: none; } }
/* <<< titres du formateur */

/* FormAction™ 12, ATEX (sa demande du 2026-10-25) : la photo cadrée à droite, on voit l'ingénieur, son casque et son gilet */
.px-course-ph img[src*="formation-atex"] { object-position: 88% 50%; }

/* Pied de page (son choix V2 du 2026-10-25) : le lever de soleil sur la Terre en vidéo, sous un voile sombre côté texte. Sur
   téléphone ou avec « réduire les animations » : la photo de la Terre, comme avant. */
.px-foot-film { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.px-foot-film video { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }
.px-foot-film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2, 6, 13, .93) 0%, rgba(2, 6, 13, .82) 40%, rgba(2, 6, 13, .5) 72%, rgba(2, 6, 13, .3) 100%), linear-gradient(0deg, rgba(2, 6, 13, .75), transparent 45%); }
.px-foot-film video[hidden] { display: none; }
@media (max-width: 760px) { .px-foot-film { display: none; } }
@media (prefers-reduced-motion: reduce) { .px-foot-film { display: none; } }

/* Fiches d'expertise (sa demande du 2026-10-26) : l'icône continue la première ligne du titre, à la hauteur des lettres */
.px-dhead-h1 .px-dhead-ico { display: inline-block; width: auto; height: .84em; margin: 0 0 0 .06em; vertical-align: -.07em; opacity: 1; }
.px-dhead-h1 .px-dhead-ico * { vector-effect: non-scaling-stroke; }
@media (max-width: 420px) { .px-dhead h1.px-dhead-h1 { font-size: 2.1rem; } }
@media (max-width: 380px) { .px-dhead h1.px-dhead-h1 { font-size: 1.95rem; } }

/* Pied de page (sa demande du 2026-10-26, son pied de page actuel combiné avec l'aperçu S1) : sous le logo et la devise,
   toutes les pages sur une rangée ; puis « Nous joindre » à gauche, la phrase de l'entreprise au centre, les réseaux à droite ;
   les mentions légales et les crédits photos, discrets, dans la barre du bas. */
.px-ft-nav { --sp: clamp(.5rem, .2rem + .5vw, .9rem); margin-top: calc(-1 * clamp(2.2rem, 4vw, 3.2rem)); padding-block: 1.2rem; border-bottom: 1px solid rgba(255, 255, 255, .14); }
/* les séparateurs : un trait entre deux liens, jamais en début de ligne (la marge de gauche est rognée) */
.px-ft-nav .footer-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin-left: calc(-2 * var(--sp)); clip-path: inset(-6px -6px -6px calc(2 * var(--sp))); }
.px-ft-nav .footer-list li { position: relative; display: flex; align-items: center; margin-left: calc(2 * var(--sp)); }
.px-ft-nav .footer-list li::before { content: ""; position: absolute; left: calc(-1 * var(--sp) - .5px); top: 50%; width: 1px; height: 1rem; margin-top: -.5rem; background: rgba(255, 255, 255, .3); }
.px-ft-nav .footer-list a { display: inline-flex; align-items: center; min-height: 2.75rem; min-width: 2.75rem; color: #fff; font-weight: 600; font-size: clamp(.84rem, .6rem + .35vw, .95rem); text-decoration: none; }
.px-ft-nav .footer-list a:hover { text-decoration: underline; text-underline-offset: .3em; }
.px-ft-contact { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.6rem 3rem; align-items: start; padding-block: 2rem .6rem; }
.px-ft-reach .footer-title { margin: 0 0 .6rem; } .px-ft-reach .footer-list { gap: .25rem; } .px-ft-reach .footer-list a, .px-ft-reach address { font-size: .95rem; }
.px-ft-tag { justify-self: center; max-width: 26rem; margin: 2.2rem 0 0; color: #c9d8e4; font-size: .95rem; line-height: 1.55; text-align: center; }
.px-ft-contact .px-social { justify-self: end; margin: 2rem 0 0; }
.px-ft-contact + .px-group-strip { margin-top: 1.6rem; }
.site-footer .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.6rem; }
.px-ft-legal ul { display: flex; flex-wrap: wrap; gap: 0 1.1rem; margin: 0; padding: 0; list-style: none; }
.px-ft-legal a { display: inline-flex; align-items: center; min-height: 2.75rem; color: #8ea3b4 !important; font-size: .8rem; text-decoration: none; }
.px-ft-legal a:hover { color: #fff !important; text-decoration: underline; }
.site-footer .footer-bottom > :last-child { margin-left: auto; }
@media (max-width: 860px) {
  .px-ft-nav .footer-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-left: 0; clip-path: none; } .px-ft-nav .footer-list li { margin-left: 0; } .px-ft-nav .footer-list li::before { display: none; }
  .px-ft-contact { grid-template-columns: minmax(0, 1fr); } .px-ft-tag { justify-self: start; margin: 0; text-align: left; } .px-ft-contact .px-social { justify-self: start; margin: 0; }
  .site-footer .footer-bottom > :last-child { margin-left: 0; }
}
/* barre du bas : © à gauche et le crédit à droite, les mentions légales discrètes dessous (2026-10-26) */
.site-footer .footer-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 1.6rem; align-items: center; }
.site-footer .footer-bottom > :last-child { margin-left: 0; grid-column: 2; grid-row: 1; }
.site-footer .footer-bottom .px-ft-legal { grid-column: 1 / -1; grid-row: 2; margin-top: -.3rem; }
@media (max-width: 560px) { .site-footer .footer-bottom { grid-template-columns: minmax(0, 1fr); } .site-footer .footer-bottom > :last-child { grid-column: 1; grid-row: 3; } }
/* Pied de page, le plan du site (2026-10-26) : « Nous joindre » tout à gauche, puis les sous-pages en colonnes, discrètes */
.px-ft-plan { display: grid; grid-template-columns: 1.05fr 1.1fr 1.1fr 1fr 1fr; gap: 2rem clamp(1.2rem, 2.4vw, 2.4rem); padding-block: 2.2rem 1rem; }
.px-ft-plan .col { display: grid; align-content: start; gap: 1.6rem; }
.px-ft-plan h2, .px-ft-plan h3 { margin: 0 0 .55rem; color: #fff; font-family: var(--font-body); font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.px-ft-plan h3 a { color: #fff; text-decoration: none; } .px-ft-plan h3 a:hover { text-decoration: underline; text-underline-offset: .3em; }
.px-ft-plan ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.px-ft-plan li a, .px-ft-plan li address { display: inline-flex; align-items: center; min-height: 2rem; color: #b9cad8; font-size: .86rem; line-height: 1.3; text-decoration: none; font-style: normal; }
.px-ft-plan li address { display: block; padding-top: .35rem; }
.px-ft-plan li a:hover { color: #fff; text-decoration: underline; text-underline-offset: .25em; }
.px-ft-plan .px-ft-reach li a { color: #fff; font-size: .95rem; }
.px-ft-contact { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding-block: 1rem; border-top: 1px solid rgba(255, 255, 255, .1); }
.px-ft-tag { justify-self: start; max-width: none; margin: 0; text-align: left; }
.px-ft-contact .px-social { margin: 0; }
@media (max-width: 999px) { .px-ft-plan { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .px-ft-plan { grid-template-columns: repeat(2, minmax(0, 1fr)); } .px-ft-plan li a { min-height: 2.75rem; } }
@media (max-width: 420px) { .px-ft-plan { grid-template-columns: minmax(0, 1fr); } }
.px-ft-plan li a, .px-ft-plan li address { display: block; min-height: 0; padding: .34rem 0; }
.px-ft-plan .px-ft-reach li a { padding: .26rem 0; }
@media (max-width: 760px) { .px-ft-plan li a { display: flex; align-items: center; min-height: 2.75rem; padding: .2rem 0; } }
@media (max-width: 760px) { .px-ft-plan h3 { margin-bottom: .2rem; } .px-ft-plan h3 a { display: inline-flex; align-items: center; min-height: 2.75rem; } }

/* >>> page EMA-Annexe 1 (générée par _source/outils/page-annexe1.cjs) */
.px-a1-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); } .px-a1-head h2 { margin: 0 0 1rem; } .px-a1-head > p:last-child:not(.eyebrow) { margin: 0; color: var(--body-ink); font-size: 1.08rem; }
.px-dark .px-a1-head > p:last-child:not(.eyebrow) { color: #d5e3ee; }
/* le haut : le flacon éclaté, ancré à droite ; le texte sur la partie unie */
.px-a1-hero { position: relative; color: var(--navy); background: linear-gradient(180deg, #fff 0%, #eaf7fc 100%); }
.px-a1-hero .vid { position: relative; height: clamp(18rem, 44svh, 34rem); overflow: hidden; background: #e9eef2; }
.px-a1-hero .vid > img, .px-a1-hero .vid > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.px-a1-hero .in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.3rem; padding-block: clamp(1.6rem, 3vw, 2.4rem) clamp(2.6rem, 5vw, 4rem); align-items: center; }
.px-a1-hero .hd { grid-column: 1 / -1; } .px-a1-hero .eyebrow { color: #006692; }
.px-a1-hero h1 { margin: 0; color: var(--navy); font-size: clamp(2.5rem, 1.3rem + 3.4vw, 4.6rem); font-weight: 300; line-height: 1.04; letter-spacing: -.02em; text-wrap: balance; }
.px-a1-hero h1 strong { font-weight: 600; color: #0089c0; }
.px-a1-hero .lead { max-width: 36rem; margin: 0 0 1.6rem; color: var(--body-ink); font-size: 1.1rem; line-height: 1.6; text-wrap: pretty; }
.px-a1-hero .lead { margin: 0; max-width: 46rem; }
.px-a1-hero .go { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: .3rem 0 0; } .px-a1-hero .go .button { margin: 0; min-height: 3.1rem; border-width: 2px; }
.px-a1-more { background: #fff; border: 2px solid #006692; color: #006692; } .px-a1-more:hover { background: #006692; color: #fff; }
/* la table des matières qui suit la lecture */
.px-a1-toc { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.px-a1-toc ul { display: flex; gap: .2rem 1.6rem; margin: 0; padding: 0; overflow-x: auto; list-style: none; scrollbar-width: none; } .px-a1-toc ul::-webkit-scrollbar { display: none; }
.px-a1-toc a { display: inline-flex; align-items: center; min-height: 3.1rem; color: var(--navy); font-size: .88rem; font-weight: 600; white-space: nowrap; text-decoration: none; box-shadow: inset 0 -3px 0 transparent; transition: box-shadow .2s, color .2s; }
.px-a1-toc a:hover { color: var(--primary); } .px-a1-toc a[aria-current="true"] { color: var(--primary); box-shadow: inset 0 -3px 0 var(--red); }
/* l'essentiel : cinq changements, numérotés, filet P·B·E */
.px-a1-five { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.px-a1-five li { display: grid; align-content: start; gap: .7rem; padding: 1.3rem 1.05rem 1.5rem; background: #fff; border-top: 4px solid var(--c, #00aeef); box-shadow: 0 1rem 2rem -1.6rem rgba(10, 28, 46, .35); }
.px-a1-five li:nth-child(3n + 2) { --c: var(--red); } .px-a1-five li:nth-child(3n) { --c: #0089c0; }
.px-a1-five .n { font-family: var(--font-heading); font-size: 2.2rem; font-weight: 300; line-height: 1; color: var(--navy); }
.px-a1-five h3 { margin: 0; font-size: 1.08rem; line-height: 1.25; } .px-a1-five p { margin: 0; color: var(--body-ink); font-size: .9rem; line-height: 1.5; }
.px-a1-five h3 { text-wrap: pretty; }
@media (max-width: 1199px) { .px-a1-five { grid-template-columns: minmax(0, 1fr); gap: .7rem; } .px-a1-five li { grid-template-columns: 3.6rem minmax(0, 15rem) minmax(0, 1fr); gap: 0 1.4rem; align-items: baseline; padding: 1.2rem 1.4rem; border-top: 0; border-left: 4px solid var(--c, #00aeef); } }
@media (max-width: 760px) { .px-a1-five li { grid-template-columns: 3rem minmax(0, 1fr); gap: .4rem 1rem; } .px-a1-five .n { grid-row: 1 / 3; } }

/* le flacon décortiqué : les pièces nommées dans la partie blanche, un trait jusqu'à chaque pièce (d'après West Pharma) */
.px-a1-fig { position: relative; margin: 0; }
.px-a1-fig img { display: block; width: 100%; height: auto; }
.px-a1-fig .parts { margin: 0; padding: 0; list-style: none; }
.px-a1-fig .parts li { position: absolute; left: 0; width: 56%; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: .9rem; align-items: center; transform: translateY(-50%); }
.px-a1-fig .parts b { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--navy); color: #fff; font-family: var(--font-heading); font-size: 1rem; }
.px-a1-fig .parts span { color: var(--body-ink); font-size: .92rem; line-height: 1.45; } .px-a1-fig .parts strong { display: block; color: var(--navy); font-family: var(--font-heading); font-size: 1.06rem; }
.px-a1-fig .parts li::after { content: ""; position: absolute; left: 100%; top: 50%; width: var(--lw); height: 1px; background: linear-gradient(90deg, #9fb2c3, var(--navy)); transform-origin: 0 50%; }
.px-a1-fig .parts li::before { content: ""; position: absolute; top: 50%; left: calc(100% + var(--lw)); width: 7px; height: 7px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--red); }
.px-a1-fig .p1 { top: 7.5%; --lw: 22%; } .px-a1-fig .p2 { top: 20.5%; --lw: 24%; } .px-a1-fig .p3 { top: 33%; --lw: 25%; } .px-a1-fig .p4 { top: 60%; --lw: 22%; } .px-a1-fig .p5 { top: 86%; --lw: 33%; }
.px-a1-fig.is-armed .parts li { opacity: 0; transition: opacity .5s ease; } .px-a1-fig.is-armed .parts li::after { transform: scaleX(0); transition: transform .6s ease; }
.px-a1-fig.is-play .parts li { opacity: 1; } .px-a1-fig.is-play .parts li::after { transform: none; }
.px-a1-fig.is-play .p2, .px-a1-fig.is-play .p2::after { transition-delay: .2s; } .px-a1-fig.is-play .p3, .px-a1-fig.is-play .p3::after { transition-delay: .4s; } .px-a1-fig.is-play .p4, .px-a1-fig.is-play .p4::after { transition-delay: .6s; } .px-a1-fig.is-play .p5, .px-a1-fig.is-play .p5::after { transition-delay: .8s; }
@media (max-width: 900px) {
  .px-a1-fig { display: grid; grid-template-columns: minmax(0, 1fr) 9rem; gap: 1.2rem; align-items: center; }
  .px-a1-fig img { grid-column: 2; grid-row: 1; width: 9rem; height: 26rem; object-fit: cover; object-position: 84% 50%; }
  .px-a1-fig .parts { grid-column: 1; grid-row: 1; display: grid; gap: 1.1rem; }
  .px-a1-fig .parts li { position: static; width: auto; transform: none; } .px-a1-fig .parts li::after, .px-a1-fig .parts li::before { display: none; }
}
@media (max-width: 420px) { .px-a1-fig { grid-template-columns: minmax(0, 1fr) 6.5rem; } .px-a1-fig img { width: 6.5rem; height: 22rem; } }
/* la bande « La contamination, maîtrisée » (B13, d'après BetterUp) */
.px-a1-band { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: center; min-height: clamp(24rem, 36vw, 32rem); background: #030b1b; color: #fff; }
.px-a1-band > .bg { position: absolute; top: 0; right: 0; z-index: -2; width: max(62%, 60rem); max-width: 100%; height: 100%; object-fit: cover; }
.px-a1-band::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(100% - max(62%, 60rem)); z-index: -1; width: 16rem; background: #030b1b; -webkit-mask-image: linear-gradient(90deg, #000, transparent); mask-image: linear-gradient(90deg, #000, transparent); }
.px-a1-band .wrap { width: 100%; padding-block: clamp(3rem, 6vw, 4.5rem); } .px-a1-band .tx { max-width: min(36rem, 52%); }
.px-a1-band .k .px-a1 { background: none; color: inherit; }
.px-a1-band .k { margin: 0 0 .8rem; color: #8fd8f5; font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.px-a1-band .h { margin: 0 0 .5rem; font-family: var(--font-heading); font-size: clamp(1.9rem, 1.2rem + 1.6vw, 2.6rem); font-weight: 300; line-height: 1.15; white-space: nowrap; }
.px-a1-band .q { margin: 0; padding: 0; list-style: none; font-family: var(--font-heading); font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.6rem); font-weight: 600; line-height: 1.22; }
.px-a1-band .q li { position: relative; padding-left: 1rem; color: rgba(207, 238, 253, .46); transition: color .8s ease; }
.px-a1-band .q li::before { content: ""; position: absolute; left: 0; top: .22em; width: 3px; height: .86em; background: var(--red); opacity: 0; transition: opacity .8s ease; }
.px-a1-band .q li.is-on { color: #fff; } .px-a1-band .q li.is-on::before { opacity: 1; }
/* les 13 leviers : la liasse (C3) */
/* Les 13 leviers en liasse (C3, son choix du 2026-10-26) : le document contrôlé en quatre feuilles. Lu par page-annexe1.cjs. */
.px-a1-docs { --s: #00739f; --c: #0a4f9c; --b: var(--red); --p: #1f2d3a; }
.px-cdoc { max-width: 66rem; margin: 0 auto; padding: clamp(1.4rem, 3vw, 2.4rem); background: #fff url("/assets/img/papier.svg"); border: 1px solid #c9d3dc; box-shadow: 0 .6rem 0 -.3rem #f4f6f8, 0 .6rem 0 -.25rem #d7dee5, 0 1.8rem 3rem -2rem rgba(10, 28, 46, .45); font-variant-numeric: tabular-nums; }
.px-cdoc .hd { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.2rem 1.6rem; align-items: center; padding-bottom: 1.1rem; border-bottom: 2px solid var(--navy); }
.px-cdoc .hd img { width: auto; height: 3rem; }
.px-cdoc .hd .k { margin: 0; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.px-cdoc .hd h3 { margin: .25rem 0 0; color: var(--navy); font-size: clamp(1.1rem, .9rem + .6vw, 1.45rem); }
.px-cdoc .hd dl { display: grid; grid-template-columns: repeat(2, auto); margin: 0; border: 1px solid var(--navy); font-size: .74rem; }
.px-cdoc .hd dl div { padding: .3rem .6rem; border: 1px solid #c9d3dc; }
.px-cdoc .hd dt { color: var(--muted); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.px-cdoc .hd dd { margin: 0; color: var(--navy); font-weight: 700; }
.px-cdoc table { width: 100%; margin-top: 1.2rem; border-collapse: collapse; font-size: .9rem; }
.px-cdoc thead th { padding: .55rem .6rem; background: var(--navy); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-align: left; text-transform: uppercase; }
.px-cdoc tbody td { padding: .62rem .6rem; border-bottom: 1px solid #dde4ea; color: var(--ink); vertical-align: top; line-height: 1.4; }
.px-cdoc tr.grp.is-s { --f: var(--s); } .px-cdoc tr.grp.is-c { --f: var(--c); } .px-cdoc tr.grp.is-b { --f: var(--b); } .px-cdoc tr.grp.is-p { --f: var(--p); }
.px-cdoc tr.grp th { padding: .9rem .6rem .45rem; border-bottom: 2px solid var(--f); color: color-mix(in srgb, var(--f) 85%, #000); font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-align: left; text-transform: uppercase; }
.px-cdoc td.n { width: 2.6rem; color: var(--muted); font-weight: 700; }
.px-cdoc td.lv { width: 30%; } .px-cdoc td.lv b { display: block; color: var(--navy); font-family: var(--font-heading); font-size: 1.02rem; }
.px-cdoc .pbe { display: inline-block; margin-top: .25rem; padding: .05rem .4rem; border: 1px solid var(--red); color: var(--red); font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.px-cdoc td.ref { width: 9.5rem; color: var(--navy); font-size: .84rem; white-space: nowrap; }
.px-cdoc td.pr { width: 5.5rem; font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.px-cdoc td.pr.is-c { color: var(--red); } .px-cdoc td.pr.is-e { color: #8a5800; }
.px-cdoc td.ck { width: 2.4rem; text-align: center; }
.px-cdoc td.ck span { display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; border: 1.5px solid var(--navy); color: #17803f; font-size: .85rem; font-weight: 800; line-height: 1; }
.px-cdoc .ft { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1.4rem; border: 1px solid var(--navy); }
.px-cdoc .ft div { display: grid; gap: .2rem; padding: .6rem .8rem; border-left: 1px solid #c9d3dc; color: var(--navy); font-size: .9rem; }
.px-cdoc .ft div:first-child { border-left: 0; }
.px-cdoc .ft span { color: var(--muted); font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 760px) {
  .px-cdoc .hd { grid-template-columns: auto minmax(0, 1fr); } .px-cdoc .hd dl { grid-column: 1 / -1; }
  .px-cdoc table, .px-cdoc tbody, .px-cdoc tr, .px-cdoc td { display: block; } .px-cdoc thead { display: none; }
  .px-cdoc tbody tr:not(.grp) { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; padding: .5rem 0; border-bottom: 1px solid #dde4ea; }
  .px-cdoc tbody td { width: auto; border: 0; padding: .15rem .3rem; }
  .px-cdoc tbody td:nth-child(3), .px-cdoc td.ref, .px-cdoc td.pr { grid-column: 2 / 4; } .px-cdoc td.ck { grid-column: 3; grid-row: 1; }
  .px-cdoc tr.grp th { display: block; } .px-cdoc .ft { grid-template-columns: minmax(0, 1fr); } .px-cdoc .ft div { border-left: 0; border-top: 1px solid #c9d3dc; }
}
.px-cdoc td.lv .pbe { display: table; margin-top: .35rem; }
@media (max-width: 760px) { .px-cdoc td.lv { grid-column: 2 / 3; } .px-cdoc tbody tr:not(.grp) { grid-template-columns: 2.2rem minmax(0, 1fr) 2rem; } }
@media (max-width: 760px) { .px-cdoc .hd dt, .px-cdoc .pbe, .px-cdoc .ft span { font-size: .76rem; letter-spacing: .06em; } .px-cdoc .hd h3 { margin-top: .9rem; } }
.px-liasse { --dd: 2.7rem; max-width: 66rem; margin: 0 auto; }
.px-liasse .sheet { --pad: clamp(1.4rem, 3vw, 2.4rem); display: flex; flex-direction: column; padding: 0 var(--pad) var(--pad); }
.px-liasse .sheet + .sheet { margin-top: 2rem; }
.px-liasse .tab { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: var(--dd); margin: 0 calc(-1 * var(--pad)) 1.2rem; padding: 0 var(--pad); border: 0; border-bottom: 1px solid #c9d3dc; background: #f4f7fa; color: var(--navy); font: inherit; text-align: left; }
.px-liasse .tab span { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.px-liasse .tab b { font-family: var(--font-heading); font-size: .98rem; }
.px-liasse .sheet.is-s .tab { box-shadow: inset 0 3px 0 var(--s); } .px-liasse .sheet.is-c .tab { box-shadow: inset 0 3px 0 var(--c); } .px-liasse .sheet.is-b .tab { box-shadow: inset 0 3px 0 var(--b); } .px-liasse .sheet.is-p .tab { box-shadow: inset 0 3px 0 var(--p); }
.px-liasse .sheet .ft { margin-top: auto; } .px-liasse .sheet table { margin-bottom: 1.4rem; }
.px-liasse.is-live { display: grid; padding-top: calc(var(--dd) * 3); }
.px-liasse.is-live .sheet { grid-area: 1 / 1; margin: 0; transform-origin: 50% 0; }
.px-liasse.is-ready .sheet { transition: transform .55s var(--ease), box-shadow .55s; }
.px-liasse.is-live .sheet[data-d="0"] { z-index: 4; }
.px-liasse.is-live .sheet[data-d="1"] { z-index: 3; transform: translateY(calc(-1 * var(--dd))) scaleX(.985); }
.px-liasse.is-live .sheet[data-d="2"] { z-index: 2; transform: translateY(calc(-2 * var(--dd))) scaleX(.97); }
.px-liasse.is-live .sheet[data-d="3"] { z-index: 1; transform: translateY(calc(-3 * var(--dd))) scaleX(.955); }
.px-liasse.is-live .sheet:not([data-d="0"]) .tab { cursor: pointer; background: #e9eff4; }
.px-liasse.is-live .sheet:not([data-d="0"]) .tab:hover { background: #dde7ef; }
.px-liasse .tab:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) { .px-liasse.is-ready .sheet { transition: none; } }
/* ---- Le film du catalogue FormAction™ (2026-10-26) : film à droite du titre, légendes dans une bande dessous ---- */
/* les 13 leviers : le train T4 (son accord du 2026-10-27), _source/outils/annexe1-train.cjs */
.px-t4-dia { position: relative; background-color: #f7fafc; background-image: linear-gradient(rgba(10, 123, 189, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 123, 189, .07) 1px, transparent 1px); background-size: 20px 20px; }
.px-t4-dia svg { display: block; width: 100%; height: auto; } .px-t4-dia .v { display: none; }
.px-t4 .frame { fill: none; stroke: var(--navy); stroke-width: 2; }
.px-t4 .sas .band { fill: #e6f4fb; }
.px-t4 .st1 { font-family: var(--font-heading); font-size: 21px; font-weight: 600; fill: var(--navy); } .px-t4 .st1.is-s { font-size: 17px; }
.px-t4 .st2 { font-family: var(--font-body); font-size: 13px; fill: var(--body-ink); }
.px-t4 .tb rect { fill: none; } .px-t4 .tb rect, .px-t4 .tb line { stroke: rgba(10, 28, 46, .35); }
.px-t4 .tb .k { font-family: var(--font-body); font-size: 9px; font-weight: 800; letter-spacing: .12em; fill: var(--primary); } .px-t4 .tb .tv { font-family: var(--font-body); font-size: 12px; font-weight: 700; fill: var(--navy); }
.px-t4 .base, .px-t4 .trail { fill: none; stroke-width: 14; stroke-linecap: round; } .px-t4 .base { stroke: #d3dee8; } .px-t4 .trail { stroke: #0089c0; }
.px-t4 .end { fill: var(--red); }
.px-t4 .bb circle { fill: #e3f5fd; stroke: #0089c0; stroke-width: 2.5; transition: fill .4s, stroke .4s; } .px-t4 .bb line { stroke: var(--navy); stroke-width: 1.5; }
.px-t4 .bb.is-end circle { stroke: var(--red); fill: #fdecee; } .px-t4 .bb.is-sas circle { fill: #fff; stroke: #00aeef; stroke-width: 3; }
.px-t4.is-live .st:not(.is-lit) .bb circle { fill: #fff; stroke: var(--navy); }
.px-t4 .tag { font-family: var(--font-heading); font-size: 17px; font-weight: 600; text-anchor: middle; fill: var(--navy); } .px-t4 .tag.is-s { font-size: 12.5px; } .px-t4 .tag.is-two { font-size: 10.5px; }
.px-t4 .v .tag:not(.is-s):not(.is-two) { font-size: 15px; } /* les sigles restent dans leur bulle sur un téléphone */
.px-t4 .no { font-family: var(--font-body); font-size: 13px; font-weight: 700; text-anchor: middle; fill: var(--primary); }
.px-t4 .lb { font-family: var(--font-body); font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-anchor: middle; fill: #34475a; } .px-t4 .lb.is-red { fill: var(--red); }
.px-t4 .df { font-family: var(--font-body); font-size: 14px; text-anchor: middle; fill: var(--body-ink); } .px-t4 .df.is-red { fill: var(--red); font-weight: 700; } .px-t4 .df.is-l { text-anchor: start; font-size: 15px; }
.px-t4 .cap { font-family: var(--font-body); font-size: 12px; font-weight: 800; letter-spacing: .14em; fill: #5f6e7c; } .px-t4 .cap.is-red { fill: var(--red); }
.px-t4 .train > rect:first-child { fill: var(--navy); } .px-t4 .train .w { fill: #fff; } .px-t4 .train .lamp { fill: #ffd76a; }
.px-t4-dia .a1-sch { position: absolute; left: 20.833%; top: 40%; width: 58.333%; height: auto; overflow: visible; }
.a1-sch .a1-k { font-family: var(--font-body); font-size: 11px; font-weight: 800; letter-spacing: .12em; fill: var(--primary); }
.a1-sch .a1-k.is-r { text-anchor: end; fill: var(--red); }
.a1-sch .z { fill: none; stroke: var(--navy); stroke-width: 1.4; }
.a1-sch .zd { stroke-opacity: .35; } .a1-sch .zc { stroke-opacity: .5; } .a1-sch .zb { stroke-opacity: .7; }
.a1-sch .za { fill: rgba(0, 174, 239, .08); stroke: #0089c0; stroke-width: 2; }
.a1-sch .a1-z { font-family: var(--font-body); font-size: 10px; font-weight: 800; letter-spacing: .12em; fill: var(--navy); }
.a1-sch .a1-v { font-family: var(--font-body); font-size: 10.5px; font-weight: 700; fill: #0089c0; } /* la vitesse de l'air, hors des flèches */
.a1-sch .hepa { fill: #0b4f74; }
.a1-sch .a1-hepa { font-family: var(--font-body); font-size: 8.5px; font-weight: 800; letter-spacing: .16em; text-anchor: middle; fill: #fff; }
.a1-sch .flow { stroke: #0089c0; stroke-width: 1.6; stroke-dasharray: 6 7; }
.a1-sch .flow-h { fill: none; stroke: #0089c0; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.a1-sch .push line, .a1-sch .push path { fill: none; stroke: var(--red); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.a1-sch .push line { stroke-dasharray: 4 5; }
.a1-sch .rabs line { stroke: var(--navy); stroke-width: 1.2; stroke-dasharray: 3 3; }
.a1-sch .rabs circle { fill: #fff; stroke: var(--navy); stroke-width: 1.4; }
.a1-sch .fill rect { fill: var(--navy); } .a1-sch .fill line { stroke: var(--navy); stroke-width: 2; }
.a1-sch .drop { fill: #00aeef; }
.a1-sch .vc { fill: #8a99a8; } .a1-sch .vb { fill: #fff; stroke: var(--navy); stroke-width: 1.2; } .a1-sch .vl { fill: #00aeef; opacity: .55; }
.a1-sch .conv { stroke: var(--navy); stroke-width: 2; }
@media (prefers-reduced-motion: no-preference) {
  .a1-sch .flow { animation: a1-flow 1.1s linear infinite; }
  .a1-sch .push line { animation: a1-flow .9s linear infinite; }
  .a1-sch .vials { animation: a1-conv 3.2s linear infinite; }
  .a1-sch .drop { animation: a1-drop 1.6s ease-in infinite; }
}
@keyframes a1-flow { to { stroke-dashoffset: -13; } }
@keyframes a1-conv { to { transform: translateX(-40px); } }
@keyframes a1-drop { 0% { transform: translateY(-4px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(8px); opacity: 0; } }
/* au bout de la ligne : le bouton (il paraît quand le train arrive), puis le cahier des charges détaillé, replié */
.px-t4-end { display: flex; justify-content: center; margin: clamp(2rem, 4vw, 2.8rem) 0 0; } .px-t4-end .button { gap: .6rem; }
.px-t4-end .c, .px-t4-end [aria-expanded="true"] .o { display: none; } .px-t4-end [aria-expanded="true"] .c { display: inline; }
.px-t4-end .ar { display: inline-block; transition: transform .3s ease; } .px-t4-end [aria-expanded="true"] .ar { transform: rotate(-90deg); }
@keyframes px-t4-in { from { opacity: 0; transform: translateY(.6rem); } to { opacity: 1; transform: none; } }
.px-t4.is-live:not(.is-done) .px-t4-end { visibility: hidden; } .px-t4.is-live.is-done .px-t4-end { animation: px-t4-in .6s ease both; }
.px-t4-doc { margin-top: clamp(2rem, 4vw, 3rem); scroll-margin-top: 6rem; } .px-t4-doc:not([hidden]).is-open { animation: px-t4-in .5s ease both; }
@media (max-width: 760px) {
  .px-t4-dia .h, .px-t4-dia .a1-sch { display: none; } /* le schéma des classes : ses légendes deviendraient illisibles sur un téléphone */
  .px-t4-dia .v { display: block; max-width: 24rem; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) { .px-t4-end .ar, .px-t4 .bb circle { transition: none; } .px-t4-doc.is-open { animation: none; } }
/* le parcours : une ligne et cinq gares qui s'allument l'une après l'autre */
.px-a1-line { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.4rem; margin: 0; padding: 0; list-style: none; }
.px-a1-line::before { content: ""; position: absolute; left: 1.4rem; right: 1.4rem; top: 1.4rem; height: 2px; background: linear-gradient(90deg, #00aeef, var(--red), #0089c0); transform-origin: 0 50%; }
.px-a1-line li { position: relative; display: grid; align-content: start; gap: .6rem; }
.px-a1-line .n { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--navy); border: 2px solid #8fd8f5; color: #fff; font-family: var(--font-heading); font-size: 1.15rem; font-weight: 600; }
.px-a1-line h3 { margin: .4rem 0 0; color: #fff; font-size: 1.1rem; } .px-a1-line p { margin: 0; color: #fff; font-size: .92rem; line-height: 1.5; }
.px-a1-line .text-link { color: #fff; font-size: .88rem; }
.px-a1-line .n { transition: background .5s ease, border-color .5s ease; }
.px-a1-path.is-armed .px-a1-line::before { transform: scaleX(0); transition: transform 2.4s ease; } .px-a1-path.is-play .px-a1-line::before { transform: none; }
.px-a1-path.is-armed:not(.is-play) .px-a1-line .n { background: transparent; border-color: rgba(255, 255, 255, .5); }
.px-a1-path.is-play .px-a1-line li:nth-child(2) .n { transition-delay: .5s; } .px-a1-path.is-play .px-a1-line li:nth-child(3) .n { transition-delay: 1s; } .px-a1-path.is-play .px-a1-line li:nth-child(4) .n { transition-delay: 1.5s; } .px-a1-path.is-play .px-a1-line li:nth-child(5) .n { transition-delay: 2s; }
@media (max-width: 900px) { .px-a1-line { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; padding-left: 4rem; } .px-a1-line::before { left: 1.4rem; right: auto; top: 1rem; bottom: 1rem; width: 2px; height: auto; background: linear-gradient(180deg, #00aeef, var(--red), #0089c0); transform-origin: 50% 0; } .px-a1-line .n { position: absolute; left: -4rem; top: -.2rem; } .px-a1-path.is-armed .px-a1-line::before { transform: scaleY(0); } .px-a1-path.is-play .px-a1-line::before { transform: none; } }
/* exigences et preuves : trois colonnes reliées par des flèches */
.px-a1-rows { display: grid; gap: .6rem; }
.px-a1-rows .r { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, 1.2fr); gap: 0; align-items: stretch; }
.px-a1-rows .r > span { position: relative; padding: 1rem 1.2rem; font-size: .95rem; line-height: 1.45; }
.px-a1-rows .r.is-head > span { padding-block: .4rem; color: var(--muted); font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.px-a1-rows .r:not(.is-head) .a { background: var(--navy); color: #fff; font-family: var(--font-heading); font-weight: 600; }
.px-a1-rows .r:not(.is-head) .b { background: #eef4f9; color: var(--ink); }
.px-a1-rows .r:not(.is-head) .c { background: #fff; color: var(--navy); font-weight: 600; border: 1px solid #d6e2ec; border-left: 0; padding-left: 2.6rem; }
.px-a1-rows .r:not(.is-head) .c::before { content: "✓"; position: absolute; left: 1rem; top: 1rem; color: #17803f; font-weight: 800; }
.px-a1-rows .r:not(.is-head) .a::after, .px-a1-rows .r:not(.is-head) .b::after { content: ""; position: absolute; right: -.55rem; top: 50%; z-index: 1; width: 1.1rem; height: 1.1rem; margin-top: -.55rem; background: inherit; transform: rotate(45deg); }
.px-a1-rows .r:not(.is-head) .b { padding-left: 1.8rem; } .px-a1-rows .r:not(.is-head) .c { padding-left: 2.8rem; } .px-a1-rows .r:not(.is-head) .c::before { left: 1.5rem; }
@media (max-width: 860px) {
  .px-a1-rows .r.is-head { display: none; } .px-a1-rows .r { grid-template-columns: minmax(0, 1fr); }
  .px-a1-rows .r:not(.is-head) .a::after, .px-a1-rows .r:not(.is-head) .b::after { right: auto; left: 1.4rem; top: auto; bottom: -.55rem; margin-top: 0; }
  .px-a1-rows .r:not(.is-head) .b { padding-left: 1.2rem; padding-top: 1.2rem; } .px-a1-rows .r:not(.is-head) .c { border-left: 1px solid #d6e2ec; padding-top: 1.2rem; }
}
/* les projets : quatre cartes photo */
.px-a1-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; margin: 0; padding: 0; list-style: none; }
.px-a1-cards li { position: relative; display: grid; align-content: start; gap: .5rem; background: #fff; padding-bottom: 1.3rem; box-shadow: 0 1rem 2rem -1.6rem rgba(10, 28, 46, .4); }
.px-a1-cards .ph { display: block; aspect-ratio: 4 / 3; overflow: hidden; } .px-a1-cards .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.px-a1-cards li:hover .ph img { transform: scale(1.04); }
.px-a1-cards .k { margin: .6rem 1.2rem 0; color: var(--red); font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.px-a1-cards h3 { margin: 0 1.2rem; font-size: 1.05rem; line-height: 1.3; } .px-a1-cards h3 a { color: var(--navy); text-decoration: none; } .px-a1-cards h3 a::after { content: ""; position: absolute; inset: 0; }
.px-a1-cards h3 a:focus-visible { outline: none; } .px-a1-cards li:has(a:focus-visible) { outline: 3px solid var(--red); outline-offset: 3px; }
.px-a1-more { margin: 1.6rem 0 0; }
@media (max-width: 1000px) { .px-a1-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .px-a1-cards { grid-template-columns: minmax(0, 1fr); } }
/* FormAction™ : le flacon assemblé, sur blanc */
.px-a1-train { background: #fff; border-top: 1px solid var(--line); }
.px-a1-train .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: stretch; padding-block: clamp(2.5rem, 5vw, 4rem); }
.px-a1-train h2 { margin: 0 0 1rem; } .px-a1-train p:not(.eyebrow) { margin: 0 0 1.6rem; color: var(--body-ink); max-width: 32rem; }
.px-a1-train img { width: 100%; height: 100%; min-height: 16rem; object-fit: cover; object-position: 50% 30%; } /* la photo de la personne formée (son image Flow n° 24) : exactement la hauteur du texte */
@media (max-width: 760px) { .px-a1-train .wrap { grid-template-columns: minmax(0, 1fr); } .px-a1-train img { order: -1; height: auto; min-height: 0; aspect-ratio: 16 / 10; } }
/* les questions */
.px-a1-qa { display: grid; gap: .6rem; max-width: 52rem; }
.px-a1-qa details { background: #fff; border: 1px solid #d6e2ec; border-left: 4px solid var(--primary); }
.px-a1-qa summary { display: flex; justify-content: space-between; gap: 1rem; align-items: center; min-height: 3.2rem; padding: .8rem 1.2rem; color: var(--navy); font-family: var(--font-heading); font-size: 1.06rem; font-weight: 600; cursor: pointer; list-style: none; }
.px-a1-qa summary::-webkit-details-marker { display: none; } .px-a1-qa summary::after { content: "+"; flex: none; color: var(--red); font-size: 1.5rem; font-weight: 400; line-height: 1; } .px-a1-qa details[open] summary::after { content: "–"; }
.px-a1-qa details p { margin: 0; padding: 0 1.2rem 1.1rem; color: var(--body-ink); line-height: 1.6; }
.px-a1-upd { margin: 1.6rem 0 0; color: var(--muted); font-size: .86rem; }
@media (max-width: 760px) {
  .px-a1-hero .vid { height: auto; aspect-ratio: 16 / 9; } .px-a1-hero .in { grid-template-columns: minmax(0, 1fr); } .px-a1-hero h1 strong { display: block; }
  .px-a1-band { display: block; min-height: 0; } .px-a1-band > .bg { position: relative; display: block; width: 100%; height: 12rem; object-position: 82% 50%; } .px-a1-band::after { display: none; }
  .px-a1-band .wrap { padding-block: 2rem 2.6rem; } .px-a1-band .tx { max-width: none; } .px-a1-band .h { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .px-a1-band .q li, .px-a1-band .q li::before, .px-a1-toc a { transition: none; } }
/* <<< page EMA-Annexe 1 */

/* Accueil, les logos des clients (sa demande du 2026-10-26) : la moitié d'abord (des rangées pleines : 24 logos, 12 sur
   téléphone), puis tous d'un clic ; la case « votre logo ici » reste visible. Sans script : tous les logos. */
.px-trust.is-clamped .px-logos li:nth-child(n+25):not(.px-logos-you) { display: none; }
@media (max-width: 760px) { .px-trust.is-clamped .px-logos li:nth-child(n+13):not(.px-logos-you) { display: none; } }
.px-logos-more { display: flex; align-items: center; gap: .6rem; min-height: 2.9rem; margin: 1.4rem auto 0; padding: 0 1.4rem; border: 1px solid var(--navy); background: #fff; color: var(--navy); font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; transition: background .2s, color .2s; }
.px-logos-more::after { content: ""; width: .5rem; height: .5rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.px-logos-more[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.px-logos-more:hover { background: var(--navy); color: #fff; } .px-logos-more:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

/* 2026-10-26 (sa demande : un peu plus d'espace entre les pages du menu) : les liens se répartissent sur toute la place entre
   le logo et « Nous joindre », l'espace grandit dès qu'il y a de la place, sans jamais déborder ; de 1011 à 1059 px, le
   texte se resserre un peu pour que les neuf entrées et leurs flèches tiennent. */
@media (min-width: 1011px) {
  .site-nav { flex: 1; display: flex; justify-content: flex-end; margin-left: clamp(1.4rem, 3vw, 3rem); }
  .nav-list { flex: 1; justify-content: space-between; gap: .1rem; }
}
@media (min-width: 1011px) and (max-width: 1059.98px) { .nav-list > li > a:not(.nav-cta) { padding-inline: .1rem; font-size: .8rem; } }
@media (min-width: 1011px) and (max-width: 1180.98px) { .site-nav { margin-left: .9rem; } }

/* >>> bandeaux (générés par _source/outils/bandeaux.cjs) */
/* Les bandeaux (bannières de ses images ChatGPT), approuvés le 2026-10-26 : styles repris des aperçus (bannieres*.cjs), lus par bandeaux.cjs. */
.px-bn { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: center; min-height: clamp(26rem, 42vw, 36rem); }
.px-bn > .bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.px-bn > .wrap { position: relative; z-index: 1; width: 100%; padding-block: clamp(3rem, 6vw, 4.5rem); }
.px-bn .k { margin: 0 0 .7rem; font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.px-bn h2 { margin: 0 0 1rem; font-family: var(--font-heading); font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem); font-weight: 300; line-height: 1.08; text-wrap: balance; }
.px-bn h2 strong { font-weight: 600; }
.px-bn .l { margin: 0 0 1.8rem; font-size: 1.08rem; line-height: 1.55; }
.px-bn-btn { display: inline-flex; align-items: center; gap: .6rem; min-height: 3.1rem; padding: 0 1.5rem; font-weight: 800; font-size: .86rem; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; transition: transform .2s, background .2s; }
.px-bn-btn:hover { transform: translateY(-2px); }
.px-bn-btn.is-light { background: #fff; color: var(--navy); } .px-bn-btn.is-navy { background: var(--navy); color: #fff; } .px-bn-btn.is-green { background: #0a7f4f; color: #fff; }
/* B1 */
/* B2 */
.px-bn2 > .bg { filter: saturate(.85); } .px-bn2 > .wrap { display: grid; place-items: center; }
.px-bn2 .panel { position: relative; max-width: 50rem; padding: clamp(2rem, 4vw, 3rem) clamp(1.6rem, 4vw, 3.4rem); background: rgba(255, 255, 255, .96); text-align: center; box-shadow: 0 2rem 4rem -2.4rem rgba(10, 28, 46, .55); }
.px-bn2 .stripe { position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--cyan) 0 33.3%, var(--red) 33.3% 66.6%, var(--primary) 66.6%); }
.px-bn2 .k { color: color-mix(in srgb, var(--primary) 82%, #000); } .px-bn2 h2 { color: var(--navy); } .px-bn2 h2 strong { color: var(--primary); } .px-bn2 .l { max-width: 36rem; margin-inline: auto; color: var(--body-ink); }
/* B3 */
/* B4 */
.px-bn4 { display: block; min-height: 0; background: #000; color: #fff; text-align: center; }
.px-bn4 .top { height: clamp(5rem, 9vw, 8rem); overflow: hidden; } .px-bn4 .top img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(1) brightness(.8); }
.px-bn4 .is-emblem { position: absolute; left: 50%; top: clamp(5rem, 9vw, 8rem); width: 6rem; transform: translate(-50%, -50%); filter: drop-shadow(0 .4rem .8rem rgba(0, 0, 0, .5)); }
.px-bn4 .wrap { padding-block: clamp(3.4rem, 6vw, 4.8rem) clamp(2.6rem, 5vw, 3.6rem); }
.px-bn4 .say { max-width: 56rem; margin: 0 auto; font-family: var(--font-heading); font-size: clamp(1.8rem, 1.1rem + 2.4vw, 3.1rem); font-weight: 300; line-height: 1.2; }
.px-bn4 .say span { color: #8a8f96; transition: color .6s ease; } .px-bn4 .say .hi { color: #fff; font-weight: 500; }
.px-bn4.is-armed:not(.is-play) .say .hi { color: #8a8f96; }
.px-bn4.is-armed.is-play .say .w2 { transition-delay: .2s; } .px-bn4.is-armed.is-play .say .w3 { transition-delay: .6s; } .px-bn4.is-armed.is-play .say .w4 { transition-delay: 1s; }
.px-bn4 .by { margin: 1.4rem 0 0; color: #8fd8f5; font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
/* B5 */
/* B6 */
.px-bn6 ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 2.4rem); margin: 0; padding: 0; list-style: none; }
.px-bn6 li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); background: #f1ead6; }
.px-bn6 .strip { overflow: hidden; } .px-bn6 .strip img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.px-bn6 .bd { padding: clamp(1.6rem, 3vw, 2.4rem); } .px-bn6 .k { margin: 0 0 .8rem; color: var(--navy); font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.px-bn6 h3 { margin: 0 0 .8rem; color: var(--navy); font-family: var(--font-heading); font-size: clamp(1.4rem, 1rem + 1vw, 1.9rem); font-weight: 500; line-height: 1.15; }
.px-bn6 .bd > p:not(.k) { margin: 0 0 1.4rem; color: var(--body-ink); }
/* B7 */
.px-bn7 { background: #f6f1e8; } .px-bn7 > .bg { left: 30%; width: 70%; object-position: 70% 50%; }
.px-bn7 .soft { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; } .px-bn7 .soft path { fill: #f6f1e8; } .px-bn7 .soft .b { fill: #efe7d8; }
.px-bn7 .tx { max-width: 30rem; } .px-bn7 .k { color: #0a7f4f; } .px-bn7 h2 { color: var(--navy); } .px-bn7 h2 strong { color: #0a7f4f; }
/* B8 */
/* B9 */
.px-bn9 .bento { display: grid; grid-template-columns: 1.3fr 1fr 1.3fr; grid-auto-rows: minmax(11rem, auto); gap: .9rem; margin: 0; padding: 0; list-style: none; }
.px-bn9 .bento > li { position: relative; overflow: hidden; }
.px-bn9 .hero { display: grid; align-content: space-between; row-gap: 1.6rem; padding: 1.8rem; background: linear-gradient(135deg, #062a4d, #0a63c9); color: #fff; }
.px-bn9 .hero p { margin: 0; font-family: var(--font-heading); font-size: clamp(1.4rem, 1rem + 1vw, 1.9rem); font-weight: 300; line-height: 1.15; } .px-bn9 .hero strong { font-weight: 600; color: #cfeefd; } .px-bn9 .hero .px-bn-btn { justify-self: start; }
.px-bn9 .st { display: grid; align-content: end; gap: .3rem; padding: 1.6rem; background: linear-gradient(160deg, #0a63c9, #00aeef); color: #fff; }
.px-bn9 .st.is-l { background: linear-gradient(160deg, #e3f3fb, #bfe6f7); color: var(--navy); }
.px-bn9 .st strong { font: 700 clamp(2.4rem, 1.6rem + 2vw, 3.4rem) var(--font-heading); line-height: 1; } .px-bn9 .st span { font-size: .92rem; }
.px-bn9 .ph img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .px-bn6 ul { grid-template-columns: minmax(0, 1fr); }
  .px-bn7 > .bg { left: 0; width: 100%; opacity: .3; } .px-bn7 .soft { display: none; }
  .px-bn9 .bento { grid-template-columns: 1fr 1fr; } .px-bn9 .hero { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .px-bn6 li { grid-template-columns: 4.2rem minmax(0, 1fr); } .px-bn9 .bento { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .px-bn4 .say span { transition: none; } }
/* B10 à B12 : les bannières abstraites */
.px-bn10 { background: #020a18; color: #fff; } .px-bn10 > .bg { object-position: 80% 50%; }
.px-bn10::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(2, 10, 24, .7) 0%, rgba(2, 10, 24, .2) 50%, transparent 70%); }
.px-bn10 .tx { max-width: 38rem; } .px-bn10 .bar { display: block; width: 4.5rem; height: 4px; margin-bottom: 1rem; background: linear-gradient(90deg, var(--cyan) 0 33.3%, var(--red) 33.3% 66.6%, var(--primary) 66.6%); }
.px-bn10 .k { color: #8fd8f5; } .px-bn10 h2 { color: #fff; } .px-bn10 h2 strong { color: #cfeefd; } .px-bn10 .l { color: #d5e3ee; }
.px-bn11 { background: #fbf8f2; } .px-bn11 > .bg { object-position: 85% 50%; }
.px-bn11 .tx { max-width: 34rem; } .px-bn11 .k { color: color-mix(in srgb, var(--primary) 82%, #000); } .px-bn11 h2 { color: var(--navy); } .px-bn11 h2 strong { color: var(--primary); } .px-bn11 .l { color: var(--body-ink); }
@media (max-width: 860px) { .px-bn10::after { background: linear-gradient(90deg, rgba(2, 10, 24, .9), rgba(2, 10, 24, .6)); } .px-bn11 > .bg { opacity: .35; } }
/* ---- Bannières, 2e tour (2026-10-26) : plus de beige, le bleu ciel du logo au lieu du vert ; B9 avec le flacon en gros plan */
.px-bn-btn.is-sky { background: #00aeef; color: #04213b; } .px-bn-btn.is-sky:hover { background: #3cc3f4; }
/* image ancrée à droite (px-bn-ra) : l'objet de l'image reste à droite à toutes les largeurs, la partie unie se prolonge à */
.px-bn-ra { --ra-w: max(62%, 60rem); background: var(--ra); }
.px-bn-ra > .bg { left: auto; right: 0; width: var(--ra-w); max-width: 100%; }
.px-bn-ra::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(100% - var(--ra-w)); z-index: -1; width: 16rem; background: var(--ra); -webkit-mask-image: linear-gradient(90deg, #000, transparent); mask-image: linear-gradient(90deg, #000, transparent); }
/* B6 : cartes bleu glacier au lieu du crème */
.px-bn6.px-v2 li { background: #eef6fb; }
/* B7 : bleu glacier au lieu du beige, le titre en bleu du logo */
.px-bn7.px-v2 { background: #eaf3f9; } .px-bn7.px-v2 .soft path { fill: #eaf3f9; } .px-bn7.px-v2 .soft .b { fill: #dbeaf4; }
.px-bn7.px-v2 .k { color: color-mix(in srgb, var(--primary) 82%, #000); } .px-bn7.px-v2 h2 strong { color: #0089c0; }
/* B9 : le flacon ; la règle graduée des 35 ans ; les quatre continents sur la carte */
.px-bn9.px-v2 .t5 img { object-position: 50% 40%; }
.px-bn9 .is-ruler > div { display: grid; gap: .3rem; }
.px-bn9 .st.is-ruler { align-content: space-between; background-color: #f3f9fd; background-image: linear-gradient(rgba(10, 123, 189, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 123, 189, .08) 1px, transparent 1px); background-size: 16px 16px; border: 1px solid #cfe3f0; }
.px-bn9 .ruler { display: block; width: 100%; height: auto; margin-top: .6rem; }
.px-bn9 .ruler line { stroke: #5a7389; stroke-width: 1.2; } .px-bn9 .ruler .m { stroke: var(--navy); stroke-width: 2; } .px-bn9 .ruler .x { stroke: var(--red); stroke-width: 3; }
.px-bn9 .ruler text { fill: var(--navy); font-family: var(--font-body); font-size: 10px; font-weight: 700; text-anchor: middle; } .px-bn9 .ruler .xt { fill: var(--red); }
.px-bn9 .is-cont { align-content: space-between; background: #062a4d; color: #fff; }
.px-bn9 .is-cont > img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: .14; filter: brightness(0) invert(1); }
.px-bn9 .is-cont > * { position: relative; }
.px-bn9 .is-cont .n { display: flex; align-items: baseline; gap: .6rem; } .px-bn9 .is-cont .n span { font-size: .92rem; }
.px-bn9 .is-cont ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .9rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.px-bn9 .is-cont li { padding-left: .6rem; border-left: 3px solid var(--c); font-size: .84rem; font-weight: 600; line-height: 1.25; }
.px-bn9 .is-cont .c0 { --c: var(--cyan); } .px-bn9 .is-cont .c1 { --c: #ff5a67; } .px-bn9 .is-cont .c2 { --c: #4aa3e8; } .px-bn9 .is-cont .c3 { --c: #fff; }
/* B12 : les quatre qualifications montent comme des marches, dans la partie unie de l'image */
.px-bn12 { --ra: linear-gradient(180deg, #d2e2f0, #d7e6f3 55%, #c3d4e4); }
.px-bn12 .tx { max-width: min(34rem, 50%); } .px-bn12 .stair span { text-wrap: balance; } .px-bn12 .k { color: color-mix(in srgb, var(--primary) 82%, #000); } .px-bn12 h2 { color: var(--navy); } .px-bn12 h2 strong { color: #0089c0; }
.px-bn12 .stair { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.px-bn12 .stair li { display: grid; align-content: start; gap: .3rem; padding: .7rem .6rem 0; border-top: 4px solid var(--c); background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .2)); }
.px-bn12 .s0 { --c: var(--cyan); height: 6rem; } .px-bn12 .s1 { --c: var(--red); height: 8.5rem; } .px-bn12 .s2 { --c: var(--primary); height: 11rem; } .px-bn12 .s3 { --c: var(--navy); height: 13.5rem; }
.px-bn12 .stair b { color: var(--navy); font: 700 1.7rem/1 var(--font-heading); } .px-bn12 .stair span { color: var(--body-ink); font-size: .8rem; line-height: 1.3; }
/* B13 : verre cobalt, la ligne des treize leviers sous le titre */
.px-bn .k .px-a1 { background: none; }
/* B14 : lames d'acier, le filet rouge de l'image prolongé à gauche du texte */
.px-bn14 { --ra: linear-gradient(180deg, #fcfcfb, #e6eaed 60%, #c9cfd4); } .px-bn14 .tx { max-width: 32rem; padding-left: 1.4rem; border-left: 3px solid var(--red); }
.px-bn14 .k { color: var(--red); } .px-bn14 h2 { color: var(--navy); } .px-bn14 h2 strong { color: #0089c0; } .px-bn14 .l { color: var(--body-ink); }
/* B15 : la vague de verre, une onde rouge fine sous la surtitre */
.px-bn15 { --ra: #000a20; color: #fff; } .px-bn15 .tx { max-width: min(36rem, 54%); }
.px-bn15 .k { color: #8fd8f5; } .px-bn15 h2 { color: #fff; } .px-bn15 h2 strong { color: #cfeefd; } .px-bn15 .l { color: #d5e3ee; }
.px-bn15 .wave { display: block; width: 7rem; height: auto; margin: -.2rem 0 1rem; } .px-bn15 .wave path { fill: none; stroke: var(--red); stroke-width: 2.5; }
/* B16 : l'anneau blanc ; une petite ouverture carrée, bleu nuit et rouge, devant la surtitre */
.px-bn16 { --ra: linear-gradient(180deg, #f8f6f2, #e3e5e8 60%, #b9c4d0); } .px-bn16 .tx { max-width: min(32rem, 50%); }
.px-bn-ra .l { max-width: min(28rem, 42vw); text-wrap: pretty; }
.px-bn16 .k { display: flex; align-items: center; gap: .7rem; color: color-mix(in srgb, var(--primary) 82%, #000); }
.px-bn16 .k::before { content: ""; flex: none; width: .95rem; height: .95rem; background: var(--navy); box-shadow: inset 3px 0 0 var(--red); }
.px-bn16 h2 { color: var(--navy); } .px-bn16 h2 strong { color: var(--red); font-family: "Newsreader", Georgia, serif; font-weight: 500; letter-spacing: -.01em; } /* Newsreader, rouge du logo (sa demande du 2026-10-27, comme le titre de l’accueil) */ .px-bn16 .l { color: var(--body-ink); }
/* téléphone : l'image devient une bande au-dessus du texte (le texte ne la recouvre jamais) */
@media (max-width: 760px) {
  .px-bn-ra { display: block; min-height: 0; }
  .px-bn-ra > .bg { position: relative; display: block; width: 100%; height: 13rem; object-position: 82% 50%; }
  .px-bn-ra::after { display: none; }
  .px-bn-ra > .wrap { padding-block: 2rem 2.6rem; }
  .px-bn-ra .tx, .px-bn12 .tx, .px-bn15 .tx, .px-bn16 .tx, .px-bn-ra .l { max-width: none; }
  .px-bn12 .stair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .8rem; align-items: start; }
  .px-bn12 .stair li { height: auto; padding-bottom: .8rem; }
}
@media (max-width: 860px) { .px-bn9 .is-cont ul { grid-template-columns: minmax(0, 1fr); } }
/* ---- Bannières, 3e tour (2026-10-26 soir) ---- */
.px-bn4.px-v3 .wrap { padding-block: clamp(2.6rem, 5vw, 3.8rem); } .px-bn4.px-v3 .say { text-wrap: balance; }
@media (max-width: 860px) { .px-bn9.px-v3 .is-cont ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* B13 d'après BetterUp : la phrase, puis ses quatre compléments en colonne ; un seul allumé à la fois */
@media (max-width: 760px) { .px-bn10 h2 { font-size: 1.85rem; } .px-bn10 .tx { max-width: none; } }

/* B9, les cases « 35+ » et « 4 continents » en option A (son choix du 2026-10-27) : une feuille blanche au filet fin, le
   coin coupé (ghSMART, sa capture 210140), le chiffre à empattements comme le badge EMA-Annexe 1 ; la carte en gris pâle,
   un repère bleu par continent (Montréal, Paris, Casablanca, Riyad) */
.px-bn9 .b9a-x, .px-bn9 .b9a-w { background: #fff; box-shadow: inset 0 0 0 1px #cfdde7; clip-path: polygon(0 0, calc(100% - 1.6rem) 0, 100% 1.6rem, 100% 100%, 0 100%); }
.px-bn9 .b9a-x::after, .px-bn9 .b9a-w::after { content: ""; position: absolute; top: 0; right: 0; z-index: 2; width: 1.6rem; height: 1.6rem; background: linear-gradient(to top right, transparent calc(50% - .7px), #cfdde7 calc(50% - .7px) calc(50% + .7px), transparent calc(50% + .7px)); }
.px-bn9 .b9a-x { display: grid; align-content: center; padding: 1.6rem 1.8rem; }
.px-bn9 .b9a-nb { margin: 0; color: #0b2545; font-family: "Newsreader", Georgia, serif; font-weight: 400; line-height: .95; letter-spacing: -.02em; }
.px-bn9 .b9a-x .b9a-nb { font-size: clamp(3.2rem, 2.2rem + 2.6vw, 4.6rem); } .px-bn9 .b9a-x .b9a-nb span { color: var(--red); }
.px-bn9 .b9a-rl { display: block; width: 2.4rem; height: 2px; margin: .95rem 0 .8rem; background: var(--red); }
.px-bn9 .b9a-lb { margin: 0; max-width: 18rem; color: var(--body-ink); font-size: .95rem; line-height: 1.45; }
.px-bn9 .b9a-w { display: grid; align-content: center; min-height: 11rem; padding: 1.3rem 1.4rem; }
.px-bn9 .b9a-tx { position: relative; z-index: 1; width: 38%; }
.px-bn9 .b9a-w .b9a-nb { font-size: clamp(2.3rem, 1.8rem + 1.2vw, 3rem); line-height: .9; }
.px-bn9 .b9a-w .b9a-nb span { display: block; margin-top: .35rem; color: var(--primary); font-family: var(--font-body); font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.px-bn9 .b9a-w .b9a-rl { width: 1.8rem; margin: .6rem 0 .55rem; }
.px-bn9 .b9a-ln { display: grid; gap: .15rem; margin: 0; padding: 0; list-style: none; }
.px-bn9 .b9a-ln li { color: var(--navy); font-size: .74rem; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.px-bn9 .b9a-mp { position: absolute; right: 3%; top: 50%; width: 58%; aspect-ratio: 1000 / 560; transform: translateY(-50%); }
.px-bn9 .b9a-mp img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .22; }
.px-bn9 .b9a-mp i { position: absolute; width: .5rem; height: .5rem; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(0, 102, 146, .35); transform: translate(-50%, -50%); }
.px-bn9 .b9a-p0 { left: 28.5%; top: 33.9%; } .px-bn9 .b9a-p1 { left: 65.5%; top: 30%; } .px-bn9 .b9a-p2 { left: 60.6%; top: 46.8%; } .px-bn9 .b9a-p3 { left: 88%; top: 53.6%; }
.px-bn11 .tx { max-width: min(40rem, 56%); } .px-bn11 h2 { font-size: clamp(1.8rem, 1rem + 1.8vw, 2.7rem); }
.px-bn10 h2 { font-size: clamp(1.9rem, 1.1rem + 2vw, 2.9rem); }
.px-bn16 h2 .px-swap { color: inherit; font-weight: inherit; vertical-align: top; } .px-bn16 h2 .px-swap.is-live { height: 1.12em; }
.px-bn16 .tx { max-width: min(42rem, 58%); } .px-bn16 h2 { font-size: clamp(2.3rem, 1.2rem + 2.9vw, 4rem); line-height: 1.08; } .px-bn16 h2 .px-swap { display: block; } /* plus grand : sa demande du 2026-10-27 */
@media (max-width: 760px) { .px-bn16 h2 { font-size: clamp(1.75rem, 1rem + 3.6vw, 2.4rem); } }
@media (max-width: 760px) { .px-bn11 .tx { max-width: none; } .px-bn16 h2 .px-swap { display: block; } .px-bn16 .tx { max-width: none; } .px-bn .k { margin-bottom: 1.25rem; } .px-bn11 h2 em { white-space: nowrap; } } .px-bn11 h2 em { font-style: normal; font-weight: 600; color: var(--primary); }
.px-bn .k .px-a1 { background: none; color: inherit; }
/* B10 la signature (sa S1 du 2026-10-27, d'après Bates White) : un panneau blanc centré sur l'aluminium perforé d'un
   diffuseur d'air, la surtitre en petites capitales sur la photo, le titre en lettres à empattements (Newsreader, SIL OFL 1.1) */
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/newsreader-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
.px-sg { position: relative; isolation: isolate; overflow: hidden; }
.px-sg > .bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.px-sg .wrap { display: grid; justify-items: center; padding-block: clamp(3rem, 6vw, 4.6rem) clamp(4rem, 8vw, 6rem); }
.px-sg .k { margin: 0 0 clamp(1.6rem, 3.4vw, 2.6rem); padding: .3rem .8rem; background: rgba(255, 255, 255, .82); color: var(--navy); font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.px-sg .panel { display: grid; justify-items: center; gap: 1.4rem; width: min(100%, 64rem); padding: clamp(2.2rem, 5vw, 4.4rem) clamp(1.4rem, 6vw, 5rem); background: #fff; text-align: center; }
.px-sg .t { margin: 0; color: #0b2545; font-family: "Newsreader", Georgia, serif; font-size: clamp(1.9rem, 1.1rem + 2.2vw, 3.1rem); font-weight: 400; line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; }
.px-sg .t span { display: block; } /* deux lignes, coupées à la pause */
.px-sg .go { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; color: #006692; font-weight: 700; text-decoration: none; }
.px-sg .go span { transition: transform .25s; } .px-sg .go:hover span { transform: translateX(4px); }
/* B6 (sa demande du 2026-10-27 : plus de bleu nuit, du clair et doux, comme une salle propre) : un bleu glacier qui se fond
   dans le blanc, des cartes blanches au filet cyan, une bande de photo large, un bouton bleu */
.px-bn6-head { max-width: 46rem; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); } .px-bn6-head h2 { margin: 0; }
.px-bn6.px-v5 { background: linear-gradient(180deg, #e6f3fa 0%, #f3f9fd 55%, #fff 100%); }
.px-bn6.px-v5 li { grid-template-columns: clamp(9rem, 16vw, 13rem) minmax(0, 1fr); background: #fff; border-top: 3px solid var(--cyan); box-shadow: 0 1.4rem 2.6rem -1.8rem rgba(10, 40, 70, .35); }
.px-bn6.px-v5 .k { color: #006692; } .px-bn6.px-v5 h3 { color: var(--navy); } .px-bn6.px-v5 .bd > p:not(.k) { color: var(--body-ink); }
.px-bn-btn.is-blue { background: #007db3; color: #fff; } .px-bn-btn.is-blue:hover { background: #006692; }
@media (max-width: 560px) { .px-bn6.px-v5 li { grid-template-columns: minmax(0, 1fr); } .px-bn6.px-v5 .strip { height: 11rem; } }
/* <<< bandeaux */

/* FormAction™, le film du catalogue (son accord du 2026-10-26) : à droite de « Nos FormAction™ » ; le texte sous le titre */
.px-ff-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(1.6rem, 4vw, 4rem); align-items: center; margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.px-ff-head h2 { margin: 0 0 1.2rem; } .px-ff-head .px-intro { max-width: none; margin: 0; }
.px-ff-film { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy); box-shadow: 0 1.6rem 3rem -2rem rgba(6, 18, 30, .55); }
.px-ff-film > img, .px-ff-film > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .px-ff-head { grid-template-columns: minmax(0, 1fr); } }

/* La bande claire d'une reconnaissance (Énergir, son choix du 2026-10-27, d'après la bande PSCI de West Pharma) : un dégradé
   bleu glacier qui se fond dans le blanc, la phrase à gauche, le logo à droite, un bouton au contour bleu */
.px-recog { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.6rem clamp(2rem, 5vw, 5rem); padding: clamp(1.8rem, 3.5vw, 2.6rem) clamp(1.6rem, 5vw, 4rem); background: linear-gradient(90deg, #cdf1f9 0%, #e4f7fc 45%, #fbfeff 85%, #fff 100%); border-radius: 4px; box-shadow: 0 .9rem 1.8rem -1.2rem rgba(10, 28, 46, .28); }
.px-recog .tx { display: grid; justify-items: start; gap: 1.4rem; }
.px-recog p { margin: 0; max-width: 40rem; color: var(--ink); font-size: clamp(1.05rem, .95rem + .35vw, 1.25rem); line-height: 1.55; }
.px-recog p a { color: #006692; text-decoration: none; box-shadow: inset 0 -1px 0 rgba(0, 102, 146, .4); } .px-recog p a:hover { box-shadow: inset 0 -2px 0 #006692; }
.px-recog-btn { display: inline-grid; place-items: center; min-width: 13rem; min-height: 3rem; padding: 0 1.6rem; background: #fff; border: 1.5px solid #006692; border-radius: 4px; color: #006692; font-weight: 700; text-decoration: none; transition: background .2s, color .2s; }
.px-recog-btn:hover { background: #006692; color: #fff; } .px-recog-btn:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.px-recog .lg { width: clamp(9rem, 16vw, 13rem); height: auto; }
.px-recog-sec { padding-block: clamp(2.6rem, 5vw, 4rem); background: #fff; }
.px-en-cards.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .px-recog { grid-template-columns: minmax(0, 1fr); } .px-recog .lg { order: -1; } .px-en-cards.is-two { grid-template-columns: minmax(0, 1fr); } }

/* « De quelle expertise avez-vous besoin ? » (2026-10-27) : la carte n'est plus un seul lien ; un bouton « Parler à un expert »
   posé sur la photo, en haut à droite (une étiquette blanche discrète depuis sa demande du 2026-10-27 soir : « pas en gros rouge carré ») (en bas à droite sur la 3e photo, où le haut est chargé) */
.px-need-card .ph { position: relative; display: block; }
.px-need-card .lk { display: block; color: var(--ink); text-decoration: none; } .px-need-card .lk:hover strong { color: var(--primary); }
.px-need-cta { position: absolute; top: .9rem; right: .9rem; display: inline-flex; align-items: center; gap: .45rem; min-height: 2.5rem; padding: 0 .95rem; border: 1px solid rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--navy); font-size: .84rem; font-weight: 600; text-decoration: none; transition: background .2s, color .2s; }
.px-need-cta::after { content: "→"; color: var(--primary); transition: transform .25s var(--ease); }
.px-need-cta:hover { background: #fff; color: var(--primary); } .px-need-cta:hover::after { transform: translateX(3px); }
.px-need-cta:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.px-need-card.is-br .px-need-cta { top: auto; bottom: .9rem; }

/* >>> cartes photo (générées par _source/outils/cartes-photo.cjs) */
/* Cartes photo, sa demande du 2026-10-27 (sa capture 2026-09-27 154325) : la photo et le titre sur un bandeau clair au filet
   P·B·E ; au survol ou au clavier, le bandeau monte comme un rideau et découvre le texte (is-flip : la carte se retourne).
   Les cartes d'une rangée incomplète sont centrées (3 + 2). Téléphone et écran tactile : tout est visible, sans geste. */
.px-rv { --cols: 3; --gap: clamp(.9rem, 1.6vw, 1.4rem); --h: clamp(22rem, 19rem + 6vw, 26rem); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); margin: clamp(1.8rem, 3vw, 2.6rem) 0 0; padding: 0; list-style: none; }
.px-rv.is-4 { --cols: 4; } .px-rv.is-5 { --cols: 5; --h: clamp(24rem, 20rem + 6vw, 28rem); } .px-rv.is-low { --h: clamp(19rem, 16rem + 5vw, 22rem); }
.px-rv > .px-rv-c { position: relative; flex: 0 1 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); height: var(--h); margin: 0; padding: 0; overflow: hidden; border: 0; background: #dfeaf2; color: var(--navy); box-shadow: 0 1.3rem 2.6rem -1.9rem rgba(10, 40, 70, .45); }
.px-rv > .px-rv-c::before, .px-rv > .px-rv-c::after { content: none; }
.px-rv-in { position: absolute; inset: 0; display: block; color: inherit; text-decoration: none; }
.px-rv-in > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.px-rv-c:is(:hover, :focus-within) .px-rv-in > img { transform: scale(1.05); }
.px-rv-t { display: none; }
.px-rv-b { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; min-height: 0; padding: 1.05rem 1.2rem 1.15rem; border-top: 3px solid transparent; border-image: linear-gradient(90deg, var(--cyan) 0 33.3%, var(--red) 33.3% 66.6%, var(--primary) 66.6%) 1; background: rgba(246, 251, 254, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); text-align: left; transition: min-height .6s var(--ease), background .4s; }
.px-rv-b .n { margin-bottom: .3rem; color: #006692; font-size: .78rem; font-weight: 700; letter-spacing: .12em; }
.px-rv-b .h { display: block; margin: 0; color: var(--navy); font-family: var(--font-heading); font-size: clamp(1.05rem, .95rem + .35vw, 1.25rem); font-weight: 600; line-height: 1.22; text-wrap: balance; }
.px-rv-d { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.px-rv-d > p { margin: 0; min-height: 0; overflow: hidden; color: var(--body-ink); font-size: .95rem; line-height: 1.55; opacity: 0; transform: translateY(.6rem); transition: opacity .35s, transform .45s var(--ease); }
.px-rv-d > p::before { content: ""; display: block; height: .7rem; }
.px-rv-c:is(:hover, :focus-within) .px-rv-b { min-height: 100%; background: rgba(241, 248, 253, .92); }
.px-rv-c:is(:hover, :focus-within) .px-rv-d { grid-template-rows: 1fr; }
.px-rv-c:is(:hover, :focus-within) .px-rv-d > p { opacity: 1; transform: none; transition-delay: .15s; }
a.px-rv-in .px-rv-b .h::after { content: " →"; color: #006692; }
.px-rv-c:focus-visible, .px-rv-c:has(:focus-visible) { outline: 3px solid #006692; outline-offset: 3px; }
.px-rv-in:focus-visible { outline: none; }
/* le retournement : la photo et son titre devant, le texte au dos, sur un bleu glacier qui se fond dans le blanc */
.px-rv.is-flip > .px-rv-c { overflow: visible; background: none; box-shadow: none; perspective: 1400px; }
.px-rv.is-flip .px-rv-in { transform-style: preserve-3d; transition: transform .8s var(--ease); box-shadow: 0 1.3rem 2.6rem -1.9rem rgba(10, 40, 70, .45); }
.px-rv.is-flip .px-rv-c:is(:hover, :focus-within) .px-rv-in { transform: rotateY(180deg); }
.px-rv.is-flip .px-rv-c:is(:hover, :focus-within) .px-rv-in > img { transform: none; }
.px-rv.is-flip .px-rv-in > img, .px-rv.is-flip .px-rv-t, .px-rv.is-flip .px-rv-b { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.px-rv.is-flip .px-rv-t { position: absolute; left: 0; right: 0; bottom: 0; display: block; padding: 1.05rem 1.2rem 1.15rem; border-top: 3px solid transparent; border-image: linear-gradient(90deg, var(--cyan) 0 33.3%, var(--red) 33.3% 66.6%, var(--primary) 66.6%) 1; background: rgba(246, 251, 254, .94); color: var(--navy); font-family: var(--font-heading); font-size: clamp(1.05rem, .95rem + .35vw, 1.25rem); font-weight: 600; line-height: 1.22; }
.px-rv.is-flip .px-rv-b { top: 0; min-height: 100%; justify-content: center; padding: 1.6rem 1.5rem; background: linear-gradient(160deg, #e2f2fb 0%, #f4fafd 55%, #fff 100%); transform: rotateY(180deg); -webkit-backdrop-filter: none; backdrop-filter: none; }
.px-rv.is-flip .px-rv-d { grid-template-rows: 1fr; } .px-rv.is-flip .px-rv-d > p { opacity: 1; transform: none; }
/* les sections qui étaient sur fond bleu nuit ou bleu passent au clair (sa règle du 2026-10-27 : du bleu glacier qui se fond
   dans le blanc ; le bleu nuit pour le texte seulement) */
section.is-photos { background: linear-gradient(180deg, #e6f3fa 0%, #f3f9fd 55%, #fff 100%); color: var(--navy); }
section.is-photos h2 { color: var(--navy); } section.is-photos h2 strong { color: #0089c0; }
section.is-photos .eyebrow { color: #006692; }
section.is-photos .wrap > div > p:not(.eyebrow) { color: var(--body-ink); }
@media (max-width: 1180px) { .px-rv.is-5 { --cols: 3; } }
@media (max-width: 1010px) { .px-rv.is-4 { --cols: 2; } }
/* téléphone, écran tactile : la photo, puis le titre et le texte, sans geste */
@media (max-width: 760px), (hover: none) {
  .px-rv > .px-rv-c { height: auto; overflow: hidden; background: #fff; }
  .px-rv.is-flip > .px-rv-c { overflow: hidden; background: #fff; box-shadow: 0 1.3rem 2.6rem -1.9rem rgba(10, 40, 70, .45); }
  .px-rv-in, .px-rv.is-flip .px-rv-in { position: relative; inset: auto; transform: none !important; box-shadow: none; }
  .px-rv-in > img { position: relative; display: block; height: 13rem; transform: none !important; }
  .px-rv-t, .px-rv.is-flip .px-rv-t { display: none; }
  .px-rv-b, .px-rv.is-flip .px-rv-b { position: relative; min-height: 0 !important; padding: 1.05rem 1.2rem 1.3rem; background: #fff; transform: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .px-rv-d { grid-template-rows: 1fr; } .px-rv-d > p { opacity: 1; transform: none; }
}
@media (max-width: 760px) { .px-rv > .px-rv-c, .px-rv.is-4 > .px-rv-c, .px-rv.is-5 > .px-rv-c { flex-basis: 100%; } .px-rv-in > img { height: 12rem; } }
@media (hover: none) and (min-width: 761px) { .px-rv.is-5, .px-rv.is-4 { --cols: 2; } }
@media (prefers-reduced-motion: reduce) { .px-rv-b, .px-rv-d, .px-rv-d > p, .px-rv-in, .px-rv-in > img { transition: none !important; } }
/* <<< cartes photo */

/* >>> accueil badge et erreur (_source/outils/accueil-badge-erreur.cjs, ses choix N1 et E2 du 2026-10-27) */
/* « Prêts pour l'inspection » : la référence officielle de l'EMA-Annexe 1 dans la grande case, plus large */
.px-regs li.px-a1-ref { display: grid; align-content: center; justify-items: start; gap: 0; padding: clamp(1.4rem, 2.4vw, 2.2rem); background: #fff; box-shadow: none; text-align: left; }
.px-a1-ref .lab { display: flex; align-items: center; gap: .55rem; margin: 0 0 .9rem; color: var(--navy); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.px-a1-ref .lab i { width: .7rem; height: .7rem; background: var(--red); }
.px-a1-ref .nm { margin: 0; color: #0b2545; font-family: "Newsreader", Georgia, serif; font-size: clamp(1.9rem, 1.2rem + 1.4vw, 2.6rem); font-weight: 400; line-height: 1.05; letter-spacing: -.01em; white-space: nowrap; }
.px-a1-ref .t { align-self: stretch; margin: .55rem 0 1rem; padding-bottom: 1rem; border-bottom: 1px solid #d6e2ea; color: var(--navy); font-size: 1rem; font-weight: 600; }
.px-a1-ref .src, .px-a1-ref .rev { margin: 0; color: var(--body-ink); font-size: .86rem; line-height: 1.5; }
.px-a1-ref .rev { margin-bottom: .6rem; }
.px-a1-ref .go { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; margin-top: .4rem; color: #006692; font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.px-a1-ref .go::before { content: ""; width: 3px; height: 1.4rem; margin-right: .5rem; background: #006692; }
.px-a1-ref .go:hover { color: var(--navy); }
/* N4 (son choix du 2026-10-27 au soir) : le nom seul, en grand, centré, et une ligne sous un filet rouge */
.px-regs li.px-a1-ref.is-n4 { align-content: center; justify-items: center; text-align: center; }
.px-a1-ref.is-n4 .nm { font-size: clamp(2.1rem, 1.3rem + 1.8vw, 3rem); }
.px-a1-ref.is-n4 .t { align-self: auto; max-width: 15rem; margin: .9rem auto 0; padding: .9rem 0 0; border-top: 2px solid var(--red); border-bottom: 0; color: var(--body-ink); font-size: .92rem; font-weight: 400; }
@media (min-width: 981px) { .px-regs ul { grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); } .px-regs li.px-a1-ref { grid-row: span 2; } }
@media (max-width: 980px) { .px-regs li.px-a1-ref { grid-column: 1 / -1; padding: 1.4rem 1.2rem; } }
@media (max-width: 980px) { .px-regs li:not(.px-a1-ref), .px-regs li:not(.px-a1-ref):first-child { justify-items: center; text-align: center; padding: 1.1rem .6rem; } .px-regs li:not(.px-a1-ref) strong { white-space: normal; } } /* téléphone : centré, en symétrie avec la case EMA-Annexe 1 (sa demande du 2026-10-28) */
/* N1 sur la page EMA-Annexe 1 › L'essentiel : la référence officielle à droite du titre (son accord du 2026-10-27) */
.px-a1-ess-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 23rem); gap: 1.6rem clamp(2rem, 5vw, 4.5rem); align-items: end; margin-bottom: clamp(2rem, 4vw, 3rem); }
.px-a1-ess-top .px-a1-head { margin-bottom: 0; }
.px-a1-ref.is-side { display: grid; justify-items: start; padding: clamp(1.3rem, 2.2vw, 1.9rem); background: #fff; box-shadow: inset 0 0 0 1px #d6e2ea; }
@media (max-width: 860px) { .px-a1-ess-top { grid-template-columns: minmax(0, 1fr); } .px-a1-ref.is-side { padding: 1.3rem 1.2rem; } }
/* « Avez-vous trouvé l'erreur ? » : une seule feuille de plan sur grille, annotée en rouge (plus de moitié bleu nuit) */
.px-plan-cta.is-sheet { background-color: #fff; background-image: linear-gradient(rgba(10, 123, 189, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 123, 189, .07) 1px, transparent 1px); background-size: 20px 20px; }
.px-plan-cta.is-sheet .px-plan-left, .px-plan-cta.is-sheet .px-plan-right { background: none; }
.px-plan-cta.is-sheet .px-plan-left h2 { color: var(--navy); }
.px-plan-cta.is-sheet .px-plan-left h2 strong { display: inline-block; margin-top: .3rem; color: var(--red); font-weight: 500; }
.px-plan-cta.is-sheet .px-plan-left .px-intro { color: var(--body-ink); }
.px-plan-cta.is-sheet .px-plan-left-in { position: relative; }
@media (min-width: 981px) { .px-plan-cta.is-sheet .px-plan-left-in::after { content: ""; position: absolute; right: -4.5rem; top: 2.2rem; width: 4rem; height: 2.4rem; border-top: 2px dashed var(--red); border-right: 2px dashed var(--red); border-top-right-radius: 1.6rem; } }
/* <<< accueil badge et erreur */

/* >>> carrières cartes (générées par _source/outils/carrieres-cartes.cjs, ses retours du 2026-10-27 au soir) */
/* Profils recherchés : le portrait et son titre sur un bandeau bleu ; au survol ou au clavier, le bleu monte et couvre toute
   la photo, le texte apparaît sous un petit filet blanc (sa capture d'inspiration 2026-09-27 154325). */
.px-cpf { --gap: clamp(.8rem, 1.4vw, 1.2rem); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); margin: clamp(1.6rem, 3vw, 2.4rem) 0 0; padding: 0; list-style: none; }
.px-cpf > li { --c: 0, 174, 239; --ink: #fff; position: relative; aspect-ratio: 5 / 8.3; overflow: hidden; background: #dfeaf2; box-shadow: 0 1.3rem 2.6rem -1.9rem rgba(10, 40, 70, .45); }
.px-cpf img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transition: transform .9s var(--ease); }
.px-cpf > li:nth-child(3n+2) { --c: 191, 30, 46; --ink: #fff; } .px-cpf > li:nth-child(3n) { --c: 0, 102, 146; --ink: #fff; } /* P·B·E : bleu ciel, rouge, bleu foncé (sa demande du 2026-10-27) */
.px-cpf-b { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; min-height: 0; padding: 1rem 1.05rem 1.1rem; background: rgba(var(--c), .96); color: var(--ink); transition: min-height .6s var(--ease), background .4s; }
.px-cpf-b h3 { margin: 0; color: var(--ink); font-family: var(--font-heading); font-size: clamp(.95rem, .82rem + .3vw, 1.08rem); font-weight: 600; line-height: 1.25; text-wrap: balance; min-height: var(--cpf-t, 0); } /* même hauteur pour tous les bandeaux (theme.js) */
.px-cpf-d { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.px-cpf-d > p { min-height: 0; overflow: hidden; margin: 0; color: var(--ink); font-size: clamp(.78rem, .516rem + .447vw, .92rem); line-height: 1.55; opacity: 0; transform: translateY(.6rem); transition: opacity .35s, transform .45s var(--ease); }
.px-cpf-d > p::before { content: ""; display: block; width: 2rem; height: 2px; margin: .85rem 0 .8rem; background: currentColor; opacity: .55; }
.px-cpf > li:is(:hover, :focus-within, :focus) .px-cpf-b { min-height: 100%; background: rgba(var(--c), .93); }
.px-cpf > li:is(:hover, :focus-within, :focus) img { transform: scale(1.04); }
.px-cpf > li:is(:hover, :focus-within, :focus) .px-cpf-d { grid-template-rows: 1fr; }
.px-cpf > li:is(:hover, :focus-within, :focus) .px-cpf-d > p { opacity: 1; transform: none; transition-delay: .15s; }
.px-cpf > li:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
/* tablette, écran tactile, téléphone : le portrait à gauche, le titre et le texte à droite, sans geste */
@media (max-width: 1000px), (hover: none) {
  .px-cpf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .px-cpf > li { display: grid; grid-template-columns: 36% minmax(0, 1fr); aspect-ratio: auto; }
  .px-cpf img { position: relative; inset: auto; height: 100%; min-height: 9.5rem; transform: none !important; }
  .px-cpf-b { position: relative; justify-content: center; min-height: 0 !important; background: rgb(var(--c)) !important; }
  .px-cpf-d { grid-template-rows: 1fr; } .px-cpf-d > p { opacity: 1; transform: none; }
  .px-cpf-b h3 { min-height: 0; }
}
@media (max-width: 1000px), (hover: none) { .px-cpf-d > p { font-size: .9rem; } }
@media (max-width: 640px) { .px-cpf { grid-template-columns: minmax(0, 1fr); } .px-cpf > li { grid-template-columns: 31% minmax(0, 1fr); } .px-cpf-b { padding: 1rem .9rem 1.05rem; } .px-cpf .nw { white-space: nowrap; } }
/* Ce que nous vous offrons : une icône au trait, le titre et le texte, dans une grille à filets fins sur une feuille blanche ;
   au survol, le filet P·B·E se trace en haut de la case */
.px-perk-ic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: clamp(1.8rem, 3vw, 2.6rem) 0 0; padding: 0; border: 1px solid #d3e1ea; background: #d3e1ea; list-style: none; box-shadow: 0 1.6rem 3rem -2.4rem rgba(10, 40, 70, .35); }
.px-perk-ic li { position: relative; padding: clamp(1.5rem, 2.6vw, 2.2rem) clamp(1.2rem, 2.4vw, 2.1rem) clamp(1.6rem, 2.8vw, 2.3rem); background: #fff; }
.px-perk-ic li::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--cyan) 0 33.3%, var(--red) 33.3% 66.6%, var(--primary) 66.6%); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease); }
.px-perk-ic li:hover::before { transform: none; }
.px-perk-ic .ic { display: block; width: 2.3rem; height: 2.3rem; fill: none; stroke: var(--primary); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.px-perk-ic h3 { margin: 1.15rem 0 .55rem; color: var(--navy); font-family: var(--font-heading); font-size: clamp(1.05rem, .98rem + .25vw, 1.2rem); font-weight: 600; line-height: 1.3; }
.px-perk-ic p { margin: 0; color: var(--body-ink); font-size: .95rem; line-height: 1.6; }
/* la 9e case : une invitation à rejoindre l'équipe, sur fond bleu glacé, le filet P·B·E toujours visible, toute la case cliquable */
.px-perk-ic li.px-perk-cta { padding: 0; background: linear-gradient(160deg, #eaf6fc, #ffffff 82%); }
.px-perk-ic li.px-perk-cta::before { transform: none; }
.px-perk-cta a { display: flex; flex-direction: column; height: 100%; padding: clamp(1.5rem, 2.6vw, 2.2rem) clamp(1.2rem, 2.4vw, 2.1rem) clamp(1.6rem, 2.8vw, 2.3rem); color: inherit; text-decoration: none; }
.px-perk-cta .ic { stroke: var(--red); }
.px-perk-cta .go { margin-top: auto; padding-top: 1.1rem; color: var(--red); font-size: .95rem; font-weight: 700; }
.px-perk-cta a:hover .go, .px-perk-cta a:focus-visible .go { text-decoration: underline; text-underline-offset: 3px; }
.px-perk-cta a:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; }
@media (max-width: 860px) { .px-perk-ic { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .px-cpf-b, .px-cpf-d, .px-cpf-d > p, .px-cpf img, .px-perk-ic li::before { transition: none !important; } }
/* <<< carrières cartes */

/* >>> photos marketing */
/* Ses photos de marketing (photos-marketing.cjs, 2026-10-27) */
/* EMA-Annexe 1 › preuves : la photo à droite, la boîte blanche du titre la chevauche à gauche, sans cacher personne */
.px-a1-proof-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; margin-bottom: clamp(1.8rem, 3.5vw, 2.8rem); }
.px-a1-proof-top figure { grid-column: 2; grid-row: 1; margin: 0; }
.px-a1-proof-top figure img { display: block; width: 100%; height: auto; aspect-ratio: 1012 / 637; object-fit: cover; }
.px-a1-head.is-boxed { grid-column: 1; grid-row: 1; position: relative; z-index: 1; max-width: none; margin: 0 -3.5rem 0 0; padding: clamp(1.4rem, 3vw, 2.4rem); background: #fff; box-shadow: 0 1.4rem 2.8rem -1.8rem rgba(10, 40, 70, .4); }
.px-a1-head.is-boxed::before { content: ""; display: block; width: 3rem; height: 3px; margin-bottom: 1rem; background: var(--red); }
@media (max-width: 760px) {
  .px-a1-proof-top { grid-template-columns: minmax(0, 1fr); }
  .px-a1-proof-top figure { grid-column: 1; grid-row: 1; }
  .px-a1-head.is-boxed { grid-column: 1; grid-row: 2; margin: -1.1rem .9rem 0; padding: 1.2rem 1.1rem; }
}
/* Chimie fine › Produits et procédés : la photo prend exactement la hauteur de la colonne de droite (titre → liste) ;
   un filet P·B·E sur son bord gauche. Sur téléphone, la photo au-dessus, en 3:2. */
.px-dprod-ph { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(1.6rem, 4vw, 3.5rem); align-items: stretch; }
.px-dprod-ph figure { position: relative; margin: 0; overflow: hidden; }
.px-dprod-ph figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.px-dprod-ph figure::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: 1; width: 6px; background: linear-gradient(var(--cyan) 0 33.3%, var(--red) 33.3% 66.6%, var(--primary) 66.6%); }
.px-dprod-ph h2 { margin-top: 0; }
@media (max-width: 760px) {
  .px-dprod-ph { grid-template-columns: minmax(0, 1fr); }
  .px-dprod-ph figure { aspect-ratio: 3 / 2; }
}
/* <<< photos marketing */

/* >>> photos libres */
/* Ses photos libres approuvées le 2026-10-27 (photos-libres-site.cjs). Toujours en symétrie (sa règle) : une photo à côté
   d'un texte en prend exactement la hauteur ; l'image est posée en absolu, le texte seul donne la hauteur. */
/* 5. EMA-Annexe 1 › questions : deux cases bleu glacé, de la hauteur des questions (contain: size, elles ne la poussent pas) */
.px-faq-split { display: grid; grid-template-columns: minmax(0, 1fr) clamp(10rem, 22vw, 15rem); gap: clamp(1.2rem, 3vw, 2.4rem); align-items: stretch; }
.px-faq-split .px-a1-qa { max-width: none; margin: 0; }
.px-faq-obj { contain: size; display: grid; grid-template-rows: 1fr 1fr; gap: clamp(.8rem, 1.6vw, 1.2rem); }
.px-faq-obj figure { position: relative; display: grid; place-items: center; min-height: 0; margin: 0; padding: 1rem 1rem 2.2rem; overflow: hidden; background: linear-gradient(160deg, #eaf6fc, #ffffff 75%); box-shadow: inset 0 0 0 1px #d6e6ef; }
.px-faq-obj img { width: 100%; height: 100%; min-height: 0; object-fit: contain; mix-blend-mode: multiply; }
.px-faq-obj figcaption { position: absolute; left: 0; right: 0; bottom: .8rem; color: var(--navy); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-align: center; text-transform: uppercase; }
@media (max-width: 760px) { .px-faq-split { grid-template-columns: minmax(0, 1fr); } .px-faq-obj { contain: none; grid-template-rows: none; grid-template-columns: 1fr 1fr; } .px-faq-obj figure { height: 13rem; } }
/* 7. Audit › la grille des domaines : 6 colonnes, la photo sur deux rangées (12 cases, entières à 2 colonnes aussi) */
.px-audit-domains.has-ph { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.px-audit-domains .px-audit-ph { grid-row: span 2; padding: 0; overflow: hidden; }
.px-audit-domains .px-audit-ph img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
@media (max-width: 960px) { .px-audit-domains.has-ph { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .px-audit-domains.has-ph { grid-template-columns: minmax(0, 1fr); } .px-audit-domains .px-audit-ph { grid-row: auto; aspect-ratio: 3 / 2; } }
/* 8. CQV › livrables : la photo prend les deux places vides de la dernière rangée, à la hauteur de la carte voisine */
.px-dlv li.is-ph { flex: 0 1 calc((100% - 2 * var(--g)) / 3 * 2 + var(--g)); min-height: 0; padding: 0; overflow: hidden; border-top: 0; clip-path: none; }
.px-dlv li.is-ph::after { display: none; }
.px-dlv li.is-ph img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
@media (max-width: 760px) { .px-dlv li.is-ph { flex-basis: 100%; aspect-ratio: 3 / 2; } }
/* 11, 13. le titre et son texte à gauche, la photo à droite, de la même hauteur */
.px-headph { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.4rem, 4vw, 3.5rem); align-items: stretch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.px-headph > div { max-width: none; margin-bottom: 0 !important; }
.px-headph figure { position: relative; min-height: 8rem; margin: 0; overflow: hidden; }
.px-headph figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .px-headph { grid-template-columns: minmax(0, 1fr); } .px-headph figure { aspect-ratio: 3 / 2; } }
/* 12. Cannabis › la photo au-dessus du tableau ; la colonne de droite prend la hauteur de celle de gauche */
.px-cbd-in.has-ph { align-items: stretch; }
.px-cbd-side { display: flex; flex-direction: column; gap: 1rem; }
.px-cbd-ph { position: relative; flex: 1 1 auto; min-height: 8rem; margin: 0; overflow: hidden; }
.px-cbd-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.px-cbd-side .px-cbd-lim { margin: 0; }
@media (max-width: 860px) { .px-cbd-ph { flex: none; aspect-ratio: 3 / 2; } }
/* grand écran : la photo en hauteur à côté du tableau, sur toute la hauteur de la colonne (sa remarque : « on ne voit rien » dans une bande basse) */
@media (min-width: 1200px) { .px-cbd-side { flex-direction: row; align-items: stretch; } .px-cbd-ph { flex: 0 0 31%; min-height: 0; } .px-cbd-ph img { object-position: 50% 50%; } .px-cbd-side .px-cbd-lim { flex: 1 1 auto; align-self: stretch; } .px-cbd-side .px-cbd-lim li { grid-template-columns: 7.3rem minmax(0, 1fr) auto; gap: .6rem; } .px-cbd-side .px-cbd-lim .r { font-size: .88rem; white-space: nowrap; } .px-cbd-side .px-cbd-lim strong { font-size: 1rem; white-space: nowrap; } }
/* 14. Efficacité énergétique › le bilan : le titre à gauche, la photo à droite, de la même hauteur */
.px-head-row.has-ph { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.4rem, 4vw, 3.5rem); align-items: stretch; }
.px-head-row.has-ph figure { position: relative; min-height: 8rem; margin: 0; overflow: hidden; }
.px-head-row.has-ph figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .px-head-row.has-ph { grid-template-columns: minmax(0, 1fr); } .px-head-row.has-ph figure { aspect-ratio: 3 / 2; } }
/* 15. À propos › « Derrière chaque lot, un patient » : la photo à gauche, la boîte blanche la chevauche sur le parc */
.px-why-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
.px-why-in figure { grid-column: 1; grid-row: 1; margin: 0; }
.px-why-in figure img { display: block; width: 100%; height: auto; }
.px-why-box { grid-column: 2; grid-row: 1; position: relative; z-index: 1; margin-left: -3.5rem; padding: clamp(1.4rem, 3vw, 2.6rem); background: #fff; box-shadow: 0 1.4rem 2.8rem -1.8rem rgba(10, 40, 70, .4); }
.px-why-box::before { content: ""; display: block; width: 3rem; height: 3px; margin-bottom: 1rem; background: var(--red); }
.px-why-box h2 { margin: 0; text-wrap: balance; }
.px-why-box p:last-child { margin: 1rem 0 0; color: var(--body-ink); }
@media (max-width: 760px) { .px-why-in { grid-template-columns: minmax(0, 1fr); } .px-why-box { grid-column: 1; grid-row: 2; margin: -1.1rem .9rem 0; } }
/* A. Savoir-faire › haut de page : sa photo 3 en entier (sans voile sombre) ; le titre dans un panneau givré, sur la zone
   claire entre les icônes (à gauche) et les gélules (à droite), poussé à droite pour ne pas couvrir les icônes */
.px-pagehead.is-photo { color: var(--navy); background: #dcecf6; }
.px-pagehead.is-photo::after { display: none; }
.px-pagehead.is-photo > img { object-position: 50% 0%; }
.px-pagehead.is-photo .wrap { min-height: clamp(24rem, 40vw, 36rem); padding-block: clamp(1.4rem, 3vw, 2.4rem); }
.px-pagehead.is-photo .wrap > * { width: min(30rem, 34%); margin: 0 0 0 46%; padding-inline: clamp(1.1rem, 2.2vw, 1.8rem); background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.px-pagehead.is-photo .eyebrow { padding-block: clamp(1.1rem, 2.2vw, 1.6rem) .9rem; color: var(--primary); } /* l’espace sous l’étiquette en marge intérieure : le panneau reste d’un seul tenant */
.px-pagehead.is-photo h1 { color: var(--navy); font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.7rem); max-width: none; }
.px-pagehead.is-photo .lead { margin: 0 0 0 46%; padding-block: .9rem clamp(1.1rem, 2.2vw, 1.6rem); color: var(--body-ink); font-size: 1rem; }
@media (max-width: 760px) { .px-pagehead.is-photo .wrap { display: flex; flex-direction: column; justify-content: flex-end; min-height: 30rem; } .px-pagehead.is-photo .wrap > * { width: 100%; margin-left: 0; } }
/* <<< photos libres */

/* >>> titre accueil */
/* Accueil, le titre du haut (titre-accueil.cjs, son choix du 2026-10-27) : Newsreader ; chaque ligne remplit le cadre blanc
   (tailles posées par theme.js) ; « confiance. » en bleu. Sans transition : le script lit la vraie taille. */
.px-reel h1 { font-family: "Newsreader", Georgia, serif; font-weight: 500; letter-spacing: -.012em; color: var(--navy); }
.px-reel h1 strong { font-weight: inherit; color: var(--primary); }
.px-reel.is-fit h1 { white-space: nowrap; line-height: 1; }
.px-reel.is-fit h1 .ln { display: block; width: max-content; }
.px-reel.is-fit h1 .ln + .ln { margin-top: .04em; }
.px-reel.is-fit h1, .px-reel.is-fit h1 * { transition: none !important; }
.px-reel.is-fit .px-reel-d { max-width: none; }
@media (min-width: 761px) {
  .px-reel.is-fit .px-reel-rule { margin: .7rem 0 .65rem; }
  .px-reel.is-fit .px-reel-d { font-size: .95rem; line-height: 1.45; }
  .px-reel.is-fit .px-reel-act { flex-wrap: nowrap; gap: 1rem; margin-top: .8rem; white-space: nowrap; }
  .px-reel.is-fit .px-reel-act .text-link { font-size: .92rem; }
}
/* <<< titre accueil */

/* >>> fonds foncés */
/* Fonds foncés, option A « Gris et blanc » (fonds-sombres.cjs, son choix du 2026-10-27, d'après Degreed) */
:root { --dk-grey: #97a7b6; --dk-label: rgba(255, 255, 255, .82); }
:is(.px-dark, .px-careers, .px-pagehead:not(.is-photo), .px-perks:not(.is-icons), .px-voices:not(.px-vc), .px-plan-cta .px-plan-left, .px-recrute:not(.is-light), .px-en3-why:not(.is-photos), .px-en3-idea:not(.is-photos), .px-vial-title, .px-chal-lead, .px-iv-card, .px-caps.is-live .cap, .px-ct-hero, .px-w1-head) .eyebrow { color: var(--dk-label); }
:is(.px-dark, .px-careers, .px-pagehead:not(.is-photo), .px-perks:not(.is-icons), .px-voices:not(.px-vc), .px-plan-cta .px-plan-left, .px-recrute:not(.is-light), .px-en3-why:not(.is-photos), .px-en3-idea:not(.is-photos), .px-vial-title, .px-chal-lead, .px-iv-card, .px-caps.is-live .cap, .px-ct-hero, .px-w1-head) .eyebrow::before { content: ""; display: inline-block; width: 1.6rem; height: 2px; margin-right: .6rem; vertical-align: .3em; background: var(--red); }
.px-equip-broch .k, .px-fx-bal .k, .px-tq-grid .is-join .k, .px-gm-banner .k, .px-cv-card .k, .px-a1-band .k, .px-bn10 .k, .px-bn15 .k, .px-sf-wide .px-tag, .px-join:not(.px-join-r1) .px-dept-tag, .px-tile small, .px-voix-wall li.is-dark .px-voix-role, .px-of-card.is-spont .px-of-meta, .px-bn4 .by, .px-gm-mx thead th.grp, .px-gm-top .ln, .px-badge-zone, .px-audit-foot .px-audit-refs { color: var(--dk-label); }
.px-steps li > span, .px-events .y, .px-phase li span, .px-focus-list span, .px-award-list .y, .px-audit-domains .n, .px-perk-list li::before, .px-chal-front .cap .n, .px-pf-apart li::before, .px-w1-grid figcaption .n, .px-join-r1 .z, .px-cv-card .pair span, .px-gr-list li:first-child .n { color: var(--dk-grey); }
:is(.px-ct-hero h1, .px-w1-head h2, .px-tq-grid .is-join h3, .px-gm-banner .t, .px-caps.is-live .cap .t, .px-bn9 .hero, .px-bn10 h2, .px-bn15 h2, .px-pagehead:not(.is-photo) h1, .px-pagehead:not(.is-photo) h2):has(strong) { color: var(--dk-grey); }
:is(.px-ct-hero h1, .px-w1-head h2, .px-tq-grid .is-join h3, .px-gm-banner .t, .px-caps.is-live .cap .t, .px-bn9 .hero, .px-bn10 h2, .px-bn15 h2, .px-pagehead:not(.is-photo) h1, .px-pagehead:not(.is-photo) h2) strong { color: #fff; font-weight: 600; }
/* les bandes .px-dark sont bleues : le début du titre en blanc adouci (le gris s’y lirait mal), les mots en vedette en blanc */
.px-dark :is(h1, h2):has(strong) { color: rgba(255, 255, 255, .74); }
.px-dark :is(h1, h2) strong { color: #fff; font-weight: 600; }
.px-imap-list button[aria-pressed="true"], .px-gx-tabs button[aria-selected="true"] .k, .px-ct-chip:hover, .px-ct-chip:focus-visible { color: #fff; }
.px-vial-title .eyebrow { text-shadow: 0 1px 12px rgba(0, 0, 0, .45); } /* sur la photo claire des flacons, comme son titre */
/* <<< fonds foncés */

/* >>> nos métiers */
/* Carrières › Nos métiers, le gabarit de BCG X aux couleurs de PBE Expert (_source/outils/carrieres-metiers.cjs) */
.px-jb { display: grid; grid-template-columns: minmax(13rem, 22fr) minmax(0, 39fr) minmax(0, 39fr); gap: clamp(.8rem, 1.1vw, 1.1rem); padding: clamp(.9rem, 1.2vw, 1.2rem) clamp(.9rem, 1.2vw, 1.2rem) clamp(.9rem, 1.2vw, 1.2rem) clamp(1rem, 1.6vw, 1.5rem); background: #e1f1fa; border-radius: 26px; }
.px-jb-side h2 { margin: .5rem 0 1.6rem; color: var(--navy); font-size: clamp(2rem, 1.1rem + 1.9vw, 3rem); font-weight: 300; line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; }
.px-jb-tabs { display: flex; flex-direction: column; gap: .35rem; }
.px-jb-tabs button { display: block; width: 100%; min-height: 2.75rem; padding: .55rem .8rem; border: 0; border-radius: 8px; background: transparent; color: var(--navy); font: 400 1.02rem/1.3 var(--font-body); text-align: left; cursor: pointer; }
.px-jb-tabs button:hover { background: rgba(255, 255, 255, .55); }
.px-jb-tabs button[aria-selected="true"] { background: #fff; font-weight: 700; }
.px-jb-tabs button:focus-visible { outline: 3px solid var(--primary); outline-offset: 0; }
.px-jb-panel { display: contents; }
.px-jb.is-live .px-jb-panel[data-off] { display: none; }
.px-jb:not(.is-live) { display: block; } .px-jb:not(.is-live) .px-jb-tabs { display: none; } .px-jb:not(.is-live) .px-jb-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; margin-bottom: 1rem; }
.px-jb-about { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(1.6rem, 3vw, 2.8rem) clamp(1.6rem, 3.2vw, 3rem); background: #fff; border-radius: 26px; }
.px-jb-about .h { margin: 0 0 .7rem; color: var(--navy); font-size: clamp(1.15rem, .95rem + .55vw, 1.5rem); font-weight: 400; letter-spacing: .01em; text-transform: uppercase; }
.px-jb-about .tx { margin: 0; color: var(--navy); font-size: clamp(1rem, .9rem + .3vw, 1.18rem); font-weight: 300; line-height: 1.5; }
.px-jb-btn { margin-top: clamp(1.4rem, 2.6vw, 2.2rem); padding: .9rem 1.6rem; border-radius: 10px; background: #0077b6; color: #fff; font-size: .98rem; font-weight: 700; letter-spacing: .03em; text-decoration: none; text-transform: uppercase; }
.px-jb-btn:hover, .px-jb-btn:focus-visible { background: #0a8bd0; color: #fff; }
/* la carte bleue, sur une trame de plan d'ingénieur (sa demande), le filet P·B·E en haut */
.px-jb-card { position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1.4rem, 3vw, 2.6rem); overflow: hidden; border-radius: 26px; color: #fff; background-color: #0b4f74; background-image: linear-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .09) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px; background-position: -1px -1px; }
.px-jb-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, #00aeef 0 33.3%, var(--red) 33.3% 66.6%, #006692 66.6%); }
.px-jb-card .who { display: flex; align-items: flex-start; gap: clamp(1rem, 1.8vw, 1.6rem); }
.px-jb-card .who img { flex: none; width: clamp(5rem, 6.6vw, 7rem); height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 15%; border-radius: 18px; }
.px-jb-card .nm { margin: .5rem 0 .35rem; font-size: clamp(1.3rem, 1rem + .8vw, 1.75rem); font-weight: 300; line-height: 1.15; }
.px-jb-card .rl { margin: 0; font-size: .92rem; font-weight: 700; letter-spacing: .02em; line-height: 1.35; text-transform: uppercase; }
.px-jb-card .pills { display: flex; flex-wrap: wrap; gap: .55rem; margin: clamp(1.4rem, 2.4vw, 2rem) 0 clamp(1.2rem, 2vw, 1.6rem); padding: 0; list-style: none; }
.px-jb-card .pills li { padding: .42rem .95rem; border-radius: 12px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); font-size: .82rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.px-jb-card .pitch { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.45; }
.px-jb-prof { display: inline-flex; align-self: flex-start; align-items: center; gap: .4rem; min-height: 2.75rem; margin-top: 1rem; color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.px-jb-prof:hover, .px-jb-prof:focus-visible { color: #fff; text-decoration-thickness: 2px; }
.px-jb-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.4rem 0 0; }
@media (prefers-reduced-motion: no-preference) { .px-jb.is-live .px-jb-panel:not([data-off]) > * { animation: px-jb-in .35s ease-out; } }
@keyframes px-jb-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) { .px-jb { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .px-jb-side { grid-column: 1 / -1; } .px-jb-side h2 { margin-bottom: 1rem; } .px-jb-tabs { flex-direction: row; flex-wrap: wrap; } .px-jb-tabs button { width: auto; } }
@media (max-width: 700px) { .px-jb { grid-template-columns: minmax(0, 1fr); border-radius: 20px; } .px-jb-tabs { flex-wrap: nowrap; overflow-x: auto; } .px-jb-tabs button { flex: none; } .px-jb-about, .px-jb-card { border-radius: 20px; } }
/* <<< nos métiers */

/* >>> accueil expertises */
/* Accueil (accueil-expertise.cjs) : les deux expertises phares sous le film, en colonnes avec une bande-photo ; la barre des chapitres en capitales */
.px-xph { padding-block: clamp(2.2rem, 4vw, 3.4rem); background: #fff; border-bottom: 1px solid var(--line); }
.px-xph .cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.4vw, 2rem); }
.px-xph .col { display: grid; grid-template-columns: clamp(9rem, 13vw, 11.5rem) minmax(0, 1fr); background: #eef7fc; }
.px-xph .ob { position: relative; margin: 0; min-height: 15rem; overflow: hidden; }
.px-xph .ob img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.px-xph .c1 .ob img { object-position: 60% 50%; } .px-xph .c2 .ob img { object-position: 50% 78%; }
.px-xph .col:hover .ob img { transform: scale(1.05); }
.px-xph .tx { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1.4rem, 2.6vw, 2.2rem); }
.px-xph .h { flex: 1; margin: 0 0 1.4rem; max-width: 30rem; color: var(--navy); font-family: "Newsreader", Georgia, serif; font-size: clamp(1.3rem, 1rem + .8vw, 1.75rem); font-weight: 500; line-height: 1.25; }
/* le lien est l'expertise elle-même (son choix du 2026-10-28) : en capitales, plus grand, le trait rouge à gauche */
.px-xph .tx a { display: flex; align-items: center; min-height: 2.75rem; padding: .3rem 0 .3rem 1rem; border-left: 4px solid var(--red); color: var(--navy); font-size: clamp(1rem, .9rem + .3vw, 1.15rem); font-weight: 700; letter-spacing: .08em; line-height: 1.3; text-decoration: none; text-transform: uppercase; text-wrap: balance; }
.px-xph .tx a .ar { display: inline-block; transition: transform .25s; }
.px-xph .tx a:hover, .px-xph .tx a:focus-visible { color: var(--primary); } .px-xph .tx a:hover .ar { transform: translateX(.25rem); }
/* deux colonnes : les deux liens prennent la même hauteur (le plus long sur deux lignes), les traits rouges sont égaux */
@media (min-width: 961px) { .px-xph .tx a { min-height: calc(2.6em + .6rem); } }
/* tablette (761 à 960 px) : les deux colonnes l'une sous l'autre, chaque lien sur une ligne (en deux colonnes, la colonne
   de texte était trop étroite : le lien du cannabis passait sur trois lignes) */
@media (min-width: 761px) and (max-width: 960px) { .px-xph .cols { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .px-xph .ob img, .px-xph .tx a .ar { transition: none; } .px-xph .col:hover .ob img, .px-xph .tx a:hover .ar { transform: none; } }
/* la barre des chapitres : le mot seul, en capitales */
.px-reel-chapters li button { display: block; padding: 1.15rem 1rem 1.05rem 0; }
.px-reel-chapters strong { display: block; font-size: clamp(1.05rem, .85rem + .55vw, 1.4rem); font-weight: 700; letter-spacing: .1em; line-height: 1.2; text-transform: uppercase; color: var(--navy); transition: color .3s; }
.px-reel-chapters [aria-current="true"] strong, .px-reel-chapters li button:hover strong { color: var(--sky-deep); }
/* la barre est plus basse : le grand mot du chapitre la suit (une seule rangée de chapitres au-delà de 980 px) */
@media (min-width: 981px) { .px-reel-word { bottom: 5.4rem; } }
@media (max-width: 760px) {
  .px-xph .cols { grid-template-columns: minmax(0, 1fr); } .px-xph .col { grid-template-columns: 7.5rem minmax(0, 1fr); }
  /* le lien tient en deux lignes égales (« EU-GMP Cannabis / thérapeutique ») de 360 à 430 px */
  .px-xph .tx { padding-inline: 1.1rem; } .px-xph .tx a { padding-left: .85rem; font-size: .95rem; letter-spacing: .03em; }
  .px-reel-chapters strong { font-size: 1rem; }
}
/* <<< accueil expertises */

/* >>> page Contact */
/* Page Contact, ses retours du 2026-10-28 (lu par contact-parcours.cjs) : les choix du haut deviennent des boutons à plusieurs
   choix ; les réglementations, des pastilles à cocher ; les pays, des pastilles ajoutées depuis la liste proposée. */
.px-ct-q span { display: block; margin-top: .15rem; color: #cfe3f2; font-size: .85rem; font-weight: 400; }
.px-ct-chip { width: 100%; font: inherit; font-size: .9rem; text-align: left; cursor: pointer; }
.px-ct-chip[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--navy); }
.px-ct-chip[aria-pressed="true"]::before { background: var(--red); border-color: var(--red); box-shadow: inset 0 0 0 2px #fff; }
.px-ct-step { scroll-margin-top: 6.5rem; }
.px-ct-fs { margin: 0 0 1.1rem; padding: 0; border: 0; min-width: 0; }
/* la légende d'un groupe dans une étape : un sous-titre, pas le grand titre numéroté de l'étape */
.px-ct-step .px-ct-fs > legend { float: none; display: block; width: auto; margin: .2rem 0 .6rem; font-family: inherit; font-size: .9rem; font-weight: 700; }
.px-ct-step .px-ct-fs > legend + * { clear: none; }
.px-ct-sub .h, .px-ct-country .h { color: var(--muted); font-size: .82rem; font-weight: 400; }
.px-ct-fs .px-ct-pills { margin-bottom: 0; }
label.px-ct-pill { position: relative; display: inline-flex; align-items: center; }
label.px-ct-pill input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
label.px-ct-pill:has(input:checked) { background: var(--navy); border-color: var(--navy); color: #fff; }
label.px-ct-pill:has(input:focus-visible) { outline: 3px solid var(--primary); outline-offset: 2px; }
.px-ct-country label { display: block; }
.px-ct-cc { display: flex; flex-wrap: wrap; gap: .4rem; margin: .55rem 0 0; padding: 0; list-style: none; }
.px-ct-cc:empty { display: none; }
.px-ct-cc li { display: inline-flex; align-items: center; gap: .2rem; padding: .2rem .25rem .2rem .8rem; border: 1.5px solid var(--primary); border-radius: 99px; background: #eef6fb; color: var(--navy); font-size: .88rem; font-weight: 600; }
.px-ct-cc button { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--navy); font: inherit; font-size: 1.15rem; line-height: 1; cursor: pointer; }
.px-ct-cc button:hover, .px-ct-cc button:focus-visible { background: #d8ebf6; }
/* « Vous êtes », la PURS et le financement : des pastilles à un seul choix ; la PURS et le financement côte à côte */
.px-ct-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.6rem; }
.px-ct-fh { margin: .5rem 0 0; color: var(--muted); font-size: .9rem; line-height: 1.45; } /* l'explication sous les pastilles : les deux rangées restent alignées */
/* le bloc cannabis, sous les expertises quand le cannabis est coché */
.px-ct-cb { margin: 1.1rem 0 0; padding: 1.1rem 1.2rem 1.2rem; border: 0; border-left: 4px solid var(--red); background: #f6f9fb; min-width: 0; }
.px-ct-step .px-ct-cb > legend { float: left; width: 100%; display: block; margin: 0 0 .4rem; padding: 0; font-family: inherit; font-size: .95rem; font-weight: 700; }
.px-ct-step .px-ct-cb > legend + * { clear: both; }
.px-ct-cbk { margin: .9rem 0 .5rem; color: var(--navy); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.px-ct-cbs { margin: .7rem 0 .4rem; color: var(--muted); font-size: .85rem; font-weight: 600; }
.px-ct-cb .px-ct-pills { margin-bottom: .2rem; }
.px-ct-pills.is-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.px-ct-pills.is-list .px-ct-pill { border-radius: 10px; text-align: left; line-height: 1.3; padding-block: .5rem; }
.px-ct-surf { max-width: 18rem; margin: .8rem 0 0; } .px-ct-surf label { font-size: .9rem; font-weight: 700; }
@media (max-width: 760px) { .px-ct-two, .px-ct-pills.is-list { grid-template-columns: minmax(0, 1fr); } }
/* <<< page Contact */

/* >>> scènes des secteurs */
/* S1 la cascade de pression */
.px-pc-head, .px-py-head, .px-sy-head, .px-pm-head { max-width: 46rem; margin-bottom: 1.6rem; }
.px-pc-head h2, .px-ax-head h2, .px-py-head h2, .px-sy-head h2, .px-pm-head h2 { margin: 0 0 1rem; }
.px-pc-head .px-intro, .px-ax-head .px-intro, .px-py-head .px-intro, .px-sy-head .px-intro, .px-pm-head .px-intro { margin: 0; }
.px-pc-switch { display: inline-flex; flex-wrap: wrap; margin-bottom: 1.6rem; border: 2px solid var(--navy); }
.px-pc-switch button { min-height: 2.75rem; padding: .6rem 1.1rem; border: 0; background: #fff; color: var(--navy); font: inherit; font-weight: 700; cursor: pointer; }
.px-pc-switch button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.px-pc-switch button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.px-pc-grid { display: grid; grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr); align-items: center; gap: 2rem; }
.px-pc-svg { display: block; width: 100%; height: auto; } .px-pc-svg.is-phone { display: none; }
.px-pc-svg .rm { stroke: var(--navy); stroke-width: 3; } .px-pc-svg .r-c { fill: #eef2f6; } .px-pc-svg .r-a { fill: #f3f9fd; } .px-pc-svg .r-s { fill: #e6f3fb; transition: fill .5s; }
.px-pc.is-800 .px-pc-svg .r-s { fill: #fbecee; }
.px-pc-svg .door { fill: #fff; }
.px-pc-svg .hood { fill: #fff; stroke: var(--primary); stroke-width: 2; stroke-dasharray: 6 4; }
.px-pc-svg .hd { fill: var(--primary); font-size: 17px; font-weight: 700; text-anchor: middle; }
.px-pc-svg .nm { fill: var(--navy); font-size: 24px; font-weight: 700; text-anchor: middle; } .px-pc-svg .cl { fill: var(--muted); font-size: 18px; text-anchor: middle; }
.px-pc-svg .st { text-anchor: start; }
.px-pc-svg .pa circle { fill: #fff; stroke: #8a99a8; stroke-width: 3; } .px-pc-svg .pa text { fill: var(--navy); font-size: 20px; font-weight: 800; text-anchor: middle; }
.px-pc-svg .pa.pos circle { stroke: var(--logo-blue); } .px-pc-svg .pa.pos text { fill: var(--primary); } .px-pc-svg .pa.neg circle { stroke: var(--red); } .px-pc-svg .pa.neg text { fill: var(--red); }
.px-pc-svg .ch path { fill: none; stroke: var(--logo-blue); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; animation: px-pc-h 1.5s linear infinite; }
.px-pc-svg .ch.v path { animation-name: px-pc-v; }
.px-pc-svg .f2.s8 .ch path { stroke: var(--red); }
.px-pc-svg .c-1 path { animation-delay: .25s; } .px-pc-svg .c-2 path { animation-delay: .5s; }
@keyframes px-pc-h { 0% { transform: translateX(-10px); opacity: 0; } 30%, 70% { opacity: 1; } 100% { transform: translateX(12px); opacity: 0; } }
@keyframes px-pc-v { 0% { transform: translateY(10px); opacity: 0; } 30%, 70% { opacity: 1; } 100% { transform: translateY(-12px); opacity: 0; } }
.px-pc.is-797 .s8, .px-pc.is-800 .s7 { display: none; }
.px-pc-say p { margin: 0 0 1rem; color: var(--body-ink); } .px-pc-say strong { display: block; margin-bottom: .3rem; color: var(--navy); }
.px-pc-say .px-pc-n { color: var(--muted); font-size: .88rem; }
@media (max-width: 760px) {
  .px-pc-grid { grid-template-columns: minmax(0, 1fr); }
  .px-pc-svg:not(.is-phone) { display: none; } .px-pc-svg.is-phone { display: block; max-width: 26rem; }
  .px-pc-svg.is-phone .nm { font-size: 26px; } .px-pc-svg.is-phone .cl { font-size: 20px; } .px-pc-svg.is-phone .hd { font-size: 19px; } .px-pc-svg.is-phone .pa text { font-size: 22px; }
  .px-pc-switch { display: grid; width: 100%; } .px-pc-switch button { text-align: left; }
}

/* S2 les zones ATEX */
.px-ax-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: clamp(2rem, 4vw, 3.5rem); }
.px-ax-legend { display: grid; gap: .8rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.px-ax-legend li { padding: .8rem 1rem .85rem; border-left: 6px solid var(--z); background: #fff; color: var(--body-ink); font-size: .95rem; line-height: 1.5; }
.px-ax-legend b { display: block; margin-bottom: .15rem; color: var(--navy); font-family: var(--font-heading); font-size: 1.05rem; }
.px-ax-legend .z0, .px-ax-svg .z0 { --z: #c62f3c; } .px-ax-legend .z1, .px-ax-svg .z1 { --z: #e08a2c; } .px-ax-legend .z2, .px-ax-svg .z2 { --z: #e9c046; }
.px-ax-svg { display: block; width: 100%; height: auto; }
.px-ax-svg .zz { fill: var(--z); stroke: none; } .px-ax-svg .z2 { fill-opacity: .18; stroke: #d9a92a; stroke-width: 2; stroke-dasharray: 8 6; } .px-ax-svg .z1 { fill-opacity: .32; } .px-ax-svg .z0 { fill-opacity: .42; }
.px-ax-svg .eq path { fill: none; stroke: var(--navy); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; }
.px-ax-svg .lb { fill: var(--navy); font-size: 18px; font-weight: 800; text-anchor: middle; }
.px-ax-svg.is-armed .eq path { stroke-dashoffset: 1; } .px-ax-svg.is-armed .zz, .px-ax-svg.is-armed .lb { opacity: 0; }
.px-ax-svg.is-armed.is-play .eq path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s ease-in-out; }
.px-ax-svg.is-armed.is-play .zz, .px-ax-svg.is-armed.is-play .lb { opacity: 1; transition: opacity .5s; }
.px-ax-svg.is-armed.is-play .z2 { transition-delay: 1s; } .px-ax-svg.is-armed.is-play .z1 { transition-delay: 1.5s; } .px-ax-svg.is-armed.is-play .z0, .px-ax-svg.is-armed.is-play .lb { transition-delay: 2s; }
.px-ax-legend.is-armed li { opacity: 0; transform: translateY(8px); } .px-ax-legend.is-armed.is-play li { opacity: 1; transform: none; transition: opacity .4s, transform .5s var(--ease); }
.px-ax-legend.is-armed.is-play li:nth-child(2) { transition-delay: .15s; } .px-ax-legend.is-armed.is-play li:nth-child(3) { transition-delay: .3s; }
@media (max-width: 900px) { .px-ax-in { grid-template-columns: minmax(0, 1fr); } .px-ax-svg { max-width: 34rem; } }
@media (max-width: 560px) { .px-ax-svg .lb { font-size: 26px; } }

/* S3 de l'instrument à l'ERP */
.px-py-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); align-items: center; gap: clamp(2rem, 4vw, 3.5rem); }
.px-py-head { margin-bottom: 0; }
.px-py-art { position: relative; padding: 0 3.2rem; }
.px-py-levels { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.px-py-levels li { display: grid; justify-items: center; margin: 0 auto; padding: .85rem 1rem; background: var(--navy); color: #c9d9e6; text-align: center; clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%); }
.px-py-levels .l-1 { width: 52%; background: var(--red); color: #fde3e5; } .px-py-levels .l-2 { width: 64%; background: #0a5276; } .px-py-levels .l-3 { width: 76%; background: var(--primary); } .px-py-levels .l-4 { width: 88%; background: var(--navy-3); } .px-py-levels .l-5 { width: 100%; background: var(--navy); }
.px-py-levels .n { font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.px-py-levels strong { color: #fff; font-family: var(--font-heading); font-size: 1.08rem; font-weight: 600; line-height: 1.25; }
.px-py-levels .d { font-size: .86rem; line-height: 1.35; }
.px-py-rail { position: absolute; top: .4rem; bottom: .4rem; width: 2px; background: repeating-linear-gradient(#c9d5df 0 6px, transparent 6px 12px); }
.px-py-rail.is-up { right: 1rem; } .px-py-rail.is-down { left: 1rem; }
.px-py-rail i { position: absolute; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); animation: px-py-up 3.2s linear infinite; }
.px-py-rail.is-down i { background: var(--red); animation-name: px-py-down; }
.px-py-rail i:nth-child(2) { animation-delay: .8s; } .px-py-rail i:nth-child(3) { animation-delay: 1.6s; } .px-py-rail i:nth-child(4) { animation-delay: 2.4s; }
@keyframes px-py-up { from { top: 100%; opacity: 0; } 15%, 85% { opacity: 1; } to { top: 0; opacity: 0; } }
@keyframes px-py-down { from { top: 0; opacity: 0; } 15%, 85% { opacity: 1; } to { top: 100%; opacity: 0; } }
.px-py-tag { position: absolute; top: -1.8rem; margin: 0; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.px-py-tag.is-up { right: 0; } .px-py-tag.is-down { left: 0; }
.px-py-art.is-armed .px-py-levels li { opacity: 0; transform: translateY(12px); }
.px-py-art.is-armed.is-play .px-py-levels li { opacity: 1; transform: none; transition: opacity .4s, transform .5s var(--ease); }
.px-py-art.is-armed.is-play .l-4 { transition-delay: .15s; } .px-py-art.is-armed.is-play .l-3 { transition-delay: .3s; } .px-py-art.is-armed.is-play .l-2 { transition-delay: .45s; } .px-py-art.is-armed.is-play .l-1 { transition-delay: .6s; }
@media (max-width: 900px) { .px-py-in { grid-template-columns: minmax(0, 1fr); } .px-py-head { margin-bottom: 2.2rem; } }
@media (max-width: 560px) { .px-py-art { padding: 0 2.2rem; } .px-py-levels .l-1 { width: 68%; } .px-py-levels .l-2 { width: 76%; } .px-py-levels .l-3 { width: 84%; } .px-py-levels .l-4 { width: 92%; } .px-py-rail.is-up { right: .6rem; } .px-py-rail.is-down { left: .6rem; } }
@media (prefers-reduced-motion: reduce) { .px-py-rail i { display: none; } }

/* S5 la machine à papier */
.px-pm-svg { display: block; width: 100%; height: auto; }
.px-pm-svg .eqp { fill: #f3f6f9; stroke: var(--navy); stroke-width: 3; stroke-linejoin: round; }
.px-pm-svg .drop { stroke: var(--logo-blue); stroke-width: 2; stroke-dasharray: 3 5; animation: px-pm-drop 1s linear infinite; }
@keyframes px-pm-drop { to { stroke-dashoffset: -16; } }
.px-pm-svg .rl, .px-pm-svg .dr { fill: #fff; stroke: var(--navy); stroke-width: 3; } .px-pm-svg .dr { fill: #eef3f7; }
.px-pm-svg .sp { stroke: var(--navy); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: px-pm-spin 2.4s linear infinite; }
@keyframes px-pm-spin { to { transform: rotate(360deg); } }
.px-pm-svg .reel { fill: #e7eef4; stroke: var(--navy); stroke-width: 3; } .px-pm-svg .reel-in { fill: var(--navy); }
.px-pm-svg .web { fill: none; stroke: var(--cyan); stroke-width: 4; stroke-dasharray: 14 8; stroke-linejoin: round; animation: px-pm-web 1s linear infinite; }
@keyframes px-pm-web { to { stroke-dashoffset: -22; } }
.px-pm-svg .bio { fill: none; stroke: #1f9d55; stroke-width: 3; stroke-dasharray: 8 6; } .px-pm-svg .bio-box { fill: #eaf6ef; stroke: #1f9d55; stroke-width: 2; }
.px-pm-svg .bio-t { fill: #17803f; font-size: 17px; font-weight: 800; text-anchor: middle; }
.px-pm-svg .lbl circle { fill: var(--navy); } .px-pm-svg .lbl .n { fill: #fff; font-size: 16px; font-weight: 800; text-anchor: middle; } .px-pm-svg .lbl .t { fill: var(--navy); font-size: 15px; font-weight: 700; text-anchor: middle; }
.px-pm-svg.is-armed .lbl, .px-pm-svg.is-armed .bio, .px-pm-svg.is-armed .bio-box, .px-pm-svg.is-armed .bio-t { opacity: 0; }
.px-pm-svg.is-armed.is-play .lbl, .px-pm-svg.is-armed.is-play .bio, .px-pm-svg.is-armed.is-play .bio-box, .px-pm-svg.is-armed.is-play .bio-t { opacity: 1; transition: opacity .4s; }
.px-pm-svg.is-armed.is-play .l-2 { transition-delay: .15s; } .px-pm-svg.is-armed.is-play .l-3 { transition-delay: .3s; } .px-pm-svg.is-armed.is-play .l-4 { transition-delay: .45s; } .px-pm-svg.is-armed.is-play .l-5 { transition-delay: .6s; } .px-pm-svg.is-armed.is-play .l-6 { transition-delay: .75s; }
.px-pm-svg.is-armed.is-play .bio, .px-pm-svg.is-armed.is-play .bio-box, .px-pm-svg.is-armed.is-play .bio-t { transition-delay: 1.1s; }
.px-pm-legend { display: none; }
@media (max-width: 760px) {
  .px-pm-svg .lbl .t, .px-pm-svg .bio-t { display: none; } .px-pm-svg .lbl circle { r: 24px; } .px-pm-svg .lbl .n { font-size: 26px; }
  .px-pm-legend { display: grid; gap: .45rem; margin: 1rem 0 0; padding: 0; list-style: none; counter-reset: pm; }
  .px-pm-legend li { display: flex; align-items: center; gap: .7rem; color: var(--navy); font-weight: 700; }
  .px-pm-legend li:not(.bio) { counter-increment: pm; }
  .px-pm-legend li:not(.bio)::before { content: counter(pm); display: grid; place-items: center; flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--navy); color: #fff; font-size: .85rem; }
  .px-pm-legend .bio { color: #17803f; } .px-pm-legend .bio::before { content: ""; flex: none; width: 1.8rem; height: 0; border-top: 3px dashed #1f9d55; }
}
@media (prefers-reduced-motion: reduce) { .px-pm-svg .drop, .px-pm-svg .sp, .px-pm-svg .web, .px-pc-svg .ch path { animation: none; } }
/* les manomètres du sas à droite du titre (son image Flow n° 20, son accord du 2026-10-28) : la photo commence au grand titre et
   finit à la dernière ligne du texte ; un cadre aux couleurs de PBE (un aplat bleu glacier décalé, le filet P·B·E dessous) */
.px-pc-head.has-ph { display: grid; grid-template-columns: minmax(0, 40rem) minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 3.5rem); max-width: none; }
.px-pc-head.has-ph > :not(figure) { grid-column: 1; }
.px-pc-ph { position: relative; grid-column: 2; grid-row: 2 / span 2; margin: 0 .9rem 0 0; }
.px-pc-ph::before { content: ""; position: absolute; inset: .9rem -.9rem -.9rem .9rem; background: #e3f2fa; }
.px-pc-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 35% 50%; }
.px-pc-ph::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, #00aeef 0 33.3%, var(--red) 33.3% 66.6%, #006692 66.6%); }
@media (min-width: 1100px) { .px-pc-head.has-ph { grid-template-columns: minmax(0, 46rem) minmax(0, 1fr); } }
@media (max-width: 1000px) {
  .px-pc-head.has-ph { grid-template-columns: minmax(0, 1fr); }
  .px-pc-ph { grid-column: 1; grid-row: auto; aspect-ratio: 16 / 9; max-width: 40rem; margin-top: 1.4rem; }
}
/* <<< scènes des secteurs */

/* >>> cannabis photos ancien site */
/* Page Cannabis : deux photos de l'ancien site (cannabis-photos-ancien.cjs, sa demande du 2026-10-28) */
.px-grow-head.has-ph { display: grid; grid-template-columns: minmax(0, 38rem) minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 3.5rem); max-width: none; }
.px-grow-head.has-ph > :not(figure) { grid-column: 1; }
.px-grow-ph { position: relative; grid-column: 2; grid-row: 2 / span 2; margin: .4rem .9rem 0 0; } .px-grow-head.has-ph .px-intro { margin-bottom: 0; } /* la photo commence au haut du titre et finit à la dernière ligne */
.px-grow-ph::before { content: ""; position: absolute; inset: .9rem -.9rem -.9rem .9rem; background: #e3f1e7; }
.px-grow-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.px-grow-ph::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: #1f9d55; }
.px-cq-strip { position: relative; margin: 0 0 clamp(1.6rem, 3.5vw, 2.4rem); height: clamp(8.5rem, 13vw, 11.5rem); overflow: hidden; }
.px-cq-strip img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.px-cq-strip::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #1f9d55; }
@media (max-width: 1000px) {
  .px-grow-head.has-ph { grid-template-columns: minmax(0, 1fr); }
  .px-grow-ph { grid-column: 1; grid-row: auto; aspect-ratio: 16 / 9; max-width: 40rem; margin-top: 1.4rem; }
}
/* <<< cannabis photos ancien site */

/* >>> photos en réserve */
/* Les photos en réserve de l'ancien site, en plus (pages-detail.cjs, son accord du 2026-10-28) */
/* Alimentaire : quatre étiquettes de la liste en photo, la légende reprend l'étiquette sous le filet P·B·E */
.px-tagph { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.8rem, 2vw, 1.4rem); margin: clamp(1.6rem, 3vw, 2.2rem) 0 0; padding: 0; list-style: none; }
.px-tagph figure { margin: 0; height: 100%; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); }
.px-tagph img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.px-tagph figcaption { flex: 1; position: relative; padding: .75rem .95rem; color: var(--ink); font-size: .95rem; line-height: 1.35; }
.px-tagph figcaption::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--cyan) 0 33.3%, var(--red) 33.3% 66.6%, var(--primary) 66.6%); }
.px-dprod-ph img[src*="hopital-labo-pipette"] { object-position: 40% 35%; }
/* Panneaux solaires : la photo à droite du texte d'introduction, de la première à la dernière ligne, cadre bleu glacier décalé */
.px-dintro-ph { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 3rem clamp(3rem, 6vw, 6rem); align-items: stretch; }
.px-dintro-ph .px-dintro-text p:last-child { margin-bottom: 0; }
.px-dintro-fig { position: relative; margin: 0 .9rem 0 0; min-height: 14rem; }
.px-dintro-fig::before { content: ""; position: absolute; inset: .9rem -.9rem -.9rem .9rem; background: #e6f2f9; }
.px-dintro-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
@media (max-width: 760px) {
  .px-tagph { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .px-dintro-ph { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .px-dintro-fig { aspect-ratio: 16 / 10; min-height: 0; }
}
/* <<< photos en réserve */

/* >>> projets : l’image d’abord sur téléphone */
/* Les projets, comme les fiches Expertises et Secteurs : sur téléphone, la photo puis le titre dans le même premier écran (son choix A du 2026-10-28) */
/* l’étiquette du secteur à droite du fil d’Ariane, sur la même ligne : le logo monte (sa demande du 2026-10-28 sur
   téléphone, puis sur ordinateur le même jour) */
.px-proj-split-text { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .75rem; align-content: start; }
.px-proj-split-text > * { grid-column: 1 / -1; }
.px-proj-split-text > .px-crumbs { grid-column: 1; grid-row: 1; align-self: center; }
.px-proj-split-text > .px-crumbs ol { margin: 0; flex-wrap: nowrap; white-space: nowrap; }
.px-proj-split-text > .px-art-tag { grid-column: 2; grid-row: 1; align-self: center; justify-self: end; margin: 0; white-space: nowrap; }
.px-proj-split-text > .px-art-tag + * { margin-top: 1.4rem; }
@media (max-width: 760px) {
  .px-proj-split-photo { order: -1; }
  .px-proj-split-photo img { min-height: 0; height: auto; aspect-ratio: 16 / 10; }
  .px-proj-split-text { padding-top: 1.4rem; }
  .px-proj-split-text > .px-crumbs ol { font-size: .85rem; }
  .px-proj-split-text > .px-art-tag { padding: .3rem .5rem; font-size: .7rem; letter-spacing: .03em; }
}
/* <<< projets : l’image d’abord sur téléphone */

/* >>> version anglaise */
/* Pages anglaises (/en/) : sous les lettres du mandat, le mot anglais suffit (la traduction française dessous ne sert
   qu'en français) */
html[lang^="en"] .px-epcmv .fr { display: none; }
/* <<< version anglaise */