/* ==========================================================================
   Z Consulting Inc. — design system (light, premium, consulting)
   Palette : bleu nuit / bleu pétrole / blanc cassé / gris clair / teal / or.
   Rythme : clair -> sombre -> clair -> accent -> clair.
   ========================================================================== */

:root {
  /* Fonds clairs */
  --paper: #fbfcfe;          /* blanc cassé */
  --paper-2: #f1f5f8;        /* gris très clair */
  --paper-3: #e9eef2;
  --white: #ffffff;

  /* Sombres (bandes d'accent) */
  --navy-900: #071a27;       /* bleu nuit */
  --navy-800: #0b2537;       /* bleu pétrole profond */
  --navy-700: #103049;

  /* Accents */
  --teal-600: #0f9d8f;
  --teal-500: #17b3a3;
  --teal-400: #3fd0bf;
  --gold-500: #e79a3c;       /* orange doré discret */
  --gold-400: #f0ad55;

  /* Texte */
  --ink: #12242f;
  --ink-soft: #40525d;
  --muted: #64757f;
  --on-dark: #eaf1f4;
  --on-dark-soft: #a9bcc6;

  --line: #e2e9ee;
  --line-dark: rgba(255,255,255,.12);

  --maxw: 1180px;
  --radius: 16px;
  --radius-sm: 11px;
  --shadow-sm: 0 2px 10px rgba(11,37,55,.06);
  --shadow-md: 0 12px 34px rgba(11,37,55,.10);
  --shadow-lg: 0 26px 60px rgba(7,26,39,.22);

  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--sans); color: var(--ink);
  background: var(--paper); line-height: 1.65; font-size: 17px;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4 { margin: 0 0 .5em; line-height: 1.14; letter-spacing: -.01em; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 76px 0; }
.section.tight { padding: 56px 0; }

/* Bandes de couleur pour le rythme */
.band-light { background: var(--paper); }
.band-soft  { background: var(--paper-2); }
.band-dark  { background: linear-gradient(160deg, var(--navy-900), var(--navy-800)); color: var(--on-dark); }
.band-dark h2, .band-dark h3 { color: #fff; }
.band-accent{ background: linear-gradient(135deg, var(--teal-600), var(--navy-800)); color: #fff; }

.skip-link { position:absolute; left:-999px; top:0; z-index:100; background:var(--teal-500); color:#042521; padding:10px 16px; border-radius:0 0 8px 0; font-weight:600; }
.skip-link:focus { left:0; }

/* Titres de section */
.section-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.section-head.left { text-align: left; margin-left: 0; }
.kicker { font-weight:700; font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-600); margin:0 0 12px; }
.band-dark .kicker, .band-accent .kicker { color: var(--gold-400); }
.section-head h2 { font-family:var(--serif); font-weight:500; font-size:clamp(1.7rem,3.6vw,2.5rem); color:var(--navy-900); }
.band-dark .section-head h2 { color:#fff; }
.section-sub { color:var(--muted); font-size:1.06rem; margin:14px auto 0; max-width:62ch; }
.band-dark .section-sub { color: var(--on-dark-soft); }

/* Boutons */
.btn { display:inline-block; font-weight:600; font-size:.95rem; padding:13px 26px; border-radius:999px; cursor:pointer; border:1.5px solid transparent; transition:transform .2s var(--ease), box-shadow .25s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); text-align:center; white-space:nowrap; }
.btn:active { transform:translateY(1px); }
.btn-primary { background:var(--teal-500); color:#042521; box-shadow:0 8px 22px rgba(23,179,163,.28); }
.btn-primary:hover { background:var(--teal-400); box-shadow:0 12px 28px rgba(23,179,163,.4); transform:translateY(-2px); }
.btn-gold { background:var(--gold-500); color:#2c1804; box-shadow:0 8px 22px rgba(231,154,60,.28); }
.btn-gold:hover { background:var(--gold-400); transform:translateY(-2px); }
.btn-dark { background:var(--navy-800); color:#fff; }
.btn-dark:hover { background:var(--navy-700); transform:translateY(-2px); }
.btn-ghost { border-color:rgba(255,255,255,.35); color:#fff; }
.btn-ghost:hover { background:rgba(255,255,255,.1); }
.btn-outline { border-color:var(--teal-600); color:var(--teal-600); }
.btn-outline:hover { background:var(--teal-600); color:#fff; }

/* En-tête */
.site-header { position:sticky; top:0; z-index:50; background:rgba(251,252,254,.9); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.header-inner { display:flex; align-items:center; justify-content:space-between; height:70px; gap:16px; }
.brand { display:flex; align-items:center; gap:11px; color:var(--navy-900); }
.brand img { border-radius:50%; box-shadow:0 0 0 1px var(--line); }
.brand-name { font-weight:700; letter-spacing:.03em; font-size:1rem; }
.brand-inc { color:var(--teal-600); }
.main-nav { display:flex; align-items:center; gap:26px; }
.main-nav > a { color:var(--ink-soft); font-weight:500; font-size:.95rem; transition:color .2s var(--ease); }
.main-nav > a:hover, .main-nav > a.active { color:var(--teal-600); }
.nav-cta { display:inline-block; background:var(--navy-800); color:#fff !important; padding:9px 18px; border-radius:999px; font-weight:600 !important; font-size:.9rem; transition:background .2s var(--ease), transform .18s var(--ease); }
.nav-cta:hover { background:var(--teal-600); transform:translateY(-1px); }
.lang-toggle { font-weight:700; font-size:.8rem; color:var(--navy-900); background:transparent; border:1.5px solid var(--line); padding:6px 12px; border-radius:999px; cursor:pointer; transition:border-color .2s var(--ease), background .2s var(--ease); }
.lang-toggle:hover { border-color:var(--teal-500); background:var(--paper-2); }
.nav-burger { display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.nav-burger span { width:26px; height:2px; background:var(--navy-900); transition:transform .28s var(--ease), opacity .2s var(--ease); }
.nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Héro (clair) */
.hero { position:relative; overflow:hidden; background:linear-gradient(170deg,#fff 0%, var(--paper-2) 60%, var(--paper-3) 100%); padding:92px 0 84px; }
.hero-net { position:absolute; inset:0; width:100%; height:100%; opacity:.5; z-index:0; }
.hero-inner { position:relative; z-index:1; max-width:940px; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:.82rem; letter-spacing:.05em; color:var(--teal-600); background:rgba(23,179,163,.1); border:1px solid rgba(23,179,163,.28); padding:7px 15px; border-radius:999px; margin:0 0 24px; }
.hero h1 { font-family:var(--serif); font-weight:500; font-size:clamp(2.2rem,5.6vw,4rem); line-height:1.05; letter-spacing:-.02em; margin:0 0 20px; color:var(--navy-900); }
.hero h1 .grad { background:linear-gradient(100deg,var(--teal-600),var(--gold-500)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-lead { color:var(--ink-soft); font-size:clamp(1.05rem,2vw,1.22rem); max-width:60ch; margin:0 0 30px; }
.hero-cta { display:flex; gap:13px; flex-wrap:wrap; margin-bottom:40px; }
.hero-strip { display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:0; }
.hero-strip li { font-size:.82rem; font-weight:600; color:var(--ink-soft); border:1px solid var(--line); background:var(--white); padding:8px 15px; border-radius:999px; }

/* Cartes génériques */
.grid { display:grid; gap:22px; }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }

.card { background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:28px 26px; box-shadow:var(--shadow-sm); transition:transform .22s var(--ease), box-shadow .25s var(--ease), border-color .22s var(--ease); }
.card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:rgba(23,179,163,.5); }
.card h3 { font-size:1.14rem; color:var(--navy-900); }
.card p { color:var(--muted); font-size:.98rem; margin:0; }
.card .num { font-family:var(--serif); font-size:1.4rem; color:var(--teal-600); margin-bottom:10px; }
.card .tag { display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-500); margin-bottom:8px; }

/* Problème -> résultat (accueil) */
.pr-card { position:relative; overflow:hidden; }
.pr-card .p { color:var(--ink); font-weight:600; }
.pr-card .arrow { color:var(--teal-600); font-weight:700; margin:8px 0; display:block; }
.pr-card .r { color:var(--muted); }

/* Étapes méthode */
.steps { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.step { padding:24px 18px; border-radius:var(--radius-sm); background:rgba(255,255,255,.05); border:1px solid var(--line-dark); }
.step-idx { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:linear-gradient(140deg,var(--teal-500),var(--teal-600)); color:#042521; font-weight:700; margin-bottom:14px; }
.step h3 { font-size:1rem; color:#fff; }
.step p { color:var(--on-dark-soft); font-size:.9rem; margin:0; }

/* Écosystème */
.eco-card { background:linear-gradient(165deg,var(--navy-900),var(--navy-700)); color:#fff; border:1px solid var(--line-dark); border-radius:var(--radius); padding:32px 30px; }
.eco-tag { display:inline-block; font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-400); border:1px solid rgba(240,173,85,.3); background:rgba(240,173,85,.08); padding:5px 12px; border-radius:999px; margin-bottom:16px; }
.eco-card h3 { font-family:var(--serif); font-weight:500; font-size:1.4rem; color:#fff; }
.eco-card p { color:var(--on-dark-soft); margin:0 0 16px; }
.eco-link { display:inline-flex; align-items:center; gap:7px; color:var(--teal-400); font-weight:600; font-size:.95rem; }
.eco-link::after { content:"\2192"; transition:transform .2s var(--ease); }
.eco-link:hover::after { transform:translateX(4px); }

/* CTA band */
.cta-band { text-align:center; }
.cta-band h2 { font-family:var(--serif); font-weight:500; font-size:clamp(1.7rem,3.6vw,2.5rem); }
.cta-band p { color:var(--on-dark-soft); max-width:60ch; margin:14px auto 26px; font-size:1.06rem; }

/* Services & tarifs */
.svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.svc-card { background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:28px 26px; box-shadow:var(--shadow-sm); transition:transform .22s var(--ease), box-shadow .25s var(--ease), border-color .22s var(--ease); }
.svc-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:rgba(23,179,163,.5); }
.svc-card h3 { font-size:1.12rem; color:var(--navy-900); }
.svc-card p { color:var(--muted); font-size:.96rem; margin:0 0 14px; }
.svc-price { font-size:.86rem; color:var(--gold-500); font-weight:600; border-top:1px solid var(--line); padding-top:12px; }
.pricing-note { text-align:center; color:var(--muted); font-size:.95rem; margin-top:28px; }

/* Listes Intelligence / Opportunités */
.filters { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:34px; }
.filter-btn { font-size:.85rem; font-weight:600; color:var(--ink-soft); background:var(--white); border:1px solid var(--line); padding:8px 15px; border-radius:999px; cursor:pointer; transition:all .18s var(--ease); }
.filter-btn:hover { border-color:var(--teal-500); }
.filter-btn.active { background:var(--navy-800); color:#fff; border-color:var(--navy-800); }

.post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.post-card { display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .22s var(--ease), box-shadow .25s var(--ease); }
.post-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.post-body { padding:24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.post-cat { font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--teal-600); }
.post-card h3 { font-size:1.1rem; color:var(--navy-900); margin:0; }
.post-card p { color:var(--muted); font-size:.94rem; margin:0; }
.post-meta { margin-top:auto; font-size:.82rem; color:var(--muted); display:flex; justify-content:space-between; gap:8px; padding-top:8px; }
.badge-score { display:inline-block; font-size:.72rem; font-weight:700; color:#042521; background:var(--gold-400); padding:2px 9px; border-radius:999px; }

.empty-state { text-align:center; padding:56px 24px; color:var(--muted); background:var(--white); border:1px dashed var(--line); border-radius:var(--radius); }
.empty-state h3 { color:var(--navy-900); font-family:var(--serif); font-weight:500; }

/* Article */
.article-wrap { max-width:760px; margin:0 auto; }
.article-head .post-cat { text-align:center; display:block; margin-bottom:10px; }
.article-head h1 { font-family:var(--serif); font-weight:500; font-size:clamp(1.8rem,4vw,2.6rem); color:var(--navy-900); text-align:center; }
.article-meta { text-align:center; color:var(--muted); font-size:.9rem; margin-bottom:34px; }
.article-block { margin:26px 0; }
.article-block h2 { font-family:var(--serif); font-weight:500; font-size:1.4rem; color:var(--navy-900); border-left:3px solid var(--teal-500); padding-left:14px; }
.article-block p { color:var(--ink-soft); }
.article-tag-fact { color:var(--teal-600); }
.callout { background:var(--paper-2); border:1px solid var(--line); border-left:4px solid var(--gold-500); border-radius:12px; padding:22px 24px; margin:28px 0; }
.callout h3 { color:var(--navy-900); }
.sources { font-size:.9rem; color:var(--muted); border-top:1px solid var(--line); padding-top:18px; margin-top:34px; }
.sources a { color:var(--teal-600); word-break:break-word; }

/* Contact */
.contact-inner { display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start; }
.contact-list { list-style:none; padding:0; margin:24px 0; display:grid; gap:15px; }
.contact-list li { display:grid; gap:2px; }
.contact-label { font-weight:700; font-size:.74rem; text-transform:uppercase; letter-spacing:.07em; color:var(--teal-600); }
.contact-list a:hover { color:var(--teal-600); }
.social { display:flex; gap:11px; }
.social a { display:grid; place-items:center; width:41px; height:41px; border-radius:50%; background:var(--navy-800); color:#fff; transition:background .2s var(--ease), transform .18s var(--ease); }
.social a:hover { background:var(--teal-600); transform:translateY(-2px); }
.contact-form { background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:30px; display:grid; gap:15px; box-shadow:var(--shadow-sm); }
.contact-form label { display:grid; gap:6px; font-weight:600; font-size:.86rem; color:var(--navy-900); }
.contact-form input, .contact-form textarea { font-family:var(--sans); font-size:1rem; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--paper); color:var(--ink); resize:vertical; }
.contact-form input:focus, .contact-form textarea:focus { outline:none; border-color:var(--teal-500); box-shadow:0 0 0 3px rgba(23,179,163,.2); }
.form-hidden { position:absolute; left:-5000px; }
.form-note { display:none; padding:14px 16px; border-radius:10px; font-size:.95rem; }
.form-note.ok { display:block; background:rgba(23,179,163,.12); color:#0c6b60; border:1px solid rgba(23,179,163,.35); }
.form-note.err { display:block; background:rgba(214,69,69,.1); color:#a02626; border:1px solid rgba(214,69,69,.3); }

/* Pied de page */
.site-footer { background:linear-gradient(160deg,var(--navy-900),var(--navy-800)); color:var(--on-dark-soft); padding:56px 0 28px; }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:34px; padding-bottom:30px; border-bottom:1px solid var(--line-dark); }
.footer-brand { display:flex; align-items:center; gap:11px; color:#fff; font-weight:700; margin-bottom:12px; }
.footer-brand img { border-radius:50%; }
.footer-tag { color:var(--on-dark-soft); font-size:.94rem; max-width:40ch; margin:0; }
.footer-col h4 { color:#fff; font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:14px; }
.footer-col a { display:block; color:var(--on-dark-soft); font-size:.93rem; padding:5px 0; transition:color .2s var(--ease); }
.footer-col a:hover { color:var(--teal-400); }
.footer-bottom { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-top:20px; }
.footer-bottom p { margin:0; font-size:.86rem; color:var(--on-dark-soft); }

/* Apparition */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity:1; transform:none; }

/* Responsive */
@media (max-width:1000px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3, .svc-grid, .post-grid{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  .contact-inner{ grid-template-columns:1fr; gap:34px; }
  .grid-2{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .section{ padding:56px 0; }
  .hero{ padding:72px 0 60px; }
  .nav-burger{ display:flex; }
  .main-nav{ position:fixed; inset:70px 0 auto 0; flex-direction:column; align-items:flex-start; gap:0; background:var(--white); padding:8px 24px 20px; border-bottom:1px solid var(--line); transform:translateY(-150%); transition:transform .32s var(--ease); box-shadow:var(--shadow-md); }
  .main-nav.open{ transform:translateY(0); }
  .main-nav > a{ width:100%; padding:14px 0; border-bottom:1px solid var(--line); }
  .nav-cta{ margin:12px 0; }
  .lang-toggle{ margin-top:8px; }
}
@media (max-width:560px){
  body{ font-size:16px; }
  .grid-3, .grid-4, .svc-grid, .post-grid, .steps{ grid-template-columns:1fr; }
  .hero-cta{ flex-direction:column; }
  .hero-cta .btn{ width:100%; }
  .footer-grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}