/*
Theme Name: OATFCÇ Manifesto
Theme URI: https://oatfcc.fr
Author: OATFCÇ
Author URI: https://oatfcc.fr
Description: Thème WordPress officiel d'OATFCÇ — version « Manifesto ». Organisme de formation et de conseil dédié à l'implémentation de l'IA dans les PME. Design éditorial avec ombre rouge portée signature, blocs encrés, et palette à 3 couleurs (rouge, ciel, papier). Conçu pour la home OATFCÇ.fr.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: oatfcc-manifesto
Tags: business, education, one-column, custom-menu, custom-logo, editor-style, threaded-comments, translation-ready, block-styles
*/

/* ============================================================
   BRAND TOKENS (from colors_and_type.css)
   ============================================================ */

/* ============================================================
   OATFCC — Colors & Type
   On a toujours fait comme ça — Brand foundations
   ============================================================ */

/* ---------- Webfonts ----------
   Display: Archivo Black (Google Fonts) — closest match to logo's
     heavy geometric sans. SUBSTITUTION FLAGGED in README.
   Body:    Inter (Google Fonts) — neutral, highly readable for
     French formation/conseil long-form copy.
   Mono:    JetBrains Mono — for code/output blocks if needed.
*/
:root {
  /* ============================================================
     COLOR — Brand core
     ============================================================ */
  --brand-red:        #F01010;   /* primary action red, from logo */
  --brand-red-dark:   #C40C0C;   /* hover / pressed */
  --brand-red-deep:   #8E0808;   /* shadow long-cast variant */
  --brand-red-tint:   #FFE5E5;   /* surface wash */

  --brand-sky:        #50B0E0;   /* secondary sky-blue, from logo */
  --brand-sky-dark:   #2E8FC0;   /* hover */
  --brand-sky-deep:   #1A6F9C;   /* deep accent / link */
  --brand-sky-tint:   #E5F4FC;   /* surface wash */

  --brand-paper:      #F0F0F0;   /* off-white, the “page” */
  --brand-ink:        #0E0E10;   /* near-black, for type */

  /* ============================================================
     COLOR — Neutral scale (warm-cool neutral, slight blue cast)
     ============================================================ */
  --neutral-0:    #FFFFFF;
  --neutral-50:   #F7F8FA;
  --neutral-100:  #F0F0F0;   /* = paper */
  --neutral-200:  #E2E5EA;
  --neutral-300:  #C9CFD7;
  --neutral-400:  #9AA3AE;
  --neutral-500:  #6B7280;
  --neutral-600:  #4B5562;
  --neutral-700:  #303841;
  --neutral-800:  #1A1F26;
  --neutral-900:  #0E0E10;   /* = ink */

  /* ============================================================
     COLOR — Semantic
     ============================================================ */
  --color-bg:           var(--brand-paper);
  --color-bg-elevated:  var(--neutral-0);
  --color-bg-inverse:   var(--brand-ink);
  --color-bg-accent:    var(--brand-sky);
  --color-bg-alarm:     var(--brand-red);

  --fg1:                var(--brand-ink);          /* primary text */
  --fg2:                var(--neutral-600);        /* secondary text */
  --fg3:                var(--neutral-500);        /* tertiary / meta */
  --fg-on-red:          var(--neutral-0);
  --fg-on-sky:          var(--brand-ink);
  --fg-on-dark:         var(--neutral-0);
  --fg-link:            var(--brand-sky-deep);
  --fg-link-hover:      var(--brand-red);

  --border:             var(--neutral-200);
  --border-strong:      var(--neutral-300);
  --border-ink:         var(--brand-ink);          /* hard outline */

  --color-success:      #1F8A5B;
  --color-warning:      #D98A00;
  --color-danger:       var(--brand-red);
  --color-info:         var(--brand-sky-deep);

  /* ============================================================
     TYPE — Families
     ============================================================ */
  --font-display: 'Archivo Black', 'Arial Black', 'Helvetica Neue', system-ui, sans-serif;
  --font-heading: 'Archivo', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ============================================================
     TYPE — Scale (modular ~1.25, with display jumps)
     ============================================================ */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   30px;
  --fs-3xl:   38px;
  --fs-4xl:   48px;
  --fs-5xl:   64px;
  --fs-6xl:   88px;
  --fs-display: 128px;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --ls-tight:   -0.02em;
  --ls-snug:    -0.01em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-wider:   0.08em;     /* for ALL-CAPS eyebrows */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   900;

  /* ============================================================
     RADII — Mostly square, with mild softening on cards/buttons
     ============================================================ */
  --r-none:  0;
  --r-xs:    2px;
  --r-sm:    4px;
  --r-md:    8px;
  --r-lg:    12px;
  --r-xl:    20px;
  --r-pill:  999px;

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ============================================================
     ELEVATION — Long cast shadow (signature) + utility shadows
     ============================================================ */
  --shadow-sm:  0 1px 2px rgba(14,14,16,.08);
  --shadow-md:  0 4px 12px rgba(14,14,16,.10);
  --shadow-lg:  0 12px 32px rgba(14,14,16,.14);
  --shadow-ink: 4px 4px 0 0 var(--brand-ink);    /* hard offset, no blur */
  --shadow-red: 6px 6px 0 0 var(--brand-red);    /* signature long-cast */
  --shadow-sky: 6px 6px 0 0 var(--brand-sky);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:  cubic-bezier(.22, 1, .36, 1);
  --ease-in:   cubic-bezier(.55, 0, 1, .45);
  --ease-snap: cubic-bezier(.2, .8, .2, 1);
  --t-fast:    120ms;
  --t-base:    200ms;
  --t-slow:    320ms;

  /* Layout */
  --container:    1200px;
  --container-sm: 960px;
}

/* ============================================================
   SEMANTIC TYPE — drop-in element styles
   ============================================================ */
.h-display, .display {
  font-family: var(--font-display);
  font-weight: 400; /* Archivo Black is single-weight */
  font-size: clamp(56px, 9vw, var(--fs-display));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg1);
  text-transform: uppercase;
}

.h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 6vw, var(--fs-5xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--fg1);
}

.h2 {
  font-family: var(--font-heading);
  font-weight: var(--fw-black);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--fg1);
}

.h3 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--fg1);
}

.h4 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg1);
}

.eyebrow {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--brand-red);
}

.lead {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg2);
}

.p, p.body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg1);
}

.small, small {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg2);
}

.code, code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--neutral-100);
  padding: 0.1em 0.35em;
  border-radius: var(--r-xs);
}

.quote {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--fg1);
}

a {
  color: var(--fg-link);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1.5px;
  transition: color var(--t-fast) var(--ease-out);
}
a:hover { color: var(--fg-link-hover); }

::selection {
  background: var(--brand-red);
  color: var(--neutral-0);
}


/* ============================================================
   V1 MANIFESTO — HOMEPAGE STYLES
   ============================================================ */

/* ============================================================
   V1 — MANIFESTO
   Editorial homepage, sky hero with signature long-cast headline
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--brand-paper);
  color: var(--fg1);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
}
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; margin: 0; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
.container.narrow { max-width: 920px; }
.two-col { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start; }

.eyebrow {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-red);
  margin-bottom: 18px;
  display: inline-block;
}
.eyebrow.on-red { color: var(--brand-red); }
.eyebrow.on-sky { color: var(--brand-ink); }

.h2 {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--brand-ink);
  margin: 0 0 16px;
  text-wrap: balance;
}

.lead {
  font-size: 18px;
  line-height: 1.55;
  color: var(--fg2);
  max-width: 60ch;
  margin: 0 0 16px;
}
.lead strong { color: var(--brand-ink); }

/* -------- BUTTONS -------- */
.btn {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  padding: 12px 22px;
  border-radius: 4px;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
  text-decoration: none;
  transition: all 120ms cubic-bezier(.22,1,.36,1);
}
.btn .arr { font-size: 18px; font-weight: 400; transform: translateY(-1px); margin-left: 4px; }
.btn.lg { padding: 16px 28px; font-size: 16px; }
.btn-primary { background: var(--brand-red); color: #fff; }
.btn-primary:hover { background: var(--brand-red-dark); }
.btn-ink { background: transparent; color: var(--brand-ink); border: 2px solid var(--brand-ink); padding: 14px 26px; }
.btn-ink:hover { background: var(--brand-ink); color: var(--brand-paper); }

/* -------- NAV -------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 32px;
  background: var(--brand-paper);
  padding: 14px 48px;
  border-bottom: 1.5px solid var(--brand-ink);
}
.nav .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--brand-ink); }
.nav .brand img { width: 38px; height: 38px; border-radius: 4px; }
.nav .brand-mark { font-family: var(--font-display); font-size: 18px; letter-spacing: -.01em; }
.nav-links { display: flex; gap: 22px; margin-left: 8px; flex-wrap: wrap; }
.nav-links a { color: var(--fg1); text-decoration: none; font-weight: 500; font-size: 14px; }
.nav-links a.active { color: var(--brand-red); }
.nav-links a:hover { color: var(--brand-red); }
.nav .btn { margin-left: auto; }

/* -------- HERO -------- */
.hero {
  background: var(--brand-sky);
  padding: 96px 48px 120px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 64px;
  align-items: center;
}
.hero-inner { max-width: 760px; }
.hero-eyebrow {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-ink);
  margin-bottom: 24px;
  background: rgba(255,255,255,.45);
  padding: 8px 12px;
  display: inline-block;
}

.cast-h1 {
  font-family: var(--font-display);
  font-size: clamp(56px, 7.4vw, 104px);
  line-height: .94;
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 36px;
  display: block;
}
.cast-h1 .line {
  position: relative;
  display: inline-block;
  isolation: isolate;
}
.cast-h1 .line + .line { margin-top: 4px; }
.cast-h1 .line::before {
  content: attr(data-text);
  position: absolute; left: 0; top: 0;
  color: var(--brand-red);
  transform: translate(8px, 8px);
  z-index: -1;
}

.hero-sub {
  font-size: 20px; line-height: 1.55; color: var(--brand-ink);
  max-width: 640px; margin: 0 0 32px;
}
.hero-sub strong { background: rgba(255,255,255,.5); padding: 0 4px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.hero-meta {
  display: flex; gap: 24px; flex-wrap: wrap;
  font-size: 14px; color: var(--brand-ink);
}
.hero-meta span { display: inline-flex; gap: 6px; align-items: center; }
.hero-meta svg { color: var(--brand-red); width: 16px; height: 16px; }

.hero-photo { position: relative; }
.photo-card {
  background: #fff;
  border: 2px solid var(--brand-ink);
  border-radius: 4px;
  box-shadow: 8px 8px 0 0 var(--brand-ink);
  aspect-ratio: 4/5;
  width: 100%;
  max-width: 380px;
  margin-left: auto;
  overflow: hidden;
}
.photo-card.lg { max-width: 460px; aspect-ratio: 3/4; margin-left: 0; box-shadow: 10px 10px 0 0 var(--brand-red); }
.photo-stripes {
  width: 100%; height: 100%;
  background-image: repeating-linear-gradient(45deg,
    var(--neutral-200) 0 14px, var(--neutral-100) 14px 28px);
  display: grid; place-items: center;
  position: relative;
}
.photo-label {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--brand-ink);
  background: rgba(255,255,255,.85);
  padding: 8px 12px;
  border: 1px solid var(--brand-ink);
  text-align: center;
}
.photo-label span { display: block; font-size: 11px; color: var(--fg2); margin-top: 4px; }
.photo-tag {
  position: absolute;
  bottom: -16px; left: -16px;
  background: var(--brand-red);
  color: #fff;
  padding: 12px 16px;
  font-family: var(--font-heading);
  border: 2px solid var(--brand-ink);
  box-shadow: 4px 4px 0 0 var(--brand-ink);
  max-width: 220px;
}
.photo-tag .tg-1 { font-weight: 800; font-size: 13px; letter-spacing: .12em; }
.photo-tag .tg-2 { font-weight: 500; font-size: 12px; opacity: .9; margin-top: 2px; }

/* -------- TRUST -------- */
.trust {
  background: var(--brand-paper);
  padding: 32px 0;
  border-bottom: 1.5px solid var(--brand-ink);
}
.trust-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.trust-item { text-align: center; }
.trust-item.big { transform: scale(1.05); }
.trust-mark {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: .04em;
  color: var(--brand-ink);
  text-transform: uppercase;
}
.trust-mark .red { color: var(--brand-red); }
.trust-fine {
  font-size: 11px; color: var(--fg3);
  letter-spacing: .08em; text-transform: uppercase;
  margin-top: 4px;
}
.trust-divider { width: 1px; height: 32px; background: var(--neutral-300); }

/* -------- PROBLEM -------- */
.problem { padding: 120px 0; background: var(--brand-paper); }
.prob-left .h2 { font-size: clamp(32px, 3.6vw, 48px); }
.strike { color: var(--brand-red); position: relative; display: inline-block; }
.strike::after {
  content: ''; position: absolute; left: -4px; right: -4px; top: 50%;
  height: 6px; background: var(--brand-red); transform: rotate(-2deg);
  opacity: .25;
}
.promise {
  margin-top: 32px;
  background: var(--brand-ink);
  color: #fff;
  padding: 28px 32px;
  border-radius: 4px;
  box-shadow: 6px 6px 0 0 var(--brand-red);
}
.promise .eyebrow { color: var(--brand-red); margin-bottom: 12px; }
.promise-line {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
  margin: 0;
  color: #fff;
}

/* -------- PARCOURS -------- */
.parcours { padding: 120px 0; background: #fff; border-top: 1.5px solid var(--brand-ink); border-bottom: 1.5px solid var(--brand-ink); }
.section-head { max-width: 760px; margin-bottom: 56px; }
.section-head.light .eyebrow,
.section-head.light .h2 { color: var(--brand-ink); }

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.step {
  background: var(--brand-paper);
  border: 2px solid var(--brand-ink);
  border-radius: 4px;
  padding: 32px 28px;
  display: flex; flex-direction: column;
  transition: transform 140ms cubic-bezier(.22,1,.36,1), box-shadow 140ms;
}
.step.cast-red { box-shadow: 8px 8px 0 0 var(--brand-red); }
.step.cast-sky { box-shadow: 8px 8px 0 0 var(--brand-sky); }
.step.cast-ink { box-shadow: 8px 8px 0 0 var(--brand-ink); }
.step:hover { transform: translate(3px, 3px); }
.step.cast-red:hover { box-shadow: 5px 5px 0 0 var(--brand-red); }
.step.cast-sky:hover { box-shadow: 5px 5px 0 0 var(--brand-sky); }
.step.cast-ink:hover { box-shadow: 5px 5px 0 0 var(--brand-ink); }

.step-num {
  font-family: var(--font-display);
  font-size: 64px;
  line-height: .9;
  color: var(--brand-red);
  margin-bottom: 4px;
}
.step.cast-sky .step-num { color: var(--brand-sky-deep); }
.step.cast-ink .step-num { color: var(--brand-ink); }
.step-tag {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--brand-ink);
  background: #fff;
  border: 1.5px solid var(--brand-ink);
  padding: 4px 8px;
  align-self: flex-start;
  margin-bottom: 16px;
  border-radius: 2px;
}
.step h3 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.2;
  margin: 0 0 18px;
  color: var(--brand-ink);
  text-wrap: balance;
}
.step-meta { margin: 0 0 18px; display: flex; flex-direction: column; gap: 6px; }
.step-meta li {
  font-size: 13px; color: var(--fg2);
  display: inline-flex; align-items: center; gap: 8px;
}
.step-meta svg { width: 14px; height: 14px; color: var(--brand-ink); }
.step-obj {
  font-size: 14px; line-height: 1.55; color: var(--fg1);
  margin: 0 0 24px;
  padding: 14px 16px;
  background: #fff;
  border-left: 3px solid var(--brand-red);
}
.step.cast-sky .step-obj { border-left-color: var(--brand-sky); }
.step.cast-ink .step-obj { border-left-color: var(--brand-ink); }
.step-obj strong { color: var(--brand-ink); }
.step-link {
  margin-top: auto;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  color: var(--brand-red);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
}
.step-link:hover { color: var(--brand-red-dark); }
.step-link .arr { font-size: 18px; transform: translateY(-1px); transition: transform 120ms; }
.step-link:hover .arr { transform: translate(3px, -1px); }

/* -------- FOR WHOM (sky) -------- */
.sky-section { background: var(--brand-sky); padding: 120px 0; }
.audience { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.aud-card {
  background: var(--brand-paper);
  border: 2px solid var(--brand-ink);
  padding: 28px 22px;
  border-radius: 4px;
}
.aud-card svg { width: 28px; height: 28px; color: var(--brand-red); margin-bottom: 16px; }
.aud-card h4 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 17px;
  margin: 0 0 8px;
  color: var(--brand-ink);
}
.aud-card p { font-size: 14px; line-height: 1.5; color: var(--fg2); margin: 0; }
.aud-card.stamp {
  background: var(--brand-red);
  color: #fff;
  border-color: var(--brand-ink);
  box-shadow: 6px 6px 0 0 var(--brand-ink);
}
.aud-card.stamp .stamp-mark {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  margin-bottom: 14px;
  letter-spacing: -.01em;
}
.aud-card.stamp p { color: #fff; opacity: .92; }

/* -------- METHOD -------- */
.method { padding: 120px 0; background: var(--brand-paper); }
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.pillar {
  border-top: 3px solid var(--brand-ink);
  padding-top: 20px;
}
.pillar-num {
  font-family: var(--font-display);
  font-size: 36px;
  color: var(--brand-red);
  line-height: 1;
  margin-bottom: 10px;
}
.pillar h4 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 19px;
  margin: 0 0 8px;
  color: var(--brand-ink);
}
.pillar p { font-size: 14px; line-height: 1.55; color: var(--fg2); margin: 0; }

/* -------- ABOUT -------- */
.about { padding: 120px 0; background: #fff; border-top: 1.5px solid var(--brand-ink); }
.about .role { font-family: var(--font-heading); font-weight: 700; color: var(--brand-red); margin: 0 0 24px; }
.about-text .h2 { margin-bottom: 4px; }

/* -------- OPCO -------- */
.opco { padding: 120px 0; background: var(--brand-paper); }
.opco-card {
  background: var(--brand-ink);
  color: #fff;
  border-radius: 4px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  padding: 64px;
  box-shadow: 10px 10px 0 0 var(--brand-red);
}
.opco-card .h2 { color: #fff; }
.opco-card .lead { color: var(--neutral-300); }
.opco-card .lead strong { color: #fff; }
.opco-card .eyebrow.on-red { color: var(--brand-red); }
.big-number {
  font-family: var(--font-display);
  color: var(--brand-red);
  font-size: 1.2em;
}
.opco-steps { display: flex; flex-direction: column; gap: 16px; }
.opco-steps li {
  display: flex; gap: 16px; align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--neutral-700);
  font-size: 15px;
  color: var(--neutral-200);
  line-height: 1.5;
}
.opco-steps li:last-child { border-bottom: 0; }
.opco-num {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--brand-red);
  color: #fff;
  font-family: var(--font-display);
  font-size: 16px;
}

/* -------- FAQ -------- */
.faq-section { padding: 120px 0; background: #fff; border-top: 1.5px solid var(--brand-ink); }
.faq { border-top: 1.5px solid var(--brand-ink); }
.faq-item { border-bottom: 1.5px solid var(--brand-ink); }
.faq-q {
  display: flex; width: 100%; justify-content: space-between; align-items: center;
  padding: 22px 0;
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--brand-ink);
  text-align: left;
}
.faq-q:hover { color: var(--brand-red); }
.faq-pm {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--brand-red);
  width: 24px; text-align: center;
}
.faq-a {
  display: none;
  padding: 0 0 22px;
  font-size: 16px; line-height: 1.6;
  color: var(--fg2);
  max-width: 720px;
}
.faq-item.open .faq-a { display: block; }

/* -------- FINAL -------- */
.final {
  background: var(--brand-ink);
  color: #fff;
  padding: 120px 0;
  text-align: center;
}
.final-cast {
  font-family: var(--font-display);
  font-size: clamp(48px, 6.5vw, 96px);
  line-height: .96;
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: #fff;
  display: block;
}
.final-cast .line { position: relative; display: inline-block; isolation: isolate; }
.final-cast .line + .line { margin-top: 4px; }
.final-cast .line::before {
  content: attr(data-text);
  position: absolute; left: 0; top: 0;
  color: var(--brand-red);
  transform: translate(8px, 8px);
  z-index: -1;
}
.final-sub {
  font-size: 19px; color: var(--neutral-300);
  margin: 32px auto 40px; max-width: 560px;
}
.final-form {
  display: flex; flex-direction: column; gap: 12px;
  max-width: 640px; margin: 0 auto;
  text-align: left;
}
.final-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.final-form .field {
  padding: 14px 16px;
  border-radius: 4px;
  border: 1.5px solid var(--neutral-700);
  background: var(--neutral-800);
  color: #fff;
  font: inherit;
  width: 100%;
}
.final-form .field::placeholder { color: var(--neutral-400); }
.final-form .field:focus { outline: 2px solid var(--brand-red); outline-offset: 1px; }
.final-form .btn { align-self: center; margin-top: 8px; }
.final-fine { text-align: center; font-size: 13px; color: var(--neutral-400); margin: 14px 0 0; }

/* -------- FOOTER -------- */
.footer { background: var(--brand-paper); border-top: 1.5px solid var(--brand-ink); padding: 64px 0 24px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 36px;
}
.footer-brand img { width: 44px; height: 44px; border-radius: 4px; margin-bottom: 12px; }
.footer-brand p { font-size: 13px; line-height: 1.5; color: var(--fg2); margin: 0 0 8px; max-width: 320px; }
.footer-brand .muted { color: var(--fg3); font-size: 12px; }
.footer h5 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--brand-ink);
  margin: 0 0 14px;
}
.footer ul li { margin-bottom: 8px; }
.footer ul a { color: var(--fg2); text-decoration: none; font-size: 14px; }
.footer ul a:hover { color: var(--brand-red); }
.footer-bottom {
  display: flex; justify-content: space-between;
  padding-top: 24px; margin-top: 40px;
  border-top: 1px solid var(--neutral-300);
  font-size: 12px; color: var(--fg3);
}


/* ============================================================
   ===== OATFCÇ HOME ADD-ONS =====
   Styles des sections de la home oatfcc.fr (et page séminaire) :
   hero trio, bandeau logos, services, projets, accroche, fondateur,
   bloc HubSpot, bénéfices, pour-qui. Repris de seminaire + accueil.
   ============================================================ */

/* ---------- SÉMINAIRE / blocs réutilisés ---------- */
/* ============================================================
   SÉMINAIRE D'ENTREPRISE — V1 Manifesto extension
   Reuses ../v1-manifesto/style.css; only overrides + new blocks.
   ============================================================ */

/* -------- TOP BANNER (reused from retreat aesthetic) -------- */
.top-banner {
  background: var(--brand-ink);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .04em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  padding: 10px 24px;
  flex-wrap: wrap;
}
.top-banner svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px; color: var(--brand-red); }
.top-banner .sep { width: 4px; height: 4px; background: var(--neutral-500); border-radius: 50%; }
.top-banner .hot { color: var(--brand-red); }

/* -------- HERO ADJUSTMENT — seminar uses a 3-stack hero with right-side art -------- */
.hero.seminar-hero {
  padding: 80px 48px 112px;
  grid-template-columns: 1.25fr 1fr;
  align-items: stretch;
}
.hero.seminar-hero .cast-h1 {
  font-size: clamp(40px, 5.4vw, 76px);
}
.hero.seminar-hero .cast-h1 .line + .line { margin-top: 2px; }
.hero.seminar-hero .cast-h1 .line-kill {
  color: var(--brand-red);
  display: inline-block;
  position: relative;
  margin-top: 14px;
}
.hero.seminar-hero .cast-h1 .line-kill::before {
  color: var(--brand-ink);
}

/* Portrait photo override */
.photo-card.portrait { padding: 0; overflow: hidden; }
.photo-card.portrait img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}

/* Hubspot form wrap — sits inside the dark .final block */
.hubspot-wrap {
  background: #fff;
  color: var(--brand-ink);
  border-radius: 4px;
  padding: 36px 36px 28px;
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
  box-shadow: 10px 10px 0 0 var(--brand-red);
}
.hubspot-wrap .final-fine { color: var(--fg3); text-align: center; margin-top: 18px; }
.hubspot-wrap .hs-form-frame { min-height: 320px; }
.hubspot-wrap input,
.hubspot-wrap select,
.hubspot-wrap textarea {
  font: inherit !important;
  border: 1.5px solid var(--neutral-300) !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: var(--brand-ink) !important;
}
.hubspot-wrap label { color: var(--brand-ink) !important; font-family: var(--font-heading); font-weight: 600; }
.hubspot-wrap .hs-button,
.hubspot-wrap button[type="submit"] {
  background: var(--brand-red) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 4px !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  padding: 14px 26px !important;
  cursor: pointer;
}
.hubspot-wrap .hs-button:hover { background: var(--brand-red-dark) !important; }

/* Right-side hero "trio" — three pillar cards stretched full hero height */
.trio {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 480px;
  width: 100%;
  margin-left: auto;
  align-self: stretch;
  justify-content: space-between;
}
.trio-card {
  background: #fff;
  border: 2px solid var(--brand-ink);
  border-radius: 4px;
  padding: 26px 28px;
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-rows: auto auto;
  column-gap: 22px;
  row-gap: 12px;
  align-items: center;
  flex: 1;
  min-height: 130px;
}
.trio-card.t-1 { box-shadow: 10px 10px 0 0 var(--brand-red); }
.trio-card.t-2 { box-shadow: 10px 10px 0 0 var(--brand-ink); margin-left: 24px; }
.trio-card.t-3 { box-shadow: 10px 10px 0 0 var(--brand-sky-deep); margin-left: 48px; }

.trio-num {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: -.01em;
  color: var(--fg3);
  line-height: 1;
  grid-row: 1;
  grid-column: 1;
}
.trio-icon {
  display: grid; place-items: center;
  color: var(--brand-ink);
  width: 56px; height: 56px;
  grid-row: 2;
  grid-column: 1;
  border: 1.5px solid var(--brand-ink);
  border-radius: 4px;
  background: var(--brand-paper);
}
.trio-icon svg { width: 32px; height: 32px; }
.trio-card.t-1 .trio-icon,
.trio-card.t-1 .trio-num { color: var(--brand-red); }
.trio-card.t-1 .trio-icon { border-color: var(--brand-red); background: #fff; }
.trio-card.t-3 .trio-icon,
.trio-card.t-3 .trio-num { color: var(--brand-sky-deep); }
.trio-card.t-3 .trio-icon { border-color: var(--brand-sky-deep); background: #fff; }

.trio-body {
  grid-row: 1 / 3;
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}
.trio-label {
  font-family: var(--font-display);
  font-size: clamp(28px, 2.6vw, 36px);
  letter-spacing: -.015em;
  color: var(--brand-ink);
  text-transform: uppercase;
  line-height: 1;
}
.trio-desc {
  font-size: 14px;
  line-height: 1.45;
  color: var(--fg2);
  margin: 0;
}
.trio-desc em { font-style: italic; color: var(--brand-ink); }

/* -------- ACCROCHE — big editorial pull-quote -------- */
.accroche {
  background: var(--brand-paper);
  padding: 120px 0;
  border-bottom: 1.5px solid var(--brand-ink);
}
.accroche-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 48px;
}
.accroche-eyebrow {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-red);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.accroche-eyebrow::after {
  content: '';
  flex: 1; height: 2px; background: var(--brand-ink);
  max-width: 200px;
}
.accroche-text {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.18;
  letter-spacing: -.015em;
  color: var(--brand-ink);
  margin: 0;
  text-wrap: pretty;
}
.accroche-text .neg {
  color: var(--brand-red);
}
.accroche-text .punch {
  position: relative;
  display: inline;
  background: linear-gradient(180deg, transparent 62%, rgba(80,176,224,.45) 62%);
  padding: 0 4px;
}
.accroche-text .small-line {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--fg2);
  margin-top: 28px;
  max-width: 56ch;
}

/* -------- LE CONCEPT — two-col with stamp -------- */
.concept {
  padding: 120px 0;
  background: #fff;
  border-bottom: 1.5px solid var(--brand-ink);
}
.concept .two-col { grid-template-columns: 1fr 1.3fr; gap: 80px; }
.concept-left .h2 { font-size: clamp(34px, 3.8vw, 50px); }
.concept-left .h2 .upper { text-transform: uppercase; }
.concept-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.concept-list li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 16px;
  align-items: start;
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg1);
  padding-bottom: 22px;
  border-bottom: 1px solid var(--neutral-200);
}
.concept-list li:last-child { border-bottom: 0; }
.concept-list .ck {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: var(--brand-ink);
  color: #fff;
  font-family: var(--font-display);
  font-size: 14px;
  border-radius: 2px;
}
.concept-list strong { color: var(--brand-ink); }
.concept-stamp {
  margin-top: 32px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.15;
  color: var(--brand-ink);
  letter-spacing: -.01em;
  text-transform: uppercase;
  padding: 22px 26px;
  border: 2px solid var(--brand-ink);
  background: var(--brand-paper);
  box-shadow: 6px 6px 0 0 var(--brand-red);
  display: inline-block;
}
.concept-stamp .red { color: var(--brand-red); }

/* -------- PROGRAMME — 4 cards -------- */
.programme {
  padding: 120px 0;
  background: var(--brand-paper);
}
.programme-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 28px;
}
.programme-card {
  background: #fff;
  border: 2px solid var(--brand-ink);
  border-radius: 4px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 380px;
}
.programme-card.cast-red    { box-shadow: 10px 10px 0 0 var(--brand-red); }
.programme-card.cast-ink    { box-shadow: 10px 10px 0 0 var(--brand-ink); }
.programme-card.cast-sky    { box-shadow: 10px 10px 0 0 var(--brand-sky); }
.programme-card.cast-paper  { box-shadow: 10px 10px 0 0 var(--neutral-300); }

.programme-card .pc-num {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: .14em;
  color: var(--brand-red);
  margin-bottom: 4px;
}
.programme-card.cast-ink .pc-num,
.programme-card.cast-paper .pc-num { color: var(--brand-ink); }
.programme-card.cast-sky .pc-num { color: var(--brand-sky-deep); }

.programme-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 2.4vw, 38px);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: -.015em;
  color: var(--brand-ink);
  margin: 0 0 18px;
}
.programme-card p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg2);
  margin: 0 0 14px;
  max-width: 52ch;
}
.programme-card p strong { color: var(--brand-ink); }
.programme-card .pc-quote {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1.5px solid var(--brand-ink);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  color: var(--brand-ink);
  font-style: italic;
}
.programme-card .pc-icon {
  position: absolute;
  top: 28px; right: 28px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1.5px solid var(--brand-ink);
  background: var(--brand-paper);
  border-radius: 4px;
}
.programme-card .pc-icon svg { width: 22px; height: 22px; color: var(--brand-ink); }
.programme-card.cast-red .pc-icon { background: var(--brand-red); }
.programme-card.cast-red .pc-icon svg { color: #fff; }

/* When two short cards live in the right column */
.programme-stack { display: flex; flex-direction: column; gap: 28px; }
.programme-stack .programme-card { min-height: 0; padding: 28px 30px; }
.programme-stack .programme-card h3 { font-size: clamp(24px, 2vw, 30px); margin-bottom: 12px; }

/* -------- FORMATS -------- */
.formats {
  padding: 120px 0;
  background: #fff;
  border-top: 1.5px solid var(--brand-ink);
  border-bottom: 1.5px solid var(--brand-ink);
}
.formats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 56px;
}
.format-card {
  background: var(--brand-paper);
  border: 2px solid var(--brand-ink);
  border-radius: 4px;
  padding: 40px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.format-card.feature {
  background: var(--brand-ink);
  color: #fff;
  box-shadow: 10px 10px 0 0 var(--brand-red);
}
.format-card.subtle {
  box-shadow: 10px 10px 0 0 var(--brand-sky);
}
.format-card .fmt-tag {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-red);
  margin-bottom: 14px;
}
.format-card.feature .fmt-tag { color: var(--brand-red); }
.format-card .fmt-duration {
  font-family: var(--font-display);
  font-size: clamp(48px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--brand-ink);
  margin-bottom: 8px;
}
.format-card.feature .fmt-duration { color: #fff; }
.format-card .fmt-name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.2;
  color: var(--brand-ink);
  margin: 0 0 18px;
}
.format-card.feature .fmt-name { color: #fff; }
.format-card .fmt-desc {
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg2);
  margin: 0 0 24px;
}
.format-card.feature .fmt-desc { color: var(--neutral-300); }
.format-card .fmt-includes {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1.5px solid var(--brand-ink);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.format-card.feature .fmt-includes { border-top-color: var(--neutral-700); }
.format-card .fmt-includes li {
  font-size: 14px;
  color: var(--fg2);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.format-card.feature .fmt-includes li { color: var(--neutral-300); }
.format-card .fmt-includes li::before {
  content: '→';
  color: var(--brand-red);
  font-weight: 700;
  flex-shrink: 0;
}
.format-card .fmt-flag {
  position: absolute;
  top: -14px;
  right: 32px;
  background: var(--brand-red);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 2px solid var(--brand-ink);
}

/* -------- POUR QUI -------- */
.pour-qui {
  padding: 120px 0;
  background: var(--brand-sky);
}
.pour-qui .section-head { max-width: 820px; }
.pour-qui .section-head .h2 { color: var(--brand-ink); }
.pour-qui-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 32px;
}
.pq-card {
  background: var(--brand-paper);
  border: 2px solid var(--brand-ink);
  padding: 28px 32px;
  border-radius: 4px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg1);
}
.pq-card strong { color: var(--brand-ink); }
.pq-card.is-not {
  background: transparent;
  border: 2px dashed var(--brand-ink);
  color: var(--brand-ink);
}
.pq-card .pq-tag {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-red);
  margin-bottom: 12px;
  display: block;
}
.pq-card.is-not .pq-tag { color: var(--brand-ink); }

/* -------- ANIMATEUR -------- */
.animateur {
  padding: 120px 0;
  background: #fff;
}
.animateur .two-col { grid-template-columns: 1fr 1.3fr; gap: 80px; }
.animateur .role {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--brand-red);
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 24px;
}
.animateur .h2 { margin-bottom: 8px; }
.animateur-stats {
  display: flex; gap: 32px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1.5px solid var(--brand-ink);
}
.animateur-stats .st-num {
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 1;
  color: var(--brand-red);
}
.animateur-stats .st-lbl {
  font-size: 13px;
  color: var(--fg2);
  margin-top: 4px;
  max-width: 16ch;
  line-height: 1.35;
}

/* -------- FINAL CTA (seminar) — override headlines -------- */
.final.seminar-final .final-cast { font-size: clamp(46px, 5.8vw, 84px); }
.final.seminar-final .pre-headline {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-red);
  margin-bottom: 28px;
}

/* -------- LES BÉNÉFICES (ink section) -------- */
.benefices {
  background: var(--brand-ink);
  color: #fff;
  padding: 120px 0;
  border-top: 1.5px solid var(--brand-ink);
}
.benefices .eyebrow.on-ink {
  color: var(--brand-red);
}
.benefices-head .h2 {
  color: #fff;
  font-size: clamp(38px, 4.4vw, 60px);
}
.benefices-list {
  list-style: none;
  padding: 0;
  margin: 64px 0 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  counter-reset: bn;
  max-width: 1080px;
}
.benefice {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  align-items: start;
  padding: 44px 0;
  border-top: 1.5px solid rgba(255,255,255,.18);
}
.benefice:last-child { border-bottom: 1.5px solid rgba(255,255,255,.18); }
.bn-num {
  font-family: var(--font-display);
  font-size: clamp(80px, 9vw, 140px);
  line-height: .85;
  letter-spacing: -.03em;
  color: var(--brand-red);
  font-weight: 400;
}
.bn-body { padding-top: 12px; max-width: 64ch; }
.bn-h {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.1;
  letter-spacing: -.015em;
  color: #fff;
  margin: 0 0 16px;
  text-transform: none;
}
.benefice p {
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255,255,255,.78);
  margin: 0;
}
.benefice p strong { color: #fff; }

@media (max-width: 1024px) {
  .benefice { grid-template-columns: 1fr; gap: 8px; padding: 32px 0; }
  .bn-num { font-size: 64px; }
}
@media (max-width: 1024px) {
  .hero.seminar-hero { grid-template-columns: 1fr; padding: 60px 32px 80px; }
  .trio { max-width: 100%; }
  .programme-grid,
  .formats-grid,
  .pour-qui-grid,
  .concept .two-col,
  .animateur .two-col { grid-template-columns: 1fr; gap: 40px; }
  .nav-links { display: none; }
}


/* ---------- ACCUEIL / blocs spécifiques home ---------- */
/* ============================================================
   OATFCÇ — Accueil
   Réutilise v1-manifesto/style.css + seminaire-entreprise/style.css
   N'ajoute que les blocs spécifiques homepage : services, projets.
   ============================================================ */

/* -------- HERO HEADLINE TWEAKS -------- */
.hero.home-hero .cast-h1 {
  font-size: clamp(40px, 5.4vw, 76px);
}
.hero.home-hero .cast-h1 .line-kill {
  color: var(--brand-red);
  display: inline-block;
  position: relative;
  margin-top: 14px;
}
.hero.home-hero .cast-h1 .line-kill::before {
  color: var(--brand-ink);
}

/* -------- BANDEAU LOGOS (marquee) -------- */
.logos-band {
  background: var(--brand-ink);
  padding: 32px 0;
  display: flex;
  align-items: center;
  gap: 40px;
  overflow: hidden;
}
.logos-band-label {
  flex-shrink: 0;
  padding-left: 48px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-red);
  white-space: nowrap;
  position: relative;
}
.logos-band-label::after {
  content: '';
  position: absolute;
  right: -20px; top: 50%;
  width: 1px; height: 22px;
  background: rgba(255,255,255,.25);
  transform: translateY(-50%);
}
.logos-marquee {
  flex: 1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logos-track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: logos-scroll 32s linear infinite;
}
.logos-band:hover .logos-track { animation-play-state: paused; }
.logo-word {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: -.01em;
  color: rgba(255,255,255,.72);
  white-space: nowrap;
  transition: color .2s ease;
}
.logo-word:hover { color: #fff; }
@keyframes logos-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logos-track { animation: none; }
}
@media (max-width: 1024px) {
  .logos-band { flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px 0; }
  .logos-band-label { padding-left: 24px; }
  .logos-band-label::after { display: none; }
}
.services {
  padding: 120px 0;
  background: #fff;
  border-top: 1.5px solid var(--brand-ink);
  border-bottom: 1.5px solid var(--brand-ink);
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 56px;
}
.service-card {
  background: var(--brand-paper);
  border: 2px solid var(--brand-ink);
  border-radius: 4px;
  padding: 36px 32px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 360px;
}
.service-card.cast-red    { box-shadow: 10px 10px 0 0 var(--brand-red); }
.service-card.cast-ink    { box-shadow: 10px 10px 0 0 var(--brand-ink); }
.service-card.cast-sky    { box-shadow: 10px 10px 0 0 var(--brand-sky-deep); }

.service-card .sv-num {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: .14em;
  color: var(--brand-red);
  margin-bottom: 12px;
}
.service-card.cast-ink .sv-num { color: var(--brand-ink); }
.service-card.cast-sky .sv-num { color: var(--brand-sky-deep); }

.service-card .sv-icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border: 1.5px solid var(--brand-ink);
  background: #fff;
  border-radius: 4px;
  margin-bottom: 22px;
}
.service-card .sv-icon svg { width: 30px; height: 30px; color: var(--brand-ink); }
.service-card.cast-red .sv-icon { border-color: var(--brand-red); }
.service-card.cast-red .sv-icon svg { color: var(--brand-red); }
.service-card.cast-sky .sv-icon { border-color: var(--brand-sky-deep); }
.service-card.cast-sky .sv-icon svg { color: var(--brand-sky-deep); }

.service-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -.015em;
  color: var(--brand-ink);
  margin: 0 0 18px;
}
.service-card p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg2);
  margin: 0 0 16px;
}
.service-card p strong { color: var(--brand-ink); }
.service-card .sv-tags {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1.5px solid var(--brand-ink);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.service-card .sv-tag {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-ink);
  background: #fff;
  border: 1.5px solid var(--brand-ink);
  padding: 5px 10px;
  border-radius: 2px;
}

/* -------- PROJETS (3 examples) -------- */
.projets {
  padding: 120px 0;
  background: var(--brand-paper);
}
.projets-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 56px;
}
.projets-intro .h2 { font-size: clamp(34px, 3.8vw, 50px); margin: 0; }
.projets-intro .lead { margin: 0; }

.projets-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.projet-card {
  background: #fff;
  border: 2px solid var(--brand-ink);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}
.projet-card.cast-red { box-shadow: 10px 10px 0 0 var(--brand-red); }
.projet-card.cast-ink { box-shadow: 10px 10px 0 0 var(--brand-ink); }
.projet-card.cast-sky { box-shadow: 10px 10px 0 0 var(--brand-sky-deep); }

.projet-visual {
  height: 200px;
  background: var(--brand-paper);
  border-bottom: 1.5px solid var(--brand-ink);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.projet-card.cast-red .projet-visual { background: var(--brand-red); }
.projet-card.cast-ink .projet-visual { background: var(--brand-ink); }
.projet-card.cast-sky .projet-visual { background: var(--brand-sky); }
.projet-card.cast-paper .projet-visual { background: var(--brand-ink); }
.projet-card.cast-paper { box-shadow: 10px 10px 0 0 var(--neutral-300); }

.projet-visual svg {
  width: 64px; height: 64px;
  color: #fff;
  z-index: 2;
}
.projet-card.cast-sky .projet-visual svg { color: var(--brand-ink); }

/* Decorative grid lines on visual */
.projet-visual::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: .8;
}
.projet-card.cast-sky .projet-visual::before {
  background-image:
    linear-gradient(rgba(0,0,0,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.06) 1px, transparent 1px);
}

.projet-body {
  padding: 28px 30px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.projet-body .pj-tag {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-red);
  margin-bottom: 10px;
}
.projet-card.cast-ink .pj-tag { color: var(--brand-ink); }
.projet-card.cast-sky .pj-tag { color: var(--brand-sky-deep); }
.projet-body h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.05;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--brand-ink);
  margin: 0 0 14px;
}
.projet-body p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg2);
  margin: 0 0 16px;
}
.projet-body p strong { color: var(--brand-ink); }
.projet-body .pj-result {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1.5px solid var(--brand-ink);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  color: var(--brand-ink);
}
.projet-body .pj-result em {
  font-style: normal;
  color: var(--brand-red);
}

/* -------- RESPONSIVE -------- */
@media (max-width: 1024px) {
  .services-grid,
  .projets-grid { grid-template-columns: 1fr; }
  .projets-intro { grid-template-columns: 1fr; gap: 24px; }
}


/* ===== FULL-BLEED (si la page n'utilise pas le modèle pleine largeur) ===== */
.oatfcc-site {
  width: 100%;
  max-width: 100%;
  text-align: left;
}
.oatfcc-site p { margin: 0 0 1em; }
.oatfcc-site ul, .oatfcc-site ol { list-style: none; margin: 0; padding: 0; }
.oatfcc-site a { text-decoration: none; }