/* Offres du 28/10/2026 : Tarifs, Loueurs, Espace loueur, Ambassadeurs, page de parrainage.
   Chargée après commerce.css, lumographe-home.css et lumographe-tarifs.css : mêmes jetons
   (nuit, néon, tungstène), mêmes pastilles rayon 8 et cartes rayon 12 que l’app. */

/* Surcharges limitées aux nouvelles pages, y compris les composants de commerce.css. */
.page-offres { --shadow: none; background: var(--nuit); font-variant-numeric: tabular-nums; }
.page-offres, .page-offres *, .page-offres::before, .page-offres::after, .page-offres *::before, .page-offres *::after { background-image: none !important; box-shadow: none !important; }
.page-offres .barre { background: var(--nuit); -webkit-backdrop-filter: none; backdrop-filter: none; }
.page-offres .barre a, .page-offres .site-header a { min-height: 44px; min-width: 44px; border: 0; border-radius: 0; background: none; }
.page-offres .barre-fin .telecharger { display: inline-flex; align-items: center; padding: 0; color: var(--neon-clair); font-weight: 650; text-decoration: none; }
.page-offres .surtitre, .page-offres .metadonnees, .page-offres .eyebrow, .page-offres .mono, .page-offres .pied h2 { color: var(--gris); font-family: var(--texte); letter-spacing: 0; text-transform: none; }
.page-offres .metadonnees { margin-bottom: 18px; font-size: .9rem; }
.page-offres .eyebrow::before { display: none; }
.page-offres .mono { font-variant-numeric: tabular-nums; }
.page-offres .etapes-precommande .mono { display: block; width: auto; height: auto; border: 0; border-radius: 0; background: none; }
.page-offres a, .page-offres button, .page-offres input, .page-offres summary { min-height: 44px; min-width: 44px; }
.page-offres .bouton.petit { min-height: 44px; }
.page-offres a { display: inline-flex; align-items: center; }
.page-offres .pied li a { display: inline-flex; align-items: center; padding-block: 8px; }
.page-offres .referral-benefits { grid-template-columns: 1fr; }
.page-offres .referral-benefits p { padding: 0; border: 0; border-radius: 0; background: none; }
.page-offres .referral-benefits strong { color: var(--papier); font-size: 1rem; letter-spacing: 0; text-transform: none; }
.page-offres .referral-benefits span { color: var(--gris); font-weight: 400; }
.page-offres .referral-card.is-confirmed, .page-offres .referral-account.is-confirmed { animation: none; }
.page-offres .calcul .formulaire, .page-offres .calcul .tableau-cadre, .page-offres .panneau .formulaire, .page-offres .panneau .tableau-cadre { padding: 0; border: 0; border-radius: 0; background: none; }
.page-offres dialog { border-radius: 12px; box-shadow: none; }
.page-offres dialog::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
.page-offres .icon-button { flex: none; border: 0; border-radius: 0; background: none; }
.page-offres .calcul-ligne b { min-width: 0; font-family: var(--texte); font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: 0; overflow-wrap: anywhere; white-space: normal; }
.page-offres [name="referralCode"], .page-offres [autocomplete="one-time-code"] { font-family: var(--texte); font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* Le compte ne charge pas les feuilles de la page d’accueil. Palette du site et
   famille déjà fournie par commerce.css, sans modifier les autres pages. */
.page-account {
  --nuit: #0b0e15; --nuit-2: #10131c; --surface: #151924; --ardoise: #1d2230; --surface3: #272e3e;
  --trait: rgba(255, 255, 255, .06); --trait-fort: #2e3648;
  --neon: #5d83c4; --neon-fort: #4f72b0; --neon-clair: #9bb6e4;
  --papier: #e9edf3; --gris: #9aa4b4; --gris-2: #6b7484; --ok: #4ec88f; --ambre: #d99a4a; --rouge: #e0676b;
  --texte: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  --ink: var(--papier); --muted: var(--gris); --line: var(--trait-fort); --panel: var(--surface); --panel-strong: var(--ardoise);
  --blue: var(--neon); --blue-soft: var(--neon-clair); --cyan: var(--neon-clair); --success: var(--ok); --danger: var(--rouge); --radius: 12px;
  background: var(--nuit); color: var(--papier);
}
.page-account .site-header { background: var(--nuit); backdrop-filter: none; }
.page-account .brand img { width: 34px; height: 34px; }
.page-account .header-link { color: var(--neon-clair); font-weight: 650; transform: none; }
.page-account .account-intro h1 { font-size: clamp(2.4rem, 4vw, 3.5rem); line-height: 1.05; }
.page-account .free-note { color: var(--gris); }
.page-account .free-note::before { content: none; display: none; background: none; }
.page-account .account-panel { border-radius: 12px; background: var(--surface); box-shadow: none; }
.page-account .referral-account, .page-account .studio-upgrade { margin-top: 24px; padding: 24px 0 0; border: 0; border-top: 1px solid var(--trait); border-radius: 0; background: none; }
.page-account .button { border-radius: 8px; box-shadow: none; transform: none; }
.page-account .button-primary { border: 1px solid var(--neon); background: var(--neon); color: var(--papier); }
.page-account .button-primary:hover { border-color: var(--neon-fort); background: var(--neon-fort); }
.page-account .button-secondary, .page-account .button-tertiary { border: 1px solid rgba(93, 131, 196, .35); background: rgba(93, 131, 196, .1); color: var(--neon-clair); }
.page-account .field input { border: 1px solid var(--trait-fort); border-radius: 8px; background: var(--surface3); color: var(--papier); }
.page-account [data-referral-code] { font-family: var(--texte); font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.page-account :focus-visible { outline: 2px solid var(--neon-clair); outline-offset: 3px; }
.page-account .site-footer nav { flex-wrap: wrap; }

/* Un élément masqué l’est toujours, même quand sa classe (.bouton…) fixe un display. */
[hidden] { display: none !important; }

/* Bandeau du prix de lancement : une ligne d’information, sans couleur d’alerte */
.fondateur { border-bottom: 1px solid var(--trait); background: var(--nuit-2); }
.fondateur .coque { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; min-height: 48px; padding: 8px 0; font-size: .94rem; }
.fondateur p { color: var(--gris); }
.fondateur a { color: var(--neon-clair); white-space: nowrap; }
[data-founder="off"] .fondateur:not([data-early]), [data-founder="off"] [data-founder-only] { display: none; }
/* Accès anticipé : la phrase principale du bandeau, puis l’offre fondateur en gris. */
.fondateur .anticipe { color: var(--papier); flex-basis: 100%; }
.offres-anticipe { margin-top: 16px; color: var(--gris); font-size: .94rem; }
.offre-plus-tard { color: var(--gris); font-size: .94rem; }
[data-founder="on"] [data-founder-hide] { display: none; }

/* Mensuel / annuel : capsules Lumographe, jamais un sélecteur natif */
.bascule { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--trait-fort); border-radius: 10px; background: var(--nuit-2); }
.bascule button { min-height: 44px; padding: 0 16px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--gris); font: 600 .95rem var(--texte); cursor: pointer; white-space: nowrap; }
.bascule button[aria-pressed="true"] { background: var(--surface3); border-color: transparent; color: var(--papier); }
.bascule-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 22px; }
.bascule-ligne p { color: var(--gris); font-size: .92rem; }
[data-interval="monthly"] [data-when="annual"], [data-interval="annual"] [data-when="monthly"] { display: none; }

/* Grille des offres (refonte du 29/10, mise en page du paywall de l’app) : cartes plates, sans
   ombre ni dégradé ; une seule couleur d’accent, celle de l’économie annuelle. */
.forfaits-tete { display: grid; justify-items: center; gap: 8px; margin-bottom: clamp(28px, 4vw, 44px); text-align: center; }
.forfaits-tete h1, .forfaits-tete h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
.forfaits-tete > p { color: var(--gris); }
.bascule-public { margin-top: 14px; }
.forfaits-tete .ouvrir-app { margin-top: 10px; }
.bascule-public a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 8px; color: var(--gris); font-weight: 600; text-decoration: none; }
.bascule-public a:hover { color: var(--papier); }
.bascule-public a[aria-current] { background: var(--surface3); color: var(--papier); }
/* Quatre cartes sur une ligne ; sous-grille pour que prix, boutons et listes s’alignent d’une carte à l’autre. */
/* Trois offres payantes côte à côte (Côme, 29/10) ; Gratuit est en bandeau au-dessus. */
.offres.forfaits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; }
.forfait { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; align-content: start; margin-bottom: 20px; padding: clamp(24px, 2.4vw, 36px); border: 1px solid var(--trait-fort); border-radius: 16px; background: var(--nuit-2); box-shadow: none; }
.forfait .forfait-nom { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-family: var(--display); font-size: 1.5rem; font-weight: 650; }
.forfait .forfait-desc { margin-top: 4px; color: var(--gris); }
.forfait .forfait-prix { display: grid; justify-items: start; gap: 8px; margin-top: 20px; align-self: end; }
.forfait .forfait-prix b { font-family: var(--display); font-size: clamp(2rem, 2.5vw, 2.5rem); font-weight: 600; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.forfait-periode { display: grid; color: var(--gris); font-size: .84rem; line-height: 1.35; }
.forfait-periode span { white-space: nowrap; }
/* Période dans la carte : « Économisez X % » sous « Annuel », pour tenir dans une colonne étroite. */
.forfait-montant { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.forfait-barre { color: var(--gris-2); font-size: 1rem; font-variant-numeric: tabular-nums; text-decoration-thickness: 1px; }
.masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.forfait-mention { flex: none; font-family: var(--texte); color: var(--papier); font-size: .84rem; font-weight: 600; }
.forfait.forfait-avant { border-color: var(--gris-2); background: var(--surface); }
/* Bandeau Gratuit : picto et nom, ses trois différences, prix et bouton à droite. */
.gratuit { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) auto; align-items: center; gap: 20px 36px; margin-bottom: 20px; padding: clamp(20px, 2.2vw, 28px) clamp(24px, 2.4vw, 36px); border: 1px solid var(--trait-fort); border-radius: 16px; background: var(--nuit-2); }
.gratuit-tete { display: flex; align-items: center; gap: 18px; }
.gratuit .forfait-nom { font-family: var(--display); font-size: 1.35rem; font-weight: 650; }
.gratuit .forfait-desc { margin-top: 2px; color: var(--gris); font-size: .95rem; }
.gratuit-limites { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.gratuit-limites li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; padding: 0; border: 0; color: var(--papier); font-size: .92rem; }
.gratuit-limites li::before { content: none; }
.gratuit-limites li svg { margin-top: 3px; color: var(--gris); }
.gratuit-action { display: flex; align-items: center; gap: 20px; }
.gratuit-prix { display: grid; gap: 2px; text-align: right; }
.gratuit-prix b { font-family: var(--display); font-size: 1.9rem; font-weight: 600; line-height: 1; }
.gratuit-prix span { color: var(--gris); font-size: .82rem; white-space: nowrap; }
.gratuit .forfait-bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 0; border-radius: 10px; background: var(--papier); color: var(--nuit); font-weight: 600; white-space: nowrap; }
.gratuit .forfait-bouton:hover { background: #fff; color: var(--nuit); }
/* Liste commune au-dessus des cartes : 3 colonnes au bureau, 2 sur tablette, 1 sur téléphone. */
.forfaits-communs { margin-bottom: clamp(28px, 3.4vw, 40px); padding: clamp(20px, 2vw, 28px); border: 1px solid var(--trait-fort); border-radius: 16px; }
.forfaits-communs h3 { font-family: var(--texte); font-size: 1.05rem; font-weight: 600; }
.forfaits-communs ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 32px; margin: 14px 0 0; padding: 0; list-style: none; }
.forfaits-communs li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; padding: 0; border: 0; color: var(--papier); font-size: .94rem; line-height: 1.45; }
.forfaits-communs li::before { content: none; }
.forfaits-communs li svg { margin-top: 3px; color: var(--gris); }
.bascule.bascule-carte { display: flex; gap: 6px; margin-top: 16px; padding: 5px; background: var(--nuit); }
.bascule-carte button { flex: 1; min-width: 0; min-height: 58px; padding: 8px 10px; font-size: .9rem; line-height: 1.3; }
.bascule-carte .economie { display: block; margin-top: 3px; font-size: .78rem; }
.bascule-carte button[data-interval-choice="annual"] { flex: 1.6; }
.bascule-carte .economie-sep { display: none; }
.bascule-vide { min-height: 70px; margin-top: 16px; }
/* Vente fermée (site informatif jusqu’à la sortie officielle) : aucun achat visible ; data-sales="open" les rend. */
[data-sales="closed"] [data-sales-open], :root:not([data-sales="closed"]) [data-sales-closed] { display: none !important; }
.forfait-achat .offre-plus-tard { display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 16px; padding: 0 16px; border: 1px solid var(--trait-fort); border-radius: 10px; color: var(--gris); font-size: .92rem; text-align: center; }
.annexe-action .forfait-achat .offre-plus-tard { margin-top: 0; }
.vente-fermee { margin-bottom: 18px; }
.vente-fermee a { display: inline; min-height: 0; color: var(--papier); text-underline-offset: 3px; }
.economie { color: var(--neon-clair); font-weight: 500; }
.forfait .forfait-bouton { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: 16px; border: 0; border-radius: 10px; background: var(--papier); color: var(--nuit); font-weight: 600; box-shadow: none; }
.forfait .forfait-bouton:hover { background: #fff; color: var(--nuit); }
.forfait .forfait-conditions { margin-top: 10px; color: var(--gris); font-size: .82rem; text-align: center; }
.forfait .forfait-sorties { display: block; margin-bottom: 2px; color: var(--papier); }
.forfait .forfait-inclus { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--trait-fort); }
.forfait-inclus > p { color: var(--gris); font-size: .92rem; }
.forfait .forfait-inclus ul { display: grid; gap: 9px; margin: 12px 0 0; padding: 0; list-style: none; }
.forfait .forfait-inclus li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; padding: 0; border: 0; color: var(--papier); font-size: .94rem; }
.forfait .forfait-inclus li::before { content: none; }
.forfait-inclus li svg { margin-top: 3px; color: var(--gris); }
.forfait-suite { margin-top: 9px; }
.forfait-suite > ul { margin-top: 9px !important; }
.forfait-suite summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--gris); font-size: .9rem; cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 3px; }
.forfait-suite summary::-webkit-details-marker { display: none; }
.forfait-suite summary:hover { color: var(--papier); }
.forfait-suite[open] summary { display: none; }
.forfaits-option { margin: 4px auto 0; color: var(--gris); font-size: .9rem; text-align: center; }
.forfaits-option a { display: inline; min-height: 0; color: var(--papier); text-underline-offset: 3px; }
.forfaits-note { max-width: 62rem; margin: 20px auto 0; color: var(--gris-2); font-size: .86rem; line-height: 1.6; text-align: center; }
.forfaits-note a { display: inline; min-height: 0; color: var(--gris); text-underline-offset: 3px; }
.forfaits-note .offres-anticipe { color: var(--gris); font-size: inherit; }
@media (max-width: 1180px) {
  .offres.forfaits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
  .gratuit { grid-template-columns: minmax(0, 1fr) auto; }
  .gratuit-limites { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(3, auto); justify-content: start; gap: 6px 24px; }
  .forfaits-communs ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .offres.forfaits { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  .gratuit { max-width: 560px; margin-inline: auto; }
}
@media (max-width: 700px) {
  .gratuit { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .gratuit-limites { grid-template-columns: minmax(0, 1fr); grid-row: auto; }
  .gratuit-action { justify-content: space-between; }
  .gratuit-prix { text-align: left; }
  .forfaits-communs { max-width: 520px; margin-inline: auto; }
  .forfaits-communs ul { grid-template-columns: minmax(0, 1fr); }
  .bascule-vide { display: none; }
}

/* Quatre paliers (ancienne grille, gardée pour les autres pages) */
.offres.offres-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.offres-4 .offre { padding: clamp(22px, 2.4vw, 30px); }
.offres-4 .offre-prix { font-size: clamp(2rem, 3vw, 2.6rem); }
.offre-prix small { font-size: .42em; font-weight: 600; color: var(--gris); letter-spacing: 0; margin-left: 4px; }
.offre-equiv { margin-top: 6px; color: var(--gris-2); font-size: .86rem; min-height: 1.4em; }
/* La sortie DMX, l’information qui distingue les offres : du texte, sans pastille */
.offre-sortie { margin-top: 18px; color: var(--papier); font-weight: 650; font-size: 1rem; }
/* Pro reste mis en avant par son contour et son bouton plein, sans dégradé ni halo */
.offres-4 .offre.vedette { background: var(--nuit-2); box-shadow: none; }
.offres-4 .offre ul { margin-top: 14px; }
.offres-4 .offre li { font-size: .9rem; padding: 9px 0; }
.offres-4 .offre li { color: var(--papier); }
.offres-4 .offre li.non { color: var(--gris-2); }
.offre .offre-note-courte { margin-top: 12px; color: var(--gris-2); font-size: .85rem; }
.offre .bouton { align-self: stretch; }
button.lien { min-height: 44px; padding: 0; border: 0; background: none; color: var(--gris); font: inherit; font-size: .86rem; text-align: left; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
button.lien:hover { color: var(--papier); }
.offres-lan { margin-top: 18px; color: var(--gris); font-size: .95rem; max-width: 52rem; }
.offres-lan strong { color: var(--papier); font-weight: 650; }

/* Pass 7 jours et Pro à vie, en dessous */
.annexes-titre { margin: 28px 0 0; font-size: 1.15rem; }
.annexes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.annexe { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; align-items: center; padding: 22px 24px; border: 1px solid var(--trait-fort); border-radius: 12px; background: var(--surface); }
.annexe h3 { font-size: 1.2rem; }
.annexe p { color: var(--gris); font-size: .95rem; }
.annexe .annexe-prix { font-family: var(--display); font-weight: 700; font-size: 1.7rem; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.annexe .annexe-prix small { display: block; margin-top: 2px; color: var(--gris); font-family: var(--texte); font-size: .5em; font-weight: 500; }
.compte-rebours { display: block; margin-top: 4px; color: var(--papier); font-weight: 600; font-variant-numeric: tabular-nums; }
.fondateur [data-founder-timer] { color: var(--papier); font-variant-numeric: tabular-nums; }
.annexe .annexe-prix s { display: block; color: var(--gris-2); font-size: .55em; font-weight: 600; }
.annexe .annexe-action { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.annexe .annexe-action span { color: var(--gris-2); font-size: .86rem; }
/* Même facture que les cartes d’offres : fond plat, bouton clair */
.annexe { border-radius: 16px; background: var(--nuit-2); }
.annexe .bouton { border: 0; border-radius: 10px; background: var(--papier); color: var(--nuit); font-weight: 600; box-shadow: none; }
.annexe .bouton:hover { background: #fff; color: var(--nuit); }

/* Tableaux de prix (loueurs) */
.tableau { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tableau th, .tableau td { padding: 14px 12px; border-bottom: 1px solid var(--trait); text-align: left; vertical-align: top; }
.tableau thead th { color: var(--gris); font-size: .8rem; font-weight: 600; letter-spacing: 0; text-transform: none; border-bottom-color: var(--trait-fort); }
.tableau tbody th { font-family: var(--display); font-weight: 650; font-size: 1.05rem; }
.tableau td.nombre, .tableau th.nombre { text-align: right; white-space: nowrap; }
.tableau td small, .tableau th small { display: block; margin-top: 2px; color: var(--gris-2); font-family: var(--texte); font-size: .82rem; font-weight: 500; }
.bloc.bloc-court { padding: clamp(32px, 5vw, 56px) 0; }
.tableau-cadre { overflow-x: auto; border: 1px solid var(--trait-fort); border-radius: 12px; background: var(--nuit-2); }
.tableau-cadre .tableau tr:last-child > * { border-bottom: 0; }
.tableau tfoot td, .tableau tfoot th { font-weight: 700; border-top: 1px solid var(--trait-fort); }

/* Exemple chiffré et calcul */
.calcul { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: start; padding: clamp(22px, 3vw, 34px); border: 1px solid var(--trait-fort); border-radius: 12px; background: var(--surface); }
.calcul-ligne { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--trait); color: var(--gris); font-variant-numeric: tabular-nums; }
.calcul-ligne b { color: var(--papier); font-weight: 650; white-space: nowrap; }
.calcul-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 14px; }
.calcul-total b { font-family: var(--display); font-size: clamp(1.8rem, 3.4vw, 2.4rem); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calcul-reglages { display: grid; gap: 18px; }
.reglage label, .reglage .reglage-nom { display: flex; justify-content: space-between; gap: 12px; color: var(--gris); font-size: .9rem; font-weight: 600; margin-bottom: 6px; }
.reglage output { color: var(--papier); font-variant-numeric: tabular-nums; }
.reglage input[type="range"] { width: 100%; -webkit-appearance: none; appearance: none; height: 44px; background: transparent; }
.reglage input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--neon); }
.reglage input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--neon); }
.reglage input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: var(--neon-clair); border: 2px solid var(--neon); }
.reglage input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--neon-clair); border: 2px solid var(--neon); }
.calcul-note { margin-top: 12px; color: var(--gris-2); font-size: .86rem; }

/* Listes « inclus » et étapes */
.inclus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--trait); }
.inclus li { padding: 22px 22px 22px 0; border-bottom: 1px solid var(--trait); }
.inclus li:nth-child(3n + 2), .inclus li:nth-child(3n) { padding-left: 22px; border-left: 1px solid var(--trait); }
.inclus h3 { font-size: 1.12rem; line-height: 1.2; }
.inclus p { margin-top: 8px; color: var(--gris); font-size: .95rem; }
.inclus-principaux { border: 1px solid var(--trait-fort); border-radius: 12px; background: var(--surface); overflow: hidden; }
.inclus-principaux li { padding: 22px; }
.inclus-suite { margin-top: 32px; }
.inclus-suite h2 { font-size: 1.35rem; }
.paliers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.paliers li { padding: 18px; border: 1px solid var(--trait-fort); border-radius: 12px; background: var(--surface); }
.paliers .mono { color: var(--gris); }
.paliers strong { display: block; margin-top: 8px; font-family: var(--display); font-size: 1.15rem; }
.paliers p { margin-top: 6px; color: var(--gris); font-size: .92rem; }

/* Formulaires simples (contact loueur, candidature ambassadeur) */
.formulaire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; padding: clamp(22px, 3vw, 32px); border: 1px solid var(--trait-fort); border-radius: 12px; background: var(--surface); }
.formulaire .plein-large { grid-column: 1 / -1; }
.formulaire label, .formulaire .reglage-nom { display: block; margin-bottom: 6px; color: var(--gris); font-weight: 600; font-size: .85rem; }
.formulaire input, .formulaire textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--trait-fort); border-radius: 8px; background: var(--surface3); color: var(--papier); font: inherit; }
.formulaire textarea { min-height: 96px; resize: vertical; }
.formulaire input:focus, .formulaire textarea:focus { outline: 2px solid var(--neon-clair); outline-offset: 1px; border-color: var(--neon); }
.formulaire .actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.formulaire .feedback { grid-column: 1 / -1; margin: 0; }
.capsules { display: flex; flex-wrap: wrap; gap: 6px; }
.capsules button { min-height: 44px; padding: 0 14px; border: 1px solid var(--trait-fort); border-radius: 8px; background: var(--ardoise); color: var(--gris); font: 600 .9rem var(--texte); cursor: pointer; white-space: nowrap; }
.capsules button[aria-pressed="true"] { background: rgba(93, 131, 196, .2); border-color: rgba(93, 131, 196, .7); color: var(--neon-clair); }

/* Consoles (Espace loueur, tableau ambassadeur) */
.console-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 24px; margin-bottom: 24px; }
.console-tete h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; }
.console-tete p { margin-top: 8px; color: var(--gris); }
.demo-etiquette { display: inline-block; padding: 0; border: 0; color: var(--gris); font-size: .85rem; font-weight: 600; }
.tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.tuiles.six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tuile { padding: 16px 18px; border: 1px solid var(--trait-fort); border-radius: 12px; background: var(--nuit-2); min-width: 0; }
.tuile span { display: block; color: var(--gris); font-size: .82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tuile b { display: block; margin-top: 6px; font-family: var(--display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tuile b.code { font: 650 clamp(1.05rem, 1.8vw, 1.35rem) var(--texte); font-variant-numeric: tabular-nums; letter-spacing: 0; padding-top: .3em; }
.tuile small { display: block; margin-top: 2px; color: var(--gris-2); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tuile.accent { border-color: var(--trait-fort); background: var(--nuit-2); }
.onglets { display: flex; gap: 6px; margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.onglets::-webkit-scrollbar { display: none; }
.onglets button { flex: none; }
.panneau[hidden] { display: none; }
.etat { display: inline-block; padding: 0; border: 0; font-size: .8rem; font-weight: 650; white-space: nowrap; background: none; color: var(--gris); }
.etat.assigned { background: none; color: var(--ok); }
.etat.paused, .etat.reset_pending { background: none; color: var(--ambre); }
.etat.revoked { background: none; color: var(--rouge); }
.jours { display: flex; flex-wrap: wrap; gap: 3px; max-width: 280px; }
.jours i { width: 8px; height: 14px; border-radius: 2px; background: var(--surface3); }
.jours i.on { background: var(--tungstene); }
.ligne-actions { display: flex; gap: 6px; justify-content: flex-end; }
.ligne-actions .bouton { min-height: 44px; padding: 0 12px; font-size: .86rem; }
.bouton.danger { border-color: rgba(224, 103, 107, .45); background: rgba(224, 103, 107, .1); color: #f2a3a5; }
.bouton.danger:hover { background: rgba(224, 103, 107, .2); border-color: rgba(224, 103, 107, .8); }
.console-bas { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; color: var(--gris); font-size: .9rem; }
.code-boite { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; font: 650 1rem var(--texte); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.connexion-requise { max-width: 560px; }
.connexion-requise .auth-form { margin-top: 18px; }
.journal { margin: 0; padding: 0; list-style: none; }
.journal li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--trait); font-size: .93rem; }
.journal time { color: var(--gris-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Page de parrainage /r/<code> */
.parrainage { min-height: calc(100vh - 68px); padding: clamp(32px, 6vw, 72px) 0; }
.parrainage-contenu { width: min(1120px, calc(100% - 32px)); margin-inline: auto; }
.parrainage h1 { font-size: clamp(2.1rem, 6vw, 3rem); line-height: 1.04; }
.parrainage .chapeau { max-width: 48rem; margin-top: 18px; font-size: 1.1rem; color: var(--gris); }
.parrainage-site { margin-top: 36px; }
.parrainage-site h2, .parrainage-app h2 { margin-bottom: 18px; font-size: 1.25rem; }
.parrainage-offres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.page-parrainage .offre { display: flex; flex-direction: column; min-width: 0; padding: clamp(22px, 2.4vw, 30px); border: 1px solid var(--trait-fort); border-radius: 12px; background: var(--surface); }
.parrainage-offres .espace { flex: 1; min-height: 22px; }
.page-parrainage .offre.vedette { border-color: var(--neon); background: var(--nuit-2); }
.parrainage .offre-prix { font-size: clamp(2rem, 4vw, 2.8rem); }
.parrainage .offre-equiv { line-height: 1.6; }
.parrainage-mensuel { font-size: 1.25rem; line-height: 1.6; font-weight: 650; }
.parrainage-site .mention { margin-top: 18px; color: var(--gris); font-size: .9rem; }
.parrainage-app { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--trait); }
.checkout-referral-notice p { margin-top: 18px; color: var(--gris); }
.parrainage-code { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding: 14px 0 0; border-top: 1px solid var(--trait); }
.parrainage-code span { color: var(--gris); font-size: .85rem; font-weight: 600; }
.parrainage-code b { font: 650 1.25rem var(--texte); font-variant-numeric: tabular-nums; letter-spacing: 0; overflow-wrap: anywhere; }
.parrainage-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.parrainage-note { margin-top: 16px; color: var(--gris-2); font-size: .86rem; }
.parrainage-note a { color: var(--neon-clair); }

@media (max-width: 1180px) {
  .offres.offres-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
}
@media (max-width: 1080px) {
  .inclus { grid-template-columns: 1fr; }
  .inclus li, .inclus li:nth-child(3n + 2), .inclus li:nth-child(3n) { padding: 18px 0; border-left: 0; }
  .inclus-principaux li, .inclus-principaux li:nth-child(3n + 2), .inclus-principaux li:nth-child(3n) { padding: 18px 20px; }
  .paliers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calcul { grid-template-columns: 1fr; }
  .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tuiles.six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .parrainage-offres { grid-template-columns: 1fr; }
  .offres.offres-4, .annexes { grid-template-columns: 1fr; }
  .annexe { grid-template-columns: 1fr; }
  .annexe .annexe-prix { text-align: left; }
  .formulaire { grid-template-columns: 1fr; }
  .paliers { grid-template-columns: 1fr; }
  .journal li { grid-template-columns: 1fr; gap: 2px; }
  .tableau th, .tableau td { padding: 12px 10px; }
  .tableau-pile thead { display: none; }
  .tableau-pile tr { display: block; padding: 14px 16px; border-bottom: 1px solid var(--trait); }
  .tableau-pile tbody th, .tableau-pile td { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border: 0; text-align: left; }
  .tableau-pile tbody th { display: block; padding-bottom: 8px; }
  .tableau-pile td::before { content: attr(data-label); color: var(--gris); font-size: .9rem; }
  .tableau-pile td:not([data-label])::before { content: none; }
  .tableau-pile .ligne-actions { justify-content: flex-start; padding-top: 6px; }
  .tableau-pile tfoot tr { padding: 10px 16px; }
  .tableau-pile tfoot th { display: inline; border: 0; padding: 0; }
  .tableau-pile tfoot td { float: right; padding: 0; }
  .tableau-cadre:has(.tableau-pile) { overflow: visible; }
  .parrainage-code { flex-direction: column; align-items: flex-start; gap: 4px; }
  .bascule { width: 100%; }
  .bascule button { flex: 1 1 0; }
}
.offres-paiement { margin-top: 8px; color: var(--gris); font-size: .95rem; max-width: 52rem; }
.annexe .annexe-note { margin-top: 6px; color: var(--gris-2); font-size: .88rem; }
/* Sans pastille, une flèche seule ne dit rien : le libellé « Assistance » reste visible sur mobile. */
.page-account .header-link span { display: inline; }

/* Devis Loueur : champ piège invisible pour les personnes, case d’accord avec son libellé. */
.champ-piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formulaire .accord { display: flex; align-items: flex-start; gap: 10px; }
.formulaire .accord input { flex: none; width: 20px; height: 20px; min-height: 0; margin-top: 2px; padding: 0; accent-color: var(--papier); }
.formulaire .accord label { margin: 0; color: var(--gris); font-weight: 400; font-size: .92rem; line-height: 1.5; }
.formulaire .accord a { display: inline; min-height: 0; color: var(--papier); text-underline-offset: 3px; }
/* Assistance : trois cartes d’action (chat, e-mail, guide). */
.assistance-cartes li { display: flex; flex-direction: column; }
.assistance-cartes li p { flex: 1; }
.assistance-cartes .actions { margin-top: 16px; }
.assistance-cartes .actions .bouton { overflow-wrap: anywhere; }
/* Code d’offre : discret, sous les cartes. */
.code-offre { max-width: 520px; margin: 6px auto 0; text-align: center; }
.code-offre summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--gris); font-size: .92rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.code-offre summary:hover { color: var(--papier); }
.code-offre-champ { display: grid; gap: 8px; margin: 8px 0 12px; text-align: left; }
.code-offre-champ label { color: var(--gris); font-size: .85rem; font-weight: 600; }
.code-offre-champ input { min-height: 44px; padding: 10px 12px; border: 1px solid var(--trait-fort); border-radius: 8px; background: var(--surface3); color: var(--papier); font: inherit; }
.code-offre-champ p { color: var(--gris); font-size: .85rem; }
/* Menu sur téléphone : les liens de la barre restent accessibles (revue du 29/10, M6). */
.menu-mobile { display: none; position: relative; }
.menu-mobile summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--trait-fort); border-radius: 8px; color: var(--papier); font-weight: 600; font-size: .9rem; cursor: pointer; list-style: none; }
.menu-mobile summary::-webkit-details-marker { display: none; }
.menu-mobile nav { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; display: grid; min-width: 220px; padding: 8px; border: 1px solid var(--trait-fort); border-radius: 12px; background: var(--nuit-2); }
.menu-mobile nav a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--papier); text-decoration: none; }
.menu-mobile nav a[aria-current] { color: var(--neon-clair); }
@media (max-width: 760px) { .menu-mobile { display: block; } .barre-fin .discret { display: none; } }
.forfaits-note a { display: inline-block; padding: 12px 2px; margin: -12px 0; }
/* Bouton de compte de la barre (Côme, 29/10) : contour sobre, toujours visible, y compris sur téléphone. */
.page-offres .barre-fin .compte-bouton { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--trait-fort); border-radius: 8px; color: var(--papier); font-weight: 600; font-size: .92rem; text-decoration: none; white-space: nowrap; }
.page-offres .barre-fin .compte-bouton:hover { border-color: var(--gris-2); }
@media (max-width: 480px) {
  .page-offres .barre .marque span { display: none; }
  .page-offres .barre-fin .telecharger { display: none; }
}