/* ============================================================
   Redaction Facile — agence d'automatisation marketing
   Direction : épurée, éditoriale, crédible. Accent cobalt (logo).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* palette dérivée du logo (cobalt + navy) */
  --blue:        #2f5bd6;
  --blue-700:    #2546aa;
  --blue-600:    #2a51c2;
  --blue-50:     #eef2fd;
  --blue-100:    #dde6fb;

  --ink:         #131f3a;   /* navy profond = texte "Redaction" */
  --ink-soft:    #41507040; /* pour bordures tintées */
  --muted:       #51608a;   /* texte secondaire, tinté bleu (jamais gris pur) */
  --muted-2:     #6c7aa3;

  --paper:       #fbfcff;
  --paper-2:     #f2f5fc;
  --paper-3:     #e9eef9;
  --line:        #e1e8f5;
  --line-strong: #cdd8ee;

  --white:       #ffffff;

  --radius:      18px;
  --radius-sm:   12px;
  --radius-lg:   28px;

  --maxw:        1180px;
  --gutter:      clamp(1.15rem, 4vw, 2.75rem);

  --shadow-sm:   0 1px 2px rgba(19,31,58,.05), 0 2px 8px rgba(19,31,58,.04);
  --shadow-md:   0 10px 30px -12px rgba(19,31,58,.18), 0 2px 8px rgba(19,31,58,.05);
  --shadow-lg:   0 30px 70px -28px rgba(28,52,124,.32);

  --ease:        cubic-bezier(.2,.7,.2,1);     /* ease-out doux */
  --ease-quint:  cubic-bezier(.22,1,.36,1);

  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
}

*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
ul { list-style: none; padding: 0; }

::selection { background: var(--blue); color: #fff; }

:focus-visible {
  outline: 2.5px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: 1rem; top: -100px;
  background: var(--ink); color: #fff; padding: .7rem 1.1rem;
  border-radius: 10px; z-index: 200; transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
section { position: relative; }
.section-pad { padding-block: clamp(4.5rem, 9vw, 8rem); }

/* ---------- Typo ---------- */
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; color: var(--ink); }
h1 { font-size: clamp(2.5rem, 1.6rem + 4.4vw, 5rem); font-weight: 800; letter-spacing: -.035em; }
h2 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem); letter-spacing: -.03em; }
h3 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.55rem); }
p  { color: var(--muted); }
strong { color: var(--ink); font-weight: 600; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-body); font-weight: 600;
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue-700);
}
.eyebrow::before {
  content:""; width: 22px; height: 2px; background: var(--blue);
  border-radius: 2px; display: inline-block;
}
.section-head { max-width: 46ch; margin-bottom: clamp(2.2rem, 4vw, 3.5rem); }
.section-head p { margin-top: 1rem; font-size: 1.1rem; }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--blue); --fg: #fff;
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  padding: .85rem 1.5rem; border-radius: 999px; border: 1px solid transparent;
  background: var(--bg); color: var(--fg); cursor: pointer;
  transition: transform .25s var(--ease-quint), box-shadow .25s var(--ease), background .2s var(--ease);
  box-shadow: 0 8px 20px -8px rgba(47,91,214,.55);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); background: var(--blue-700); box-shadow: 0 14px 26px -10px rgba(47,91,214,.6); }
.btn:active { transform: translateY(0); }
.btn .arrow { transition: transform .3s var(--ease-quint); }
.btn:hover .arrow { transform: translateX(4px); }

.btn-ghost {
  background: transparent; color: var(--ink); border-color: var(--line-strong);
  box-shadow: none;
}
.btn-ghost:hover { background: var(--paper-2); border-color: var(--muted-2); transform: translateY(-2px); }

.btn-lg { padding: 1rem 1.8rem; font-size: 1.06rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in oklab, var(--paper) 80%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.site-header.scrolled { border-bottom-color: var(--line); background: color-mix(in oklab, var(--paper) 92%, transparent); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 1.5rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; }
.brand img { height: 30px; width: auto; }
.brand .brand-name { font-family: var(--font-display); font-weight: 800; font-size: 1.18rem; letter-spacing: -.03em; color: var(--ink); }
.brand .brand-name b { color: var(--ink); }
.brand .brand-name span { font-weight: 500; color: var(--blue-700); }

.nav-links { display: flex; align-items: center; gap: 2rem; }
.nav-links a { font-weight: 500; color: var(--muted); font-size: .98rem; transition: color .2s var(--ease); position: relative; }
.nav-links a::after { content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:var(--blue); transition: width .25s var(--ease); border-radius: 2px;}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { width: 100%; }
.nav-cta { display: flex; align-items: center; gap: .9rem; }

.menu-toggle { display:none; background:none; border:1px solid var(--line-strong); border-radius:10px; padding:.5rem; cursor:pointer; }
.menu-toggle svg { width:22px;height:22px;stroke:var(--ink); }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(3rem, 6vw, 5.5rem); padding-bottom: clamp(3.5rem,7vw,6rem); position: relative; overflow: hidden; }
.hero-grid {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero h1 { margin-bottom: 1.4rem; }
.hero h1 .hl { color: var(--blue); }
.hero-lede { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); max-width: 52ch; color: var(--muted); }
.hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; }
.hero-meta { display:flex; flex-wrap:wrap; gap:1.4rem 2rem; margin-top: 2.4rem; }
.hero-meta div { display:flex; align-items:center; gap:.55rem; font-size:.92rem; color: var(--muted); font-weight:500;}
.hero-meta svg { width:18px;height:18px;color:var(--blue); flex:none;}

/* visuel hero : carte de workflow */
.hero-visual { position: relative; }
.flow-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.4rem,2.5vw,2rem);
  position: relative;
}
.flow-card::before {
  content:""; position:absolute; inset:0;
  border-radius: inherit; padding:1px;
  background: linear-gradient(160deg, var(--blue-100), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none;
}
.flow-head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 1.2rem; }
.flow-head .dot-row { display:flex; gap:.4rem; }
.flow-head .dot-row i { width:9px;height:9px;border-radius:50%;background:var(--paper-3); display:block;}
.flow-head .badge { font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--blue-700); background:var(--blue-50); padding:.28rem .6rem; border-radius:999px;}
.flow-steps { display:grid; gap:.7rem; }
.flow-step {
  display:flex; align-items:center; gap:.85rem;
  background: var(--paper); border:1px solid var(--line);
  border-radius: var(--radius-sm); padding:.8rem .9rem;
  position: relative;
}
.flow-step .ico { width:38px;height:38px;border-radius:10px; flex:none; display:grid;place-items:center; background:var(--blue-50); color:var(--blue-700);}
.flow-step .ico svg { width:20px;height:20px; }
.flow-step .txt b { display:block;font-family:var(--font-body); font-weight:600;font-size:.95rem;color:var(--ink); }
.flow-step .txt span { font-size:.82rem; color:var(--muted-2); }
.flow-step .tick { margin-left:auto; color:var(--blue); width:20px;height:20px;flex:none; }
.flow-connector { height:14px; width:2px; background:var(--line-strong); margin-left:calc(.9rem + 19px); }

/* fond pointillé discret */
.dot-bg { position:absolute; inset:0; z-index:-1;
  background-image: radial-gradient(var(--paper-3) 1.2px, transparent 1.2px);
  background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 20%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 70% 20%, #000, transparent 75%);
  opacity:.7;
}

/* ---------- Bandeau capacités ---------- */
.strip { border-block:1px solid var(--line); background: var(--paper-2); }
.strip-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:1.5rem; }
.strip-inner > span { font-size:.85rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); }
.strip-logos { display:flex; flex-wrap:wrap; gap:1rem 2.2rem; align-items:center; }
.strip-logos b { font-family:var(--font-display); font-weight:700; font-size:1.25rem; color:var(--ink); letter-spacing:-.02em; }
.strip-logos b small { color: var(--muted-2); font-weight:500; font-size:.95rem; }

/* ---------- Services (liste éditoriale) ---------- */
.services-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem,2vw,1.6rem); }
.svc {
  border:1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.5rem,2.4vw,2.1rem); background: var(--white);
  transition: transform .35s var(--ease-quint), box-shadow .35s var(--ease), border-color .3s var(--ease);
}
.svc:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.svc .num { font-family:var(--font-display); font-weight:700; font-size:.95rem; color:var(--blue); letter-spacing:.05em; }
.svc h3 { margin:.6rem 0 .6rem; }
.svc p { font-size:.98rem; }
.svc .tags { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1.1rem; }
.svc .tags span { font-size:.78rem; font-weight:600; color:var(--blue-700); background:var(--blue-50); padding:.3rem .65rem; border-radius:999px; }
.svc.feature { grid-column: span 2; display:grid; grid-template-columns: 1.1fr .9fr; gap:1.5rem; align-items:center; background: linear-gradient(120deg, var(--blue) , var(--blue-700)); border:none; color:#fff; }
.svc.feature h3, .svc.feature p { color:#fff; }
.svc.feature p { color: #dfe7ff; }
.svc.feature .num { color:#cdd9ff; }
.svc.feature .tags span { background: rgba(255,255,255,.16); color:#fff; }
.svc.feature .mini-list { display:grid; gap:.6rem; }
.svc.feature .mini-list li { display:flex; gap:.6rem; align-items:flex-start; color:#eaf0ff; font-size:.95rem; }
.svc.feature .mini-list svg { width:18px;height:18px; color:#fff; flex:none; margin-top:.15rem; }

/* ---------- Section Google (clé pour la vérif OAuth) ---------- */
.google { background: var(--paper-2); }
.google-head { display:grid; grid-template-columns: 1fr; gap:1rem; max-width: 64ch; }
.google-note {
  display:flex; gap:.7rem; align-items:flex-start; margin-top:1.4rem;
  background: var(--white); border:1px solid var(--line); border-radius: var(--radius-sm);
  padding: 1rem 1.1rem; font-size:.92rem; color:var(--muted);
}
.google-note svg { width:20px;height:20px;color:var(--blue);flex:none;margin-top:.1rem; }
.google-note a { color:var(--blue-700); font-weight:600; text-decoration: underline; text-underline-offset:2px; }

.scopes { display:grid; grid-template-columns: repeat(3,1fr); gap:clamp(1rem,2vw,1.5rem); margin-top: clamp(2rem,4vw,3rem); }
.scope {
  background: var(--white); border:1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem; position: relative; overflow:hidden;
  transition: transform .35s var(--ease-quint), box-shadow .35s var(--ease);
}
.scope:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.scope .gicon { width:44px;height:44px; border-radius:12px; display:grid;place-items:center; background:var(--blue-50); margin-bottom:1rem; }
.scope .gicon svg { width:24px;height:24px; }
.scope h3 { font-size:1.15rem; margin-bottom:.5rem; }
.scope p { font-size:.93rem; }
.scope .access { margin-top:1rem; display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; font-weight:600; color:var(--muted-2); }
.scope .access .pulse { width:8px;height:8px;border-radius:50%; background:var(--blue); }
.scope .access.ro .pulse { background:#2f9e6b; }

/* ---------- Méthode ---------- */
.method { display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(1rem,2vw,1.5rem); counter-reset: step; }
.step { position:relative; padding-top:2.6rem; }
.step::before {
  counter-increment: step; content: "0" counter(step);
  font-family:var(--font-display); font-weight:800; font-size:2.6rem;
  color: var(--blue-100); position:absolute; top:-.4rem; left:-.1rem; letter-spacing:-.04em;
}
.step h3 { font-size:1.2rem; margin-bottom:.5rem; }
.step p { font-size:.95rem; }
.step .line { position:absolute; top:.9rem; left:3.6rem; right:-.75rem; height:2px; background:linear-gradient(90deg,var(--line-strong),transparent); }
.step:last-child .line { display:none; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--ink); color:#fff; border-radius: clamp(20px,3vw,32px); padding: clamp(2.5rem,5vw,4.5rem); position:relative; overflow:hidden; }
.cta-band h2 { color:#fff; max-width: 18ch; }
.cta-band p { color: #aebbd8; margin-top:1rem; max-width: 46ch; font-size:1.1rem; }
.cta-band .btn { margin-top:2rem; }
.cta-band .glow { position:absolute; width:480px;height:480px;border-radius:50%; right:-120px; top:-160px;
  background: radial-gradient(circle, rgba(47,91,214,.55), transparent 65%); pointer-events:none; }
.cta-band .mark { position:absolute; right:clamp(1rem,4vw,3rem); bottom:-30px; width:200px; opacity:.12; }

/* ---------- Footer ---------- */
.site-footer { border-top:1px solid var(--line); background: var(--paper-2); padding-block: clamp(3rem,5vw,4rem) 2rem; }
.footer-grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr; gap:2.5rem; }
.footer-brand img { height:30px; margin-bottom:1rem; }
.footer-brand p { font-size:.93rem; max-width: 38ch; }
.footer-col h4 { font-family:var(--font-body); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); margin-bottom:1rem; font-weight:700; }
.footer-col a { display:block; color:var(--muted); font-size:.95rem; padding:.3rem 0; transition:color .2s var(--ease); }
.footer-col a:hover { color:var(--blue-700); }
.footer-bottom { display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; margin-top:clamp(2.5rem,4vw,3.5rem); padding-top:1.5rem; border-top:1px solid var(--line); font-size:.88rem; color:var(--muted-2); }
.footer-bottom .legal-links { display:flex; gap:1.4rem; flex-wrap:wrap; }
.footer-bottom a:hover { color:var(--blue-700); }

/* ---------- Pages légales ---------- */
.legal-hero { padding-block: clamp(3rem,6vw,5rem) clamp(1.5rem,3vw,2.5rem); border-bottom:1px solid var(--line); }
.legal-hero .eyebrow { margin-bottom:1rem; }
.legal-hero h1 { font-size: clamp(2rem,1.4rem+2.6vw,3.2rem); }
.legal-hero p { margin-top:1rem; max-width:60ch; }
.prose { max-width: 74ch; padding-block: clamp(2.5rem,5vw,4rem); }
.prose h2 { font-size: clamp(1.4rem,1.1rem+1vw,1.9rem); margin-top:2.6rem; margin-bottom:.9rem; }
.prose h3 { font-size:1.15rem; margin-top:1.8rem; margin-bottom:.5rem; }
.prose p, .prose li { color: var(--muted); font-size:1.02rem; }
.prose p { margin-bottom:1rem; }
.prose ul { display:grid; gap:.55rem; margin:0 0 1.2rem; padding-left:0; }
.prose ul li { position:relative; padding-left:1.6rem; }
.prose ul li::before { content:""; position:absolute; left:0; top:.65em; width:7px;height:7px;border-radius:50%; background:var(--blue); }
.prose a { color:var(--blue-700); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.prose strong { color:var(--ink); }
.prose .updated { font-size:.9rem; color:var(--muted-2); }
.prose table { width:100%; border-collapse:collapse; margin:1rem 0 1.5rem; font-size:.95rem; }
.prose th, .prose td { text-align:left; padding:.7rem .9rem; border:1px solid var(--line); vertical-align:top; }
.prose th { background:var(--paper-2); font-family:var(--font-body); color:var(--ink); font-weight:600; }
.prose td { color:var(--muted); }
.callout { background:var(--blue-50); border:1px solid var(--blue-100); border-radius:var(--radius-sm); padding:1.1rem 1.2rem; margin:1.4rem 0; }
.callout p { color:var(--ink); margin:0; font-size:.97rem; }

.placeholder { background:#fff6e0; border:1px dashed #e3b341; border-radius:6px; padding:0 .35rem; color:#8a6300; font-weight:600; font-size:.92em; }

/* ---------- Reveal anim ---------- */
[data-reveal] { opacity:0; transform: translateY(22px); transition: opacity .7s var(--ease-quint), transform .7s var(--ease-quint); }
[data-reveal].in { opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay:.08s;}
[data-reveal][data-delay="2"]{ transition-delay:.16s;}
[data-reveal][data-delay="3"]{ transition-delay:.24s;}
[data-reveal][data-delay="4"]{ transition-delay:.32s;}

@media (prefers-reduced-motion: reduce) {
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
  .btn, .svc, .scope { transition:none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order:-1; max-width:520px; }
  .scopes { grid-template-columns: 1fr; }
  .method { grid-template-columns: 1fr 1fr; }
  .step .line { display:none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: span 2; }
  .svc.feature { grid-template-columns:1fr; }
}
@media (max-width: 720px) {
  .nav-links { display:none; }
  .nav-links.open {
    display:flex; flex-direction:column; align-items:flex-start; gap:1rem;
    position:absolute; top:76px; left:0; right:0; background:var(--paper);
    border-bottom:1px solid var(--line); padding:1.3rem var(--gutter); box-shadow:var(--shadow-md);
  }
  .menu-toggle { display:inline-flex; }
  .nav-cta .btn:not(.menu-toggle) { display:none; }
  .services-grid { grid-template-columns:1fr; }
  .svc.feature { grid-column: span 1; }
  .method { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-brand { grid-column: span 1; }
}