/* ==========================================================================
   kg-pages.css — LES PAGES PUBLIQUES ADOPTENT LA REFONTE (octobre 2026).
   Suite de /tarifs, de la coque des outils, de l'espace, de l'accueil et des
   vingt et une pages-outils. Elle sert les pages qui partagent kg-public.css :
   accueil, tarifs, à propos, aide, actualité, dépannage, connexion et les
   quatre pages légales.

   POURQUOI UNE SURCOUCHE ET NON UNE RETOUCHE DE kg-public.css : chaque page
   garde son propre style (hero de « à propos », FAQ de l'aide, formulaire de
   connexion, formulaire SOS, deux cents règles de l'actualité), et une
   retouche de la feuille commune ne les atteindrait pas. Cette feuille se
   charge APRÈS le style de la page et APRÈS kg-refonte.css : elle gagne par
   l'ordre, et /theme.css, servi en dernier, garde le dernier mot comme
   partout dans la refonte.

   CE QUI EST COMMUN, ET QUI N'ÉTAIT D'ACCORD NULLE PART : la barre de
   navigation (60 px sur toutes les pages sauf l'accueil à 68), le pied de
   page, et les commandes. Elles prennent ici les mêmes valeurs que l'accueil
   (kg-accueil.css n'en garde plus que ce qui lui est propre).

   CE QUI RESTE LOCAL : le rouge de SOS Dépannage, identité d'une page
   d'urgence (la page re-déclare son accent après kg-refonte.css) ; les mentions
   légales, qui ne bougent pas d'une ligne ; la mise en page des pages, dont
   seule l'aide et l'actualité retouchent quelques gouttières.
   ========================================================================== */

/* --- Navigation ---------------------------------------------------------- */
.topnav { flex-shrink: 0; height: 68px; padding: 0 40px; gap: 28px; background: rgba(255, 255, 255, .94); border-bottom-color: var(--border); }
.nav-logo img { height: 38px; }
.nav-link { display: inline-flex; align-items: center; white-space: nowrap; min-height: 40px; padding: 0 14px; font-size: .96875rem; font-weight: 500; color: var(--text); }
.nav-link:hover { background: var(--kg-accent-soft); color: var(--kg-accent-deep); text-decoration: none; }
.nav-link.active { background: var(--kg-accent-soft); color: var(--kg-accent-deep); font-weight: 600; }
.btn-login, .btn-signup { height: 44px; padding: 0 20px; border-radius: 10px; font-size: .9375rem; }
.btn-login { border-color: #CBD5E1; }
.btn-login:hover { border-color: var(--text); }
.btn-signup { background: var(--accent); }
.btn-signup:hover { background: var(--kg-accent-deep); }
.nav-avatar { background: var(--accent); }
.nav-hamburger { min-width: 44px; min-height: 44px; border-radius: 10px; }
.nav-pro-menu { border-color: var(--border); border-radius: 12px; }
.nav-pro-menu a { min-height: 40px; display: flex; align-items: center; color: var(--text); }
.nav-pro-menu a:hover { background: var(--kg-accent-soft); color: var(--kg-accent-deep); text-decoration: none; }
/* Les crédits sont ambre partout dans la refonte. */
.nav-credits { background: var(--kg-credit-bg); border-color: transparent; color: var(--kg-credit-ink); }
.nav-credits:hover { background: #FFEBB8; border-color: transparent; }
.nav-credits svg { color: var(--kg-credit); }

.mob-link { font-size: 1rem; min-height: 52px; }
.mob-btn-login, .mob-btn-signup { height: 48px; padding: 0; border-radius: 10px; }
.mob-btn-signup { background: var(--accent); }
.mob-user-link { background: var(--kg-accent-soft); border-color: var(--kg-ring); color: var(--kg-accent-deep); }

/* --- Pied de page complet ------------------------------------------------- */
.kg-footer { background: #0F172A; color: #94A3B8; padding: 64px 40px 32px; }
/* kg-public range la marque sur toute la largeur, au-dessus des colonnes ; la grille est écrite pour
   quatre pistes (1,6 / 1 / 1 / 1), la marque reprend donc la première. */
.kg-foot-brand { grid-column: auto; }
.kg-foot-logo { font-family: var(--kg-display); font-size: 1.5rem; letter-spacing: -.02em; }
.kg-foot-tag { color: #94A3B8; font-size: .9375rem; }
.kg-foot-col h4 { font-size: .8125rem; letter-spacing: .08em; }
.kg-foot-col a { color: #94A3B8; font-size: .9375rem; }
.kg-foot-col a:hover, .kg-foot-contact a:hover { color: #fff; text-decoration: none; }
.kg-foot-contact a { font-size: .9375rem; }
.kg-foot-col a .tag { background: var(--accent); }
.kg-foot-bottom { border-top-color: #1E293B; color: #94A3B8; }
.kg-foot-trust, .kg-foot-trust b { color: #CBD5E1; }

/* --- Pied de page simple ---------------------------------------------------- */
.site-footer { padding: 28px 40px; font-size: .8125rem; color: var(--muted); }
.site-footer a, .page-footer a { color: var(--muted); }
.site-footer a:hover, .page-footer a:hover { color: var(--text); text-decoration: none; }
.page-footer { font-size: .8125rem; }

/* ==========================================================================
   PAGES LÉGALES (CGU, CGV, confidentialité, mentions légales)
   Les mentions ne changent pas d'une ligne : seuls l'aspect et la lisibilité.
   ========================================================================== */
.legal-wrap, .legal-content { padding-top: 56px; padding-bottom: 96px; }
.legal-wrap h1, .legal-content h1 { font-family: var(--kg-display); font-size: clamp(1.75rem, 3.4vw, 2.375rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.15; margin-bottom: 10px; color: var(--text); }
.doc-date { font-size: .875rem; color: var(--muted); margin-bottom: 36px; }
.legal-wrap h2, .legal-content h2 { font-family: var(--kg-display); font-size: 1.1875rem; font-weight: 700; letter-spacing: -.01em; margin: 36px 0 10px; color: var(--text); }
.legal-wrap p, .legal-content p, .legal-wrap li, .legal-content li { font-size: 1rem; color: var(--kg-body); line-height: 1.7; }
.legal-wrap strong, .legal-content strong { color: var(--text); }
.legal-wrap a, .legal-content a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--kg-ring); }
.legal-wrap a:hover, .legal-content a:hover { text-decoration-color: currentColor; }
.notice { background: var(--accent-soft); border-left-color: var(--accent); border-radius: 0 12px 12px 0; padding: 16px 20px; color: var(--accent-dark); font-size: .9375rem; line-height: 1.65; }
.legal-wrap table, .legal-content table { font-size: .9375rem; }
.legal-wrap th, .legal-content th { background: var(--bg); color: var(--text); }
.legal-wrap td, .legal-content td { color: var(--kg-body); }

/* ==========================================================================
   À PROPOS
   ========================================================================== */
.about-hero-label { color: rgba(255, 255, 255, .8); font-size: .8125rem; letter-spacing: .1em; }
.about-hero-title { font-family: var(--kg-display); letter-spacing: -.035em; }
.block-label { font-size: .8125rem; letter-spacing: .1em; }
.block-statement { font-family: var(--kg-display); letter-spacing: -.025em; }
.block-body { color: var(--kg-body); line-height: 1.8; }
.valeurs-header h2, .cta-title { font-family: var(--kg-display); letter-spacing: -.025em; }
.valeurs-header p, .valeur-desc { color: var(--kg-body); }
.valeur-card { border-radius: var(--kg-r-card); box-shadow: var(--kg-shadow); }
.valeur-card:hover { box-shadow: 0 2px 4px rgba(15, 23, 42, .06), 0 14px 32px -10px rgba(15, 23, 42, .2); }
.cta-sub { color: #94A3B8; }
.cta-primary { height: 48px; padding: 0 28px; border-radius: 12px; }
.cta-primary:hover { background: var(--kg-accent-deep); }

/* ==========================================================================
   AIDE
   ========================================================================== */
.aide-hero h1 { font-family: var(--kg-display); font-size: clamp(1.75rem, 3.4vw, 2.375rem); letter-spacing: -.025em; }
.aide-hero p { color: var(--kg-body); font-size: 1rem; }
.aide-search { min-height: 52px; border-radius: var(--kg-r-field); border-color: #CBD5E1; }
.aide-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--kg-ring); }
.aide-search input { font-size: 1rem; }
.aide-search input:focus-visible { outline: none; }
.cat-card { border-radius: var(--kg-r-card); }
.cat-card:hover { box-shadow: var(--kg-shadow); }
.cat-desc, .faq-a { color: var(--kg-body); }
.faq-section h2 { font-family: var(--kg-display); font-size: 1.1875rem; letter-spacing: -.01em; }
.faq-item { border-radius: var(--kg-r-field); }
/* Les questions étaient des div cliquables : invisibles au clavier. Ce sont des button, qui gardent l'aspect d'une ligne. */
button.faq-q { width: 100%; min-height: 52px; border: 0; background: transparent; text-align: left; font-family: inherit; color: var(--text); }
button.faq-q:hover { background: var(--bg); }
button.faq-q:focus-visible { outline-offset: -3px; }
.contact-banner { border-radius: var(--kg-r-card); }

/* ==========================================================================
   CONNEXION
   ========================================================================== */
.login-card { border-radius: var(--kg-r-hero); box-shadow: var(--kg-shadow); }
.login-card h1 { font-family: var(--kg-display); font-size: 1.625rem; letter-spacing: -.02em; }
.login-subtitle { color: var(--kg-body); font-size: .9375rem; }
.login-card label { font-size: .875rem; }
.login-card input { min-height: 48px; border-radius: var(--kg-r-field); border-color: #CBD5E1; }
.login-card input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--kg-ring); outline: none; }
.login-submit { min-height: 48px; border-radius: var(--kg-r-field); }
.login-submit:hover { background: var(--kg-accent-deep); }
.auth-tab { min-height: 44px; border-color: #CBD5E1; }
.auth-tab:hover { border-color: var(--text); }
.auth-tab.active { background: var(--accent-soft); }
.login-msg.ok { color: var(--kg-ok); }
.login-msg.err { color: var(--kg-danger); }
.login-notice { border-radius: var(--kg-r-field); }
.login-back { min-height: 44px; }

/* ==========================================================================
   DÉPANNAGE : la page garde son rouge (re-déclaré dans la page après
   kg-refonte.css), seuls la police, le gabarit des commandes et le focus bougent.
   ========================================================================== */
.hero h1 { font-family: var(--kg-display); }
.hero-sub { color: var(--kg-body); }
.sos-card { border-radius: var(--kg-r-hero); box-shadow: var(--kg-shadow); }
.sos-input { min-height: 48px; border-radius: var(--kg-r-field); }
.sos-input:focus { box-shadow: 0 0 0 4px rgba(220, 38, 38, .16); }
.sos-geo { min-height: 48px; border-radius: var(--kg-r-field); }
.sos-launch { min-height: 52px; border-radius: 12px; }
.vital-call { min-height: 44px; border-radius: var(--kg-r-field); }
.chip { min-height: 40px; }
.block h2, .step h3 { font-family: var(--kg-display); }
.step { border-radius: var(--kg-r-card); }
.step p { color: var(--kg-body); }
.artisan-band a { min-height: 44px; border-radius: var(--kg-r-field); }

/* ==========================================================================
   ACTUALITÉ
   ========================================================================== */
.kg-topbar h1, .themes-head h2, .how-head h2 { font-family: var(--kg-display); }
.hero-cta, .hero-cta2 { min-height: 44px; }

/* --- Le bandeau de partage : une carte alignée sur la grille, plus un bloc centré à part */
.cdm-share-band { background: var(--bg); border-bottom: 0; padding: 18px 20px 0; }
.cdm-share { max-width: 1300px; padding: 20px 24px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--kg-r-hero); box-shadow: var(--kg-shadow); }
.cdm-share-head { gap: 14px; margin-bottom: 16px; }
.cdm-share-head .ico { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.cdm-share-head strong { font-family: var(--kg-display); font-size: 1.05rem; }
.cdm-flags { display: none; }                       /* une seule puce « Tous » : plus de choix à faire */
.cdm-preview { width: 200px; border-radius: var(--kg-r-field); box-shadow: none; }
.cdm-btn { min-height: 40px; border-radius: var(--kg-r-field); }
.cdm-copy { background: var(--accent-soft); color: var(--accent-dark); }
.cdm-url { color: var(--muted); }
.cdm-reward { background: var(--kg-ok-bg); border: 1px solid transparent; color: var(--kg-ok); border-radius: var(--kg-r-field); }
.cdm-18 { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 9px 12px; font-size: .78rem; line-height: 1.45; color: var(--kg-danger); background: var(--kg-danger-bg); border-radius: var(--kg-r-field); }
.cdm-18-badge { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--kg-danger); font-size: .6rem; font-weight: 800; }

/* --- En-tête : chiffres en Bricolage, commandes de 44 px */
.kg-topbar .kpi { border-radius: var(--kg-r-card); }
.kg-topbar .kpi-v, .odd span, .mr-score .ms { font-family: var(--kg-display); font-variant-numeric: tabular-nums; }
.kg-topbar .hero-cta, .kg-topbar .hero-cta2 { border-radius: var(--kg-r-field); }

/* --- Onglets : pilules de 42 px, l'active pleine d'encre comme les rubriques du lanceur.
   Ils se calent sous la barre du haut (68 px) au lieu de passer derrière elle. */
.kg-center .tabs-bar { top: 76px; border-radius: var(--kg-r-card); padding: 6px; }
.kg-left, .kg-right { top: 84px; max-height: calc(100vh - 98px); }
.tab-btn { min-height: 42px; font-family: var(--kg-font); font-weight: 700; color: var(--kg-body); }
.tab-btn.active, .tab-btn.active:hover { background: var(--text); border-color: var(--text); color: #fff; }

/* --- Rails : cartes de la refonte, entrées de 40 px, compteurs lisibles */
.rail-card { border-radius: var(--kg-r-card); }
.comp-item, .rail-link { min-height: 40px; border-radius: var(--kg-r-field); }
.comp-item.active { font-weight: 700; }
.live-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--kg-danger); box-shadow: 0 0 0 3px var(--kg-danger-bg); }
.sport-chip { min-height: 36px; }
.sport-chip.active { background: var(--text); border-color: var(--text); }
.rail-rg { align-items: center; color: var(--kg-danger); background: var(--kg-danger-bg); border: 0; border-radius: var(--kg-r-card); }
.rail-rg .rg-18 { border-color: var(--kg-danger); color: var(--kg-danger); }
.coupon-card, .bot-bilan-card, .tracker-card, .cta-band { border-radius: var(--kg-r-hero); }
.coupon-card h3 { font-family: var(--kg-display); }
.coupon-cta { min-height: 44px; border-radius: var(--kg-r-field); }

/* --- Cartes de match : on lit d'abord les équipes et les probabilités */
.match-row.mcard { border-radius: var(--kg-r-card); box-shadow: none; }
.match-row.mcard:hover { border-color: var(--accent-border); box-shadow: var(--kg-shadow); }
.mc-comp { color: var(--muted); }
.mc-state.live { color: var(--kg-danger); }
.mc-state.live::before { background: var(--kg-danger); }
.mc-name { font-family: var(--kg-display); font-size: 1rem; font-weight: 600; }
.mc-name.win { font-weight: 700; }
.mc-flag.tla, .mc-team .tla-s { background: var(--bg); color: var(--muted); border-radius: 6px; padding: 3px 6px; }
.odd { min-height: 56px; justify-content: center; background: var(--bg); border: 1px solid var(--border); border-radius: var(--kg-r-field); }
.odd b { color: var(--muted); }
.odd span { font-size: 1.1rem; color: var(--text); }
.odd i { background: var(--accent-border); }
.odd.pick { background: var(--accent-soft); border: 1.5px solid var(--accent); }
.odd.pick b { color: var(--accent); }
.odd.pick span { color: var(--accent-dark); }
.odd.pick i { background: var(--accent); }
.odd.sel { background: var(--text); border-color: var(--text); }
.odd.sel b, .odd.sel span { color: #fff; }
.mc-foot { border-top-color: var(--border); }
.mc-forme { min-height: 36px; gap: 7px; padding: 0 14px; color: var(--kg-body); }
.mc-forme::before { content: ''; width: 14px; height: 14px; flex: 0 0 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 20V11M12 20V5M19 20v-7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 20V11M12 20V5M19 20v-7'/%3E%3C/svg%3E") center / contain no-repeat; }
.mc-forme:hover { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent-dark); }
.fr-col, .fr-h2h { border-radius: var(--kg-r-field); background: var(--bg); }

/* --- Sur téléphone, les deux équipes s'empilent à gauche et le score passe à droite :
   en trois colonnes, chaque nom se coupait à « Paris … » */
.mc-foot { gap: 8px; flex-wrap: wrap; }
.mc-forme, .mc-share, .mc-toggle { white-space: nowrap; }
.mc-foot-r { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; }
@media (max-width: 560px) {
  .mc-body { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h s" "a s"; row-gap: 10px; }
  .mc-body > :nth-child(1) { grid-area: h; }
  .mc-body > :nth-child(2) { grid-area: s; }
  .mc-body > :nth-child(3) { grid-area: a; }
  .mc-team.end { flex-direction: row-reverse; justify-content: flex-end; }
  .mc-name { white-space: normal; line-height: 1.2; }
  .mc-body .mr-score { flex-direction: column; gap: 2px; }
  .mc-body .mr-score .ms { font-size: 1.3rem; }
  .mc-body .mr-score .ms.vs { display: none; }
  .mc-body .mr-score .ms.vs:only-child { display: block; }
  .kg-center .tabs-bar { top: 68px; }
}

/* --- Domaines, étapes, appel final */
.theme-chip, .how-card, .theme-detail { border-radius: var(--kg-r-card); }
.theme-chip { min-height: 64px; }
.theme-chip.active { border-color: var(--accent); }
.how-t, .cta-band h2 { font-family: var(--kg-display); }
.cta-band-btn { min-height: 44px; display: inline-flex; align-items: center; border-radius: var(--kg-r-field); }

/* ==========================================================================
   OFFRES PROFESSIONNELLES (BTP, bureautique, restaurateur, indépendant,
   service public, événements, inscription, page « Professionnels »)
   Elles gardent leur bleu nuit (re-déclaré dans chaque page après
   kg-refonte.css) : seuls la police, le gabarit des commandes et la lisibilité
   suivent la refonte.
   ========================================================================== */
.hero p.lead, .section .sub, .voice-card p, .price-features li { color: var(--kg-body); }
.section h2, .cta-final h2, .voice-card h2, .price-name, .price-amount, .pe-brand { font-family: var(--kg-display); }
.btn-cta, .btn-ghost { min-height: 48px; padding-top: 0; padding-bottom: 0; border-radius: 12px; }
.btn-ghost { border-color: #CBD5E1; }
.btn-ghost:hover { border-color: var(--text); }
.billing-toggle button { min-height: 40px; }
.voice-card, .cta-final { border-radius: var(--kg-r-hero); box-shadow: var(--kg-shadow); }
.price-card { border-radius: var(--kg-r-hero); }
.step, .trust-card { border-radius: var(--kg-r-card); }
.step p, .trust-card p, .price-tagline { color: var(--kg-body); }
.step-num { border-radius: var(--kg-r-chip); }
.step { min-width: 0; overflow-wrap: anywhere; }
.shell h1 { font-family: var(--kg-display); }

/* --- Points de rupture : écrits ici, sinon la feuille écraserait ceux des pages */
@media (max-width: 1360px) {
  .topnav { gap: 20px; }
  .nav-link { padding: 0 10px; }
}
@media (max-width: 900px) {
  .topnav { padding: 0 20px; }
}
@media (max-width: 860px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kg-foot-brand { grid-column: 1 / -1; }
  .kg-footer { padding: 52px 20px 28px; }
}
@media (max-width: 768px) {
  .legal-wrap, .legal-content { padding: 32px 16px 72px; }
  .site-footer { padding: 22px 20px; }
}
@media (max-width: 520px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .login-card { padding: 28px 20px; }
}