/* ==========================================================================
   2M Digital — Prestations : page pilier (/prestations) et pages prestations
   S'appuie sur style.css (couleurs, boutons, pastilles, tuiles, étapes, FAQ, encart d'appel, cartes réalisations).
   ========================================================================== */

/* Textes saisis en majuscules dans le back-office (durées, étapes, accroches) : affichés en casse de phrase */
.sentence { text-transform: lowercase; }
.sentence::first-letter { text-transform: uppercase; }

/* ---------- Page pilier ---------- */

.pillar-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding-top: 64px;
  padding-bottom: 72px;
  text-align: center;
}
.pillar-hero .glow { top: -260px; right: max(-160px, (100% - 1440px) / 2); }
.pillar-hero .lead { max-width: 740px; }
.pillar-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 760px; }
.pillar-chips .pill { padding: 10px 18px; font-size: 17px; font-weight: 600; color: var(--label); }
.pillar-chips .pill { transition: background-color .2s, box-shadow .2s; }
/* Le numéro prend la couleur de la catégorie (associée aux pictogrammes des blocs plus bas) */
.pillar-chips small { margin-right: 2px; font-size: 13px; font-weight: 600; color: var(--c, var(--label-3)); }
.pillar-chips .pill:hover { background: color-mix(in srgb, var(--c, var(--label-3)) 14%, var(--surface-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, var(--label-3)) 45%, transparent); }
.pillar-hero__cta { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 20px; }
.pillar-hero__note { font-size: 15px; color: var(--label-2); }

/* Cartes prestations : résumé toujours visible, détail repliable (js/prestations-pilier.js) */
.pz-list { display: flex; flex-direction: column; gap: 48px; }
.pz { display: flex; flex-direction: column; gap: 16px; padding: 32px; scroll-margin-top: 104px; }
.pz__head { display: flex; align-items: center; gap: 16px; padding-bottom: 24px; margin-bottom: 8px; border-bottom: 1px solid var(--separator); }
.pz__head .tile { width: 52px; height: 52px; border-radius: 13px; }
.pz__head .tile .icon { width: 26px; height: 26px; }
.pz__name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pz__num { font-size: 13px; font-weight: 500; color: var(--label-3); }
.pz__title { font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.pz__tag { flex-shrink: 0; }
.pz__link { flex-shrink: 0; margin-left: 8px; font-size: 19px; }
.pz__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pz__box { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; padding: 24px; border-radius: var(--r-md); background: var(--surface-2); }
.pz__label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--label-2); }
.pz__lead { font-size: 18px; font-weight: 600; line-height: 1.4; }
.pz__checks, .pz__arrows { display: flex; flex-direction: column; gap: 10px; }
.pz__checks li, .pz__arrows li { display: flex; align-items: flex-start; gap: 14px; font-size: 16px; line-height: 1.4; }
.pz__checks .icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; color: var(--green); stroke-width: 2.5; }
.pz__arrows .icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; color: var(--yellow); stroke-width: 2.25; }
.pz__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pz__chips .pill { padding: 9px 14px; background: var(--surface); color: var(--label); font-size: 16px; font-weight: 600; white-space: normal; }
.pz__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; }
.pz__steps li { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: var(--r-sm); background: var(--surface); }
.pz__steps span { font-size: 13px; font-weight: 600; color: var(--yellow); font-variant-numeric: tabular-nums; }
.pz__steps p { font-size: 16px; font-weight: 600; line-height: 1.4; }
.pz__gain { gap: 10px; background: rgba(255, 229, 0, .1); box-shadow: inset 0 0 0 1px rgba(255, 229, 0, .55); }
.pz__gain-value { margin: 4px 0; font-size: clamp(44px, 5vw, 64px); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--yellow); font-variant-numeric: tabular-nums; }
.pz__gain-text { font-size: 16px; font-weight: 600; line-height: 1.4; }
.pz__gain-note { font-size: 14px; color: var(--label-2); }
.pz__detail { display: flex; flex-direction: column; gap: 16px; }
.pz__detail[hidden] { display: none; }
.pz__toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 12px;
  width: 100%;
  min-height: 56px;
  padding: 12px 20px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--label);
  font: inherit;
  font-size: 16px;
  cursor: pointer;
  transition: background-color .15s ease;
}
.pz__toggle:hover { background: var(--surface-3); }
.pz__toggle strong { font-weight: 600; }
.pz__toggle-hint { font-size: 14px; color: var(--label-2); }
.pz__toggle .icon { width: 18px; height: 18px; color: var(--yellow); stroke-width: 2.25; transition: transform .3s cubic-bezier(.22, .8, .24, 1); }
.pz.is-open .pz__toggle .icon { transform: rotate(180deg); }
.pz.is-open .pz__toggle-hint { display: none; }

/* Diagnostic express (js/diagnostic.js) */
.diag-section { padding-block: 48px; scroll-margin-top: 90px; }
.diag { align-items: center; text-align: center; }
.diag__intro { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.diag__intro[hidden], .diag__app[hidden] { display: none; }
.diag__perks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: -16px; font-size: 14px; color: var(--label-2); }
.diag__perks li { display: inline-flex; align-items: center; gap: 4px; }
.diag__perks .icon { width: 16px; height: 16px; color: var(--green); stroke-width: 2.5; }
.diag__app { display: flex; flex-direction: column; gap: 24px; width: 100%; max-width: 760px; text-align: left; }
.diag__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.diag__back, .diag__restart { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px 8px 10px; border: 0; border-radius: 999px; background: var(--surface-2); color: var(--label); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.diag__back:hover, .diag__restart:hover { background: var(--surface-3); }
.diag__back[disabled] { visibility: hidden; }
.diag__back .icon, .diag__restart .icon { width: 16px; height: 16px; }
.diag__count { font-size: 14px; font-weight: 500; color: var(--label-2); font-variant-numeric: tabular-nums; }
.diag__bar { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.diag__bar span { height: 4px; border-radius: 2px; background: var(--surface-3); transition: background-color .3s ease; }
.diag__bar span.is-on { background: var(--yellow); }
.diag__q { font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; }
.diag__choices { display: flex; flex-direction: column; gap: 10px; }
.diag__choice { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 14px 20px; border: 1.5px solid transparent; border-radius: var(--r-sm); background: var(--surface-2); color: var(--label); font: inherit; font-size: 17px; font-weight: 500; text-align: left; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.diag__choice:hover { background: var(--surface-3); }
.diag__choice:focus-visible { outline: none; border-color: var(--yellow); }
.diag__choice[aria-pressed="true"] { border-color: var(--yellow); background: rgba(255, 229, 0, .1); }
.diag__choice small { display: block; margin-top: 2px; font-size: 14px; font-weight: 400; color: var(--label-2); }
.diag__choice .tile { width: 36px; height: 36px; border-radius: 9px; }
.diag__choice .tile .icon { width: 20px; height: 20px; }
/* Résultat */
.diag__result { display: flex; flex-direction: column; gap: 20px; }
.diag__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.diag__level { padding: 6px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.diag__level--priorite { background: rgba(255, 69, 58, .16); color: var(--red); }
.diag__level--consolider { background: rgba(255, 159, 10, .16); color: var(--orange); }
.diag__level--solide { background: rgba(48, 209, 88, .16); color: var(--green); }
.diag__title { font-size: clamp(24px, 2.8vw, 32px); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.diag__text { font-size: 17px; line-height: 1.55; color: var(--label-2); }
.diag__reco { overflow: hidden; border-radius: var(--r-md); background: var(--surface-2); }
.diag__reco .list__row { --sep-left: 20px; padding: 16px 20px; }
.diag__reco .list__title { font-size: 17px; }
.diag__reco .list__desc { font-size: 15px; }
a.list__row.diag__reco-row:hover { background: var(--surface-3); }
.diag__next { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: var(--r-md); background: rgba(255, 229, 0, .08); box-shadow: inset 0 0 0 1px rgba(255, 229, 0, .4); }
.diag__next-title { font-size: 20px; font-weight: 700; line-height: 1.3; }
.diag__next p { font-size: 15px; line-height: 1.5; color: var(--label-2); }
.diag__next-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.diag__form { display: flex; flex-direction: column; gap: 12px; }
.diag__form-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.diag__form input[type="text"], .diag__form input[type="email"] { width: 100%; min-height: 50px; padding: 0 16px; border: 1.5px solid transparent; border-radius: var(--r-sm); background: var(--surface-2); color: var(--label); font: inherit; font-size: 16px; }
.diag__form input::placeholder { color: var(--label-3); }
.diag__form input:focus { outline: none; border-color: var(--yellow); }
.diag__form input[aria-invalid="true"] { border-color: var(--red); }
.diag__form .form__error { font-size: 14px; color: var(--red); }
.diag__form .btn { align-self: flex-start; }

/* Catégories (les objectifs du diagnostic) et leur combo */
.pz-cat { display: flex; flex-direction: column; gap: 40px; padding-block: 48px; scroll-margin-top: 90px; }
.pz-cat__head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 20px; }
.pz-cat__head .tile { width: 60px; height: 60px; border-radius: 15px; }
.pz-cat__head .tile .icon { width: 30px; height: 30px; }
.pz-cat__name { display: flex; flex-direction: column; gap: 6px; }
.pz-cat__lead { grid-column: 2; max-width: 640px; font-size: 18px; line-height: 1.5; color: var(--label-2); }

.combo { gap: 28px; padding: clamp(28px, 4vw, 48px); border-radius: var(--r-card); }
.combo .glow { top: -340px; right: -220px; }
.combo__head { display: flex; flex-direction: column; gap: 12px; max-width: 820px; }
.combo__eyebrow { color: var(--yellow); }
.combo__title { font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.combo__text { font-size: 17px; line-height: 1.6; color: var(--label-2); }
.combo__formula { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; max-width: 100%; }
.combo__item { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 999px; background: var(--surface-2); font-size: 16px; font-weight: 600; }
.combo__item .tile { width: 32px; height: 32px; border-radius: 50%; } /* rond, concentrique à la pastille */
.combo__item .tile .icon { width: 18px; height: 18px; }
.combo__op { font-size: 24px; font-weight: 600; line-height: 1; color: var(--label-3); }
.combo__result { padding: 10px 16px; font-size: 15px; line-height: 1.35; white-space: normal; }
.combo__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; width: 100%; }
.combo__col { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; border-radius: var(--r-md); background: var(--surface-2); }
.combo__col-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--label-3); }
.combo__col-label .icon { width: 16px; height: 16px; }
.combo__col p { font-size: 15px; line-height: 1.55; color: var(--label-2); }
.combo__col--all { background: rgba(255, 229, 0, .1); box-shadow: inset 0 0 0 1px rgba(255, 229, 0, .55); }
.combo__col--all .combo__col-label { color: var(--yellow); }
.combo__col--all p { font-weight: 600; color: var(--label); }

/* Réalisations tirées au hasard */
.pillar-works { scroll-margin-top: 90px; }

/* ---------- Page à tarifs (Site vitrine) ---------- */
.formules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; margin-top: 40px; }
.formule { display: flex; flex-direction: column; gap: 14px; padding: 28px; }
.formule--reco { box-shadow: inset 0 0 0 1.5px var(--yellow); }
.formule__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; }
.formule__nom { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
.formule__depuis { margin-bottom: -10px; font-size: 14px; color: var(--label-3); }
.formule__prix { font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.formule--reco .formule__prix { color: var(--yellow); }
.formule__desc { padding-bottom: 18px; border-bottom: 1px solid var(--separator); font-size: 16px; line-height: 1.5; color: var(--label-2); }
.formule__points { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 0; margin-bottom: 8px; list-style: none; font-size: 16px; line-height: 1.4; }
.formule__points li { display: flex; gap: 12px; }
.formule__points .icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; color: var(--green); }
.frais { display: flex; flex-direction: column; align-items: center; margin-top: 64px; text-align: center; }
.frais__titre { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
.frais__sous { margin-top: 6px; font-size: 16px; color: var(--label-2); }
.frais__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; width: 100%; margin-top: 28px; text-align: left; }
.frais__item { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 24px; }
.frais__item h4 { margin-top: 6px; font-size: 20px; font-weight: 600; }
.frais__prix { font-size: 22px; font-weight: 700; color: var(--yellow); }
.frais__desc { font-size: 15px; line-height: 1.5; color: var(--label-2); }
.tarifs__note { max-width: 760px; margin: 24px auto 0; font-size: 13px; line-height: 1.55; text-align: center; color: var(--label-3); }
.included--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tbl-wrap { margin-top: 40px; overflow-x: auto; border-radius: var(--r-card); background: var(--surface); }
.tbl { width: 100%; min-width: 640px; border-collapse: collapse; text-align: left; }
.tbl th, .tbl td { padding: 20px; font-size: 16px; font-weight: 400; line-height: 1.4; color: var(--label-2); }
.tbl thead th { background: var(--surface-2); font-size: 14px; color: var(--label-2); }
.tbl tbody tr + tr > * { border-top: 1px solid var(--separator); }
.tbl tbody th { font-weight: 600; color: var(--label); }
.tbl__accent { font-weight: 600; color: var(--yellow); }
.tbl__us { background: rgba(255, 255, 255, .03); color: var(--label); }
.tbl thead .tbl__us { color: var(--yellow); font-weight: 600; background: rgba(255, 255, 255, .05); }
.propriete { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr); align-items: center; gap: 32px; margin-top: 40px; padding: 32px; border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--yellow); }
.propriete__titre { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.propriete__titre .tile { --c: var(--yellow); color: var(--on-yellow); }
.propriete__titre h3 { font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.propriete__points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; padding: 0; list-style: none; font-size: 16px; line-height: 1.45; }
.propriete__points li { display: flex; gap: 12px; }
.propriete__points .icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; color: var(--green); }
.comparatif__titre { margin-top: 72px; text-align: center; }
.comparatif__titre + .frais__sous { text-align: center; }
.roi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 40px; padding: 56px; }
.roi__text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.roi__text p { font-size: 17px; line-height: 1.6; color: var(--label-2); }
.roi__note { font-size: 14px !important; color: var(--label-3) !important; }
.roi__calc { display: flex; align-items: center; justify-content: center; gap: 14px; }
.roi__box { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1 1 0; min-width: 0; padding: 22px 12px; border-radius: var(--r-md); background: var(--surface-2); text-align: center; }
.roi__box strong { font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.roi__box span { font-size: 13px; line-height: 1.35; color: var(--label-2); }
.roi__box--res { background: var(--yellow); }
.roi__box--res strong, .roi__box--res span { color: var(--on-yellow); }
.roi__op { flex-shrink: 0; font-size: 28px; font-weight: 600; color: var(--label-3); }
.avis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.avis__item { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 28px; margin: 0; }
.avis__item blockquote { font-size: 17px; line-height: 1.55; }
.avis__item figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--label-2); }
.avis__item figcaption strong { font-size: 16px; color: var(--label); }
.zones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.zone { display: flex; align-items: flex-start; gap: 16px; padding: 24px; }
.zone .tile { flex-shrink: 0; width: 44px; height: 44px; border-radius: 11px; }
.zone h3 { margin-bottom: 4px; font-size: 20px; font-weight: 600; }
.zone p { font-size: 16px; line-height: 1.5; color: var(--label-2); }
.faq-groupes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; margin-top: 40px; }
.faq-groupe { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.faq-groupe__titre { padding-left: 4px; font-size: 18px; font-weight: 500; color: var(--label-2); }
.presta-seo { border-top: 0; }
.presta-seo .pillar-seo__intro p { max-width: 920px; }
.presta-seo .pillar-seo__grid section p { color: var(--label-2); line-height: 1.65; }
.presta-seo .pillar-seo__outro { max-width: 880px; font-size: 20px; line-height: 1.6; color: var(--label); }
.presta-seo .pillar-seo__outro p { color: var(--label); }

/* ---------- Page « Outil métier sur mesure » ---------- */
.tbl--accent .tbl__us { background: rgba(255, 229, 0, .14); color: var(--label); }
.tbl--accent thead .tbl__us { background: var(--surface-2); color: var(--yellow); font-weight: 600; }
.tbl--accent tbody th, .tbl--cout tbody th { font-size: 19px; font-weight: 600; line-height: 1.3; }
.tbl--accent tbody th { width: 22%; }
.tbl--cout { min-width: 560px; }
.tbl--cout td.tbl__accent { color: var(--yellow); }
.tarifs__note--wide { max-width: none; margin: 20px 0 0; text-align: left; }
.tarifs__note--center { text-align: center; }
.tarifs__note a { color: var(--label-2); text-decoration: underline; text-underline-offset: 3px; }
.tarifs__note a:hover { color: var(--yellow); }
.comparatif__tete { display: flex; flex-direction: column; gap: 6px; margin-top: 56px; }
.comparatif__titre-g { font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.comparatif__tete p { font-size: 16px; color: var(--label-2); }
.comparatif__tete + .tbl-wrap { margin-top: 24px; }

.modules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.module { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px 22px 24px; }
.module .tile { margin-bottom: 4px; }
.module h3 { font-size: 19px; font-weight: 600; line-height: 1.3; }
.module p { font-size: 14px; line-height: 1.45; color: var(--label-2); }

.schema { display: grid; grid-template-columns: minmax(0, 1fr) auto 220px auto minmax(0, 1fr); align-items: center; gap: 24px; padding: 48px; border-radius: 40px; }
.schema__col { display: flex; flex-direction: column; gap: 12px; }
.conn { display: flex; align-items: center; gap: 12px; padding: 14px 16px 14px 14px; border-radius: 16px; background: var(--surface-2); }
.conn .tile { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; }
.conn h3 { font-size: 19px; font-weight: 600; line-height: 1.3; }
.conn p { margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--label-2); }
.schema__fleche .icon { width: 24px; height: 24px; }
.schema__centre { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 24px; border-radius: 28px; background: var(--yellow); color: var(--on-yellow); text-align: center; }
.schema__tuile { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: #000; color: #fff; }
.schema__centre h3 { font-size: 24px; font-weight: 600; line-height: 1.25; }
.schema__centre p { font-size: 14px; line-height: 1.4; }

.formule__sous { margin-top: -10px; font-size: 14px; color: var(--label-2); }
.simu { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 48px; margin-top: 40px; padding: 44px; border-radius: 40px; box-shadow: inset 0 0 0 1px var(--yellow); scroll-margin-top: 104px; }
.simu__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.simu__titre { font-size: 32px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.simu__intro p { font-size: 18px; line-height: 1.55; color: var(--label-2); }
.simu__intro .simu__note { font-size: 14px; line-height: 1.45; color: var(--label-3); }
.simu__form { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.simu__q { min-width: 0; margin: 0; padding: 0; border: 0; }
.simu__q legend { margin-bottom: 10px; padding: 0; font-size: 16px; font-weight: 600; }
.simu__choix { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 6px 12px; border: 0; border-radius: 999px; background: var(--surface-2); color: var(--label-2); font: inherit; font-size: 14px; line-height: 20px; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.chip:hover:not(:disabled):not(.is-on) { background: #3a3a3c; color: var(--label); }
.chip.is-on { background: var(--yellow); color: var(--on-yellow); }
.chip:disabled { opacity: .35; cursor: not-allowed; }
.chip:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.simu__resultat { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 18px 18px 22px; border-radius: 20px; background: var(--surface-2); }
.simu__estim { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.simu__label { font-size: 14px; line-height: 1.4; color: var(--label-2); }
.simu__valeur { font-size: 24px; font-weight: 600; line-height: 1.25; color: var(--yellow); }
.simu__resultat .btn { flex-shrink: 0; }
.simu__resultat[hidden], .simu__contact[hidden], .simu__merci[hidden], .chip[hidden] { display: none; }
.simu__label--note { margin-top: 4px; font-size: 13px; color: var(--label-3); }
.simu__contact { display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: 20px; background: var(--surface-2); }
.simu__contact-titre { font-size: 19px; font-weight: 600; line-height: 1.3; }
.simu__champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.simu__champs label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--label-2); }
.simu__champs label em { font-style: normal; color: var(--label-3); }
.simu__champs-large { grid-column: 1 / -1; }
.simu__champs input { width: 100%; min-height: 50px; padding: 0 16px; border: 1.5px solid transparent; border-radius: var(--r-sm); background: var(--surface); color: var(--label); font: inherit; font-size: 16px; }
.simu__champs input:focus { outline: none; border-color: var(--yellow); }
.simu__champs input[aria-invalid="true"] { border-color: var(--red); }
.simu__consent { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.5; color: var(--label-2); }
.simu__consent input { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--yellow); }
.simu__consent a { color: var(--label); text-decoration: underline; text-underline-offset: 3px; }
.simu__contact .form__error { font-size: 14px; color: var(--red); }
.simu__envoi { display: flex; }
.simu__merci { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px; border-radius: 20px; background: var(--surface-2); outline: none; }
.simu__merci-titre { font-size: 24px; font-weight: 700; line-height: 1.25; color: var(--yellow); }
.simu__merci p:not(.simu__merci-titre) { font-size: 17px; line-height: 1.55; color: var(--label-2); }

.avis--seul { grid-template-columns: minmax(0, 560px); justify-content: center; }
.avis__item--citation { gap: 20px; }
.avis__guillemet { font-size: 56px; font-weight: 700; line-height: .7; color: var(--yellow); }
.avis__item--citation blockquote { display: flex; flex-direction: column; gap: 2px; font-size: 18px; line-height: 1.55; }
.avis__item--citation figcaption { flex-direction: row; align-items: center; gap: 12px; }
.avis__item--citation figcaption > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.avis__photo { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.avis__item--citation figcaption strong { font-size: 19px; font-weight: 600; line-height: 1.3; }
.avis__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; margin-top: 40px; }
.avis__cta p { font-size: 16px; color: var(--label-2); }
.avis__cta a:not(.btn) { color: var(--label); }

@media (max-width: 1100px) {
  .modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schema { grid-template-columns: minmax(0, 1fr); padding: 28px; }
  .schema__fleche { justify-self: center; transform: rotate(90deg); }
  .simu { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 32px 24px; }
}
@media (max-width: 640px) {
  .modules { grid-template-columns: minmax(0, 1fr); }
  .simu__titre { font-size: 26px; }
  .simu__resultat { flex-direction: column; align-items: stretch; padding: 18px; }
  .simu__valeur { font-size: 21px; }
  .simu__resultat .btn { justify-content: center; }
  .simu__champs { grid-template-columns: minmax(0, 1fr); }
  .tbl--accent tbody th, .tbl--cout tbody th { font-size: 16px; }
}

@media (max-width: 1024px) {
  .formules, .avis { grid-template-columns: minmax(0, 1fr); }
  .frais__grid, .included--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roi { grid-template-columns: minmax(0, 1fr); padding: 32px 24px; }
  .propriete { grid-template-columns: minmax(0, 1fr); padding: 24px; }
  .zones, .faq-groupes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .frais__grid, .included--4 { grid-template-columns: minmax(0, 1fr); }
  .formule { padding: 22px; }
  .formule__prix { font-size: 48px; }
  .tbl th, .tbl td { padding: 14px; font-size: 15px; }
  .roi__calc { flex-direction: column; }
  .propriete__points { grid-template-columns: minmax(0, 1fr); }
  .roi__box { width: 100%; }
  .roi__op { line-height: 1; }
}

/* Sections de texte d'une page prestation (référencement) */
.presta-sections { display: flex; flex-direction: column; gap: 64px; max-width: 900px; margin-inline: auto; }
.presta-sec { display: flex; flex-direction: column; gap: 20px; scroll-margin-top: 104px; }
.presta-sec .title { font-size: clamp(26px, 3vw, 36px); line-height: 1.15; }
.presta-sec__body { display: flex; flex-direction: column; gap: 16px; font-size: 18px; line-height: 1.7; color: var(--label-2); }
.presta-sec__body a { color: var(--label); text-decoration: underline; text-decoration-color: var(--yellow); text-underline-offset: 3px; }
.presta-sec__body a:hover { color: var(--yellow); }
.presta-sec__body strong { color: var(--label); font-weight: 600; }
.presta-sec__body h3 { margin-top: 12px; font-size: 20px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: var(--label); }
.presta-sec__body h3 + p { margin-top: -8px; }
.presta-sec__body ul { display: flex; flex-direction: column; gap: 12px; padding: 0; list-style: none; }
.presta-sec__body li { position: relative; padding-left: 28px; }
.presta-sec__body li::before { content: ""; position: absolute; left: 6px; top: .72em; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); }

.suite__ebook { margin-top: 24px; }
.posts + .suite__ebook { margin-top: 32px; }

/* Texte de fond (référencement) */
.pillar-seo { display: flex; flex-direction: column; gap: 24px; border-top: 1px solid var(--separator); }
.pillar-seo .title { max-width: 820px; }
.pillar-seo__intro { max-width: 920px; font-size: 17px; line-height: 1.65; color: var(--label-2); }
.pillar-seo__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 64px; margin-top: 16px; }
.pillar-seo__grid h3 { margin-bottom: 8px; font-size: 21px; font-weight: 600; line-height: 1.35; }
.pillar-seo__grid p { font-size: 16px; line-height: 1.7; color: var(--label-2); }
.pillar-seo__note { display: flex; align-items: flex-start; gap: 20px; margin-top: 8px; padding: 28px; background: var(--surface); box-shadow: inset 0 0 0 1px rgba(255, 229, 0, .35); }
.pillar-seo__note .tile { flex-shrink: 0; }
.pillar-seo__note h3 { margin-bottom: 8px; font-size: 21px; font-weight: 600; line-height: 1.35; }
.pillar-seo__note p { font-size: 17px; line-height: 1.65; color: var(--label-2); }
.pillar-seo__note a { color: var(--label); text-decoration: underline; text-decoration-color: var(--yellow); text-underline-offset: 3px; }
.pillar-seo__note a:hover { color: var(--yellow); }
.pillar-seo__outro { max-width: 920px; margin-top: 8px; font-size: 19px; line-height: 1.6; }
.pillar-seo__outro a { color: var(--yellow); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Page prestation : en-tête ---------- */


.p-hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 56px;
  padding-top: 56px;
  padding-bottom: 72px;
}
.p-hero .glow { top: -120px; left: -320px; }
.p-hero__text { flex: 1 1 640px; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; min-width: 0; }
.p-hero__text .crumbs { margin-bottom: -4px; }
.p-hero__prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.p-hero__prix strong { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--yellow); }
.p-hero__prix span { font-size: 15px; color: var(--label-2); }
.p-hero__tagline { margin-top: -8px; font-size: clamp(20px, 2.2vw, 26px); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--label); }
.p-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cible { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--label-2); }
.cible ul { display: contents; }

/* Vidéo du hero : carte rognée sur sa zone utile, carrée (ou 16:9) */
.hero-video { --hv-w: 480px; --hv-ratio: 1 / 1; --hv-max: 560px; flex: 0 0 var(--hv-w); align-self: center; line-height: 0; }
.hero-video--wide { --hv-w: clamp(520px, 44vw, 640px); --hv-ratio: 16 / 9; --hv-max: 760px; }
@media (min-width: 1280px) { .hero-video--wide { --hv-w: clamp(620px, 48.4vw, 704px); } }
.hero-video video { display: block; width: 100%; height: auto; aspect-ratio: var(--hv-ratio); background: var(--bg); }

/* On rogne les marges noires intégrées aux vidéos : la carte remplit tout le cadre.
   --cx/--cy/--cw/--ch = zone utile de la vidéo (fractions), --vr = largeur / hauteur de la vidéo ;
   --m* = mêmes valeurs pour la version mobile (sinon les valeurs communes servent). */
.hero-video--crop {
  --ux: var(--cx); --uy: var(--cy); --uw: var(--cw); --uh: var(--ch); --uvr: var(--vr);
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card);
  aspect-ratio: calc(var(--uw) * var(--uvr) / var(--uh));
}
.hero-video--crop video {
  position: absolute;
  width: calc(100% / var(--uw));
  max-width: none;
  left: calc(-100% * var(--ux) / var(--uw));
  top: calc(-100% * var(--uy) / var(--uh));
  aspect-ratio: var(--uvr);
}

/* Fiche « avant / après » (prestation sans vidéo) */
.fiche { flex: 0 0 440px; display: flex; flex-direction: column; gap: 18px; padding: 28px; }
.fiche__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--label-2); font-size: 14px; }
.fiche__title { padding-bottom: 18px; border-bottom: 1px solid var(--separator); font-size: 24px; font-weight: 600; line-height: 1.25; }
.fiche__statut { font-size: 14px; color: var(--label-2); }
.fiche__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fiche__cols h3 { margin-bottom: 10px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--label-2); }
.fiche__cols ul { display: flex; flex-direction: column; gap: 10px; }

/* ---------- Sections ---------- */

.section-head--center { margin-bottom: 48px; }

/* Ce qui est inclus */
.included { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.included__item { display: flex; align-items: flex-start; gap: 14px; padding: 20px; font-size: 17px; line-height: 1.4; }
.check { display: inline-grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; background: var(--green); color: #fff; }
.check .icon { width: 18px; height: 18px; stroke-width: 3; }

/* C'est / ce n'est pas fait pour vous */
.fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.fit__col { display: flex; flex-direction: column; gap: 18px; padding: 32px; }
.fit__title { font-size: 24px; font-weight: 600; line-height: 1.3; }
.fit__col--no .fit__title { color: var(--label-2); }
.fit__col ul { display: flex; flex-direction: column; gap: 14px; }
.fit__col li { display: flex; align-items: flex-start; gap: 14px; font-size: 17px; line-height: 1.4; }
.fit__col li .icon { width: 18px; height: 18px; margin-top: 2px; stroke-width: 2.5; }
.fit__col--yes .icon { color: var(--green); }
.fit__col--no li { color: var(--label-2); }
.fit__col--no .icon { color: var(--label-2); }

/* Suppléments */
.supplements { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 16px; }
.supplement { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 28px; }
.supplement__name { font-size: 24px; font-weight: 600; line-height: 1.25; }
.supplement p:last-child { font-size: 17px; line-height: 1.5; color: var(--label-2); white-space: pre-line; }

/* Explorez les autres savoir-faire */
.explore { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.explore__item { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 204px; padding: 24px; transition: background-color .15s ease; }
.explore__item:hover { background: #242426; }
.explore__item .tile { margin-bottom: 26px; }
.explore__arrow { position: absolute; top: 24px; right: 24px; width: 20px; height: 20px; color: var(--label-2); transition: transform .15s ease, color .15s ease; }
.explore__item:hover .explore__arrow { transform: translate(2px, -2px); color: var(--label); }
.explore__num { font-size: 13px; color: var(--label-3); }
.explore__name { font-size: 20px; font-weight: 600; line-height: 1.3; }
.explore__tag { font-size: 15px; color: var(--label-2); }

/* ---------- Responsive ---------- */

@media (max-width: 1200px) {
  .p-hero { flex-direction: column; }
  .p-hero__text { flex: none; width: 100%; }
  .hero-video, .fiche { flex-basis: auto; width: 100%; max-width: var(--hv-max, 560px); align-self: flex-start; }
}

@media (max-width: 1024px) {
  .fit, .pillar-seo__grid { grid-template-columns: minmax(0, 1fr); }
  .pz__head { flex-wrap: wrap; }
  .pz__link { margin-left: auto; }
  .pz__steps { grid-template-columns: minmax(0, 1fr); }
  .included { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .supplements { grid-template-columns: minmax(0, 1fr); }
  .explore { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .pillar-hero { padding-top: 40px; padding-bottom: 48px; }
  .pillar-chips .pill { padding: 8px 14px; font-size: 15px; }
  .pz-list { gap: 24px; }
  .pz { padding: 20px; }
  .pz__head { padding-bottom: 18px; }
  .pz__name { flex-basis: calc(100% - 68px); }
  .pz__tag { margin-left: 68px; }
  .pz__grid { grid-template-columns: minmax(0, 1fr); }
  .pz__box { padding: 20px; }
  .pz__lead { font-size: 17px; }
  .diag-section { padding-block: 24px; }
  .pz-cat { gap: 24px; padding-block: 32px; }
  .pillar-seo__note { flex-direction: column; padding: 22px; }
  .presta-sections { gap: 48px; }
  .presta-sec__body { font-size: 17px; }
  .pz-cat__head { gap: 10px 16px; }
  .pz-cat__head .tile { width: 48px; height: 48px; border-radius: 12px; }
  .pz-cat__head .tile .icon { width: 24px; height: 24px; }
  .pz-cat__lead { grid-column: 1 / -1; font-size: 17px; }
  .combo { gap: 22px; padding: 24px 20px; }
  .combo__item { font-size: 15px; }
  .combo__result { border-radius: 16px; }
  .diag__form-row { grid-template-columns: minmax(0, 1fr); }
  .diag__choice { min-height: 54px; font-size: 16px; }
  .p-hero { padding-top: 32px; padding-bottom: 48px; gap: 40px; }
  .included { grid-template-columns: minmax(0, 1fr); }
  .fit__col, .supplement { padding: 24px; }
  .fiche { padding: 22px; }
  .fiche__cols { grid-template-columns: minmax(0, 1fr); }
  .explore { grid-template-columns: minmax(0, 1fr); }
  .explore__item { min-height: 0; }
  /* Mobile : la carte vidéo remplit la largeur du contenu */
  .hero-video--crop {
    --hv-max: 440px;
    --ux: var(--mcx, var(--cx)); --uy: var(--mcy, var(--cy)); --uw: var(--mcw, var(--cw)); --uh: var(--mch, var(--ch)); --uvr: var(--mvr, var(--vr));
    margin-inline: auto;
  }
}