/* ============================================================================
   MONSIEURWEB — le monde « Grille Suisse à couleur fonctionnelle ».
   Chargé par la HOME SEULEMENT (link dans le corps de pages/index.html) :
   le scope, c'est le chargement. Les 34 autres pages restent sur style.css.
   Il RE-STYLE aussi la nav et le footer partagés (sur cette page seulement).
   Couleur = service, jamais décorative : bleu Bilan · or Présence ·
   rouge Dépannage · vert Hébergement. Source du monde : comp approuvé
   .impeccable/mocks/comp-c-gratuit-geant.png (seed 7417ae3d).
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,100..900;1,62..125,100..900&display=swap');

:root {
  --mw-creme: #faf7ef;
  --mw-encre: #141414;
  --mw-encre-2: #4a4a44;
  --mw-bleu: #2b57d6;
  --mw-or: #e8a020;
  --mw-rouge: #d93a2b;
  --mw-vert: #1e7a4c;
  --mw-hairline: rgba(20, 20, 20, .18);
  --mw-serre: "wdth" 78;
  --mw-large: "wdth" 100;
}

/* ── Base : on écrase le monde crème-doré-serif de style.css ─────────────── */
body {
  background: var(--mw-creme);
  color: var(--mw-encre);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-variation-settings: var(--mw-large);
  line-height: 1.5;
}
h1, h2, h3, .nav__logo {
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-variation-settings: var(--mw-serre);
  font-weight: 780;
  letter-spacing: -.02em;
  line-height: .98;
  color: var(--mw-encre);
}
h1 em, h2 em { font-style: normal; color: inherit; }
.label, .mw-num, .footer__legal, .footer__copy {
  font-family: "JetBrains Mono", monospace;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mw-encre-2);
}
.container { max-width: 1280px; margin: 0 auto; padding: 0 40px; }

/* ── Nav partagée, re-stylée hairline ────────────────────────────────────── */
.nav {
  background: var(--mw-creme);
  border-bottom: 1px solid var(--mw-encre);
  box-shadow: none;
  backdrop-filter: none;
}
.nav__inner { max-width: 1280px; padding: 14px 40px; }
.nav__logo, .nav__logo:hover { color: var(--mw-encre); font-size: 1.05rem;
  /* le nom s'ecrit en DEUX MOTS : avec le letter-spacing serre du monde
     suisse, l'espace d'Archivo devient invisible et le wordmark se relit
     « MONSIEURWEB ». Le word-spacing le rend au lecteur. */
  letter-spacing: -.01em; word-spacing: .22em; }
.nav__logo span { color: var(--mw-bleu); }
.nav__links a { color: var(--mw-encre); font-weight: 500; }
.nav__links a:hover, .nav__links a.is-active { color: var(--mw-bleu); }
.nav .btn {
  background: var(--mw-rouge);
  color: #fff;
  border: 0;
  border-radius: 0;
  font-weight: 700;
  letter-spacing: .02em;
}
.nav .btn:hover { background: #b92e21; transform: none; }
.nav__burger span { background: var(--mw-encre); }

/* ── Boutons du monde ────────────────────────────────────────────────────── */
.mw-btn {
  display: inline-block;
  padding: 16px 34px;
  background: var(--mw-bleu);
  color: #fff;
  font-weight: 700;
  font-size: 1.02rem;
  text-decoration: none;
  border: 0;
  border-radius: 0;
}
.mw-btn:hover { background: #1d41ad; color: #fff; }
.mw-btn--ghost {
  background: transparent;
  color: var(--mw-encre);
  border: 1px solid var(--mw-encre);
}
.mw-btn--ghost:hover { background: var(--mw-encre); color: var(--mw-creme); }
.mw-btnrow { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }

/* ── Hero : le GRATUIT colossal ──────────────────────────────────────────── */
.mw-hero {
  position: relative;
  padding-top: 84px;
  min-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--mw-encre);
}
.mw-hero__grid {
  display: grid;
  grid-template-columns: minmax(340px, 5fr) 7fr;
  gap: 40px;
  align-items: center;
  padding-bottom: 120px;
}
.mw-hero h1 { font-size: clamp(1.6rem, 2.4vw, 2.4rem); margin: 0; }
.mw-hero .mw-lede { margin-top: 22px; max-width: 46ch; font-size: 1.06rem; color: var(--mw-encre-2); }
.mw-hero__gratuit {
  margin: 0;
  text-transform: uppercase;
  font-family: "Archivo", sans-serif;
  font-variation-settings: "wdth" 72;
  font-weight: 850;
  letter-spacing: -.04em;
  line-height: .8;
  font-size: clamp(7rem, 17.5vw, 20rem);
  color: var(--mw-bleu);
  white-space: nowrap;
  justify-self: end;
  user-select: none;
}
.mw-hero__gratuit small {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mw-encre-2);
  transform: none;
  margin-bottom: 10px;
}

/* ── Stations : la bande d'annonce au bas du hero ────────────────────────── */
.mw-stations {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--mw-encre);
}
.mw-station {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 22px 20px;
  color: #fff;
  text-decoration: none;
  min-height: 92px;
  justify-content: center;
}
.mw-station strong { font-size: clamp(1.3rem, 2.2vw, 2rem); font-weight: 800; font-variation-settings: var(--mw-serre); font-feature-settings: "tnum"; line-height: 1; }
.mw-station span { font-family: "JetBrains Mono", monospace; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; opacity: .92; }
.mw-station:hover { filter: brightness(.92); color: #fff; }
.mw-station--or { background: var(--mw-or); color: var(--mw-encre); }
.mw-station--or:hover { color: var(--mw-encre); }
.mw-station--rouge { background: var(--mw-rouge); }
.mw-station--vert { background: var(--mw-vert); }
.mw-station--noir { background: var(--mw-encre); }

/* ── Sections service : même autorité, un prix monumental chacune ────────── */
.mw-section {
  border-bottom: 1px solid var(--mw-encre);
  padding: 110px 0 120px;
}
.mw-sechead { display: flex; align-items: baseline; gap: 18px; margin-bottom: 8px; }
.mw-num { font-size: .8rem; }
.mw-section h2 { font-size: clamp(1.7rem, 2.8vw, 2.6rem); margin: 6px 0 0; }
.mw-prix {
  font-variation-settings: "wdth" 72;
  font-weight: 850;
  font-feature-settings: "tnum";
  letter-spacing: -.03em;
  line-height: .85;
  font-size: clamp(4.4rem, 12vw, 13rem);
  margin: 30px 0 10px;
  white-space: nowrap;
}
.mw-prix--bleu { color: var(--mw-bleu); }
.mw-prix--or { color: #b57a0a; }
.mw-prix--rouge { color: var(--mw-rouge); }
.mw-prix--vert { color: var(--mw-vert); }
.mw-prix small { font-size: .32em; font-weight: 700; letter-spacing: 0; }
.mw-corps { max-width: 62ch; font-size: 1.05rem; color: var(--mw-encre-2); }
.mw-corps strong { color: var(--mw-encre); }
.mw-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }

/* Duo Présence / Présence + et Hébergement / Sauvegarde */
.mw-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--mw-encre); }
.mw-duo > div { padding: 30px 34px 36px; }
.mw-duo > div + div { border-left: 1px solid var(--mw-encre); }
.mw-duo .mw-prix { font-size: clamp(3rem, 6.5vw, 6.4rem); margin: 12px 0 8px; }
.mw-duo h3 { font-size: 1.1rem; margin: 0; }
.mw-duo p { font-size: .98rem; color: var(--mw-encre-2); margin: 10px 0 0; }

/* La grille des paliers (markup .rhythms rendu par build.py), re-stylée ───── */
.rhythms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--mw-encre); margin-top: 36px; }
.rhythm { padding: 30px 34px 36px; border-radius: 0; background: transparent; box-shadow: none; }
.rhythm + .rhythm { border-left: 1px solid var(--mw-encre); }
.rhythm__price {
  font-variation-settings: "wdth" 72;
  font-weight: 850;
  font-feature-settings: "tnum";
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  line-height: .9;
  color: var(--mw-rouge);
}
.rhythm__title { font-weight: 800; font-size: 1.05rem; margin-top: 12px; text-transform: uppercase; letter-spacing: .04em; }
.rhythm__body { font-size: .96rem; color: var(--mw-encre-2); margin-top: 8px; }
.rhythms__note { font-size: .95rem; color: var(--mw-encre-2); max-width: 72ch; margin-top: 18px; }

/* ── La bande MODELE_PRIX (markup .section--soft/.cards2 rendu par build.py) ── */
.section--soft { background: var(--mw-creme); border-bottom: 1px solid var(--mw-encre); padding: 110px 0 120px; }
.section--soft .sechead { display: block; margin-bottom: 8px; }
.section--soft .sechead .label { display: none; }
.section--soft .secnum {
  font-family: "JetBrains Mono", monospace;
  font-size: .8rem;
  letter-spacing: .14em;
  color: var(--mw-encre-2);
  margin-right: 18px;
}
.section--soft h2 { font-size: clamp(1.7rem, 2.8vw, 2.6rem); margin: 6px 0 0; }
.cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--mw-encre); margin-top: 36px; }
.card { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 30px 34px 36px; }
.card + .card { border-left: 1px solid var(--mw-encre); }
.card__title { font-weight: 800; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mw-encre); }
.card__body { font-size: .98rem; color: var(--mw-encre-2); margin-top: 12px; }
.card__take { margin-top: 16px; }
.card__take a { color: var(--mw-bleu); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--mw-bleu); }
.card__take a:hover { color: #1d41ad; }
@media (max-width: 980px) {
  .cards2 { grid-template-columns: 1fr; }
  .card + .card { border-left: 0; border-top: 1px solid var(--mw-encre); }
  .section--soft { padding: 70px 0 80px; }
}

/* ── Preuves : les tabulaires géants ─────────────────────────────────────── */
.mw-preuves { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 40px; }
.mw-preuve strong {
  display: block;
  font-variation-settings: "wdth" 72;
  font-weight: 850;
  font-feature-settings: "tnum";
  font-size: clamp(3.4rem, 8vw, 8rem);
  line-height: .9;
  letter-spacing: -.03em;
}
.mw-preuve span { display: block; margin-top: 12px; font-family: "JetBrains Mono", monospace; font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; color: var(--mw-encre-2); }

/* ── Footer partagé, re-stylé sobre ──────────────────────────────────────── */
.footer { background: var(--mw-creme); color: var(--mw-encre); border-top: 1px solid var(--mw-encre); }
.footer a { color: var(--mw-encre); }
.footer a:hover { color: var(--mw-bleu); }
.footer .nav__logo { color: var(--mw-encre); }
.footer__mission { color: var(--mw-encre-2); }
.footer__bottom { border-top: 1px solid var(--mw-hairline); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .container { padding: 0 22px; }
  /* la home surcharge .nav__inner : elle doit reprendre le régime mobile de
     style.css, sinon le bouton Urgence et le burger repartent hors de l'écran
     (le padding 40px de mon .nav__inner ecrasait celui du regime mobile). */
  .nav__inner { padding: 12px 16px; gap: 12px; }
  .nav__logo, .footer .nav__logo { font-size: 14px; letter-spacing: .12em; }
  .nav__end { gap: 10px; margin-left: 0; }
  .nav .btn { padding-left: 14px; padding-right: 14px; font-size: 12px; }
  .mw-hero__grid { grid-template-columns: 1fr; padding-bottom: 210px; }
  .mw-hero__gratuit { justify-self: start; transform: translateX(-2%); font-size: clamp(5.4rem, 28vw, 12rem); }
  .mw-stations { grid-template-columns: repeat(2, 1fr); }
  .mw-station { min-height: 76px; }
  .mw-cols, .mw-duo, .rhythms, .mw-preuves { grid-template-columns: 1fr; }
  .mw-duo > div + div, .rhythm + .rhythm { border-left: 0; border-top: 1px solid var(--mw-encre); }
  .mw-section { padding: 70px 0 80px; }
  .mw-prix { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   LE MONDE APPLIQUÉ AU SITE ENTIER (2026-08-06, demande d'Yvon).
   La home ne pouvait pas rester seule : cliquer « Hébergement » renvoyait dans
   l'ancien monde crème-doré-serif. Le markup du site est systématique (build.py
   n'émet qu'une quarantaine de classes) : le monde s'applique donc par le CSS,
   sans réécrire les 32 pages. Ce fichier est maintenant chargé par partials/head.html.
   Règle qui gouverne tout : la couleur est FONCTIONNELLE. Le crème est le seul
   ground, l'encre le seul contraste, et les 4 couleurs de service ne servent
   qu'à nommer un service ou un signal. L'alternance décorative des fonds
   (paper / soft / gold) meurt : le rythme vient des hairlines et de l'échelle.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Sections : un seul ground, des hairlines, du souffle ────────────────── */
.section {
  background: var(--mw-creme);
  border-bottom: 1px solid var(--mw-encre);
  padding: 110px 0 120px;
}
.section--paper, .section--soft, .section--gold { background: var(--mw-creme); }
.section--night {
  background: var(--mw-encre);
  color: var(--mw-creme);
  border-bottom: 0;
}
.section--night h1, .section--night h2, .section--night h3 { color: var(--mw-creme); }
.section--night .label, .section--night .secnum { color: rgba(250, 247, 239, .62); }
.section--night p, .section--night .lede, .section--night .prose p { color: rgba(250, 247, 239, .84); }
.section--night .rhythms__note { color: rgba(250, 247, 239, .72); }

/* ── En-tête de section : le numéro mono, le titre monumental ────────────── */
.sechead { display: block; margin-bottom: 26px; }
.secnum {
  font-family: "JetBrains Mono", monospace;
  font-size: .78rem;
  letter-spacing: .14em;
  color: var(--mw-encre-2);
  margin-right: 18px;
}
.sechead h2 { font-size: clamp(1.7rem, 2.8vw, 2.6rem); margin: 10px 0 0; }
.sechead .label { display: none; }   /* eyebrow : banni du monde (cf. home) */
h1 { font-size: clamp(2rem, 4vw, 3.4rem); }
h3 { font-size: 1.12rem; }

/* ── Prose ───────────────────────────────────────────────────────────────── */
.prose { max-width: 68ch; display: flex; flex-direction: column; gap: 20px; }
.prose p { font-size: 1.05rem; color: var(--mw-encre-2); }
.prose strong { color: var(--mw-encre); font-weight: 700; }
.prose a { color: var(--mw-bleu); text-decoration: none; border-bottom: 2px solid var(--mw-bleu); }
.prose ul { padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.prose li { font-size: 1.02rem; color: var(--mw-encre-2); }
.lede { font-size: 1.14rem; color: var(--mw-encre-2); max-width: 62ch; }
.section--night .lede { color: rgba(250, 247, 239, .88); }

/* ── Boutons du site : la même grammaire que la home ─────────────────────── */
.btn {
  display: inline-block;
  padding: 16px 32px;
  background: var(--mw-bleu);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  border: 0;
  border-radius: 0;
  text-decoration: none;
  letter-spacing: 0;
  text-transform: none;
}
.btn:hover { background: #1d41ad; color: #fff; transform: none; }
.btn--ghost { background: transparent; color: var(--mw-encre); border: 1px solid var(--mw-encre); }
.btn--ghost:hover { background: var(--mw-encre); color: var(--mw-creme); }
.section--night .btn--ghost { color: var(--mw-creme); border-color: var(--mw-creme); }
.section--night .btn--ghost:hover { background: var(--mw-creme); color: var(--mw-encre); }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }

/* ── Cartes : des panneaux fermés au trait d'encre, jamais des ombres ────── */
.cards2, .cards3 { display: grid; gap: 0; border: 1px solid var(--mw-encre); margin-top: 36px; }
.cards2 { grid-template-columns: 1fr 1fr; }
.cards3 { grid-template-columns: repeat(3, 1fr); }
.card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 30px 32px 34px;
}
.cards2 .card + .card, .cards3 .card + .card { border-left: 1px solid var(--mw-encre); }
.card__title { font-weight: 800; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mw-encre); }
.card__body { font-size: .98rem; color: var(--mw-encre-2); margin-top: 12px; }
.card__take { margin-top: 16px; }
.card__take a { color: var(--mw-bleu); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--mw-bleu); }
.card--dark { background: var(--mw-encre); color: var(--mw-creme); }
.card--dark .card__title { color: var(--mw-creme); }
.card--dark .card__body { color: rgba(250, 247, 239, .84); }
.section--night .cards2, .section--night .cards3 { border-color: rgba(250, 247, 239, .35); }
.section--night .card + .card { border-left-color: rgba(250, 247, 239, .35); }
.section--night .card__title { color: var(--mw-creme); }
.section--night .card__body { color: rgba(250, 247, 239, .84); }

/* ── Chiffres : la signature du monde ────────────────────────────────────── */
.stats { background: var(--mw-creme); border-bottom: 1px solid var(--mw-encre); padding: 70px 0 76px; }
.stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; }
.stat__num {
  font-variation-settings: "wdth" 72;
  font-weight: 850;
  font-feature-settings: "tnum";
  font-size: clamp(2.6rem, 6vw, 5.4rem);
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--mw-encre);
}
.stat__cap { margin-top: 12px; font-family: "JetBrains Mono", monospace; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mw-encre-2); }
.section--night .stat__num { color: var(--mw-creme); }
.section--night .stat__cap { color: rgba(250, 247, 239, .7); }

/* ── Processus, axes, piliers : même famille de panneaux ─────────────────── */
.steps, .axes { display: grid; gap: 0; border: 1px solid var(--mw-encre); margin-top: 36px; }
.steps { grid-template-columns: repeat(4, 1fr); }
.axes { grid-template-columns: repeat(3, 1fr); }
.step, .axe { padding: 28px 26px 32px; background: transparent; border-radius: 0; box-shadow: none; }
.step + .step, .axe + .axe { border-left: 1px solid var(--mw-encre); }
.step__num, .axe__num {
  font-family: "JetBrains Mono", monospace;
  font-size: .8rem; letter-spacing: .14em; color: var(--mw-encre-2);
}
.step__title, .axe__title { font-weight: 800; font-size: 1.02rem; margin-top: 10px; color: var(--mw-encre); }
.step__body, .axe__pain { font-size: .96rem; color: var(--mw-encre-2); margin-top: 8px; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid rgba(250, 247, 239, .35); margin-top: 36px; }
.pillar { padding: 28px 26px 32px; }
.pillar + .pillar { border-left: 1px solid rgba(250, 247, 239, .35); }
.pillar__title { font-weight: 800; font-size: 1.02rem; color: var(--mw-creme); }
.pillar__body { font-size: .96rem; color: rgba(250, 247, 239, .84); margin-top: 8px; }

/* ── Formulaire de contact ───────────────────────────────────────────────── */
.contact__form { background: transparent; border: 1px solid var(--mw-encre); border-radius: 0; padding: 34px 32px; }
.field__label { font-family: "JetBrains Mono", monospace; font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; color: var(--mw-encre-2); }
.field__input {
  background: #fff;
  border: 1px solid var(--mw-encre);
  border-radius: 0;
  padding: 13px 14px;
  font-family: "Archivo", sans-serif;
  font-size: 1rem;
  color: var(--mw-encre);
}
.field__input:focus { outline: 2px solid var(--mw-bleu); outline-offset: 1px; }
.contact__note { font-size: .95rem; color: var(--mw-encre-2); }

/* ── Le hero des pages intérieures : encre, monumental ───────────────────── */
.section--night h1 { font-size: clamp(2rem, 4.4vw, 3.6rem); letter-spacing: -.025em; }
.hero { background: var(--mw-creme); border-bottom: 1px solid var(--mw-encre); }
.hero__sub { font-size: 1.12rem; color: var(--mw-encre-2); max-width: 60ch; }
.hero__diagram { display: none; }   /* décor de l'ancien monde */

/* ── Responsive du monde étendu ──────────────────────────────────────────── */
@media (max-width: 980px) {
  .section { padding: 70px 0 76px; }
  .cards2, .cards3, .steps, .axes, .pillars, .stats__grid { grid-template-columns: 1fr; }
  .cards2 .card + .card, .cards3 .card + .card, .step + .step, .axe + .axe, .pillar + .pillar {
    border-left: 0; border-top: 1px solid var(--mw-encre);
  }
  .pillar + .pillar { border-top-color: rgba(250, 247, 239, .35); }
  .stats__grid { gap: 30px; }
}

/* ── La police du monde bat celle de l'ancien, partout ───────────────────── */
/* style.css assigne var(--serif) et var(--mono) à des sélecteurs précis (lede,
   prose, hero__sub, btn...). Les redéclarer un à un serait une course : on
   redéfinit plutôt les VARIABLES elles-mêmes. La serif de l'ancien monde
   disparaît du site ; le mono reste, mais réservé à l'étiquetage. */
:root { --serif: "Archivo", "Helvetica Neue", Arial, sans-serif; }
.btn, .mw-btn, .btn--ghost {
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-variation-settings: "wdth" 100;
  text-transform: none;
  letter-spacing: 0;
}
.lede, .hero__sub, .prose p, .prose li, .card__body, .step__body, .axe__pain,
.rhythm__body, .pillar__body, .contact__note, .footer__mission {
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-style: normal;
}

/* ── L'emphase : de l'encre, pas une couleur décorative ──────────────────── */
/* L'ancien monde colorait <em> en doré et en cinabre (h1 em, h2 em, .lede em,
   .prose em). Dans ce monde-ci la couleur NOMME un service ou signale un
   danger : un mot mis en valeur n'est ni l'un ni l'autre. Il prend le poids,
   pas la teinte. */
h1 em, h2 em, h3 em,
.section--night h1 em, .section--night h2 em,
.section--gold h1 em, .section--gold h2 em { color: inherit; font-style: normal; }
.lede em, .prose em, .hero__sub em, .card__body em, .step__body em {
  font-style: normal;
  font-weight: 700;
  color: var(--mw-encre);
}
.section--night .lede em, .section--night .prose em, .section--night .hero__sub em {
  color: var(--mw-creme);
}
.lede strong, .prose strong, .hero__sub strong { font-weight: 700; color: var(--mw-encre); }
.section--night .lede strong, .section--night .prose strong,
.section--night .hero__sub strong { color: var(--mw-creme); }

/* ── Liens de contenu : bleu action, jamais le rouge du signal ───────────── */
/* L'ancien monde peignait tous les liens en cinabre #b22222. Ici le rouge
   appartient au dépannage et à l'urgence : un lien courriel n'est pas une
   alarme. */
.contact__text h2 a, .prose a, .card__body a, .footer a:hover { color: var(--mw-bleu); }
.contact__text h2 a { border-bottom: 3px solid var(--mw-bleu); text-decoration: none; }
.contact__text h2 { font-size: clamp(1.5rem, 3vw, 2.4rem); overflow-wrap: anywhere; }

/* ── Derniers restes de l'ancien monde, vus au rendu ─────────────────────── */
/* Le prix des paliers était en mono à letter-spacing .2em : « 1 5 0   $ ».
   Un chiffre monumental de ce monde-ci est en Archivo tabulaire, serré. */
.rhythm__price {
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -.03em;
}
/* Les colonnes du pied de page et les labels de bloc sombre viraient au doré. */
.footer__col-head, .card--dark .label, .section--night .label {
  color: var(--mw-encre-2);
  font-family: "JetBrains Mono", monospace;
}
.footer { border-top: 1px solid var(--mw-encre); }
.footer__col-head { color: rgba(20, 20, 20, .58); }
.section--night .label, .card--dark .label { color: rgba(250, 247, 239, .6); }
/* Un bloc sombre garde l'encre du monde, pas le brun de l'ancien. */
.card--dark { background: var(--mw-encre); border-color: var(--mw-encre); }
.card--dark .card__title, .card--dark h3 { color: var(--mw-creme); }
.card--dark .card__body, .card--dark p { color: rgba(250, 247, 239, .84); }
.card--dark em, .card--dark strong, .section--night em, .section--night strong {
  color: var(--mw-creme); font-style: normal; font-weight: 700;
}
.card--dark:hover { border-color: var(--mw-encre); }

/* ── Le bloc « flagship » (urgence.html) : le seul composant hors vocabulaire ─ */
/* Un panneau encre qui portait deux textes dorés. Dans ce monde, l'accent d'un
   bloc sombre est le crème, et sa promesse se lit en clair, pas en décoration. */
.flagship { background: var(--mw-encre); border: 1px solid var(--mw-encre); border-radius: 0; }
.flagship__title { color: var(--mw-creme); font-variation-settings: var(--mw-serre); }
.flagship__tag {
  color: rgba(250, 247, 239, .6);
  font-family: "JetBrains Mono", monospace;
  letter-spacing: .13em;
}
.flagship__body { color: rgba(250, 247, 239, .84); font-family: "Archivo", sans-serif; }
.flagship__note {
  color: var(--mw-creme);
  font-style: normal;
  font-weight: 700;
  font-family: "Archivo", sans-serif;
}

/* Derniers cinabres : l'en-tête de colonne du méga-menu et le lien « voir »
   d'une carte. Le rouge est réservé au dépannage et à l'urgence. */
.nav__menu-head { color: var(--mw-encre-2); font-family: "JetBrains Mono", monospace; }
.card__take, .card__take a { color: var(--mw-bleu); }
.nav__menu, .nav__menu-all { background: var(--mw-creme); border: 1px solid var(--mw-encre); border-radius: 0; box-shadow: none; }
.nav__item { color: var(--mw-encre); }
.nav__item:hover { color: var(--mw-bleu); }

/* ════════════════════════════════════════════════════════════════════════════
   FIXES DE LA REVUE DE FINITION (agent frais, 2026-08-06). Chaque bloc porte
   le défaut qu'il tue : sans ça, la prochaine passe les réintroduit.
   ══════════════════════════════════════════════════════════════════════════ */

/* [1] LA COULEUR REDEVIENT FONCTIONNELLE.
   `.rhythm__price` était rouge en dur : le prix de Présence ET celui de
   l'hébergement sortaient aux couleurs du Dépannage. Le rouge nommait trois
   services, donc il n'en nommait plus aucun. Le body porte le slug de la page
   (build.py), la couleur suit le SERVICE. */
.rhythm__price, .mw-prix { color: var(--mw-encre); }
.p-urgence .rhythm__price, .p-index .mw-prix--rouge,
.p-wordpress .rhythm__price, .p-boutique .rhythm__price,
.p-serveur .rhythm__price, .p-courriel .rhythm__price,
.p-fuite-donnees .rhythm__price { color: var(--mw-rouge); }
.p-forfait .rhythm__price, .p-presence .rhythm__price,
.p-vitrine .rhythm__price { color: #b57a0a; }
.p-hebergement .rhythm__price { color: var(--mw-vert); }
.p-le-bilan .rhythm__price { color: var(--mw-bleu); }

/* [2] LE DEUXIÈME GROUND MEURT.
   style.css:1021 peignait `.section--soft .rhythm` et `.section--gold .rhythm`
   en #F5EFE0 (le crème de l'ANCIEN monde) et gagnait par spécificité : des
   cellules beiges sur fond crème, invisibles à une sonde de couleur nommée. */
.section--soft .rhythm, .section--gold .rhythm, .section--paper .rhythm,
.section--soft .card, .section--gold .card { background: transparent; }
.section--night .card { background: transparent; }

/* [3] LES EYEBROWS DE HERO (34 pages).
   La règle existante ne couvrait que ceux des `.sechead`. Le `<span class="label">`
   du hero vit ailleurs et rendait « HÉBERGEMENT AU QUÉBEC » au-dessus du h1.
   L'identité de la page passe désormais par la couleur (filet ci-dessous). */
.section--night > .container > .label,
.hero .label, .section--night .label:first-child { display: none; }

/* [4] PLUS DE CELLULE VIDE DANS UNE GRILLE.
   `.rhythms` était câblé en 3 colonnes : hébergement §06 et forfait §04 n'ont
   que 2 cartes et laissaient un trou dans le cadre. Un trou se lit comme une
   erreur, pas comme du souffle. */
.rhythms { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.stats__grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* [5] DERNIERS DORÉS, invisibles à une sonde de texte (ils vivent sur des
   états et des fonds) : le lien « voir » d'une carte en bande encre, et le
   voile laiteux que l'ancien monde posait sur ces cartes. */
.section--night .card__take, .section--night .card__take a { color: var(--mw-creme); }
.section--night .card__take a { border-bottom: 2px solid rgba(250, 247, 239, .5); }

/* [6] LE PREMIER VIEWPORT INTÉRIEUR PORTE LE MONDE. (v2, après verdict)
   v1 était fausse deux fois : le filet par défaut était encre-sur-encre (donc
   invisible sur les ~20 pages hors liste), et il tombait sur CHAQUE bande
   encre, y compris celles du milieu de page : un signal qui se répète ne
   signale plus « début de page ». Il ne vise plus que la PREMIÈRE section. */
.section--night:first-of-type { border-bottom: 10px solid var(--mw-bleu); }
.p-urgence .section--night:first-of-type, .p-wordpress .section--night:first-of-type,
.p-boutique .section--night:first-of-type, .p-serveur .section--night:first-of-type,
.p-courriel .section--night:first-of-type, .p-fuite-donnees .section--night:first-of-type,
.p-securite .section--night:first-of-type, .p-ia .section--night:first-of-type {
  border-bottom-color: var(--mw-rouge);
}
.p-forfait .section--night:first-of-type, .p-presence .section--night:first-of-type,
.p-vitrine .section--night:first-of-type, .p-solutions .section--night:first-of-type {
  border-bottom-color: var(--mw-or-lisible);
}
.p-hebergement .section--night:first-of-type { border-bottom-color: var(--mw-vert); }

/* [1b] UN SERVICE, UNE SEULE VALEUR DE COULEUR. (régression relevée au verdict)
   Le filet du forfait sortait en #e8a020 et son prix en #b57a0a : deux dorés
   pour un service, sur une page dont la thèse est qu'une couleur nomme UNE
   chose. L'or du monde a maintenant une seule valeur, lisible sur crème
   comme sur encre. */
:root { --mw-or-lisible: #b57a0a; }
.p-forfait .rhythm__price, .p-presence .rhythm__price,
.p-vitrine .rhythm__price { color: var(--mw-or-lisible); }

/* [5b] LE LIEN D'UNE CARTE SOMBRE. (partial relevé au verdict)
   v1 ciblait la SECTION encre ; une carte `.card--dark` posée dans une section
   CLAIRE gardait un lien bleu sur fond encre, à 3,0:1. Le fond commande, pas
   la section. */
.card--dark .card__take, .card--dark .card__take a,
.section--night .card__take, .section--night .card__take a { color: var(--mw-creme); }
.card--dark .card__take a, .section--night .card__take a {
  border-bottom: 2px solid rgba(250, 247, 239, .5);
}

/* [7] LE RYTHME DES PAGES LONGUES. (v2, après verdict)
   v1 matchait TOUTES les sections dès la 3e : un seul pas du début à la fin,
   donc le métronome intact sur la moitié basse. Et le cran de titre s'allumait
   après n'importe quelle bande encre, y compris au deux tiers de la page.
   v2 : le cran n'appartient qu'à la section qui SUIT LE HERO, et le pas
   alterne réellement, section par section. */
.section--night:first-of-type + .section { padding: 130px 0 120px; }
.section--night:first-of-type + .section .sechead h2 { font-size: clamp(2rem, 3.4vw, 3.1rem); }
.section:nth-of-type(even) { padding: 84px 0 92px; }
.section:nth-of-type(odd) { padding: 118px 0 126px; }
.section--night:first-of-type { padding-top: 150px; padding-bottom: 130px; }

/* ── RÉGRESSIONS DE MA PROPRE PASSE (verdict ronde 2) ────────────────────── */

/* [R-a] LE MOBILE PORTAIT LE RYTHME DU DESKTOP. Le plus grave des trois.
   `.section:nth-of-type(even/odd)` pèse (0,2,0) et ce fichier charge après
   style.css : les deux paliers responsives de l'ancien monde (max-width 1000
   et 720) sont morts, une media query n'ajoutant AUCUNE spécificité. Mesuré :
   paddings identiques à 390px et à 1472px. Les paliers sont repris ici, à la
   même spécificité que les règles qui les avaient tués. */
@media (max-width: 1000px) {
  .section, .section:nth-of-type(even), .section:nth-of-type(odd) { padding: 88px 0 94px; }
  .section--night:first-of-type + .section { padding: 94px 0 94px; }
  .section--night:first-of-type { padding-top: 120px; padding-bottom: 100px; }
}
@media (max-width: 720px) {
  .section, .section:nth-of-type(even), .section:nth-of-type(odd) { padding: 64px 0 70px; }
  .section--night:first-of-type + .section { padding: 70px 0 70px; }
  .section--night:first-of-type { padding-top: 104px; padding-bottom: 84px; }
  .stats { padding: 54px 0 58px; }
}

/* [R-b] LE CRAN DE TITRE ÉTAIT INERTE SUR 2 PAGES SUR 5. `+ .section` ne
   matche pas quand la 2e section porte une autre classe (`solutions.html` a
   `<section class="stats">`) ni quand elle n'a pas de `.sechead h2`
   (`a-propos.html` ouvre sur une grille de chiffres). On couvre le saut. */
.section--night:first-of-type + .stats + .section .sechead h2,
.section--night:first-of-type + .section + .section .sechead h2:only-child {
  font-size: clamp(2rem, 3.4vw, 3.1rem);
}
.section--night:first-of-type + .stats + .section { padding-top: 126px; }

/* [R-c] DEUX ORS DANS LE SITE : la station « Forfait Présence » de la home
   gardait #e8a020 pendant que la page forfait passait à #b57a0a. Un service,
   une valeur : c'est la règle du monde, elle vaut aussi pour la home. */
.mw-station--or { background: var(--mw-or-lisible); color: #fff; }
.mw-station--or:hover { color: #fff; }
.mw-prix--or { color: var(--mw-or-lisible); }