/* Chemouli — CPT "offre", template single-offre.php.
   Port fidèle de la maquette (_maquette/chunks/page-structuration-cabinets.jsx
   et les fichiers page-*.jsx analogues) — styles inline JSX convertis en
   classes CSS, mêmes valeurs. */

.offre-h2 {
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: clamp(40px, 5.6vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.offre-lead {
  margin: 0;
  font-weight: var(--fw-light);
  font-size: 18px;
  letter-spacing: 0.04em;
  line-height: 1.65;
  color: var(--grey-700);
  text-align: justify;
}
.offre-lead p {
  margin: 0 0 20px;
}
.offre-lead p:last-child {
  margin-bottom: 0;
}
.offre-lead ul {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.offre-lead ul li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  font-weight: var(--fw-light);
  font-size: 16.5px;
  letter-spacing: 0.04em;
  line-height: 1.55;
}
.offre-lead ul li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 10px;
  background: var(--accent-emerald);
  display: block;
}

/* Port du composant partagé SectionLabel (rule=true) — _maquette/chunks/
   design-system-bundle.jsx : ligne de texte + filet fin remplissant l'espace
   restant à DROITE du texte (flex row), pas une bordure au-dessus. */
.offre-section-label {
  display: flex;
  align-items: center;
  gap: 14px;
}
.offre-section-label__text {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--color-black);
}
.offre-section-label__rule {
  flex: 1;
  height: 1px;
  background: var(--hairline);
}
/* Variante "inverse" (fond sombre) — Blog, header noir : texte blanc, filet clair. */
.offre-section-label--inverse .offre-section-label__text {
  color: var(--color-white);
}
.offre-section-label--inverse .offre-section-label__rule {
  background: var(--border-inverse);
}

/* ---- Hero ---------------------------------------------------------- */
.offre-hero {
  background: var(--color-white);
}
.offre-hero__stage {
  position: relative;
  min-height: min(76vh, 720px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.offre-hero__bg {
  position: absolute;
  inset: 0;
}
.offre-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.offre-hero__bg.is-mirrored img {
  transform: scaleX(-1);
}
.offre-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.84) 0%, rgba(0, 0, 0, 0.62) 46%, rgba(0, 0, 0, 0.12) 100%);
  pointer-events: none;
}
.offre-hero__inner {
  position: relative;
  width: 100%;
  padding: clamp(64px, 9vw, 132px) var(--gutter);
}
.offre-hero__title {
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: min(7.4vw, 118px);
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: var(--color-white);
  max-width: 16ch;
}
.offre-hero__title .is-emerald {
  color: var(--accent-emerald);
}
/* Structuration est la seule page offre dont le mockup dédié demande un titre
   plus compact (page-structuration-cabinets.jsx) — la base ci-dessus reprend
   la convention commune aux 5 autres pages (repérée en comparant les 6 mockups
   le 2026-09-16). */
.offre-hero__title--compact {
  font-size: min(6.6vw, 104px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  max-width: 18ch;
}
/* Variante "grand titre" — Make It Right / Break It Right (page-make-it-right.php,
   page-break-it-right.php) : titre plus grand, sans retour à la ligne, même échelle
   que les hero des pages standards (hero.css .hero__title). */
.offre-hero__title--xl {
  font-size: min(9.4vw, 148px);
  line-height: 0.88;
  letter-spacing: -0.035em;
  max-width: none;
  white-space: nowrap;
}
.offre-hero__title--xl .is-magenta {
  color: #ba36b4;
}
.offre-hero__subtitle {
  margin: clamp(24px, 2.6vw, 36px) 0 0;
  font-weight: var(--fw-semibold);
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--color-white);
  max-width: 34ch;
}
.offre-hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 40px;
}

/* ---- Intro ---------------------------------------------------------- */
.offre-intro {
  background: var(--color-white);
  padding: clamp(72px, 10vw, 128px) 0;
}
.offre-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 0 clamp(48px, 7vw, 104px);
  align-items: start;
}
.offre-intro__grid .offre-lead {
  font-size: clamp(19px, 1.7vw, 24px);
  color: var(--color-black);
  line-height: 1.5;
}

/* ---- Enjeux ---------------------------------------------------------- */
.offre-enjeux {
  background: var(--color-white);
  padding: 0 0 clamp(72px, 10vw, 128px);
}
/* Pages sans section Intro juste au-dessus (Vente, Achat, Conflit, Optimisation) :
   Enjeux suit directement le Hero et a besoin de son propre espace en haut --
   contrairement à Structuration/Pacte, dont l'Intro juste avant fournit déjà cet
   espacement (padding-top:0 volontaire dans leurs mockups respectifs). */
.offre-enjeux--top-padded {
  padding-top: clamp(72px, 10vw, 128px);
}
.offre-enjeux__top {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  align-items: stretch;
}
.offre-enjeux__media {
  position: relative;
  min-height: 320px;
  overflow: hidden;
  background: var(--bg-muted);
}
.offre-enjeux__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.offre-enjeux__text {
  padding-left: clamp(40px, 6vw, 96px);
  padding-right: max(var(--gutter), calc((100vw - 1320px) / 2 + var(--gutter)));
}
.offre-enjeux__text .offre-lead {
  margin-top: 32px;
  max-width: 54ch;
}
.offre-enjeux__text .offre-lead + .offre-lead {
  margin-top: 24px;
}
.offre-enjeux__lower {
  margin-top: clamp(48px, 6vw, 88px);
}
.offre-enjeux__lower-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 0 clamp(40px, 6vw, 88px);
  align-items: start;
}
/* Variante "liste pleine largeur" du bloc bas Enjeux (pages sans intro+puces
   côte à côte) — items empilés séparés par un filet, texte avec mise en forme
   (gras inline, puces imbriquées possibles). */
.offre-enjeux__items {
  display: flex;
  flex-direction: column;
}
/* Variante "même colonne que l'image" (ex. page Optimisation des rémunérations) :
   items empilés directement sous le texte d'intro, dans .offre-enjeux__text,
   au lieu du bloc .offre-enjeux__lower pleine largeur. */
.offre-enjeux__items--in-column {
  margin-top: clamp(28px, 3vw, 40px);
}
.offre-enjeux__item {
  padding: clamp(24px, 3vw, 32px) 0;
  border-top: 1px solid var(--hairline);
}
.offre-enjeux__item p {
  margin: 0;
  font-weight: var(--fw-light);
  font-size: 16.5px;
  letter-spacing: 0.04em;
  line-height: 1.65;
  color: var(--grey-700);
  text-align: justify;
}
.offre-enjeux__item p + p {
  margin-top: 18px;
}
.offre-enjeux__item strong {
  font-weight: var(--fw-semibold);
  color: var(--color-black);
}
.offre-enjeux__item ul {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.offre-enjeux__item ul li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  font-weight: var(--fw-light);
  font-size: 16.5px;
  letter-spacing: 0.04em;
  line-height: 1.55;
}
.offre-enjeux__item ul li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 10px;
  background: var(--accent-emerald);
  display: block;
}

/* ---- Déroulé ---------------------------------------------------------- */
.offre-deroule {
  background: var(--bg-muted);
  padding: 0 0 clamp(72px, 10vw, 128px);
}
.offre-deroule__top {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  align-items: start;
}
.offre-deroule__text {
  padding-top: clamp(72px, 10vw, 128px);
  padding-right: clamp(40px, 6vw, 96px);
  padding-left: max(var(--gutter), calc((100vw - 1320px) / 2 + var(--gutter)));
}
/* Variante sans image (ex. page Optimisation des rémunérations) : pas de grille,
   juste le titre pleine largeur -- padding-right/left repris par le style inline
   du wrapper (max-width:1320px + gutter), seul le padding-top est repris ici. */
.offre-deroule__text--no-media {
  padding-top: clamp(72px, 10vw, 128px);
}
.offre-deroule__text .offre-h2 {
  max-width: 24ch;
}
.offre-deroule__text .offre-lead {
  margin-top: 36px;
  max-width: 54ch;
}
.offre-deroule__media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-white);
}
.offre-deroule__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.offre-deroule__steps {
  margin-top: clamp(48px, 6vw, 88px);
  display: flex;
  flex-direction: column;
}
.offre-deroule__step {
  display: grid;
  grid-template-columns: clamp(88px, 11vw, 180px) 1fr;
  gap: 0 clamp(24px, 4vw, 64px);
  align-items: start;
  padding: clamp(24px, 3vw, 36px) 0;
  border-top: 1px solid var(--hairline);
}
.offre-deroule__step-num {
  font-weight: var(--fw-bold);
  font-size: clamp(40px, 6vw, 88px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--color-black);
}
.offre-deroule__step-text {
  margin: 0;
  font-weight: var(--fw-light);
  font-size: 16.5px;
  letter-spacing: 0.04em;
  line-height: 1.65;
  color: var(--grey-700);
  text-align: justify;
}
/* Citation encadrée réutilisée après Déroulé / Enjeux / Distingue / Règlement —
   mêmes valeurs partout dans la maquette (StDeroule, cf. AH3/PLead dans les
   autres pages). */
.offre-closing {
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 2px solid var(--color-black);
  font-weight: var(--fw-medium);
  font-size: clamp(19px, 1.9vw, 26px);
  letter-spacing: -0.01em;
  line-height: 1.45;
}
.offre-closing p {
  margin: 0;
}
/* BUG CORRIGE (2026-09-16) : bordure noire invisible sur fond noir (section
   "Ce qui distingue" ET "Règlement intérieur", toutes deux sur fond sombre) --
   confirmé dans plusieurs mockups (ex. page-vente-cabinet.jsx:199, borderTop
   1px solid var(--border-inverse)). Pacte (seule page à mettre "Ce qui
   distingue" en fond BLANC, cf. .offre-distingue--white) garde la bordure
   noire d'origine, exclue via :not(). */
.offre-distingue:not(.offre-distingue--white) .offre-closing {
  border-top-width: 1px;
  border-top-color: var(--border-inverse);
}
/* BUG CORRIGE (2026-09-16) : max-width en "ch" sur .offre-closing (48ch,
   puis 58ch essayé un temps pour Règlement intérieur) cassait le centrage
   du texte -- constaté en direct par Jérémy. Même famille de souci que
   .offre-enjeux__item p ce soir : les valeurs en "ch" recopiées telles
   quelles depuis les mockups React ne donnent pas le même rendu ici.
   Retiré, aucun max-width sur .offre-closing désormais. */

/* ---- Ce qui distingue ---------------------------------------------------------- */
.offre-distingue {
  background: var(--color-black);
  color: var(--color-white);
}
/* Pacte est la seule page offre dont le mockup dédié (page-pacte-associes.jsx)
   demande cette section en fond BLANC — les 5 autres pages la veulent noire,
   comme la base ci-dessus (repéré en comparant les 6 mockups le 2026-09-16). */
.offre-distingue--white {
  background: var(--color-white);
  color: var(--color-black);
}
.offre-distingue--white .offre-lead,
.offre-distingue--white ul li {
  color: var(--grey-700);
}
.offre-distingue__inner {
  padding: clamp(72px, 9vw, 120px) var(--gutter);
}
.offre-distingue__grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 0 clamp(48px, 7vw, 96px);
  align-items: start;
}
/* Structuration est la seule page dont le mockup demande ce ratio inversé
   (la base ci-dessus reprend la convention commune aux 5 autres pages). */
.offre-distingue__grid--structuration {
  grid-template-columns: 1.25fr 1fr;
}
.offre-distingue .offre-h2 {
  max-width: 16ch;
}
/* BUG CORRIGE (2026-09-16) : meme specificite que .offre-distingue--white
   .offre-lead ci-dessus (2 classes chacune) -- celle-ci, plus bas dans le
   fichier, gagnait la cascade a l'ordre de declaration et ecrasait la
   couleur blanche prevue pour Pacte. Exclue via :not() comme .offre-closing. */
.offre-distingue:not(.offre-distingue--white) .offre-lead {
  color: var(--grey-300);
}
.offre-distingue__intro {
  max-width: 34ch;
  margin-top: 32px;
}
.offre-distingue:not(.offre-distingue--white) ul li {
  color: var(--grey-300);
}
.offre-distingue__text .offre-lead {
  margin-top: 0;
}
.offre-distingue__text .offre-lead + .offre-lead {
  margin-top: 24px;
}

/* ---- Secteurs concernés ---------------------------------------------------------- */
.offre-secteurs {
  background: var(--color-white);
  padding: clamp(72px, 10vw, 128px) 0;
}
/* Pacte est la seule page dont le mockup dédié (page-pacte-associes.jsx,
   PaSecteurs()) demande cette section en fond gris -- Vente/Achat/
   Optimisation/Structuration veulent bien du blanc comme la base ci-dessus
   (vérifié dans leurs 4 mockups le 2026-09-16). */
.offre-secteurs--muted {
  background: var(--bg-muted);
}
.offre-secteurs .offre-lead {
  margin-top: 32px;
  max-width: 64ch;
}
.offre-secteurs__grid {
  margin-top: clamp(40px, 5vw, 72px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(32px, 4vw, 56px) clamp(32px, 5vw, 80px);
}
/* Vente/Achat/Optimisation/Pacte/Conflit veulent une seule rangée à 3 colonnes
   égales dans leur mockup dédié (repeat(3,1fr) fixe, indépendant du nombre de
   cartes réellement saisies) — Structuration est la seule à figer repeat(2,1fr)
   dans SA maquette (même avec 3 cartes actuellement, ce qui donne un 2+1
   volontaire) : appliquée en PHP via le flag $is_structuration, PAS déduite du
   nombre de cartes (piège : les deux se ressemblent tant que Structuration a
   exactement 3 cartes en base — repéré en comparant les 6 mockups le 2026-09-16). */
.offre-secteurs__grid--triple {
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 4vw, 56px) clamp(24px, 4vw, 72px);
}
.offre-secteurs__card {
  padding-top: 24px;
  border-top: 2px solid var(--color-black);
}
.offre-secteurs__bar {
  display: block;
  width: 28px;
  height: 6px;
  margin-bottom: 20px;
}
.offre-secteurs__bar--emerald { background: var(--accent-emerald); }
.offre-secteurs__bar--blue { background: var(--accent-blue); }
.offre-secteurs__bar--magenta { background: #ba36b4; }
.offre-secteurs__bar--lime { background: var(--accent-lime); }
.offre-secteurs__card h3 {
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.offre-secteurs__card p {
  margin: 16px 0 0;
  font-weight: var(--fw-light);
  font-size: 16.5px;
  letter-spacing: 0.04em;
  line-height: 1.65;
  color: var(--grey-700);
  text-align: justify;
}

/* ---- Pièges à éviter ---------------------------------------------------------- */
.offre-pieges {
  background: var(--bg-muted);
  padding: clamp(72px, 10vw, 128px) 0;
}
/* Pacte ET Conflit sont les 2 seules pages dont le mockup dédié demande un
   fond BLANC pour cette section -- Vente/Achat/Optimisation/Structuration
   veulent bien du gris comme la base ci-dessus (vérifié dans les 6 mockups
   le 2026-09-16). */
.offre-pieges--white {
  background: var(--color-white);
}
.offre-pieges__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 0 clamp(40px, 6vw, 88px);
  align-items: start;
}
.offre-pieges__list {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
}
.offre-pieges__item {
  padding: 20px 0;
  border-top: 1px solid var(--hairline);
  font-weight: var(--fw-light);
  font-size: 16.5px;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: var(--grey-700);
  text-align: justify;
}

/* ---- Cas réels (carrousel) ---------------------------------------------------------- */
.offre-cas {
  background: var(--color-white);
  padding: clamp(72px, 10vw, 128px) 0;
}
/* Pacte et Conflit ont une alternance blanc/gris décalée par rapport aux 4
   autres pages (section "Règlement intérieur" en plus pour l'une, "Secteurs"
   en moins pour l'autre) -- vérifié dans les 6 mockups le 2026-09-16, même
   motif que .offre-pieges--white/.offre-secteurs--muted juste avant. */
.offre-cas--muted {
  background: var(--bg-muted);
}
.offre-cas__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.offre-cas__nav {
  display: flex;
  align-items: center;
  gap: 14px;
}
.offre-cas__count {
  color: var(--grey-500);
}
.offre-cas__navbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: var(--color-white);
  border: 1px solid var(--color-black);
  color: var(--color-black);
  cursor: pointer;
  padding: 0;
}
.offre-cas__navbtn:hover {
  background: var(--accent-emerald);
}
.offre-cas__panel {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 0 clamp(40px, 6vw, 88px);
  align-items: start;
}
.offre-cas__bar {
  display: block;
  width: 28px;
  height: 6px;
  margin-bottom: 24px;
}
.offre-cas__panel h3 {
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: clamp(26px, 2.8vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.offre-cas__meta {
  display: block;
  margin-top: 20px;
  color: var(--grey-500);
}
.offre-cas__body p {
  margin: 0;
  font-weight: var(--fw-light);
  font-size: 16.5px;
  letter-spacing: 0.04em;
  line-height: 1.65;
  color: var(--grey-700);
  text-align: justify;
}
.offre-cas__body p + p {
  margin-top: 20px;
}
.offre-cas__panel[hidden] {
  display: none;
}

/* ---- FAQ (accordéon) ---------------------------------------------------------- */
.offre-faq {
  background: var(--bg-muted);
  padding: clamp(72px, 10vw, 128px) 0;
}
/* Pacte et Conflit, même motif que .offre-pieges--white (voir plus haut). */
.offre-faq--white {
  background: var(--color-white);
}
.offre-faq__heading {
  margin-bottom: 40px;
}
.offre-faq__row {
  border-bottom: 1px solid var(--hairline);
}
.offre-faq__btn {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 26px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--color-black);
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: clamp(18px, 1.6vw, 23px);
  line-height: 1.25;
}
.offre-faq__btn svg {
  display: inline-flex;
  color: var(--color-black);
}
.offre-faq__row[data-open="1"] .offre-faq__btn svg {
  color: var(--accent-emerald);
}
.offre-faq__icon-minus {
  display: none;
}
.offre-faq__row[data-open="1"] .offre-faq__icon-plus {
  display: none;
}
.offre-faq__row[data-open="1"] .offre-faq__icon-minus {
  display: inline-flex;
}
.offre-faq__panel {
  padding: 0 0 30px;
  max-width: 76ch;
  display: none;
}
.offre-faq__row[data-open="1"] .offre-faq__panel {
  display: block;
}
.offre-faq__panel .offre-lead + .offre-lead {
  margin-top: 16px;
}

/* ---- Ressources ---------------------------------------------------------- */
.offre-ressources {
  background: var(--color-white);
  padding: clamp(72px, 10vw, 128px) 0;
}
/* Pacte et Conflit, même motif que .offre-cas--muted (voir plus haut). */
.offre-ressources--muted {
  background: var(--bg-muted);
}
.offre-ressources__heading {
  margin-bottom: 28px;
}
.offre-ressources .offre-lead {
  margin-bottom: 40px;
  max-width: 64ch;
}
.offre-ressources__row {
  display: grid;
  grid-template-columns: 152px 1fr auto;
  align-items: start;
  gap: 28px;
  padding: 26px 16px;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  color: var(--color-black);
  transition: var(--transition);
}
.offre-ressources__row:hover {
  padding-left: 24px;
  background: var(--accent-emerald);
}
.offre-ressources__kind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 12px;
  margin-top: 4px;
  font-weight: var(--fw-medium);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  border-radius: var(--radius-chip);
  white-space: nowrap;
  background: var(--color-black);
  color: var(--color-white);
}
.offre-ressources__title {
  display: block;
  font-weight: var(--fw-medium);
  font-size: clamp(17px, 1.5vw, 22px);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.offre-ressources__text {
  display: block;
  margin-top: 10px;
  font-weight: var(--fw-light);
  font-size: 15.5px;
  letter-spacing: 0.04em;
  line-height: 1.55;
  color: var(--grey-700);
  text-align: justify;
}
.offre-ressources__row:hover .offre-ressources__text {
  color: var(--color-black);
}
.offre-ressources__action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-weight: var(--fw-medium);
  font-size: 14px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
/* Variante "étude" : simple lien externe, pas d'étiquette "kind", action "Consulter". */
.offre-ressources__row--plain {
  grid-template-columns: 1fr auto;
  gap: 24px;
  padding: 22px 16px;
}
.offre-ressources__row--plain .offre-ressources__title {
  font-size: clamp(17px, 1.4vw, 21px);
}
.offre-ressources__url {
  display: block;
  margin-top: 8px;
  font-weight: var(--fw-light);
  font-size: 14.5px;
  letter-spacing: 0.02em;
  color: var(--accent-emerald);
  word-break: break-all;
}
.offre-ressources__row--plain:hover .offre-ressources__url {
  color: var(--color-white);
}
/* Groupes de ressources (sous-titre H3 + intro optionnelle + items). */
.offre-ressources__group {
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 2px solid var(--color-black);
}
.offre-ressources__group-heading {
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.offre-ressources__group-lead {
  margin-top: 18px;
  margin-bottom: 32px;
  max-width: 72ch;
}
.offre-ressources__body-2 {
  margin-top: 40px;
}

/* ---- Passer à l'action ---------------------------------------------------------- */
.offre-action {
  background: var(--accent-emerald);
  color: var(--color-black);
}
.offre-action__inner {
  padding: clamp(64px, 8vw, 112px) var(--gutter);
}
.offre-action__label {
  margin-bottom: 40px;
}
.offre-action__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(32px, 4vw, 80px);
  align-items: end;
}
.offre-action__heading {
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: clamp(32px, 4.4vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  max-width: 26ch;
}
.offre-action__lead {
  margin: 0;
  font-weight: var(--fw-light);
  font-size: 17px;
  letter-spacing: 0.04em;
  line-height: 1.65;
  max-width: 40ch;
  text-align: justify;
}
.offre-action .btn {
  margin-top: 32px;
  height: 46px;
  border-width: 2px;
}
/* BUG CORRIGE (2026-09-16) : le bouton "Passer à l'action" reprenait le
   .btn--secondary générique (transparent, contour noir par défaut / noir
   plein au survol) -- sa maquette dédiée (ReActionButton dans chaque
   page-*.jsx) veut l'inverse : noir plein par défaut, blanc plein au
   survol. Distinct du .btn--secondary générique utilisé ailleurs sur le
   site (accueil, blog, Make It Right/Break It Right), donc corrigé
   seulement ici plutôt que sur la classe partagée. */
.offre-action .btn--secondary {
  background: var(--color-black);
  border-color: var(--color-black);
  color: var(--color-white);
}
.offre-action .btn--secondary:hover {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-black);
}

/* ---- Final CTA partagé (template-parts/final-cta.php) --------------------------
   Déplacé depuis home.css (2026-09-16) : la classe garde son nom d'origine
   "home-" pour ne pas toucher au template PHP qui marche déjà sur accueil/
   approche/qui-sommes-nous/ressources, mais ce bloc doit aussi charger sur
   secteur.css (offre.css est la seule feuille commune à ces 5 types de page). */
.home-final-cta {
  background: var(--accent-emerald);
  color: var(--color-black);
}
.home-final-cta__heading {
  margin: 0 0 36px;
  font-weight: var(--fw-bold);
  font-size: clamp(40px, 6.4vw, 104px);
  line-height: 0.94;
  letter-spacing: -0.03em;
  max-width: 16ch;
}
.home-final-cta__lead {
  margin: 0 0 48px;
  font-weight: var(--fw-light);
  font-size: 20px;
  letter-spacing: 0.04em;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.72);
  max-width: 60ch;
}
.home-final-cta__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 0 34px;
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: 17px;
  letter-spacing: 0.04em;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-black);
  background: var(--color-black);
  color: var(--color-white);
  text-decoration: none;
  transition: var(--transition);
}
.home-final-cta__pill:hover {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-black);
}

/* ---- Responsive (≤900px, cohérent avec le reste du thème) -------------------
   Les tailles h1/h2 et le text-align mobile viennent déjà des règles globales
   (responsive.css : h1/h2, p/li). Ici seulement ce qui est propre aux grilles
   et paddings spécifiques à ce template — mêmes valeurs que le bloc générique
   de la maquette d'origine (page-shell.html, media max-width:900px). */
@media (max-width: 900px) {
  .offre-intro__grid,
  .offre-enjeux__top,
  .offre-enjeux__lower-grid,
  .offre-deroule__top,
  .offre-distingue__grid,
  .offre-pieges__grid,
  .offre-cas__panel,
  .offre-secteurs__grid,
  .offre-action__grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .offre-enjeux__media { min-height: 56vw; max-height: 360px; }
  .offre-enjeux__text { padding-left: var(--gutter); padding-right: var(--gutter); padding-top: 28px; padding-bottom: 4px; }
  .offre-ressources__row { grid-template-columns: 1fr; gap: 12px; justify-items: start; }
}