/* OneClick - feuille de style partagée (site public + back-office) */

:root {
  --oc-bg: #f6f7f9;
  --oc-surface: #ffffff;
  --oc-border: #e3e6ea;
  --oc-text: #1c2530;
  --oc-text-muted: #6b7480;
  --oc-primary: #1f7a5c;
  --oc-primary-dark: #175d45;
  --oc-primary-soft: #e7f3ee;
  --oc-danger: #c0392b;
  --oc-danger-soft: #fbe9e7;
  --oc-warning: #b8860b;
  --oc-sidebar-bg: #16211c;
  --oc-sidebar-text: #cfd8d3;
  --oc-sidebar-active: #1f7a5c;
  --oc-radius: 10px;
  --oc-shadow: 0 1px 2px rgba(16, 24, 32, .06), 0 1px 12px rgba(16, 24, 32, .04);
  font-size: 15px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--oc-bg);
  color: var(--oc-text);
  line-height: 1.5;
}

a { color: var(--oc-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; }
p { margin: 0 0 1em; color: var(--oc-text); }

.oc-container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ---------- Site public ---------- */
.oc-public-header {
  background: var(--oc-surface);
  border-bottom: 1px solid var(--oc-border);
}
.oc-public-header .oc-container {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.oc-brand { font-weight: 700; font-size: 1.15rem; color: var(--oc-text); }
.oc-brand span { color: var(--oc-primary); }

.oc-hero {
  padding: 72px 0 56px;
  text-align: center;
}
.oc-hero h1 { font-size: 2.1rem; }
.oc-hero p.lead { font-size: 1.05rem; color: var(--oc-text-muted); max-width: 560px; margin: 0 auto 28px; }

.oc-card {
  background: var(--oc-surface);
  border: 1px solid var(--oc-border);
  border-radius: var(--oc-radius);
  box-shadow: var(--oc-shadow);
  padding: 24px;
}

.oc-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
@media (max-width: 720px) { .oc-grid-3 { grid-template-columns: 1fr; } }

.oc-footer { text-align: center; color: var(--oc-text-muted); font-size: .85rem; padding: 40px 0; }

/* ---------- Boutons / formulaires ---------- */
.oc-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid var(--oc-primary);
  background: var(--oc-primary);
  color: #fff;
  font-weight: 600;
  font-size: .92rem;
  cursor: pointer;
}
.oc-btn:hover { background: var(--oc-primary-dark); border-color: var(--oc-primary-dark); text-decoration: none; }
.oc-btn.secondary { background: transparent; color: var(--oc-primary); }
.oc-btn.secondary:hover { background: var(--oc-primary-soft); }
.oc-btn.danger { background: var(--oc-danger); border-color: var(--oc-danger); }
.oc-btn.small { padding: 5px 10px; font-size: .8rem; }
.oc-btn[disabled] { opacity: .55; cursor: not-allowed; }

.oc-field { margin-bottom: 16px; }
.oc-field label { display: block; font-size: .82rem; font-weight: 600; color: var(--oc-text-muted); margin-bottom: 6px; }
.oc-field input[type=text], .oc-field input[type=number], .oc-field input[type=password], .oc-field input[type=email], .oc-field textarea, .oc-field select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--oc-border);
  border-radius: 7px;
  font-size: .92rem;
  font-family: inherit;
  background: #fff;
  color: var(--oc-text);
}
.oc-field textarea { min-height: 90px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; }
.oc-field input:focus, .oc-field textarea:focus, .oc-field select:focus { outline: 2px solid var(--oc-primary-soft); border-color: var(--oc-primary); }

.oc-auth-shell { max-width: 380px; margin: 64px auto; }

/* ---------- Pages de connexion / inscription : fond animé + entrée de carte ----------
   Réutilise les dégradés/animations déjà validés de la page d'accueil (blobs,
   pastille "live") pour rester cohérent visuellement sans dupliquer de code. */
.oc-auth-page {
  position: relative; overflow: hidden;
  min-height: calc(100vh - 65px - 78px);
  display: flex; align-items: center; justify-content: center;
  padding: 56px 20px;
  background:
    radial-gradient(640px 420px at 12% 15%, rgba(31,122,92,.16), transparent 60%),
    radial-gradient(560px 440px at 88% 85%, rgba(184,134,11,.14), transparent 55%),
    linear-gradient(180deg, #f9faf8 0%, var(--oc-bg) 100%);
}
.oc-auth-page::before, .oc-auth-page::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(70px); z-index: 0; pointer-events: none;
}
.oc-auth-page::before { width: 300px; height: 300px; background: rgba(31,122,92,.22); top: -80px; left: 8%; animation: oc-blob-drift-1 15s ease-in-out infinite alternate; }
.oc-auth-page::after { width: 260px; height: 260px; background: rgba(184,134,11,.18); bottom: -90px; right: 6%; animation: oc-blob-drift-2 18s ease-in-out infinite alternate; }
.oc-auth-page .oc-container { position: relative; z-index: 1; width: 100%; }

.oc-auth-badge {
  width: 52px; height: 52px; margin: 0 auto 18px; border-radius: 16px;
  background: linear-gradient(135deg, var(--oc-primary), var(--oc-primary-dark));
  color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 30px -10px rgba(31,122,92,.55);
  position: relative;
}
.oc-auth-badge svg { width: 26px; height: 26px; }
.oc-auth-badge::before {
  content: ""; position: absolute; inset: -6px; border-radius: 20px;
  border: 1.5px solid var(--oc-primary); opacity: .4;
  animation: oc-pill-pulse 2.6s ease-out infinite;
}

.oc-auth-shell.oc-card {
  position: relative; max-width: 420px; padding: 34px 32px;
  border-radius: 18px; box-shadow: 0 30px 70px -24px rgba(16,24,32,.28), var(--oc-shadow);
  animation: oc-card-in .55s cubic-bezier(.2,.8,.2,1) both;
}
.oc-auth-shell h2 { text-align: center; }
.oc-auth-shell > p { text-align: center; }
@keyframes oc-card-in {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* Bouton en cours de soumission (login/register) - anneau tournant, pas de
   dépendance JS supplémentaire au-delà d'un toggle de classe. */
.oc-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.oc-btn.is-loading::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px;
  margin: -8px 0 0 -8px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  animation: oc-btn-spin .6s linear infinite;
}
.oc-btn.secondary.is-loading::before { border-color: rgba(31,122,92,.35); border-top-color: var(--oc-primary); }
@keyframes oc-btn-spin { to { transform: rotate(360deg); } }

.oc-alert { padding: 10px 14px; border-radius: 8px; font-size: .87rem; margin-bottom: 16px; }
.oc-alert.error { background: var(--oc-danger-soft); color: var(--oc-danger); }
.oc-alert.success { background: var(--oc-primary-soft); color: var(--oc-primary-dark); }

/* ---------- Back-office ---------- */
.oc-admin { display: flex; min-height: 100vh; }

.oc-sidebar {
  width: 250px; flex-shrink: 0;
  background: var(--oc-sidebar-bg);
  color: var(--oc-sidebar-text);
  padding: 20px 0;
  overflow-y: auto;
}
.oc-sidebar .oc-brand { color: #fff; padding: 0 20px 18px; display: block; }
.oc-sidebar .oc-brand span { color: #6fcf9e; }
.oc-nav-group { margin-bottom: 6px; }
.oc-nav-group h4 {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  color: #7c8a80; padding: 14px 20px 6px; margin: 0; font-weight: 700;
}
.oc-nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 20px;
  color: var(--oc-sidebar-text);
  font-size: .88rem;
  border-left: 3px solid transparent;
}
.oc-nav-link:hover { background: rgba(255,255,255,.05); text-decoration: none; }
.oc-nav-link.active { background: rgba(31,122,92,.25); border-left-color: var(--oc-sidebar-active); color: #fff; font-weight: 600; }

.oc-main { flex: 1; min-width: 0; }
.oc-topbar {
  height: 60px; background: var(--oc-surface); border-bottom: 1px solid var(--oc-border);
  display: flex; align-items: center; justify-content: space-between; padding: 0 28px;
}
.oc-topbar .oc-user { font-size: .85rem; color: var(--oc-text-muted); display: flex; align-items: center; gap: 12px; }
.oc-content { padding: 28px; max-width: 1200px; }

.oc-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.oc-page-header h1 { font-size: 1.35rem; }

.oc-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 28px; }
.oc-kpi { background: var(--oc-surface); border: 1px solid var(--oc-border); border-radius: var(--oc-radius); padding: 18px; }
.oc-kpi .value { font-size: 1.55rem; font-weight: 700; }
.oc-kpi .label { font-size: .78rem; color: var(--oc-text-muted); margin-top: 2px; }

table.oc-table { width: 100%; border-collapse: collapse; background: var(--oc-surface); border: 1px solid var(--oc-border); border-radius: var(--oc-radius); overflow: hidden; }
table.oc-table th, table.oc-table td {
  text-align: left; padding: 10px 14px; font-size: .85rem; border-bottom: 1px solid var(--oc-border);
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
table.oc-table th { background: #fafbfc; color: var(--oc-text-muted); font-weight: 600; font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; }
table.oc-table tbody tr:hover { background: #fafbfc; }
table.oc-table tbody tr:last-child td { border-bottom: none; }

.oc-badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: .72rem; font-weight: 600; background: var(--oc-primary-soft); color: var(--oc-primary-dark); }

.oc-empty { padding: 40px; text-align: center; color: var(--oc-text-muted); }
.oc-loading { padding: 24px; text-align: center; color: var(--oc-text-muted); font-size: .85rem; }

/* Modal générique */
.oc-modal-backdrop {
  position: fixed; inset: 0; background: rgba(16,24,32,.45);
  display: none; align-items: center; justify-content: center; z-index: 50; padding: 20px;
}
.oc-modal-backdrop.open { display: flex; }
.oc-modal {
  background: #fff; border-radius: var(--oc-radius); padding: 24px;
  width: 100%; max-width: 460px; max-height: 86vh; overflow-y: auto;
}
.oc-modal h3 { margin-bottom: 18px; }
.oc-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }

.oc-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.oc-tag-list { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Thème back-office par secteur d'activité ----------
   Posé par public/assets/js/admin.js (applySectorTheme()) via
   <body data-sector="..."> selon la catégorie de l'établissement connecté.
   Ne redéfinit que les variables de couleur : la mise en page ne change pas,
   seule la teinte du back-office s'adapte au métier ("restaurant" garde le
   vert par défaut - pas de règle dédiée ci-dessous). */
body[data-sector="cafe"] { --oc-primary: #8a5a2e; --oc-primary-dark: #6b4522; --oc-primary-soft: #f5ece0; --oc-sidebar-active: #8a5a2e; }
body[data-sector="bar"] { --oc-primary: #6b2d5c; --oc-primary-dark: #4f2044; --oc-primary-soft: #f3e6f0; --oc-sidebar-active: #6b2d5c; }
body[data-sector="hotel"] { --oc-primary: #2a4d8f; --oc-primary-dark: #1f3a6b; --oc-primary-soft: #e8edf8; --oc-sidebar-active: #2a4d8f; }
body[data-sector="spa"] { --oc-primary: #2f8f83; --oc-primary-dark: #226b62; --oc-primary-soft: #e5f4f2; --oc-sidebar-active: #2f8f83; }
body[data-sector="salon"] { --oc-primary: #b83a6b; --oc-primary-dark: #8f2c53; --oc-primary-soft: #fbe8f0; --oc-sidebar-active: #b83a6b; }
body[data-sector="boutique"] { --oc-primary: #4a3f8f; --oc-primary-dark: #362e6b; --oc-primary-soft: #eceafa; --oc-sidebar-active: #4a3f8f; }
body[data-sector="fastfood"] { --oc-primary: #d9622b; --oc-primary-dark: #a84a1f; --oc-primary-soft: #fbe9e0; --oc-sidebar-active: #d9622b; }

/* ---------- Page d'accueil (marketing) ---------- */
.oc-home .oc-public-header { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(6px); background: rgba(255,255,255,.92); }
.oc-home svg { display: block; }

.oc-home-hero {
  position: relative;
  overflow: hidden;
  padding: 84px 0 120px;
  background:
    radial-gradient(720px 360px at 12% -10%, rgba(31,122,92,.16), transparent 60%),
    radial-gradient(640px 420px at 108% 10%, rgba(31,122,92,.12), transparent 55%),
    linear-gradient(180deg, #f9faf8 0%, var(--oc-bg) 100%);
}
/* Formes décoratives floues - profondeur visuelle sans image externe */
.oc-home-hero::before, .oc-home-hero::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(60px); z-index: 0; pointer-events: none;
}
.oc-home-hero::before { width: 320px; height: 320px; background: rgba(31,122,92,.22); top: -120px; right: 6%; }
.oc-home-hero::after { width: 260px; height: 260px; background: rgba(184,134,11,.16); bottom: -100px; left: 2%; }
.oc-home-hero .oc-container { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
@media (max-width: 880px) { .oc-home-hero .oc-container { grid-template-columns: 1fr; } }

.oc-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--oc-primary-soft); color: var(--oc-primary-dark);
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  padding: 6px 14px; border-radius: 999px; margin-bottom: 20px;
}
.oc-home-hero h1 { font-size: 2.6rem; text-align: left; letter-spacing: -.01em; }
.oc-home-hero .lead { text-align: left; margin: 0 0 26px; max-width: 480px; font-size: 1.08rem; }
.oc-home-hero .oc-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.oc-hero-trust { display: flex; flex-direction: column; gap: 9px; font-size: .86rem; color: var(--oc-text-muted); }
.oc-hero-trust div { display: flex; align-items: center; gap: 8px; }
.oc-hero-trust svg { width: 17px; height: 17px; color: var(--oc-primary); flex-shrink: 0; }

/* Mockup produit purement CSS/SVG - pas d'image externe */
.oc-hero-visual { position: relative; }
.oc-hero-mock {
  position: relative; z-index: 1;
  background: var(--oc-surface); border: 1px solid var(--oc-border); border-radius: 16px;
  box-shadow: 0 24px 60px -14px rgba(16,24,32,.22), var(--oc-shadow);
  padding: 0 0 18px; transform: rotate(1.2deg); overflow: hidden;
}
.oc-hero-mock-chrome {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: #fafbfc; border-bottom: 1px solid var(--oc-border);
}
.oc-hero-mock-chrome .oc-hero-mock-bar { display: flex; gap: 6px; }
.oc-hero-mock-chrome .oc-hero-mock-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--oc-border); }
.oc-hero-mock-chrome .oc-hero-mock-url {
  flex: 1; height: 20px; border-radius: 999px; background: #fff; border: 1px solid var(--oc-border);
  font-size: .68rem; color: var(--oc-text-muted); display: flex; align-items: center; padding: 0 10px; gap: 5px;
}
.oc-hero-mock-body { padding: 16px 18px 0; }
.oc-hero-mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.oc-hero-mock-kpis div { background: #fafbfc; border: 1px solid var(--oc-border); border-radius: 10px; padding: 10px; }
.oc-hero-mock-kpis strong { display: block; font-size: 1.15rem; }
.oc-hero-mock-kpis small { color: var(--oc-text-muted); font-size: .66rem; text-transform: uppercase; letter-spacing: .02em; }
.oc-hero-mock-chart { height: 84px; border-radius: 10px; background: linear-gradient(180deg, var(--oc-primary-soft), transparent); border: 1px solid var(--oc-border); display: flex; align-items: flex-end; gap: 5px; padding: 8px; }
.oc-hero-mock-chart i { flex: 1; background: var(--oc-primary); border-radius: 3px 3px 0 0; opacity: .85; }
.oc-hero-mock-row { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; font-size: .8rem; color: var(--oc-text-muted); }
.oc-hero-mock-row svg { width: 15px; height: 15px; color: var(--oc-primary); }

/* Badge flottant superposé au mockup - effet "carte produit" */
.oc-hero-floating {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--oc-border); border-radius: 12px;
  box-shadow: 0 14px 30px -10px rgba(16,24,32,.25);
  padding: 10px 14px; font-size: .78rem; font-weight: 600;
}
.oc-hero-floating.oc-float-1 { top: -16px; left: -22px; }
.oc-hero-floating.oc-float-2 { bottom: -18px; right: -18px; }
.oc-hero-floating .oc-icon-dot {
  width: 30px; height: 30px; border-radius: 9px; background: var(--oc-primary-soft); color: var(--oc-primary-dark);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.oc-hero-floating .oc-icon-dot svg { width: 16px; height: 16px; }
.oc-hero-floating small { display: block; font-weight: 400; color: var(--oc-text-muted); font-size: .68rem; }
@media (max-width: 480px) { .oc-hero-floating { display: none; } }

.oc-stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-top: 44px; position: relative; z-index: 1; }
.oc-stat { display: flex; align-items: center; gap: 12px; }
.oc-stat .oc-icon-dot { width: 42px; height: 42px; border-radius: 11px; background: rgba(255,255,255,.7); border: 1px solid var(--oc-border); color: var(--oc-primary-dark); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.oc-stat .oc-icon-dot svg { width: 21px; height: 21px; }
.oc-stat strong { display: block; font-size: 1.2rem; line-height: 1.2; }
.oc-stat span { font-size: .78rem; color: var(--oc-text-muted); }

.oc-section { padding: 68px 0; }
.oc-section-head { text-align: center; max-width: 620px; margin: 0 auto 40px; }
.oc-section-head h2 { font-size: 1.7rem; }
.oc-section-head p { color: var(--oc-text-muted); }
.oc-section-alt { background: var(--oc-surface); border-top: 1px solid var(--oc-border); border-bottom: 1px solid var(--oc-border); }

.oc-icon-tile {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
  background: var(--oc-primary-soft); color: var(--oc-primary-dark);
}
.oc-icon-tile svg { width: 23px; height: 23px; }
.oc-icon-tile.alt { background: #fdf3e0; color: var(--oc-warning); }

.oc-feature-card { text-align: left; transition: transform .12s ease, box-shadow .12s ease; }
.oc-feature-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -16px rgba(16,24,32,.22), var(--oc-shadow); }
.oc-feature-card h3 { font-size: 1.02rem; }
.oc-feature-card p { font-size: .88rem; color: var(--oc-text-muted); margin: 0; }

.oc-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 8px; }
@media (max-width: 720px) { .oc-steps { grid-template-columns: 1fr; } }
.oc-step { text-align: center; padding: 0 12px; }
.oc-step-num {
  width: 42px; height: 42px; margin: 0 auto 14px;
  border-radius: 50%; background: var(--oc-primary); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
  box-shadow: 0 8px 18px -6px rgba(31,122,92,.55);
}
.oc-step h3 { font-size: 1rem; }
.oc-step p { color: var(--oc-text-muted); font-size: .88rem; }

.oc-types-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 8px; }
.oc-type-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  background: var(--oc-surface); border: 1px solid var(--oc-border); border-radius: var(--oc-radius);
  padding: 22px 12px; color: var(--oc-text); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.oc-type-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -16px rgba(16,24,32,.22), var(--oc-shadow); border-color: var(--oc-primary); text-decoration: none; }
.oc-type-card .oc-icon-tile { margin-bottom: 0; width: 50px; height: 50px; }
.oc-type-card .oc-icon-tile svg { width: 25px; height: 25px; }
.oc-type-card span:last-child { font-size: .85rem; font-weight: 600; }

.oc-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 8px; align-items: stretch; }
@media (max-width: 940px) { .oc-plans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .oc-plans { grid-template-columns: 1fr; } }
.oc-plan-card { display: flex; flex-direction: column; position: relative; }
.oc-plan-card.featured { border-color: var(--oc-primary); box-shadow: 0 0 0 3px var(--oc-primary-soft), var(--oc-shadow); }
.oc-plan-card .oc-plan-badge {
  position: absolute; top: -12px; right: 18px; background: var(--oc-primary); color: #fff;
  font-size: .66rem; font-weight: 700; letter-spacing: .03em; padding: 3px 10px; border-radius: 999px;
}
.oc-plan-card .oc-icon-tile { width: 38px; height: 38px; margin-bottom: 12px; }
.oc-plan-card .oc-icon-tile svg { width: 19px; height: 19px; }
.oc-plan-card h3 { font-size: 1.05rem; margin-bottom: 4px; }
.oc-plan-card .oc-plan-tagline { font-size: .82rem; color: var(--oc-text-muted); margin-bottom: 16px; }
.oc-plan-card ul { list-style: none; padding: 0; margin: 0 0 18px; font-size: .85rem; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.oc-plan-card li { display: flex; align-items: flex-start; gap: 7px; }
.oc-plan-card li svg { width: 15px; height: 15px; color: var(--oc-primary); flex-shrink: 0; margin-top: 2px; }

.oc-final-cta {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--oc-primary-dark), var(--oc-primary));
  color: #fff; border-radius: 20px; padding: 52px 32px; text-align: center;
}
.oc-final-cta::before {
  content: ""; position: absolute; width: 280px; height: 280px; border-radius: 50%;
  background: rgba(255,255,255,.08); top: -140px; right: -60px;
}
.oc-final-cta > * { position: relative; z-index: 1; }
.oc-final-cta h2 { color: #fff; }
.oc-final-cta p { color: rgba(255,255,255,.85); max-width: 480px; margin: 0 auto 24px; }
.oc-final-cta .oc-btn.secondary { background: #fff; color: var(--oc-primary-dark); border-color: #fff; }
.oc-final-cta .oc-btn.secondary:hover { background: rgba(255,255,255,.9); }
.oc-final-cta .oc-btn:not(.secondary) { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); }
.oc-final-cta .oc-btn:not(.secondary):hover { background: rgba(255,255,255,.22); }

/* Bandeau défilant des secteurs (marquee) - piste dupliquée en HTML, boucle sur -50% */
.oc-marquee-wrap { padding: 30px 0 6px; overflow: hidden; position: relative; }
.oc-marquee-wrap::before, .oc-marquee-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none;
}
.oc-marquee-wrap::before { left: 0; background: linear-gradient(90deg, var(--oc-bg), transparent); }
.oc-marquee-wrap::after { right: 0; background: linear-gradient(270deg, var(--oc-bg), transparent); }
.oc-marquee-track { display: flex; gap: 12px; width: max-content; }
.oc-marquee-pill {
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  background: var(--oc-surface); border: 1px solid var(--oc-border); border-radius: 999px;
  padding: 7px 16px 7px 7px; font-size: .82rem; font-weight: 600; color: var(--oc-text-muted);
  transition: border-color .15s ease, color .15s ease;
}
a.oc-marquee-pill:hover { text-decoration: none; border-color: var(--oc-primary); color: var(--oc-primary-dark); }
.oc-marquee-pill .oc-icon-dot {
  width: 27px; height: 27px; border-radius: 50%; background: var(--oc-primary-soft); color: var(--oc-primary-dark);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.oc-marquee-pill .oc-icon-dot svg { width: 14px; height: 14px; }

/* Carrousel de bénéfices - défilement horizontal avec accroche (snap) */
.oc-benefits-scroll {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 4px 22px; margin-top: 8px; -webkit-overflow-scrolling: touch;
}
.oc-benefit-card {
  scroll-snap-align: start; flex: 0 0 236px; border-radius: 16px; padding: 22px 20px;
  background: linear-gradient(155deg, var(--oc-primary), var(--oc-primary-dark));
  color: #fff; position: relative; overflow: hidden;
}
.oc-benefit-card:nth-child(even) { background: linear-gradient(155deg, #c9971a, #8a6a10); }
.oc-benefit-card::after {
  content: ""; position: absolute; width: 130px; height: 130px; border-radius: 50%;
  background: rgba(255,255,255,.08); top: -55px; right: -45px; pointer-events: none;
}
.oc-benefit-card > * { position: relative; z-index: 1; }
.oc-benefit-card .oc-icon-tile { background: rgba(255,255,255,.18); color: #fff; }
.oc-benefit-card h3 { color: #fff; font-size: .98rem; }
.oc-benefit-card p { color: rgba(255,255,255,.86); font-size: .84rem; margin: 0; }

/* Timeline verticale "Comment ça marche" - ligne centrale, étapes alternées */
.oc-timeline { position: relative; margin-top: 24px; }
.oc-timeline::before {
  content: ""; position: absolute; left: 50%; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(180deg, var(--oc-border), var(--oc-primary), var(--oc-border));
  transform: translateX(-50%);
}
.oc-timeline-item { position: relative; width: 50%; padding: 0 46px 54px; box-sizing: border-box; }
.oc-timeline-item:last-child { padding-bottom: 0; }
.oc-timeline-item:nth-child(odd) { left: 0; text-align: right; }
.oc-timeline-item:nth-child(even) { left: 50%; text-align: left; }
.oc-timeline-num {
  position: absolute; top: 0; width: 44px; height: 44px; border-radius: 50%;
  background: var(--oc-primary); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 18px -6px rgba(31,122,92,.55); z-index: 1;
}
.oc-timeline-item:nth-child(odd) .oc-timeline-num { right: -22px; }
.oc-timeline-item:nth-child(even) .oc-timeline-num { left: -22px; }
.oc-timeline-num svg { width: 20px; height: 20px; }
.oc-timeline-item h3 { font-size: 1rem; margin-bottom: 4px; }
.oc-timeline-item p { color: var(--oc-text-muted); font-size: .88rem; margin: 0; }
@media (max-width: 720px) {
  .oc-timeline::before { left: 21px; }
  .oc-timeline-item { width: 100%; left: 0 !important; text-align: left !important; padding: 0 0 40px 62px; }
  .oc-timeline-item:nth-child(odd) .oc-timeline-num, .oc-timeline-item:nth-child(even) .oc-timeline-num { left: 0; right: auto; }
}

/* FAQ - accordéon natif <details>/<summary>, aucun JS requis */
.oc-faq { max-width: 760px; margin: 8px auto 0; display: flex; flex-direction: column; gap: 12px; }
.oc-faq-item {
  background: var(--oc-surface); border: 1px solid var(--oc-border); border-radius: 12px; overflow: hidden;
}
.oc-faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 16px 20px; font-weight: 600; font-size: .93rem;
}
.oc-faq-item summary::-webkit-details-marker { display: none; }
.oc-faq-item summary .oc-faq-chevron { flex-shrink: 0; width: 18px; height: 18px; color: var(--oc-primary); transition: transform .25s ease; }
.oc-faq-item[open] summary .oc-faq-chevron { transform: rotate(180deg); }
.oc-faq-item .oc-faq-body { padding: 0 20px 18px; }
.oc-faq-item .oc-faq-body p { color: var(--oc-text-muted); font-size: .87rem; }

/* Pill CTA avec halo pulsé (navigation) */
.oc-pill-cta { position: relative; }
.oc-pill-cta::before {
  content: ""; position: absolute; inset: -3px; border-radius: 999px; border: 1.5px solid var(--oc-primary);
  opacity: .5; pointer-events: none;
}

/* ---------- Animations & interactions (page d'accueil) ---------- */

/* Header qui se densifie légèrement au scroll (classe posée par site.js) */
.oc-public-header { transition: box-shadow .25s ease; }
.oc-public-header.scrolled { box-shadow: 0 2px 14px rgba(16,24,32,.08); }

/* Apparition au scroll — activée UNIQUEMENT si site.js tourne (IntersectionObserver
   détecté) : la classe .oc-js-reveal est posée sur <html> par un script inline dans
   layouts/public.php. Sans elle, .oc-reveal reste visible par défaut (aucune régression
   si le JS échoue à charger). */
.oc-js-reveal .oc-reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: var(--reveal-delay, 0s);
}
.oc-js-reveal .oc-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Formes décoratives du hero : dérive lente en continu */
.oc-home-hero::before { animation: oc-blob-drift-1 14s ease-in-out infinite alternate; }
.oc-home-hero::after { animation: oc-blob-drift-2 17s ease-in-out infinite alternate; }
@keyframes oc-blob-drift-1 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-24px, 26px) scale(1.12); }
}
@keyframes oc-blob-drift-2 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(20px, -18px) scale(1.08); }
}

/* Mockup produit : tilt 3D au survol (piloté par site.js), barres qui poussent à l'apparition */
.oc-hero-visual { perspective: 1000px; }
.oc-hero-mock { transition: transform .25s ease; transform-style: preserve-3d; will-change: transform; }
.oc-hero-mock-chart i {
  transform: scaleY(0); transform-origin: bottom;
  animation: oc-grow-bar .7s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(var(--i, 0) * 90ms + .3s);
}
@keyframes oc-grow-bar { to { transform: scaleY(1); } }

.oc-hero-floating { animation: oc-badge-float 3.6s ease-in-out infinite; }
.oc-hero-floating.oc-float-2 { animation-delay: .6s; }
@keyframes oc-badge-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* Pastille "en direct" (badges flottants, indicateurs temps réel) */
.oc-live-dot {
  position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--oc-primary); margin-right: 6px; flex-shrink: 0;
}
.oc-live-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--oc-primary);
  animation: oc-pulse-ring 1.8s ease-out infinite;
}
@keyframes oc-pulse-ring {
  0% { transform: scale(1); opacity: .7; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Texte en dégradé animé pour le mot-clé du titre — repli en couleur pleine si
   background-clip:text n'est pas supporté (jamais de texte invisible). */
.oc-gradient-word { color: var(--oc-primary-dark); font-weight: 800; }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .oc-gradient-word {
    background-image: linear-gradient(90deg, var(--oc-primary), #2fa876, var(--oc-primary-dark), var(--oc-primary));
    background-size: 240% auto;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: oc-gradient-shift 5s linear infinite;
  }
}
@keyframes oc-gradient-shift { to { background-position: -240% center; } }

/* Effet de "reflet" balayant les boutons pleins au survol */
.oc-btn:not(.secondary) { position: relative; overflow: hidden; transition: background .15s ease, transform .15s ease, box-shadow .15s ease; }
.oc-btn:not(.secondary):hover { transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(31,122,92,.55); }
.oc-btn:not(.secondary)::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg); transition: left .55s ease;
}
.oc-btn:not(.secondary):hover::after { left: 130%; }

.oc-type-card:hover .oc-icon-tile, .oc-feature-card:hover .oc-icon-tile { animation: oc-icon-pop .4s ease; }
@keyframes oc-icon-pop {
  0% { transform: scale(1) rotate(0); }
  40% { transform: scale(1.15) rotate(-4deg); }
  100% { transform: scale(1) rotate(0); }
}

/* Défilement continu du bandeau des secteurs - piste dupliquée, boucle exacte sur -50% */
.oc-marquee-track { animation: oc-marquee-scroll 26s linear infinite; }
.oc-marquee-wrap:hover .oc-marquee-track { animation-play-state: paused; }
@keyframes oc-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Halo pulsé du bouton "Créer un compte" dans la navigation */
.oc-pill-cta::before { animation: oc-pill-pulse 2.4s ease-out infinite; }
@keyframes oc-pill-pulse {
  0% { transform: scale(1); opacity: .5; }
  100% { transform: scale(1.2); opacity: 0; }
}

/* ===== Assistant de création d'établissement en 4 étapes (register.php) ===== */
.oc-wizard-steps { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 24px; }
.oc-wizard-step-dot {
  display: flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 600; color: var(--oc-text-muted);
}
.oc-wizard-step-dot .oc-wizard-num {
  width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--oc-border); background: #fff;
  display: flex; align-items: center; justify-content: center; font-size: .78rem; transition: all .25s ease;
}
.oc-wizard-step-dot.active .oc-wizard-num { border-color: var(--oc-primary); background: var(--oc-primary); color: #fff; }
.oc-wizard-step-dot.done .oc-wizard-num { border-color: var(--oc-primary); background: var(--oc-primary-soft); color: var(--oc-primary-dark); }
.oc-wizard-step-dot.active { color: var(--oc-text); }
.oc-wizard-step-dot-sep { width: 22px; height: 1.5px; background: var(--oc-border); }
.oc-wizard-step-dot-label { display: none; }
@media (min-width: 560px) { .oc-wizard-step-dot-label { display: inline; } }

.oc-wizard-step { animation: oc-step-in .32s ease both; }
@keyframes oc-step-in {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: translateX(0); }
}

.oc-wizard-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; }

.oc-plan-pick-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 16px; }
@media (min-width: 480px) { .oc-plan-pick-grid { grid-template-columns: 1fr 1fr; } }
.oc-plan-pick {
  border: 1.5px solid var(--oc-border); border-radius: var(--oc-radius); padding: 14px; cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .15s ease; position: relative; background: #fff;
}
.oc-plan-pick:hover { transform: translateY(-2px); border-color: var(--oc-primary); }
.oc-plan-pick.selected { border-color: var(--oc-primary); background: var(--oc-primary-soft); box-shadow: 0 0 0 3px var(--oc-primary-soft); }
.oc-plan-pick h4 { margin: 0 0 2px; font-size: .95rem; }
.oc-plan-pick .oc-plan-pick-tag { font-size: .74rem; color: var(--oc-text-muted); margin-bottom: 8px; }
.oc-plan-pick ul { list-style: none; margin: 0; padding: 0; font-size: .78rem; color: var(--oc-text-muted); display: flex; flex-direction: column; gap: 3px; }
.oc-plan-pick .oc-plan-pick-check {
  position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--oc-border); background: #fff; transition: all .2s ease;
}
.oc-plan-pick.selected .oc-plan-pick-check { border-color: var(--oc-primary); background: var(--oc-primary); }
.oc-plan-pick.selected .oc-plan-pick-check::after {
  content: ''; position: absolute; inset: 0; margin: auto; width: 5px; height: 9px;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(45deg);
}

.oc-code-boxes { display: flex; gap: 8px; justify-content: center; margin: 14px 0; }
.oc-code-boxes input {
  width: 42px; height: 52px; text-align: center; font-size: 1.3rem; font-weight: 700;
  border: 1.5px solid var(--oc-border); border-radius: 8px; background: #fff;
}
.oc-code-boxes input:focus { outline: 2px solid var(--oc-primary-soft); border-color: var(--oc-primary); }

.oc-wizard-summary { background: var(--oc-surface); border: 1px solid var(--oc-border); border-radius: var(--oc-radius); padding: 14px 16px; margin-bottom: 16px; font-size: .85rem; }
.oc-wizard-summary div { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px dashed var(--oc-border); }
.oc-wizard-summary div:last-child { border-bottom: none; }
.oc-wizard-summary b { color: var(--oc-text); }

.oc-tenant-link-box {
  background: var(--oc-primary-soft); border: 1.5px dashed var(--oc-primary); border-radius: var(--oc-radius);
  padding: 16px; text-align: center; margin-bottom: 16px;
}
.oc-tenant-link-box a { font-weight: 700; word-break: break-all; }

/* Avis clients publiés sur la vitrine publique (landing.php) - preuve sociale */
.oc-rating-badge {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 6px;
  font-size: .82rem; font-weight: 600; color: var(--oc-text-muted);
}
.oc-rating-stars { color: #e0a419; letter-spacing: 1px; }
.oc-review-card { display: flex; flex-direction: column; gap: 10px; }
.oc-review-card .oc-review-stars { color: #e0a419; font-size: .95rem; letter-spacing: 1px; }
.oc-review-quote { color: var(--oc-text); font-size: .92rem; line-height: 1.5; flex-grow: 1; }
.oc-review-meta { display: flex; justify-content: space-between; font-size: .78rem; color: var(--oc-text-muted); }
.oc-review-share {
  display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600;
  color: var(--oc-primary); margin-top: 4px;
}
.oc-review-share svg { width: 15px; height: 15px; }
.oc-review-share:hover { text-decoration: underline; }

/* Respect des préférences d'accessibilité : on coupe les animations continues/décoratives */
@media (prefers-reduced-motion: reduce) {
  .oc-home-hero::before, .oc-home-hero::after,
  .oc-hero-floating, .oc-hero-mock-chart i, .oc-gradient-word,
  .oc-live-dot::after, .oc-type-card:hover .oc-icon-tile, .oc-feature-card:hover .oc-icon-tile,
  .oc-marquee-track, .oc-pill-cta::before,
  .oc-auth-page::before, .oc-auth-page::after, .oc-auth-badge::before {
    animation: none !important;
  }
  .oc-auth-shell.oc-card { animation: none !important; opacity: 1 !important; transform: none !important; }
  .oc-btn.is-loading::before { animation: none !important; }
  .oc-hero-mock-chart i { transform: scaleY(1) !important; }
  .oc-js-reveal .oc-reveal { transition: none !important; opacity: 1 !important; transform: none !important; }
  .oc-btn:not(.secondary)::after { display: none; }
  .oc-marquee-wrap { overflow-x: auto; }
  .oc-pill-cta::before { opacity: 0; }
  .oc-wizard-step { animation: none !important; }
  .oc-plan-pick:hover { transform: none; }
}

/* Avis clients publiés sur la vitrine publique (landing.php) - preuve sociale */
.oc-rating-badge {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 6px;
  font-size: .82rem; font-weight: 600; color: var(--oc-text-muted);
}
.oc-rating-stars { color: #e0a419; letter-spacing: 1px; }
.oc-review-card { display: flex; flex-direction: column; gap: 10px; }
.oc-review-card .oc-review-stars { color: #e0a419; font-size: .95rem; letter-spacing: 1px; }
.oc-review-quote { color: var(--oc-text); font-size: .92rem; line-height: 1.5; flex-grow: 1; }
.oc-review-meta { display: flex; justify-content: space-between; font-size: .78rem; color: var(--oc-text-muted); }
.oc-review-share {
  display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600;
  color: var(--oc-primary); margin-top: 4px;
}
.oc-review-share svg { width: 15px; height: 15px; }
.oc-review-share:hover { text-decoration: underline; }

/* ---------- Landing page publique enrichie (resources/views/public/landing.php) ----------
   Sections purement additives : chacune reste cachée si les données correspondantes
   sont absentes (aucune régression sur une landing déjà en place, quel que soit le
   secteur). Réutilise les tokens de couleur et les composants existants (.oc-card,
   .oc-btn, .oc-icon-tile, .oc-section-head, .oc-grid-3) plutôt que d'en réinventer. */

/* Bande de signaux réels (contact dispo, horaires en ligne, avis, localisation) */
.oc-info-strip { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 24px; }
.oc-info-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--oc-surface); border: 1px solid var(--oc-border); border-radius: 999px;
  padding: 6px 14px 6px 8px; font-size: .8rem; font-weight: 600; color: var(--oc-text-muted);
}
.oc-info-chip-icon {
  width: 24px; height: 24px; border-radius: 50%; background: var(--oc-primary-soft); color: var(--oc-primary-dark);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.oc-info-chip-icon svg { width: 13px; height: 13px; }

/* Aperçu du menu / de la carte / des prestations (rempli en JS via l'API publique) */
.oc-menu-item { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; }
.oc-menu-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.oc-menu-item-top strong { font-size: .95rem; }
.oc-menu-item-price { font-weight: 700; color: var(--oc-primary-dark); white-space: nowrap; font-size: .9rem; }
.oc-menu-item-cat { font-size: .76rem; color: var(--oc-text-muted); }

/* Carte de localisation (OpenStreetMap, aucune clé requise) */
.oc-map-card { padding: 0; overflow: hidden; }
.oc-map-card iframe { width: 100%; height: 260px; border: 0; display: block; }

/* Barre d'action fixe en bas d'écran, mobile uniquement */
.oc-sticky-cta { display: none; }
@media (max-width: 720px) {
  .oc-sticky-cta {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--oc-surface); border-top: 1px solid var(--oc-border);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 18px -10px rgba(16,24,32,.25);
  }
  .oc-sticky-cta .oc-btn { width: 100%; justify-content: center; }
  body.oc-has-sticky-cta { padding-bottom: 74px; }
}

@media (prefers-reduced-motion: reduce) {
  .oc-sticky-cta { transition: none !important; }
}