/* ==========================================================================
   kg-accueil.css — LA REFONTE DE L'ACCUEIL PUBLIC (index.html).
   Octobre 2026, d'après la maquette « Accueil ». Suite de /tarifs, de la
   coque des outils et de l'espace.

   POURQUOI UNE SURCOUCHE : index.html porte près de 800 lignes de style qui
   servent le lanceur, le concierge, le diagnostic et douze sections. Les
   réécrire d'un bloc, c'est refaire douze écrans que personne n'a regardés.
   Cette feuille se charge APRÈS le style de la page et APRÈS kg-refonte.css,
   donc elle gagne à spécificité égale ; /theme.css, servi en dernier, garde le
   dernier mot comme partout.

   CE QU'ELLE NE TOUCHE PAS : le balisage porteur de logique (rotor, concierge,
   lanceur, diagnostic, vidéo du téléphone), les textes légaux (-18, Joueurs
   Info Service, SIRET) et la mise en page du concierge. Trois bandes (organiser
   à plusieurs, SOS, pro) portaient leur style en ligne, donc aucune feuille ne
   pouvait les corriger : elles prennent des classes (.band*, .bub*).

   LES POINTS DE RUPTURE SONT RÉÉCRITS ICI : le style de la page règle ses
   marges mobiles avant cette feuille, qui les écraserait sinon.
   ========================================================================== */

/* --- Navigation et pied de page : communs à toutes les pages publiques, voir kg-pages.css.
   Ne restent ici que les éléments propres à l'accueil. */

/* --- « Les plus demandés » ---------------------------------------------- */
.moment-bar { background: var(--kg-accent-soft); border-bottom-color: var(--kg-ring); padding: 10px 40px; }
.moment-label { color: var(--kg-accent-deep); font-size: .75rem; }
.moment-help, .country-hint { color: var(--kg-body); }
.moment-chip { border-color: #D5DCE6; color: var(--text); font-size: .875rem; padding: 6px 14px; }
.moment-chip:hover, .country-pick:hover { border-color: var(--accent); color: var(--accent); }
.country-pick { color: var(--text); min-height: 34px; }

/* --- Héros -------------------------------------------------------------- */
.hero { max-width: 1240px; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; padding: 64px 40px 72px; }
/* Une seule règle de césure : la phrase se coupe où elle veut, équilibrée. Les
   deux lignes insécables d'avant ne tenaient qu'avec une police étroite. */
.hero-title { font-family: var(--kg-display); font-weight: 800; font-size: clamp(2.5rem, 4.4vw, 4rem); line-height: 1.04; letter-spacing: -.03em; margin-bottom: 22px; text-wrap: balance; }
.hero-title .l { display: inline; white-space: normal; }
.hero-title em { color: var(--accent); }
.hero-sub { font-size: 1.25rem; line-height: 1.55; color: var(--kg-body); max-width: 560px; margin-bottom: 30px; }
.search-q { font-family: var(--kg-display); font-size: 1.125rem; font-weight: 700; margin-bottom: 12px; }

.hero-rotor-wrap { max-width: 600px; }
.hero-rotor { min-height: 64px; padding: 12px 20px 12px 14px; border-radius: 16px; font-size: 1.125rem; box-shadow: 0 14px 32px -12px rgba(31, 79, 216, .55); }
.hero-rotor:hover { background: var(--kg-accent-deep); }
.hr-ic { width: 38px; height: 38px; border-radius: 11px; }
.hr-ic svg { width: 20px; height: 20px; }
.hr-hint { font-size: .9375rem; color: var(--muted); }
.hr-hint strong { color: var(--text); }

.all-missions { height: 46px; padding: 0 18px; border-color: #CBD5E1; border-radius: 12px; color: var(--text); }
.all-missions:hover { border-color: var(--accent); box-shadow: none; }
.am-count { background: var(--kg-accent-soft); color: var(--kg-accent-deep); }
.kg-install { background: var(--kg-accent-soft); border-color: var(--kg-ring); color: var(--kg-accent-deep); border-radius: 12px; min-height: 44px; }
.kg-install:hover { background: #DCE6FD; }

.trust { margin-top: 28px; gap: 8px 22px; font-size: .9375rem; color: var(--kg-body); }
.trust-dot { background: var(--kg-ok); }

.hero-auth { background: var(--kg-accent-soft); border-color: var(--kg-ring); border-radius: 16px; }
.ha-greet { font-family: var(--kg-display); }
.ha-sub { color: var(--kg-body); }
.ha-cta, .ha-cta-ghost { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border-radius: 12px; }
.ha-cta:hover { background: var(--kg-accent-deep); }
.ha-cta-ghost { color: var(--kg-accent-deep); border-color: var(--kg-ring); }
.ha-cta-ghost:hover { background: #fff; border-color: var(--accent); }

/* Le téléphone sur un fond bleu doux, comme dans la maquette : il se détache
   sans qu'on ait besoin d'une ombre noire de 130 px. */
.hero-right { background: var(--kg-accent-soft); border-radius: 28px; padding: 44px 24px 48px; }
.phone-mockup { box-shadow: inset 0 0 0 1.5px #3A3A3C, 0 0 0 2.5px #111, 0 34px 60px -24px rgba(15, 23, 42, .55); }

/* --- Sections : titres et corps communs ---------------------------------- */
.section-label { font-size: .8125rem; letter-spacing: .08em; color: var(--kg-accent-deep); }
.section-title { font-family: var(--kg-display); font-weight: 800; font-size: clamp(1.875rem, 3.6vw, 2.75rem); line-height: 1.1; letter-spacing: -.025em; margin-bottom: 12px; }
.section-sub { font-size: 1.125rem; line-height: 1.6; color: var(--kg-body); }
.cap-section, .action-section, .steps-section, .compare-section { padding: 88px 40px 80px; }

/* --- Domaines d'action --------------------------------------------------- */
.cap-section { background: #fff; }
.cap-inner { max-width: 1160px; }
.cap-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.cap-card { align-items: center; gap: 14px; padding: 18px 20px; background: #FBFCFE; border-radius: 16px; }
.cap-card:hover { border-color: var(--accent); box-shadow: 0 10px 26px -14px rgba(31, 79, 216, .45); }
.cap-ic { width: 46px; height: 46px; border-radius: 12px; background: var(--kg-accent-soft); }
.cap-ic svg { width: 24px; height: 24px; }
.cap-t { font-family: var(--kg-display); font-size: 1.125rem; line-height: 1.2; letter-spacing: 0; }
.cap-d { font-size: .875rem; line-height: 1.4; color: var(--kg-body); }
.cap-note, .cap-limits sup { color: var(--accent); }
.cap-limits { font-size: .8125rem; color: var(--muted); }
.cap-foot-q { font-family: var(--kg-display); font-size: 1.125rem; }
.cap-foot-ask { height: 46px; padding: 0 20px; border-color: #CBD5E1; border-radius: 12px; color: var(--text); font-weight: 600; }
.cap-foot-ask:hover { border-color: var(--accent); color: var(--accent); }
.cap-foot-idee { border-color: var(--kg-ring); color: var(--kg-accent-deep); }
.idee-box { border-radius: 20px; }
.idee-t { font-family: var(--kg-display); }
.idee-ok { min-height: 46px; border-radius: 12px; background: var(--accent); }
.idee-l textarea:focus, .idee-l input:focus { box-shadow: 0 0 0 4px var(--kg-ring); }

/* --- Un agent au travail -------------------------------------------------- */
.action-inner { max-width: 1160px; }
.action-cta { height: 50px; padding: 0 24px; border-radius: 12px; font-size: 1rem; }
.action-cta:hover { background: var(--kg-accent-deep); }
.agent-card { border-radius: 20px; box-shadow: var(--kg-shadow); }
.agent-card-title { font-family: var(--kg-display); font-size: 1rem; }
.agent-status-dot { background: var(--kg-ok); box-shadow: 0 0 0 3px var(--kg-ok-bg); }
.step-done { background: var(--kg-ok-bg); color: var(--kg-ok); }
.step-label, .step-active-label { font-size: .9375rem; }
.step-meta, .step-active-meta { font-size: .8125rem; }
.step-pending-label { font-size: .9375rem; color: var(--muted); }
.agent-footer { border-radius: 12px; }
.agent-footer-text { font-size: .8125rem; }

/* --- Trois étapes : gros chiffres, filet d'encre -------------------------- */
.steps-section { background: var(--bg); }
.steps-inner { max-width: 1160px; }
.steps-section .section-sub { max-width: 560px; }
.steps-timeline { gap: 36px 40px; }
.steps-timeline::before { display: none; }
.steps-section .step-card, .steps-section .step-card:last-child { padding: 20px 0 0; border-top: 3px solid var(--text); }
.steps-section .step-card .step-number { width: auto; height: auto; border: 0; border-radius: 0; background: none; box-shadow: none;
  justify-content: flex-start; margin-bottom: 12px; font-family: var(--kg-display); font-weight: 800; font-size: 3.5rem; line-height: 1; color: var(--accent); }
.step-card-title { font-family: var(--kg-display); font-size: 1.5rem; line-height: 1.25; }
.step-card-desc { font-size: 1rem; line-height: 1.6; color: var(--kg-body); max-width: none; }

/* --- Comparatif ---------------------------------------------------------- */
.compare-inner { max-width: 1000px; }
.compare-wrap { border-radius: 20px; box-shadow: var(--kg-shadow); }
.compare-table thead th { padding: 14px 24px; font-size: .8125rem; }
.compare-table td { padding: 16px 24px; font-size: 1rem; }
.cno { color: #94A3B8; }

/* --- Bande RGPD ---------------------------------------------------------- */
.rgpd-band { background: var(--kg-accent-soft); border-color: var(--kg-ring); }
.rgpd-title { font-family: var(--kg-display); font-size: 1.125rem; }
.rgpd-sub { font-size: .9375rem; color: var(--kg-body); }
.rgpd-badges { flex-shrink: 1; }
.rgpd-badge { border-color: var(--kg-ring); font-size: .8125rem; }

/* --- Réunions ------------------------------------------------------------ */
.meet-section { background: linear-gradient(180deg, #fff, var(--kg-accent-soft)); }
.meet-title { font-family: var(--kg-display); font-weight: 800; letter-spacing: -.025em; }
.meet-sub { font-size: 1.0625rem; color: var(--kg-body); }
.meet-points li { font-size: 1rem; }
.meet-cta { min-height: 52px; padding: 0 26px; border-radius: 12px; }
.meet-cta:hover { background: var(--kg-accent-deep); }
.meet-note { color: var(--muted); font-size: .875rem; }
.meet-card { border-radius: 20px; box-shadow: var(--kg-shadow); }

/* --- Pronostic (bande sombre) : le -18 et l'aide restent intacts ----------- */
.cdm-title { font-family: var(--kg-display); letter-spacing: -.025em; }
.cdm-sub { color: #CBD5E1; font-size: 1rem; }
.cdm-eyebrow { color: #A9C4FF; }
.cdm-cta { min-height: 50px; padding: 0 28px; border-radius: 12px; }
.cdm-cta:hover { background: var(--kg-accent-deep); }

/* --- Trois bandes qui portaient leur style en ligne ----------------------- */
.band { padding: 72px 40px; border-top: 1px solid var(--border); }
.band--coord { background: var(--bg); }
.band--sos { background: #FFF6F4; border-top-color: #F5C9C4; }
.band--pro { background: #fff; }
.band-inner { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.band-pill { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; margin-bottom: 16px; border-radius: 999px;
  background: var(--kg-accent-soft); color: var(--kg-accent-deep); font-weight: 600; font-size: .875rem; }
.band--sos .band-pill { background: var(--kg-danger-bg); color: var(--kg-danger); }
.band-title { font-family: var(--kg-display); font-weight: 800; font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.12; letter-spacing: -.025em; margin-bottom: 14px; text-wrap: balance; }
.band-title--rotor { min-height: 2.3em; }
/* Le titre SOS défile : le script règle l'opacité en ligne, la transition vit ici. */
#sosRotate { display: inline-block; transition: opacity .35s ease; }
.band-text { font-size: 1.125rem; line-height: 1.6; color: var(--kg-body); margin-bottom: 22px; }
.band-text strong { color: var(--text); }
.band-cta { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 24px; border-radius: 12px;
  background: var(--accent); color: #fff; font-size: 1rem; font-weight: 600; text-decoration: none; }
.band-cta:hover { background: var(--kg-accent-deep); color: #fff; }
/* L'urgence a sa couleur : le rouge dit « SOS » avant même qu'on lise. */
.band--sos .band-cta { background: var(--kg-danger); }
.band--sos .band-cta:hover { background: #912018; }

.band-card { background: var(--kg-accent-soft); border: 1px solid var(--kg-ring); border-radius: 20px; padding: 24px; box-shadow: var(--kg-shadow); }
.band--sos .band-card { background: #fff; border-color: #F5C9C4; }
.band-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.band-ic { flex: none; width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--border); color: var(--accent); }
.band--sos .band-ic { background: var(--kg-danger-bg); border-color: transparent; color: var(--kg-danger); }
.band-card-t { font-family: var(--kg-display); font-weight: 700; font-size: 1.0625rem; }
.bub { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px;
  font-size: .9375rem; line-height: 1.45; color: var(--text); }
.bub:last-child { margin-bottom: 0; }
.bub--me { margin-left: 32px; background: var(--accent); border-color: var(--accent); color: #fff; }
.bub--row { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.row-ok { color: var(--kg-ok); font-weight: 600; }
.row-wait { color: var(--muted); font-weight: 600; }

/* --- Pub de la tablette --------------------------------------------------- */
.pub2-sec { background: var(--bg); }
.pub2-eyebrow { background: var(--kg-accent-soft); border-color: var(--kg-ring); color: var(--kg-accent-deep); }
.pub2-title { font-family: var(--kg-display); letter-spacing: -.025em; }
.pub2-sub { color: var(--kg-body); font-size: 1.0625rem; }

/* --- Dernier appel à l'action --------------------------------------------- */
.cta-section { background: #0F172A; }
.cta-title { font-family: var(--kg-display); font-size: clamp(1.875rem, 3.4vw, 2.5rem); letter-spacing: -.025em; }
.cta-sub { color: #CBD5E1; font-size: 1.0625rem; }
.cta-primary, .cta-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 26px; border-radius: 12px; }
.cta-primary:hover { background: var(--kg-accent-deep); }
.cta-secondary { border-color: #475569; color: #E2E8F0; }
.cta-secondary:hover { border-color: #94A3B8; }

/* --- Demande de rappel --------------------------------------------------- */
.diag-band { background: linear-gradient(180deg, var(--bg), var(--kg-accent-soft)); }
.diag-head h2 { font-family: var(--kg-display); font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -.025em; }
.diag-head p { color: var(--kg-body); font-size: 1.0625rem; }
.diag-eyebrow { border-color: var(--kg-ring); color: var(--kg-accent-deep); }
.diag-card { border-radius: 20px; box-shadow: var(--kg-shadow); }
.diag-progress span { background: #DCE4F5; }
.diag-q { font-family: var(--kg-display); font-size: 1.25rem; }
.diag-hint { color: var(--muted); }
.diag-chip { min-height: 44px; border-radius: 12px; color: var(--text); }
.diag-chip:hover { border-color: var(--accent); }
.diag-chip.sel { background: var(--kg-accent-soft); color: var(--kg-accent-deep); }
.diag-field label { color: var(--kg-body); }
.diag-input { min-height: 48px; border-radius: 12px; }
.diag-input:focus { box-shadow: 0 0 0 4px var(--kg-ring); }
.diag-btn { min-height: 48px; border-radius: 12px; }
.diag-btn.primary:hover { background: var(--kg-accent-deep); }
.diag-btn.ghost { color: var(--text); }
.diag-err { color: var(--kg-danger); }

/* --- Lanceur de toutes les missions --------------------------------------- */
.lc-panel { border-radius: 20px; }
.lc-title { font-family: var(--kg-display); font-size: 1.375rem; }
.lc-sub { color: var(--muted); }
.lc-close { width: 40px; height: 40px; border-radius: 10px; }
.lc-close:hover { background: var(--bg); }
.lc-search { min-height: 48px; border-radius: 12px; }
.lc-search:focus { box-shadow: 0 0 0 4px var(--kg-ring); }
.lc-chip { min-height: 36px; }
.lc-chip.on { background: var(--kg-accent-soft); }
.lc-ic { background: var(--kg-accent-soft); }
.lc-card { border-radius: 12px; }
.lc-card:hover { background: var(--kg-accent-soft); }
.lc-v { font-family: var(--kg-display); font-size: 1rem; }
.lc-o { color: var(--kg-body); font-size: .8125rem; }
.lc-idee { background: var(--kg-accent-soft); border-color: var(--kg-ring); color: var(--kg-accent-deep); }

/* --- Pied de page : la bulle du concierge couvrait la fin de la ligne du bas (« RGPD »). */
.kg-foot-bottom { padding-right: 76px; }

/* --- Points de rupture : écrits ici, sinon la feuille écraserait ceux de la page */
@media (max-width: 1000px) {
  .hero-right { padding: 36px 20px 40px; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 40px 20px 56px; }
  .cap-section, .action-section, .steps-section, .compare-section { padding: 60px 20px; }
  .section-sub { font-size: 1.0625rem; }
  .steps-timeline { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 860px) {
  .band { padding: 52px 20px; }
  .band-inner { grid-template-columns: 1fr; gap: 28px; }
  .meet-section { padding: 52px 22px; }
  .kg-foot-bottom { padding-right: 0; }
}
@media (max-width: 640px) {
  .moment-bar { padding: 8px 14px; }
  .hero-sub { font-size: 1.125rem; }
  .diag-head h2 { font-size: 1.75rem; }
}
@media (max-width: 480px) {
  /* Le titre ne se réduit plus pour tenir sur une ligne : il se coupe. */
  .hero-title { font-size: clamp(2.125rem, 9.4vw, 2.5rem); }
  .search-q { font-size: 1.0625rem; }
  .hero-right { border-radius: 22px; padding: 28px 14px 32px; }
  .hero-rotor { padding: 10px 16px 10px 12px; font-size: 1.0625rem; }
  .cap-card { padding: 14px 16px; }
}