/* ==========================================================================
   Accueil « Maison II » (23/09/2026)
   --------------------------------------------------------------------------
   Lena : « met le site maison 2 sur le vrai site en ligne ». Nuit laquée et
   or, Didone droite (Bodoni Moda), chiffres en mono, cartes à double coque.
   Chargé par accueil.html seulement, APRÈS style.css. Tout est rangé sous
   body.maison ; les composants propres à la page portent le préfixe m-.
   Quatre classes de style.css restent utilisées parce que les tests les
   cherchent (preuves, balance, avis-carte, cta discord) : elles sont
   entièrement réhabillées ici.
   ========================================================================== */

.maison {
  --m-nuit: #100D0A;
  --m-laque: #16110D;
  --m-coeur: #1C1611;
  --m-coeur-bas: #161210;
  --m-filet: #2E251D;
  --m-filet-doux: rgba(242, 201, 138, .12);
  --m-ivoire: #F4EEE4;
  --m-ivoire-2: #D8CFC2;
  --m-taupe: #AA9E8E;
  --m-taupe-2: #857A6D;
  --m-or: #D9A04B;
  --m-or-clair: #F2C98A;
  --m-or-fond: rgba(217, 160, 75, .10);
  --m-encre-or: #1B1308;
  --m-vert: #93C9A4;
  --m-rouge: #E8927F;
  --m-rouge-fond: rgba(232, 146, 127, .14);
  --m-serif: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --m-sans: "Public Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --m-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --m-ressort: cubic-bezier(.32, .72, 0, 1);
  --m-sortie: cubic-bezier(.16, 1, .3, 1);
  --m-gouttiere: clamp(16px, 4vw, 44px);
  background: var(--m-nuit);
  color: var(--m-ivoire);
  color-scheme: dark;
  font: 400 1.0625rem/1.65 var(--m-sans);
  overflow-x: hidden;
}
html:has(body.maison) { scroll-behavior: smooth; scrollbar-color: #3B2F24 #100D0A; }
.maison ::selection { background: var(--m-or); color: var(--m-encre-or); }
.maison :focus-visible { outline: 2px solid var(--m-or-clair); outline-offset: 3px; border-radius: 8px; }
.maison :where(a) { color: inherit; text-underline-offset: .24em; text-decoration-thickness: 1px; }
/* Remises à zéro en :where() : spécificité d'une seule classe, pour que
   chaque composant m- déclaré plus bas garde ses marges (23/09). */
.maison :where(h1, h2, h3) { font-weight: 500; text-wrap: balance; margin: 0; color: var(--m-ivoire); }
.maison :where(p, ol, ul, dl, dd, figure, blockquote) { margin: 0; }
.maison :where(ol, ul) { padding: 0; list-style: none; }
.maison svg.i { width: 1em; height: 1em; flex: none; fill: currentColor; }

/* Grain de laque, fixe ; lueur d'or basse derrière le haut de page. */
.maison::after {
  content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}
.maison::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1000px; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 55% at 78% 22%, rgba(217, 160, 75, .10), transparent 70%),
              radial-gradient(40% 40% at 12% 10%, rgba(242, 201, 138, .05), transparent 70%);
}

/* La page est pleine largeur : .wrap de base.html s'efface. */
.maison > .wrap { max-width: none; padding: 0; }
.m-wrap { max-width: 1180px; margin-inline: auto; padding-inline: var(--m-gouttiere); }

/* ------------------------------------------------------------ bandeau */
.maison .bandeau {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 12px;
  padding: 10px 16px; background: #1D1710; border-bottom: 1px solid var(--m-filet);
  color: var(--m-or-clair); font-size: .88rem; line-height: 1.4; text-align: center; text-decoration: none;
}
.maison .bandeau b { color: var(--m-ivoire); font-weight: 600; }
.maison .bandeau-suite { color: var(--m-taupe); }
.maison .bandeau:hover .bandeau-suite { color: var(--m-ivoire-2); }
.maison .bandeau-point { background: var(--m-or); }

/* ------------------------------------------ en-tête : pilule flottante */
.maison header {
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + 12px); z-index: 30;
  display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px); flex-wrap: nowrap; row-gap: 0;
  width: calc(100% - 2 * var(--m-gouttiere)); max-width: 1180px; margin: 12px auto 0;
  padding: 7px 7px 7px 22px; border-radius: 999px;
  background: rgba(20, 16, 12, .86); border: 1px solid var(--m-filet-doux);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.maison header .mark { font-family: var(--m-serif); font-size: 1.32rem; letter-spacing: -.01em; color: var(--m-ivoire); white-space: nowrap; }
.maison header .mark em { font-style: italic; color: var(--m-or); }
.maison header nav { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 26px); margin-left: auto; width: auto; flex-wrap: nowrap; }
.maison header nav a, .maison header nav button { font: 400 .9rem/1 var(--m-sans); color: var(--m-taupe); text-decoration: none; white-space: nowrap; }
.maison header nav a:hover, .maison header nav button:hover { color: var(--m-ivoire); }
.maison header nav a.actif {
  display: inline-flex; align-items: center; padding: 12px 20px; border-radius: 999px;
  background: var(--m-or); color: var(--m-encre-or); font-weight: 600;
  transition: background-color .4s var(--m-ressort), transform .5s var(--m-ressort);
}
.maison header nav a.actif:hover { background: var(--m-or-clair); color: var(--m-encre-or); }
.maison header nav a.actif:active { transform: scale(.98); }
@media (max-width: 1180px) { .maison header nav .m-second { display: none; } }
@media (max-width: 960px) { .maison header nav .m-ancre { display: none; } }
@media (max-width: 560px) {
  .maison header { padding-left: 16px; gap: 10px; }
  .maison header .mark { font-size: 1.2rem; }
  .maison header nav { margin-left: auto; width: auto; gap: 12px; }
  .maison header nav a.actif { padding: 11px 16px; }
}
.maison .messages { max-width: 1180px; margin: 20px auto 0 !important; padding-inline: var(--m-gouttiere); }

/* ------------------------------------------------------------- boutons */
.maison .m-btn {
  display: inline-flex; align-items: center; gap: 14px; white-space: nowrap; align-self: auto;
  padding: 7px 7px 7px 24px; border-radius: 999px; border: 1px solid transparent;
  font: 600 .98rem/1 var(--m-sans); text-decoration: none; cursor: pointer; box-shadow: none; opacity: 1;
  transition: transform .5s var(--m-ressort), background-color .4s var(--m-ressort), color .4s var(--m-ressort), border-color .4s var(--m-ressort);
}
.maison .m-btn .m-rond { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; transition: transform .55s var(--m-ressort); }
.maison .m-btn .m-rond .i { width: 17px; height: 17px; }
.maison .m-btn:hover { opacity: 1; box-shadow: none; }
.maison .m-btn:hover .m-rond { transform: translate(2px, -2px) scale(1.06); }
.maison .m-btn:active { transform: scale(.98); }
.maison .m-btn-or { background: var(--m-or); color: var(--m-encre-or); }
.maison .m-btn-or .m-rond { background: rgba(27, 19, 8, .12); }
.maison .m-btn-or:hover { background: var(--m-or-clair); transform: none; }
.maison .cta.discord.m-btn { padding: 15px 22px; background: transparent; color: var(--m-ivoire); border-color: var(--m-filet); }
.maison .cta.discord.m-btn:hover { border-color: var(--m-or); color: var(--m-or-clair); transform: none; }
.maison .m-btn-petit { padding: 5px 5px 5px 18px; font-size: .92rem; gap: 10px; }
.maison .m-btn-petit .m-rond { width: 32px; height: 32px; }
.m-lien-fleche {
  display: inline-flex; align-items: center; gap: 8px; color: var(--m-ivoire-2); font-weight: 500;
  text-decoration: none; border-bottom: 1px solid var(--m-filet); padding-bottom: 3px;
  transition: color .3s var(--m-ressort), border-color .3s var(--m-ressort);
}
.m-lien-fleche .i { width: 16px; height: 16px; transition: transform .45s var(--m-ressort); }
.m-lien-fleche:hover { color: var(--m-or-clair); border-color: var(--m-or); }
.m-lien-fleche:hover .i { transform: translateX(3px); }

/* ---------------------------------------------------------------- héros */
.maison section { padding: 0; border-top: 0; }
.maison section.m-hero { padding-block: clamp(52px, 8vw, 104px) clamp(72px, 9vw, 128px); }
.m-hero-grille { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: clamp(40px, 6vw, 90px); align-items: center; }
@media (max-width: 900px) { .m-hero-grille { grid-template-columns: 1fr; } }
.maison .m-titre { font-family: var(--m-serif); font-size: clamp(3.3rem, 8.6vw, 6rem); line-height: .98; letter-spacing: -.028em; }
.m-titre .m-ligne { display: block; overflow: hidden; padding-bottom: .06em; }
.m-titre .m-ligne span { display: inline-block; }
.m-titre .m-or { color: var(--m-or-clair); }
.m-hero-texte > p { font-size: clamp(1.12rem, 1.55vw, 1.3rem); color: var(--m-ivoire-2); max-width: 34ch; margin-top: 26px; }
.m-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 38px; }

/* Double coque : une plaque posée dans son plateau. */
.m-coque {
  padding: 7px; border-radius: 30px;
  background: linear-gradient(180deg, rgba(242, 201, 138, .09), rgba(242, 201, 138, .02));
  border: 1px solid var(--m-filet-doux); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .8);
}
.m-coeur { border-radius: 24px; background: linear-gradient(180deg, var(--m-coeur), var(--m-coeur-bas)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }

.m-alerte { max-width: 470px; justify-self: end; width: 100%; }
@media (max-width: 900px) { .m-alerte { justify-self: stretch; max-width: 520px; } }
.m-alerte .m-coeur { padding: 22px 22px 20px; display: grid; gap: 16px; }
.m-al-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .82rem; color: var(--m-taupe); }
.m-al-app { display: inline-flex; align-items: center; gap: 9px; color: var(--m-ivoire); font-weight: 600; }
.m-al-app .i { width: 20px; height: 20px; color: var(--m-or-clair); }
.m-al-vivant { display: inline-flex; align-items: center; gap: 7px; color: var(--m-vert); font-weight: 500; }
.m-al-vivant::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: m-pouls 2.4s var(--m-sortie) infinite; }
@keyframes m-pouls { 0% { box-shadow: 0 0 0 0 rgba(147, 201, 164, .5); } 70%, 100% { box-shadow: 0 0 0 7px rgba(147, 201, 164, 0); } }
.m-al-corps { display: grid; gap: 14px; transition: opacity .38s var(--m-ressort), transform .5s var(--m-ressort), filter .38s; }
.m-al-corps.part { opacity: 0; transform: translateY(-10px); filter: blur(4px); }
.m-al-quand { font-size: .8rem; color: var(--m-taupe); }
.m-al-titre { font-family: var(--m-serif); font-size: clamp(1.7rem, 2.6vw, 2.05rem); line-height: 1.08; letter-spacing: -.015em; }
.m-al-cat { color: var(--m-taupe); font-size: .9rem; margin-top: 4px; }
.m-al-cat:empty { display: none; }
.m-al-lignes { display: grid; gap: 8px; }
.m-al-lignes div { display: flex; justify-content: space-between; gap: 12px; font-size: .93rem; color: var(--m-taupe); }
.m-al-lignes dd { color: var(--m-ivoire); font-family: var(--m-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.m-al-gain { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--m-or-fond); border: 1px solid rgba(217, 160, 75, .22); }
.m-al-gain span { color: var(--m-or-clair); font-size: .92rem; }
.m-al-gain b { font-family: var(--m-serif); font-weight: 500; font-size: clamp(2.1rem, 3.4vw, 2.6rem); line-height: 1; color: var(--m-or-clair); white-space: nowrap; }
.m-al-controles { display: flex; flex-wrap: wrap; gap: 8px; }
.m-al-controles li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: rgba(147, 201, 164, .08); color: var(--m-vert); font-size: .8rem; }
.m-al-controles .i { width: 14px; height: 14px; }
.m-alerte figcaption { margin-top: 14px; padding-inline: 10px; font-size: .86rem; color: var(--m-taupe); }

@media (prefers-reduced-motion: no-preference) {
  .m-titre .m-ligne span { animation: m-monte 1.1s var(--m-sortie) both; }
  .m-titre .m-ligne:nth-child(2) span { animation-delay: .1s; }
  .m-hero-texte > p, .m-hero-texte .m-actions { animation: m-apparait 1s var(--m-sortie) .25s both; }
  .m-alerte { animation: m-pose 1.3s var(--m-sortie) .15s both; }
}
@keyframes m-monte { from { transform: translateY(60%); } to { transform: none; } }
@keyframes m-apparait { from { opacity: .35; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes m-pose { from { opacity: .4; transform: translateY(28px) scale(.985); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ sections */
.maison section.m-bloc { padding-block: clamp(72px, 9vw, 128px); }
.maison .m-bloc h2 { font-family: var(--m-serif); font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.04; letter-spacing: -.02em; max-width: 20ch; }
.maison #verifications h2, .maison #tarif h2 { max-width: 26ch; }
.m-intro { color: var(--m-ivoire-2); font-size: clamp(1.05rem, 1.3vw, 1.16rem); max-width: 62ch; margin-top: 22px; }
.m-intro b { color: var(--m-or-clair); font-weight: 600; }
.m-note { color: var(--m-taupe); font-size: .9rem; max-width: 72ch; margin-top: 36px; }
.maison .m-trait { border-top: 1px solid var(--m-filet); }

/* Les preuves : une phrase, pas un tableau de chiffres. */
.maison .preuves {
  display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 12px; margin-top: 22px;
  background: none; border: 0; border-radius: 0; overflow: visible; color: var(--m-taupe); font-size: .95rem;
}
.maison .preuves .i { width: 18px; height: 18px; margin-top: .22em; color: var(--m-vert); }
.m-mot { white-space: nowrap; }

/* ------------------------------------------------------ les affaires */
.m-tableau { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); margin-top: clamp(40px, 5vw, 64px); align-items: start; }
@media (max-width: 960px) { .m-tableau { grid-template-columns: 1fr; } }
.maison .m-tableau h3 { font: 600 .95rem/1.4 var(--m-sans); color: var(--m-ivoire-2); margin-bottom: 14px; }
.maison .m-tableau h3 span { font-weight: 400; color: var(--m-taupe); }
.m-liste-affaires li { display: grid; grid-template-columns: minmax(0, 1fr) auto 5.4rem; align-items: center; gap: 16px; padding: 15px 4px; border-bottom: 1px solid var(--m-filet); }
.m-liste-affaires li:first-child { border-top: 1px solid var(--m-filet); }
.m-a-quand { font-family: var(--m-mono); font-size: .78rem; color: var(--m-taupe-2); }
.m-a-piece b { display: block; font-weight: 500; line-height: 1.3; }
.m-a-piece i { font-style: normal; font-size: .84rem; color: var(--m-taupe); }
.m-a-chiffres { display: inline-flex; align-items: center; gap: 8px; font-family: var(--m-mono); font-size: .86rem; color: var(--m-taupe); white-space: nowrap; }
.m-a-chiffres .i { width: 14px; height: 14px; color: var(--m-taupe-2); }
.m-a-chiffres .fin { color: var(--m-ivoire); }
.m-a-gain { text-align: right; font-family: var(--m-mono); font-size: 1.02rem; color: var(--m-or-clair); font-weight: 500; white-space: nowrap; }
@media (max-width: 620px) {
  .m-liste-affaires li { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding-block: 14px; }
  .m-a-quand { grid-column: 1 / -1; order: 3; }
  .m-a-chiffres { grid-column: 1; }
  .m-a-gain { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: 1.1rem; }
}
.m-grosses { display: grid; gap: 14px; }
.m-grosse .m-coeur { padding: 18px 20px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: end; }
.m-grosse .g-nom { font-family: var(--m-serif); font-size: 1.45rem; line-height: 1.1; }
.m-grosse .g-detail { grid-column: 1; font-family: var(--m-mono); font-size: .8rem; color: var(--m-taupe); white-space: nowrap; }
.m-grosse .g-detail .i { width: 12px; height: 12px; vertical-align: -1px; }
.m-grosse .g-gain { grid-column: 2; grid-row: 1 / span 2; font-family: var(--m-serif); font-size: 2.1rem; line-height: 1; color: var(--m-or-clair); white-space: nowrap; }
.m-grosse .g-quand { grid-column: 1 / -1; font-size: .78rem; color: var(--m-taupe-2); }

/* ------------------------------------------------ les six vérifications */
.m-recit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 90px); margin-top: clamp(44px, 6vw, 72px); }
@media (max-width: 900px) { .m-recit { grid-template-columns: 1fr; } }
.m-etapes { display: grid; gap: clamp(36px, 9vh, 96px); padding-bottom: 14vh; }
@media (max-width: 900px) { .m-etapes { padding-bottom: 0; gap: 34px; } }
.m-etape { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 6px 18px; transition: opacity .6s var(--m-ressort); }
@media (min-width: 901px) { .js .m-etape { opacity: .38; } .js .m-etape.active { opacity: 1; } }
.m-etape .m-pastille { grid-row: 1 / span 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--m-or-fond); color: var(--m-or-clair); border: 1px solid rgba(217, 160, 75, .2); }
.m-etape .m-pastille .i { width: 22px; height: 22px; }
.maison .m-etape h3 { font-family: var(--m-serif); font-size: clamp(1.45rem, 2.2vw, 1.8rem); line-height: 1.12; }
.m-etape p { color: var(--m-ivoire-2); max-width: 46ch; }
.m-recit-colle { position: sticky; top: 118px; align-self: start; }
@media (max-width: 900px) { .m-recit-colle { position: static; } }
.m-speedy .m-coeur { padding: 22px; display: grid; gap: 10px; }
.m-ctrl { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; padding: 11px 12px; border-radius: 14px; font-size: .92rem; color: var(--m-taupe); border: 1px solid transparent; transition: background-color .5s var(--m-ressort), border-color .5s var(--m-ressort), color .5s var(--m-ressort), transform .6s var(--m-ressort); }
.m-ctrl .m-coche { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--m-filet); color: transparent; transition: all .5s var(--m-ressort); }
.m-ctrl .m-coche .i { width: 14px; height: 14px; }
.m-ctrl b { color: var(--m-ivoire); font-weight: 600; }
.m-ctrl.fait { color: var(--m-ivoire-2); }
.m-ctrl.fait .m-coche { background: var(--m-or); border-color: var(--m-or); color: var(--m-encre-or); }
.m-ctrl.courant { background: var(--m-or-fond); border-color: rgba(217, 160, 75, .3); transform: translateX(4px); }
.m-speedy .m-al-gain { margin-top: 6px; }

/* --------------------------------------------------------------- duel */
.m-duel { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: clamp(40px, 5vw, 60px); }
@media (max-width: 820px) { .m-duel { grid-template-columns: 1fr; } }
.m-annonce .m-coeur { padding: 24px; display: grid; gap: 16px; height: 100%; align-content: start; }
.m-annonce-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.m-annonce-tete b { font-weight: 600; }
.m-annonce-tete span { font-family: var(--m-mono); font-size: 1.15rem; white-space: nowrap; }
.m-etat { font-size: .84rem; color: var(--m-taupe); }
.m-annonce blockquote { font-family: var(--m-serif); font-size: 1.12rem; line-height: 1.55; color: var(--m-ivoire-2); }
.m-annonce mark { background: var(--m-rouge-fond); color: #F6B7A8; padding: 0 3px; border-radius: 4px; }
.m-verdict { display: inline-flex; align-items: center; gap: 9px; justify-self: start; padding: 9px 14px; border-radius: 999px; font-weight: 600; font-size: .9rem; }
.m-verdict .i { width: 17px; height: 17px; }
.m-verdict.non { background: var(--m-rouge-fond); color: var(--m-rouge); }
.m-verdict.oui { background: rgba(147, 201, 164, .12); color: var(--m-vert); }
.m-duel-fin { margin-top: 30px; }

/* ---------------------------------------------------------------- avis */
.m-mur { columns: 3 280px; column-gap: 16px; margin-top: clamp(40px, 5vw, 60px); }
.maison .avis-carte { break-inside: avoid; display: block; margin: 0 0 16px; padding: 22px; border-radius: 22px; background: var(--m-laque); border: 1px solid var(--m-filet); }
.maison .avis-carte:nth-child(3n + 2) { background: linear-gradient(180deg, rgba(217, 160, 75, .07), var(--m-laque)); }
.maison .avis-carte blockquote { margin: 0; font-size: 1.06rem; line-height: 1.55; color: var(--m-ivoire); }
.maison .avis-carte figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 0; border-top: 0; font-size: .84rem; color: var(--m-taupe); }
.maison .avis-carte figcaption b { color: var(--m-ivoire-2); font-weight: 600; font-size: .84rem; }
.maison .avis-carte figcaption span { margin-left: 0; }
.m-mur-bas { margin-top: 26px; }

/* ---------------------------------------------------- comment ça marche */
.m-parcours { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: clamp(40px, 5vw, 60px); position: relative; }
.m-parcours::before { content: ""; position: absolute; left: 23px; right: 23px; top: 23px; height: 1px; background: linear-gradient(90deg, var(--m-or), rgba(217, 160, 75, .15)); }
.m-parcours li { position: relative; display: grid; gap: 10px; align-content: start; padding-right: 10px; }
.m-parcours .m-pastille { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--m-nuit); border: 1px solid var(--m-or); color: var(--m-or-clair); font-family: var(--m-serif); font-size: 1.2rem; }
.maison .m-parcours h3 { font: 600 1.05rem/1.3 var(--m-sans); margin-top: 8px; }
.m-parcours p { color: var(--m-taupe); font-size: .95rem; }
@media (max-width: 860px) {
  .m-parcours { grid-template-columns: 1fr; gap: 26px; }
  .m-parcours::before { left: 23px; right: auto; top: 23px; bottom: 23px; width: 1px; height: auto; background: linear-gradient(180deg, var(--m-or), rgba(217, 160, 75, .15)); }
  .m-parcours li { grid-template-columns: 46px minmax(0, 1fr); gap: 4px 18px; }
  .m-parcours .m-pastille { grid-row: 1 / span 2; }
  .maison .m-parcours h3 { margin-top: 10px; }
}
.m-accompagne { margin-top: clamp(48px, 6vw, 80px); }
.m-accompagne .m-coeur { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px 48px; padding: clamp(26px, 4vw, 46px); align-items: center; }
@media (max-width: 820px) { .m-accompagne .m-coeur { grid-template-columns: 1fr; } }
.maison .m-accompagne h3 { font-family: var(--m-serif); font-size: clamp(1.8rem, 3.2vw, 2.5rem); line-height: 1.08; }
.m-accompagne p { color: var(--m-ivoire-2); margin-top: 14px; max-width: 52ch; }
.m-garanties { display: grid; gap: 12px; }
.m-garanties li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .025); border: 1px solid var(--m-filet); }
.m-garanties .m-pastille { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--m-or-fond); color: var(--m-or-clair); }
.m-garanties .i { width: 20px; height: 20px; }
.m-garanties b { display: block; font-weight: 600; }
.m-garanties li > span > span { color: var(--m-taupe); font-size: .9rem; }

/* ---------------------------------------------------------- parrainage */
.maison section.m-parrain { border-block: 1px solid var(--m-filet); padding-block: clamp(56px, 7vw, 92px); background: linear-gradient(180deg, rgba(217, 160, 75, .05), transparent); }
.m-parrain-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px 64px; align-items: center; }
@media (max-width: 860px) { .m-parrain-grille { grid-template-columns: 1fr; } }
.maison .m-parrain h2 { font-family: var(--m-serif); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.06; letter-spacing: -.02em; }
.m-parrain-texte { color: var(--m-ivoire-2); }
.m-parrain-etapes { display: grid; gap: 12px; margin-top: 18px; }
.m-parrain-etapes li { display: flex; gap: 14px; align-items: baseline; color: var(--m-ivoire-2); }
.m-parrain-etapes code { white-space: nowrap; }
.m-parrain-etapes li::before { content: ""; flex: none; width: 18px; height: 1px; background: var(--m-or); transform: translateY(-4px); }
.maison .m-parrain code { font-family: var(--m-mono); font-size: .9em; color: var(--m-or-clair); background: var(--m-or-fond); padding: 2px 7px; border-radius: 6px; }
.m-parrain .m-lien-fleche { margin-top: 20px; }

/* --------------------------------------------------------------- guides */
.m-guides { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: clamp(32px, 4vw, 48px); }
.m-guide { display: grid; gap: 10px; align-content: start; padding: 26px; border-radius: 22px; background: var(--m-laque); border: 1px solid var(--m-filet); text-decoration: none; transition: border-color .4s var(--m-ressort), transform .5s var(--m-ressort); }
.m-guide:hover { border-color: rgba(217, 160, 75, .5); transform: translateY(-3px); }
.m-guide small { font-size: .82rem; color: var(--m-taupe); }
.maison .m-guide h3 { font-family: var(--m-serif); font-size: 1.6rem; line-height: 1.12; }
.m-guide p { color: var(--m-taupe); font-size: .95rem; }

/* ------------------------------------------------------------------ FAQ */
.m-faq-grille { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px 72px; align-items: start; }
@media (max-width: 900px) { .m-faq-grille { grid-template-columns: 1fr; } }
.m-faq-tete { position: sticky; top: 118px; }
@media (max-width: 900px) { .m-faq-tete { position: static; } }
.m-faq-tete p { color: var(--m-taupe); margin-top: 18px; max-width: 34ch; }
.m-faq-tete .m-lien-fleche { margin-top: 20px; }
.maison .faq { display: block; }
.maison .faq details { border-bottom: 1px solid var(--m-filet); }
.maison .faq details:first-child { border-top: 1px solid var(--m-filet); }
.maison .faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  position: static; padding: 22px 2px; font: 500 1.06rem/1.4 var(--m-sans); color: var(--m-ivoire); transition: color .3s;
}
.maison .faq summary::-webkit-details-marker { display: none; }
.maison .faq summary::after { content: none; }
.maison .faq summary:hover { color: var(--m-or-clair); }
.maison .faq summary .m-plus { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--m-filet); color: var(--m-or-clair); transition: transform .5s var(--m-ressort), background-color .4s; }
.maison .faq summary .m-plus .i { width: 16px; height: 16px; }
.maison .faq details[open] summary .m-plus { transform: rotate(45deg); background: var(--m-or-fond); }
.maison .faq p { margin: 0; padding: 0 2px 24px; color: var(--m-ivoire-2); max-width: 64ch; font-size: 1rem; line-height: 1.65; }
.maison .faq code { font-family: var(--m-mono); font-size: .88em; color: var(--m-or-clair); background: var(--m-or-fond); padding: 1px 6px; border-radius: 6px; }

/* --------------------------------------------------------------- calcul */
.maison .balance { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px 72px; align-items: center; }
@media (max-width: 900px) { .maison .balance { grid-template-columns: 1fr; gap: 28px; } }
.m-exemple { display: grid; gap: 2px; margin-top: 30px; max-width: 420px; }
.m-exemple div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 2px; border-bottom: 1px solid var(--m-filet); color: var(--m-taupe); }
.m-exemple div:last-child { border-bottom: 0; color: var(--m-ivoire); }
.m-exemple b { font-family: var(--m-mono); font-weight: 500; color: var(--m-ivoire); white-space: nowrap; }
.m-exemple div:last-child b { font-family: var(--m-serif); font-size: 1.9rem; line-height: 1; color: var(--m-or-clair); }
.m-simulateur .m-coeur { padding: clamp(24px, 3.4vw, 36px); display: grid; gap: 22px; }
.m-curseur { display: grid; gap: 10px; }
.maison .m-curseur label { display: flex; flex-direction: row; justify-content: space-between; gap: 12px; color: var(--m-taupe); font-size: .95rem; }
.m-curseur output { color: var(--m-ivoire); font-family: var(--m-mono); white-space: nowrap; }
.m-curseur input[type="range"] { width: 100%; accent-color: var(--m-or); height: 28px; }
.m-verdict-sim { font-family: var(--m-serif); font-size: clamp(1.55rem, 2.6vw, 2.05rem); line-height: 1.2; border-top: 1px solid var(--m-filet); padding-top: 22px; }
.m-verdict-sim b { color: var(--m-or-clair); font-weight: 500; }

/* ---------------------------------------------------------------- tarif */
.m-tarif { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 56px; margin-top: clamp(40px, 5vw, 60px); align-items: start; }
@media (max-width: 900px) { .m-tarif { grid-template-columns: 1fr; } }
.m-prix .m-coeur { padding: clamp(24px, 3.6vw, 40px); display: grid; gap: 22px; }
.m-bascule { display: inline-flex; justify-self: start; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .03); border: 1px solid var(--m-filet); }
.m-bascule { display: none; }
.js .m-bascule { display: inline-flex; flex-direction: row; margin: 0; }
.m-bascule button { border: 0; background: transparent; color: var(--m-taupe); font: 600 .9rem var(--m-sans); padding: 10px 18px; border-radius: 999px; cursor: pointer; transition: background-color .4s var(--m-ressort), color .4s var(--m-ressort); }
.m-bascule button:hover { color: var(--m-ivoire); }
.m-bascule button[aria-pressed="true"] { background: var(--m-or); color: var(--m-encre-or); }
.m-montant { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.m-montant b { font-family: var(--m-serif); font-weight: 500; font-size: clamp(4rem, 8vw, 5.6rem); line-height: .95; letter-spacing: -.03em; white-space: nowrap; }
.m-montant span { color: var(--m-taupe); }
.m-economie { color: var(--m-vert); font-size: .95rem; min-height: 1.5em; }
.m-prix .m-btn { justify-self: start; }
.m-petites-lignes { color: var(--m-taupe); font-size: .88rem; }
.m-inclus { display: grid; gap: 4px; }
.m-inclus li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; padding: 14px 2px; border-bottom: 1px solid var(--m-filet); color: var(--m-ivoire-2); }
.m-inclus li:last-child { border-bottom: 0; }
.m-inclus .i { width: 20px; height: 20px; color: var(--m-or); margin-top: 2px; }
.m-inclus b { color: var(--m-ivoire); font-weight: 600; }

/* ------------------------------------------------------ pied (base.html) */
.maison footer { max-width: 1180px; margin: 0 auto; border-top: 1px solid var(--m-filet); padding: 44px var(--m-gouttiere) calc(56px + env(safe-area-inset-bottom, 0px)); color: var(--m-taupe); }
.maison footer .small { color: var(--m-taupe); font-size: .9rem; }
.maison footer a { color: var(--m-ivoire-2); }
.maison footer a:hover { color: var(--m-or-clair); }
.maison footer a.accent { color: var(--m-or-clair); border-bottom-color: currentColor; }
@media (max-width: 720px) { .maison footer { padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px)); } }

.m-barre { display: none; }
@media (max-width: 720px) {
  .m-barre {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(16, 13, 10, .92); border-top: 1px solid var(--m-filet);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font-size: .84rem; line-height: 1.35; color: var(--m-taupe);
  }
  .m-barre b { display: block; color: var(--m-ivoire); font-weight: 600; }
  .js .m-barre { transform: translateY(110%); transition: transform .55s var(--m-sortie); }
  .js .m-barre.montre { transform: none; }
}

/* Apparitions : depuis un état déjà lisible, jamais depuis l'invisible. */
.js .m-monte { transition: opacity .9s var(--m-sortie), transform 1s var(--m-sortie), filter .9s var(--m-sortie); }
.js .m-monte:not(.vu) { opacity: .5; transform: translateY(18px); filter: blur(3px); }

@media (prefers-reduced-motion: reduce) {
  .maison *, .maison *::before, .maison *::after { animation: none !important; transition: none !important; }
  html:has(body.maison) { scroll-behavior: auto; }
  .js .m-monte:not(.vu) { opacity: 1; transform: none; filter: none; }
}