@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --public-navy: #031d3a;
  --public-navy-2: #07335d;
  --public-blue: #087de8;
  --public-cyan: #16c7f4;
  --public-orange: #ff9200;
  --public-orange-dark: #e77900;
  --public-ink: #08234a;
  --public-muted: #526b89;
  --public-paper: #f4faff;
  --public-card: #ffffff;
  --public-line: #cfe8f7;
  --public-shadow: 0 18px 45px rgba(8, 55, 96, .10);
  --bg: var(--public-paper);
  --card: var(--public-card);
  --text: var(--public-ink);
  --sub: var(--public-muted);
  --faint: #7188a4;
  --border: var(--public-line);
  --orange: var(--public-orange);
  --ink: var(--public-ink);
  --petrol: var(--public-navy);
  --paper: var(--public-paper);
  --blue: var(--public-blue);
  --blue-ink: #0768c6;
  --line: var(--public-line);
  --muted: var(--public-muted);
}

html { scroll-behavior: smooth; }
html, body { min-height: 100%; }
body,
body.theme-light {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--public-ink);
  background:
    radial-gradient(circle at 10% 0%, rgba(22, 199, 244, .10), transparent 28rem),
    linear-gradient(180deg, #f9fdff 0%, #edf8ff 100%);
}

h1, h2, h3, h4,
.card-title, .legal-title, .contact-title, .hero-title,
.offer-name, .nav-logo, .brand {
  font-family: 'Archivo', 'Inter', sans-serif !important;
  letter-spacing: -.025em;
}

nav:not(.gtoolbar),
.topbar {
  min-height: 72px;
  padding: 0 clamp(18px, 4vw, 56px);
  background: rgba(255, 255, 255, .94) !important;
  border-bottom: 1px solid var(--public-line) !important;
  box-shadow: 0 8px 30px rgba(8, 55, 96, .06);
  backdrop-filter: blur(16px);
}

.nav-logo, .topbar .brand {
  color: var(--public-navy) !important;
  font-size: 1.15rem !important;
  font-weight: 900 !important;
}
.nav-logo span, .topbar .brand span { color: var(--public-cyan) !important; }
.nav-link, .topbar a:not(.brand) { color: var(--public-muted) !important; }
.nav-link:hover, .topbar a:not(.brand):hover { color: var(--public-blue) !important; }
.topbar .brand { font-size: 0 !important; }
.topbar .brand::before {
  content: 'CTbot';
  font-size: 1.15rem;
  color: var(--public-navy);
}
.topbar .brand::after {
  content: ' PUBLIC';
  font-size: 1.15rem;
  color: var(--public-cyan);
}

main {
  background: transparent !important;
}

.card,
.legal-container,
.contact-container,
.offer,
.content,
.empty,
.cat,
.cta-block {
  background: rgba(255, 255, 255, .96) !important;
  border-color: var(--public-line) !important;
  border-radius: 22px !important;
  box-shadow: var(--public-shadow) !important;
}

input, select, textarea {
  background: #f8fcff !important;
  color: var(--public-ink) !important;
  border-color: #bcdcf0 !important;
  border-radius: 12px !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--public-cyan) !important;
  box-shadow: 0 0 0 4px rgba(22, 199, 244, .14) !important;
}
select option { background: #fff !important; color: var(--public-ink) !important; }

.btn,
.offer-btn,
.cta,
.cta a,
.topbar .chat {
  border-radius: 13px !important;
  background: linear-gradient(135deg, var(--public-orange), #ffab27) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 12px 28px rgba(255, 146, 0, .24) !important;
}
.btn:hover,
.offer-btn:hover,
.cta:hover,
.cta a:hover,
.topbar .chat:hover {
  background: linear-gradient(135deg, var(--public-orange-dark), var(--public-orange)) !important;
  transform: translateY(-1px);
}
.offer-btn-sec {
  background: #eef9ff !important;
  color: var(--public-blue) !important;
  border: 1px solid #a9dcf5 !important;
  box-shadow: none !important;
}

.legal-back, .contact-back, .other a, .links a, .login-link a,
.content a, .note a { color: var(--public-blue) !important; }
.legal-container, .contact-container { max-width: 860px !important; }
.legal-title, .contact-title, h1 { color: var(--public-navy) !important; }
.legal-container h2, .content h2 { color: var(--public-blue) !important; }

footer {
  background: var(--public-navy) !important;
  color: #bcd5ea !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}
footer a { color: #d9ecf8 !important; }
footer a:hover { color: var(--public-cyan) !important; }
.guide-marketing-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 22px;
  padding: 28px clamp(16px, 4vw, 48px) !important;
  margin-top: 30px;
  font-size: 13px;
}
.guide-marketing-footer a {
  text-decoration: none;
  font-weight: 600;
}

/* Guides SEO historiques : la navigation latérale devient une barre de guides. */
.ct-corner { display: none !important; }
.gtoolbar {
  position: static !important;
  width: 100% !important;
  max-width: none !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 !important;
  padding: 12px clamp(16px, 4vw, 48px) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--public-line) !important;
  border-radius: 0 !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 8px 30px rgba(8,55,96,.06) !important;
}
.gtoolbar-title { color: var(--public-blue) !important; padding: 8px 12px !important; }
.gtoolbar::before {
  content: 'CTbot PUBLIC';
  color: var(--public-navy);
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  margin-right: 8px;
  white-space: nowrap;
}
.gtoolbar a {
  color: var(--public-muted) !important;
  padding: 8px 10px !important;
  font-size: 12.5px !important;
}
.gtoolbar a:hover, .gtoolbar a.active {
  background: #eaf8ff !important;
  color: var(--public-blue) !important;
}
.wrap { max-width: 900px !important; }
.content { padding: clamp(24px, 4vw, 42px) !important; }
.content table { background: #fff; }
.content th { background: #e8f7ff !important; }
.content tr:nth-child(even) td { background: #f7fbfe !important; }

/* Parcours professionnel : même identité, avec une bande d'introduction marine. */
body > .wrap > .hero,
body > .wrap > .head {
  border-radius: 24px;
  padding: clamp(28px, 5vw, 54px) clamp(20px, 4vw, 42px);
  background: linear-gradient(135deg, var(--public-navy), var(--public-navy-2));
  color: #fff;
  box-shadow: var(--public-shadow);
}
body > .wrap > .hero h1,
body > .wrap > .head h1 { color: #fff !important; }
body > .wrap > .hero p,
body > .wrap > .head p { color: #cce6f7 !important; }

body > .wrap > .topbar {
  min-height: 48px;
  padding: 8px 0 18px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none;
}

.cards .card h3,
.step h3,
.sec h2,
.form-block h2 { color: var(--public-navy) !important; }
.cards .card p,
.step p,
.sec li,
.form-block p,
.form-block label { color: var(--public-muted) !important; }
.sec,
.form-block,
.step {
  background: rgba(255, 255, 255, .96) !important;
  border: 1px solid var(--public-line) !important;
  border-radius: 20px !important;
  box-shadow: var(--public-shadow) !important;
}
.sec strong { color: var(--public-navy) !important; }
.sec[style] h2 { color: var(--public-blue) !important; }
.sec[style] div,
.sec[style] p,
.sec[style] li { color: var(--public-muted) !important; }
.sec[style] div[style*="font-size:38px"] { color: var(--public-navy) !important; }

@media (max-width: 720px) {
  nav:not(.gtoolbar), .topbar {
    min-height: 62px;
    padding: 0 16px;
  }
  .topbar {
    flex-wrap: wrap !important;
    gap: 8px 13px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  body > .topbar .brand {
    flex: 0 0 100%;
  }
  .topbar a:not(.brand) { font-size: .76rem !important; }
  main { padding: 28px 14px 48px !important; }
  .card, .legal-container, .contact-container, .offer,
  .content, .cta-block { border-radius: 17px !important; }
  .legal-container, .contact-container, .card { padding: 26px 20px !important; }
  .gtoolbar { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
  .gtoolbar-title { display: none; }
  .gtoolbar a { flex: 0 0 auto; white-space: nowrap; }
  .guide-marketing-footer { gap: 10px 16px; }
  .wrap { padding-left: 14px !important; padding-right: 14px !important; }
  h1, .hero-title { font-size: clamp(1.65rem, 8vw, 2.15rem) !important; }
}

/* Retour d'orientation commun aux pages publiques secondaires. */
.public-home-back-row {
  display: flex;
  align-items: center;
  margin: 0 0 20px;
}
.public-home-back {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 9px 17px;
  border: 1px solid rgba(0, 157, 224, .34);
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  color: var(--public-blue, #087de8);
  font-size: .9rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(9, 70, 117, .08);
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.public-home-back:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 157, 224, .58);
  background: #eefaff;
  box-shadow: 0 11px 25px rgba(9, 70, 117, .12);
}
.public-home-back:focus-visible {
  outline: 3px solid rgba(0, 157, 224, .24);
  outline-offset: 3px;
}
@media (max-width: 720px) {
  .public-home-back-row { margin-bottom: 15px; }
  .public-home-back { min-height: 40px; padding: 8px 14px; font-size: .84rem; }
}

/* Suite de parcours utile au bas des guides éditoriaux. */
.guide-next-actions {
  margin-top: 30px;
  padding: clamp(22px, 4vw, 32px);
  border: 1px solid var(--public-line, #d7e8f2);
  border-radius: 20px;
  background: linear-gradient(135deg, #eefaff, #fff);
  box-shadow: 0 15px 36px rgba(9, 70, 117, .09);
}
.guide-next-kicker {
  color: var(--public-cyan, #009de0);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.guide-next-actions h2 {
  margin: 5px 0 8px;
  color: var(--public-navy, #082850);
  font-size: clamp(1.25rem, 3vw, 1.65rem);
}
.guide-next-actions p { margin: 0; color: var(--public-muted, #55708a); }
.guide-next-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.guide-next-buttons a,
.guide-next-buttons button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 45px;
  padding: 11px 18px;
  border-radius: 12px;
  font-weight: 800;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  font: inherit;
}
.guide-next-primary { background: linear-gradient(135deg, #ffab20, #f1830a); color: #fff; box-shadow: 0 10px 24px rgba(225, 121, 8, .2); }
.guide-next-secondary { border: 1px solid #78ccef; background: #fff; color: var(--public-blue, #087de8); }
.guide-next-actions small { display: block; margin-top: 13px; color: #71879c; line-height: 1.45; }
@media (max-width: 600px) {
  .guide-next-buttons { display: grid; }
  .guide-next-buttons a, .guide-next-buttons button { width: 100%; text-align: center; }
}