/* ==========================================================================
   OUTCAST FRANCE · Design System digital v1
   Source : Outcast_Brand_Guidelines_Slide_Library.pdf (structure, typo, formes)
            + thisisoutcast.fr (couleurs, gradients, énergie)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* --- Couleurs de marque (PDF slide 5 « Palette de couleurs ») --- */
  --navy:            #241A5E;  /* dominante, 60-70 % du poids visuel      */
  --navy-deep:       #1E224F;  /* fonds très sombres, footer               */
  --violet:          #312D89;  /* site actuel : énergie, gradients        */
  --violet-deep:     #271087;  /* site actuel : butée basse du gradient   */
  --orange:          #E33B00;  /* accent : CTA, highlights, logo          */
  --orange-hot:      #FF5A1F;  /* hover uniquement                         */
  --gold:            #C9A876;  /* accent secondaire : eyebrows, numéros   */
  --ivory:           #F1EFEC;  /* fond des slides / sections de contenu    */
  --peach:           #E2CDC8;  /* tinte de soutien : tableaux, alternance */
  --body:            #463D75;  /* texte de corps sur fond clair            */

  /* --- Tints navy (extraits des slides) --- */
  --navy-95:         #342A72;
  --navy-80:         #463D75;
  --navy-55:         #8A84A8;
  --navy-35:         #B8B3D6;
  --navy-25:         #C7C2E0;
  --navy-14:         #D5D0E4;
  --navy-08:         #E4E1EE;
  --navy-05:         #E7E4F0;

  --white:           #FFFFFF;

  /* --- Rôles sémantiques --- */
  --bg:              var(--ivory);
  --bg-alt:          var(--white);
  --bg-dark:         var(--navy);
  --ink:             var(--navy);
  --ink-soft:        var(--body);
  --ink-mute:        var(--navy-55);
  --ink-on-dark:     var(--white);
  --ink-on-dark-soft:#C7C2E0;
  --rule:            rgba(36, 26, 94, 0.12);
  --rule-on-dark:    rgba(255, 255, 255, 0.14);

  /* --- Gradients (identité site actuel, conservée) --- */
  --grad-authority:  linear-gradient(135deg, #241A5E 0%, #312D89 46%, #271087 100%);
  --grad-warm:       linear-gradient(160deg, #EFEFEF 43%, #ECBBAA 100%);
  --grad-accent:     linear-gradient(100deg, #E33B00 0%, #C9A876 100%);
  --grad-veil:       linear-gradient(180deg, rgba(30,34,79,.62) 0%, rgba(36,26,94,.80) 46%, rgba(30,34,79,.96) 100%);

  /* --- Typographie : une seule famille, Inter (PDF slide 6) --- */
  --font: "Inter", "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Brief §3 : titres réduits, hiérarchie plus élégante et moins envahissante.
     Le min() garde un garde-fou mobile (un mot long comme Confidentialite
     déborderait la colonne à taille fixe). */
  --fs-display: min(54px, 6.6vw);                /* hero                      */
  --fs-h1:      min(46px, 6vw);                  /* titre de page             */
  --fs-h2:      clamp(2rem, 3.9vw, 3.5rem);      /* titre de section          */
  --fs-h3:      clamp(1.35rem, 1.9vw, 1.75rem);  /* titre de bloc             */
  --fs-h4:      1.0625rem;
  --fs-lede:    clamp(1.0625rem, 1.45vw, 1.375rem);
  --fs-body:    1rem;
  --fs-small:   0.9375rem;
  --fs-caption: 0.8125rem;
  --fs-eyebrow: 0.75rem;
  /* Update §5 : chiffres ramenés au niveau des grands titres de section,
     voire légèrement en dessous. Ils restent impactants sans dominer. */
  --fs-figure:  clamp(2.5rem, 4vw, 3.25rem);     /* chiffres clés             */

  --lh-tight:   0.94;
  --lh-title:   1.06;
  --lh-body:    1.68;

  --tr-display: -0.038em;
  --tr-title:   -0.028em;
  --tr-eyebrow: 0.2em;

  /* --- Espacement --- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px; --s-11: 160px; --s-12: 200px;

  --section-y: clamp(72px, 9vw, 150px);
  --gutter:    clamp(20px, 4.2vw, 64px);
  --maxw:      1320px;
  --maxw-text: 68ch;

  /* --- Formes (PDF slide 7 : rectangles arrondis, jamais d'organique) --- */
  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  28px;

  /* Ratio des portraits : 4/5, aligné sur le portrait éditorial fourni
     (assets/img/yana-rogers.jpg, 892×1115). */
  --portrait-ratio: 4 / 5;

  --shadow-card: 0 1px 2px rgba(36,26,94,.05), 0 12px 32px -18px rgba(36,26,94,.28);
  --shadow-lift: 0 2px 6px rgba(36,26,94,.07), 0 28px 56px -24px rgba(36,26,94,.36);

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .45s;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "cv05" 1;
}
img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, h4, h5, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 2px; }

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 940px; }
.section { padding-block: var(--section-y); position: relative; }
.section--ivory { background: var(--ivory); }
.section--white { background: var(--white); }
.section--navy  { background: var(--navy); color: var(--ink-on-dark); }
.section--grad  { background: var(--grad-authority); color: var(--ink-on-dark); }
.section--navy .lede, .section--grad .lede, .cta-band .lede { color: var(--ink-on-dark-soft); }

.grid { display: grid; gap: var(--s-6); }
@media (min-width: 860px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  /* Colonnes asymétriques : rythme éditorial du PDF */
  .grid--asym { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); }
  .grid--asym-r { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 96px); }
}

/* --------------------------------------------------------------------------
   4. TYPOGRAPHIE
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-size: var(--fs-eyebrow); font-style: italic; font-weight: 500;
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--gold); margin-bottom: var(--s-5);
}
.eyebrow::before {
  content: ""; width: 28px; height: 2px; background: var(--orange); flex: none;
}
.eyebrow--bare::before { display: none; }

.display {
  font-size: var(--fs-display); font-weight: 700;
  line-height: var(--lh-tight); letter-spacing: var(--tr-display);
  color: var(--ink);
}
.h1 { font-size: var(--fs-h1); font-weight: 700; line-height: var(--lh-title); letter-spacing: var(--tr-title); color: var(--ink); }
.h2 { font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-title); letter-spacing: var(--tr-title); color: var(--ink); }
.h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; letter-spacing: -0.018em; color: var(--ink); }
.h4 { font-size: var(--fs-h4); font-weight: 600; line-height: 1.4; color: var(--ink); }
.section--navy .h1, .section--navy .h2, .section--navy .h3, .section--navy .h4,
.section--grad .h1, .section--grad .h2, .section--grad .h3, .section--grad .h4,
.cta-band .h1, .cta-band .h2, .cta-band .h3, .cta-band .h4,
.page-hero .h2, .page-hero .h3,
.on-dark .h1, .on-dark .h2, .on-dark .h3, .on-dark .h4 { color: var(--white); }

/* Filet orange court sous les titres de rupture (PDF slide 7) */
.rule-accent { display: block; width: 56px; height: 3px; background: var(--orange); margin-top: var(--s-5); border-radius: 2px; }

.lede { font-size: var(--fs-lede); line-height: 1.55; color: var(--ink-soft); max-width: 62ch; font-weight: 400; }
.small { font-size: var(--fs-small); }
.caption { font-size: var(--fs-caption); color: var(--ink-mute); letter-spacing: .01em; }
.mute { color: var(--ink-mute); }
.accent { color: var(--orange); }
.gold { color: var(--gold); }

.prose p { margin-bottom: 1.25em; max-width: var(--maxw-text); }
.prose p:last-child { margin-bottom: 0; }

/* Liste à puces rondes orange : jamais de tiret ni d'astérisque (PDF slide 7) */
.bullets li { position: relative; padding-left: 26px; margin-bottom: var(--s-3); }
.bullets li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--orange);
}

/* --------------------------------------------------------------------------
   5. BOUTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: 15px 26px; border-radius: var(--r-sm);
  font-size: var(--fs-small); font-weight: 600; letter-spacing: -0.005em;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn__arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--primary { background: var(--orange); color: var(--white); }
.btn--primary:hover { background: var(--orange-hot); }
.btn--ghost { border: 1px solid var(--rule); color: var(--ink); }
.btn--ghost:hover { border-color: var(--navy); background: var(--navy); color: var(--white); }
.btn--ghost-light { border: 1px solid var(--rule-on-dark); color: var(--white); }
.btn--ghost-light:hover { background: var(--white); color: var(--navy); border-color: var(--white); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-small); font-weight: 600; color: var(--orange);
}
.link-arrow svg { transition: transform var(--dur) var(--ease); }
.link-arrow:hover svg { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   6. HEADER
   -------------------------------------------------------------------------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              backdrop-filter var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.header.is-stuck {
  background: rgba(36, 26, 94, .88);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--rule-on-dark);
}
.header__inner { display: flex; align-items: center; gap: var(--s-6); min-height: 76px; }

/* Wordmark officiel. Le PNG est orange de marque, jamais recoloré (PDF slide 4).
   Marge de protection ≥ hauteur de la lettre O : d'où le padding-right. */
.header__logo { display: inline-flex; align-items: center; gap: 11px; padding-right: 12px; }
.header__logo img { height: 21px; width: auto; }
.header__logo span {
  font-weight: 500; font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--navy-25); padding-left: 11px; border-left: 1px solid var(--rule-on-dark);
  line-height: 1;
}
.footer .header__logo img { height: 24px; }
.footer .header__logo span { color: var(--navy-55); }
.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(14px, 2.1vw, 30px); }
.nav a { font-size: var(--fs-small); color: rgba(255,255,255,.82); transition: color .25s var(--ease); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--white); }
.nav .btn { padding: 11px 20px; }
.lang { display: flex; gap: 6px; font-size: var(--fs-caption); color: rgba(255,255,255,.55); }
.lang a[aria-current="true"] { color: var(--white); font-weight: 600; }
.nav-toggle { display: none; margin-left: auto; color: var(--white); padding: 10px; }

@media (max-width: 1000px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 76px 0 auto 0; flex-direction: column; align-items: stretch;
    gap: 0; background: var(--navy); padding: var(--s-5) var(--gutter) var(--s-7);
    border-top: 1px solid var(--rule-on-dark);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
  }
  .nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav a { padding: 14px 0; font-size: 1.0625rem; border-bottom: 1px solid var(--rule-on-dark); }
  .nav .btn { margin-top: var(--s-5); justify-content: center; border-bottom: 0; }
  .lang { margin-top: var(--s-5); }
}

/* --------------------------------------------------------------------------
   7. HERO : la vidéo reste l'élément majeur (brief §3)
   -------------------------------------------------------------------------- */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; background: var(--navy); overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__veil { position: absolute; inset: 0; z-index: 1; background: var(--grad-veil); }
.hero__tint { position: absolute; inset: 0; z-index: 1; background: var(--grad-authority); opacity: .55; mix-blend-mode: multiply; }
.hero__inner { position: relative; z-index: 2; width: 100%; padding-top: clamp(120px, 20vh, 220px); padding-bottom: 0; }
.hero__lockup { max-width: 24ch; }
.hero .display { color: var(--white); }
/* Ligne machine à écrire, sous le titre. min-height réservée sur une ligne pour
   que le reste du hero ne remonte pas quand la chaîne est en cours d'effacement. */
.hero__typed {
  margin-top: 0;
  /* Même taille et même graisse que le H1 : la ligne animée se lit comme la
     suite du titre. min() identique à --fs-h1 pour le garde-fou mobile. */
  font-size: min(80px, 10vw);
  font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--tr-display);
  color: var(--white);
  min-height: 1em;
}
/* Sous 900 px la ligne passe sur deux lignes : on réserve la hauteur, sinon
   tout le hero remonte et redescend à chaque effacement. */
@media (max-width: 899px) { .hero__typed { min-height: 2em; } }
.hero__typed-cursor {
  display: inline-block; margin-left: 2px; color: var(--orange); font-weight: 400;
  animation: caret 1s step-end infinite;
}
@keyframes caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
/* Sans mouvement : curseur fixe, texte figé sur la dernière proposition. */
@media (prefers-reduced-motion: reduce) {
  .hero__typed-cursor { animation: none; }
}

.hero__sub {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3) var(--s-5);
  margin-top: var(--s-6); font-size: clamp(1.125rem, 2.1vw, 1.75rem);
  font-weight: 600; letter-spacing: -0.02em; color: var(--white);
}
.hero__sub em { font-style: normal; color: var(--orange); }
.hero__lede { margin-top: var(--s-5); color: rgba(255,255,255,.78); max-width: 54ch; font-size: var(--fs-lede); line-height: 1.55; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-7); }

/* Triade d'autorité, ancrée en bas du hero */
.triad {
  position: relative; z-index: 2; margin-top: clamp(48px, 7vh, 96px);
  border-top: 1px solid var(--rule-on-dark);
}
.triad__grid { display: grid; }
@media (min-width: 800px) { .triad__grid { grid-template-columns: repeat(3, 1fr); } }
.triad__item { padding: var(--s-6) 0 var(--s-7); position: relative; }
@media (min-width: 800px) {
  .triad__item { padding: var(--s-6) clamp(20px, 3vw, 44px) var(--s-8); }
  .triad__item:first-child { padding-left: 0; }
  .triad__item + .triad__item { border-left: 1px solid var(--rule-on-dark); }
}
@media (max-width: 799px) { .triad__item + .triad__item { border-top: 1px solid var(--rule-on-dark); } }
.triad__num { font-size: var(--fs-caption); font-weight: 600; letter-spacing: .18em; color: var(--gold); }
.triad__title { margin-top: var(--s-3); font-size: 1.125rem; font-weight: 600; color: var(--white); letter-spacing: -0.015em; }
.triad__text { margin-top: 6px; font-size: var(--fs-small); color: rgba(255,255,255,.62); line-height: 1.5; }

.scroll-hint { position: absolute; right: var(--gutter); bottom: var(--s-6); z-index: 3; font-size: var(--fs-caption); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.45); writing-mode: vertical-rl; }
@media (max-width: 1000px) { .scroll-hint { display: none; } }

/* --------------------------------------------------------------------------
   8. RÉFÉRENCES : grille discrète, la preuve pas le décor (brief §4)
   -------------------------------------------------------------------------- */
.refs__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-6); margin-bottom: var(--s-8); }
.refs__group + .refs__group { margin-top: var(--s-8); }
.refs__label {
  display: flex; align-items: center; gap: var(--s-4);
  font-size: var(--fs-caption); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: var(--s-6);
}
.refs__label::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
/* --- Bandeaux défilants : une ligne par secteur --------------------------- */
.refs__rows { border-top: 1px solid var(--rule); }
.refs__row {
  display: grid; gap: var(--s-4);
  padding-block: clamp(20px, 2.4vw, 30px);
  border-bottom: 1px solid var(--rule);
  align-items: center;
}
@media (min-width: 900px) {
  .refs__row { grid-template-columns: 250px minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); }
}
.refs__row-label {
  font-size: var(--fs-caption); font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-mute); line-height: 1.4;
}
.section--navy .refs__row-label { color: var(--gold); }

/* Piste infinie : deux groupes identiques, translation de -50 %.
   Le second groupe est aria-hidden pour ne pas doubler les noms de marque. */
.marquee {
  overflow: hidden; min-width: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.marquee__track {
  display: flex; width: max-content;
  animation: marquee var(--marquee-duration, 42s) linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee__group {
  display: flex; align-items: center; flex: none;
  gap: clamp(32px, 4vw, 64px); padding-right: clamp(32px, 4vw, 64px);
}
@keyframes marquee { to { transform: translateX(-50%); } }

.marquee__group img {
  height: 28px; width: auto; max-width: 130px; object-fit: contain; flex: none;
  filter: invert(1) grayscale(1);
  opacity: .58;
  transition: opacity var(--dur) var(--ease);
}
.marquee__group li:hover img { opacity: 1; }
.section--navy .marquee__group img { filter: none; opacity: .55; }
.section--navy .marquee__group li:hover img { opacity: 1; }

/* Mouvement désactivé : la piste redevient une grille lisible et complète. */
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__track { animation: none; width: 100%; }
  .marquee__group { flex-wrap: wrap; gap: clamp(20px, 3vw, 40px); padding-right: 0; }
  .marquee__group[aria-hidden="true"] { display: none; }
}

/* --------------------------------------------------------------------------
   9. MANIFESTE : vision (brief §5)
   -------------------------------------------------------------------------- */
.manifesto { position: relative; }
.manifesto__statement {
  font-size: clamp(1.9rem, 4.4vw, 3.75rem); font-weight: 700;
  line-height: 1.08; letter-spacing: var(--tr-title); color: var(--white);
  max-width: 30ch;
}
.manifesto__statement em { font-style: normal; color: var(--orange); }
.manifesto__body { margin-top: clamp(32px, 5vw, 64px); display: grid; gap: var(--s-6); }
@media (min-width: 860px) { .manifesto__body { grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(32px, 5vw, 80px); } }
.manifesto__para { font-size: clamp(1rem, 1.3vw, 1.1875rem); line-height: 1.62; color: rgba(255,255,255,.76); border-top: 1px solid var(--rule-on-dark); padding-top: var(--s-5); }
.manifesto__para strong { color: var(--white); font-weight: 600; }

/* --------------------------------------------------------------------------
   10. CHIFFRES / PREUVE (brief §6)
   -------------------------------------------------------------------------- */
.proof { display: grid; gap: var(--s-7); }
@media (min-width: 800px) { .proof { grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 56px); } }
.proof__item { border-top: 2px solid var(--navy); padding-top: var(--s-5); }
.section--navy .proof__item, .section--grad .proof__item { border-top-color: var(--orange); }
.proof__num {
  font-size: var(--fs-figure); font-weight: 700; line-height: .86;
  letter-spacing: -0.05em; color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.section--navy .proof__num, .section--grad .proof__num { color: var(--white); }
.proof__label { margin-top: var(--s-4); font-size: var(--fs-small); line-height: 1.45; color: var(--ink-mute); max-width: 24ch; }
.section--navy .proof__label, .section--grad .proof__label { color: var(--ink-on-dark-soft); }
.proof__note { margin-top: var(--s-8); font-size: var(--fs-caption); color: var(--ink-mute); }

/* --------------------------------------------------------------------------
   11. EXPERTISES : section signature (brief §8)
   -------------------------------------------------------------------------- */
.xp { display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
@media (min-width: 940px) { .xp { grid-template-columns: repeat(3, 1fr); } }
.xp__card {
  background: var(--ivory); padding: clamp(28px, 3.2vw, 48px);
  display: flex; flex-direction: column; min-height: clamp(400px, 46vw, 560px);
  position: relative; overflow: hidden;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.xp__card::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--grad-authority); opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.xp__card > * { position: relative; z-index: 1; }
.xp__num {
  font-size: clamp(2.75rem, 4.6vw, 4.25rem); font-weight: 700; line-height: 1;
  letter-spacing: -0.045em; color: var(--gold);
  transition: color var(--dur) var(--ease);
}
.xp__title { margin-top: var(--s-6); font-size: clamp(1.3rem, 1.75vw, 1.6rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.022em; color: var(--navy); transition: color var(--dur) var(--ease); }
.xp__what { margin-top: var(--s-5); font-size: var(--fs-small); line-height: 1.6; color: var(--ink-soft); transition: color var(--dur) var(--ease); }
.xp__meta { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--rule); display: grid; gap: var(--s-4); transition: border-color var(--dur) var(--ease); }
.xp__meta dt { font-size: var(--fs-caption); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-mute); transition: color var(--dur) var(--ease); }
.xp__meta dd { margin: 4px 0 0; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-soft); transition: color var(--dur) var(--ease); }
.xp__link { margin-top: auto; padding-top: var(--s-6); }

.xp__card:hover, .xp__card:focus-within { background: var(--navy); }
.xp__card:hover::before, .xp__card:focus-within::before { opacity: 1; }
.xp__card:hover .xp__title, .xp__card:focus-within .xp__title { color: var(--white); }
.xp__card:hover .xp__what, .xp__card:hover .xp__meta dd,
.xp__card:focus-within .xp__what, .xp__card:focus-within .xp__meta dd { color: rgba(255,255,255,.8); }
.xp__card:hover .xp__meta, .xp__card:focus-within .xp__meta { border-top-color: var(--rule-on-dark); }
.xp__card:hover .xp__meta dt, .xp__card:focus-within .xp__meta dt { color: var(--gold); }
.xp__card:hover .xp__num, .xp__card:focus-within .xp__num { color: var(--orange); }

/* --------------------------------------------------------------------------
   12. CARTES / ARTICLES
   -------------------------------------------------------------------------- */
.card {
  background: var(--white); border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column; box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.card__media { aspect-ratio: 16 / 10; background: var(--grad-authority); position: relative; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.card:hover .card__media img { transform: scale(1.035); }
.card__body { padding: var(--s-6); display: flex; flex-direction: column; flex: 1; }
.card__title { font-size: 1.1875rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.018em; color: var(--navy); }
.card__excerpt { margin-top: var(--s-3); font-size: var(--fs-small); line-height: 1.55; color: var(--ink-soft); }
.card__foot { margin-top: auto; padding-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; font-size: var(--fs-caption); color: var(--ink-mute); }

.tag {
  display: inline-block; padding: 5px 11px; border-radius: 999px;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  background: var(--navy-08); color: var(--navy-80);
}
.tag--accent { background: rgba(227,59,0,.1); color: var(--orange); }
.tag--dark { background: rgba(255,255,255,.12); color: var(--white); }

/* Article mis en avant */
.featured { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 940px) { .featured { grid-template-columns: minmax(0,6fr) minmax(0,5fr); gap: clamp(40px, 5vw, 88px); } }
.featured__media { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 3; background: var(--grad-authority); }
.featured__media img { width: 100%; height: 100%; object-fit: cover; }
.featured__title { font-size: clamp(1.75rem, 3.1vw, 2.75rem); font-weight: 700; line-height: 1.14; letter-spacing: var(--tr-title); color: var(--navy); margin-top: var(--s-5); }
.featured__meta { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; margin-top: var(--s-5); font-size: var(--fs-caption); color: var(--ink-mute); }

/* --------------------------------------------------------------------------
   13. THEY TALK ABOUT US (brief §9)
   -------------------------------------------------------------------------- */
.press { display: grid; gap: 0; border-top: 1px solid var(--rule-on-dark); }
.press__row {
  display: grid; gap: var(--s-3) var(--s-5); padding: clamp(20px, 2.6vw, 32px) 0;
  border-bottom: 1px solid var(--rule-on-dark); align-items: baseline;
  transition: background var(--dur) var(--ease), padding-inline var(--dur) var(--ease);
}
@media (min-width: 860px) {
  .press__row { grid-template-columns: 110px 150px minmax(0,1fr) 130px; align-items: center; }
  .press__row:hover { background: rgba(255,255,255,.045); padding-inline: var(--s-5); }
}
.press__date { font-size: var(--fs-caption); color: var(--gold); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.press__outlet { font-size: var(--fs-small); font-weight: 600; color: var(--white); }
.press__title { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.35; color: rgba(255,255,255,.86); letter-spacing: -0.012em; }
.press__type { font-size: var(--fs-caption); color: rgba(255,255,255,.5); letter-spacing: .1em; text-transform: uppercase; }
@media (min-width: 860px) { .press__type { text-align: right; } }

/* --------------------------------------------------------------------------
   14. TÉMOIGNAGES (brief §7)
   -------------------------------------------------------------------------- */
.voices { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .voices { grid-template-columns: repeat(2, 1fr); gap: var(--s-7); } }
.voice {
  background: var(--white); border-radius: var(--r-lg); padding: clamp(28px, 3vw, 44px);
  display: flex; flex-direction: column; box-shadow: var(--shadow-card);
  border-top: 3px solid var(--orange);
}
.voice__quote { font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.5; letter-spacing: -0.015em; color: var(--navy); font-weight: 500; }
.voice__quote::before { content: "\201C"; color: var(--gold); font-size: 2.4em; line-height: 0; vertical-align: -0.32em; margin-right: 4px; }
.voice__foot { margin-top: auto; padding-top: var(--s-6); display: flex; align-items: center; gap: var(--s-4); }
.voice__avatar { width: 48px; height: 48px; border-radius: var(--r-sm); object-fit: cover; background: var(--navy-08); flex: none; }
.voice__name { font-size: var(--fs-small); font-weight: 600; color: var(--navy); }
.voice__role { font-size: var(--fs-caption); color: var(--ink-mute); }
.voice__link { margin-left: auto; }

/* --------------------------------------------------------------------------
   15. FONDATRICE (brief §10)
   -------------------------------------------------------------------------- */
.founder { display: grid; gap: clamp(32px, 5vw, 80px); align-items: center; }
@media (min-width: 940px) { .founder { grid-template-columns: minmax(0,5fr) minmax(0,7fr); } }
/* Ratio 1/1 (cadre carré du deck, slide 8) : l'asset source yana_720.png est un
   carré 720x720 avec une mention incrustée en bas. Tout autre ratio la rogne.
   À repasser en 4/5 le jour où un portrait éditorial propre sera fourni. */
.founder__photo { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: var(--portrait-ratio); background: var(--navy-95); position: relative; }
.founder__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.founder__quote {
  font-size: clamp(1.375rem, 2.6vw, 2.25rem); font-weight: 600;
  line-height: 1.26; letter-spacing: -0.026em; color: var(--white);
}
.founder__quote p + p { margin-top: .7em; }
.founder__quote strong { color: var(--orange); font-weight: 600; }
.founder__sign { margin-top: clamp(28px, 3.5vw, 48px); padding-top: var(--s-5); border-top: 1px solid var(--rule-on-dark); }
.founder__name { font-size: 1.0625rem; font-weight: 600; color: var(--white); }
.founder__role { font-size: var(--fs-small); color: var(--ink-on-dark-soft); margin-top: 3px; }

/* --------------------------------------------------------------------------
   16. FILTRES INSIGHTS
   -------------------------------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-8); }
.filter {
  padding: 9px 17px; border-radius: 999px; border: 1px solid var(--rule);
  font-size: var(--fs-caption); font-weight: 600; letter-spacing: .02em; color: var(--ink-soft);
  transition: all .3s var(--ease);
}
.filter:hover { border-color: var(--navy-55); color: var(--navy); }
.filter[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }

/* --------------------------------------------------------------------------
   17. ARTICLE
   -------------------------------------------------------------------------- */
.article { --maxw-text: 70ch; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--fs-caption); color: var(--ink-mute); }
.breadcrumb a:hover { color: var(--orange); }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 8px; color: var(--navy-35); }
.breadcrumb li { display: inline-flex; align-items: center; }

.article__layout { display: grid; gap: clamp(32px, 5vw, 72px); }
/* Sans ce min-width: 0, les enfants de grille gardent min-width: auto et ne
   peuvent pas descendre sous la largeur mini de leur contenu. Un tableau à
   min-width: 520px poussait alors toute la page en scroll horizontal sur mobile,
   malgré l'overflow-x: auto de .table-scroll. */
.article__layout > * { min-width: 0; }
@media (min-width: 1040px) { .article__layout { grid-template-columns: 232px minmax(0, 1fr); } }
.toc { position: sticky; top: 108px; align-self: start; font-size: var(--fs-caption); }
@media (max-width: 1039px) { .toc { position: static; border-bottom: 1px solid var(--rule); padding-bottom: var(--s-5); } }
.toc__title { font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: var(--s-4); }
.toc a { display: block; padding: 7px 0 7px 14px; border-left: 2px solid var(--rule); color: var(--ink-soft); line-height: 1.4; transition: all .25s var(--ease); }
.toc a:hover, .toc a.is-active { border-left-color: var(--orange); color: var(--navy); font-weight: 600; }

.article__body { font-size: 1.0625rem; line-height: 1.75; color: var(--ink-soft); }
.article__body > * { max-width: var(--maxw-text); }
.article__body p { margin-bottom: 1.35em; }
.article__body h2 { font-size: clamp(1.6rem, 2.5vw, 2.125rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.024em; color: var(--navy); margin: 2.2em 0 .7em; }
.article__body h3 { font-size: clamp(1.1875rem, 1.6vw, 1.375rem); font-weight: 600; line-height: 1.3; color: var(--navy); margin: 1.9em 0 .55em; }
.article__body a:not(.btn):not(.link-arrow) { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.article__body strong { color: var(--navy); font-weight: 600; }
.article__body ul { margin-bottom: 1.35em; }
.article__body figure { margin: 2.2em 0; max-width: 100%; }
.article__body figcaption { margin-top: var(--s-3); font-size: var(--fs-caption); color: var(--ink-mute); }

.chapo { font-size: clamp(1.1875rem, 1.7vw, 1.4375rem); line-height: 1.55; color: var(--navy); font-weight: 500; letter-spacing: -0.014em; }

.takeaways { background: var(--navy); color: var(--white); border-radius: var(--r-lg); padding: clamp(24px, 2.8vw, 40px); margin: var(--s-7) 0; max-width: 100%; }
.takeaways h2 { font-size: var(--fs-caption) !important; font-weight: 700 !important; letter-spacing: .16em; text-transform: uppercase; color: var(--gold) !important; margin: 0 0 var(--s-5) !important; }
.takeaways li { position: relative; padding-left: 26px; margin-bottom: var(--s-4); font-size: var(--fs-small); line-height: 1.55; color: rgba(255,255,255,.86); }
.takeaways li:last-child { margin-bottom: 0; }
.takeaways li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
/* Sur fond navy, strong doit repasser en blanc, sinon il hérite du navy. */
.takeaways strong, .takeaways a { color: var(--white); }

.pullquote { margin: 2.4em 0; padding-left: clamp(20px, 2.4vw, 32px); border-left: 3px solid var(--orange); font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 600; line-height: 1.32; letter-spacing: -0.022em; color: var(--navy); }

.callout { background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-md); padding: clamp(20px, 2.4vw, 32px); margin: 2.2em 0; }
.callout__label { font-size: var(--fs-caption); font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--orange); margin-bottom: var(--s-3); }

.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { padding: var(--s-5) 0; font-size: 1.0625rem; font-weight: 600; color: var(--navy); cursor: pointer; list-style: none; display: flex; gap: var(--s-4); align-items: flex-start; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; font-size: 1.375rem; font-weight: 400; color: var(--orange); line-height: 1; flex: none; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__answer { padding-bottom: var(--s-5); font-size: var(--fs-small); line-height: 1.65; }

.author-box { display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: flex-start; background: var(--white); border-radius: var(--r-lg); padding: clamp(24px, 2.6vw, 36px); border: 1px solid var(--rule); }
.author-box img { width: 76px; height: 76px; border-radius: var(--r-md); object-fit: cover; flex: none; }

.sources { font-size: var(--fs-small); }
.sources li { padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
.sources li:last-child { border-bottom: 0; }

/* --------------------------------------------------------------------------
   17 bis. PAGES LÉGALES
   -------------------------------------------------------------------------- */
/* Fiche d'identité de l'éditeur : paires libellé / valeur, alignées. */
.legal-facts { display: grid; gap: 0; border-top: 1px solid var(--rule); max-width: 100%; }
.legal-facts > div {
  display: grid; gap: 2px var(--s-5); padding: var(--s-4) 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 640px) { .legal-facts > div { grid-template-columns: 220px minmax(0, 1fr); align-items: baseline; } }
.legal-facts dt {
  font-size: var(--fs-caption); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-mute);
}
.legal-facts dd { margin: 0; font-size: var(--fs-body); color: var(--ink); line-height: 1.55; }

/* Tableaux : trait fin, alternance pêche très légère (PDF slide 5). */
.article__body .table-scroll { overflow-x: auto; margin: 2em 0; max-width: 100%; }
.article__body table {
  width: 100%; border-collapse: collapse; font-size: var(--fs-small);
  min-width: 520px;
}
.article__body th, .article__body td {
  text-align: left; vertical-align: top; padding: var(--s-4) var(--s-4);
  border-bottom: 1px solid var(--rule); line-height: 1.5;
}
.article__body th {
  font-size: var(--fs-caption); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-mute);
  border-bottom-width: 2px; border-bottom-color: var(--navy);
}
.article__body tbody tr:nth-child(even) { background: rgba(226, 205, 200, .22); }
.article__body td:first-child { font-weight: 600; color: var(--ink); white-space: nowrap; }
@media (max-width: 700px) { .article__body td:first-child { white-space: normal; } }

/* --------------------------------------------------------------------------
   18. PAGE AUTEUR
   -------------------------------------------------------------------------- */
.author-hero { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 900px) { .author-hero { grid-template-columns: minmax(0,4fr) minmax(0,6fr); } }
.author-hero__photo { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: var(--portrait-ratio); background: var(--navy-95); }
.author-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.expertise-chips { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* --- Grille équipe --------------------------------------------------------
   Les portraits sources sont des détourés PNG carrés 1200×1200 avec le nom et
   la fonction incrustés en bas (~75 % de la hauteur).
   `object-fit: cover` ne peut pas les retirer : sur une source carrée dans un
   cadre portrait, c'est la largeur qui est rognée, pas la hauteur. On zoome
   donc explicitement et on ancre en haut : la partie basse sort du cadre.
   --team-zoom: 139 % ⇒ seuls les 72 % supérieurs restent visibles. */
.team { display: grid; gap: var(--s-6); }
@media (min-width: 720px) { .team { grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 44px); } }
.team__card { display: flex; flex-direction: column; }
.team__photo {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: var(--r-lg); background: var(--navy-08);
}
.section--navy .team__photo, .section--grad .team__photo { background: rgba(255,255,255,.06); }
.team__photo img {
  position: absolute; top: 0; left: 50%;
  width: var(--team-zoom, 139%); height: auto; max-width: none;
  transform: translateX(-50%) scale(1);
  transform-origin: top center;
  transition: transform .8s var(--ease);
}
.team__card:hover .team__photo img { transform: translateX(-50%) scale(1.03); }
.team__name { margin-top: var(--s-5); font-size: 1.125rem; font-weight: 600; letter-spacing: -0.018em; color: var(--navy); }
.section--navy .team__name, .section--grad .team__name { color: var(--white); }
.team__role { margin-top: 4px; font-size: var(--fs-small); color: var(--ink-mute); }
.section--navy .team__role, .section--grad .team__role { color: var(--ink-on-dark-soft); }
.team__rule { display: block; width: 40px; height: 2px; background: var(--orange); margin-top: var(--s-4); border-radius: 2px; }

/* --------------------------------------------------------------------------
   19. CTA + FOOTER
   -------------------------------------------------------------------------- */
.cta-band { background: var(--grad-authority); color: var(--white); }
.cta-band__inner { display: grid; gap: var(--s-6); align-items: end; }
@media (min-width: 900px) { .cta-band__inner { grid-template-columns: minmax(0,1fr) auto; gap: var(--s-8); } }

.footer { background: var(--navy-deep); color: rgba(255,255,255,.62); padding-block: var(--s-9) var(--s-6); font-size: var(--fs-small); }
.footer__grid { display: grid; gap: var(--s-7); }
@media (min-width: 860px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--s-7); } }
.footer h4 { font-size: var(--fs-caption); letter-spacing: .15em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--s-5); font-weight: 600; }
.footer a:hover { color: var(--white); }
.footer li { margin-bottom: 10px; }
.footer__bottom { margin-top: var(--s-9); padding-top: var(--s-5); border-top: 1px solid var(--rule-on-dark); display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); justify-content: space-between; font-size: var(--fs-caption); }

/* --------------------------------------------------------------------------
   20. PAGE HEADER (pages intérieures)
   -------------------------------------------------------------------------- */
.page-hero { background: var(--grad-authority); color: var(--white); padding-top: clamp(140px, 16vh, 200px); padding-bottom: var(--section-y); position: relative; overflow: hidden; }
.page-hero::after {
  content: ""; position: absolute; right: -10%; top: -30%; width: 60%; aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%, rgba(227,59,0,.30), transparent 62%);
  pointer-events: none;
}
.page-hero .h1, .page-hero .display { color: var(--white); }
.page-hero .lede { color: rgba(255,255,255,.78); }
.page-hero > .wrap { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   21. UTILITAIRES + ANIMATION AU SCROLL
   -------------------------------------------------------------------------- */
.stack > * + * { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); } .mt-8 { margin-top: var(--s-8); }
.text-max { max-width: 62ch; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* L'état masqué n'est appliqué que si le JS a pu poser la classe `js` sur <html>.
   Sans JS, ou si le script échoue, tout le contenu reste visible et crawlable. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* Compteur de chiffres : évite le saut de largeur */
.proof__num[data-count] { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   22. AJOUTS v2 (brief « Mise à jour du site Outcast France »)
   -------------------------------------------------------------------------- */

/* Section clients compactée : bandeau unique, hauteur réduite (brief §5). */
.section--tight { padding-block: clamp(48px, 5.5vw, 88px); }
.h2--compact { font-size: clamp(1.75rem, 2.8vw, 2.5rem); }

/* Bandeau de logos agrandi : une seule piste pour les 25 marques. */
.marquee--lg .marquee__group { gap: clamp(40px, 5vw, 80px); padding-right: clamp(40px, 5vw, 80px); }
.marquee--lg .marquee__group img { --logo-box-w: 150px; --logo-box-h: 38px; opacity: .62; }
.marquee--lg .marquee__group li:hover img { opacity: 1; }

/* Carrousel équipe : défilement horizontal au doigt ou aux flèches.
   Sans JS, la piste reste scrollable nativement. */
.carousel { position: relative; }
.carousel__track {
  display: flex; gap: var(--s-6);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-bottom: var(--s-4);
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * {
  flex: 0 0 clamp(210px, 42vw, 260px);
  scroll-snap-align: start;
}
.carousel__nav { display: flex; gap: var(--s-3); margin-top: var(--s-6); }
.carousel__btn {
  width: 44px; height: 44px; border-radius: var(--r-sm);
  border: 1px solid var(--rule-on-dark); color: var(--white);
  display: grid; place-items: center;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.carousel__btn:hover { background: var(--white); color: var(--navy); border-color: var(--white); }
.carousel__btn[disabled] { opacity: .3; pointer-events: none; }
.section--ivory .carousel__btn, .section--white .carousel__btn { border-color: var(--rule); color: var(--navy); }
.section--ivory .carousel__btn:hover, .section--white .carousel__btn:hover { background: var(--navy); color: var(--white); }

/* Deux types de portraits cohabitent : un vrai portrait éditorial (Yana) et des
   détourés carrés avec nom incrusté (le zoom fait sortir l'incrustation du cadre). */
.team__photo--portrait img { position: static; width: 100%; height: 100%; object-fit: cover; transform: none; }
.team__photo--portrait { aspect-ratio: 1 / 1; }
.team__photo--missing {
  display: grid; place-items: center;
  border: 1px dashed var(--rule-on-dark);
}
.section--ivory .team__photo--missing, .section--white .team__photo--missing { border-color: var(--rule); }
.team__missing {
  font-size: var(--fs-caption); text-align: center; line-height: 1.4;
  color: var(--ink-mute); letter-spacing: .08em; text-transform: uppercase;
}

/* Cartouche de capture produit (Delve). */
.dashboard-frame {
  aspect-ratio: 16 / 10; border-radius: var(--r-lg);
  border: 1px dashed var(--rule-on-dark); background: rgba(255,255,255,.04);
  display: grid; place-items: center; padding: var(--s-6);
}
.dashboard-frame__label {
  font-size: var(--fs-caption); color: rgba(255,255,255,.55);
  letter-spacing: .1em; text-transform: uppercase; text-align: center;
}

/* Variantes sur fond sombre / clair de composants existants. */
.legal-facts--dark { border-top-color: var(--rule-on-dark); }
.legal-facts--dark > div { border-bottom-color: var(--rule-on-dark); }
.legal-facts--dark dt { color: var(--gold); }
.legal-facts--dark dd { color: var(--ink-on-dark-soft); }
.legal-facts--dark a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }

.press--light { border-top: 1px solid var(--rule); }
.press--light .press__row { border-bottom-color: var(--rule); }
.press--light .press__outlet { color: var(--navy); }
.press--light .press__title { color: var(--ink-soft); }
.press--light .press__type { color: var(--ink-mute); }
.press--light .press__date { color: var(--gold); }
@media (min-width: 860px) { .press--light .press__row:hover { background: rgba(36,26,94,.04); } }

/* Vignette podcast. */
.card__media--play { display: grid; place-items: center; }
.card__media--play span { font-size: 2.5rem; color: rgba(255,255,255,.85); }

/* --------------------------------------------------------------------------
   23. AJOUTS v3 (update « Mise à jour ThisIsOutcast.fr »)
   -------------------------------------------------------------------------- */

/* Hero : ligne 2 animée. Elle hérite de la taille du H1, la hauteur est
   réservée pour que le CTA ne remonte pas pendant l'effacement. */
.hero__lockup .hero__typed-text { display: inline; }
.hero__lockup .hero__typed-cursor {
  display: inline-block; margin-left: 3px; color: var(--orange); font-weight: 400;
  animation: caret 1.1s step-end infinite;
}
@media (prefers-reduced-motion: reduce) { .hero__lockup .hero__typed-cursor { animation: none; } }

/* §3 : le CTA remonte dans le Hero, plus d'air avant la rupture de section. */
.hero__inner { padding-bottom: clamp(56px, 9vh, 120px); }
.hero__cta { margin-top: var(--s-6); }

/* §6 : second lien discret vers Outcast AI sur la carte SEO & GEO. */
.xp__link { display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-start; }
.xp__cta { color: var(--ink-mute); }
.xp__card:hover .xp__cta, .xp__card:focus-within .xp__cta { color: var(--gold); }

/* §17 : cartes « Dans la presse » dans le feed. */
.card__media--press { display: grid; place-items: center; padding: var(--s-6); }
.card__media--press span {
  font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em;
  color: rgba(255,255,255,.9); text-align: center;
}
.card__media-todo {
  font-size: var(--fs-caption); color: rgba(255,255,255,.6); text-align: center;
  padding: var(--s-5); line-height: 1.4;
}

/* Pastille de lecture, partagée par le podcast et les témoignages vidéo. */
.play-badge {
  position: absolute; inset: auto auto 14px 14px;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--orange); color: var(--white);
  display: grid; place-items: center; font-size: .8rem; padding-left: 3px;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.card__media--play { position: relative; }
.card__media--play img { width: 100%; height: 100%; object-fit: cover; }
.card:hover .play-badge { transform: scale(1.08); background: var(--orange-hot); }

/* §20 : témoignages vidéo nettement agrandis. Deux colonnes larges sur desktop,
   le visage doit être lisible et le bouton de lecture identifiable. */
.testimonials { display: grid; gap: clamp(24px, 3vw, 48px); }
@media (min-width: 600px) { .testimonials { grid-template-columns: repeat(2, 1fr); } }
.testimonial { margin: 0; }
.testimonial__video {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 16 / 10; border-radius: var(--r-lg);
  background: var(--grad-authority); box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.testimonial__video:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.testimonial__video img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 25%;
  transition: transform .8s var(--ease);
}
.testimonial__video:hover img { transform: scale(1.03); }
.testimonial__video .play-badge {
  inset: auto auto 20px 20px; width: 58px; height: 58px; font-size: 1.05rem;
}
.testimonial__meta { display: grid; gap: 3px; margin-top: var(--s-5); }
.testimonial__name { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.018em; color: var(--navy); }
.testimonial__role { font-size: var(--fs-small); color: var(--ink-soft); }
.testimonial__org { font-size: var(--fs-caption); color: var(--ink-mute); }

/* Vignette du podcast « Portraits de femmes » (update §16).
   La source est un 16/9 de 1442x804 avec des sous-titres incrustés en bas et le
   logo de l'émission en haut à droite. Dans une vignette 16/10, `object-fit:
   cover` garderait toute la hauteur, donc les sous-titres. On zoome donc à 132 %
   et on ancre en haut à droite : les sous-titres sortent du cadre par le bas,
   le logo reste entier, le micro et le visage restent visibles. */
.card__media--podcast { overflow: hidden; }
.card__media--podcast img {
  position: absolute; top: 0; right: 0; left: auto;
  width: 132%; height: auto; max-width: none;
  transform: none;
}
.card:hover .card__media--podcast img { transform: scale(1.03); transform-origin: top right; }

/* --------------------------------------------------------------------------
   24. AJOUTS v4 (update « Mise à jour complète »)
   -------------------------------------------------------------------------- */

/* Marques dont le logo officiel n'a pas encore été fourni : le nom prend la
   place du logo, au même niveau et avec le même poids visuel que les autres. */
.logo-todo {
  display: inline-grid; place-items: center; height: 38px; padding: 0 18px;
  border: 1px dashed var(--rule); border-radius: var(--r-sm);
  font-size: 1rem; font-weight: 700; letter-spacing: -0.01em;
  color: var(--ink-mute); white-space: nowrap;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.marquee__group li:hover .logo-todo { color: var(--navy); border-color: var(--navy-55); }

/* Titre de territoire éditorial : The Outcast Thinking / The Outcast Talks. */
.territory-label {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-4);
  font-size: clamp(1.375rem, 2.2vw, 1.875rem); font-weight: 700;
  letter-spacing: -0.024em; color: var(--ink);
  padding-bottom: var(--s-4); border-bottom: 2px solid var(--orange);
}
.territory-label span {
  font-size: var(--fs-small); font-weight: 400; font-style: italic;
  letter-spacing: 0; color: var(--ink-mute);
}
.section--navy .territory-label, .section--grad .territory-label { color: var(--white); }
.section--navy .territory-label span, .section--grad .territory-label span { color: var(--ink-on-dark-soft); }

/* §6 : le portrait de Yana Rogers est traité comme les autres membres.
   Son fond réel ne peut pas être détouré ici, mais un mélange en luminosité
   sur le même bleu que les détourés harmonise la teinte et le cadre. */
.team__photo--portrait { background: var(--navy-95); }
.team__photo--portrait img { mix-blend-mode: luminosity; opacity: .92; }

/* Témoignage sans visuel fourni. */
.testimonial__video .card__media-todo {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: rgba(255,255,255,.6);
}

/* --------------------------------------------------------------------------
   25. AJOUTS v5 (update du 31 août 2026)
   -------------------------------------------------------------------------- */

/* Logos officiels des nouvelles références : sombres sur fond transparent.
   Ils ne passent donc pas par l'inversion appliquée aux PNG blancs
   historiques, sinon ils deviendraient blancs sur ivoire, donc invisibles.
   La hauteur est bornée pour qu'aucun logo ne domine les autres (§2). */
/* Boite commune a tous les logos du bandeau, quelle que soit leur origine.
   object-fit: contain preserve les proportions : un logo large est borne par la
   largeur, un logo carre par la hauteur, et tous occupent la meme emprise. */
.marquee__group img {
  width: var(--logo-box-w, 132px);
  height: var(--logo-box-h, 34px);
  object-fit: contain; object-position: center;
}
/* Les assets officiels recuperes sont sombres sur fond transparent : ils ne
   passent pas par l'inversion appliquee aux PNG blancs historiques. */
.marquee__group img.logo--dark { filter: grayscale(1); opacity: .55; }
.marquee__group li:hover img.logo--dark { opacity: 1; }
@media (max-width: 600px) { .marquee--lg .marquee__group img { --logo-box-w: 112px; --logo-box-h: 30px; } }
.section--navy .marquee__group img.logo--dark { filter: grayscale(1) invert(1); }

/* §6 : nouveau portrait de Yana Rogers, carré sur fond studio uni.
   Plus besoin du mélange en luminosité de la version précédente. */
.team__photo--studio { aspect-ratio: 1 / 1; background: var(--violet-deep); }

/* Portrait detoure fourni en PNG a fond transparent : le fond de la section
   passe a travers, aucun zoom n'est necessaire (pas de mention incrustee). */
.team__photo--detoure { background: transparent; }
.team__photo--detoure img {
  position: static; width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  max-width: none; transform: none; mix-blend-mode: normal;
}
.team__card:hover .team__photo--detoure img { transform: scale(1.03); }
.team__photo--studio img {
  position: static; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  max-width: none; transform: none; mix-blend-mode: normal;
}
.team__card:hover .team__photo--studio img { transform: scale(1.03); }

/* §10 : index presse. Hiérarchie titre > média > date, ligne entièrement
   cliquable, dans un container bleu. */
.press-index { border-top: 1px solid var(--rule-on-dark); }
.press-index__row {
  display: grid; gap: var(--s-2) var(--s-5);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  padding: clamp(18px, 2.2vw, 26px) 0;
  border-bottom: 1px solid var(--rule-on-dark);
  transition: background var(--dur) var(--ease), padding-inline var(--dur) var(--ease);
}
.press-index__title {
  grid-column: 1; font-size: clamp(1.0625rem, 1.55vw, 1.3125rem);
  font-weight: 600; line-height: 1.35; letter-spacing: -0.016em;
  color: var(--white);
}
.press-index__meta {
  grid-column: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  font-size: var(--fs-caption);
}
.press-index__outlet { color: var(--gold); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.press-index__sep { color: var(--navy-55); }
.press-index__date { color: rgba(255,255,255,.5); font-variant-numeric: tabular-nums; }
.press-index__go {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  width: 38px; height: 38px; flex: none; border-radius: var(--r-sm);
  border: 1px solid var(--rule-on-dark); color: rgba(255,255,255,.65);
  display: grid; place-items: center;
  transition: all var(--dur) var(--ease);
}
.press-index__row:hover { background: rgba(255,255,255,.05); }
.press-index__row:hover .press-index__go { background: var(--orange); border-color: var(--orange); color: var(--white); }
@media (min-width: 860px) { .press-index__row:hover { padding-inline: var(--s-5); } }

/* §14 : cards éditoriales de The Outcast Talks, grand visuel et vrai corps. */
.card--talk .card__media { aspect-ratio: 16 / 9; }
.card--talk .card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card--talk .card__title { font-size: clamp(1.1875rem, 1.7vw, 1.4375rem); }
.card--talk .card__excerpt + .card__excerpt { margin-top: var(--s-4); }
.card__cta { margin-top: var(--s-5); }
.card--talk .card__foot { border-top: 1px solid var(--rule); margin-top: var(--s-5); padding-top: var(--s-4); }
.card--talk .card__foot strong { color: var(--navy); font-weight: 600; }

/* Le visuel DIXIT est un 16/9 : il tient tel quel dans le cadre. */
.card__media--dixit img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: none; }

/* Témoignages : les deux visuels fournis ont des ratios différents (770x1114 et
   926x986). Un cadre commun 4/5 les harmonise sans les déformer. */
/* Les deux visuels fournis sont des captations verticales de ratios differents
   (926x986 et 770x1114). Un cadre commun 4/5 les harmonise sans les deformer.
   La grille est bornee et centree : passer de trois a deux temoignages ne doit
   pas les transformer en deux affiches pleine largeur. */
.testimonials { max-width: 880px; margin-inline: auto; }
.testimonial__video { aspect-ratio: 4 / 5; }
.testimonial__video img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.testimonial__badge {
  position: absolute; inset: auto auto 18px 18px;
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.92); color: var(--navy);
  box-shadow: var(--shadow-card);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.testimonial__video:hover .testimonial__badge { background: var(--orange); color: var(--white); }


/* --------------------------------------------------------------------------
   26. AJOUTS v6 (update finale)
   -------------------------------------------------------------------------- */

/* §2 : le titre de la section References etait colle a son paragraphe. */
.refs__intro { margin-top: clamp(20px, 2.4vw, 32px); }

/* §8 : hierarchie AI Visibility, puis AI Signal et Delve comme deux briques.
   Le numero et le type de brique rendent la subordination lisible d'un coup. */
.ai-branch__intro { font-size: var(--fs-small); color: var(--ink-on-dark-soft); }
.ai-branch dt { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ai-branch__num {
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: .08em;
  color: var(--orange); font-variant-numeric: tabular-nums;
}
.ai-branch__kind {
  font-size: var(--fs-caption); font-weight: 500; letter-spacing: .04em;
  color: var(--ink-on-dark-soft); text-transform: none;
}
.eyebrow .ai-branch__num { color: inherit; opacity: .7; margin-right: 4px; }

.ai-stack { list-style: none; display: grid; gap: var(--s-4); }
.ai-stack__item {
  display: flex; align-items: baseline; gap: 14px;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--white);
}
.ai-stack__num {
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: .08em;
  color: var(--orange); font-variant-numeric: tabular-nums;
}
.ai-stack__item strong { color: var(--navy); font-weight: 600; }
.ai-stack__kind { margin-left: 10px; font-size: var(--fs-caption); color: var(--ink-mute); }

/* §9 : le dashboard fourni remplace le cadre placeholder. */
.dashboard-frame--filled {
  margin: 0; padding: 0; border: 0; display: block; overflow: hidden;
  border-radius: var(--r-lg); background: var(--white);
  box-shadow: var(--shadow-card);
}
.dashboard-frame--filled img { display: block; width: 100%; height: auto; }

/* §15 : portraits de temoignage un cran plus petits, sans revenir aux
   miniatures. La carte reste centree sur l'equilibre portrait / nom / fonction. */
.testimonials { max-width: 720px; }
.testimonial__video { max-width: 300px; }


/* --------------------------------------------------------------------------
   27. PONT ELEMENTOR

   Elementor impose sa propre mise en page à ses conteneurs, par des variables
   CSS qu'il consomme lui-même, et enveloppe chaque widget dans un div
   positionné en relative. Trois choses du prototype en pâtissent :

     - .wrap perd son centrage et sa gouttière, le contenu colle au bord ;
     - les décors en position absolue se calent sur l'enveloppe du widget,
       de hauteur nulle, au lieu de la section : la vidéo du hero disparaît ;
     - les classes utilitaires atterrissent sur l'enveloppe et non sur
       l'élément, une taille de titre se cumulant alors avec la sienne.

   Ce pont rend la main au design system. Il ne touche que les éléments
   Elementor : le balisage direct du prototype n'est pas concerné.
   -------------------------------------------------------------------------- */

/* --- Enveloppes de widgets : transparentes pour la mise en page ------------
   display: contents retire l'enveloppe de l'arbre de rendu. Les enfants
   redeviennent enfants directs de la section, exactement comme au prototype :
   les décors absolus se calent de nouveau sur elle, et les enfants de grille
   retrouvent leur place. */
.e-con.hero > .elementor-widget,
.e-con.wrap.grid > .elementor-widget,
.e-con.wrap.cta-band__inner > .elementor-widget,
.e-con.grid > .elementor-widget { display: contents; }

/* --- Colonne de lecture ---------------------------------------------------- */
.e-con.wrap {
  --width: 100%;
  --margin-block-start: 0; --margin-block-end: 0;
  --margin-inline-start: auto; --margin-inline-end: auto;
  --padding-block-start: 0; --padding-block-end: 0;
  --padding-inline-start: var(--gutter); --padding-inline-end: var(--gutter);
}

/* --- Rythme vertical des sections ------------------------------------------ */
.e-con.section, .e-con.hero, .e-con.page-hero, .e-con.cta-band {
  --width: 100%;
  --margin-block-start: 0; --margin-block-end: 0;
  --padding-inline-start: 0; --padding-inline-end: 0;
}
.e-con.section, .e-con.cta-band {
  --padding-block-start: var(--section-y);
  --padding-block-end: var(--section-y);
}
.e-con.section--tight {
  --padding-block-start: clamp(48px, 5.5vw, 88px);
  --padding-block-end: clamp(48px, 5.5vw, 88px);
}
/* Elementor consomme --min-height sur ses conteneurs et ramene le hero a 0.
   On lui rend la hauteur d ecran du prototype. */
.e-con.hero { --padding-block-start: 0; --padding-block-end: 0; --min-height: 100svh; }
.e-con.page-hero {
  --padding-block-start: clamp(140px, 16vh, 200px);
  --padding-block-end: var(--section-y);
}

/* --- Débordement ----------------------------------------------------------
   Le prototype rogne volontairement certains décors : le halo de .page-hero
   déborde de 143 px à droite. Elementor forçant overflow: visible, ce halo
   provoquait un défilement horizontal sur toute la page. */
.e-con.hero, .e-con.page-hero, .e-con.marquee, .e-con.xp__card {
  --overflow: hidden;
  overflow: hidden;
}

/* --- Widgets natifs : l'élément interne hérite de son enveloppe ------------ */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor > *:first-child:last-child {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-transform: inherit;
  margin: 0;
}

/* Les enfants de grille doivent pouvoir se replier. */
.e-con > .elementor-widget { min-width: 0; }

/* Un logo défini dans WordPress ne doit pas s'échapper du gabarit d'en-tête. */
.header .header__logo img, .custom-logo-link img {
  display: block; width: auto; height: 21px; max-width: 200px;
}
.footer .header__logo img { display: block; width: auto; max-width: 200px; }
@media (max-width: 600px) { .header .header__logo img, .custom-logo-link img { height: 18px; } }

/* Le curseur est dessiné par le CSS et non par un caractère dans le HTML :
   Weglot traduit la ligne du hero comme un seul bloc et faisait déborder la fin
   de la phrase dans le span du curseur, qui affichait « impact| » en anglais.
   Sans nœud de texte, il n'y a plus rien à déplacer. */
.hero__typed-cursor::after { content: "|"; }

/* Weglot affiche par défaut une pastille flottante en bas de page. Le sélecteur
   « FR / EN » de l'en-tête, prévu par le prototype, la remplace. */
aside.country-selector.weglot-default { display: none; }


/* Le widget image d Elementor pose ses classes sur l enveloppe : l image doit
   au moins rester dans les limites de sa colonne. */
.elementor-widget-image img { display: block; max-width: 100%; height: auto; }

/* Elementor impose display:flex a tous ses conteneurs via .e-flex. Nos classes
   de grille ont la meme specificite : l'ordre de chargement decidait, et les
   grilles de cartes tombaient sur une colonne. La feuille du theme est
   desormais imprimee apres celle d'Elementor, et ces regles le confirment
   explicitement plutot que de dependre de cet ordre. */
.e-con.grid, .e-con.grid--2, .e-con.grid--3, .e-con.grid--asym, .e-con.grid--asym-r,
.e-con.testimonials, .e-con.cta-band__inner, .e-con.refs__head {
  display: grid;
}

/* --------------------------------------------------------------------------
   29. WIDGET BOUTON D'ELEMENTOR

   Les classes du design system sont posées sur le <a> lui-même, via
   custom_attributes : .btn et ses variantes s'appliquent donc normalement,
   maintenant que la feuille du thème est imprimée après celle d'Elementor.

   Restent deux ajustements : neutraliser les enveloppes que le widget insère
   autour du libellé, et redessiner la flèche, qui est un SVG en ligne dans le
   prototype et que le widget ne conserve pas.
   -------------------------------------------------------------------------- */

a.elementor-button.btn .elementor-button-content-wrapper,
a.elementor-button.btn .elementor-button-text { display: contents; }

/* Les variantes fantomes ne definissent aucun fond dans le prototype : celui
   d Elementor subsisterait et les rendrait grises. On le neutralise a la
   source, pour que le bouton naisse transparent plutot que de transitionner
   depuis le gris. */
a.elementor-button.btn--ghost,
a.elementor-button.btn--ghost-light { background-color: transparent; }

/* Flèche des boutons d'action, signalée par btn--arrow à la conversion.
   Dessinée en masque pour reprendre la couleur du texte, quel que soit le
   fond, et animée au survol comme dans le prototype. */
.btn--arrow::after {
  content: ""; width: 16px; height: 16px; flex: none;
  background-color: currentColor;
  -webkit-mask: var(--fleche) center / contain no-repeat;
          mask: var(--fleche) center / contain no-repeat;
  transition: transform var(--dur) var(--ease);
}
.btn--arrow:hover::after { transform: translateX(4px); }

:root {
  --fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   30. CHECKLIST DE SEPTEMBRE : HIÉRARCHIE, COMPACITÉ, CONTENUS DYNAMIQUES
   -------------------------------------------------------------------------- */

/* Titres de section. Ils dépassaient le titre du hero (56 à 60 px contre 54) :
   un seul calibre désormais, un cran sous le hero à toutes les largeurs.
   Sur mobile, le hero descend à 6.6vw : 5.2vw garde l'écart. */
:root { --fs-h2: clamp(1.375rem, 5.2vw, 2.75rem); }
.h2--compact, .manifesto__statement { font-size: var(--fs-h2); }

/* Sous-titre d'une section : AI Signal et Delve, briques d'AI Visibility. */
.h2--sub { font-size: clamp(1.25rem, 3.4vw, 2rem); }

/* Elementor ajoute 20 px entre chaque widget de ses conteneurs. Le prototype
   n'en a pas : ces écarts s'additionnaient aux marges du design system et
   gonflaient tous les blancs (148 px sous le bouton Newsroom au lieu de 128).
   Les classes qui définissent leur propre gap (.grid, .stack...) le gardent :
   leur déclaration l'emporte sur celle d'Elementor. */
.e-con.e-con {
  --gap: 0px; --row-gap: 0px; --column-gap: 0px;
  --widgets-spacing: 0px; --widgets-spacing-row: 0px; --widgets-spacing-column: 0px;
}

/* Accueil, Outcast AI : l'expertise en tête, ses deux briques dessous. */
.ai-offers { display: grid; gap: var(--s-5); margin-top: var(--s-7); }
@media (min-width: 860px) { .ai-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); } }
.e-con.ai-offers { display: grid; }
.ai-offer {
  padding: var(--s-6); border-radius: var(--r-lg);
  border: 1px solid var(--rule-on-dark); background: rgba(255,255,255,.04);
}
.ai-offer__title { margin-top: var(--s-3); font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; letter-spacing: -0.018em; color: var(--white); }
.ai-offer__text { margin-top: var(--s-4); font-size: var(--fs-small); line-height: 1.6; color: var(--ink-on-dark-soft); }
.ai-offer__text a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

/* Codes courts dans Elementor : le widget ne doit rien ajouter autour.
   La marge haute du bloc (mt-6, mt-8) est conservée : l'annuler collait les
   cartes à la ligne orange de The Outcast Thinking et The Outcast Talks. */
.elementor-widget-shortcode .elementor-shortcode:empty { display: none; }

/* Un widget texte dans une grille garde son enveloppe. Transparente, elle
   faisait de chaque paragraphe une case : sur À propos, les trois paragraphes
   de la vision se répartissaient entre les deux colonnes. Seuls les widgets
   HTML, dont le contenu est fait des cases elles-mêmes, restent transparents. */
.e-con.wrap.grid > .elementor-widget-text-editor,
.e-con.grid > .elementor-widget-text-editor,
.e-con.wrap.cta-band__inner > .elementor-widget-text-editor { display: block; }

/* Étiquette de carte : pastille à sa taille, pas une barre pleine largeur. */
.card__body > .tag { align-self: flex-start; }

/* --------------------------------------------------------------------------
   31. EN-TÊTE D'ARTICLE AVEC IMAGE MISE EN AVANT
   L'image ouvre l'article, à gauche du titre, au lieu d'être glissée dans le
   corps du texte. Sans image, l'en-tête reste celui du prototype.
   -------------------------------------------------------------------------- */
.article-hero__inner { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 940px) {
  .article-hero__inner { grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); gap: clamp(40px, 5vw, 88px); }
}
.article-hero__media {
  margin: 0; aspect-ratio: 16 / 10; overflow: hidden; position: relative; z-index: 1;
  border-radius: var(--r-xl); border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.45); background: rgba(255,255,255,.06);
}
.article-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.article-hero__text { position: relative; z-index: 1; min-width: 0; }
.article-hero .h1 { font-size: clamp(1.75rem, 3.2vw, 2.625rem); }


/* --------------------------------------------------------------------------
   32. NOS RÉALISATIONS, ESPACEMENTS, LIBELLÉS PAR LANGUE
   -------------------------------------------------------------------------- */

/* Petit label doré → titre. Converti en widget, le label perdait sa marge
   basse : 0 px, contre 24 px dans « Outcast dans la presse », la référence. */
.e-con.e-con > .elementor-widget.eyebrow { margin-bottom: var(--s-5); }

/* Texte propre à une langue. Weglot pose lang="en" sur la version anglaise ;
   le texte anglais porte data-wg-notranslate pour rester tel quel. */
html[lang^="en"] .only-fr { display: none !important; }
html:not([lang^="en"]) .only-en { display: none !important; }

/* Cartes de cas clients : mêmes cartes que la Newsroom, visuel plus présent. */
.card--case .card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case__client { display: flex; align-items: center; min-height: 32px; }
.case__logo { display: block; width: auto; height: auto; max-height: 32px; max-width: 160px; object-fit: contain; }
.case__client-name { font-size: var(--fs-small); font-weight: 700; letter-spacing: .02em; color: var(--navy); }
.case__meta { margin-top: var(--s-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); font-size: var(--fs-caption); color: var(--ink-mute); }
.card--case .card__cta { margin-top: auto; padding-top: var(--s-5); }

/* Page d'un cas. */
.case__hero-client .case__logo { max-height: 40px; filter: brightness(0) invert(1); }
.case__hero-client .case__client-name { color: var(--white); }
.case__text p { margin: 0 0 1em; font-size: 1.0625rem; line-height: 1.7; color: var(--ink-soft); }
.case__text p:last-child { margin-bottom: 0; }
.section--navy .case__text p { color: var(--ink-on-dark-soft); }
.case__text + .pullquote { margin-bottom: 0; }
.case__body > :first-child { margin-top: 0; }
.case__body > :last-child { margin-bottom: 0; }
.case__video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: var(--navy); }
.case__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.case__gallery { display: grid; gap: var(--s-5); }
@media (min-width: 700px)  { .case__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .case__gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.case__gallery-item { margin: 0; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: var(--white); }
.case__gallery-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.section--navy .case__results .proof__item { border-top-color: var(--orange); }


/* --------------------------------------------------------------------------
   33. ÉDITION DANS ELEMENTOR : MOINS DE HTML, RIEN DE MASQUÉ
   -------------------------------------------------------------------------- */

/* Dans l'éditeur, Elementor redessine les blocs après le script du thème :
   les .reveal restaient à opacité 0 et le corps de page paraissait vide. */
.elementor-editor-active .reveal,
.elementor-editor-preview .reveal { opacity: 1 !important; transform: none !important; }

/* Trait orange sous un titre, porté par le widget du titre lui-même. */
.elementor-widget.with-rule::after {
  content: ""; display: block; width: 56px; height: 3px;
  background: var(--orange); margin-top: var(--s-5); border-radius: 2px;
}

/* Hero : vidéo en arrière-plan natif du conteneur, voiles redessinés ici. */
.e-con.hero > .elementor-background-video-container { z-index: 0; }
.e-con.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--grad-authority); opacity: .55; mix-blend-mode: multiply;
}
.e-con.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--grad-veil);
}
.e-con.hero__inner {
  --width: 100%;
  --margin-block-start: 0; --margin-block-end: 0;
  --padding-inline-start: 0; --padding-inline-end: 0;
  --padding-block-start: clamp(120px, 20vh, 220px);
  --padding-block-end: clamp(56px, 9vh, 120px);
  position: relative; z-index: 2;
}
.e-con.hero > .elementor-widget-text-editor { display: block; }
.elementor-widget.scroll-hint { position: absolute; }

/* Cartes d'expertise et chiffres clés en conteneurs natifs. */
.e-con.xp, .e-con.proof { display: grid; }
.e-con.xp__card { --overflow: hidden; }
.e-con.xp__link { display: flex; }

/* Liens fléchés en widget bouton : le style du lien, pas celui d'un bouton. */
a.elementor-button.link-arrow {
  background: transparent; padding: 0; border-radius: 0;
  font-size: var(--fs-small); font-weight: 600; line-height: inherit; color: var(--orange);
}
a.elementor-button.link-arrow:hover, a.elementor-button.link-arrow:focus { color: var(--orange); }
a.elementor-button.link-arrow .elementor-button-content-wrapper,
a.elementor-button.link-arrow .elementor-button-text { display: contents; }
a.elementor-button.link-arrow.xp__cta { color: var(--ink-mute); }
.xp__card:hover a.elementor-button.link-arrow.xp__cta,
.xp__card:focus-within a.elementor-button.link-arrow.xp__cta { color: var(--gold); }
.link-arrow.btn--arrow::after { width: 16px; height: 16px; }

/* Liste « Pourquoi c’est décisif / Ce que vous obtenez » des cartes d’expertise :
   dans un widget texte, sa marge haute était remise à zéro (15 px de moins
   que la carte d’origine sur la page Expertise). */
.elementor-widget-text-editor > .xp__meta:first-child:last-child { margin-top: var(--s-6); }

/* Elementor impose max-width: 100% à ses widgets, avec une spécificité
   supérieure : le titre du hero s’élargissait (2 lignes au lieu de 3) et les
   légendes des chiffres clés perdaient leur largeur de lecture. */
.e-con.e-con > .elementor-widget.hero__lockup { max-width: 24ch !important; }
.e-con.e-con > .elementor-widget.hero__lede { max-width: 54ch !important; }
.e-con.e-con > .elementor-widget.proof__label { max-width: 24ch !important; }

/* Les conteneurs issus d’anciens blocs HTML ne doivent pas recevoir la marge
   intérieure par défaut d’Elementor (10 px) : +20 px sur la section Vision,
   bouton du hero décalé. */
.e-con.xp, .e-con.proof, .e-con.proof__item, .e-con.xp__link, .e-con.hero__cta {
  --padding-block-start: 0px; --padding-block-end: 0px;
  --padding-inline-start: 0px; --padding-inline-end: 0px;
}

/* « Scroll » reste masqué sous 1000 px, comme au prototype : la règle qui
   rend visibles les widgets texte du hero l’emportait sur ce masquage. */
@media (max-width: 1000px) { .e-con.hero > .elementor-widget.scroll-hint { display: none; } }