/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* ============================================================
   OH TOMATE — THÈME ENFANT GENERATEPRESS
   Styles centralisés pour toutes les pages personnalisées
   ============================================================
   Préfixes utilisés :
     .ot2-*  →  Page Automatisation n8n  (/automatisation-n8n/)
     .ot3-*  →  Page Automatisation Make (/automatisation-make/)
   ============================================================ */


/* ============================================================
   1. BASE COMMUNE
   ============================================================ */

* { box-sizing: border-box; }


/* ============================================================
   2. PAGE AUTOMATISATION N8N — /automatisation-n8n/
   Préfixe : .ot2-
   ============================================================ */

/* 2.1 Utilitaires */
.ot2-wrap { max-width: 1100px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 768px) { .ot2-wrap { padding: 0 20px; } }
.ot2-label { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #7c3aed; margin-bottom: 10px; }
.ot2-h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; color: #0f0c29; line-height: 1.2; margin-bottom: 16px; }
.ot2-h2 span { color: #ea4b71; }
.ot2-sub { color: #64748b; font-size: 1.05rem; line-height: 1.7; max-width: 600px; }
.ot2-btn { display: inline-block; padding: 14px 32px; border-radius: 8px; font-weight: 700; font-size: 1rem; text-decoration: none; transition: all .2s; }
.ot2-btn-primary { background: #ea4b71; color: #fff; }
.ot2-btn-primary:hover { background: #d63d62; color: #fff; }
.ot2-btn-outline { background: transparent; border: 2px solid rgba(255,255,255,0.3); color: #e2e8f0; }
.ot2-btn-outline:hover { border-color: #a78bfa; color: #a78bfa; }

/* 2.2 Hero */
.ot2-hero { background: linear-gradient(135deg, #0f0c29 0%, #1e1b4b 60%, #2d1b69 100%); padding: 90px 40px; overflow: hidden; position: relative; }
.ot2-hero::before { content: ''; position: absolute; top: -200px; right: -200px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(234,75,113,0.15) 0%, transparent 70%); pointer-events: none; }
.ot2-hero-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
@media (max-width: 768px) { .ot2-hero-inner { grid-template-columns: 1fr; } }
.ot2-hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(234,75,113,0.15); border: 1px solid rgba(234,75,113,0.4); color: #f9a8c9; padding: 6px 16px; border-radius: 50px; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 24px; }
.ot2-hero h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; color: #fff; line-height: 1.1; margin-bottom: 20px; }
.ot2-hero h1 span { color: #ea4b71; }
.ot2-hero p { color: #cbd5e1; font-size: 1.1rem; line-height: 1.7; margin-bottom: 32px; max-width: 480px; }
.ot2-hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.ot2-hero-stats { display: flex; gap: 32px; margin-top: 40px; flex-wrap: wrap; }
.ot2-hero-stat strong { display: block; font-size: 1.6rem; font-weight: 800; color: #fff; }
.ot2-hero-stat span { font-size: 0.82rem; color: #94a3b8; }
.ot2-flow { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 24px; }
.ot2-flow-title { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #94a3b8; margin-bottom: 16px; }
.ot2-flow-steps { display: flex; flex-direction: column; gap: 4px; }
.ot2-flow-step { display: flex; align-items: flex-start; gap: 12px; background: rgba(255,255,255,0.06); border-radius: 10px; padding: 12px 14px; }
.ot2-flow-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; }
.ot2-flow-text strong { display: block; color: #e2e8f0; font-size: 0.88rem; font-weight: 600; }
.ot2-flow-text span { color: #94a3b8; font-size: 0.78rem; }
.ot2-flow-connector { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 4px 0; }
.ot2-flow-connector::before, .ot2-flow-connector::after { content: ''; flex: 1; height: 1px; background: rgba(234,75,113,0.2); }
.ot2-flow-connector span { font-size: 10px; color: rgba(234,75,113,0.7); white-space: nowrap; }

/* 2.3 Intro SEO */
.ot2-intro { padding: 80px 40px; background: #fff; }
.ot2-intro-inner { max-width: 900px; margin: 0 auto; }
.ot2-intro p { color: #374151; font-size: 1.05rem; line-height: 1.8; margin-bottom: 20px; }
.ot2-intro p:last-child { margin-bottom: 0; }
.ot2-intro strong { color: #0f0c29; }
.ot2-callout { background: linear-gradient(135deg, #f5f3ff, #fdf2f8); border-left: 4px solid #ea4b71; border-radius: 0 12px 12px 0; padding: 20px 24px; margin-top: 24px; }
.ot2-callout p { margin: 0; font-size: 1rem; color: #374151; }

/* 2.4 Pourquoi n8n */
.ot2-why { padding: 80px 40px; background: #f8fafc; }
.ot2-why-header { text-align: center; margin-bottom: 56px; }
.ot2-why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.ot2-why-card { background: #fff; border-radius: 16px; padding: 28px 24px; border: 1px solid #e2e8f0; transition: box-shadow .2s, transform .2s; }
.ot2-why-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.08); transform: translateY(-2px); }
.ot2-why-card-icon { font-size: 2rem; margin-bottom: 12px; }
.ot2-why-card h3 { font-size: 1.05rem; font-weight: 700; color: #0f0c29; margin-bottom: 8px; }
.ot2-why-card p { font-size: 0.9rem; color: #64748b; line-height: 1.6; margin: 0; }

/* 2.5 Comment créer un agent */
.ot2-agent { padding: 80px 40px; background: #fff; }
.ot2-agent-inner { max-width: 900px; margin: 0 auto; }
.ot2-agent-header { text-align: center; margin-bottom: 56px; }
.ot2-steps { display: flex; flex-direction: column; gap: 40px; }
.ot2-step { display: grid; grid-template-columns: 48px 1fr; gap: 24px; align-items: flex-start; }
.ot2-step-num { width: 48px; height: 48px; background: linear-gradient(135deg, #ea4b71, #7c3aed); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 900; color: #fff; flex-shrink: 0; }
.ot2-step-content h3 { font-size: 1.1rem; font-weight: 700; color: #0f0c29; margin-bottom: 10px; }
.ot2-step-content p { font-size: 0.95rem; color: #64748b; line-height: 1.7; margin-bottom: 12px; }
.ot2-code { background: #1e1b4b; border-radius: 10px; padding: 14px 18px; font-family: monospace; font-size: 0.82rem; color: #a5b4fc; overflow-x: auto; }

/* 2.6 Cas d'usage */
.ot2-cases { padding: 80px 40px; background: #f8fafc; }
.ot2-cases-header { text-align: center; margin-bottom: 56px; }
.ot2-cases-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.ot2-case { background: #fff; border-radius: 16px; padding: 28px; border: 1px solid #e2e8f0; }
.ot2-case-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; margin-bottom: 14px; }
.ot2-case-tag.support { background: #fef2f2; color: #ea4b71; }
.ot2-case-tag.sales { background: #f0fdf4; color: #16a34a; }
.ot2-case-tag.veille { background: #eff6ff; color: #2563eb; }
.ot2-case-tag.chat { background: #faf5ff; color: #7c3aed; }
.ot2-case-tag.reporting { background: #fff7ed; color: #ea580c; }
.ot2-case-tag.custom { background: #f8fafc; color: #475569; }
.ot2-case h3 { font-size: 1rem; font-weight: 700; color: #0f0c29; margin-bottom: 12px; }
.ot2-case ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ot2-case ul li { font-size: 0.88rem; color: #64748b; padding-left: 18px; position: relative; }
.ot2-case ul li::before { content: '→'; position: absolute; left: 0; color: #ea4b71; font-weight: 700; }

/* 2.7 Comparatif n8n vs Make */
.ot2-vs { padding: 80px 40px; background: #fff; }
.ot2-vs-inner { max-width: 900px; margin: 0 auto; }
.ot2-vs-header { text-align: center; margin-bottom: 48px; }
.ot2-vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 768px) { .ot2-vs-grid { grid-template-columns: 1fr; } }
.ot2-vs-col { border-radius: 16px; padding: 28px; border: 2px solid #e2e8f0; }
.ot2-vs-col.featured { border-color: #ea4b71; box-shadow: 0 4px 24px rgba(234,75,113,0.1); }
.ot2-vs-col-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.ot2-vs-logo { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1rem; color: #fff; }
.ot2-vs-logo.n8n { background: linear-gradient(135deg, #ea4b71, #ff6b35); }
.ot2-vs-logo.make { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.ot2-vs-col-header h3 { font-size: 1.1rem; font-weight: 700; color: #0f0c29; margin: 0; }
.ot2-badge-red { font-size: 11px; background: #fef2f2; color: #ea4b71; padding: 2px 8px; border-radius: 20px; font-weight: 600; }
.ot2-vs-list { list-style: none; padding: 0; margin: 0; }
.ot2-vs-list li { font-size: 0.88rem; color: #374151; padding: 8px 0; border-bottom: 1px solid #f1f5f9; display: flex; gap: 10px; align-items: flex-start; }
.ot2-vs-list li:last-child { border-bottom: none; }
.ot2-vs-list li.pro::before { content: "✓"; color: #10b981; font-weight: 700; flex-shrink: 0; }
.ot2-vs-list li.con::before { content: "✗"; color: #ef4444; font-weight: 700; flex-shrink: 0; }

/* 2.8 FAQ */
.ot2-faq { padding: 80px 40px; background: #f8fafc; }
.ot2-faq-inner { max-width: 800px; margin: 0 auto; }
.ot2-faq-header { text-align: center; margin-bottom: 48px; }
.ot2-faq-list { display: flex; flex-direction: column; gap: 12px; }
.ot2-faq-item { background: #fff; border-radius: 12px; border: 1px solid #e2e8f0; overflow: hidden; }
.ot2-faq-q { padding: 20px 24px; font-weight: 700; color: #0f0c29; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.ot2-faq-q::after { content: '+'; font-size: 1.4rem; color: #ea4b71; flex-shrink: 0; }
.ot2-faq-a { padding: 0 24px 20px; color: #64748b; font-size: 0.95rem; line-height: 1.7; display: none; }
.ot2-faq-item.open .ot2-faq-a { display: block; }
.ot2-faq-item.open .ot2-faq-q::after { content: '-'; }

/* 2.9 CTA */
.ot2-cta { background: linear-gradient(135deg, #0f0c29 0%, #1e1b4b 60%, #2d1b69 100%); padding: 80px 40px; text-align: center; }
.ot2-cta-inner { max-width: 700px; margin: 0 auto; }
.ot2-cta h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 900; color: #fff; margin-bottom: 16px; }
.ot2-cta p { color: #cbd5e1; font-size: 1.05rem; margin-bottom: 32px; }
.ot2-cta-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }



/* 2.5b Comment créer un agent — vraies classes HTML */
.ot2-agent { padding: 80px 40px; background: #fff; }
.ot2-agent-inner { max-width: 900px; margin: 0 auto; }
.ot2-agent-header { text-align: center; margin-bottom: 56px; }
.ot2-agent-steps { display: flex; flex-direction: column; gap: 40px; }
.ot2-agent-step { display: grid; grid-template-columns: 56px 1fr; gap: 24px; align-items: flex-start; }
.ot2-agent-step-num { width: 56px; height: 56px; background: linear-gradient(135deg, #ea4b71, #7c3aed); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 900; color: #fff; flex-shrink: 0; }
.ot2-agent-step-content h3 { font-size: 1.1rem; font-weight: 700; color: #0f0c29; margin-bottom: 10px; }
.ot2-agent-step-content p { font-size: 0.95rem; color: #64748b; line-height: 1.7; margin-bottom: 12px; }
.ot2-agent-step-snippet { background: #1e1b4b; border-radius: 10px; padding: 14px 18px; font-family: monospace; font-size: 0.82rem; color: #a5b4fc; overflow-x: auto; line-height: 1.6; }


/* 2.6 Cas d'usage — vraies classes HTML */
.ot2-cases { padding: 80px 40px; background: #f8fafc; }
.ot2-cases-inner { max-width: 1100px; margin: 0 auto; }
.ot2-cases-header { text-align: center; margin-bottom: 56px; }
.ot2-cases-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.ot2-case-card { background: #fff; border-radius: 16px; padding: 28px; border: 1px solid #e2e8f0; transition: box-shadow .2s, transform .2s; }
.ot2-case-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.08); transform: translateY(-2px); }
.ot2-case-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ot2-case-emoji { font-size: 1.4rem; }
.ot2-case-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; background: #eef2ff; color: #7c3aed; }
.ot2-case-tag.support { background: #fef2f2; color: #ea4b71; }
.ot2-case-tag.sales { background: #f0fdf4; color: #16a34a; }
.ot2-case-tag.veille { background: #eff6ff; color: #2563eb; }
.ot2-case-tag.chat { background: #faf5ff; color: #7c3aed; }
.ot2-case-tag.reporting { background: #fff7ed; color: #ea580c; }
.ot2-case-tag.custom { background: #f8fafc; color: #475569; }
.ot2-case-card h3 { font-size: 1rem; font-weight: 700; color: #0f0c29; margin-bottom: 12px; }
.ot2-case-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ot2-case-list li { font-size: 0.88rem; color: #64748b; padding-left: 18px; position: relative; }
.ot2-case-list li::before { content: '→'; position: absolute; left: 0; color: #ea4b71; font-weight: 700; }

/* 2.8 FAQ — vraies classes HTML */
.ot2-faq { padding: 80px 40px; background: #f8fafc; }
.ot2-faq-inner { max-width: 800px; margin: 0 auto; }
.ot2-faq-header { text-align: center; margin-bottom: 48px; }
.ot2-faq-item { background: #fff; border-radius: 12px; border: 1px solid #e2e8f0; overflow: hidden; margin-bottom: 12px; }
.ot2-faq-q { padding: 20px 24px; font-weight: 700; color: #0f0c29; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; user-select: none; }
.ot2-faq-q::after { content: '+'; font-size: 1.4rem; color: #ea4b71; flex-shrink: 0; line-height: 1; }
.ot2-faq-item.open .ot2-faq-q::after { content: '−'; }
.ot2-faq-a { padding: 0 24px 20px; color: #64748b; font-size: 0.95rem; line-height: 1.7; display: none; }
.ot2-faq-item.open .ot2-faq-a { display: block; }

/* ============================================================
   3. PAGE AUTOMATISATION MAKE — /automatisation-make/
   Préfixe : .ot3-
   ============================================================ */

/* 3.1 Utilitaires */
.ot3-wrap { max-width: 1100px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 768px) { .ot3-wrap { padding: 0 20px; } }
.ot3-label { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #6366f1; margin-bottom: 10px; }
.ot3-h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; color: #0f0c29; line-height: 1.2; margin-bottom: 16px; }
.ot3-h2 span { color: #6366f1; }
.ot3-sub { color: #64748b; font-size: 1.05rem; line-height: 1.7; max-width: 560px; }
.ot3-btn { display: inline-block; padding: 14px 32px; border-radius: 8px; font-weight: 700; font-size: 1rem; text-decoration: none; transition: all .2s; }
.ot3-btn-primary { background: #6366f1; color: #fff; }
.ot3-btn-primary:hover { background: #4f46e5; color: #fff; }
.ot3-btn-outline { background: transparent; border: 2px solid rgba(255,255,255,0.3); color: #e2e8f0; }
.ot3-btn-outline:hover { border-color: #a5b4fc; color: #a5b4fc; }

/* 3.2 Hero */
.ot3-hero { background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%); padding: 90px 40px; position: relative; overflow: hidden; }
.ot3-hero::before { content: ''; position: absolute; top: -150px; right: -150px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(99,102,241,0.2) 0%, transparent 70%); pointer-events: none; }
.ot3-hero-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
@media (max-width: 768px) { .ot3-hero-inner { grid-template-columns: 1fr; } }
.ot3-hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(99,102,241,0.2); border: 1px solid rgba(99,102,241,0.4); color: #a5b4fc; padding: 6px 16px; border-radius: 50px; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 24px; }
.ot3-hero h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; color: #fff; line-height: 1.1; margin-bottom: 20px; }
.ot3-hero h1 span { color: #a5b4fc; }
.ot3-hero p { color: #cbd5e1; font-size: 1.1rem; line-height: 1.7; margin-bottom: 32px; max-width: 480px; }
.ot3-hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.ot3-hero-stats { display: flex; gap: 32px; margin-top: 40px; flex-wrap: wrap; }
.ot3-hero-stat strong { display: block; font-size: 1.6rem; font-weight: 800; color: #fff; }
.ot3-hero-stat span { font-size: 0.82rem; color: #94a3b8; }
.ot3-scen { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 24px; }
.ot3-scen-title { font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #94a3b8; margin-bottom: 16px; }
.ot3-scen-modules { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ot3-module { background: rgba(255,255,255,0.07); border: 1px solid rgba(99,102,241,0.3); border-radius: 10px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; }
.ot3-module.trigger { grid-column: 1/-1; border-color: rgba(99,102,241,0.6); background: rgba(99,102,241,0.1); }
.ot3-module-dot { width: 8px; height: 8px; border-radius: 50%; background: #6366f1; flex-shrink: 0; }
.ot3-module.trigger .ot3-module-dot { background: #a5b4fc; }
.ot3-module-info strong { display: block; color: #e2e8f0; font-size: 0.85rem; font-weight: 600; }
.ot3-module-info span { color: #94a3b8; font-size: 0.75rem; }
.ot3-scen-arrow { text-align: center; color: rgba(99,102,241,0.6); font-size: 1rem; margin: 6px 0; }
.ot3-scen-result { background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.3); border-radius: 10px; padding: 12px 16px; margin-top: 10px; display: flex; align-items: center; gap: 10px; }
.ot3-scen-result span { color: #6ee7b7; font-size: 0.85rem; font-weight: 600; }

/* 3.3 Pour qui */
.ot3-forwhom { padding: 80px 40px; background: #fff; }
.ot3-forwhom-inner { max-width: 1100px; margin: 0 auto; }
.ot3-forwhom-header { text-align: center; margin-bottom: 56px; }
.ot3-profiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.ot3-profile { border-radius: 16px; padding: 28px 24px; text-align: center; border: 2px solid #f1f5f9; transition: border-color .2s, box-shadow .2s; }
.ot3-profile:hover { border-color: #6366f1; box-shadow: 0 8px 24px rgba(99,102,241,0.1); }
.ot3-profile-icon { font-size: 2.2rem; margin-bottom: 12px; }
.ot3-profile h3 { font-size: 1rem; font-weight: 700; color: #0f0c29; margin-bottom: 8px; }
.ot3-profile p { font-size: 0.88rem; color: #64748b; line-height: 1.6; margin: 0; }

/* 3.4 Scénarios */
.ot3-scenarios { padding: 80px 40px; background: #f8fafc; }
.ot3-scenarios-inner { max-width: 1100px; margin: 0 auto; }
.ot3-scenarios-header { text-align: center; margin-bottom: 56px; }
.ot3-scenarios-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.ot3-scenario { background: #fff; border-radius: 16px; padding: 28px; border: 1px solid #e2e8f0; }
.ot3-scenario-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; margin-bottom: 14px; background: #eef2ff; color: #6366f1; }
.ot3-scenario h3 { font-size: 1rem; font-weight: 700; color: #0f0c29; margin-bottom: 12px; }
.ot3-scenario ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ot3-scenario ul li { font-size: 0.88rem; color: #64748b; padding-left: 18px; position: relative; }
.ot3-scenario ul li::before { content: '→'; position: absolute; left: 0; color: #6366f1; font-weight: 700; }

/* 3.5 Comment je travaille */
.ot3-how { padding: 80px 40px; background: #fff; }
.ot3-how-inner { max-width: 900px; margin: 0 auto; }
.ot3-how-header { text-align: center; margin-bottom: 56px; }
.ot3-steps { display: flex; flex-direction: column; gap: 32px; }
.ot3-step { display: grid; grid-template-columns: 48px 1fr; gap: 24px; align-items: flex-start; }
.ot3-step-num { width: 48px; height: 48px; background: linear-gradient(135deg, #6366f1, #8b5cf6); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 900; color: #fff; flex-shrink: 0; }
.ot3-step h3 { font-size: 1.05rem; font-weight: 700; color: #0f0c29; margin-bottom: 8px; }
.ot3-step p { font-size: 0.95rem; color: #64748b; line-height: 1.7; margin: 0; }

/* 3.6 CTA */
.ot3-cta { background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%); padding: 80px 40px; text-align: center; }
.ot3-cta-inner { max-width: 700px; margin: 0 auto; }
.ot3-cta h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 900; color: #fff; margin-bottom: 16px; }
.ot3-cta p { color: #cbd5e1; font-size: 1.05rem; margin-bottom: 32px; }
.ot3-cta-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }


/* 3.2b Visuel scénario dans le Hero Make (.ot3-scenario = conteneur héro) */
.ot3-hero .ot3-scenario { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 24px; }


/* ============================================================
   4. PAGE ACCUEIL — /
   Préfixe : .ot-
   ============================================================ */

/* 4.1 Hero */
.ot-hero { background: linear-gradient(135deg,#0f0c29 0%,#1e1b4b 60%,#312e81 100%); padding: 100px calc((100% - 1100px) / 2 + 40px) 80px; position: relative; overflow: hidden; }
@media(max-width:1180px){ .ot-hero { padding: 80px 40px; } }
.ot-hero::before { content:''; position:absolute; top:-200px; right:-200px; width:600px; height:600px; background:radial-gradient(circle,rgba(99,102,241,0.15) 0%,transparent 70%); pointer-events:none; }
.ot-tag { display:inline-flex; align-items:center; gap:8px; background:rgba(99,102,241,0.15); border:1px solid rgba(99,102,241,0.4); color:#a5b4fc; padding:6px 16px; border-radius:50px; font-size:12px; font-weight:600; letter-spacing:1px; text-transform:uppercase; margin-bottom:24px; }
.ot-hero h1 { font-size:clamp(2.2rem,5vw,3.6rem); font-weight:900; color:#fff; line-height:1.05; margin-bottom:20px; }
.ot-hero h1 span { color:#818cf8; }
.ot-hero p { color:#cbd5e1; font-size:1.1rem; line-height:1.7; margin-bottom:32px; max-width:520px; }
.ot-hero-btns { display:flex; gap:14px; flex-wrap:wrap; }
.ot-btn-primary { display:inline-block; background:#6366f1; color:#fff; padding:14px 32px; border-radius:8px; font-weight:700; font-size:1rem; text-decoration:none; transition:background .2s; }
.ot-btn-primary:hover { background:#4f46e5; color:#fff; }
.ot-btn-secondary { display:inline-block; background:transparent; color:#e2e8f0; border:2px solid rgba(255,255,255,0.25); padding:14px 32px; border-radius:8px; font-weight:700; font-size:1rem; text-decoration:none; transition:border-color .2s,color .2s; }
.ot-btn-secondary:hover { border-color:#818cf8; color:#818cf8; }

/* 4.2 Services */
.ot-services { padding:80px calc((100% - 1100px) / 2 + 40px); background:#fff; }
@media(max-width:1180px){ .ot-services { padding: 80px 40px; } }
.ot-services-inner { max-width:1100px; margin:0 auto; }
.ot-section-label { font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:#6366f1; margin-bottom:10px; display:block; }
.ot-section-title { font-size:clamp(1.6rem,3vw,2.4rem); font-weight:800; color:#0f0c29; line-height:1.2; margin-bottom:16px; }
.ot-section-sub { color:#64748b; font-size:1.05rem; line-height:1.7; max-width:600px; margin-bottom:48px; display:block; }
.ot-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; }
.ot-card { border-radius:16px; padding:28px 24px; border:2px solid #f1f5f9; transition:border-color .2s,box-shadow .2s,transform .2s; text-decoration:none; display:block; background:#fff; }
.ot-card:hover { border-color:#6366f1; box-shadow:0 8px 30px rgba(99,102,241,0.1); transform:translateY(-2px); }
.ot-card-icon { font-size:2.2rem; margin-bottom:14px; display:block; }
.ot-card h3 { font-size:1.1rem; font-weight:700; color:#0f0c29; margin-bottom:8px; }
.ot-card p { font-size:0.9rem; color:#64748b; line-height:1.6; margin-bottom:16px; }
.ot-card-link { font-size:0.88rem; font-weight:700; color:#6366f1; }

/* 4.3 Pourquoi moi */
.ot-why { padding:80px 40px; background:#f8fafc; }
.ot-why-inner { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
@media(max-width:768px) { .ot-why-inner { grid-template-columns:1fr; } }
.ot-why-text h2 { font-size:clamp(1.6rem,3vw,2.4rem); font-weight:800; color:#0f0c29; margin-bottom:16px; }
.ot-why-text p { color:#64748b; font-size:1.05rem; line-height:1.7; }
.ot-stats { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.ot-stat { background:#fff; border-radius:16px; padding:24px; border:1px solid #e2e8f0; text-align:center; }
.ot-stat-num { display:block; font-size:2rem; font-weight:900; color:#6366f1; margin-bottom:6px; }
.ot-stat-label { display:block; font-size:0.85rem; color:#64748b; }

/* 4.4 CTA */
.ot-cta { background:linear-gradient(135deg,#0f0c29 0%,#1e1b4b 60%,#312e81 100%); padding:80px 40px; text-align:center; }
.ot-cta h2 { font-size:clamp(1.8rem,3vw,2.6rem); font-weight:900; color:#fff; margin-bottom:16px; }
.ot-cta p { color:#cbd5e1; font-size:1.05rem; margin-bottom:32px; }
.ot-checklist { list-style:none; padding:0; margin:0 auto 32px; display:flex; flex-direction:column; gap:8px; max-width:500px; text-align:left; }
.ot-checklist li { color:#e2e8f0; font-size:0.95rem; padding-left:24px; position:relative; }
.ot-checklist li::before { content:"✓"; position:absolute; left:0; color:#818cf8; font-weight:700; }


/* ============================================================
   5. PAGE ACCOMPAGNEMENT & CONSEIL — /accompagnement/
   Préfixe : .ot-
   ============================================================ */

/* 5.1 Page Hero */
.ot-page-hero { background:linear-gradient(135deg,#0f0c29,#1e1b4b,#24243e); padding:80px 40px; text-align:center; color:#fff; }
.ot-breadcrumb { font-size:13px; color:#94a3b8; margin-bottom:20px; display:block; }
.ot-breadcrumb a { color:#a78bfa; text-decoration:none; }
.ot-page-hero h1 { font-size:clamp(1.8rem,4vw,3rem); font-weight:800; color:#fff; margin-bottom:20px; }
.ot-page-hero h1 span { color:#a78bfa; }
.ot-page-hero p { color:#cbd5e1; font-size:1.1rem; max-width:580px; margin:0 auto; line-height:1.7; }

/* 5.2 Offres */
.ot-offers { padding:80px 40px; background:#f8fafc; }
.ot-offers-inner { max-width:1100px; margin:0 auto; }
.ot-offers-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; margin-top:48px; }
.ot-offer { background:#fff; border-radius:20px; padding:32px; border:2px solid #e2e8f0; position:relative; transition:border-color .2s,box-shadow .2s; }
.ot-offer.featured { border-color:#7c3aed; box-shadow:0 8px 32px rgba(124,58,237,0.12); }
.ot-offer-badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:#7c3aed; color:#fff; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:4px 16px; border-radius:20px; white-space:nowrap; }
.ot-offer-icon { font-size:2rem; margin-bottom:14px; display:block; }
.ot-offer h3 { font-size:1.2rem; font-weight:800; color:#0f0c29; margin-bottom:8px; }
.ot-offer-sub { font-size:0.9rem; color:#64748b; margin-bottom:20px; display:block; }
.ot-offer-list { list-style:none; padding:0; margin:0 0 24px; display:flex; flex-direction:column; gap:8px; }
.ot-offer-list li { font-size:0.9rem; color:#374151; padding-left:22px; position:relative; }
.ot-offer-list li::before { content:"✓"; position:absolute; left:0; color:#7c3aed; font-weight:700; }
.ot-offer-cta { display:inline-block; background:#7c3aed; color:#fff; padding:12px 28px; border-radius:8px; font-weight:700; font-size:0.95rem; text-decoration:none; transition:background .2s; }
.ot-offer-cta:hover { background:#6d28d9; color:#fff; }

/* 5.3 Comment je travaille */
.ot-how { padding:80px 40px; background:#fff; }
.ot-how-inner { max-width:900px; margin:0 auto; }
.ot-how-steps { display:flex; flex-direction:column; gap:32px; margin-top:48px; }
.ot-how-step { display:grid; grid-template-columns:48px 1fr; gap:24px; align-items:flex-start; }
.ot-step-dot { width:48px; height:48px; background:linear-gradient(135deg,#7c3aed,#a78bfa); border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; font-weight:900; color:#fff; flex-shrink:0; }
.ot-how-step h3 { font-size:1.05rem; font-weight:700; color:#0f0c29; margin-bottom:6px; }
.ot-how-step p { font-size:0.95rem; color:#64748b; line-height:1.7; margin:0; }

/* 5.4 Options contact */
.ot-contact-options { padding:80px 40px; background:#f8fafc; }
.ot-contact-inner { max-width:900px; margin:0 auto; }
.ot-contact-opt { display:flex; gap:16px; align-items:flex-start; background:#fff; border-radius:16px; padding:24px; border:1px solid #e2e8f0; margin-bottom:16px; }
.ot-contact-opt-icon { font-size:1.8rem; flex-shrink:0; }
.ot-contact-opt h3 { font-size:1rem; font-weight:700; color:#0f0c29; margin-bottom:4px; }
.ot-contact-opt p { font-size:0.9rem; color:#64748b; margin:0; }
.ot-contact-form { padding:80px 40px; background:#fff; }


/* ============================================================
   6. PAGE AGENTS IA — /agents-ia/
   Préfixe : .ot-
   ============================================================ */

/* 6.1 Types d'agents */
.ot-types { padding:80px 40px; background:#f8fafc; }
.ot-types-inner { max-width:1100px; margin:0 auto; }
.ot-types-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; margin-top:48px; }
.ot-type-card { background:#fff; border-radius:16px; padding:24px; border:1px solid #e2e8f0; transition:box-shadow .2s,transform .2s; }
.ot-type-card:hover { box-shadow:0 8px 30px rgba(0,0,0,0.08); transform:translateY(-2px); }
.ot-type-icon { font-size:2rem; margin-bottom:12px; display:block; }
.ot-type-tag { display:inline-block; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:3px 10px; border-radius:20px; background:#eef2ff; color:#6366f1; margin-bottom:10px; }
.ot-type-card h3 { font-size:1rem; font-weight:700; color:#0f0c29; margin-bottom:8px; }
.ot-type-card p { font-size:0.88rem; color:#64748b; line-height:1.6; margin:0; }

/* 6.2 Ce que font les agents */
.ot-agents-what { padding:80px 40px; background:#fff; }
.ot-agents-inner { max-width:1100px; margin:0 auto; }
.ot-highlight-box { background:linear-gradient(135deg,#f5f3ff,#ede9fe); border-left:4px solid #7c3aed; border-radius:0 12px 12px 0; padding:20px 24px; margin-top:24px; }
.ot-highlight-box p { margin:0; font-size:1rem; color:#374151; }

/* 6.3 Visualisation agent */
.ot-agent-visual { background:linear-gradient(135deg,#1e1b4b,#312e81); border-radius:20px; padding:28px; }
.ot-agent-flow { display:flex; flex-direction:column; gap:4px; }
.ot-agent-node { display:flex; align-items:center; gap:12px; background:rgba(255,255,255,0.07); border-radius:10px; padding:12px 16px; }
.ot-agent-node span { color:#e2e8f0; font-size:0.88rem; font-weight:500; }
.ot-agent-arrow { text-align:center; color:rgba(165,180,252,0.5); font-size:0.9rem; margin:2px 0; }

/* 6.4 Stack technique */
.ot-tech { padding:80px 40px; background:#f8fafc; }
.ot-tech-inner { max-width:900px; margin:0 auto; }
.ot-tech-sub { color:#64748b; font-size:1.05rem; line-height:1.7; margin-bottom:40px; max-width:600px; display:block; }
.ot-tech-pills { display:flex; flex-wrap:wrap; gap:12px; }
.ot-pill { display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid #e2e8f0; border-radius:50px; padding:8px 18px; font-size:0.9rem; font-weight:600; color:#374151; }


/* ============================================================
   7. PAGE AGENTS IA — /agents-ia/
   Blocs Gutenberg natifs avec classes custom
   ============================================================ */

/* Hero */
.ot-agents-hero { background: linear-gradient(135deg, #0f0c29 0%, #1e1b4b 60%, #2d1b69 100%) !important; }
.ot-agents-hero * { color: #ffffff; }
.ot-agents-hero h1 { font-size: clamp(2rem,4vw,3rem); font-weight: 800; line-height: 1.1; margin-bottom: 20px; }
.ot-agents-hero p.ot-hero-sub { color: #cbd5e1 !important; font-size: 1.1rem; line-height: 1.7; margin-bottom: 32px; }

/* Label de section */
.ot-section-label { font-size: 12px !important; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #7c3aed !important; margin-bottom: 10px; display: block; }
.ot-agents-hero .ot-section-label { color: #a5b4fc !important; }

/* Callout */
.ot-callout { background: linear-gradient(135deg, #f5f3ff, #fdf2f8) !important; border-left: 4px solid #ea4b71 !important; border-radius: 0 12px 12px 0 !important; }

/* Cards agents */
.wp-block-column.has-background:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.08); transform: translateY(-2px); transition: box-shadow .2s, transform .2s; }

/* CTA */
.ot-agents-cta { background: linear-gradient(135deg, #0f0c29 0%, #1e1b4b 60%, #2d1b69 100%) !important; }
.ot-agents-cta * { color: #ffffff; }
.ot-agents-cta p { color: #cbd5e1 !important; }

/* Fix espaces vides agents-ia (page-id-49241) : 
   GeneratePress ajoute 128px de padding sur .wp-block-group__inner-container
   On le supprime pour que les sections respectent les paddings définis dans les blocs */
.page-id-49241 .wp-block-group__inner-container { 
  padding-top: 0 !important; 
  padding-bottom: 0 !important; 
}


/* ============================================================
   8. PAGE AUTOMATISATION MAKE — /automatisation-make/
   Blocs Gutenberg natifs — page-id-49253
   ============================================================ */

/* Supprimer le padding GeneratePress sur inner-container */
.page-id-49253 .wp-block-group__inner-container, .page-id-49319 .wp-block-group__inner-container { 
  padding-top: 0 !important; 
  padding-bottom: 0 !important; 
}

/* Hero */
.ot-make-hero { background: linear-gradient(135deg, #0f0c29 0%, #1e1b4b 60%, #2d1b69 100%) !important; }
.ot-make-hero * { color: #ffffff; }
.ot-make-hero h1 { font-size: clamp(2rem,4vw,3rem); font-weight: 800; line-height: 1.1; margin-bottom: 20px; }
.ot-make-hero .ot-label-light { color: #a5b4fc !important; }

/* Stats hero */
.ot-make-hero .wp-block-columns { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 32px; }
.ot-make-hero .wp-block-column { text-align: center; }
.ot-make-hero h3 { font-size: 1.8rem !important; }

/* Étapes méthode */
.ot-step-row .wp-block-columns { align-items: center; }
.ot-step-num { width: 48px !important; height: 48px !important; min-width: 48px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem !important; font-weight: 900 !important; line-height: 1 !important; margin: 0 !important; }

/* CTA */
.ot-make-cta { background: linear-gradient(135deg, #0f0c29 0%, #1e1b4b 60%, #2d1b69 100%) !important; }
.ot-make-cta * { color: #ffffff; }
.ot-make-cta p { color: #cbd5e1 !important; }


/* ============================================================
   9. PAGE AUTOMATISATION N8N — /automatisation-n8n/
   Blocs Gutenberg natifs — page-id-49240
   ============================================================ */

/* Supprimer le padding GeneratePress sur inner-container */
.page-id-49240 .wp-block-group__inner-container { 
  padding-top: 0 !important; 
  padding-bottom: 0 !important; 
}

/* Hero */
.ot-n8n-hero { background: linear-gradient(135deg, #0f0c29 0%, #1e1b4b 60%, #2d1b69 100%) !important; }
.ot-n8n-hero * { color: #ffffff; }
.ot-n8n-hero h1 { font-size: clamp(1.8rem,3.5vw,2.8rem); font-weight: 800; line-height: 1.15; margin-bottom: 16px; }
.ot-n8n-hero .ot-label-light { color: #a5b4fc !important; }

/* Stats hero */
.ot-n8n-hero .wp-block-columns:last-child { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 24px; }

/* Flow card */
.ot-flow-card { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 16px !important; }
.ot-flow-step { background: rgba(255,255,255,0.07) !important; border-radius: 10px; margin-bottom: 4px; }

/* Blocs de code */
.page-id-49240 .wp-block-code { background: #1e1b4b; border-radius: 10px; padding: 14px 18px; font-size: 0.82rem; color: #a5b4fc; border: none; margin-top: 12px; }

/* CTA */
.ot-n8n-cta { background: linear-gradient(135deg, #0f0c29 0%, #1e1b4b 60%, #2d1b69 100%) !important; }
.ot-n8n-cta * { color: #ffffff; }
.ot-n8n-cta p { color: #cbd5e1 !important; }


/* ============================================================
   CORRECTIONS PAGE N8N — Restauration fidèle
   ============================================================ */

/* Dégradé sur les badges numéros des étapes (Gutenberg écrase le gradient inline) */
.page-id-49240 .ot-step-num,
.page-id-49253 .ot-step-num {
  background: linear-gradient(135deg, #ea4b71, #7c3aed) !important;
  color: #ffffff !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1;
  margin: 0 !important;
  padding: 0 !important;
}

/* Correction CSS pour le hero visual n8n (.ot2-hero-visual) */
.ot2-hero-visual {
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 24px;
}
.ot2-flow-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 16px;
}
.ot2-flow-node {
  background: rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ot2-flow-icon { font-size: 1.2rem; flex-shrink: 0; }
.ot2-flow-text strong { color: #e2e8f0; font-size: 0.9rem; display: block; }
.ot2-flow-text span { color: #94a3b8; font-size: 0.82rem; }
.ot2-flow-connector {
  text-align: center;
  padding: 4px 0;
  font-size: 11px;
  color: #ea4b71;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.ot2-flow-connector::before,
.ot2-flow-connector::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(234,75,113,0.4);
}


/* ============================================================
   MAX-WIDTH GLOBAL — pages Gutenberg converties
   Approche : padding horizontal adaptatif sur les groupes alignfull
   pour toujours avoir 40px de marge min et centrer le contenu à 1100px
   ============================================================ */

/* Sections standard : contenu max 1100px centré */
.page-id-49240 .wp-block-group.alignfull:not(.ot-n8n-hero):not(.ot-n8n-cta),
.page-id-49253 .wp-block-group.alignfull:not(.ot-make-hero):not(.ot-make-cta),
.page-id-49241 .wp-block-group.alignfull:not(.ot-agents-hero):not(.ot-agents-cta) {
  padding-left: max(40px, calc((100% - 1100px) / 2)) !important;
  padding-right: max(40px, calc((100% - 1100px) / 2)) !important;
}

/* Sections héros : contenu max 900px (texte + flow) — garder padding 40px */
.page-id-49240 .ot-n8n-hero,
.page-id-49253 .ot-make-hero,
.page-id-49241 .ot-agents-hero {
  padding-left: max(40px, calc((100% - 1100px) / 2)) !important;
  padding-right: max(40px, calc((100% - 1100px) / 2)) !important;
}

/* Sections CTA : contenu max 700px */
.page-id-49240 .ot-n8n-cta,
.page-id-49253 .ot-make-cta,
.page-id-49241 .ot-agents-cta {
  padding-left: max(40px, calc((100% - 700px) / 2)) !important;
  padding-right: max(40px, calc((100% - 700px) / 2)) !important;
}

/* Compatibilité : aussi cibler les groupes enfants directs */
.page-id-49240 .wp-block-group.alignfull > .wp-block-group,
.page-id-49253 .wp-block-group.alignfull > .wp-block-group,
.page-id-49241 .wp-block-group.alignfull > .wp-block-group,
.page-id-49240 .wp-block-group.alignfull > .wp-block-group__inner-container > .wp-block-group,
.page-id-49253 .wp-block-group.alignfull > .wp-block-group__inner-container > .wp-block-group,
.page-id-49241 .wp-block-group.alignfull > .wp-block-group__inner-container > .wp-block-group {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* ============================================================
   AJUSTEMENTS UI — Page n8n/Make/Agents IA
   ============================================================ */

/* 1. CARTES "POURQUOI N8N" — picto + h3 sur la même ligne */
/* La colonne est déjà display:flex column par Gutenberg
   On wrappe picto + H3 en flex row via un pseudo-groupe */

/* Les cards Gutenberg wp:column.has-background : layout flex column → on wrap les 2 premiers */
.page-id-49240 .wp-block-column.has-background,
.page-id-49253 .wp-block-column.has-background,
.page-id-49241 .wp-block-column.has-background {
  /* Garder flex column mais grouper picto+h3 visuellement */
  gap: 4px;
  text-align: left !important;
}

/* Picto : petit, inline */
.page-id-49240 .wp-block-column.has-background > p.has-x-large-font-size,
.page-id-49253 .wp-block-column.has-background > p.has-x-large-font-size,
.page-id-49241 .wp-block-column.has-background > p.has-x-large-font-size {
  font-size: 1.4rem !important;
  margin-bottom: 0 !important;
  line-height: 1;
  /* Trick: on utilise float pour mettre le picto à gauche du H3 */
  float: left;
  margin-right: 10px;
  margin-top: 2px;
}

/* H3 : plus petit, s'affiche à côté du picto floatté */
.page-id-49240 .wp-block-column.has-background > h3.wp-block-heading,
.page-id-49253 .wp-block-column.has-background > h3.wp-block-heading,
.page-id-49241 .wp-block-column.has-background > h3.wp-block-heading {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1.4;
  overflow: hidden; /* clearfix after float */
}

/* Texte description : clear le float */
.page-id-49240 .wp-block-column.has-background > p:not(.has-x-large-font-size),
.page-id-49253 .wp-block-column.has-background > p:not(.has-x-large-font-size),
.page-id-49241 .wp-block-column.has-background > p:not(.has-x-large-font-size) {
  clear: both;
  margin-top: 10px !important;
  font-size: 0.88rem;
  color: #64748b;
}

/* 2. CENTRER H2, label de section sur toute la page */
.page-id-49240 .wp-block-group.alignfull .ot-section-label,
.page-id-49253 .wp-block-group.alignfull .ot-section-label,
.page-id-49241 .wp-block-group.alignfull .ot-section-label,
.page-id-49240 .wp-block-group.alignfull .ot2-label,
.page-id-49240 .wp-block-group.alignfull .ot2-h2 {
  text-align: center !important;
  display: block;
}

.page-id-49240 .wp-block-group.alignfull > .wp-block-group > h2.wp-block-heading,
.page-id-49253 .wp-block-group.alignfull > .wp-block-group > h2.wp-block-heading,
.page-id-49241 .wp-block-group.alignfull > .wp-block-group > h2.wp-block-heading,
.page-id-49240 .ot2-why-header .ot2-h2,
.page-id-49240 .ot2-cases-header .ot2-h2,
.page-id-49240 .ot2-agent-header .ot2-h2,
.page-id-49240 .ot2-vs-header .ot2-h2,
.page-id-49240 .ot2-faq-header .ot2-h2 {
  text-align: center !important;
}

/* Sous-titre intro (p après h2) centré aussi */
.page-id-49240 .wp-block-group.alignfull > .wp-block-group > h2.wp-block-heading + p,
.page-id-49253 .wp-block-group.alignfull > .wp-block-group > h2.wp-block-heading + p,
.page-id-49241 .wp-block-group.alignfull > .wp-block-group > h2.wp-block-heading + p {
  text-align: center !important;
}

/* 3. H3 plus petits dans les use cases (ot2-case-card) */
.ot2-case-card h3 { font-size: 0.95rem !important; font-weight: 700 !important; margin-bottom: 8px !important; }

/* 4. Flèches → en liste à puce dans les use cases */
.ot2-case-list { list-style: none !important; padding: 0 !important; }
.ot2-case-list li { padding-left: 18px !important; position: relative; }
.ot2-case-list li::before { content: "→" !important; position: absolute; left: 0; color: #ea4b71 !important; font-weight: 700 !important; }

/* 5. Bloc comparatif : fond blanc complet */
.ot2-vs { background: #ffffff !important; }

/* 6. Callout CTA sous le comparatif — plus visible */
.ot2-vs .ot2-intro-highlight {
  background: linear-gradient(135deg, #fdf2f8, #f5f3ff) !important;
  border-left: 4px solid #ea4b71 !important;
  border-radius: 0 12px 12px 0 !important;
  padding: 18px 24px !important;
  margin-top: 32px;
  font-size: 1rem;
}
.ot2-vs .ot2-intro-highlight strong { color: #0f0c29; }
.ot2-vs .ot2-intro-highlight a { color: #ea4b71; font-weight: 700; text-decoration: none; }
.ot2-vs .ot2-intro-highlight a:hover { text-decoration: underline; }

/* 7. CTA final — centrer les boutons */
.ot-n8n-cta .wp-block-buttons,
.ot-make-cta .wp-block-buttons,
.ot-agents-cta .wp-block-buttons {
  justify-content: center !important;
  flex-wrap: wrap;
  gap: 16px;
}


/* ============================================================
   CORRECTIONS CIBLÉES — Page n8n
   ============================================================ */

/* A. Flèches → dans les listes des use cases (wp:list dans wp:column) */
.page-id-49240 .wp-block-column > .wp-block-list,
.page-id-49253 .wp-block-column > .wp-block-list,
.page-id-49241 .wp-block-column > .wp-block-list {
  list-style: none !important;
  padding-left: 0 !important;
  margin-top: 10px !important;
}
.page-id-49240 .wp-block-column > .wp-block-list li,
.page-id-49253 .wp-block-column > .wp-block-list li,
.page-id-49241 .wp-block-column > .wp-block-list li {
  padding-left: 20px !important;
  position: relative !important;
  margin-bottom: 4px;
  font-size: 0.87rem;
}
.page-id-49240 .wp-block-column > .wp-block-list li::before,
.page-id-49253 .wp-block-column > .wp-block-list li::before,
.page-id-49241 .wp-block-column > .wp-block-list li::before {
  content: "→" !important;
  position: absolute !important;
  left: 0 !important;
  color: #ea4b71 !important;
  font-weight: 700 !important;
}

/* B. H3 plus petits dans les use cases (ot2-case-card) */
.ot2-case-card .ot2-case-meta h3 {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  margin: 6px 0 8px !important;
}

/* C. Fond blanc sur le wrapper du comparatif */
.page-id-49240 .wp-block-group.alignfull:has(.ot2-vs) {
  background: #ffffff !important;
}
/* Fallback :has() non supporté partout → cibler via base-background */
.page-id-49240 .wp-block-group.alignfull.has-base-background-color:nth-of-type(6) {
  background: #ffffff !important;
}
/* Plus robuste : cibler tous les groupes du comparatif */
.ot2-vs-inner, .ot2-vs { background: #ffffff !important; }
.page-id-49240 .ot2-vs ~ * { background: #ffffff !important; }

/* D. Callout CTA sous le comparatif — rendu plus visible */
.ot2-vs .ot2-intro-highlight {
  background: linear-gradient(135deg, #fdf2f8, #f5f3ff) !important;
  border-left: 4px solid #ea4b71 !important;
  border-radius: 0 14px 14px 0 !important;
  padding: 20px 28px !important;
  margin-top: 40px !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  color: #0f0c29 !important;
  box-shadow: 0 2px 12px rgba(234,75,113,0.1);
}
.ot2-vs .ot2-intro-highlight a {
  color: #ea4b71 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.ot2-vs .ot2-intro-highlight a:hover { text-decoration: underline !important; }

/* E. CTA final — forcer flex sur les boutons pour centrer */
.ot-n8n-cta .wp-block-buttons,
.ot-make-cta .wp-block-buttons,
.ot-agents-cta .wp-block-buttons {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

/* Callout "Pas sûr du meilleur outil" sous le comparatif */
.ot2-vs-inner > p:last-of-type {
  background: linear-gradient(135deg, #fdf2f8, #f5f3ff) !important;
  border-left: 4px solid #ea4b71 !important;
  border-radius: 0 14px 14px 0 !important;
  padding: 20px 28px !important;
  margin-top: 40px !important;
  font-size: 1rem !important;
  color: #0f0c29 !important;
  box-shadow: 0 2px 16px rgba(234,75,113,0.12) !important;
  display: block !important;
}
.ot2-vs-inner > p:last-of-type a {
  color: #ea4b71 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.ot2-vs-inner > p:last-of-type a:hover {
  text-decoration: underline !important;
}


/* ============================================================
   AJUSTEMENTS PAGE MAKE — /automatisation-make/ (49253)
   Même traitement que n8n
   ============================================================ */

/* 1. Centrer TOUS les H2 et labels sur la page Make */
.page-id-49253 .wp-block-group h2.wp-block-heading,
.page-id-49253 .wp-block-group .ot-section-label {
  text-align: center !important;
}

/* Sous-titres (p après h2) centrés aussi */
.page-id-49253 .wp-block-group h2.wp-block-heading + p {
  text-align: center !important;
}

/* 2. Picto + H3 sur la même ligne — déjà couvert par .page-id-49253 dans CSS précédent
   Mais la structure des cartes scénarios est différente (badge span + H3 + p + p-stack)
   On centre les badges de catégorie des scénarios */
.page-id-49253 .wp-block-column > p:first-child {
  text-align: left !important; /* badge catégorie */
  margin-bottom: 4px !important;
}

/* H3 des cards scénarios : plus compact */
.page-id-49253 .wp-block-column > h3.wp-block-heading {
  font-size: 1rem !important;
  font-weight: 700 !important;
  margin-top: 8px !important;
  margin-bottom: 6px !important;
  text-align: left !important;
}

/* Stack apps (dernier p dans les cards scénarios) : style discret */
.page-id-49253 .wp-block-column.has-background > p:last-of-type {
  font-size: 0.8rem !important;
  color: #94a3b8 !important;
  margin-top: 8px !important;
  border-top: 1px solid #e2e8f0;
  padding-top: 8px !important;
}

/* 3. Cards "Pour qui" : structure sans picto, juste H3 + desc
   Le float:left du picto ne s'applique pas (pas de p.has-x-large-font-size)
   → les cards restent propres avec juste le H3 */

/* 4. Étapes Make : H3 aligné gauche (pas de picto comme n8n) */
.page-id-49253 .ot-step-row h3.wp-block-heading {
  text-align: left !important;
  font-size: 1.05rem !important;
}

/* 5. CTA Make — boutons centrés (déjà fait via .ot-make-cta mais double-couverture) */
.page-id-49253 .ot-make-cta .wp-block-buttons {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

/* 6. H2 et labels dans le CTA font exception — rester centré */
.page-id-49253 .ot-make-cta h2,
.page-id-49253 .ot-make-cta p {
  text-align: center !important;
}


/* ============================================================
   AJUSTEMENTS — PAGE AGENTS IA (49241)
   ============================================================ */

/* 1. Centrer H2 et labels sur Agents IA */
.page-id-49241 .wp-block-group h2.wp-block-heading,
.page-id-49241 .wp-block-group .ot-section-label {
  text-align: center !important;
}
.page-id-49241 .wp-block-group h2.wp-block-heading + p {
  text-align: center !important;
}

/* 2. Cards agents IA — structure : p.emoji / p.badge / h3 / p.desc
   On utilise CSS grid sur la colonne pour aligner picto+h3 sur la même ligne
   La grille : col1=picto(auto) col2=contenu(1fr) / row1=badge(span 2) row2=h3 row3=desc */
.page-id-49241 .wp-block-column.has-background {
  display: grid !important;
  grid-template-columns: 2rem 1fr !important;
  grid-template-rows: auto auto 1fr !important;
  column-gap: 10px !important;
  align-items: start;
}

/* Badge : pleine largeur en ligne 1, span 2 colonnes */
.page-id-49241 .wp-block-column.has-background > p:nth-child(2) {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  font-size: 0.75rem !important;
  margin-bottom: 6px !important;
}

/* Picto emoji : col1, row2 */
.page-id-49241 .wp-block-column.has-background > p.has-x-large-font-size {
  grid-column: 1 !important;
  grid-row: 2 !important;
  font-size: 1.4rem !important;
  margin: 0 !important;
  line-height: 1.4;
}

/* H3 : col2, row2 — à côté du picto */
.page-id-49241 .wp-block-column.has-background > h3.wp-block-heading {
  grid-column: 2 !important;
  grid-row: 2 !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  align-self: center;
  line-height: 1.3;
}

/* Description : span les 2 colonnes, row3 */
.page-id-49241 .wp-block-column.has-background > p.has-text-color {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  margin-top: 10px !important;
  font-size: 0.87rem !important;
}

/* 3. CTA agents IA — boutons centrés */
.page-id-49241 .ot-agents-cta .wp-block-buttons {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}
.page-id-49241 .ot-agents-cta h2,
.page-id-49241 .ot-agents-cta p { text-align: center !important; }


/* ============================================================
   AJUSTEMENTS — PAGE ACCOMPAGNEMENT (49242)
   HTML custom — classes ot- et ot5-
   ============================================================ */

/* 1. Centrer labels et H2/titres dans les sections */
.page-id-49242 .ot-section-label,
.page-id-49242 .ot-section-title,
.page-id-49242 .ot-how h2,
.page-id-49242 .ot-offers h2,
.page-id-49242 .ot-contact-options h2 {
  text-align: center !important;
}

/* 2. Sous-titres sous les H2 */
.page-id-49242 .ot-section-label + p,
.page-id-49242 .ot-section-title + p {
  text-align: center !important;
}

/* 3. Étapes du processus — les numéros ont déjà du style violet
   Ajouter le dégradé cohérent avec les autres pages */
.page-id-49242 .ot-step-dot {
  background: linear-gradient(135deg, #ea4b71, #7c3aed) !important;
  color: #ffffff !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.1rem !important;
  font-weight: 900 !important;
  flex-shrink: 0;
}

/* 4. Contact options — centrer les titres */
.page-id-49242 .ot-contact-opt h3 { text-align: center !important; }


/* ============================================================
   AJUSTEMENTS — PAGE ACCUEIL (home)
   ============================================================ */

/* ============================================================
   AJUSTEMENTS PAGE ACCUEIL (home / page-id-39740)
   ============================================================ */

/* 1. Centrer le bandeau hero */
.home .ot-hero,
.page-id-39740 .ot-hero {
  text-align: center !important;
}
.home .ot-hero-btns,
.page-id-39740 .ot-hero-btns {
  justify-content: center !important;
}

/* 2. Centrer labels, H2 et sous-titres
   EXCEPTION : .ot-why ne doit PAS être centré */
.home .ot-section-label:not(.ot-why .ot-section-label),
.home .ot-section-title:not(.ot-why .ot-section-title),
.home h2.ot-section-title:not(.ot-why h2) {
  text-align: center !important;
  display: block;
}

/* Paragraphe sous "Mes services" : centrer ET centrer le bloc lui-même */
.home .ot-section-sub,
.page-id-39740 .ot-section-sub {
  text-align: center !important;
  display: block !important;
  max-width: 600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Section .ot-why : remettre explicitement à gauche */
.home .ot-why .ot-section-label,
.home .ot-why .ot-section-title,
.home .ot-why h2 {
  text-align: left !important;
}

/* 3. Cards services — picto + H3 sur la même ligne */
.home .ot-card,
.page-id-39740 .ot-card {
  display: grid !important;
  grid-template-columns: 3rem 1fr !important;
  grid-template-rows: auto auto auto !important;
  column-gap: 14px !important;
  align-items: start;
}

/* Icône : col1, row1 */
.home .ot-card-icon,
.page-id-39740 .ot-card-icon {
  grid-column: 1 !important;
  grid-row: 1 !important;
  font-size: 1.8rem !important;
  margin: 0 !important;
  align-self: center;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* H3 titre : col2, row1 — à côté de l'icône */
.home .ot-card > h3,
.page-id-39740 .ot-card > h3 {
  grid-column: 2 !important;
  grid-row: 1 !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  margin: 0 0 4px 0 !important;
  align-self: center;
  line-height: 1.3;
}

/* Description : span les 2 colonnes, row2 */
.home .ot-card > p,
.page-id-39740 .ot-card > p {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  margin-top: 8px !important;
  font-size: 0.88rem;
}

/* Lien "En savoir plus" : span les 2 colonnes, row3 */
.home .ot-card > .ot-card-link,
.home .ot-card > a,
.home .ot-card > span,
.page-id-39740 .ot-card > .ot-card-link {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  margin-top: 8px !important;
}

/* 4. Liste checklist "approche pragmatique" — couleur plus foncée */
.home .ot-checklist li,
.page-id-39740 .ot-checklist li {
  color: #374151 !important;
}
.home .ot-checklist li::before,
.page-id-39740 .ot-checklist li::before {
  color: #ea4b71 !important;
}

/* ACCOMPAGNEMENT — H2 sans classe + section contact */
.page-id-49242 .entry-content h2 {
  text-align: center !important;
}
.page-id-49242 .entry-content h2 + p,
.page-id-49242 .entry-content h2 + .ot-section-subtitle {
  text-align: center !important;
}