/* ==========================================================================
   OptiResto — THÈME CLAIR
   Base : recommandations du générateur UI/UX Pro Max (SaaS B2B → fond clair,
   texte ardoise, contraste ≥ 4,5:1), adaptées à l'identité OptiResto
   (bleu nuit + cyan + vert) au lieu du bleu/orange générique proposé.
   Chargé APRÈS toutes les autres feuilles : il ne fait que surcharger.
   ========================================================================== */
:root {
  --bg: #F5F8FC;
  --bg-soft: #EAF1F8;
  --card: #FFFFFF;
  --ink: #0B1B2E;

  /* Les jetons « couleur » deviennent des rôles adaptés au fond clair. */
  --white: var(--ink);            /* texte principal */
  --grey: #475569;                /* texte secondaire : 7,2:1 sur --bg */
  --grey-soft: #5B6B80;           /* texte discret : 5,2:1 sur --bg */
  --cyan: #0369A1;                /* accent texte : 5,6:1 */
  --green: #15803D;               /* accent texte : 4,8:1 */
  --brand-green: #3D8B2A;         /* « Resto » du logo : 4,2:1 (grand texte) */
  --amber: #B45309;               /* enjeux : 4,7:1 */
  --deep: #FFFFFF;
  --tech: #E2EAF3;

  --cta-from: #38BDF8; --cta-mid: #5EEAD4; --cta-to: #4ADE80;
  --line: rgba(15, 37, 64, .10);
  --line-strong: rgba(15, 37, 64, .20);
  --surface: linear-gradient(180deg, #FFFFFF, #FBFDFF);
  --shadow-card: 0 1px 2px rgba(15, 37, 64, .05), 0 18px 40px -24px rgba(15, 37, 64, .22);
  --elev-1: var(--shadow-card);
  --elev-2: 0 1px 2px rgba(15, 37, 64, .06), 0 26px 50px -22px rgba(15, 37, 64, .3), 0 0 0 1px rgba(3, 105, 161, .14);
  color-scheme: light;
}

html, body { background: var(--bg); }
::selection { background: rgba(56, 189, 248, .3); color: var(--ink); }
.skip-link { background: var(--ink); color: #FFFFFF; }

/* ---------- Boutons : le dégradé lumineux reste la signature ---------- */
.btn--primary {
  background: linear-gradient(110deg, var(--cta-from), var(--cta-mid) 55%, var(--cta-to));
  color: var(--ink);
  box-shadow: 0 10px 26px -12px rgba(3, 105, 161, .55);
}
.btn--primary:hover { box-shadow: 0 16px 34px -12px rgba(21, 128, 61, .5); }
.btn--ghost { background: #FFFFFF; border-color: var(--line-strong); }
.btn--ghost:hover { background: #FFFFFF; border-color: rgba(3, 105, 161, .5); }
.btn--primary:focus-visible, .sticky-cta .btn:focus-visible { outline-color: var(--ink); }

/* ---------- En-tête et navigation ---------- */
.site-header.is-scrolled { background: rgba(245, 248, 252, .82); box-shadow: 0 1px 0 var(--line); }
.nav__toggle { background: #FFFFFF; }
.nav__panel, .site-header.is-menu-open { background: rgba(245, 248, 252, .98); }

/* ---------- Hero ---------- */
.hero__glow--cyan { opacity: .45; }
.hero__glow--green { opacity: .4; }
.hero::after { background: linear-gradient(transparent, var(--bg)); }
.eyebrow { background: #FFFFFF; box-shadow: 0 6px 20px -14px rgba(15, 37, 64, .35); }
.panel {
  background: linear-gradient(160deg, #FFFFFF, #F4F8FC);
  box-shadow: 0 40px 80px -40px rgba(15, 37, 64, .35), 0 0 0 1px rgba(3, 105, 161, .08);
}
.panel__chart, .tile, .mock__kpi, .mock__card { background: var(--bg); }
.chip { background: rgba(255, 255, 255, .92); box-shadow: 0 18px 40px -20px rgba(15, 37, 64, .35); }
.chip__icon--white { background: rgba(15, 37, 64, .06); box-shadow: 0 0 0 1px rgba(15, 37, 64, .14) inset; }
.chart__line, .ambition__path { filter: none; }

/* ---------- Cartes et sections ---------- */
.card { background: var(--card); }
.approach::before, .audience::before, .ambition::before { background: radial-gradient(ellipse 70% 60% at 50% 40%, var(--bg-soft), transparent 75%); }
.step__num { background: var(--bg); box-shadow: 0 0 0 6px var(--bg), 0 10px 24px -10px rgba(3, 105, 161, .45); }
.step:nth-child(3) .step__num { box-shadow: 0 0 0 6px var(--bg), 0 10px 24px -10px rgba(21, 128, 61, .45); }
.journey__num {
  background: linear-gradient(135deg, var(--cta-from), var(--cta-to)); color: var(--ink);
  box-shadow: 0 0 0 6px var(--bg), 0 10px 24px -10px rgba(3, 105, 161, .5);
}
.principles li, .pledges li, .countdown__units span { background: #FFFFFF; }

/* ---------- Démonstration produit ---------- */
.mock {
  background: linear-gradient(170deg, #FFFFFF, #F2F6FB);
  box-shadow: 0 60px 100px -50px rgba(15, 37, 64, .4), 0 0 0 1px rgba(3, 105, 161, .1);
}
.mock__side { background: var(--bg); }
.mock__big { background: rgba(11, 27, 46, .8); }
.spark--white { stroke: rgba(11, 27, 46, .55); }
.donut__seg--c, .legend span:nth-child(3) { stroke: rgba(11, 27, 46, .45); background: rgba(11, 27, 46, .45); }

/* ---------- Récit, flux, bandeau ---------- */
.story__panel { background: #FFFFFF; box-shadow: 0 30px 60px -36px rgba(15, 37, 64, .35); }
.story__time { background: linear-gradient(180deg, var(--ink), rgba(11, 27, 46, .1)); -webkit-background-clip: text; background-clip: text; }
.marquee__row span { color: rgba(11, 27, 46, .88); }
.marquee__row--ghost span { color: rgba(71, 85, 105, .45); }
.flow__node rect { fill: #FFFFFF; }
.flow__node.is-hot rect { fill: #F0F8FF; }
.flow__core-disc { fill: #FFFFFF; }
.cursor-halo { opacity: .5; }

/* ---------- Offre, contact, pied de page ---------- */
.offer__card { background: radial-gradient(ellipse at 50% 0%, rgba(251, 191, 36, .14), transparent 60%), #FFFFFF; }
.contact__card { background: linear-gradient(160deg, #FFFFFF, #F2F7FC); box-shadow: 0 50px 100px -50px rgba(15, 37, 64, .4); }
.contact__email { background: linear-gradient(100deg, var(--ink), var(--cyan) 60%, var(--green)); -webkit-background-clip: text; background-clip: text; }
.footer { background: linear-gradient(180deg, var(--bg), var(--bg-soft)); }
.toast { background: #FFFFFF; box-shadow: 0 20px 40px -18px rgba(15, 37, 64, .4); }
.sticky-cta { background: linear-gradient(180deg, rgba(245, 248, 252, 0), rgba(245, 248, 252, .95) 35%); }
.preview-ribbon { color: #FFFFFF; }

/* Texte en dégradé : le ton clair du milieu (#6EE7F9, ≈1,4:1 sur blanc) est remplacé
   par un turquoise soutenu (#0E7490, ≈5,4:1) pour rester lisible sur fond clair. */
.text-gradient { background: linear-gradient(100deg, var(--cyan) 0%, #0E7490 45%, var(--green) 100%); -webkit-background-clip: text; background-clip: text; }