/* ==========================================================================
   JustiComm · page « Toutes les professions » (/professions/)
   v1, 25/10/2026. Texte v3 validé par Raoudha (site-conception/contenus-v4/professions.md).
   Même esprit que les pages Réseaux sociaux, Référencement local, Publicité en ligne et Référencement dans les IA :
   sections claires et sombres en alternance, titres modestes (H1 48 px, H2 38 px), titres et textes en pleine largeur.
   Visuels propres à la page : six pages de cabinets fictifs (chacun ses couleurs et sa police, jamais celles
   de JustiComm), démonstration à onglets « d’une recherche à un premier contact », pictogrammes dessinés pour la page.
   Aucune image ni animation de l’accueil. Animations jouées une fois (la plus longue : 2,7 s), aucune boucle ;
   état final fixe si « moins d’animations » ou sans JavaScript.
   Préfixe : pro-
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Communs à la page
   -------------------------------------------------------------------------- */
.pro .titre-section { max-width: none; font-size: clamp(1.875rem, 1.5rem + 1.1vw, 2.375rem); line-height: 1.12; color: var(--titre); text-wrap: pretty; }
.pro-or { font-style: italic; color: var(--or-texte); }
.surface-sombre .pro-or, .surface-nuit .pro-or { color: var(--or-clair); }
.pro.section { padding-block: clamp(3rem, 1.75rem + 3.5vw, 5rem); }
.pro-tete { margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
.pro-tete .surtitre { margin-bottom: var(--e-4); }
.pro-chapo { margin-top: var(--e-5); font: italic 500 clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem) / 1.45 var(--f-titre); color: var(--titre); text-wrap: pretty; }
.surface-nuit .pro-chapo, .surface-sombre .pro-chapo { color: var(--creme); }
.pro-texte { margin: var(--e-5) 0 0; font-size: var(--t-corps); line-height: 1.65; color: var(--encre); text-wrap: pretty; }
.pro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.pro-actions--centre { justify-content: center; }
.pro-actions .lien-suite { margin-top: 0; }

@keyframes pro-monte { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes pro-pastille { from { opacity: 0; scale: 0.4; } to { opacity: 1; scale: 1; } }
@keyframes pro-glisse { from { opacity: 0; translate: -14px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes pro-frappe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* --------------------------------------------------------------------------
   1. Cabinets fictifs : leurs couleurs et leurs polices (aucune n’est celle de JustiComm)
   -------------------------------------------------------------------------- */
.pro-f--av  { --f-prim: #24365C; --f-acc: #A4473A; --f-pale: #F3F1EE; --f-police: Georgia, "Times New Roman", serif; }
.pro-f--no  { --f-prim: #6E2639; --f-acc: #8C6A3F; --f-pale: #F7F1EC; --f-police: "Palatino Linotype", Palatino, "Book Antiqua", serif; }
.pro-f--cj  { --f-prim: #2F3B48; --f-acc: #2D6A9F; --f-pale: #EFF3F7; --f-police: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.pro-f--cpi { --f-prim: #3A2E6E; --f-acc: #C2513B; --f-pale: #F2F0F8; --f-police: "Trebuchet MS", "Gill Sans", "Lucida Grande", sans-serif; }
.pro-f--ec  { --f-prim: #2E6B45; --f-acc: #2B2B2B; --f-pale: #EEF5F0; --f-police: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.pro-f--sy  { --f-prim: #A84C33; --f-acc: #5B4A3E; --f-pale: #F7EFE8; --f-police: Verdana, Tahoma, "DejaVu Sans", sans-serif; }

/* --------------------------------------------------------------------------
   2. Haut de page (v2, 25/10/2026) : fil d’Ariane clair ; bandeau nuit avec la photo à droite, le titre et les boutons
      sur le dégradé de gauche, les six cabinets fictifs en rangée en bas ; texte et pastilles dessous
   -------------------------------------------------------------------------- */
body:has(.pro-haut) .entete__fond { opacity: 1; }
.pro-haut { position: relative; padding: var(--h-entete) 0 clamp(2.5rem, 5vw, 4rem); background: var(--papier); }
.pro-haut__ariane .pro-ariane { margin: 0; padding-block: 0.9rem; }
.pro-ariane { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--taupe); }
.pro-ariane a { color: inherit; text-underline-offset: 3px; }
.pro-ariane [aria-current] { color: var(--encre); }

.pro-haut__bandeau { position: relative; overflow: hidden; background: var(--petrole-900); }
.pro-haut__photo { display: block; width: 100%; max-width: none; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 72% 30%; }
.pro-haut__scene { position: relative; z-index: 2; display: grid; gap: 2rem; padding-block: 1.75rem 2rem; }
.pro-haut__accueil .surtitre { display: block; font-size: 0.9375rem; letter-spacing: 0.2em; line-height: 1.5; color: var(--or-clair); }
.pro-haut__accueil .surtitre::before { display: none; }
.pro-haut__titre { margin: var(--e-4) 0 0; font: 500 clamp(2rem, 1.4rem + 1.9vw, 3rem) / 1.08 var(--f-titre); color: var(--creme); text-wrap: pretty; }
.pro-haut__bandeau .pro-or { color: var(--or-clair); }
.pro-haut__accroche { margin-top: var(--e-4); font: italic 500 clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem) / 1.3 var(--f-titre); color: var(--creme); }

@media (min-width: 40em) and (max-width: 63.99em) { .pro-haut__photo { aspect-ratio: 16 / 9; object-position: 70% 30%; } }   /* tablette : photo moins haute, le titre arrive plus vite */
/* Ordinateur : la photo à droite, fondue dans le pétrole ; le titre à gauche, la rangée des cabinets en bas */
@media (min-width: 64em) {
  .pro-haut__photo { position: absolute; top: 0; right: 0; z-index: 0; width: 64%; height: 100%; aspect-ratio: auto; object-position: 58% 28%; }
  .pro-haut__bandeau::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
      linear-gradient(0deg, rgba(2, 24, 24, 0.85) 0%, rgba(2, 24, 24, 0) 32%),
      linear-gradient(90deg, var(--petrole-900) 0%, var(--petrole-900) 36%, rgba(2, 24, 24, 0.78) 45%, rgba(2, 24, 24, 0.2) 60%, transparent 70%);
  }
  .pro-haut__scene { grid-template-rows: 1fr auto; gap: clamp(2rem, 4vw, 3rem); min-height: clamp(34rem, 46vw, 42rem); padding-block: clamp(3rem, 5vw, 4.5rem) clamp(1.5rem, 2.5vw, 2rem); }
  .pro-haut__accueil { align-self: center; max-width: min(40rem, 50%); }
}

/* Les six cabinets : six colonnes sur ordinateur, trois sur tablette, deux au téléphone */
.pro-cartes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.pro-cartes > li { display: flex; min-width: 0; }
@media (min-width: 40em) { .pro-cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64em) { .pro-cartes { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } }
.pro-carte { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; padding: 10px 12px; border-bottom: 3px solid var(--f-prim); border-radius: 10px; background: #fff; box-shadow: 0 1.25rem 2rem -1.25rem rgba(0, 0, 0, 0.85); font-family: var(--f-police); flex: 1; text-decoration: none; transition: transform 200ms var(--ease-sortie), box-shadow 200ms var(--ease-sortie); }
/* v3 : chaque cabinet est un lien vers l’onglet de son métier */
.pro-carte:hover { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--or), 0 1.5rem 2rem -1.25rem rgba(0, 0, 0, 0.9); }
.pro-carte:active { transform: translateY(-1px) scale(0.98); }
.pro-carte:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 3px; }
.pro-carte__mono { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 7px; background: var(--f-prim); font-size: 0.875rem; font-weight: 700; color: #fff; }
.pro-carte__nom { display: grid; min-width: 0; font-size: 0.8125rem; font-weight: 700; line-height: 1.25; color: var(--f-prim); }
.pro-carte__nom small { margin-top: 2px; font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; color: #55524E; }
.pro-cartes.est-visible .pro-carte { animation: pro-monte 0.55s var(--ease-sortie) calc(0.15s + var(--i) * 0.18s) both; }

/* Texte sous le bandeau */
.pro-haut__texte { margin-top: clamp(2rem, 4vw, 3rem); }
.pro-haut__intro { margin-top: var(--e-4); font-size: var(--t-corps); line-height: 1.6; color: var(--encre); text-wrap: pretty; }
.pro-haut__intro:first-child { margin-top: 0; }
@media (max-width: 479px) {   /* le grand bouton passe à la ligne au lieu de sortir de l’écran (même règle que les sections communes) */
  .pro-haut .btn-plaque.btn--grand { width: 100%; max-width: 26rem; padding-inline: 20px; padding-block: 12px; white-space: normal; text-align: center; line-height: 1.35; }
}
/* --------------------------------------------------------------------------
   3. Les six professions et la démonstration (v2, 25/10/2026 : réunies en une section, un métier à la fois)
   -------------------------------------------------------------------------- */
.pro-metiers { background: radial-gradient(ellipse 50% 70% at 85% 25%, rgba(224, 189, 142, 0.13), transparent 70%), var(--petrole-profond); }
.pro-cles { display: grid; gap: var(--e-5) var(--gouttiere); margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
@media (min-width: 48em) { .pro-cles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pro-cle { display: grid; gap: var(--e-2); padding-left: 16px; border-left: 2px solid var(--or-400); }
.pro-cles .pro-cle__nom { margin: 0; font: 600 0.8125rem / 1.4 var(--f-texte); letter-spacing: 0.16em; text-transform: uppercase; color: var(--or-clair); }
.pro-cles .pro-cle__texte { margin: 0; font: italic 500 clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem) / 1.45 var(--f-titre); color: var(--creme); text-wrap: pretty; }

/* Le texte du métier, à gauche de la démonstration */
.pro-ex__texte { display: flex; flex-direction: column; }
.pro-metier__picto { width: 44px; height: 44px; margin-bottom: var(--e-4); fill: none; stroke: var(--or); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pro-metier__titre { margin: 0 0 var(--e-4); font: 500 clamp(1.625rem, 1.4rem + 0.7vw, 2rem) / 1.18 var(--f-titre); color: var(--creme); text-wrap: pretty; }
.pro-metier__promesse { display: block; }
.pro-metier__promesse::first-letter { text-transform: uppercase; }
.pro-metier__nom { display: block; margin-bottom: 8px; font: 600 0.875rem / 1.4 var(--f-texte); letter-spacing: 0.12em; text-transform: uppercase; color: var(--or-clair); }
.pro-ex__texte p { margin: 0; font-size: var(--t-corps); line-height: 1.6; color: var(--creme-doux); text-wrap: pretty; }
.pro-ex__texte p + p { margin-top: var(--e-3); }
.pro-metier__lien { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; min-height: 44px; margin-top: var(--e-5); font-size: 1.0625rem; font-weight: 500; color: var(--or-clair); text-decoration: underline; text-decoration-color: rgba(224, 189, 142, 0.5); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.pro-metier__lien svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform 200ms var(--ease-sortie); }
.pro-metier__lien:hover svg, .pro-metier__lien:focus-visible svg { transform: translateX(4px); }
.pro-metier__lien:hover { text-decoration-color: var(--or-clair); }
.pro-metier__lien:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   4. Les onglets et la démonstration : d’une recherche à un premier contact
   -------------------------------------------------------------------------- */
.pro-demo__boite { scroll-margin-top: 1.25rem; }   /* s’ajoute au scroll-padding de theme.css : compense le décalage de l’apparition au défilement (contre-contrôle de Pauline) */
.pro-demo__choix { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.pro-demo__legende { width: 100%; margin: 0 0 12px; padding: 0; font: italic 500 clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem) / 1.25 var(--f-titre); color: var(--creme); }
.pro-puce { position: relative; cursor: pointer; }
.pro-puce input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pro-puce span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border: 1px solid rgba(224, 189, 142, 0.45); border-radius: 999px; font-size: 0.9375rem; color: var(--creme); transition: background-color 200ms var(--ease-sortie), border-color 200ms var(--ease-sortie), color 200ms var(--ease-sortie), transform 150ms var(--ease-sortie); }
.pro-puce:hover span { border-color: var(--or); }
.pro-puce:active span { transform: scale(0.97); }
.pro-puce input:checked + span { background: var(--or); border-color: var(--or); font-weight: 500; color: var(--petrole-900); }
.pro-puce input:focus-visible + span { outline: 2px solid var(--or-clair); outline-offset: 3px; }

.pro-ex { display: none; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; margin-top: clamp(1.75rem, 3.5vw, 2.5rem); padding-top: clamp(1.75rem, 3.5vw, 2.5rem); border-top: 1px solid rgba(224, 189, 142, 0.22); }
@media (min-width: 64em) { .pro-ex { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } .pro-ex__texte { position: sticky; top: calc(var(--h-entete) + 1.5rem); } }
.pro-demo__boite:has([value="av"]:checked) [data-ex="av"],
.pro-demo__boite:has([value="no"]:checked) [data-ex="no"],
.pro-demo__boite:has([value="cj"]:checked) [data-ex="cj"],
.pro-demo__boite:has([value="cpi"]:checked) [data-ex="cpi"],
.pro-demo__boite:has([value="ec"]:checked) [data-ex="ec"],
.pro-demo__boite:has([value="sy"]:checked) [data-ex="sy"] { display: grid; }
@supports not selector(:has(*)) {   /* navigateurs anciens : les six exemples à la suite */
  .pro-demo__choix { display: none; }
  .pro-ex { display: grid; }
}

/* L’écran : la recherche, puis la page du cabinet fictif */
.pro-ex__ecran { position: relative; margin: 0; }
.pro-ex__recherche { display: flex; align-items: center; gap: 10px; width: min(100%, 30rem); margin: 0 0 14px; padding: 11px 18px; border-radius: 999px; background: #fff; box-shadow: 0 1rem 2rem -1.25rem rgba(0, 0, 0, 0.7); font-size: 0.9375rem; color: var(--encre); }
.pro-ex__recherche svg { flex: none; width: 17px; height: 17px; fill: none; stroke: var(--taupe); stroke-width: 2.2; stroke-linecap: round; }
.pro-ex__recherche span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pro-page { overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 2.5rem 4rem -1.5rem rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(224, 189, 142, 0.25); font-family: var(--f-police); color: #1D1D1F; }
.pro-page__barre { display: flex; align-items: center; gap: 14px; margin: 0; padding: 9px 14px; background: #EFECE7; font: 0.75rem / 1.2 var(--f-texte); color: #55524E; }
.pro-page__points { display: flex; gap: 5px; }
.pro-page__points i { width: 9px; height: 9px; border-radius: 50%; background: #D6D0C6; }
.pro-page__url { flex: 1; min-width: 0; padding: 4px 12px; border-radius: 999px; background: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pro-page__tete { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 18px; background: var(--f-prim); color: #fff; }
.pro-page__mono { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border: 1.5px solid rgba(255, 255, 255, 0.7); border-radius: 7px; font-size: 0.875rem; font-weight: 700; }
.pro-page__nom { display: grid; flex: 1; font-size: 0.9375rem; font-weight: 700; line-height: 1.2; }
.pro-page__nom small { font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.06em; opacity: 0.85; }
.pro-page__menu { display: grid; gap: 3px; }
.pro-page__menu i { width: 16px; height: 2px; border-radius: 1px; background: #fff; }
.pro-page__corps { display: grid; gap: 12px; padding: 18px; background: var(--f-pale); }
.pro-page__bloc { position: relative; padding: 2px 0 0 26px; }
.pro-page__bloc--cadre { padding: 12px 14px 12px 40px; border-radius: 10px; background: #fff; box-shadow: 0 0.4rem 1rem -0.8rem rgba(0, 0, 0, 0.4); }
.pro-page__bloc--contact { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-left: 40px; }
.pro-ex .pro-page p, .pro-ex .pro-page ul { margin: 0; }   /* plus fort que « .section p + p » (accueil-v4.css) */
.pro-page__titre { font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem); font-weight: 700; line-height: 1.25; color: var(--f-prim); text-wrap: pretty; }
.pro-page__texte { margin-top: 6px !important; font-size: 0.875rem; line-height: 1.5; color: #3B3936; }
.pro-page__sous { margin-bottom: 6px !important; font-size: 0.9375rem; font-weight: 700; color: var(--f-prim); }
.pro-page__liste { display: grid; gap: 4px; padding: 6px 0 0; list-style: none; font-size: 0.875rem; color: #3B3936; }
.pro-page__liste li::before { content: "›"; margin-right: 8px; font-weight: 700; color: var(--f-acc); }
.pro-page__etapes { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 0; list-style: none; counter-reset: etape; }
.pro-page__etapes li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border: 1px solid #E2DED8; border-radius: 999px; background: #fff; font-size: 0.8125rem; color: #3B3936; counter-increment: etape; }
.pro-page__etapes li::before { content: counter(etape); display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--f-prim); font-size: 0.6875rem; font-weight: 700; color: #fff; }
.pro-page__bouton { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 16px; border-radius: 7px; background: var(--f-acc); font-size: 0.875rem; font-weight: 700; color: #fff; }
.pro-page__tel { font-size: 0.875rem; font-weight: 600; color: var(--f-prim); }
.pro-page__champs { display: flex; flex-wrap: wrap; gap: 6px; }
.pro-page__champs span { padding: 7px 12px; min-width: 7.5rem; border: 1px solid #D9D5CF; border-radius: 6px; background: #fff; font-size: 0.8125rem; color: #6B6762; }
.pro-page__mention { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-top: 10px; border-top: 1px solid rgba(0, 0, 0, 0.08); font: 0.75rem / 1.4 var(--f-police); color: #55524E; }
.pro-page__bloc-marque { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid #8E8A84; border-radius: 3px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #55524E; }
/* emplacement neutre de la Marianne : l’emblème officiel n’est pas reproduit (relecture de Thémis, 25/10/2026) */
.pro-page__embleme { display: inline-block; width: 10px; height: 13px; border-radius: 2px; background: linear-gradient(90deg, #A9A6A0 0 33%, #D2CFCA 33% 66%, #A9A6A0 66%); }

/* Repères numérotés (charte JustiComm : annotations) */
.pro-repere { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--or); box-shadow: 0 0 0 4px rgba(224, 189, 142, 0.3); font: 600 0.75rem / 1 var(--f-texte); color: var(--petrole-900); }
.pro-page__bloc--cadre .pro-repere { top: 12px; left: 10px; }
.pro-page__bloc--contact .pro-repere { top: 50%; left: 6px; margin-top: -12px; }

/* Les annotations */
.pro-ex__notes { display: grid; gap: clamp(1rem, 2vw, 1.5rem); margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0; padding: 0; list-style: none; }
@media (min-width: 48em) { .pro-ex__notes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pro-ex__notes li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.pro-note__num { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--or); border-radius: 50%; font: 600 0.875rem / 1 var(--f-texte); color: var(--or-clair); }
.pro-ex__notes p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--creme-doux); text-wrap: pretty; }
.pro-ex__notes b { display: block; margin-bottom: 4px; font: italic 500 clamp(1.1875rem, 1.1rem + 0.3vw, 1.375rem) / 1.25 var(--f-titre); color: var(--creme); }

/* À chaque onglet : la page arrive, puis les repères et les annotations un à un (1,4 s) */
.pro-ex .pro-ex__texte { animation: pro-glisse 0.45s var(--ease-sortie) both; }
.pro-ex .pro-page { animation: pro-monte 0.5s var(--ease-sortie) 0.1s both; }
.pro-ex .pro-ex__recherche span { animation: pro-frappe 0.6s steps(24, end) 0.1s both; }
.pro-ex .pro-repere { animation: pro-pastille 0.35s var(--ease-sortie) both; }
.pro-ex .pro-page__bloc:nth-of-type(1) .pro-repere { animation-delay: 0.45s; }
.pro-ex .pro-page__bloc:nth-of-type(2) .pro-repere { animation-delay: 0.7s; }
.pro-ex .pro-page__bloc:nth-of-type(3) .pro-repere { animation-delay: 0.95s; }
.pro-ex .pro-ex__notes li { animation: pro-glisse 0.45s var(--ease-sortie) both; }
.pro-ex .pro-ex__notes li:nth-child(1) { animation-delay: 0.5s; }
.pro-ex .pro-ex__notes li:nth-child(2) { animation-delay: 0.75s; }
.pro-ex .pro-ex__notes li:nth-child(3) { animation-delay: 1s; }

@media (max-width: 39.99em) {
  .pro-puce span { padding: 6px 13px; font-size: 0.875rem; }
  .pro-page__corps { padding: 14px; }
  .pro-page__bloc--cadre, .pro-page__bloc--contact { padding-left: 36px; }
  .pro-ex__recherche { padding: 9px 14px; font-size: 0.875rem; }
}

/* Bande photo pleine largeur : l’entrée d’immeuble et ses plaques (léger recul à l’apparition) */
.pro-respiration { position: relative; height: clamp(14rem, 32vw, 28rem); margin: 0; overflow: hidden; background: var(--petrole-900); }
.pro-respiration__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 72% 36%; transition: scale 1.4s var(--ease-sortie); }
.js .pro-respiration[data-reveal]:not(.est-visible) .pro-respiration__img { scale: 1.06; }

/* --------------------------------------------------------------------------
   5. Votre objectif d’abord
   -------------------------------------------------------------------------- */
.pro-objectifs__grille { display: grid; gap: var(--gouttiere); }
@media (min-width: 40em) { .pro-objectifs__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72em) { .pro-objectifs__grille { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pro-objectif { display: flex; flex-direction: column; }
.pro-objectif__titre { margin: var(--e-5) 0 var(--e-2); font: 500 clamp(1.375rem, 1.25rem + 0.35vw, 1.5625rem) / 1.2 var(--f-titre); color: var(--petrole); text-wrap: balance; }
.pro-objectif > p { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--encre); text-wrap: pretty; }

/* Les scènes (v3, 25/10/2026) : un écran de cabinet fictif par objectif, joué une fois quand la carte arrive */
.pro-scene { position: relative; margin: 0; }
.pro-scene__fond { position: relative; height: 17.5rem; overflow: hidden; border-radius: 6px; background: radial-gradient(circle, rgba(10, 57, 58, 0.09) 1px, transparent 1.5px) 0 0 / 18px 18px, linear-gradient(160deg, var(--creme), var(--lin)); box-shadow: inset 0 0 0 1px #DED6C8; }
.pro-sc__mono { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 6px; background: var(--f-prim); font: 700 0.75rem / 1 var(--f-police); color: #fff; }
@keyframes pro-epingle { 0% { opacity: 0; translate: 0 -26px; } 70% { opacity: 1; translate: 0 3px; } 100% { opacity: 1; translate: 0 0; } }
@keyframes pro-appui { 0%, 100% { scale: 1; } 45% { scale: 0.94; } }
@keyframes pro-onde { 0% { opacity: 0.55; scale: 0.2; } 100% { opacity: 0; scale: 2.6; } }
@keyframes pro-sortie { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pro-apparait { from { opacity: 0; } to { opacity: 1; } }

/* 1. Être trouvé : la carte, la recherche, la fiche de l’office */
.pro-sc1__carte { position: absolute; inset: 0; background: #E8E6DF; }
.pro-sc1__mer { position: absolute; right: -10%; bottom: -30%; width: 70%; height: 75%; border-radius: 50% 0 0 0; background: #BFD3D6; }
.pro-sc1__route { position: absolute; display: block; height: 7px; border-radius: 4px; background: #fff; box-shadow: 0 0 0 1px #D9D5CC; }
.pro-sc1__route--a { top: 38%; left: -10%; width: 120%; rotate: -8deg; }
.pro-sc1__route--b { top: 10%; left: 42%; width: 70%; rotate: 72deg; transform-origin: left; }
.pro-sc1__route--c { top: 62%; left: -5%; width: 60%; rotate: 14deg; }
.pro-sc1__epingle { position: absolute; top: 36%; left: 56%; width: 22px; height: 22px; margin: -22px 0 0 -11px; border-radius: 50% 50% 50% 0; background: #8B2F3E; rotate: -45deg; box-shadow: 0 4px 8px -3px rgba(0, 0, 0, 0.45); }
.pro-sc1__epingle::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #fff; }
.pro-sc1__recherche { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; border-radius: 999px; background: #fff; box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.6); font: 0.8125rem / 1.2 var(--f-texte); color: var(--encre); }
.pro-sc1__recherche svg { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--taupe); stroke-width: 2.2; stroke-linecap: round; }
.pro-sc1__recherche span { min-width: 0; overflow: hidden; white-space: nowrap; }
.pro-sc1__fiche { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 12px; border-radius: 10px; background: #fff; box-shadow: 0 1rem 1.5rem -1rem rgba(0, 0, 0, 0.55); font-family: var(--f-police); }
.pro-objectif .pro-sc1__fiche p { margin: 0; }
.pro-sc1__nom { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 700; line-height: 1.2; color: var(--f-prim); }
.pro-sc1__nom small { display: block; font-size: 0.6875rem; font-weight: 400; color: #55524E; }
.pro-objectif .pro-sc1__horaires { margin-top: 6px; font-size: 0.75rem; color: #3B3936; }
.pro-sc1__horaires b { color: #2E6B45; }
.pro-objectif .pro-sc1__boutons { display: flex; gap: 6px; margin-top: 10px; }
.pro-sc1__boutons span { flex: 1; padding: 6px 4px; border: 1px solid #D9D5CF; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; text-align: center; color: var(--f-prim); }
.pro-sc1__boutons span:first-child { border-color: var(--f-prim); background: var(--f-prim); color: #fff; }
.pro-objectif--trouve.est-visible .pro-sc1__recherche span { animation: pro-frappe 0.8s steps(22, end) 0.2s both; }
.pro-objectif--trouve.est-visible .pro-sc1__epingle { animation: pro-epingle 0.5s var(--ease-sortie) 1s both; }
.pro-objectif--trouve.est-visible .pro-sc1__fiche { animation: pro-monte 0.5s var(--ease-sortie) 1.3s both; }
.pro-objectif--trouve.est-visible .pro-sc1__boutons span { animation: pro-pastille 0.35s var(--ease-sortie) both; }
.pro-objectif--trouve.est-visible .pro-sc1__boutons span:nth-child(1) { animation-delay: 1.8s; }
.pro-objectif--trouve.est-visible .pro-sc1__boutons span:nth-child(2) { animation-delay: 1.95s; }
.pro-objectif--trouve.est-visible .pro-sc1__boutons span:nth-child(3) { animation-delay: 2.1s; }

/* Téléphone des scènes 2 et 4 (générique : ni marque ni logo) */
.pro-tel { position: absolute; top: 12px; left: 50%; width: 13.5rem; height: 16.75rem; margin-left: -6.75rem; padding: 6px; border-radius: 26px; background: linear-gradient(180deg, #2B3433, #121818); box-shadow: 0 1.5rem 2.5rem -1.25rem rgba(0, 0, 0, 0.6); font-family: var(--f-police); }
.pro-tel > * { position: relative; }
.pro-tel::before { content: ""; position: absolute; inset: 6px; border-radius: 20px; background: #FAF8F4; }
.pro-objectif .pro-tel p { margin: 0; }
.pro-tel__etat { display: flex; align-items: center; justify-content: space-between; padding: 6px 14px 2px; font: 0.625rem / 1 var(--f-texte); color: var(--encre); }
.pro-tel__etat b { font-weight: 600; }
.pro-tel__etat span { display: flex; gap: 2px; align-items: flex-end; }
.pro-tel__etat i { display: block; width: 2px; border-radius: 1px; background: var(--encre); }
.pro-tel__etat i:nth-child(1) { height: 4px; } .pro-tel__etat i:nth-child(2) { height: 6px; } .pro-tel__etat i:nth-child(3) { height: 8px; }
.pro-tel__tete { display: flex; align-items: center; gap: 7px; margin: 4px 0 0 !important; padding: 8px 10px; background: var(--f-prim); font-size: 0.6875rem; font-weight: 700; color: #fff; }
.pro-tel__tete .pro-sc__mono { width: 20px; height: 20px; border: 1px solid rgba(255, 255, 255, 0.7); font-size: 0.625rem; }
.pro-tel__tete > span:last-child { display: grid; line-height: 1.2; }
.pro-tel__tete small { font-size: 0.5625rem; font-weight: 400; opacity: 0.85; }
.pro-tel__corps { padding: 12px; }
.pro-objectif .pro-tel__titre { font-size: 0.9375rem; font-weight: 700; line-height: 1.25; color: var(--f-prim); }
.pro-objectif .pro-tel__lignes { display: grid; gap: 5px; margin-top: 10px; }
.pro-tel__lignes i { display: block; height: 5px; border-radius: 3px; background: #E3DFD8; }
.pro-tel__lignes i:nth-child(2) { width: 88%; } .pro-tel__lignes i:nth-child(3) { width: 62%; }

/* 2. Donner envie de vous appeler : le bouton touché, la demande envoyée */
.pro-objectif .pro-sc2__bouton { position: relative; display: block; margin-top: 14px; padding: 9px 10px; border-radius: 8px; background: var(--f-acc); font-size: 0.75rem; font-weight: 700; text-align: center; color: #fff; }
.pro-sc2__doigt { position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); opacity: 0; }
.pro-objectif .pro-sc2__confirme { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 7px; padding: 9px 10px; border-radius: 10px; background: #fff; box-shadow: 0 0.75rem 1.25rem -0.75rem rgba(0, 0, 0, 0.45); font-size: 0.6875rem; font-weight: 600; line-height: 1.3; color: var(--f-prim); }
.pro-sc2__confirme span { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: #2E6B45; font-size: 0.6875rem; color: #fff; }
.pro-objectif--appel.est-visible .pro-tel { animation: pro-monte 0.55s var(--ease-sortie) 0.1s both; }
.pro-objectif--appel.est-visible .pro-sc2__bouton { animation: pro-appui 0.4s ease 1.1s both; }
.pro-objectif--appel.est-visible .pro-sc2__doigt { animation: pro-onde 0.7s ease-out 1.1s both; }
.pro-objectif--appel.est-visible .pro-sc2__confirme { animation: pro-monte 0.45s var(--ease-sortie) 1.7s both; }

/* 3. Faire vivre votre présence : la publication validée, la semaine qui se coche */
.pro-objectif--vivre .pro-scene__fond { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 14px; }
.pro-sc3__post { position: relative; padding: 12px; border-radius: 10px; background: #fff; box-shadow: 0 1rem 1.5rem -1rem rgba(0, 0, 0, 0.5); font-family: var(--f-police); }
.pro-objectif .pro-sc3__post p { margin: 0; }
.pro-sc3__tete { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 700; line-height: 1.2; color: var(--f-prim); }
.pro-sc3__tete small { display: block; font-size: 0.625rem; font-weight: 400; color: #55524E; }
.pro-objectif .pro-sc3__texte { margin-top: 8px; font-size: 0.8125rem; font-weight: 600; line-height: 1.3; color: #1D1D1F; }
.pro-objectif .pro-sc3__visuel { position: relative; height: 3.5rem; margin-top: 8px; border-radius: 6px; background: linear-gradient(135deg, var(--f-prim), #6F5FB0); }
.pro-sc3__visuel i { position: absolute; left: 10px; bottom: 9px; width: 45%; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.75); }
.pro-objectif .pro-sc3__etat { position: relative; margin-top: 10px; font-size: 0.6875rem; font-weight: 700; }
.pro-sc3__attente { position: absolute; left: 0; top: 0; padding: 4px 9px; border-radius: 999px; background: #F3E9D8; color: #7A5418; opacity: 0; }
.pro-sc3__valide { display: inline-block; padding: 4px 9px; border-radius: 999px; background: #E3F0E7; color: #2E6B45; }
.pro-objectif .pro-sc3__libelle { margin: 0 0 6px; font: 600 0.625rem / 1 var(--f-texte); letter-spacing: 0.12em; text-transform: uppercase; color: #55524E; }
.pro-sc3__semaine { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.pro-sc3__semaine li { position: relative; padding: 6px 0; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px #DED6C8; font: 600 0.6875rem / 1 var(--f-texte); text-align: center; color: var(--taupe); }
.pro-sc3__semaine .est-coche { background: var(--petrole); box-shadow: none; color: var(--creme); }
.pro-sc3__semaine .est-coche::after { content: "✓"; display: inline-block; margin-left: 3px; color: var(--or); }
.pro-objectif--vivre.est-visible .pro-sc3__post { animation: pro-monte 0.55s var(--ease-sortie) 0.1s both; }
.pro-objectif--vivre.est-visible .pro-sc3__attente { animation: pro-sortie 1.4s linear both; }
.pro-objectif--vivre.est-visible .pro-sc3__valide { animation: pro-apparait 0.35s ease 1.3s both; }
@keyframes pro-coche { from { background-color: #fff; color: var(--taupe); } to { background-color: var(--petrole); color: var(--creme); } }
.pro-objectif--vivre.est-visible .pro-sc3__semaine .est-coche { animation: pro-coche 0.3s ease 1.8s both; }
.pro-objectif--vivre.est-visible .pro-sc3__semaine .est-coche::after { animation: pro-pastille 0.35s var(--ease-sortie) 1.8s both; }
.pro-objectif--vivre.est-visible .pro-sc3__semaine .est-coche:nth-child(4), .pro-objectif--vivre.est-visible .pro-sc3__semaine .est-coche:nth-child(4)::after { animation-delay: 2.1s; }

/* 4. Gagner du temps : 21 h 47, l’assistant répond et transmet */
.pro-sc4__fil { display: grid; gap: 4px; padding: 5px 9px; }
.pro-objectif .pro-sc4__moi { justify-self: end; max-width: 90%; padding: 7px 9px; border-radius: 12px 12px 3px 12px; background: var(--f-prim); font-size: 0.6875rem; line-height: 1.35; color: #fff; }
.pro-objectif .pro-sc4__ia { max-width: 97%; padding: 7px 9px; border-radius: 3px 12px 12px 12px; background: #fff; box-shadow: 0 0.4rem 0.8rem -0.6rem rgba(0, 0, 0, 0.4); font-size: 0.6875rem; line-height: 1.35; color: #1D1D1F; }
.pro-objectif .pro-sc4__transmis { justify-self: center; padding: 4px 10px; border-radius: 999px; background: #E3F0E7; font-size: 0.625rem; font-weight: 700; color: #2E6B45; }
.pro-objectif--temps.est-visible .pro-tel { animation: pro-monte 0.55s var(--ease-sortie) 0.1s both; }
.pro-objectif--temps.est-visible .pro-sc4__moi { animation: pro-monte 0.4s var(--ease-sortie) 0.6s both; }
.pro-objectif--temps.est-visible .pro-sc4__ia--1 { animation: pro-monte 0.4s var(--ease-sortie) 1.2s both; }
.pro-objectif--temps.est-visible .pro-sc4__ia--2 { animation: pro-monte 0.4s var(--ease-sortie) 1.8s both; }
.pro-objectif--temps.est-visible .pro-sc4__transmis { animation: pro-pastille 0.35s var(--ease-sortie) 2.35s both; }

.pro-liens { display: flex; flex-wrap: wrap; gap: 8px; margin: auto 0 0; padding: var(--e-5) 0 0; list-style: none; }
.pro-liens a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1px solid #C9BFAE; border-radius: 999px; background: var(--papier); font-size: 0.9375rem; color: var(--petrole); text-decoration: none; transition: background-color 200ms var(--ease-sortie), border-color 200ms var(--ease-sortie), color 200ms var(--ease-sortie); }
.pro-liens a::after { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--fleche) center / contain no-repeat; mask: var(--fleche) center / contain no-repeat; transition: transform 200ms var(--ease-sortie); }
.pro-liens a:hover, .pro-liens a:focus-visible { border-color: var(--petrole); background: var(--petrole); color: var(--creme); }
.pro-liens a:hover::after, .pro-liens a:focus-visible::after { transform: translateX(3px); }
.pro-liens a:focus-visible { outline: 2px solid var(--petrole); outline-offset: 3px; }
/* liens de services : une ligne de liens discrets sous le texte, plus de pastilles empilées */
.pro-objectif .pro-liens { gap: 2px 18px; margin: 0; padding-top: var(--e-4); }
.pro-objectif .pro-liens a { min-height: 32px; padding: 0; border: 0; border-radius: 0; background: none; font-size: 0.9375rem; font-weight: 500; color: var(--petrole); text-decoration: underline; text-decoration-color: var(--or-400); text-underline-offset: 4px; }
.pro-objectif .pro-liens a::after { width: 12px; height: 12px; }
.pro-objectif .pro-liens a:hover, .pro-objectif .pro-liens a:focus-visible { background: none; color: var(--petrole); text-decoration-color: var(--petrole); }
/* Téléphone : les quatre scènes en carrousel qu’on fait glisser, avec des points (v3, 25/10/2026) */
.pro-objectifs__glisser, .pro-objectifs__points { display: none; }
@media (max-width: 39.99em) {
  .pro-objectifs__glisser { display: block; margin: 0 0 var(--e-3); font-size: 0.875rem; font-style: italic; color: var(--taupe); }
  .pro-objectifs__grille { grid-auto-flow: column; grid-auto-columns: 84%; grid-template-columns: none; gap: 14px; margin-inline: calc(-1 * var(--marge)); padding: 4px var(--marge) 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--marge); scrollbar-width: none; }
  .pro-objectifs__grille::-webkit-scrollbar { display: none; }
  .pro-objectif { scroll-snap-align: start; }
  .pro-objectifs__points { display: flex; justify-content: center; gap: 8px; margin-top: var(--e-3); }
  .pro-objectifs__points i { width: 8px; height: 8px; border-radius: 50%; background: #CFC6B6; transition: background-color 200ms ease, width 200ms ease; }
  .pro-objectifs__points i.est-actif { width: 22px; border-radius: 4px; background: var(--petrole); }
}
.pro-tous-services { margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0; }

/* --------------------------------------------------------------------------
   6. Encadré fort : une communication que vous publiez en confiance
   -------------------------------------------------------------------------- */
.pro-confiance { background: radial-gradient(ellipse 55% 90% at 50% 0%, rgba(224, 189, 142, 0.14), transparent 70%), var(--petrole); }
.pro-confiance__contenu { text-align: center; }
.pro-confiance__picto { width: 46px; height: 46px; margin: 0 auto var(--e-5); fill: none; stroke: var(--or); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pro-confiance__titre { margin: 0; font: 500 clamp(1.625rem, 1.3rem + 1vw, 2.125rem) / 1.2 var(--f-titre); color: var(--creme); text-wrap: balance; }
.pro-confiance__texte { margin: var(--e-5) 0 0; font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem); line-height: 1.6; color: var(--creme-doux); text-wrap: pretty; }

/* --------------------------------------------------------------------------
   7. Méthode et audit offert (v2, 25/10/2026 : réunis, la méthode à gauche, l’audit dans une carte à droite)
   -------------------------------------------------------------------------- */
.pro-suite__grille { display: grid; gap: clamp(2.25rem, 5vw, 4rem); align-items: start; }
@media (min-width: 64em) { .pro-suite__grille { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.pro-suite__methode .surtitre { margin-bottom: var(--e-4); }
.pro-etapes { display: grid; gap: var(--e-5); margin: clamp(1.5rem, 3vw, 2rem) 0 0; padding: 0; list-style: none; }
@media (min-width: 40em) { .pro-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pro-etape { padding-top: var(--e-4); border-top: 1px solid var(--or-400); }
.pro-etape__num { display: block; font: italic 500 2rem / 1 var(--f-titre); color: var(--or-texte); }
.pro-etape__titre { margin: var(--e-3) 0 var(--e-2); font: 500 clamp(1.375rem, 1.25rem + 0.45vw, 1.625rem) / 1.2 var(--f-titre); color: var(--petrole); }
.pro-etape p { margin: 0; font-size: var(--t-corps); line-height: 1.55; color: var(--encre); }
.pro-engagements { display: grid; gap: var(--e-3); margin: clamp(1.75rem, 3.5vw, 2.25rem) 0 0; padding: var(--e-5) 0 0; list-style: none; border-top: 1px solid #D6CFC1; }
.pro-engagements li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; font-size: var(--t-corps); line-height: 1.5; color: var(--encre); }
.pro-engagements li::before { content: "✓"; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-top: 0.1em; border-radius: 50%; background: var(--petrole); font-size: 0.75rem; color: var(--or); }

/* La carte de l’audit offert */
.pro-audit { padding: clamp(1.75rem, 3.5vw, 2.75rem); border-radius: 4px; background: radial-gradient(ellipse 70% 60% at 85% 0%, rgba(224, 189, 142, 0.16), transparent 70%), var(--petrole); box-shadow: var(--ombre-panneau); }
@media (min-width: 64em) { .pro-audit { position: sticky; top: calc(var(--h-entete) + 1.5rem); } }
.pro-audit .surtitre { margin-bottom: var(--e-4); color: var(--creme-doux); }
.pro-audit__titre { margin: 0; font: 500 clamp(1.75rem, 1.45rem + 1vw, 2.25rem) / 1.15 var(--f-titre); color: var(--creme); }
.pro-audit__questions { display: grid; gap: 10px; margin: var(--e-5) 0 0; padding: 0; list-style: none; }
.pro-audit__questions li { position: relative; padding: 12px 14px 12px 52px; border: 1px solid rgba(224, 189, 142, 0.28); border-radius: 4px 16px 16px 4px; background: rgba(238, 234, 225, 0.05); font: italic 500 clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem) / 1.35 var(--f-titre); color: var(--creme); }
.pro-audit__questions li::before { content: "?"; position: absolute; top: 50%; left: 14px; display: grid; place-items: center; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--or); font: 600 0.875rem / 1 var(--f-texte); font-style: normal; color: var(--petrole-900); }
.pro-audit.est-visible .pro-audit__questions li { animation: pro-glisse 0.5s var(--ease-sortie) calc(0.2s + var(--i) * 0.2s) both; }
.pro-audit .pro-audit__texte { margin: var(--e-5) 0 0; font-size: var(--t-corps); line-height: 1.6; color: var(--creme-doux); text-wrap: pretty; }
.pro-audit__pastilles { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: var(--e-5) 0 0; padding: 0; list-style: none; font-size: 1rem; color: var(--creme); }
.pro-audit__pastilles li { display: inline-flex; align-items: center; gap: 0.55rem; }
.pro-audit__pastilles li::before { content: "✓"; display: grid; place-items: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--or); font-size: 0.6875rem; color: var(--petrole-900); }

/* --------------------------------------------------------------------------
   9. Bandeau final
   -------------------------------------------------------------------------- */
.pro-final { background: radial-gradient(ellipse 50% 80% at 50% 100%, rgba(224, 189, 142, 0.16), transparent 70%), var(--petrole-profond); }
.pro-final__contenu { text-align: center; }
.pro-final__repere { display: block; width: 10px; height: 10px; margin: 0 auto var(--e-5); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFF1D8, var(--or) 55%, var(--bronze)); box-shadow: 0 0 18px 4px rgba(224, 189, 142, 0.35); }
.pro-final__titre { margin: 0; font: 500 clamp(1.875rem, 1.5rem + 1.1vw, 2.375rem) / 1.15 var(--f-titre); color: var(--creme); }
.pro-final__texte { margin: var(--e-4) 0 0; font-size: var(--t-corps); line-height: 1.6; color: var(--creme-doux); text-wrap: pretty; }
/* Avec la photo du bandeau final (image 3, 25/10/2026) : la photo en fond, assombrie ; sur ordinateur, elle se range à droite
   et se fond dans le pétrole, comme en haut de page, pour laisser le texte et les boutons à gauche */
.pro-final:has(.pro-final__fond) { position: relative; overflow: hidden; padding-block: clamp(5rem, 10vw, 7.5rem); background: var(--petrole-900); }
.pro-final__fond { position: absolute; inset: 0; z-index: 0; width: 100%; max-width: none; height: 100%; object-fit: cover; object-position: 60% 30%; }
.pro-final:has(.pro-final__fond)::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(2, 24, 24, 0.9), rgba(2, 24, 24, 0.78)); }
.pro-final:has(.pro-final__fond) .pro-final__contenu { position: relative; z-index: 2; }
@media (min-width: 64em) {
  .pro-final__fond { left: auto; right: 0; width: 64%; object-position: 50% 25%; }
  .pro-final:has(.pro-final__fond)::before { background: linear-gradient(90deg, var(--petrole-900) 0%, var(--petrole-900) 36%, rgba(2, 24, 24, 0.72) 45%, rgba(2, 24, 24, 0.15) 60%, transparent 70%); }
  .pro-final:has(.pro-final__fond) .pro-final__contenu { text-align: left; }
  .pro-final:has(.pro-final__fond) .pro-final__repere { margin-left: 0; }
  .pro-final:has(.pro-final__fond) :is(.pro-final__titre, .pro-final__texte) { max-width: min(36rem, 48%); }
  .pro-final:has(.pro-final__fond) .pro-actions { max-width: min(44rem, 56%); justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   10. Moins d’animations : tout s’affiche d’emblée, sans mouvement
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pro-cartes.est-visible .pro-carte,
  .pro-ex .pro-page, .pro-ex .pro-ex__recherche span, .pro-ex .pro-repere, .pro-ex .pro-ex__notes li,
  .pro-audit.est-visible .pro-audit__questions li, .pro-ex .pro-ex__texte { animation: none; }
  .js .pro-respiration[data-reveal]:not(.est-visible) .pro-respiration__img { scale: 1; }
  .pro-respiration__img { transition: none; }
  .pro-puce span, .pro-liens a, .pro-metier__lien svg, .pro-carte, .pro-objectifs__points i { transition: none; }
  .pro-objectif.est-visible .pro-scene *, .pro-objectif.est-visible .pro-scene *::after { animation: none !important; }
}