@charset "UTF-8";
/* ============================================================
   LATITUDE SUD — GLOBALS.CSS  (Round 2)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Poppins:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

@font-face {
  font-family: 'Harabara Mais';
  src: url('/assets/fonts/harabara-mais-bold.otf') format('opentype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/* ── VARIABLES ── */
/* Change site text, colors, spacing, and brand styles here.
   Only edit values under :root for a safe, beginner-friendly theme update. */

:root {
  --color-olive:       #7A8B6F;
  --color-olive-light: #A8B58A;
  --color-beige:       #F5E3D0;
  --color-cream:       #FAF9F7;
  --color-gray-light:  #E5E3E0;
  --color-gray-mid:    #B0ADA9;
  --color-gray-dark:   #2E2E2E;
  --color-black:       #1A1A1A;
  --color-sand:        #D6C1A3;
  --color-white:       #FCFCFB;

  --font-serif:   'Playfair Display', Georgia, serif;
  --font-sans:    'Poppins', system-ui, sans-serif;
  --font-poppins: 'Poppins', system-ui, sans-serif;

  --fs-h1:    clamp(36px, 4.5vw, 56px);
  --fs-h2:    clamp(28px, 3.2vw, 40px);
  --fs-h3:    clamp(18px, 2vw, 26px);
  --fs-body:  clamp(14px, 1.1vw, 17px);
  --fs-small: 13px;
  --fs-tag:   11px;

  --section-gap: clamp(60px, 9vw, 120px);
  --inner-gap:   clamp(40px, 5vw, 80px);
  --card-radius: 16px;
  --btn-radius:  30px;

  --max-width: 1480px;
  --gutter:    clamp(24px, 8vw, 120px);
  /* Aligne les contenus de hero sur le même conteneur que la navigation,
     y compris sur les écrans très larges. */
  --content-edge: clamp(24px, max(7vw, calc((100% - var(--max-width)) / 2 + 40px)), 480px);
  /* Même verticale que la grille éditoriale centrée de 1160 px. */
  --hero-copy-edge: max(24px, calc((100% - 1160px) / 2));
  --col-gap:   24px;

  --shadow-card:  0 4px 24px rgba(0,0,0,0.07);
  --shadow-hover: 0 8px 40px rgba(0,0,0,0.12);

  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur:  0.25s;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-poppins);
  font-size: var(--fs-body);
  color: var(--color-gray-dark);
  background-color: var(--color-cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: var(--font-poppins); border: none; background: none; cursor: pointer; }

/* Keep full-width hero waves continuous across every page template. */
body .hero-wave > svg.wave-bg {
  width: calc(100% + 4px);
  max-width: none;
  margin-left: -2px;
  overflow: hidden;
  shape-rendering: geometricPrecision;
}

/* ── GRAIN PAPIER ── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat; background-size: 180px; mix-blend-mode: multiply;
}

/* ── LAYOUT ── */
.container { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--gutter); }
.section   { padding-block: var(--section-gap); }

/* ── TYPOGRAPHY ── */
h1, .h1 { font-family: var(--font-poppins); font-size: var(--fs-h1); font-weight: 700; line-height: 1.1; color: var(--color-black); letter-spacing: 0; }
h2, .h2 { font-family: var(--font-poppins); font-size: var(--fs-h2); font-weight: 700; line-height: 1.2; color: var(--color-black); letter-spacing: 0; }
h3, .h3 { font-family: var(--font-poppins); font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; color: var(--color-black); }
p { line-height: 1.7; }

/* ── ÉQUILIBRE DES LIGNES ──────────────────────────────────
   Les titres se coupaient à des endroits arbitraires, laissant un ou deux
   mots seuls sur la dernière ligne. « balance » répartit les lignes d'un
   titre à peu près également ; « pretty » évite les mots orphelins en fin
   de paragraphe. Les navigateurs qui ne connaissent pas ces valeurs les
   ignorent simplement. */
h1, h2, h3, h4,
.hero-h1, .hero-title-poppins, .hero-title-playfair,
.portfolio-hero h1, .portfolio-intro h2 {
  text-wrap: balance;
}
p, .hero-desc, .portfolio-hero p, .expertise-card-desc, .story-text p {
  text-wrap: pretty;
}

/* Surtitle label — uppercase spaced (old section-tag kept for compat) */
.section-tag {
  display: inline-block; font-family: var(--font-poppins);
  font-size: var(--fs-tag); font-weight: 400; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--color-gray-mid); margin-bottom: 16px;
}

/* New dark surtitle style */
.section-surtitle {
  display: block; font-family: var(--font-poppins);
  font-size: 14px; font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--color-black); margin-bottom: 16px;
}

/* Playfair italic accent */
.italic-accent { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--color-olive); }

/* ── ACCENT WORD — Playfair italic olive + hand-drawn underline ── */
.ls-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: #605e32;
  background-image: url('/assets/global/icons/ui/trait-ls.svg');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 0.34em;
  padding-bottom: 0.30em;
}

/* Long accent words get the longer underline */
.ls-accent-long {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: #605e32;
  background-image: url('/assets/global/icons/ui/trait-ls-2.svg');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 0.40em;
  padding-bottom: 0.35em;
}

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-poppins); font-size: 14px; font-weight: 500;
  border-radius: var(--btn-radius); padding: 13px 28px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  white-space: nowrap; cursor: pointer;
}
.btn:hover { transform: translateY(-1px); }
.btn-arrow::after { content: '→'; font-size: 18px; line-height: 1; }

.btn-primary  { background: var(--color-black); color: var(--color-white); border: 2px solid var(--color-black); }
.btn-primary:hover  { background: var(--color-olive); border-color: var(--color-olive); color: var(--color-white); }

.btn-secondary { background: transparent; color: var(--color-black); border: 2px solid var(--color-black); }
.btn-secondary:hover { background: var(--color-olive); border-color: var(--color-olive); color: var(--color-white); }

.btn-text {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-poppins); font-size: 13px; font-weight: 500;
  color: var(--color-black); padding: 0; border: none; background: none;
  transition: color var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.btn-text::after { content: '→'; }
.btn-text:hover  { color: var(--color-olive); gap: 10px; }

/* ── CARDS (generic) ── */
.card,
.video-card,
.print-card,
.social-card,
.web-card,
.expertise-card,
.value-card {
  position: relative;
  overflow: hidden;
  background: var(--color-white);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover,
.video-card:hover,
.print-card:hover,
.social-card:hover,
.web-card:hover,
.expertise-card:hover,
.value-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}
.video-thumb,
.print-card-thumb,
.social-card-thumb,
.web-card-thumb {
  position: relative;
}
.video-thumb::before,
.print-card-thumb::before,
.social-card-thumb::before,
.web-card-thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(245, 227, 208, 0.25);
  pointer-events: none;
  transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1), transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.video-card:hover .video-thumb::before,
.print-card:hover .print-card-thumb::before,
.social-card:hover .social-card-thumb::before,
.web-card:hover .web-card-thumb::before {
  opacity: 0;
  transform: scale(1.02);
}
.card-img    { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.card-body   { padding: 20px 24px 24px; }
.card-category { font-size: var(--fs-small); color: var(--color-gray-mid); margin-bottom: 6px; font-weight: 500; }
.card-title  { font-family: var(--font-poppins); font-size: 17px; font-weight: 600; color: var(--color-black); margin-bottom: 8px; line-height: 1.3; }
.card-desc   { font-size: 13px; color: var(--color-gray-dark); line-height: 1.6; margin-bottom: 14px; }

/* ── FILTER TABS ── */
.filter-tabs { display: flex; align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--color-gray-light); margin-bottom: 48px; }
.filter-tab { font-family: var(--font-poppins); font-size: 13px; font-weight: 500; color: var(--color-gray-mid); background: none; border: none; padding: 12px 24px; cursor: pointer; position: relative; transition: color var(--dur) var(--ease); white-space: nowrap; }
.filter-tab::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--color-black); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); }
.filter-tab:hover { color: var(--color-black); }
.filter-tab.active { color: var(--color-black); font-weight: 600; }
.filter-tab.active::after { transform: scaleX(1); }
.filter-tab + .filter-tab::before { content: '|'; position: absolute; left: 0; color: var(--color-gray-light); font-weight: 300; pointer-events: none; }

/* ── PROJECT GRID ── */
.projects-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--col-gap); }
.projects-grid .card[data-hidden="true"] { display: none; }

/* ── SCROLL REVEAL ── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ── CLIENTS LOGO GRID (flex-wrap, fully responsive) ── */
.ls-clients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  justify-items: center;
  align-items: center;
  gap: 36px 40px;
  padding: 48px 40px;
  max-width: 1200px;
  margin: 0 auto;
}
.ls-clients-grid img {
  height: 32px; width: auto;
  max-width: 120px;
  opacity: 0.6;
  filter: grayscale(100%) brightness(0);
  transition: opacity 0.25s var(--ease);
  object-fit: contain;
}
.ls-clients-grid img:hover { opacity: 1; }
.ls-clients-grid .ls-logo-sm { height: 26px; max-width: 100px; }
.ls-clients-grid .ls-logo-lg { height: 44px; max-width: 140px; }
.ls-clients-grid .ls-logo-xl { height: 52px; max-width: 160px; }

/* ── SCROLL-TO-TOP (à l'intérieur des fiches longues) ── */
.ls-case-scrolltop-wrap {
  position: sticky;
  z-index: 7;
  bottom: 20px;
  height: 0;
  display: flex;
  justify-content: flex-end;
  padding-right: 20px;
  pointer-events: none;
}
.ls-case-scrolltop {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--color-black);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background .2s ease;
  cursor: pointer;
}
.ls-case-scrolltop.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.ls-case-scrolltop:hover { background: var(--color-olive); }

/* ── SCROLL-TO-TOP ── */
#scroll-top-btn {
  position: fixed; bottom: 52px; right: 32px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-black); color: white;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s, background 0.2s;
  z-index: 998; box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
#scroll-top-btn.visible { opacity: 1; transform: translateY(0); }
#scroll-top-btn:hover   { background: var(--color-olive); }

/* ══════════════════════════════════════════════════════
   HEADER — sticky, space-between layout, always dark links
   ══════════════════════════════════════════════════════ */
.ls-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.ls-header.scrolled {
  background: rgba(252,252,251,0.97);
  border-color: var(--color-gray-light);
  box-shadow: 0 2px 20px rgba(0,0,0,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Header inner: position:relative so nav-links can be abs-centered */
.ls-header-inner {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  height: 72px;
  padding: 0 40px;
  max-width: var(--max-width);
  margin-inline: auto;
}

/* Grid 3 colonnes (logo / nav / actions) : la nav reste visuellement centrée
   dans l'espace restant, sans jamais pouvoir chevaucher le bloc de droite —
   contrairement à l'ancien `position:absolute;left:50%` qui centrait sur
   toute la largeur du header et ignorait la largeur réelle du bloc actions,
   provoquant un chevauchement avec "Contact" aux largeurs intermédiaires
   (~800-1050px, avant le breakpoint mobile à 768px). */

/* Logo (left anchor) */
.ls-logo, .ls-nav-logo {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; flex-shrink: 0; z-index: 2;
}
.ls-logo-badge { width: 50px; height: 50px; flex-shrink: 0; }
.ls-logo-text  { display: flex; flex-direction: column; line-height: 1.15; }
.ls-logo-name  {
  font-family: var(--font-poppins); font-size: 13px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-black);
}
.ls-logo-sub   {
  font-family: var(--font-poppins); font-size: 9px; font-weight: 300;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-black);
}

/* Nav links — absolutely centered */
.ls-nav-links {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 32px;
  z-index: 1;
  min-width: 0;
}

/* Right group: socials + CTA */
.ls-nav-right {
  grid-column: 3;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  z-index: 2;
}

/* Individual nav link */
.ls-nav-link {
  font-family: var(--font-poppins); font-size: 13px; font-weight: 500;
  color: var(--color-black); text-decoration: none;
  position: relative; white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.ls-nav-link::after {
  content: ''; position: absolute; bottom: -3px; left: 0; right: 0;
  height: 1.5px; background: var(--color-olive);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.ls-nav-link:hover       { color: var(--color-olive); }
.ls-nav-link.active      { color: var(--color-black); }
.ls-nav-link:hover::after,
.ls-nav-link.active::after { transform: scaleX(1); }

/* Dropdown */
.ls-nav-dropdown { position: relative; }
.ls-nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--color-white); border: 1px solid var(--color-gray-light);
  border-radius: 12px; box-shadow: 0 8px 40px rgba(0,0,0,0.10);
  min-width: 190px; padding: 8px; z-index: 100;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
/* Invisible bridge so the cursor can travel from the trigger to the menu
   without crossing a dead gap that would close it */
.ls-nav-dropdown-menu::before {
  content: ''; position: absolute; left: 0; right: 0;
  top: -24px; height: 24px;
}
.ls-nav-dropdown:hover .ls-nav-dropdown-menu,
.ls-nav-dropdown.open .ls-nav-dropdown-menu,
.ls-nav-dropdown:focus-within .ls-nav-dropdown-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.ls-nav-dropdown-menu a {
  display: block; padding: 10px 16px;
  font-family: var(--font-poppins); font-size: 13px; font-weight: 500;
  color: var(--color-gray-dark); border-radius: 8px; white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ls-nav-dropdown-menu a:hover { background: var(--color-olive); color: #fff; }
.ls-nav-caret { font-size: 10px; margin-left: 3px; transition: transform var(--dur) var(--ease); display: inline-block; }
.ls-nav-dropdown:hover .ls-nav-caret,
.ls-nav-dropdown.open .ls-nav-caret { transform: rotate(180deg); }

/* Social icons — transparent circle-outline style (shared with sticky bar
   and footer, so all three places use the exact same treatment) */
.ls-nav-socials { display: flex; align-items: center; gap: 12px; }
.ls-nav-social {
  display: flex; align-items: center; justify-content: center;
  color: var(--color-black); text-decoration: none;
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ls-nav-social:hover { color: var(--color-olive); transform: translateY(-1px); }

.ls-footer-socials { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.ls-footer-social {
  display: flex; align-items: center; justify-content: center;
  color: var(--color-black); text-decoration: none;
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ls-footer-social:hover { color: var(--color-olive); transform: translateY(-1px); }

/* Hamburger */
.ls-mobile-header-socials { display: none; align-items: center; gap: 2px; margin-left: auto; flex: 0 0 auto; }
.ls-mobile-header-socials a {
  display: grid; place-items: center; width: 44px; height: 44px;
  color: var(--color-black); border-radius: 50%;
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ls-mobile-header-socials a:hover { color: var(--color-olive); transform: translateY(-1px); }
.ls-mobile-header-socials svg { width: 26px; height: 26px; }
.ls-hamburger { display: none; flex: 0 0 44px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 44px; min-width: 44px; height: 44px; cursor: pointer; padding: 0; background: none; border: none; margin-left: 2px; }
.ls-hamburger span { display: block; width: 24px; height: 2px; background: var(--color-black); border-radius: 2px; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.ls-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.ls-hamburger.open span:nth-child(2) { opacity: 0; }
.ls-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* Mobile nav overlay */
.ls-mobile-nav {
  display: none; position: fixed; inset: 0; top: 72px;
  background: var(--color-cream); z-index: 999;
  padding: 32px 24px; flex-direction: column; gap: 4px; overflow-y: auto;
}
.ls-mobile-nav.open { display: flex; }
.ls-mobile-nav a { font-family: var(--font-poppins); font-size: 19px; font-weight: 600; line-height: 1.25; color: var(--color-black); padding: 13px 0; border-bottom: 1px solid var(--color-gray-light); transition: color var(--dur) var(--ease); }
.ls-mobile-nav a:hover { color: var(--color-olive); }
.ls-mobile-nav .ls-mobile-sub { font-family: var(--font-poppins); font-size: 14px; font-weight: 500; color: var(--color-gray-dark); padding: 10px 0 10px 16px; border-bottom: 1px solid var(--color-gray-light); }
.ls-mobile-nav .ls-mobile-cta {
  width: 100%; margin-top: 24px; padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between;
  align-self: stretch;
  color: var(--color-white);
  font-family: var(--font-poppins);
  font-size: 14px;
  font-weight: 600;
  border: 0;
  border-radius: 6px;
}
.ls-mobile-nav .ls-mobile-cta:hover { color: var(--color-white); }

/* ══════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════ */
.ls-footer {
  background-color: var(--color-beige); position: relative;
  margin-top: 0; overflow: hidden;
}
.ls-footer-arch {
  width: 100%; height: 64px; line-height: 0;
  margin: 0 0 -1px; overflow: hidden;
  /* La bande porte la couleur de la section qui la précède ; sans ça, sur
     les pages qui finissent en blanc, un rectangle beige s'intercalait
     entre le contenu et le footer. */
  background: var(--footer-arch-surface, #F5EEE6);
}
.ls-footer-arch svg { display: block; width: 100%; height: 64px; }
.ls-footer-wave { line-height: 0; }
.ls-footer-wave svg { display: block; width: 100%; }

.ls-footer-inner {
  background-color: var(--color-beige);
  display: grid;
  grid-template-columns:
    minmax(132px, 1.05fr)
    minmax(86px, .62fr)
    minmax(120px, .88fr)
    minmax(218px, 1.62fr)
    minmax(92px, .68fr);
  align-items: start;
  gap: clamp(16px, 2.4vw, 36px);
  max-width: 1360px;
  margin: 0 auto;
  padding: 30px clamp(22px, 3.4vw, 48px) 34px;
}

.ls-footer-col-title {
  font-family: var(--font-poppins); font-weight: 600;
  font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--color-black); margin-bottom: 12px;
}
.ls-footer-inner a,
.ls-footer-inner address {
  font-family: var(--font-poppins); font-size: 13px;
  color: var(--color-gray-dark); text-decoration: none;
  display: block; margin-bottom: 6px; font-style: normal; line-height: 1.48;
  transition: color var(--dur) var(--ease);
}
.ls-footer-inner a:hover { color: var(--color-olive); }
.ls-footer-brand { display: flex; flex-direction: column; }

.ls-footer-contact-line {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 7px; font-size: 12px; line-height: 1.42;
  color: var(--color-gray-dark);
}
.ls-footer-contact-line span,
.ls-footer-contact-line a {
  margin-bottom: 0;
}
.ls-footer-contact-line svg {
  flex-shrink: 0; margin-top: 2px;
}

.ls-logo-badge-div {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--color-black);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-cream); font-family: var(--font-serif);
  font-size: 12px; font-weight: 700; letter-spacing: 0.05em;
  flex-shrink: 0; margin-bottom: 10px;
}
.ls-footer-agency-name {
  font-family: var(--font-poppins); font-weight: 600;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-black); margin-bottom: 6px;
}
.ls-footer-agency-sub {
  font-family: var(--font-poppins); font-size: 13px;
  color: var(--color-gray-dark); line-height: 1.55;
}

.ls-footer-bottom {
  background-color: var(--color-beige);
  border-top: 1px solid rgba(214,193,163,0.3);
  display: flex; justify-content: space-between; align-items: center;
  width: min(1360px, 100%); margin: 0 auto;
  padding: 13px clamp(22px, 3.4vw, 48px) 20px;
  font-family: var(--font-poppins); font-size: 12px; color: var(--color-gray-dark);
}
.ls-footer-bottom-links { display: flex; gap: 24px; flex-wrap: wrap; }
.ls-footer-bottom a { color: var(--color-gray-dark); text-decoration: none; transition: color var(--dur) var(--ease); }
.ls-footer-bottom a:hover { color: var(--color-olive); }

/* ── SHARED PROJECT CTA ──────────────────────────────────────
   One horizontal rhythm for the home, agency and portfolio pages. */
.ls-project-cta {
  position: relative;
  overflow: hidden;
  background: #F5EEE6;
  border-top: 1px solid #E9E2D9;
}
.ls-project-cta__inner {
  width: min(1400px, 100%);
  min-height: 300px;
  margin: 0 auto;
  padding: 40px var(--gutter) 0;
  display: grid;
  grid-template-columns: minmax(320px, 450px) auto minmax(340px, 1fr);
  align-items: center;
  gap: clamp(20px, 2.6vw, 44px);
}
.ls-project-cta__copy {
  align-self: center;
  padding-bottom: 40px;
}
.ls-project-cta__copy h2 {
  margin: 0 0 10px;
  font-family: var(--font-poppins);
  font-size: clamp(27px, 2.5vw, 38px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: 0;
}
.ls-project-cta__copy p {
  max-width: 470px;
  margin: 0;
  color: var(--color-gray-dark);
  font-size: 14px;
  line-height: 1.6;
}
.ls-project-cta__button {
  justify-self: start;
  align-self: center;
  margin-bottom: 40px;
  white-space: nowrap;
}
.ls-project-cta__visual {
  position: relative;
  align-self: end;
  min-width: 0;
  height: 258px;
  overflow: hidden;
}
.ls-project-cta__visual img {
  position: absolute;
  right: 0;
  bottom: -2px;
  width: auto;
  max-width: none;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: right bottom;
}
/* Visuel panoramique (accueil, réalisations) : le bandeau fait 1800x600, donc
   en largeur imposée il ne mesurait plus que 173px de haut et flottait au
   milieu d'un grand vide beige. On le cale sur la HAUTEUR du cadre : il occupe
   toute la bande, déborde vers la gauche (rogné par overflow:hidden) et file
   jusqu'au bord droit de l'écran. */
.ls-project-cta__visual--landscape {
  margin-right: calc(var(--gutter) * -1);
}
.ls-project-cta__visual--landscape img {
  width: auto;
  height: 100%;
  max-width: none;
  right: 0;
  object-fit: cover;
  object-position: right bottom;
}

/* ── MARINA BAS-DU-FORT CASE STUDY ───────────────────────── */
.marina-case-modal {
  position: fixed;
  inset: 0;
  z-index: 5400;
  display: none;
  padding: 18px;
}
.marina-case-modal.open { display: grid; place-items: center; }
.marina-case-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 20, 22, .78);
  backdrop-filter: blur(5px);
}
.marina-case-dialog {
  position: relative;
  z-index: 1;
  width: min(1680px, 100%);
  max-height: calc(100vh - 36px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #FCFCFB;
  border-radius: 12px;
  box-shadow: 0 34px 100px rgba(0, 0, 0, .42);
  scrollbar-width: thin;
}
.marina-case-close {
  position: sticky;
  z-index: 8;
  top: 18px;
  float: right;
  width: 42px;
  height: 42px;
  margin: 18px 18px -60px 0;
  border: 0;
  border-radius: 50%;
  background: rgba(252, 252, 251, .94);
  color: #1A1A1A;
  font-size: 27px;
  line-height: 1;
  box-shadow: 0 8px 24px rgba(20, 24, 29, .12);
  cursor: pointer;
}
.marina-case-content { padding: clamp(48px, 6vw, 86px); }
.marina-case-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr);
  align-items: center;
  gap: clamp(40px, 7vw, 100px);
  padding: 6px 0 70px;
}
.marina-case-badge {
  display: inline-flex;
  padding: 7px 12px;
  border: 1px solid #BCD6EA;
  border-radius: 99px;
  color: #0D66A8;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.marina-case-hero h2 {
  margin: 18px 0 14px;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.03;
  letter-spacing: 0;
  white-space: nowrap;
}
.marina-case-hero p {
  max-width: 610px;
  color: var(--color-gray-dark);
  font-size: 15px;
  line-height: 1.75;
}
.marina-case-meta {
  display: block;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 2px solid #126BAA;
  color: #5D6268;
  font-size: 12px;
}
.marina-case-logo {
  width: min(676px, 100%);
  max-height: 430px;
  justify-self: center;
  object-fit: contain;
}
.marina-case-section { padding: 54px 0; border-top: 1px solid #E7EAED; }
.marina-case-section h3 {
  margin: 0 0 24px;
  font-family: var(--font-poppins);
  font-size: clamp(24px, 2.4vw, 34px);
  letter-spacing: 0;
}
.marina-before-after {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}
.marina-before-after figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid #E7EAED;
  border-radius: 8px;
  background: #F6F8FA;
  box-shadow: 0 12px 34px rgba(24, 52, 75, .09);
}
.marina-before-after figcaption {
  position: relative;
  z-index: 1;
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 9px 12px;
  border-bottom: 1px solid #E7EAED;
  background: #FCFCFB;
}
.marina-before-after figcaption span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 11px;
  border-radius: 99px;
  background: #EEF2F5;
  color: #53585D;
  font-size: 10px;
  font-weight: 600;
}
.marina-before-after figure:last-child figcaption span {
  background: #0E6BA8;
  color: #fff;
}
.marina-before-after img {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
  object-fit: contain;
  background: #F6F8FA;
  transform: scale(1.1);
}
.marina-before-after-arrow {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid #D8E5EF;
  border-radius: 50%;
  background: #fff;
  color: #0E6BA8;
  font-size: 22px;
  box-shadow: 0 8px 20px rgba(13, 69, 107, .1);
}
.marina-dossier-grid,
.marina-system-grid,
.marina-deployment-grid {
  display: grid;
  gap: 18px;
}
.marina-dossier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.marina-system-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.marina-system-grid--single { grid-template-columns: 1fr; margin-top: 18px; }
.marina-system-grid--sim-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.marina-system-grid--sim-row .marina-media-card img {
  min-height: 0;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  transform: none;
  background: #F2F2F2;
}
.marina-deployment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.marina-media-card {
  margin: 0;
  overflow: hidden;
  border: 1px solid #E7EAED;
  border-radius: 8px;
  background: #F5F7F8;
  box-shadow: 0 12px 30px rgba(24, 52, 75, .08);
}
.marina-media-card img {
  width: 100%;
  height: 100%;
  min-height: 210px;
  display: block;
  object-fit: cover;
}
.marina-dossier-grid .marina-media-card img { aspect-ratio: 1.38 / 1; }
.marina-system-grid .marina-media-card img { aspect-ratio: 1.18 / 1; }
.marina-deployment-grid .marina-media-card img { aspect-ratio: 3 / 2; min-height: 0; }
.marina-deployment-grid .marina-media-card figcaption {
  padding: 13px 16px 15px;
  border-top: 1px solid #E7EAED;
  background: #FFF;
  color: #174D78;
  font-size: 12px;
  font-weight: 600;
}
.marina-dossier-grid .marina-media-card img,
.marina-system-grid .marina-media-card img {
  object-fit: contain;
  background: #F5F7F8;
}
.marina-dossier-grid .marina-media-card img {
  transform: scale(1.1);
}
.marina-dossier-grid .marina-media-card--wide {
  grid-column: 1 / -1;
}
.marina-dossier-grid .marina-media-card--wide img {
  aspect-ratio: 3 / 2;
  transform: scale(1.1);
  object-fit: cover;
}
.marina-system-grid--single .marina-media-card img {
  min-height: 0;
  aspect-ratio: 3.25 / 1;
  object-fit: contain;
  transform: none;
  background: #F2F2F2;
}
.marina-system-grid--single .marina-media-card--example {
  width: min(720px, 100%);
  justify-self: center;
}
.marina-system-grid--single .marina-media-card--example img {
  aspect-ratio: 3 / 2;
}

/* ── SO CLASS PHOTO CASE STUDY ──────────────────────────── */
.so-class-modal {
  position: fixed;
  inset: 0;
  z-index: 5460;
  display: none;
  padding: 18px;
}
.so-class-modal.open { display: grid; place-items: center; }
.so-class-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 15, 18, .86);
  backdrop-filter: blur(7px);
}
.so-class-dialog {
  position: relative;
  z-index: 1;
  width: min(1680px, 100%);
  max-height: calc(100vh - 36px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 10px;
  background: #F8F3F0;
  box-shadow: 0 36px 120px rgba(0, 0, 0, .5);
  scrollbar-width: thin;
}
.so-class-close {
  position: sticky;
  z-index: 8;
  top: 18px;
  float: right;
  width: 44px;
  height: 44px;
  margin: 18px 18px -62px 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  color: #171118;
  font-size: 28px;
  line-height: 1;
  box-shadow: 0 8px 24px rgba(22, 14, 19, .16);
  cursor: pointer;
}
.so-class-content { padding: clamp(42px, 5vw, 76px); }
.so-class-hero {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(340px, 1.14fr);
  align-items: center;
  gap: clamp(40px, 7vw, 100px);
  min-height: 640px;
  padding-bottom: 64px;
}
.so-class-hero > img {
  width: 100%;
  max-height: 660px;
  display: block;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 18px 28px rgba(49, 30, 36, .16));
}
.so-class-eyebrow,
.so-class-heading > span {
  color: #8C6C62;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.so-class-hero h2 {
  margin: 16px 0 18px;
  color: #171118;
  font-family: var(--font-poppins);
  font-size: clamp(42px, 5vw, 72px);
  line-height: .98;
  letter-spacing: 0;
}
.so-class-hero h2 em {
  color: #6E4A45;
  font-family: var(--font-serif);
  font-weight: 400;
}
.so-class-hero p,
.so-class-heading p {
  max-width: 620px;
  color: #635B5B;
  font-size: 14px;
  line-height: 1.75;
}
.so-class-section {
  padding: 58px 0;
  border-top: 1px solid #DED4D0;
}
.so-class-section--social {
  margin-inline: clamp(-42px, -4vw, -68px);
  padding-inline: clamp(42px, 4vw, 68px);
  background: #171118;
}
.so-class-section--social .so-class-heading > span { color: #C7A89C; }
.so-class-section--social .so-class-heading h3 { color: #FFFDFC; }
.so-class-section--social .so-class-heading p { color: #C8BEBB; }
.so-class-heading { max-width: 760px; margin-bottom: 28px; }
.so-class-heading h3 {
  margin: 8px 0 10px;
  color: #171118;
  font-family: var(--font-serif);
  font-size: clamp(32px, 3.5vw, 50px);
  font-weight: 400;
  line-height: 1.05;
}
.so-class-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.so-class-gallery figure {
  margin: 0;
  overflow: hidden;
  border-radius: 6px;
  background: #EDE7E3;
}
.so-class-gallery img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}
.so-class-gallery__wide { grid-column: span 2; }
.so-class-gallery__wide img { height: auto; }
.so-class-product-intro {
  max-width: 620px;
  margin: 22px 0 30px;
  color: #635B5B;
  font-size: 14px;
  line-height: 1.75;
}
.so-class-gallery--closing { margin-top: 28px; }
.so-class-section--products { background: #FFFDFC; }
.so-class-product-spreads {
  display: grid;
  gap: 28px;
}
.so-class-product-spread {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: 720px;
  border: 1px solid #D9D3CF;
  background: #FFF;
}
.so-class-product-model {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: #171118;
}
.so-class-product-model img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.so-class-product-pair {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.so-class-product-item {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(170px, .75fr);
  align-items: center;
  overflow: hidden;
  background: #FFF;
}
.so-class-product-item + .so-class-product-item { border-top: 1px solid #D9D3CF; }
.so-class-product-item figure {
  height: 100%;
  margin: 0;
  border-right: 1px solid #E0DAD6;
  background: #F8F5EF;
}
.so-class-product-item figure img {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  object-fit: contain;
  object-position: center;
}
.so-class-product-item > div { padding: 26px 24px; }
.so-class-product-item > div > span {
  color: #A68A80;
  font-size: 10px;
  font-weight: 700;
}
.so-class-product-item h4 {
  margin: 10px 0 8px;
  color: #171118;
  font-size: 14px;
  font-weight: 700;
}
.so-class-product-item p {
  color: #635B5B;
  font-size: 11px;
  line-height: 1.65;
}
.so-class-instagram-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.so-class-instagram-post {
  overflow: hidden;
  border-radius: 7px;
  background: #FFF;
  box-shadow: 0 15px 34px rgba(0, 0, 0, .2);
}
.so-class-instagram-post header {
  height: 54px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
}
.so-class-avatar {
  width: 34px;
  height: 34px;
  display: block;
  border-radius: 50%;
  border: 1px solid rgba(23, 17, 24, .15);
  object-fit: cover;
}
.so-class-instagram-post header div { display: grid; gap: 1px; }
.so-class-instagram-post header strong { color: #171118; font-size: 10px; }
.so-class-instagram-post header small { color: #7E7776; font-size: 8px; }
.so-class-instagram-post header b { margin-left: auto; color: #4D4747; font-size: 10px; letter-spacing: 1px; }
.so-class-instagram-post > img { width: 100%; aspect-ratio: 1; display: block; object-fit: cover; }
.so-class-instagram-post footer { display: flex; flex-wrap: wrap; gap: 9px; padding: 10px 11px 13px; color: #171118; font-size: 15px; }
.so-class-instagram-post footer > span,
.so-class-instagram-post footer > b { width: 19px; height: 19px; display: grid; place-items: center; }
.so-class-instagram-post footer svg {
  width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.so-class-instagram-post footer b { margin-left: auto; }
.so-class-instagram-post footer p { flex-basis: 100%; color: #554E4E; font-size: 9px; line-height: 1.45; }

/* ── CIST 971 CASE STUDY ─────────────────────────────────── */
.cist-case-modal {
  position: fixed;
  inset: 0;
  z-index: 5450;
  display: none;
  padding: 18px;
}
.cist-case-modal.open { display: grid; place-items: center; }
.cist-case-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 29, 53, .82);
  backdrop-filter: blur(6px);
}
.cist-case-dialog {
  position: relative;
  z-index: 1;
  width: min(1680px, 100%);
  max-height: calc(100vh - 36px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #F9FBFC;
  border-radius: 12px;
  box-shadow: 0 34px 110px rgba(3, 19, 40, .48);
  scrollbar-width: thin;
}
.cist-case-close {
  position: sticky;
  z-index: 8;
  top: 18px;
  float: right;
  width: 42px;
  height: 42px;
  margin: 18px 18px -60px 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  color: #173A64;
  font-size: 27px;
  line-height: 1;
  box-shadow: 0 8px 24px rgba(20, 61, 103, .14);
  cursor: pointer;
}
.cist-case-content { padding: clamp(48px, 6vw, 100px); }
.cist-case-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(460px, 1.25fr);
  align-items: center;
  gap: clamp(42px, 6vw, 96px);
  padding: 10px 0 78px;
}
/* Bonnes Épices et SMGEAG partagent .cist-case-hero : on restaure leur proportion d'origine. */
.bonnes-case-hero,
.smgeag-case-hero {
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
}
.cist-case-badge {
  display: inline-flex;
  padding: 7px 12px;
  border: 1px solid #B9D8EC;
  border-radius: 99px;
  color: #2055A1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cist-case-hero h2 {
  margin: 18px 0 14px;
  font-family: var(--font-sans);
  font-size: clamp(42px, 5vw, 66px);
  line-height: 1;
  letter-spacing: 0;
}
.cist-case-hero p {
  max-width: 670px;
  color: #4F5A66;
  font-size: 15px;
  line-height: 1.78;
}
.cist-case-meta {
  display: block;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 2px solid #1581C3;
  color: #5D6874;
  font-size: 12px;
}
.cist-case-logo {
  width: min(520px, 100%);
  height: auto;
  max-height: none;
  justify-self: center;
  object-fit: contain;
}
.project-card[data-cist-project] .project-visual img { transform: none; }
.project-card[data-cist-project]:hover .project-visual img { transform: scale(1.015); }
.cist-case-section {
  padding: 58px 0;
  border-top: 1px solid #DDE6EC;
}
.cist-case-section--tinted {
  margin-inline: clamp(-42px, -4vw, -70px);
  padding-inline: clamp(42px, 4vw, 70px);
  background: #F1F7FA;
}
.cist-section-heading { max-width: 780px; margin-bottom: 28px; }
.cist-section-heading > span {
  display: block;
  margin-bottom: 9px;
  color: #3B8634;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.cist-section-heading h3 {
  margin: 0 0 10px;
  font-family: var(--font-sans);
  font-size: clamp(29px, 3vw, 42px);
  line-height: 1.08;
  letter-spacing: 0;
}
.cist-section-heading p { color: #59636D; font-size: 14px; line-height: 1.72; }
.cist-before-after {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}
.cist-before-after figure {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #FFF;
  box-shadow: 0 12px 34px rgba(25, 66, 105, .1);
}
.cist-before-after figcaption {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  padding: 6px 10px;
  border-radius: 99px;
  background: #EDF1F3;
  color: #47515B;
  font-size: 10px;
  font-weight: 700;
}
.cist-before-after figure:last-child figcaption { background: #2055A1; color: #FFF; }
.cist-before-after img {
  width: 100%;
  aspect-ratio: 16 / 10;
  display: block;
  object-fit: contain;
  background: #FFF;
}
.cist-before-after figure:first-child img { transform: scale(1.08); }
.cist-before-after-arrow {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #2055A1;
  color: #FFF;
  font-size: 23px;
  box-shadow: 0 8px 22px rgba(32, 85, 161, .22);
}
.cist-logo-grid,
.cist-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.cist-media-card,
.cist-photo-grid figure,
.cist-application-grid figure {
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #FFF;
  box-shadow: 0 11px 30px rgba(21, 59, 93, .08);
}
.cist-media-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  padding: 18px;
  object-fit: contain;
  background: #F4F8FA;
}
.cist-media-card { display: grid; grid-template-rows: auto auto; }
.cist-media-card--logo img {
  position: relative;
  z-index: 0;
  transform: none;
  padding: clamp(8px, 1.1vw, 16px);
  background: #F4F8FA;
}
.cist-logo-grid .cist-media-card--logo img { aspect-ratio: 4 / 3; }
.cist-media-card figcaption { position: relative; z-index: 1; background: #FFF; }
.cist-media-card figcaption,
.cist-photo-grid figcaption {
  display: grid;
  gap: 4px;
  padding: 16px 18px 18px;
}
.cist-media-card figcaption strong,
.cist-photo-grid figcaption strong { color: #183755; font-size: 14px; }
.cist-media-card figcaption span,
.cist-photo-grid figcaption span { color: #64717C; font-size: 12px; line-height: 1.55; }
.cist-branch-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.cist-branch-card {
  margin: 0;
  padding: 28px 22px 24px;
  border-radius: 8px;
  background: #FFF;
  box-shadow: 0 10px 28px rgba(21, 59, 93, .08);
  overflow: hidden;
}
.cist-branch-card img {
  width: 100%;
  height: 240px;
  object-fit: contain;
  transform: scale(1.27);
}
.cist-branch-card figcaption { display: grid; gap: 6px; margin-top: 16px; text-align: center; }
.cist-branch-card figcaption strong { color: #183755; font-size: 14px; }
.cist-branch-card figcaption span { color: #66737D; font-size: 12px; line-height: 1.55; }
.cist-rule-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.cist-rule-grid article { padding-top: 18px; border-top: 3px solid #1581C3; }
.cist-rule-grid article:nth-child(1) { border-color: #3B8634; }
.cist-rule-grid article:nth-child(3) { border-color: #2055A1; }
.cist-rule-grid strong { color: #183755; font-size: 15px; }
.cist-rule-grid p { margin-top: 8px; color: #65717B; font-size: 13px; line-height: 1.6; }
.cist-guideline-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.cist-guideline-grid figure {
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #FFF;
  box-shadow: 0 10px 28px rgba(21, 59, 93, .08);
}
.cist-guideline-grid img {
  width: 100%;
  aspect-ratio: 1.28 / 1;
  display: block;
  object-fit: contain;
  background: #F7F9FB;
}
.cist-guideline-grid figcaption {
  display: grid;
  gap: 5px;
  padding: 15px 17px 18px;
}
.cist-guideline-grid figcaption strong { color: #183755; font-size: 13px; }
.cist-guideline-grid figcaption span { color: #66737D; font-size: 11px; line-height: 1.55; }
.cist-guideline-grid__wide { grid-column: span 2; }
.cist-guideline-grid__wide img { aspect-ratio: 3.7 / 1; padding: 12px; }
.cist-prohibited-logo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
  background: #F7F9FB;
}
.cist-prohibited-item {
  position: relative;
  display: block;
  border-radius: 4px;
  background: #FFF;
  overflow: hidden;
}
.cist-prohibited-logo-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  padding: 0;
  border-radius: 4px;
  background: #FFF;
  object-fit: contain;
}
/* Croix rouge pointillee signalant un usage interdit du logo. */
.cist-prohibited-item::before,
.cist-prohibited-item::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 6%;
  width: 88%;
  height: 0;
  border-top: 2px dashed rgba(214, 45, 45, 0.85);
  pointer-events: none;
}
.cist-prohibited-item::before { transform: rotate(45deg); }
.cist-prohibited-item::after { transform: rotate(-45deg); }
.cist-palette {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.cist-palette > article {
  overflow: hidden;
  padding-bottom: 14px;
  border-radius: 8px;
  background: #FFF;
  box-shadow: 0 8px 22px rgba(21, 59, 93, .07);
}
.cist-palette-main { display: block; height: 136px; margin-bottom: 13px; background: var(--swatch); }
.cist-palette strong,
.cist-palette small { display: block; padding-inline: 14px; }
.cist-palette strong { color: #183755; font-size: 12px; }
.cist-palette small { min-height: 34px; margin-top: 5px; color: #74808A; font-size: 10px; line-height: 1.45; }
.cist-tone-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  margin: 14px 14px 0;
  padding-top: 12px;
  border-top: 1px solid #DDE6EC;
}
.cist-tone-row i { display: block; height: 23px; background: var(--swatch); }
.cist-palette-subtitle {
  margin: 30px 0 14px;
  color: #183755;
  font-size: 16px;
  font-weight: 600;
}
.cist-palette--secondary .cist-palette-main { height: 82px; }
.cist-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.cist-type-grid article { padding: 28px; border-radius: 8px; background: #F1F7FA; }
.cist-type-grid article > span {
  display: block;
  margin-bottom: 18px;
  color: #3B8634;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.cist-type-grid strong { display: block; color: #183755; font-size: clamp(30px, 4vw, 50px); line-height: 1; }
.cist-type-harabara { font-family: 'Harabara Mais', sans-serif; }
.cist-type-montserrat { font-family: Montserrat, var(--font-poppins); font-weight: 400; }
.cist-type-grid p { margin-top: 22px; color: #65717B; font-size: 13px; line-height: 1.65; }
.cist-symbol-layout {
  display: grid;
  grid-template-columns: minmax(220px, .62fr) minmax(0, 1.38fr);
  gap: 24px;
}
.cist-symbol-layout figure {
  margin: 0;
  padding: 28px;
  border-radius: 8px;
  background: #FFF;
  text-align: center;
}
.cist-symbol-layout figure img { width: 180px; height: 180px; margin: 0 auto; object-fit: contain; }
.cist-symbol-layout figcaption { margin-top: 18px; color: #66737D; font-size: 12px; line-height: 1.6; }
.cist-symbol-layout .cist-icon-system { display: grid; align-content: center; }
.cist-symbol-layout .cist-icon-system img {
  width: 100%;
  height: auto;
  max-height: 220px;
  object-fit: contain;
}
.cist-icon-sample {
  display: grid;
  grid-template-columns: repeat(4, minmax(60px, 1fr));
  align-items: center;
  gap: 18px;
  padding: 32px;
  border-radius: 8px;
  background: #FFF;
}
.cist-icon-sample svg {
  width: 46px;
  height: 46px;
  margin: auto;
  fill: none;
  stroke: #1581C3;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cist-photo-grid figure img {
  width: 100%;
  aspect-ratio: 16 / 10;
  display: block;
  object-fit: cover;
}
.cist-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cist-photo-grid__wide { grid-column: span 2; }
.cist-photo-grid__wide img { aspect-ratio: 21 / 9; object-position: center 34%; }
.cist-flyer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.cist-flyer-grid--mockups {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cist-flyer-card {
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #FFF;
  box-shadow: 0 11px 30px rgba(21, 59, 93, .08);
}
.cist-flyer-card__sides {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: #DDE6EC;
}
.cist-flyer-card__sides img {
  width: 100%;
  aspect-ratio: 2400 / 1731;
  display: block;
  object-fit: contain;
  background: #F7F9FB;
}
.cist-flyer-card figcaption {
  display: grid;
  gap: 4px;
  padding: 16px 18px 18px;
}
.cist-flyer-card figcaption strong { color: #183755; font-size: 14px; }
.cist-flyer-card figcaption span { color: #64717C; font-size: 12px; line-height: 1.55; }
.cist-flyer-grid--mockups .cist-flyer-card > img {
  width: 100%;
  aspect-ratio: 3 / 2;
  display: block;
  object-fit: contain;
  background: #C6C6C6;
}
.cist-website-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.cist-website-card--wide { grid-column: span 2; }
.cist-website-card {
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  background: #FFF;
  box-shadow: 0 11px 30px rgba(21, 59, 93, .08);
}
.cist-website-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #EDF1F3;
  border-bottom: 1px solid #DDE6EC;
}
.cist-website-chrome i { width: 8px; height: 8px; border-radius: 50%; background: #C7D0D6; }
.cist-website-chrome span { margin-left: 8px; color: #66737D; font-size: 11px; font-family: 'SFMono-Regular', Menlo, monospace; }
/* Captures de site : ce sont des pages entieres (ratio ~0.75, tres hautes).
   Affichees en height:auto elles produisaient un bloc de ~1900px qui ecrasait
   la fiche. On cadre sur le haut de page, comme une fenetre de navigateur. */
.cist-website-card img {
  width: 100%;
  height: clamp(240px, 27vw, 400px);
  display: block;
  object-fit: cover;
  object-position: top center;
  background: #F7FAFC;
}
.cist-website-card--wide img { height: clamp(300px, 34vw, 520px); }
.cist-website-card figcaption {
  display: grid;
  gap: 4px;
  padding: 16px 18px 18px;
}
.cist-website-card figcaption strong { color: #183755; font-size: 14px; }
.cist-website-card figcaption span { color: #64717C; font-size: 12px; line-height: 1.55; }
.cist-website-visit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 12px 22px;
  border-radius: 999px;
  background: #2055A1;
  color: #FFF;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  transition: transform .2s ease, filter .2s ease;
}
.cist-website-visit:hover { transform: translateY(-2px); filter: brightness(1.08); }
.cist-application-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.cist-application-grid figure { display: grid; grid-template-rows: 1fr auto; }
.cist-application-card--wide { grid-column: span 2; }
.cist-application-grid img {
  width: 100%;
  height: 360px;
  display: block;
  object-fit: cover;
  background: #F1F6F8;
}
/* Mockup cartes de visite : afficher la mise en situation entiere, sans recadrage. */
.cist-application-card--wide img {
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  object-position: center;
}
.cist-application-grid figcaption {
  display: grid;
  gap: 3px;
  padding: 13px 16px 16px;
  color: #183755;
  font-size: 12px;
  font-weight: 600;
}
.cist-application-grid figcaption span { color: #677681; font-weight: 400; line-height: 1.5; }
.cist-social-heading { margin: 46px 0 18px; }
.cist-social-heading > span {
  color: #3B8634;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.cist-social-heading h4 { margin-top: 7px; color: #183755; font-size: 24px; }
.cist-social-showcase {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
  gap: 20px;
  align-items: start;
}
.cist-social-post {
  overflow: hidden;
  border: 1px solid #DDE6EC;
  border-radius: 8px;
  background: #FFF;
  box-shadow: 0 12px 30px rgba(21, 59, 93, .09);
}
.cist-social-post header {
  height: 54px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
}
.cist-social-post header img { width: 34px; height: 34px; object-fit: contain; border-radius: 50%; background: #F1F7FA; }
.cist-social-post header div { display: grid; gap: 1px; }
.cist-social-post header strong { color: #183755; font-size: 11px; }
.cist-social-post header span { color: #72808B; font-size: 9px; }
.cist-social-post header b { margin-left: auto; color: #61707B; font-size: 11px; letter-spacing: 1px; }
.cist-social-post > img { width: 100%; aspect-ratio: 1 / 1; display: block; object-fit: cover; background: #E9EAEA; }
.cist-social-post footer { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px 12px 13px; color: #183755; font-size: 15px; }
.cist-social-post footer b { margin-left: auto; }
.cist-social-post footer p { flex-basis: 100%; color: #596873; font-size: 10px; line-height: 1.45; }
.cist-instagram-actions > span,
.cist-instagram-actions > b { width: 22px; height: 22px; display: grid; place-items: center; }
.cist-instagram-actions svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cist-social-post--landscape > img { aspect-ratio: 16 / 10; object-fit: contain; padding: 14px; }
.cist-social-post--landscape footer { justify-content: space-around; color: #5C6C77; font-size: 10px; font-weight: 600; }
.cist-social-mockup {
  margin: 0;
  overflow: hidden;
  border: 1px solid #DDE6EC;
  border-radius: 8px;
  background: #FFF;
  box-shadow: 0 12px 30px rgba(21, 59, 93, .09);
}
.cist-social-mockup img { width: 100%; aspect-ratio: 1; display: block; object-fit: cover; background: #FFF; }
.cist-social-mockup figcaption { display: grid; gap: 5px; padding: 14px 16px 16px; color: #66737D; font-size: 11px; line-height: 1.5; }
.cist-social-mockup figcaption strong { color: #183755; font-size: 13px; }
.cist-motion-video { overflow: hidden; border-radius: 8px; background: #173B59; box-shadow: 0 14px 34px rgba(21, 59, 93, .15); aspect-ratio: 16 / 9; }
.cist-motion-video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* SMGEAG case study reuses the same editorial shell with its own palette. */
.smgeag-case-backdrop { background: rgba(13, 24, 34, .84); }
.smgeag-case-badge { border-color: #A9C5D8; color: #173B59; }
.smgeag-case-meta { border-color: #68A7DD; }
.smgeag-case-logo { width: min(728px, 100%); max-height: 455px; }
.smgeag-case-section--tinted { background: #F1F5F7; }
.smgeag-case-modal .cist-section-heading > span { color: #237EAE; }
.smgeag-construction-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 1fr);
  gap: 24px;
  align-items: start;
  margin-bottom: 28px;
}
.smgeag-construction-logo {
  display: grid;
  place-items: center;
}
.smgeag-construction-logo img {
  width: 100%;
  max-width: 180px;
  height: auto;
  object-fit: contain;
}
.smgeag-strategy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 980px) {
  .smgeag-construction-heading { grid-template-columns: 1fr; }
  .smgeag-construction-logo { max-width: 320px; justify-self: center; }
}

.smgeag-strategy-grid article {
  padding: 30px;
  border-top: 3px solid #68A7DD;
  border-radius: 0 0 8px 8px;
  background: #F3F7F9;
}
.smgeag-strategy-grid article:last-child { border-color: #173B59; }
.smgeag-strategy-grid b {
  display: block;
  margin-bottom: 24px;
  color: #BBD5E7;
  font-size: 42px;
  line-height: 1;
}
.smgeag-strategy-grid strong { display: block; color: #173B59; font-size: 17px; }
.smgeag-strategy-grid p { margin-top: 8px; color: #65727C; font-size: 13px; line-height: 1.65; }
.smgeag-icon-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.smgeag-icon-grid figure,
.smgeag-logo-grid figure,
.smgeag-showcase-grid figure {
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #FFF;
  box-shadow: 0 10px 28px rgba(23, 59, 89, .09);
}
.smgeag-icon-grid img {
  width: 100%;
  height: 250px;
  display: block;
  padding: 8px;
  object-fit: contain;
  background: #FFF;
}
.smgeag-icon-grid figcaption,
.smgeag-logo-grid figcaption,
.smgeag-showcase-grid figcaption {
  padding: 12px 15px 15px;
  border-top: 1px solid #E5EBEF;
  color: #173B59;
  font-size: 12px;
  font-weight: 600;
}
.smgeag-logo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.smgeag-logo-grid img {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
}
.smgeag-palette .cist-palette-main { height: 145px; }
.smgeag-type-grid strong { font-family: var(--font-poppins); font-weight: 700; letter-spacing: .06em; }
.smgeag-type-grid .smgeag-type-light { font-weight: 300; }
.smgeag-showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.smgeag-showcase-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  display: block;
  object-fit: cover;
}

/* LES BONNES ÉPICES */
.bonnes-case-backdrop { background: rgba(30, 31, 16, .86); }
.bonnes-case-dialog { background: #FFFDF4; }
.bonnes-case-dialog .cist-case-content { padding: clamp(34px, 4vw, 64px); }
.bonnes-case-badge { border-color: #E0B900; color: #597326; }
.bonnes-case-meta { border-color: #F1C500; }
.bonnes-case-logo {
  width: min(360px, 100%);
  max-height: 245px;
  object-fit: contain;
}
.bonnes-case-hero { gap: clamp(28px, 4vw, 58px); padding-bottom: 42px; }
.bonnes-section-heading > span { color: #648429; }
.bonnes-case-hero h2,
.bonnes-section-heading h3 { font-family: var(--font-sans); }
.bonnes-case-section--yellow {
  margin-inline: clamp(-42px, -4vw, -70px);
  padding-inline: clamp(42px, 4vw, 70px);
  background: #FFF3A0;
}
.bonnes-evolution-grid,
.bonnes-system-grid,
.bonnes-application-grid { display: grid; gap: 18px; }
.bonnes-evolution-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bonnes-system-grid { grid-template-columns: 1fr; }
.bonnes-application-grid { grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr); grid-template-rows: auto auto; align-items: stretch; }
.bonnes-evolution-grid figure,
.bonnes-system-grid figure,
.bonnes-application-grid figure {
  margin: 0;
  overflow: hidden;
  border-radius: 9px;
  background: #FFF;
  box-shadow: 0 12px 30px rgba(60, 52, 8, .1);
}
.bonnes-evolution-grid img,
.bonnes-system-grid img,
.bonnes-application-grid img { width: 100%; height: auto; display: block; }
/* Hauteur fixe de 260 px : les deux logos (1.45:1 et 1.78:1) flottaient dans
   un cadre en 2.3:1, avec près de 60 % de vide sur les côtés. Un ratio proche
   de celui des sources les fait respirer sans les déformer ni les recadrer. */
.bonnes-evolution-grid img {
  background: #F6F0DC;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: contain;
}
.bonnes-system-grid img { background: #FFF; }
.bonnes-application-grid img { background: #F8F3E3; }
.bonnes-application-grid__wide { grid-column: 1; }
.bonnes-application-grid__tall { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; }
.bonnes-application-grid__tall img { flex: 1 1 auto; min-height: 0; object-fit: cover; object-position: top; }
.bonnes-evolution-grid figcaption,
.bonnes-application-grid figcaption {
  padding: 13px 16px 15px;
  border-top: 1px solid rgba(96, 101, 38, .14);
  color: #3C4A20;
  font-size: 12px;
  font-weight: 600;
}
.bonnes-evolution-grid figcaption span {
  display: inline-flex; margin-right: 8px; padding: 4px 8px; border-radius: 99px;
  background: #648429; color: #fff; font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
}
.bonnes-process-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.bonnes-process-card {
  min-height: 280px;
  padding: 28px;
  border: 1px solid rgba(30, 44, 31, .12);
  border-radius: 8px;
  background: #FFF;
  box-shadow: 0 12px 28px rgba(52, 64, 31, .07);
}
.bonnes-process-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 28px;
  border: 2px solid #286536;
  border-radius: 50%;
  color: #286536;
  font-size: 27px;
  font-weight: 500;
  line-height: 1;
}
.bonnes-process-card h4 {
  margin: 0 0 17px;
  color: #32662B;
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.bonnes-process-card ul {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0;
  color: #303632;
  font-size: 13px;
  line-height: 1.5;
  list-style: none;
}
.bonnes-process-dossier {
  margin-top: 52px;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 0;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(30, 44, 31, .12);
  border-radius: 8px;
  background: #FFF;
  box-shadow: 0 12px 28px rgba(52, 64, 31, .07);
}
.bonnes-process-dossier__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 32px;
}
.bonnes-process-dossier__text h4 {
  margin: 0;
  color: #253428;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-left: 3px solid #3B8634;
  padding-left: 10px;
}
.bonnes-process-dossier__text p {
  margin: 0;
  color: #4A564C;
  font-size: 13px;
  line-height: 1.6;
}
.bonnes-process-dossier__legend {
  display: grid;
  gap: 8px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: #303632;
}
.bonnes-process-dossier__legend li { display: flex; align-items: center; gap: 8px; }
.bonnes-process-dossier__legend span {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--dot);
}
.bonnes-process-dossier__media {
  display: flex;
  flex-direction: column;
  background: #F1EEDD;
}
.bonnes-process-dossier img {
  display: block;
  width: 100%;
  height: auto;
  flex: 1;
  object-fit: contain;
  background: #F7F6F1;
}
.bonnes-process-dossier figcaption {
  padding: 13px 16px;
  border-top: 1px solid rgba(30, 44, 31, .1);
  color: #253428;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}
@media (max-width: 720px) {
  .bonnes-process-dossier { grid-template-columns: 1fr; }
}

/* === Système de marque — reproduction du schéma === */
.bonnes-bsys { display: flex; flex-direction: column; gap: 8px; }

.bonnes-bsys__variants {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.bonnes-bsys__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--bsys-border, transparent);
  border-radius: 8px;
}
.bonnes-bsys__card-logo {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bsys-bg, #FFF);
  padding: 20px 14px;
}
.bonnes-bsys__card-logo img {
  display: block;
  width: 100%;
  max-width: 100px;
  height: auto;
}
.bonnes-bsys__card--svg .bonnes-bsys__card-logo {
  padding: 18px;
}
.bonnes-bsys__card--svg .bonnes-bsys__card-logo img {
  max-width: 240px;
}
.bonnes-bsys__card-swatch {
  height: 24px;
  background: var(--bsys-swatch, #FFF);
  border-top: 1px solid rgba(0,0,0,.08);
}

.bonnes-bsys__horiz-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.bonnes-bsys__horiz {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bsys-bg, #FAEA1D);
  border: 1px solid var(--bsys-border, transparent);
  border-radius: 8px;
  padding: 16px;
  overflow: hidden;
}
.bonnes-bsys__horiz img {
  display: block;
  width: 100%;
  height: auto;
}
.bonnes-bsys__horiz-label {
  margin: 0;
  padding: 4px 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  color: #5A6B5B;
  text-transform: uppercase;
}
.bonnes-bsys__note {
  margin: 0;
  padding: 0 2px 6px;
  font-size: 13px;
  line-height: 1.5;
  color: #5A6B5B;
}

.bonnes-bsys__patterns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.bonnes-bsys__pattern {
  border-radius: 8px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
/* Les motifs sont des aplats répétitifs en 1.41:1 : « contain » les
   laissait flotter au milieu d'un cadre carré avec de grandes bandes vides.
   « cover » remplit la tuile sans rien perdre de lisible. */
.bonnes-bsys__pattern--tile {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.bonnes-bsys__banner {
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
}
.bonnes-bsys__banner img {
  display: block;
  width: 100%;
  height: auto;
}

.bonnes-situation-grid figure,
.bonnes-editorial-block,
.bonnes-contact-phone,
.bonnes-business-card {
  margin: 0;
  border: 1px solid rgba(30, 44, 31, .12);
  border-radius: 8px;
  background: #FFF;
  box-shadow: 0 12px 28px rgba(52, 64, 31, .07);
}
.bonnes-situation-grid figcaption,
.bonnes-contact-phone figcaption,
.bonnes-business-card figcaption {
  padding: 13px 16px;
  color: #253428;
  font-size: 11px;
  font-weight: 600;
}

.bonnes-colour-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.bonnes-colour-grid article {
  padding: 10px 10px 16px;
  border: 1px solid rgba(30, 44, 31, .12);
  border-radius: 8px;
  background: #FFF;
  box-shadow: 0 10px 24px rgba(52, 64, 31, .06);
}
.bonnes-colour-swatch {
  display: block;
  aspect-ratio: 1;
  margin-bottom: 18px;
  border: 1px solid rgba(30, 44, 31, .12);
  border-radius: 5px;
  background: var(--bonnes-colour);
}
.bonnes-colour-grid h4 { margin: 0 6px 5px; color: #245D2D; font-size: 13px; }
.bonnes-colour-grid code { display: block; margin: 0 6px 16px; color: #232724; font-size: 11px; }
.bonnes-colour-tones {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  padding: 0 6px;
}
.bonnes-colour-tones i {
  display: block;
  aspect-ratio: 1;
  border: 1px solid rgba(30, 44, 31, .08);
  border-radius: 4px;
  background: var(--bonnes-colour);
}
.bonnes-colour-tones i:nth-child(2) { opacity: .8; }
.bonnes-colour-tones i:nth-child(3) { opacity: .6; }
.bonnes-colour-tones i:nth-child(4) { opacity: .4; }
.bonnes-colour-tones i:nth-child(5) { opacity: .2; }
/* === Specimen typographique format dossier === */
.bonnes-type-dossier {
  margin-top: 38px;
  padding: 32px 36px 40px;
  border: 1px solid rgba(30, 44, 31, .12);
  border-radius: 10px;
  background: #FDFCF8;
  box-shadow: 0 12px 28px rgba(52, 64, 31, .07);
  overflow: hidden;
}
.bonnes-type-dossier__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 36px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(30, 44, 31, .12);
}
.bonnes-type-dossier__meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bonnes-type-dossier__meta span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #789174;
}
.bonnes-type-dossier__nameblock {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.bonnes-type-dossier__family {
  font-family: var(--font-serif);
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 700;
  line-height: 1;
  color: #1E2C1F;
}
.bonnes-type-dossier__weight {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  color: #5A6B5B;
  border: 1px solid rgba(30,44,31,.18);
  border-radius: 4px;
  padding: 3px 8px;
}
.bonnes-type-dossier__style {
  font-size: 10px;
  color: #7A8A7B;
}
.bonnes-type-dossier__section-label {
  margin: 0 0 20px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #789174;
}
.bonnes-type-dossier__chars {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 6px;
  margin-bottom: 10px;
  font-family: var(--font-serif);
  font-size: clamp(22px, 3.2vw, 42px);
  font-weight: 700;
  line-height: 1.1;
  color: #1E2C1F;
}
.bonnes-type-dossier__chars--lower {
  font-weight: 400;
  color: #3A4F3B;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(30, 44, 31, .1);
}
.bonnes-type-dossier__nums {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-family: var(--font-serif);
  font-size: clamp(32px, 4.8vw, 58px);
  font-weight: 700;
  line-height: 1;
  color: #1E2C1F;
  margin-top: 4px;
}

.bonnes-situation-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

:is(
  .bonnes-process-section,
  .bonnes-variants-section,
  .bonnes-colours-section,
  .bonnes-situation-section,
  .bonnes-terrain-section,
  .bonnes-language-section,
  .bonnes-recipe-section,
  .bonnes-contact-section
) {
  position: relative;
  /* Espacement resserré : l'étude dépassait 8000 px de haut, dont environ
     720 px de pur espacement entre les huit sections. */
  margin: 18px 0;
  padding: clamp(28px, 3vw, 42px) clamp(18px, 3.8vw, 52px);
  border: 1px solid rgba(30, 44, 31, .12);
  border-radius: 8px;
  background: #FFFDF4;
  box-shadow: 0 14px 34px rgba(30, 44, 31, .045);
}

:is(
  .bonnes-variants-section,
  .bonnes-colours-section,
  .bonnes-situation-section,
  .bonnes-terrain-section,
  .bonnes-language-section,
  .bonnes-recipe-section,
  .bonnes-contact-section
)::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -20px;
  left: 50%;
  width: 40px;
  height: 40px;
  transform: translateX(-50%);
  border: 1px solid rgba(40, 144, 70, .24);
  border-radius: 50%;
  background: #FFFDF4 url('/assets/projects/branding/bonnes-epices/applications/icon.webp') center / 31px auto no-repeat;
  box-shadow: 0 5px 14px rgba(30, 44, 31, .08);
}

.bonnes-terrain-section { background: #F7F3E8; }
.bonnes-situation-grid__half { grid-column: span 3; }
.bonnes-situation-grid__large { grid-column: span 3; }
.bonnes-situation-grid figure { overflow: hidden; }
.bonnes-situation-grid figcaption { border-bottom: 1px solid rgba(30, 44, 31, .1); }
.bonnes-situation-grid img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 660px;
  object-fit: contain;
  background: #F7F6F1;
}
.bonnes-situation-grid__half img { aspect-ratio: 4 / 3; }
.bonnes-situation-grid__large img { aspect-ratio: 3 / 2; }
.bonnes-situation-grid__facebook img { aspect-ratio: 1328 / 1131; }

.bonnes-terrain-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  align-items: stretch;
  gap: 10px;
}
.bonnes-terrain-grid figure {
  margin: 0;
  overflow: hidden;
  border-radius: 6px;
}
.bonnes-terrain-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: center top;
}
.bonnes-terrain-grid figcaption {
  padding: 8px 10px 0;
  color: #596258;
  font-size: 10px;
}

.bonnes-editorial-block {
  padding: 18px;
}
.bonnes-editorial-block + .bonnes-editorial-block { margin-top: 22px; }
.bonnes-editorial-block .bonnes-carousel-track { padding: 0; }
.bonnes-editorial-label {
  display: grid;
  gap: 3px;
  margin-bottom: 16px;
  color: #28332B;
  text-transform: uppercase;
}
.bonnes-editorial-label span { font-size: 11px; font-weight: 500; }
.bonnes-editorial-label strong { font-size: 10px; }
.bonnes-colombo-grid {
  display: grid;
  grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: 16px;
}
.bonnes-colombo-grid figure,
.bonnes-history-grid figure,
.bonnes-carousel-track figure {
  min-width: 0;
  margin: 0;
}
.bonnes-colombo-grid img,
.bonnes-history-grid img,
.bonnes-carousel-track img {
  display: block;
  width: 100%;
  height: auto;
}
.bonnes-history-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}
.bonnes-history-grid figure {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #F6F6F3;
}
.bonnes-history-grid img {
  aspect-ratio: 1;
  object-fit: contain;
}

.bonnes-carousel-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  padding: 18px;
}
.bonnes-carousel-track:focus-visible { outline: 2px solid #289046; outline-offset: 4px; }
.bonnes-carousel-track figure {
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(30, 44, 31, .08);
}
.bonnes-carousel-track--application {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.bonnes-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: stretch;
  gap: 16px;
}
.bonnes-contact-grid--simple .bonnes-business-card {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
.bonnes-contact-grid--simple .bonnes-business-card img {
  flex: 1;
  min-height: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #F5F3EC;
}
.bonnes-contact-grid > * { min-width: 0; }
.bonnes-contact-recipes {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  padding: 20px;
}
.bonnes-contact-phone {
  align-self: stretch;
  overflow: hidden;
}
.bonnes-contact-phone img {
  display: block;
  width: 100%;
  height: auto;
}
.bonnes-contact-phone figcaption,
.bonnes-business-card figcaption { border-top: 1px solid rgba(30, 44, 31, .1); }
.bonnes-business-card {
  margin-top: 20px;
  overflow: hidden;
}
.bonnes-business-card figcaption { border-top: 0; border-bottom: 1px solid rgba(30, 44, 31, .1); }
.bonnes-business-card img { display: block; width: 100%; height: auto; }

@media (max-width: 1120px) {
  .bonnes-variant-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bonnes-variant-grid__wide { grid-column: span 3; }
  .bonnes-variant-grid__full { grid-column: 1 / -1; }
  .bonnes-colour-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bonnes-situation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bonnes-situation-grid__half,
  .bonnes-situation-grid__small { grid-column: span 1; }
  .bonnes-situation-grid__large { grid-column: 1 / -1; }
  .bonnes-contact-grid { grid-template-columns: minmax(0, 1.4fr) minmax(230px, .72fr); }
}

@media (max-width: 768px) {
  :is(
    .bonnes-process-section,
    .bonnes-variants-section,
    .bonnes-colours-section,
    .bonnes-situation-section,
    .bonnes-terrain-section,
    .bonnes-language-section,
    .bonnes-recipe-section,
    .bonnes-contact-section
  ) {
    width: 100%;
    min-width: 0;
    margin: 22px 0;
    padding: 34px 14px 30px;
  }
  .bonnes-process-grid,
  .bonnes-terrain-grid,
  .bonnes-colombo-grid,
  .bonnes-contact-grid { grid-template-columns: 1fr; }
  .bonnes-process-card { min-height: 0; }
  .bonnes-process-zoom {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding-inline: 0;
  }
  .bonnes-process-zoom__detail { width: min(330px, 88%); justify-self: center; }
  .bonnes-process-zoom__line { display: none; }
  .bonnes-process-zoom__logo { width: min(380px, 88%); }
  .bonnes-variant-grid,
  .bonnes-colour-grid,
  .bonnes-history-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bonnes-variant-grid__wide,
  .bonnes-variant-grid__full { grid-column: 1 / -1; }
  .bonnes-bsys__variants { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bonnes-type-dossier { padding: 22px 18px 28px; }
  .bonnes-type-dossier__header { flex-direction: column-reverse; gap: 12px; }
  .bonnes-type-dossier__chars { font-size: clamp(36px, 8vw, 64px); }
  .bonnes-type-dossier__nums { font-size: clamp(56px, 12vw, 90px); }
  .bonnes-situation-grid { grid-template-columns: 1fr; }
  .bonnes-situation-grid__half,
  .bonnes-situation-grid__small,
  .bonnes-situation-grid__large { grid-column: span 1; }
  .bonnes-situation-grid img { max-height: none; }
  .bonnes-terrain-grid { gap: 28px; }
  .bonnes-carousel-track,
  .bonnes-carousel-track--application {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-template-columns: none;
    grid-auto-columns: min(82vw, 330px);
    grid-auto-flow: column;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }
  .bonnes-contact-recipes { padding: 14px; }
  .bonnes-carousel-track figure { scroll-snap-align: start; }
  .bonnes-contact-phone img { height: auto; max-height: 680px; }
}

@media (max-width: 480px) {
  .bonnes-variant-grid,
  .bonnes-colour-grid,
  .bonnes-history-grid { grid-template-columns: 1fr; }
  .bonnes-variant-grid__wide,
  .bonnes-variant-grid__full { grid-column: span 1; }
  .bonnes-bsys__variants { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bonnes-bsys__horiz-row { grid-template-columns: 1fr; }
  .bonnes-bsys__patterns { grid-template-columns: 1fr; }
  .bonnes-type-dossier__chars { font-size: clamp(28px, 9vw, 48px); }
  .bonnes-type-dossier__nums { font-size: clamp(48px, 14vw, 72px); }
}

/* Mobile nav section label */
.ls-mobile-label {
  font-family: var(--font-poppins); font-size: 10px; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--color-gray-mid); padding: 16px 0 4px; display: block;
}

/* ── LAZY IMAGES ── */
img[loading="lazy"] { transition: opacity 0.4s var(--ease); }
img[loading="lazy"].loaded { opacity: 1; }

/* ══════════════════════════════════════════════════════
   PAGE TRANSITION — soft fade-up on enter, cream curtain on leave
   ══════════════════════════════════════════════════════ */
.ls-page-anim #main-content { animation: lsPageIn 0.6s var(--ease) both; }
@keyframes lsPageIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
#ls-curtain {
  position: fixed; inset: 0; z-index: 6000;
  background: var(--color-cream);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.42s var(--ease), visibility 0.42s var(--ease);
}
#ls-curtain.show { opacity: 1; visibility: visible; }
#ls-curtain img { opacity: 0.5; animation: lsCurtainBob 0.85s ease-in-out infinite alternate; }
@keyframes lsCurtainBob {
  from { transform: translateY(2px) scale(0.98); opacity: 0.45; }
  to   { transform: translateY(-6px) scale(1.05); opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) {
  .ls-page-anim #main-content { animation: none; }
}

/* Cocotier icon (replaces the 🌴 emoji under the arc) */
img
/* ══════════════════════════════════════════════════════
   STAGGERED REVEAL (client logos, etc.)
   ══════════════════════════════════════════════════════ */
.stagger-item {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.stagger-item.in { opacity: 1; transform: translateY(0); }

/* Client logos fade IN to the dimmed (0.6) look, one after another */
.ls-clients-grid img.stagger-item       { opacity: 0; transform: translateY(14px); }
.ls-clients-grid img.stagger-item.in     { opacity: 0.6; transform: translateY(0); }
.ls-clients-grid img.stagger-item.in:hover { opacity: 1; }

/* ══════════════════════════════════════════════════════
   PROJECT MODAL
   ══════════════════════════════════════════════════════ */
.ls-modal {
  position: fixed; inset: 0; z-index: 5200;
  display: none; align-items: center; justify-content: center;
  padding: 18px;
}
.ls-modal.open { display: flex; }
.ls-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(20,20,18,0.78);
  backdrop-filter: blur(4px);
  animation: lsModalFade 0.25s var(--ease);
}
@keyframes lsModalFade { from { opacity: 0; } to { opacity: 1; } }
.ls-modal-dialog {
  position: relative; z-index: 1;
  width: min(1680px, 100%); max-height: calc(100vh - 36px);
  background: var(--color-white);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,0.45);
  animation: lsModalPop 0.3s var(--ease);
  display: flex; flex-direction: column;
}
@keyframes lsModalPop { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
.ls-modal-close {
  position: absolute; top: 18px; right: 20px; z-index: 5;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(252,252,251,0.96); color: #1A1A1A;
  font-size: 26px; line-height: 1; border: none; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.16);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur), transform var(--dur);
}
.ls-modal-close:hover { background: var(--color-white); transform: rotate(90deg); }
.ls-modal-totop {
  position: absolute; z-index: 4; right: 22px; bottom: 22px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(20,20,20,.82); color: #fff; border: none; cursor: pointer;
  font-size: 17px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease), background .2s var(--ease);
}
.ls-modal-totop.visible { opacity: 1; transform: none; pointer-events: auto; }
.ls-modal-totop:hover { background: #000; }
.ls-modal:not(.custom-mode) .ls-modal-totop { display: none; }
.ls-modal-head { padding: 34px 56px 24px; border-bottom: 1px solid #ECEAE6; }
.ls-modal-kicker { color: #B98969; font-size: 10px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; margin-bottom: 9px; }
.ls-modal-viewport { position: relative; overflow: hidden; background: #11110F; flex: 1 1 auto; min-height: 0; }
.ls-modal-head { flex: 0 0 auto; }
.ls-modal-track {
  display: flex; width: 100%;
  transition: transform .36s var(--ease);
}
.ls-modal-slide {
  min-width: 100%; margin: 0; display: grid; place-items: center;
  background: #11110F; overflow: hidden;
}
.ls-modal-slide img {
  width: 100%; height: min(66vh, 680px); object-fit: contain;
  background: #11110F; display: block;
}
.ls-modal.light-surface .ls-modal-viewport,
.ls-modal.light-surface .ls-modal-slide,
.ls-modal.light-surface .ls-modal-slide img { background: #EAE6DF; }
.ls-modal-title  { font-family: var(--font-poppins); font-size: 16px; font-weight: 700; color: var(--color-black); }
.ls-modal-client { font-family: var(--font-poppins); font-size: 13px; color: var(--color-gray-mid); }
.ls-modal-arrow {
  position: absolute; z-index: 2; top: 50%; width: 44px; height: 44px;
  transform: translateY(-50%); border: 0; border-radius: 50%;
  background: rgba(252,252,251,.96); color: var(--color-black);
  font-size: 30px; line-height: 1; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.ls-modal-arrow--prev { left: 16px; }
.ls-modal-arrow--next { right: 16px; }
.ls-modal-dots {
  min-height: 30px; display: flex; align-items: center; justify-content: center;
  gap: 7px; padding: 10px 20px; background: var(--color-white);
}
.ls-modal-dots button {
  width: 7px; height: 7px; padding: 0; border: 1px solid #B98969;
  border-radius: 50%; background: transparent; cursor: pointer;
}
.ls-modal-dots button.active { background: #B98969; }

/* Social projects: four simulated Instagram posts and one vertical reel. */
.ls-modal.grid-mode .ls-modal-dialog { width: min(1680px, 100%); }
.ls-modal.grid-mode .ls-modal-head { padding: 34px 76px 24px 44px; }
.ls-modal.grid-mode .ls-modal-viewport { overflow: auto; background: #F7F5F1; }
.ls-modal.grid-mode .ls-modal-track {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(250px, .72fr);
  align-items: start; gap: 22px; padding: 22px;
}
.ls-modal.grid-mode .ls-modal-track--social-no-reel { grid-template-columns: minmax(0, 1fr); }
.ls-social-posts {
  min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.ls-ig-post {
  min-width: 0; overflow: hidden; border: 1px solid #E7E3DE; border-radius: 8px;
  background: #FCFCFB; box-shadow: 0 7px 18px rgba(26,26,26,.07);
}
.ls-ig-head {
  height: 38px; display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  color: #1A1A1A; font-size: 10px;
}
.ls-ig-avatar {
  width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%;
  background: #1A1A1A; color: #FCFCFB; font-size: 9px; font-weight: 700;
  object-fit: cover; flex: none;
}
.ls-ig-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-ig-more { margin-left: auto; letter-spacing: 1px; }
.ls-ig-image {
  width: 100%; aspect-ratio: 4 / 5; display: block; object-fit: contain;
  border-block: 1px solid #EEEAE5; background: #EEEAE5;
}
.ls-ig-post--wide { grid-column: 1 / -1; }
.ls-ig-post--wide .ls-ig-image { aspect-ratio: 16 / 9; }
.ls-ig-actions { display: flex; align-items: center; gap: 9px; padding: 8px 10px 4px; color: #111; }
.ls-ig-actions span { width: 17px; height: 17px; display: grid; place-items: center; }
.ls-ig-actions svg, .ls-ig-reel svg {
  width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.ls-ig-actions .ls-ig-save { margin-left: auto; }
.ls-ig-likes, .ls-ig-caption {
  padding-inline: 10px; color: #222; font-size: 9px; line-height: 1.4;
}
.ls-ig-likes { margin-bottom: 2px; font-weight: 600; }
.ls-ig-caption { min-height: 26px; margin-bottom: 8px; }
.ls-ig-reel {
  position: relative; aspect-ratio: 9 / 16; max-height: 620px;
  overflow: hidden; border-radius: 8px;
  background: #111; box-shadow: 0 12px 30px rgba(26,26,26,.18);
}
.ls-ig-reel--embed {
  aspect-ratio: auto; max-height: none; background: #FFF;
  display: flex; align-items: flex-start; justify-content: center;
}
.ls-ig-reel--embed iframe { border-radius: 8px !important; }
.ls-ig-reel-image, .ls-ig-reel-frame { width: 100%; height: 100%; min-height: 0; display: block; object-fit: cover; border: 0; }
.ls-ig-reel-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.3), transparent 28%, transparent 62%, rgba(0,0,0,.7)); }
.ls-ig-reel-top, .ls-ig-reel-bottom, .ls-ig-reel-play { position: absolute; z-index: 1; color: #fff; }
.ls-ig-reel-top { top: 15px; left: 15px; right: 15px; display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; }
.ls-ig-reel-top span:last-child { width: 20px; height: 20px; }
.ls-ig-reel-play {
  top: 50%; left: 50%; width: 48px; height: 48px; display: grid; place-items: center;
  padding: 12px; border-radius: 50%; transform: translate(-50%,-50%);
  background: rgba(0,0,0,.48); backdrop-filter: blur(8px);
}
.ls-ig-reel-bottom { left: 16px; right: 16px; bottom: 16px; font-size: 11px; }
.ls-ig-reel-bottom p { margin-top: 4px; color: rgba(255,255,255,.82); font-size: 10px; }
.ls-ig-reel-cta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.95);
  color: #111; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.ls-ig-reel-cta:hover { background: #FFF; }
.ls-modal-desc { margin-top: 10px; max-width: 640px; color: var(--color-gray-mid); font-size: 12px; line-height: 1.6; }
.ls-modal-desc-kicker {
  display: block; margin-bottom: 5px; color: #B98969; font-size: 10px;
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.ls-ig-reel--empty { background: radial-gradient(circle at 50% 38%, #1c1c1c, #060606 74%); }
.ls-ig-reel-pending {
  position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: rgba(255,255,255,.5); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; white-space: nowrap;
}
.ls-ig-reel-pending span { font-size: 22px; }

/* Left column wrapper: 2x2 grid + faded "more posts" hint */
.ls-social-left { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.ls-social-reels-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.ls-social-reels-row .ls-ig-reel { width: 100%; max-height: none; }
.ls-social-cta-row { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 6px; }
.ls-social-contact-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 26px; border-radius: var(--btn-radius); border: 2px solid var(--color-black);
  background: var(--color-black); color: var(--color-white); font-family: var(--font-poppins);
  font-size: 14px; font-weight: 500; white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ls-social-contact-cta::after { content: '→'; font-size: 18px; line-height: 1; }
.ls-social-contact-cta:hover { background: var(--color-olive); border-color: var(--color-olive); }
.ls-social-contact-cta--ghost { background: transparent; color: var(--color-black); }
.ls-social-contact-cta--ghost:hover { background: var(--color-black); color: var(--color-white); border-color: var(--color-black); }
.ls-social-more { position: relative; }
.ls-social-more-row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
  filter: blur(1.5px); opacity: .55;
}
.ls-ig-post-ghost {
  display: block; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden;
  border: 1px solid #E7E3DE; background: #FCFCFB;
}
.ls-ig-post-ghost img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ls-social-more-fade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(247,245,241,0) 0%, #F7F5F1 82%);
}
.ls-social-more-dots {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  width: 34px; height: 20px; border-radius: 999px; background: rgba(255,255,255,.96);
  display: grid; place-items: center; font-size: 12px; letter-spacing: 1px; color: #666;
  box-shadow: 0 4px 14px rgba(0,0,0,.14);
}

/* Carousel arrows inside a post image (Cap Créole style) */
.ls-ig-image-wrap { position: relative; }
.ls-ig-carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 22px; height: 22px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.88); color: #111; font-size: 14px; line-height: 1;
  display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.ls-ig-carousel-arrow--prev { left: 6px; }
.ls-ig-carousel-arrow--next { right: 6px; }
.ls-ig-carousel-dots {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); z-index: 2;
  display: flex; gap: 4px;
}
.ls-ig-carousel-dots span { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.55); }
.ls-ig-carousel-dots span.active { background: #FFF; }

/* Google Ads style banner — standalone block, separate from the Instagram posts grid */
.ls-social-ad {
  position: relative; overflow: hidden; border-radius: 8px;
  border: 1px solid #E3E0DC; background: #FCFCFB; box-shadow: 0 7px 18px rgba(26,26,26,.07);
}
.ls-ig-ad-image { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; display: block; }
.ls-social-ad--expanded .ls-ig-ad-image {
  aspect-ratio: auto;
  max-height: 720px;
  object-fit: contain;
  object-position: center;
  background: #fff;
}
.ls-ig-ad-badge {
  position: absolute; z-index: 2; top: 10px; left: 10px; padding: 3px 9px;
  background: rgba(255,255,255,.94); border-radius: 4px; color: #555;
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.ls-ig-ad-foot { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.ls-ig-ad-favicon {
  width: 26px; height: 26px; border-radius: 6px; background: #4285F4; color: #FFF;
  display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none;
  object-fit: cover;
}
.ls-ig-ad-text { min-width: 0; line-height: 1.25; }
.ls-ig-ad-text strong { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-ig-ad-text small { color: #789; font-size: 10px; }
.ls-ig-ad-cta {
  margin-left: auto; padding: 7px 12px; border-radius: 5px; background: #F1F3F4;
  color: #1A73E8; font-size: 10px; font-weight: 700; white-space: nowrap;
}
@media (max-width: 760px) {
  .ls-social-reels-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Catalogue case studies */
.cat-case { --cat-accent:#1F6F8E; --cat-soft:#F2F6F8; color:#161616; }
.cat-case--decathlon { --cat-accent:#0082C3; --cat-soft:#EAF7FD; }
.cat-case--mr { --cat-accent:#E6322B; --cat-soft:#FFF2F0; }
.cat-case--gamm { --cat-accent:#4A8B2C; --cat-soft:#F1F7E8; }
/* Les études de cas pilotées par les données (renderCatalogueCaseHTML) fixent
   --cat-accent/--cat-soft en inline sur l'article — pas besoin de règle ici
   par client. .cat-case--foirfouille sert uniquement de sélecteur pour les
   ajustements ponctuels ci-dessous (taille du logo, etc). */
.cat-case--carrefour { --cat-accent:#254F9A; --cat-soft:#EEF3FA; }
.cat-case--digilife { --cat-accent:#E2343A; --cat-soft:#0E0E0E; background:#090909; color:#FFF; }
.cat-case-hero {
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(190px,.7fr); gap:48px; align-items:center;
  padding:64px clamp(32px,5vw,88px); background:var(--cat-soft); border-bottom:4px solid var(--cat-accent);
}
.cat-case-hero > div > span,
.cat-case-heading > span { display:block; margin-bottom:12px; color:var(--cat-accent); font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.cat-case-hero h2 { margin:0 0 16px; font-size:clamp(38px,5vw,68px); line-height:1; }
.cat-case-hero p { max-width:620px; color:#5E6367; font-size:14px; line-height:1.75; }
.cat-case-hero > img { width:min(240px,100%); max-height:150px; justify-self:center; object-fit:contain; }
.cat-case--foirfouille .cat-case-hero > img { width:clamp(220px,24vw,340px); max-height:180px; }
.cat-case--digilife .cat-case-hero p { color:rgba(255,255,255,.68); }
.cat-case--digilife .cat-case-hero > img { filter:brightness(0) invert(1); }
.cat-case > section { padding:44px clamp(32px,5vw,88px); border-bottom:1px solid rgba(90,90,90,.15); max-width:1640px; margin-inline:auto; }
.cat-case-heading { max-width:700px; margin-bottom:20px; }
.cat-case-heading h3 { margin:0; font-size:clamp(24px,3vw,38px); }
.cat-case-heading p { margin-top:12px; color:#6A6C70; line-height:1.7; }
.cat-case--digilife .cat-case-heading p { color:rgba(255,255,255,.62); }
/* La regle globale h3 force color:var(--color-black) : illisible sur le fond sombre. */
.cat-case--digilife .cat-case-heading h3,
.cat-case--digilife .cat-case-hero h2 { color:#FFF; }

/* ── Fiche catalogue : blocs de démonstration (chiffres, enjeu, méthode) ──
   Reprennent --cat-accent / --cat-soft, donc se brandent seuls par enseigne. */
.cat-case-facts {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px;
  background:rgba(90,90,90,.15); border:1px solid rgba(90,90,90,.15); border-radius:10px; overflow:hidden;
}
.cat-case-facts > div { padding:26px 24px; background:#FFF; }
.cat-case--digilife .cat-case-facts > div { background:#0E0E0E; }
.cat-case-facts strong {
  display:block; margin-bottom:6px; color:var(--cat-accent);
  font-size:clamp(30px,3.4vw,42px); font-weight:700; line-height:1;
}
.cat-case-facts span { color:#6A6C70; font-size:12px; line-height:1.5; }
.cat-case--digilife .cat-case-facts span { color:rgba(255,255,255,.62); }

.cat-case-split { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.cat-case-split article { padding:30px 28px; border-radius:10px; background:var(--cat-soft); }
.cat-case-split article + article { background:#FFF; border:1px solid rgba(90,90,90,.16); }
.cat-case--digilife .cat-case-split article + article { background:#0E0E0E; }
.cat-case-split h4 {
  margin:0 0 12px; color:var(--cat-accent);
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.cat-case-split p { margin:0 0 10px; color:#4E5155; font-size:14px; line-height:1.75; }
.cat-case-split p:last-child { margin-bottom:0; }
.cat-case--digilife .cat-case-split p { color:rgba(255,255,255,.72); }

.cat-case-method { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:20px; counter-reset:step; }
.cat-case-method article { padding-top:18px; border-top:3px solid var(--cat-accent); counter-increment:step; }
.cat-case-method article::before {
  content:counter(step,decimal-leading-zero); display:block; margin-bottom:10px;
  color:var(--cat-accent); font-size:12px; font-weight:700; letter-spacing:.1em;
}
.cat-case-method strong { display:block; margin-bottom:8px; font-size:15px; }
.cat-case-method p { margin:0; color:#6A6C70; font-size:13px; line-height:1.65; }
.cat-case--digilife .cat-case-method p { color:rgba(255,255,255,.62); }

@media (max-width:860px) {
  .cat-case-split { grid-template-columns:1fr; }
}

.cat-case-pages { display:grid; gap:14px; align-items:stretch; }
.cat-case-pages--five { grid-template-columns:repeat(2,minmax(0,1fr)); }
.cat-case-pages--five figure:last-child { grid-column:1 / -1; width:calc(50% - 7px); justify-self:center; }
.cat-case-pages--three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.cat-case-pages--two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.cat-case-pages--foir-featured { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
.cat-case-pages--foir-featured figure:first-child { grid-column:1 / -1; }
.cat-case-pages figure,
.cat-case-mockup figure,
.cat-case-editorial figure,
.cat-case-bandeaux figure { margin:0; overflow:hidden; border-radius:9px; background:#FFF; box-shadow:0 14px 32px rgba(0,0,0,.11); }
.cat-case-pages img { width:100%; height:100%; min-height:0; display:block; object-fit:contain; }
.cat-case-pages--five img,
.cat-case-pages--three img { aspect-ratio:3 / 2; object-fit:contain; background:#F7F7F4; }
.cat-case-pages--two img { aspect-ratio:4 / 3; object-fit:contain; background:#F1EEE7; }
.cat-case-pages--foir-featured img { width:100%; height:auto; aspect-ratio:auto; object-fit:contain; background:#FFF; }
.cat-case-pages figcaption,
.cat-case-mockup figcaption,
.cat-case-editorial figcaption { padding:11px 13px; border-top:1px solid #EBE8E3; color:#62666A; font-size:10px; font-weight:600; }
.cat-case-mockup { background:linear-gradient(145deg,var(--cat-soft),#FFF); }
.cat-case--digilife .cat-case-mockup { background:#111; }
.cat-case-mockup img,
.cat-case-editorial img { width:100%; height:auto; max-height:720px; display:block; object-fit:contain; }
.cat-case-film { display:grid; grid-template-columns:minmax(0,.8fr) minmax(300px,1.2fr); gap:34px; align-items:center; background:#111; }
.cat-case-film-placeholder { aspect-ratio:16 / 9; display:grid; place-items:center; align-content:center; gap:14px; border:1px solid #292929; border-radius:10px; background:radial-gradient(circle at 50% 50%,#291013,#080808 72%); color:rgba(255,255,255,.68); }
.cat-case-film-placeholder span { width:58px; height:58px; display:grid; place-items:center; padding-left:4px; border-radius:50%; background:#E2343A; color:#FFF; font-size:22px; }
.cat-case-film-placeholder strong { font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.cat-case-bandeaux { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; align-items:start; }
.cat-case-bandeaux img { width:100%; height:auto; display:block; }
@media (max-width:760px) {
  .cat-case-hero { grid-template-columns:1fr; padding:48px 24px; }
  .cat-case-hero > img { justify-self:start; }
  .cat-case > section { padding:42px 24px; }
  .cat-case-pages--five { grid-template-columns:1fr; }
  .cat-case-pages--five figure:last-child { grid-column:auto; width:100%; }
  .cat-case-pages--three { grid-template-columns:1fr; }
  .cat-case-pages--two { grid-template-columns:1fr; }
  .cat-case-pages--foir-featured { grid-template-columns:1fr; }
  .cat-case-pages--foir-featured figure:first-child { grid-column:auto; }
  .cat-case-film { grid-template-columns:1fr; }
  .cat-case-bandeaux { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ── Bloc de chiffres à trois colonnes, variante avec libellé intermédiaire ── */
.cat-case-facts--split strong { font-size:clamp(22px,2.6vw,32px); }
.cat-case-facts--split b { display:block; margin:2px 0 10px; font-size:14px; font-weight:700; color:#161616; }

/* ── Nos expertises / bloc de confiance : grille éditoriale légère sans compteur ── */
.cat-case-method--plain article::before { display:none; }
.cat-case-method--plain article { padding-top:14px; }

/* ── Réalisations : mockup des trois couvertures, pleine largeur ── */
.cat-case-showcase { background:linear-gradient(145deg,var(--cat-soft),#FFF); border-radius:14px; padding:clamp(24px,4vw,56px); }
.cat-case-showcase img { display:block; width:100%; height:auto; object-fit:contain; }
.cat-case-showcase-note { margin:14px 0 0; color:#6A6C70; font-size:12px; line-height:1.6; }

/* ── Bloc catalogue réutilisable : [texte] [grande couverture] [4 pages] ──
   `layout` piloté par les données (cover-left / cover-right) — voir
   CATALOGUE_CASE_STUDIES dans components.js. La couverture reste la colonne
   du milieu dans les deux cas ; seuls le texte et les pages échangent de côté. */
.cat-case-catalogue {
  display:grid; grid-template-columns:minmax(0,.45fr) minmax(0,.55fr); grid-template-rows:auto 1fr;
  gap:18px 22px; align-items:stretch; padding:24px; border-radius:10px;
  background:#FCFBF9; border:1px solid var(--cat-border, rgba(20,20,20,.08));
}
.cat-case-catalogue + .cat-case-catalogue { margin-top:20px; }
/* Le texte occupe toujours toute la largeur, au-dessus — jamais à côté de la
   couverture. Seules la couverture et la grille de pages s'inversent selon
   cover-left / cover-right. */
.cat-case-catalogue__text { grid-column:1 / -1; grid-row:1; order:0; }
.cat-case-catalogue__text span { display:block; margin-bottom:8px; color:var(--cat-accent); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.cat-case-catalogue__text h4 { margin:0 0 8px; font-size:clamp(17px,1.6vw,21px); }
.cat-case-catalogue__text p { margin:0; max-width:640px; color:#5E6367; font-size:12.5px; line-height:1.65; }
.cat-case-catalogue__cover {
  grid-row:2; order:1; margin:0; display:flex; align-items:center; justify-content:center;
  aspect-ratio:210 / 297; overflow:hidden; border-radius:10px;
  background:#FFF; box-shadow:0 18px 38px rgba(0,0,0,.13);
}
/* Desktop : la couverture égale la hauteur de la grille des 4 pages
   (align-items:stretch du parent) ; l'image garde width:auto pour dériver
   sa largeur de sa vraie proportion plutôt que d'être étirée à la largeur
   de la colonne — ce qui évite tout bandeau blanc autour du visuel. */
@media (min-width:981px) {
  .cat-case-catalogue__cover { aspect-ratio:auto; height:100%; }
}
.cat-case-catalogue__cover img { display:block; width:auto; max-width:100%; height:100%; object-fit:contain; object-position:center; }
.cat-case-catalogue__pages { grid-row:2; order:2; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:10px; }
.cat-case-catalogue__pages figure {
  margin:0; padding:5px; overflow:hidden; border-radius:7px;
  background:#FFF; box-shadow:0 5px 14px rgba(0,0,0,.06);
}
.cat-case-catalogue__pages img { display:block; width:100%; height:100%; aspect-ratio:210 / 297; object-fit:contain; object-position:center; background:#FBFAF8; }
.cat-case-catalogue__soon {
  grid-row:2; order:2; display:flex; align-items:center; justify-content:center; text-align:center;
  border:1px dashed rgba(20,20,20,.18); border-radius:8px; background:#F7F6F2;
  color:#9A9D96; font-size:12px; font-weight:600; letter-spacing:.04em; padding:20px;
}
.cat-case-campaigns__soon {
  padding:36px; text-align:center; border:1px dashed rgba(20,20,20,.16); border-radius:10px;
  background:#F7F6F2; color:#9A9D96; font-size:13px;
}
/* cover-right : seules la couverture et la grille de pages échangent de côté, le texte reste toujours au-dessus */
.cat-case-catalogue--cover-right .cat-case-catalogue__pages,
.cat-case-catalogue--cover-right .cat-case-catalogue__soon { order:1; }
.cat-case-catalogue--cover-right .cat-case-catalogue__cover { order:2; }
@media (max-width:980px) {
  .cat-case-catalogue,
  .cat-case-catalogue--cover-right { grid-template-columns:1fr; grid-template-rows:none; }
  .cat-case-catalogue__cover,
  .cat-case-catalogue__pages,
  .cat-case-catalogue__soon,
  .cat-case-catalogue--cover-right .cat-case-catalogue__cover,
  .cat-case-catalogue--cover-right .cat-case-catalogue__pages,
  .cat-case-catalogue--cover-right .cat-case-catalogue__soon { grid-column:1; grid-row:auto; }
  .cat-case-catalogue__cover,
  .cat-case-catalogue--cover-right .cat-case-catalogue__cover { order:1; max-width:360px; margin-inline:auto; }
  .cat-case-catalogue__pages,
  .cat-case-catalogue__soon,
  .cat-case-catalogue--cover-right .cat-case-catalogue__pages,
  .cat-case-catalogue--cover-right .cat-case-catalogue__soon { order:2; }
}

/* Gamm vert : les champs `cover` contiennent des mockups portrait resserrés.
   Le recadrage éventuel ne touche que le fond studio ; la couverture A4
   complète reste dans la zone centrale et conserve la hauteur de la grille. */
.cat-case--gamm-vert .cat-case-catalogue__cover {
  background:#fff;
  box-shadow:none;
}
.cat-case--gamm-vert .cat-case-catalogue__cover img {
  width:100%; max-width:none; height:100%; object-fit:contain;
  transform:scale(1.14);
  transform-origin:50% 50%;
}
.cat-case--gamm-vert .cat-case-showcase {
  padding:0; overflow:hidden; background:transparent;
  box-shadow:0 22px 54px rgba(31,44,28,.16);
}
.cat-case--gamm-vert .cat-case-showcase img {
  width:100%;
  transform:scale(1.34);
  transform-origin:50% 50%;
}
.cat-case--gamm-vert .cat-case-catalogue {
  gap:22px 24px;
  background:linear-gradient(145deg,#FAF9F5,#F0F2E9);
  border-color:rgba(55,107,32,.12);
}
.cat-case--gamm-vert .cat-case-catalogue__text p {
  max-width:980px; font-size:14px; line-height:1.72;
}
.cat-case--gamm-vert .cat-case-catalogue__pages figure {
  padding:3px; box-shadow:0 8px 22px rgba(31,44,28,.08);
}
.cat-case--gamm-vert .cat-case-campaigns__items img {
  background:transparent;
}
.cat-case--gamm-vert .campaign-wide {
  aspect-ratio:16 / 9;
  align-self:center;
}
@media (max-width:980px) {
  .cat-case--gamm-vert .cat-case-catalogue__cover,
  .cat-case--gamm-vert .cat-case-catalogue--cover-right .cat-case-catalogue__cover {
    width:100%; max-width:none; aspect-ratio:4 / 5;
  }
  .cat-case--gamm-vert .cat-case-catalogue { padding:18px; }
  .cat-case--gamm-vert .cat-case-catalogue__text p { font-size:13.5px; }
}

/* ── Campagnes : les trois univers côte à côte sur une seule ligne (desktop) ──
   Seul le format story vertical est affiché ; flex-basis fixe (pas flex-grow)
   pour que l'image ne s'étire pas sur toute la largeur de la colonne quand
   elle est seule. .campaign-square reste disponible pour de futurs clients. */
.cat-case-campaigns { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,2.5vw,48px); }
.cat-case-campaigns__row h4 { margin:0 0 14px; font-size:14px; font-weight:700; color:#161616; }
.cat-case-campaigns__items { display:flex; align-items:flex-end; justify-content:center; gap:14px; }
.cat-case-campaigns__items figure { margin:0; min-width:0; }
.cat-case-campaigns__items img {
  display:block; width:100%; border-radius:9px;
  object-fit:contain; background:#F4F3EF; box-shadow:0 10px 22px rgba(0,0,0,.09);
}
.campaign-square { aspect-ratio:1 / 1; flex:1.3 1 0; }
.campaign-portrait { aspect-ratio:9 / 16; flex:0 1 260px; }
.cat-case-campaigns__items figcaption { margin-top:8px; color:#8A8D87; font-size:10.5px; text-align:center; }
@media (max-width:1180px) {
  .cat-case-campaigns { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:32px; }
}
@media (max-width:760px) {
  .cat-case-campaigns { grid-template-columns:1fr; }
}

/* Gamm vert : la story occupe la colonne gauche ; le carré et le header
   Facebook se superposent à droite pour éviter tout grand vide sous le carré. */
.cat-case--gamm-vert .cat-case-campaigns {
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
  gap:28px;
}
.cat-case--gamm-vert .cat-case-campaigns__row:nth-child(1) {
  grid-column:1; grid-row:1 / span 2;
}
.cat-case--gamm-vert .cat-case-campaigns__row:nth-child(2) {
  grid-column:2; grid-row:1;
}
.cat-case--gamm-vert .cat-case-campaigns__row:nth-child(3) {
  grid-column:2; grid-row:2;
}
.cat-case--gamm-vert .cat-case-campaigns__row:nth-child(3) .cat-case-campaigns__items {
  justify-content:stretch;
}
.cat-case--gamm-vert .campaign-wide {
  width:100%;
  flex:1 1 auto;
}
@media (max-width:760px) {
  .cat-case--gamm-vert .cat-case-campaigns { grid-template-columns:1fr; }
  .cat-case--gamm-vert .cat-case-campaigns__row:nth-child(n) {
    grid-column:1; grid-row:auto;
  }
}

/* Carrefour : le mockup d'ouverture contient beaucoup de fond neutre dans le
   fichier source. Un zoom centré resserre uniquement ce fond, sans couper les
   catalogues. Les neuf applications magasin sont présentées en trois séries
   de trois visuels, avec leur ratio paysage réel. */
.cat-case--carrefour .cat-case-showcase {
  padding:0; overflow:hidden; background:#E5E5E5;
  box-shadow:0 22px 54px rgba(27,60,120,.14);
}
.cat-case--carrefour .cat-case-showcase img {
  width:100%; transform:scale(1.34); transform-origin:50% 50%;
}
.cat-case--carrefour .cat-case-catalogue__text p {
  max-width:980px; font-size:14px; line-height:1.72;
}
.cat-case--carrefour .cat-case-campaigns {
  grid-template-columns:1fr; gap:20px;
}
.cat-case--carrefour .cat-case-campaigns__items {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch; gap:16px;
}
.cat-case--carrefour .cat-case-campaigns__items figure { width:100%; }
.cat-case--carrefour .cat-case-campaigns__items .print-landscape {
  width:100%; aspect-ratio:4 / 3; object-fit:cover; background:#E9EBEE;
}
@media (max-width:760px) {
  .cat-case--carrefour .cat-case-catalogue__text p { font-size:13.5px; }
  .cat-case--carrefour .cat-case-campaigns__items { grid-template-columns:1fr; gap:12px; }
}

/* ── Notre accompagnement / services : quatre colonnes numérotées, sans icônes ── */
.cat-case-services { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:22px; }
.cat-case-services article { padding-top:14px; border-top:2px solid var(--cat-accent); }
.cat-case-services b { display:block; margin-bottom:10px; color:var(--cat-accent); font-size:11px; font-weight:700; letter-spacing:.08em; }
.cat-case-services h4 { margin:0 0 8px; font-size:15px; }
.cat-case-services p { margin:0; color:#6A6C70; font-size:13px; line-height:1.6; }

/* ── Workflow : trois lignes brut → retravaillé (IA) → intégration.
   Section optionnelle (config.workflow) — réservée aux futures études
   de cas Mr Bricolage / Decathlon, non utilisée par La Foir'Fouille. ── */
.cat-case-workflow__row { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:16px; }
.cat-case-workflow__row + .cat-case-workflow__row { margin-top:26px; }
.cat-case-workflow__row figure { margin:0; }
.cat-case-workflow__media { overflow:hidden; border-radius:10px; background:#F4F3EF; box-shadow:0 14px 30px rgba(0,0,0,.12); }
.cat-case-workflow__media img { display:block; width:100%; height:100%; aspect-ratio:4/5; object-fit:cover; }
.cat-case-workflow__media figcaption { padding:9px 12px; border-top:1px solid #EBE8E3; color:#62666A; font-size:10px; font-weight:600; text-align:center; }
.cat-case-workflow__ph {
  aspect-ratio:4/5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  border:1px dashed rgba(20,20,20,.2); border-radius:10px; background:#F7F6F2; color:#9A9D96; text-align:center; padding:14px;
}
.cat-case-workflow__ph span { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.cat-case-workflow__ph small { font-size:10px; }
.cat-case-workflow__arrow { color:#161616; font-size:18px; justify-self:center; }
@media (max-width:760px) {
  .cat-case-workflow__row { grid-template-columns:1fr; }
  .cat-case-workflow__arrow { transform:rotate(90deg); justify-self:start; margin-left:calc(50% - 9px); }
}

/* ── Conclusion : paragraphe centré avant le footer ── */
.cat-case-conclusion { max-width:760px; margin:0 auto; text-align:center; color:#4E5155; font-size:15px; line-height:1.75; }

/* Digilife bespoke case-study layout (custom mode) */
.photo-proof-case { padding:58px; color:#1B1A18; }
.photo-proof-case > header { max-width:760px; margin-bottom:34px; }
.photo-proof-case > header span,
.photo-proof-case section > div:first-child > span { display:block; margin-bottom:10px; color:#A34C36; font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.photo-proof-case h2 { margin:0 0 14px; font-size:clamp(38px,5vw,64px); }
.photo-proof-case header p { color:#6D655F; line-height:1.75; }
.photo-proof-case aside { margin:0 0 48px; padding:20px 22px; border-left:4px solid #C98B76; background:#F7F1EC; }
.photo-proof-case aside strong { display:block; margin-bottom:5px; font-size:13px; }
.photo-proof-case aside p { color:#70665E; font-size:12px; line-height:1.65; }
.photo-proof-case section h3 { margin:0 0 24px; font-size:28px; }
.photo-proof-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.photo-proof-grid figure { margin:0; overflow:hidden; border-radius:9px; background:#F0ECE7; }
.photo-proof-grid img { width:100%; height:100%; aspect-ratio:4 / 5; display:block; object-fit:cover; }
/* Visuel d'ouverture au format paysage : pleine largeur, ratio natif conservé. */
.photo-proof-grid__wide { grid-column:1 / -1; }
.photo-proof-grid__wide img { aspect-ratio:16 / 10; }
.photo-proof-disclaimer { margin:16px 0 0; color:#8B8178; font-size:11px; line-height:1.6; }
.photo-workflow { margin-bottom:52px; padding-bottom:48px; border-bottom:1px solid #EAE3DC; }
.photo-workflow > div:first-child { max-width:640px; margin-bottom:26px; }
.photo-workflow-grid { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:18px; }
.photo-workflow-grid figure { position:relative; margin:0; }
.photo-workflow-grid img { width:100%; aspect-ratio:4 / 5; display:block; object-fit:cover; border-radius:10px; background:#F0ECE7; box-shadow:0 14px 34px rgba(27,26,24,.12); }
.photo-workflow-step { position:absolute; z-index:1; top:12px; left:12px; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#A34C36; color:#FFF; font-size:12px; font-weight:700; }
.photo-workflow-grid figcaption { margin-top:12px; text-align:center; color:#4A443F; font-size:12px; font-weight:600; }
.photo-workflow-arrow { color:#C98B76; font-size:22px; justify-self:center; }
.photo-workflow-note { margin:22px 0 0; color:#8B8178; font-size:11px; font-style:italic; }
@media (max-width:650px) {
  .photo-proof-case { padding:44px 20px; }
  .photo-proof-grid { grid-template-columns:1fr; }
  .photo-workflow-grid { grid-template-columns:1fr; }
  .photo-workflow-arrow { transform:rotate(90deg); }
}

.ls-modal.custom-mode .ls-modal-dialog {
  width: min(96vw, 1800px); max-width: 1800px;
  height: 94vh; max-height: 94vh;
  background: #FCFCFB;
}
@media (max-width: 860px) {
  .ls-modal.custom-mode .ls-modal-dialog { width: min(98vw, 1800px); height: 92vh; max-height: 92vh; }
}
.ls-modal.custom-mode .ls-modal-viewport { overflow: auto; background: #FCFCFB; }
.ls-modal.custom-mode .ls-modal-track { display: block; }
.dgl-page { color: #1A1A1A; padding: 72px 70px; }
.dgl-kicker { color: #E23F3F; font-size: 10px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; margin-bottom: 14px; }
.dgl-title { font-family: var(--font-poppins); font-size: clamp(30px, 4vw, 42px); font-weight: 700; margin: 0 0 8px; }
.dgl-sub { color: rgba(26,26,26,.55); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 40px; }
.dgl-hero-grid { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 48px; align-items: start; }
.dgl-hero:not(.dgl-hero--split) .dgl-hero-grid { grid-template-columns: minmax(0, 740px); }
.dgl-hero--split {
  display: grid; grid-template-columns: minmax(0,.86fr) minmax(300px,1.14fr);
  align-items: center; gap: clamp(32px, 5vw, 64px);
}
.dgl-hero-embed { margin: 0; }
.dgl-hero-embed img {
  width: 100%; max-width: 420px; display: block; margin: 0 auto; border-radius: 16px;
  box-shadow: 0 18px 40px rgba(20,20,18,.14); object-fit: cover;
}
@media (max-width: 760px) { .dgl-hero--split { grid-template-columns: 1fr; } }
.dgl-hero-text { font-size: 16px; line-height: 1.7; color: rgba(26,26,26,.75); max-width: 46ch; }
.dgl-hero-text--wide { max-width: 70ch; font-size: 17px; }
.dgl-meta { display: grid; gap: 16px; }
.dgl-meta div { padding-bottom: 12px; border-bottom: 1px solid #EAE7E1; }
.dgl-meta dt { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: rgba(26,26,26,.45); margin-bottom: 4px; }
.dgl-meta dd { margin: 0; font-size: 14px; font-weight: 600; }
.dgl-cta {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 36px;
  padding: 13px 22px; border: 1px solid #1A1A1A; border-radius: 999px;
  background: transparent; color: #1A1A1A; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.dgl-cta:hover { background: #1A1A1A; color: #FFF; }
.dgl-sep { border: 0; border-top: 1px solid #EAE7E1; margin: 56px 0; }
.dgl-eyebrow { color: #E23F3F; font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 10px; }
.dgl-section h3 { font-family: var(--font-poppins); font-size: 24px; font-weight: 700; margin: 0 0 14px; }
.dgl-section-grid { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.3fr); gap: 48px; align-items: center; }
.dgl-section-intro p { font-size: 14px; line-height: 1.7; color: rgba(26,26,26,.68); max-width: 40ch; }
.dgl-catalogue-stack { display: grid; gap: 14px; }
.dgl-catalogue-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dgl-page-ph {
  aspect-ratio: 9 / 16; border-radius: 14px; background: linear-gradient(160deg, #F2F0EC, #E6E2DA);
  border: 1px solid #E2DED5; box-shadow: 0 6px 16px rgba(20,20,18,.06);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: rgba(26,26,26,.4); font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
}
.dgl-page-ph em { font-style: normal; font-size: 20px; }
.dgl-video-ph {
  aspect-ratio: 16 / 9; border-radius: 16px; background: linear-gradient(160deg, #F2F0EC, #E6E2DA);
  border: 1px solid #E2DED5; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; color: rgba(26,26,26,.4); font-size: 11px;
  text-transform: uppercase; letter-spacing: .08em;
}
.dgl-video-ph em { font-style: normal; font-size: 26px; }
.dgl-section-lead { max-width: 62ch; margin: -4px 0 24px; color: rgba(26,26,26,.64); font-size: 14px; line-height: 1.7; }
.dgl-posts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.dgl-posts figure { margin: 0; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: #F2F0EC; }
.dgl-posts img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dgl-more { position: relative; margin-top: 14px; height: 148px; overflow: hidden; border-radius: 10px; }
.dgl-more > div { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; filter: blur(2px); opacity: .5; }
.dgl-more-suggestions i { height:190px; display:block; border-radius:10px; background:linear-gradient(135deg,#E7E4DE,#F6F4F0 52%,#DCD8D0); }
.dgl-more::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(252,252,251,0), #FCFCFB 88%); }
.dgl-more span { position: absolute; z-index: 1; left: 50%; bottom: 8px; transform: translateX(-50%); width: 38px; height: 22px; display: grid; place-items: center; border-radius: 999px; background: #FFF; color: #666; box-shadow: 0 4px 16px rgba(0,0,0,.13); }
.dgl-reel-ph {
  aspect-ratio: 9 / 16; max-height: 460px; border-radius: 14px; background: linear-gradient(160deg, #F2F0EC, #E6E2DA);
  border: 1px solid #E2DED5; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; color: rgba(26,26,26,.4); font-size: 10px;
  text-transform: uppercase; letter-spacing: .08em;
}
.dgl-reel-ph em { font-style: normal; font-size: 22px; }
.dgl-bandeaux { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; align-items: start; }
.dgl-bandeaux figure { margin: 0; overflow: hidden; border-radius: 12px; background: #111; box-shadow: 0 10px 24px rgba(20,20,18,.1); }
.dgl-bandeaux img { width: 100%; height: auto; display: block; }

/* Influence flowchart — real Instagram embeds */
.dgl-flow { display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr) minmax(0,.82fr); gap:20px; margin-top:28px; align-items:start; }
.dgl-flow-node {
  position:relative; padding:20px; border-radius:14px; background:#FCFCFB; border:1px solid #EAE7E1; box-shadow:0 12px 28px rgba(20,20,18,.06);
}
.dgl-flow-node::before { content:''; position:absolute; inset:0 0 auto; height:4px; border-radius:14px 14px 0 0; background:#C98B76; }
.dgl-flow-node--ls::before { background:#6FA687; }
.dgl-flow-node strong { display: block; font-size: 13px; margin-bottom: 4px; }
.dgl-flow-node p { margin: 0 0 14px; font-size: 12px; line-height: 1.6; color: rgba(26,26,26,.62); }
.dgl-flow-node--main { border-color:#D3CDBF; background:#F7F5F1; transform:translateY(-12px); }
.dgl-stats { margin-top: 56px; padding: 32px; border-radius: 18px; background: #F5F3EF; }
.dgl-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; margin-top: 18px; text-align: center; }
.dgl-stats-grid > div { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dgl-stat-icon { font-size: 20px; margin-bottom: 4px; }
.dgl-stats-grid strong { font-size: 26px; font-weight: 700; }
.dgl-stats-grid small { font-size: 12px; color: rgba(26,26,26,.6); }
@media (max-width: 700px) { .dgl-stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 28px; } }
.dgl-flow-embed { border-radius: 10px; overflow: hidden; background: #F2F0EC; min-height: 200px; }
.dgl-flow-embed iframe { width: 100% !important; }
.dgl-flow-legend { display: flex; gap: 24px; margin-top: 28px; font-size: 11px; color: rgba(26,26,26,.55); }
.dgl-flow-legend span { display: inline-flex; align-items: center; gap: 8px; }
.dgl-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dgl-dot--michelle { background: #C98B76; }
.dgl-dot--ls { background: #6FA687; }
@media (max-width: 900px) {
  .dgl-page { padding: 44px 22px; }
  .dgl-hero-grid, .dgl-section-grid, .dgl-social-grid { grid-template-columns: 1fr; }
  .dgl-posts { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dgl-bandeaux { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dgl-bandeaux figure:last-child { grid-column: 1 / -1; width: calc(50% - 7px); justify-self: center; }
  .dgl-flow { grid-template-columns:1fr; }
  .dgl-flow-node--main { transform:none; }
}

/* ══════════════════════════════════════════════════════════════════════
   DIGILIFE / DIGIMAG — étude de cas catalogue (namespace .dgc-*)
   Namespace distinct de .dgl-* (page social.html) : les deux coexistent.
   Direction premium type page produit Apple : fonds clairs, très grandes
   images, sections longues et aérées, aucune card générique.
   ══════════════════════════════════════════════════════════════════════ */
/* Pop-up élargi uniquement pour cette étude de cas — les autres études
   catalogue (Foir'Fouille, Gamm vert, Carrefour) gardent leur largeur. */
.ls-modal.custom-mode .ls-modal-dialog:has(.dgc-case) {
  width:min(97vw,1900px); max-width:1900px; height:95vh; max-height:95vh;
  border-radius:20px; background:#FFF;
}
.ls-modal.custom-mode .ls-modal-viewport:has(.dgc-case) { background:#FFF; }

.dgc-case { color:#1A1A1A; background:#FFF; overflow-x:hidden; }
.dgc-case section { padding:clamp(40px,3.9vw,72px) clamp(28px,4vw,80px); }
.dgc-case section > * { max-width:1740px; margin-inline:auto; }
.dgc-case--tint  { background:#FBFBFD; }
.dgc-case--tint2 { background:#F5F5F7; }

/* En-tête éditorial partagé */
.dgc-lead { max-width:760px; }
.dgc-lead span {
  display:block; margin-bottom:16px; color:#E2343A;
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
.dgc-lead h3 { margin:0 0 18px; font-size:clamp(34px,3.6vw,58px); line-height:1.06; letter-spacing:-.02em; }
.dgc-lead p { margin:0; color:#6E6E73; font-size:clamp(16px,1.3vw,20px); line-height:1.6; }

/* 1 — HERO : image de fond SANS texte + composition en HTML/CSS par-dessus.
   L'image garde son ratio natif (aucun recadrage), donc les personnages
   restent visibles à toutes les largeurs. Le texte se pose sur la moitié
   gauche, qui est du noir pur dans le visuel source. */
.dgc-hero { padding:0 !important; background:#000; }
.dgc-hero > * { max-width:none; }
.dgc-hero__stage { position:relative; }
.dgc-hero__bg { display:block; width:100%; height:auto; }
.dgc-hero__content {
  position:absolute; inset:0 auto 0 0; z-index:1;
  display:flex; flex-direction:column; justify-content:center;
  width:36%; padding:0 0 0 clamp(28px,4vw,80px); color:#FFF;
}
.dgc-hero__logo { width:clamp(76px,7vw,124px); height:auto; margin-bottom:auto; padding-top:clamp(18px,3vw,42px); }
.dgc-hero__over { margin:0 0 .1em; font-size:clamp(13px,1.45vw,26px); font-weight:500; }
/* La taille de référence est portée par le wrapper : le titre vaut 1em et
   la pastille une fraction d'em. Bouton et titre grandissent donc du même
   facteur, et la pastille garde exactement la même place relative — sous
   le « gim », chevauchant la hampe du « g » — à toutes les largeurs. */
.dgc-hero__titlewrap {
  position:relative; display:inline-block; margin:0; align-self:flex-start;
  font-size:clamp(40px,5.9vw,114px); line-height:1;
}
.dgc-hero__title { display:block; font-size:1em; font-weight:800; line-height:1; letter-spacing:-.03em; }
/* Calé sur la référence : la pastille couvre ~53,5 % → ~90 % de la largeur
   du titre et descend sous la ligne de base, ne chevauchant que la hampe
   du « g ». Valeurs en % / em pour rester identiques à toutes les tailles. */
.dgc-hero__cta {
  position:absolute; left:53.5%; top:86%; white-space:nowrap;
  padding:.42em 1.1em; border-radius:999px; background:#E2343A; color:#FFF;
  font-size:.2em; font-weight:600; line-height:1.25;
}
.dgc-hero__text {
  max-width:31ch; margin:clamp(26px,3.4vw,60px) 0 auto;
  padding-bottom:clamp(18px,3vw,42px);
  color:rgba(255,255,255,.82); font-size:clamp(11px,1.05vw,19px); line-height:1.62;
}
/* Sous 860px le texte n'a plus la place de tenir dans 40% : on empile
   l'image entière (personnages toujours intégralement visibles) puis le
   bloc de texte, sur le même fond noir — la jonction reste invisible. */
@media (max-width:860px) {
  .dgc-hero__content {
    position:static; width:auto;
    padding:26px clamp(20px,5vw,32px) 34px;
  }
  .dgc-hero__logo { margin-bottom:20px; padding-top:0; }
  .dgc-hero__titlewrap { font-size:clamp(50px,15vw,92px); }
  .dgc-hero__over { font-size:clamp(15px,3.6vw,22px); }
  .dgc-hero__text { max-width:46ch; margin-top:26px; padding-bottom:0; font-size:14px; }
}

/* 2 — CATALOGUE MULTI-ÉCRANS : texte à gauche, grand mockup à droite */
.dgc-screens__grid {
  display:grid; grid-template-columns:minmax(0,.32fr) minmax(0,.68fr);
  gap:clamp(40px,4vw,80px); align-items:center;
}
.dgc-screens__visual { margin:0; }
.dgc-screens__visual img { display:block; width:100%; height:auto; object-fit:contain; }
.dgc-btn {
  display:inline-flex; align-items:center; gap:9px; margin-top:32px;
  padding:14px 26px; border-radius:999px; background:#1A1A1A; color:#FFF;
  font-size:14px; font-weight:600; text-decoration:none;
  transition:background .2s var(--ease);
}
.dgc-btn:hover { background:#000; }

/* 3 — PERSONAS : six bandeaux indépendants, quasi collés */
.dgc-personas__grid {
  display:grid; grid-template-columns:minmax(0,.30fr) minmax(0,.70fr);
  gap:clamp(36px,3.5vw,68px); align-items:center;
}
.dgc-bands { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:5px; align-items:end; }
.dgc-bands figure { margin:0; min-width:0; }
.dgc-bands img { display:block; width:100%; height:auto; }

/* 4 — MÉTHODE : une ligne par produit, trois colonnes alignées.
   Colonne 1 la ressource officielle, colonne 2 les personas générés,
   colonne 3 l'intégration réelle dans les pages du catalogue. */
.dgc-method__head {
  display:grid; grid-template-columns:minmax(0,.86fr) 58px minmax(0,1.18fr) minmax(0,1.02fr);
  gap:clamp(16px,1.6vw,28px); margin-bottom:clamp(20px,2vw,30px);
}
.dgc-method__head div:nth-child(2) { grid-column:3; }
.dgc-method__head div:nth-child(3) { grid-column:4; }
.dgc-method__head b {
  display:block; margin-bottom:5px; font-size:13px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
}
.dgc-method__head span { color:#86868B; font-size:14px; }
.dgc-method__row {
  display:grid; grid-template-columns:minmax(0,.86fr) 58px minmax(0,1.18fr) minmax(0,1.02fr);
  gap:clamp(16px,1.6vw,28px); align-items:center;
}
.dgc-method__row + .dgc-method__row { margin-top:clamp(16px,1.6vw,26px); }
/* Le fond des visuels a été normalisé sur #F3F4F7 : la cellule porte la
   même teinte et aucun padding, donc l'image la remplit bord à bord et
   aucun rectangle imbriqué n'apparaît. Le letterbox de object-fit:contain
   se confond avec le fond de la cellule. */
/* Pas de height:100% : la cellule épouse exactement son image. Sinon elle
   s'étire à la hauteur de la ligne (imposée par le mockup d'intégration)
   et l'image flotte au milieu d'une grande zone grise. */
.dgc-method__cell {
  margin:0; display:flex; align-items:center; justify-content:center;
  padding:0; overflow:hidden;
  border-radius:14px; background:#F3F4F7;
}
.dgc-method__cell--plain { background:transparent; border-radius:0; }
.dgc-method__cell img { display:block; width:100%; height:auto; max-height:340px; object-fit:contain; }
/* La colonne intégration est la plus large et son visuel n'est pas bridé :
   c'est là qu'on doit lire les pages du catalogue. */
.dgc-method__cell--plain img { max-height:440px; }
.dgc-method__arrow { display:grid; place-items:center; color:#C9C9CE; }
.dgc-method__arrow svg { width:30px; height:22px; }

@media (max-width:900px) {
  .dgc-method__head { display:none; }
  .dgc-method__row { grid-template-columns:1fr; gap:14px; }
  .dgc-method__arrow { transform:rotate(90deg); }
  .dgc-method__cell img { max-height:260px; }
}

/* 5-7 — DOUBLES-PAGES : deux images indépendantes, collées bord à bord.
   Aucune ombre, aucun cadre, aucun fond de bloc : le fond de section suit
   le fond réel des pages (voir --dark/--light) pour que l'image s'y fonde
   sans laisser apparaître de rectangle. */
.dgc-spread {
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  margin-top:clamp(32px,3.2vw,52px); align-items:start;
}
.dgc-spread figure { margin:0; min-width:0; }
.dgc-spread img { display:block; width:100%; height:auto; object-fit:contain; }
.dgc-spread-section--light { background:#FBFBFD; }
.dgc-spread-section--dark { background:#000; }
.dgc-spread-section--dark .dgc-lead h3 { color:#FFF; }
.dgc-spread-section--dark .dgc-lead p { color:rgba(255,255,255,.66); }
/* Sections suivantes : aucun titre intercalé, les pages s'enchaînent en
   continu — on supprime donc le double padding vertical entre elles. */
/* Double classe pour passer devant `.dgc-case section { padding }`. */
.dgc-case .dgc-spread-section--follow { padding-top:clamp(18px,1.8vw,30px); }
.dgc-case .dgc-spread-section--follow .dgc-spread { margin-top:0; }

/* 8 — CAMPAGNE INSTAGRAM : vraies créations dans un châssis Instagram */
.dgc-posts {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,2.2vw,36px); margin-top:clamp(44px,4.5vw,68px);
}
.dgc-post { border:1px solid #E5E5EA; border-radius:14px; overflow:hidden; background:#FFF; }
.dgc-post__top { display:flex; align-items:center; gap:11px; padding:13px 15px; }
.dgc-post__avatar {
  flex:0 0 auto; display:grid; place-items:center; width:34px; height:34px;
  border-radius:50%; background:#111; overflow:hidden;
}
.dgc-post__avatar img { width:22px; height:auto; }
.dgc-post__id { flex:1; min-width:0; line-height:1.3; }
.dgc-post__id b { display:block; font-size:13px; font-weight:600; }
.dgc-post__id span { color:#8E8E93; font-size:11.5px; }
.dgc-post__more { color:#1A1A1A; font-size:16px; letter-spacing:1px; }
.dgc-post__media { margin:0; }
.dgc-post__media img { display:block; width:100%; height:auto; }
.dgc-post__actions { display:flex; gap:15px; padding:12px 15px 6px; color:#1A1A1A; }
.dgc-post__actions svg { width:22px; height:22px; }
.dgc-post__actions span:last-child { margin-left:auto; }
.dgc-post__caption { margin:0; padding:4px 15px 16px; font-size:13px; line-height:1.5; }
.dgc-post__caption b { font-weight:600; }
.dgc-post__caption span { color:#6E6E73; }

/* 9 — FILM DE LANCEMENT : vrai lecteur 16:9 sur fond noir, pour que le
   player et la section ne fassent qu'un. */
.dgc-film { background:#000; }
.dgc-film .dgc-lead h3 { color:#FFF; }
.dgc-film .dgc-lead p { color:rgba(255,255,255,.66); }
.dgc-film .dgc-btn { background:#FFF; color:#111; }
.dgc-film .dgc-btn:hover { background:#E8E8E8; }
.dgc-film .dgc-film__note { color:rgba(255,255,255,.42); }
.dgc-film__grid {
  display:grid; grid-template-columns:minmax(0,.30fr) minmax(0,.70fr);
  gap:clamp(40px,4vw,72px); align-items:center;
}
.dgc-film__player { margin:0; }
.dgc-film__player video {
  display:block; width:100%; aspect-ratio:16 / 9; border-radius:16px;
  background:#000; object-fit:cover;
}
.dgc-film__note { margin:14px 0 0; color:#A1A1A6; font-size:12px; font-style:italic; }

/* 10 — CTA FINAL : simple bande, jamais sticky.
   Sélecteurs préfixés par .dgc-case : le footer porte aussi la classe
   partagée .ls-case-contact-footer (nécessaire pour que
   applyCaseStudyContactCta le détecte au lieu d'en générer un second),
   dont les règles sont déclarées plus bas dans la feuille. La spécificité
   supplémentaire garantit que la version Digilife l'emporte. */
/* Bande fine et alignée : logo | texte | bouton contour, sur une seule
   ligne au-dessus de 780px. Pas de gros pavé ni de filet épais. */
.dgc-case .dgc-cta {
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(22px,3vw,54px);
  margin-top:0; padding:clamp(30px,3vw,44px) clamp(28px,4vw,80px);
  border:0; border-top:1px solid #E6E6EA; border-radius:0; background:#FBFBFD;
}
.dgc-case .dgc-cta__logo { flex:0 0 auto; width:clamp(92px,7vw,118px); height:auto; }
.dgc-case .dgc-cta__copy { flex:1 1 320px; }
.dgc-case .dgc-cta__copy strong {
  display:block; margin-bottom:5px; font-size:clamp(16px,1.25vw,19px);
  font-weight:700; letter-spacing:-.01em; text-transform:none;
}
.dgc-case .dgc-cta__copy p { max-width:58ch; margin:0; color:#86868B; font-size:14px; line-height:1.55; }
.dgc-case .dgc-cta > a {
  display:inline-flex; align-items:center; gap:10px; width:auto; min-height:0;
  padding:13px 26px; border:1px solid #1A1A1A; border-radius:999px;
  background:transparent; color:#1A1A1A;
  font-size:14px; font-weight:600; letter-spacing:0; text-transform:none; text-decoration:none;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.dgc-case .dgc-cta > a:hover { background:#1A1A1A; color:#FFF; transform:none; filter:none; }

/* Tablette : on conserve les compositions horizontales le plus longtemps
   possible (méthode sur trois colonnes, posts sur une ligne) et on ne passe
   en pile qu'en dessous de 900px. */
@media (max-width:900px) {
  .dgc-process__grid { grid-template-columns:1fr; grid-template-rows:none; gap:44px; }
  .dgc-step { display:block; grid-row:auto; grid-template-rows:none; }
  .dgc-process__arrow { grid-row:auto; justify-self:center; transform:rotate(90deg); }
  .dgc-posts { grid-template-columns:1fr; max-width:460px; }
  .dgc-screens__grid,
  .dgc-personas__grid,
  .dgc-film__grid { grid-template-columns:1fr; gap:36px; }
  /* Bandeaux : défilement horizontal avec accroche, une bande complète visible */
  .dgc-bands {
    grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:38%;
    overflow-x:auto; scroll-snap-type:x mandatory;
    margin-inline:calc(clamp(28px,4vw,80px) * -1); padding-inline:clamp(28px,4vw,80px);
    scrollbar-width:none;
  }
  .dgc-bands::-webkit-scrollbar { display:none; }
  .dgc-bands figure { scroll-snap-align:start; }
  .dgc-step__visual { aspect-ratio:auto; }
  .dgc-step__stack { height:auto; grid-template-rows:auto auto; }
  .dgc-step__stack img { aspect-ratio:1 / 1; }
  .dgc-step__stack figure:last-child img { aspect-ratio:4 / 3; }
}
@media (max-width:620px) {
  .dgc-spread { grid-template-columns:1fr; gap:10px; }
}
@media (prefers-reduced-motion:reduce) {
  .dgc-bands { scroll-behavior:auto; }
}

/* ══════════════════════════════════════════════════════════════════════
   DECATHLON — étude de cas catalogue numérique (namespace .dkt-*)
   Fonds clairs, bleu enseigne avec retenue, une idée par section.
   ══════════════════════════════════════════════════════════════════════ */
.ls-modal.custom-mode .ls-modal-dialog:has(.dkt-case) {
  width:min(97vw,1900px); max-width:1900px; height:95vh; max-height:95vh;
  border-radius:20px; background:#FFF;
}
.ls-modal.custom-mode .ls-modal-viewport:has(.dkt-case) { background:#FFF; }

.dkt-case { --dkt-blue:#0082C3; color:#1A1A1A; background:#FFF; overflow-x:hidden; }
.dkt-case section { padding:clamp(56px,5.6vw,104px) clamp(28px,4vw,80px); }
.dkt-case section > * { max-width:1740px; margin-inline:auto; }
.dkt-eyebrow {
  display:block; margin-bottom:14px; color:var(--dkt-blue);
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
.dkt-lead { max-width:780px; }
.dkt-lead h3, .dkt-cat__aside h3 {
  margin:0 0 16px; font-size:clamp(32px,3.3vw,54px); line-height:1.06; letter-spacing:-.02em;
}
.dkt-lead p { margin:0; color:#6E6E73; font-size:clamp(15px,1.2vw,19px); line-height:1.62; }

.dkt-ph {
  display:flex; align-items:center; justify-content:center; width:100%;
  padding:18px; border:1px dashed rgba(20,20,20,.2); border-radius:10px;
  background:#F7F7F9; color:#9A9A9F; font-size:12px; font-weight:600; text-align:center;
}

/* 1 — HERO : texte à gauche, photo horizontale à droite (jamais une couverture) */
.dkt-hero { background:#FBFBFD; padding-block:0 !important; }
.dkt-hero__grid { display:grid; grid-template-columns:minmax(0,.44fr) minmax(0,.56fr); gap:clamp(32px,3.5vw,72px); align-items:center; }
.dkt-hero__copy { padding-block:clamp(52px,5.2vw,96px); }
.dkt-hero__logo { display:block; width:clamp(132px,11vw,196px); height:auto; margin-bottom:clamp(22px,2.4vw,38px); }
.dkt-hero h2 { margin:0 0 16px; font-size:clamp(48px,5.4vw,94px); line-height:.98; letter-spacing:-.03em; }
.dkt-hero__sub { margin:0 0 18px; color:var(--dkt-blue); font-size:clamp(18px,1.6vw,26px); font-weight:600; line-height:1.28; }
.dkt-hero__text { margin:0; max-width:50ch; color:#6E6E73; font-size:clamp(14px,1.1vw,17px); line-height:1.65; }
.dkt-hero__photo { margin:0; align-self:stretch; }
.dkt-hero__photo img { display:block; width:100%; height:100%; min-height:clamp(300px,32vw,560px); object-fit:cover; object-position:center; }

/* 2 — CATALOGUE DIGITAL : mockup multi-écrans */
.dkt-digital__grid { display:grid; grid-template-columns:minmax(0,.34fr) minmax(0,.66fr); gap:clamp(36px,4vw,76px); align-items:center; }
.dkt-digital__visual { margin:0; }
.dkt-digital__visual img { display:block; width:100%; height:auto; object-fit:contain; }

/* 3 — MÉTHODE : une ligne par type de transformation, libellé vertical coloré */
.dkt-process { background:#FBFBFD; }
.dkt-flow { margin-top:clamp(40px,4vw,64px); border:1px solid #E8E8EC; border-radius:14px; background:#FFF; overflow:hidden; }
.dkt-flow__head {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2vw,36px); padding:clamp(20px,2vw,30px) clamp(20px,2vw,30px) clamp(20px,2vw,30px) 78px;
  border-bottom:1px solid #E8E8EC;
}
.dkt-flow__head b {
  display:inline-grid; place-items:center; width:26px; height:26px; margin-right:10px;
  border-radius:50%; background:var(--dkt-blue); color:#FFF; font-size:11px; font-weight:700;
}
.dkt-flow__head div { display:flex; align-items:center; }
.dkt-flow__head span { font-size:14px; font-weight:700; }
.dkt-flow__row {
  display:grid; grid-template-columns:48px 1fr auto 1fr auto 1fr;
  gap:clamp(14px,1.5vw,26px); align-items:center;
  padding:clamp(18px,1.8vw,28px) clamp(20px,2vw,30px) clamp(18px,1.8vw,28px) 0;
}
.dkt-flow__row + .dkt-flow__row { border-top:1px solid #F0F0F3; }
.dkt-flow__theme {
  display:grid; place-items:center; align-self:stretch; min-height:120px;
  background:var(--row); color:#FFF; font-size:12px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; text-align:center;
  writing-mode:vertical-rl; transform:rotate(180deg); padding:16px 0;
}
.dkt-flow__row figure { margin:0; min-width:0; }
.dkt-flow__row img { display:block; width:100%; height:auto; aspect-ratio:210 / 297; object-fit:cover; border-radius:10px; background:#F2F2F4; }
.dkt-flow__row img[src$="RDC-GPE-HD_Page_08.jpg"], .dkt-flow__row img[src$="c1-integration-foot.webp"] {
  object-fit:contain;
}
.dkt-flow__row .dkt-ph { aspect-ratio:210 / 297; }
.dkt-flow__arrow {
  display:grid; place-items:center; width:34px; height:34px;
  border:1px solid #E0E0E5; border-radius:50%; background:#FFF; color:#8E8E93; font-size:15px;
}

/* Rangée « Produit en situation » : gabarit dédié à 3 colonnes (30/32/38%),
   propre à cette rangée uniquement — les deux autres rangées du workflow
   gardent le gabarit .dkt-flow__row standard, inchangé. */
.dkt-flow__row--situation { grid-template-columns:48px 1fr; }
.dkt-flow__row--situation .dkt-situ {
  display:grid; grid-template-columns:minmax(0,.30fr) auto minmax(0,.32fr) auto minmax(0,.38fr);
  gap:clamp(16px,1.8vw,28px); align-items:start;
  padding:clamp(24px,2.6vw,40px); border:1px solid #E8E8E8; border-radius:18px; background:#FFF;
}
.dkt-flow__row--situation .dkt-situ__col { min-width:0; }
.dkt-flow__row--situation .dkt-situ__col--start { display:grid; gap:14px; justify-items:center; }
.dkt-flow__row--situation .dkt-situ__plate { width:100%; }
/* Sélecteurs renforcés (3 classes) : la règle générique .dkt-flow__row img
   (aspect-ratio:210/297 ; object-fit:cover, utilisée par les 2 autres
   rangées) a la même spécificité que .dkt-situ__x img seul et gagnait selon
   l'ordre du fichier — d'où les images déformées/écrasées. On neutralise
   explicitement aspect-ratio ici pour repartir du ratio réel de chaque
   fichier (aucun n'est un A4 : planche 1/1, photo et transformation
   paysage, seule la page catalogue est un vrai A4). */
.dkt-flow__row--situation .dkt-situ__plate-img,
.dkt-flow__row--situation .dkt-situ__plate .dkt-ph {
  display:block; width:100%; aspect-ratio:1 / 1 !important; object-fit:contain !important;
  border-radius:10px; background:#FAFAFA;
}
.dkt-flow__row--situation .dkt-situ__plus {
  display:grid; place-items:center; width:28px; height:28px;
  border:1px solid #E0E0E5; border-radius:50%; color:#8E8E93; font-size:14px;
}
.dkt-flow__row--situation .dkt-situ__photo { margin:0; width:100%; }
.dkt-flow__row--situation .dkt-situ__photo img,
.dkt-flow__row--situation .dkt-situ__photo .dkt-ph {
  display:block; width:100%; height:auto; aspect-ratio:auto !important; object-fit:contain !important;
  border-radius:10px; background:#FAFAFA;
}
.dkt-flow__row--situation .dkt-situ__col--transform figure { margin:0; }
.dkt-flow__row--situation .dkt-situ__col--transform img,
.dkt-flow__row--situation .dkt-situ__col--transform .dkt-ph {
  display:block; width:100%; height:auto; aspect-ratio:auto !important; object-fit:contain !important;
  border-radius:10px;
}
.dkt-flow__row--situation .dkt-situ__col--transform p { margin:12px 0 0; color:#86868B; font-size:12.5px; line-height:1.5; }
.dkt-flow__row--situation .dkt-situ__col--catalog { display:flex; justify-content:center; }
.dkt-flow__row--situation .dkt-situ__catalog { margin:0; width:min(100%,420px); }
.dkt-flow__row--situation .dkt-situ__catalog img,
.dkt-flow__row--situation .dkt-situ__catalog .dkt-ph {
  display:block; width:100%; height:auto; aspect-ratio:210 / 297 !important; object-fit:contain !important;
  border-radius:6px; box-shadow:0 12px 28px rgba(20,20,25,.09);
}
.dkt-flow__row--situation .dkt-situ__arrow {
  display:grid; place-items:center; width:30px; height:30px; align-self:center; margin-top:120px;
  border:1px solid #E0E0E5; border-radius:50%; color:var(--dkt-blue); font-size:13px;
}
@media (max-width:1100px) {
  .dkt-flow__row--situation { grid-template-columns:1fr; }
  .dkt-flow__row--situation .dkt-situ { grid-template-columns:1fr; }
  .dkt-flow__row--situation .dkt-situ__arrow { justify-self:center; transform:rotate(90deg); margin:4px 0; }
  .dkt-flow__row--situation .dkt-situ__catalog { width:min(100%,380px); }
}

/* 4-6 — CATALOGUES : titre + texte + couverture à gauche, deux doubles-pages empilées à droite */
.dkt-cat { display:grid; grid-template-columns:minmax(0,.36fr) minmax(0,.64fr); gap:clamp(34px,3.6vw,68px); align-items:start; }
.dkt-cat:nth-of-type(even) { background:#FBFBFD; }
.dkt-cat__aside { position:sticky; top:clamp(20px,2.5vw,40px); }
.dkt-cat__aside p { margin:0 0 clamp(26px,2.8vw,42px); color:#6E6E73; font-size:clamp(14px,1.1vw,16.5px); line-height:1.65; }
.dkt-cat__cover { margin:0; }
.dkt-cat__cover img { display:block; width:100%; height:auto; object-fit:contain; border-radius:6px; box-shadow:0 20px 46px rgba(20,20,25,.14); }
.dkt-cat__spreads { display:grid; gap:clamp(26px,2.6vw,44px); }
.dkt-spread { display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:start; }
.dkt-spread figure { margin:0; min-width:0; }
.dkt-spread img { display:block; width:100%; height:auto; object-fit:contain; box-shadow:0 14px 34px rgba(20,20,25,.09); }
.dkt-spread--pending { grid-template-columns:1fr; }
.dkt-spread--pending .dkt-ph { min-height:96px; }

/* Variante « showcase » : titre sur deux lignes, couverture dominante à
   gauche, doubles-pages détachées à droite sur fond très clair. */
.dkt-cat--showcase { background:#F5F5F7 !important; grid-template-columns:minmax(0,.40fr) minmax(0,.60fr); }
.dkt-cat--showcase .dkt-cat__aside h3 { font-size:clamp(38px,3.9vw,66px); line-height:1.02; }
.dkt-cat--showcase .dkt-cat__cover img { border-radius:14px; box-shadow:0 26px 60px rgba(20,20,25,.20); }
.dkt-cat--showcase .dkt-cat__spreads { gap:clamp(30px,3vw,52px); }
.dkt-cat--showcase .dkt-spread img { border-radius:4px; box-shadow:0 18px 44px rgba(20,20,25,.12); }
@media (max-width:900px) { .dkt-cat--showcase { grid-template-columns:1fr; } }

/* CTA final — surcharge la feuille partagée .ls-case-contact-footer */
.dkt-case .dkt-cta {
  display:flex; flex-wrap:wrap; align-items:center; gap:clamp(22px,3vw,54px);
  margin-top:0; padding:clamp(30px,3vw,44px) clamp(28px,4vw,80px);
  border:0; border-top:1px solid #E6E6EA; border-radius:0; background:#FBFBFD;
}
.dkt-case .dkt-cta__copy { flex:1 1 340px; }
.dkt-case .dkt-cta__copy strong {
  display:block; margin-bottom:5px; font-size:clamp(16px,1.25vw,19px);
  font-weight:700; letter-spacing:-.01em; text-transform:none;
}
.dkt-case .dkt-cta__copy p { max-width:60ch; margin:0; color:#86868B; font-size:14px; line-height:1.55; }
.dkt-case .dkt-cta > a {
  display:inline-flex; align-items:center; gap:10px; width:auto; min-height:0;
  padding:13px 26px; border:1px solid var(--dkt-blue); border-radius:999px;
  background:transparent; color:var(--dkt-blue);
  font-size:14px; font-weight:600; letter-spacing:0; text-transform:none; text-decoration:none;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.dkt-case .dkt-cta > a:hover { background:var(--dkt-blue); color:#FFF; transform:none; filter:none; }

@media (max-width:1100px) {
  .dkt-flow__head { grid-template-columns:1fr; gap:8px; padding-left:clamp(20px,2vw,30px); }
  .dkt-flow__row { grid-template-columns:1fr; padding:22px; }
  .dkt-flow__theme { min-height:0; writing-mode:horizontal-tb; transform:none; padding:9px 16px; border-radius:999px; justify-self:start; }
  .dkt-flow__arrow { justify-self:center; transform:rotate(90deg); }
}
@media (max-width:900px) {
  .dkt-hero__grid,
  .dkt-digital__grid { grid-template-columns:1fr; gap:32px; }
  .dkt-hero { padding-block:0 !important; }
  .dkt-hero__copy { padding-block:clamp(38px,6vw,56px) 0; }
  .dkt-hero__photo img { min-height:0; aspect-ratio:16 / 10; }
  .dkt-cat { grid-template-columns:1fr; }
  .dkt-cat__aside { position:static; }
  .dkt-cat__cover { max-width:320px; }
}

/* ══════════════════════════════════════════════════════════════════════
   MR.BRICOLAGE GUADELOUPE — étude de cas 360° (namespace .mrb-*)
   ══════════════════════════════════════════════════════════════════════ */
.ls-modal.custom-mode .ls-modal-dialog:has(.mrb-case) {
  width:min(96vw,1740px); max-width:1740px; height:95vh; max-height:95vh;
  border-radius:22px; background:#FFF;
}
.ls-modal.custom-mode .ls-modal-viewport:has(.mrb-case) { background:#FFF; }

.mrb-case {
  --mrb-red:#E30613; --mrb-ink:#131722; --mrb-soft:#65666B;
  --mrb-line:rgba(20,24,32,.08);
  color:var(--mrb-ink); background:#FFF; overflow-x:hidden;
}
.mrb-case > section, .mrb-case > header { padding:clamp(42px,4.4vw,56px) clamp(24px,3vw,60px); }
.mrb-case > section > *, .mrb-case > header > * { max-width:1560px; margin-inline:auto; }
.mrb-case h1 { margin:0 0 22px; font-size:clamp(38px,4.4vw,80px); line-height:1.04; letter-spacing:-.025em; }
.mrb-case h1 em { font-style:normal; color:var(--mrb-red); }
.mrb-case h2 { margin:0 0 14px; font-size:clamp(28px,2.8vw,48px); line-height:1.1; letter-spacing:-.02em; }
.mrb-case h3 { margin:0 0 12px; font-size:clamp(20px,1.7vw,30px); line-height:1.15; }
.mrb-case p  { margin:0; max-width:620px; color:var(--mrb-soft); font-size:clamp(15px,1.1vw,18px); line-height:1.7; }
.mrb-rule { display:block; width:48px; height:3px; margin:0 0 16px; border-radius:2px; background:var(--mrb-red); }
.mrb-head { margin-bottom:clamp(28px,2.8vw,36px); }
.mrb-label {
  display:block; margin-bottom:14px; color:var(--mrb-soft);
  font-size:12px; font-weight:600; letter-spacing:.04em;
}
.mrb-ph {
  display:flex; align-items:center; justify-content:center; width:100%;
  padding:16px; border:1px dashed rgba(20,24,32,.18); border-radius:14px;
  background:#F7F7F8; text-align:center;
}
.mrb-ph > span { color:#9B9B9F; font-size:11px; font-weight:600; letter-spacing:.05em; }
.mrb-media { display:block; width:100%; height:auto; border-radius:14px; }
.hide-placeholder-labels .mrb-ph > span { display:none; }

.mrb-chip {
  display:inline-block; margin-bottom:26px; padding:9px 18px;
  border:1px solid rgba(227,6,19,.2); border-radius:999px;
  color:var(--mrb-red); font-size:13px; font-weight:600;
}
.mrb-btn {
  display:inline-flex; align-items:center; gap:9px; padding:14px 26px;
  border-radius:999px; font-size:15px; font-weight:600; text-decoration:none; cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.mrb-btn--solid { border:1px solid var(--mrb-red); background:var(--mrb-red); color:#FFF; }
.mrb-btn--solid:hover { background:#C10510; }
.mrb-btn--ghost { border:1px solid var(--mrb-red); background:#FFF; color:var(--mrb-red); }
.mrb-btn--ghost:hover { background:rgba(227,6,19,.06); }
.mrb-btn[disabled] { opacity:.5; cursor:default; }

/* 01 — Hero. Padding propre à cette section (plus compact que la règle
   générale) : la référence tient le hero sur un seul écran, sans grand vide
   entre le titre et la section suivante.
   Partie droite = 3 couches superposées (cf. brief) :
   1. watermark = trait « M » du logo décomposé, énorme, très pâle, coupé par
      overflow:hidden — jamais un deuxième petit logo lisible.
   2. halo = cercle plein très pâle derrière le badge, quasi invisible.
   3. badge = cercle blanc net avec le vrai logo rond Mr.B Guadeloupe dedans. */
.mrb-hero {
  position:relative; overflow:hidden; min-height:430px; padding-block:clamp(55px,5.8vw,70px) !important;
  background:
    radial-gradient(circle at 78% 45%, rgba(227,6,19,.018), transparent 32%),
    #fffefd;
}
.mrb-hero__grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr); gap:clamp(28px,3.4vw,60px); align-items:center; }
.mrb-hero__actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; }

.mrb-hero__brand { position:relative; z-index:1; min-height:400px; display:flex; align-items:center; justify-content:center; }
.mrb-hero__watermark {
  content:''; position:absolute; z-index:1; width:145%; aspect-ratio:164/132; left:50%; top:50%;
  transform:translate(-50%,-50%);
  background:url('/assets/projects/catalogue/mr-bricolage/brand/logo-m-mark.svg') no-repeat center / contain;
  opacity:.06; pointer-events:none;
}
.mrb-hero__badge {
  position:relative; z-index:3; width:clamp(170px,16vw,220px); aspect-ratio:1; border-radius:50%;
  background:#FFF; display:flex; align-items:center; justify-content:center;
  box-shadow:0 18px 50px rgba(25,25,25,.05), 0 2px 10px rgba(25,25,25,.025);
}
.mrb-hero__logo { display:block; width:62%; height:auto; object-fit:contain; }

/* 02 — Print & digital : le texte est posé SUR le visuel, en haut à gauche. */
.mrb-pd { padding-block:clamp(30px,3.2vw,44px) !important; }
.mrb-pd__frame {
  position:relative; margin:0; border-radius:22px; overflow:hidden; background:#FAFAFA;
}
.mrb-pd__copy {
  position:absolute; z-index:1; top:clamp(24px,3vw,52px); left:clamp(24px,3vw,52px);
  max-width:min(440px,42%);
}
.mrb-pd__copy p { font-size:clamp(14px,1vw,16px); }
.mrb-pd__frame .mrb-media, .mrb-pd__frame .mrb-ph { border-radius:0; }
.mrb-pd__mobile-views { display:none; }
.mrb-pd__mobile-view { position:relative; margin:0; overflow:hidden; border-radius:16px; background:#fff; }
.mrb-pd__mobile-view img { position:absolute; display:block; height:auto; max-width:none; }

/* 03-04 — Catalogues : produits → couvertures, puis grandes doubles-pages */
.mrb-cat:nth-of-type(even) { background:#FAFAFA; }
.mrb-cat__head { margin-bottom:clamp(40px,4vw,68px); }
.mrb-work {
  display:grid; grid-template-columns:minmax(0,.21fr) auto minmax(0,.79fr);
  gap:clamp(20px,2.4vw,44px); align-items:start;
}
.mrb-work__products { display:grid; gap:clamp(12px,1.4vw,20px); }
.mrb-work__products .mrb-label { grid-column:1; margin-bottom:0; }
.mrb-work__note { grid-column:1; margin:-8px 0 4px; color:var(--mrb-soft); font-size:12.5px; line-height:1.55; max-width:none; }
.mrb-work__covers .mrb-label { margin-bottom:0; }
.mrb-work__covers .mrb-work__note { margin:-8px 0 16px; }
/* Image plein cadre, sans marge blanche : le visuel remplit tout le bloc. */
.mrb-work__products figure {
  margin:0; overflow:hidden; border-radius:14px; border:1px solid #EFEFEF;
  box-shadow:0 1px 3px rgba(20,24,32,.04);
}
.mrb-work__products .mrb-media { display:block; width:100%; height:auto; border-radius:0; }
.mrb-work__arrow { align-self:center; color:var(--mrb-red); font-size:26px; font-weight:600; }
.mrb-covers { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,1.8vw,30px); }
.mrb-cover { position:relative; margin:0; }
.mrb-cover .mrb-media, .mrb-cover .mrb-ph { border-radius:10px; }
.mrb-cover.is-selected .mrb-media { outline:2px solid var(--mrb-red); outline-offset:-1px; }
.mrb-cover figcaption {
  display:flex; align-items:center; justify-content:center; gap:7px; margin-top:11px;
  color:var(--mrb-red); font-size:12px; font-weight:600;
}
.mrb-check {
  display:grid; place-items:center; width:17px; height:17px; border-radius:50%;
  background:var(--mrb-red); color:#FFF; font-size:10px;
}

/* 3 pages individuelles sur une seule ligne, en grand : conteneur large pour
   que chaque page reste lisible. Ratio A4 réel (210/297), jamais rognée. */
.mrb-pages { margin-top:clamp(28px,3vw,36px); }
.mrb-pages-grid {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2vw,28px);
  max-width:1400px; margin-inline:auto;
}
.mrb-pages-grid figure { margin:0; }
.mrb-pages .mrb-media, .mrb-pages .mrb-ph { border-radius:8px; box-shadow:0 10px 26px rgba(20,24,32,.09); }

/* 05 — Réseaux sociaux : une campagne Meta Ads déclinée dans ses vraies
   intégrations publicitaires. 3 gabarits partagent la structure Feed
   (header hors-image + média + actions), un 4e (Stories/Reels) superpose
   tout en overlay sur le média plein cadre — cf. repères Meta réels :
   Feed = sponsorisé au-dessus de l'image, jamais dessus ; Stories = avatar/
   nom/"Sponsorisé"/CTA overlay sur l'image. Hauteur de média commune fixe,
   largeur dérivée du vrai ratio (--ar) : jamais de recadrage. */
.mrb-social { display:flex; flex-direction:column; align-items:center; gap:clamp(16px,1.8vw,26px); }
.mrb-social__row { display:flex; gap:clamp(16px,1.8vw,26px); align-items:flex-start; }
.mrb-ad {
  flex:0 0 auto; width:fit-content; max-width:100%;
  border:1px solid var(--mrb-line); border-radius:12px; background:#FFF; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:0 1px 3px rgba(20,24,32,.05);
  font-family:var(--font-sans, inherit);
}
.mrb-ad__media { margin:0; height:420px; aspect-ratio:var(--ar); background:#F3F3F4; }
.mrb-ad__media .mrb-media, .mrb-ad__media .mrb-ph { display:block; width:100%; height:100%; object-fit:contain; border-radius:0; background:#FFF; }

/* Header Feed / Link — hors-image, jamais superposé (repère Meta réel). */
.mrb-ad__head { display:flex; align-items:center; gap:9px; padding:10px 12px; flex:none; }
.mrb-ad__avatar { width:32px; height:32px; border-radius:50%; overflow:hidden; flex:none; background:#F3F3F4; }
.mrb-ad__avatar img { display:block; width:100%; height:100%; object-fit:cover; }
.mrb-ad__who { display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.mrb-ad__who b { font-size:12.5px; font-weight:600; color:var(--mrb-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mrb-ad__who span { display:flex; align-items:center; gap:4px; font-size:11px; color:var(--mrb-soft); }
.mrb-ad__who span svg { width:10px; height:10px; }
.mrb-ad__dots { margin-left:auto; color:var(--mrb-soft); font-size:13px; letter-spacing:1px; flex:none; }

/* Barre d'actions + légende Feed */
.mrb-ad__actions { display:flex; align-items:center; padding:10px 12px 4px; flex:none; }
.mrb-ad__icons { display:flex; gap:12px; }
.mrb-ad__icons svg, .mrb-ad__bookmark svg { width:19px; height:19px; color:var(--mrb-ink); }
.mrb-ad__bookmark { margin-left:auto; }
.mrb-ad__caption { padding:2px 12px 12px; font-size:12px; line-height:1.5; color:var(--mrb-ink); }
.mrb-ad__caption b { font-weight:600; margin-right:4px; }

/* Format lien (Feed link ad, large) : bandeau domaine + CTA sous l'image */
.mrb-ad__linkbar { display:flex; align-items:center; gap:14px; padding:11px 12px; background:#F5F5F6; flex:none; }
.mrb-ad__domain { display:block; font-size:10px; letter-spacing:.04em; color:var(--mrb-soft); text-transform:uppercase; }
.mrb-ad__linkbar b { display:block; margin-top:2px; font-size:13px; font-weight:600; color:var(--mrb-ink); }
.mrb-ad__cta-btn { margin-left:auto; flex:none; padding:9px 16px; border-radius:6px; background:#E9EBEE; color:var(--mrb-ink); font-size:12.5px; font-weight:600; white-space:nowrap; }

/* Format Stories/Reels : UI overlay sur le média plein cadre */
.mrb-ad--story { position:relative; border-radius:16px; background:#000; }
.mrb-ad--story .mrb-ad__media { height:420px; }
.mrb-ad--story .mrb-ad__media .mrb-media, .mrb-ad--story .mrb-ad__media .mrb-ph { background:#000; }
.mrb-ad__story-bar { position:absolute; z-index:2; top:10px; left:10px; right:10px; height:2.5px; border-radius:2px; background:rgba(255,255,255,.35); }
.mrb-ad__story-bar span { display:block; width:70%; height:100%; border-radius:2px; background:#FFF; }
.mrb-ad__story-head { position:absolute; z-index:2; top:20px; left:12px; right:12px; display:flex; align-items:center; gap:8px; }
.mrb-ad--story .mrb-ad__avatar { width:28px; height:28px; border:1.5px solid rgba(255,255,255,.9); }
.mrb-ad--story .mrb-ad__who b, .mrb-ad--story .mrb-ad__who span { color:#FFF; text-shadow:0 1px 3px rgba(0,0,0,.4); }
.mrb-ad__close { margin-left:auto; color:#FFF; opacity:.9; }
.mrb-ad__close svg { width:16px; height:16px; display:block; }
.mrb-ad__story-foot { position:absolute; z-index:2; left:0; right:0; bottom:22px; display:flex; justify-content:center; }
.mrb-ad__cta-pill {
  display:inline-flex; align-items:center; gap:6px; padding:10px 18px; border-radius:999px;
  background:rgba(255,255,255,.94); color:var(--mrb-ink); font-size:12.5px; font-weight:600;
}
.mrb-ad__cta-pill svg { width:13px; height:13px; }

/* 06 — Vidéo, film cuisine, radio */
.mrb-media-section { background:#FAFAFA; }
.mrb-media-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,2.6vw,40px); align-items:start; }
.mrb-mcard { padding:clamp(22px,2.2vw,34px); border:1px solid var(--mrb-line); border-radius:18px; background:#FFF; }
.mrb-mcard p { font-size:14.5px; }
.mrb-mcard .mrb-btn { margin-top:20px; }
/* Vraie vidéo YouTube (nocookie), conteneur 16:9 responsive. */
.mrb-yt { position:relative; margin:22px 0 0; aspect-ratio:16 / 9; border-radius:12px; overflow:hidden; background:#000; }
.mrb-yt iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.mrb-wave { display:flex; align-items:center; gap:3px; height:120px; margin-top:24px; }
.mrb-wave i { flex:1; min-width:0; border-radius:2px; background:rgba(227,6,19,.32); }

/* 07 — CTA final (surcharge la feuille partagée) */
.mrb-case .mrb-cta {
  display:flex; flex-wrap:wrap; align-items:center; gap:clamp(24px,3vw,56px);
  margin:0 clamp(24px,3vw,60px) clamp(40px,4vw,72px); padding:clamp(28px,2.8vw,44px) clamp(28px,3vw,52px);
  border:1px solid var(--mrb-line); border-radius:20px; background:#FAFAFA;
  max-width:1560px; margin-inline:auto;
}
.mrb-case .mrb-cta__brand { flex:0 0 auto; }
.mrb-case .mrb-cta__brand img { display:block; width:clamp(120px,10vw,160px); height:auto; margin-bottom:12px; }
.mrb-case .mrb-cta__brand .mrb-rule { margin:0; }
.mrb-case .mrb-cta__copy { flex:1 1 320px; }
.mrb-case .mrb-cta__copy strong { display:block; margin-bottom:6px; font-size:clamp(17px,1.4vw,22px); font-weight:700; letter-spacing:-.01em; text-transform:none; }
.mrb-case .mrb-cta__copy p { max-width:56ch; margin:0; color:var(--mrb-soft); font-size:14.5px; line-height:1.6; }
.mrb-case .mrb-cta > a {
  display:inline-flex; align-items:center; gap:10px; width:auto; min-height:0;
  padding:13px 26px; border:1px solid var(--mrb-ink); border-radius:999px;
  background:transparent; color:var(--mrb-ink);
  font-size:14px; font-weight:600; letter-spacing:0; text-transform:none; text-decoration:none;
}
.mrb-case .mrb-cta > a:hover { background:var(--mrb-ink); color:#FFF; transform:none; filter:none; }

.mrb-case > section, .mrb-case > header { animation:mrbIn .5s var(--ease) both; }
@keyframes mrbIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .mrb-case > section, .mrb-case > header { animation:none; } }

@media (max-width:1180px) {
  .mrb-media-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mrb-ad__media { height:320px; }
  .mrb-pages-grid { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:640px; }
}
@media (max-width:980px) {
  .mrb-hero__grid { grid-template-columns:1fr; }
  .mrb-hero__brand { min-height:260px; margin-top:12px; }
  .mrb-hero__watermark { width:200%; }
  .mrb-work { grid-template-columns:1fr; gap:30px; }
  .mrb-work__products { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mrb-work__products .mrb-label { grid-column:1 / -1; }
  .mrb-work__note { grid-column:1 / -1; }
  .mrb-work__arrow { justify-self:center; transform:rotate(90deg); }
  /* Le texte repasse au-dessus du visuel : illisible en surimpression ici. */
  .mrb-pd__copy { position:static; max-width:none; margin-bottom:22px; }
  .mrb-pd__frame { border-radius:0; background:transparent; }
  .mrb-pd__frame .mrb-media, .mrb-pd__frame .mrb-ph { border-radius:16px; }
  .mrb-media-grid { grid-template-columns:1fr; }
  .mrb-pages-grid { grid-template-columns:1fr; max-width:420px; }
  .mrb-pages-grid figure + figure { margin-top:16px; }
}
@media (max-width:640px) {
  .mrb-case > section, .mrb-case > header { padding-inline:20px; }
  .mrb-pd__frame > .mrb-media { display:none; }
  .mrb-pd__mobile-views { display:grid; gap:12px; }
  .mrb-pd__mobile-view--paper { aspect-ratio:1.29; }
  .mrb-pd__mobile-view--paper img { width:191%; transform:translate(-1.3%,-29%); }
  .mrb-pd__mobile-view--devices { aspect-ratio:1.22; }
  .mrb-pd__mobile-view--devices img { width:202%; transform:translate(-47.5%,-16.7%); }
  .mrb-pd__mobile-view--paper::after,
  .mrb-pd__mobile-view--devices::after { content:''; position:absolute; z-index:2; pointer-events:none; background:#fff; }
  .mrb-pd__mobile-view--paper::after { top:0; right:0; width:16%; height:62%; }
  .mrb-pd__mobile-view--devices::after { left:0; bottom:0; width:14%; height:48%; }
  .mrb-covers { grid-template-columns:1fr; max-width:320px; }
  .mrb-social { align-items:stretch; }
  .mrb-social__row { flex-direction:column; }
  .mrb-ad { width:100% !important; }
  .mrb-ad { width:100%; }
  .mrb-ad__media { width:100%; height:auto; aspect-ratio:var(--ar); }
}

/* Only explicit photo galleries use a vertical, scrollable presentation. */
.ls-modal.gallery-mode { align-items: flex-start; }
.ls-modal.gallery-mode .ls-modal-dialog { overflow: auto; width: min(1680px, 100%); }
.ls-modal.gallery-mode .ls-modal-viewport { overflow: visible; background: #F5F2EE; }
.ls-modal.gallery-mode .ls-modal-track {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px; padding: 28px;
}
.ls-modal.gallery-mode .ls-modal-slide {
  min-width: 0; display: block; border-radius: 8px;
  background: var(--color-white); box-shadow: 0 5px 16px rgba(20,20,18,.08);
}
.ls-modal.gallery-mode .ls-modal-slide img {
  width: 100%; height: auto; max-height: none; object-fit: cover; background: #EDE9E3;
}
@media (max-width: 700px) {
  .ls-modal { padding: 8px; }
  .ls-modal-dialog { max-height: calc(100vh - 16px); border-radius: 12px; }
  .ls-modal-head { padding: 28px 22px 20px; }
  .ls-modal-slide img { height: min(62vh, 560px); }
  .ls-modal.grid-mode .ls-modal-track {
    grid-template-columns: 1fr; gap: 14px; padding: 12px;
  }
  .ls-social-posts { gap: 8px; }
  .ls-ig-head { padding-inline: 7px; }
  .ls-ig-caption { display: none; }
  .ls-ig-reel { position: static; aspect-ratio: 9 / 14; max-height: none; }
  .ls-ig-reel-image, .ls-ig-reel-frame { min-height: 0; }
  .ls-modal.gallery-mode .ls-modal-track { grid-template-columns: 1fr; padding: 12px; }
}

/* ── BEFORE / AFTER MODAL ── */
.ls-before-after-modal {
  position: fixed; inset: 0; z-index: 5200; display: none;
  align-items: center; justify-content: center; padding: 24px;
}
.ls-before-after-modal.open { display: flex; }
.ls-before-after-backdrop { position: absolute; inset: 0; background: rgba(20,20,18,0.78); backdrop-filter: blur(4px); }
.ls-before-after-dialog {
  position: relative; z-index: 1; width: min(1680px, 100%); max-height: calc(100vh - 48px);
  overflow: auto; background: var(--color-white); border-radius: 18px; padding: 56px 54px 44px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.45); text-align: center;
  animation: lsModalPop 0.3s var(--ease);
}
.ls-before-after-kicker { color: #B98969; font-size: 11px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; margin-bottom: 14px; }
.ls-before-after-title { font-family: var(--font-serif); font-size: clamp(34px, 5vw, 58px); font-weight: 400; color: var(--color-black); line-height: 1.05; margin-bottom: 16px; }
.ls-before-after-copy { max-width: 620px; margin: 0 auto 34px; color: var(--color-gray-dark); line-height: 1.75; font-size: 14px; }
.ls-before-after-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; text-align: left; }
.ls-before-after-grid figure { min-width: 0; }
.ls-before-after-grid figcaption { display: flex; align-items: center; gap: 12px; margin: 0 0 12px 2px; font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--color-black); }
.ls-before-after-grid figcaption span { display: block; width: 28px; height: 1px; background: #B98969; }
.ls-before-after-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: #EEEAE5; }
.ls-before-after-arrow {
  position: static; z-index: 2; align-self: center; justify-self: center;
  display: grid; place-items: center; width: 46px; height: 46px;
  border: 1px solid rgba(139, 94, 60, .3);
  border-radius: 50%; background: #FCFAF7; color: #8B5E3C;
  box-shadow: 0 8px 22px rgba(48, 34, 24, .18);
  font-size: 25px; line-height: 1;
}
.ls-before-after-modal.contain-mode .ls-before-after-grid img { object-fit: contain; transform: scale(1.08); }
.ls-before-after-dots { display: flex; justify-content: center; gap: 8px; margin-top: 25px; }
.ls-before-after-dots button { width: 8px; height: 8px; padding: 0; border: 1px solid #B98969; background: transparent; border-radius: 50%; cursor: pointer; }
.ls-before-after-dots button.active { background: #B98969; }
.ls-before-after-details {
  display: none; margin-top: 38px; padding-top: 30px;
  border-top: 1px solid #E7E2DC; text-align: left;
}
.ls-before-after-details.visible { display: block; }
.ls-before-after-details h3 {
  margin-bottom: 16px; font-family: var(--font-poppins);
  font-size: 22px; font-weight: 600;
}
.ls-before-after-details-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.ls-before-after-details-grid img {
  width: 100%; height: 100%; min-height: 190px; max-height: 360px;
  object-fit: contain; border-radius: 8px; background: #F4F1EC;
  box-shadow: 0 10px 24px rgba(26,26,26,.09);
}
.ls-before-after-details-grid:not(.is-pressing-showcase) > img:last-child {
  grid-column: span 2; aspect-ratio: 16 / 9; object-fit: cover;
}
.ls-before-after-details-grid.is-pressing-showcase {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, clamp(190px, 22vw, 250px)) clamp(280px, 30vw, 360px);
  gap: 14px;
}
.is-pressing-showcase figure {
  display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0;
  overflow: hidden; border: 1px solid #ECE7DF; border-radius: 8px;
  background: #F8F5F0; box-shadow: 0 10px 24px rgba(26,26,26,.07);
}
.is-pressing-showcase figure:first-child { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.is-pressing-showcase figure:nth-child(2) { grid-column: 3; grid-row: 1; }
.is-pressing-showcase figure:nth-child(3) { grid-column: 3; grid-row: 2; }
.is-pressing-showcase figure:nth-child(4) { grid-column: 1; grid-row: 3; }
.is-pressing-showcase figure:nth-child(5) { grid-column: 2; grid-row: 3; }
.is-pressing-showcase figure:nth-child(6) { grid-column: 3; grid-row: 3; }
.ls-before-after-details-grid.is-pressing-showcase figure img {
  width: 100%; height: 100%; min-height: 0; max-height: none;
  border-radius: 0; object-fit: cover; background: #F5F1EB; box-shadow: none;
}
.ls-before-after-details-grid.is-pressing-showcase figure:nth-child(3) img,
.ls-before-after-details-grid.is-pressing-showcase figure:nth-child(5) img,
.ls-before-after-details-grid.is-pressing-showcase figure:nth-child(6) img { object-fit: contain; }
.is-pressing-showcase figcaption {
  display: flex; align-items: center; gap: 8px; min-height: 38px;
  padding: 8px 12px; color: #4D4944; font-size: 12px;
}
.is-pressing-showcase figcaption span { color: #D2A51F; font-size: 14px; }

/* ── HFWI PROJECT ── */
.product-gallery-modal {
  position: fixed; inset: 0; z-index: 5300; display: none;
  align-items: center; justify-content: center; padding: 12px;
}
.product-gallery-modal.open { display: flex; }
.product-gallery-backdrop { position: absolute; inset: 0; background: rgba(20,20,18,.78); backdrop-filter: blur(4px); }
.product-gallery-dialog {
  position: relative; z-index: 1; width: min(1680px, 100%); max-height: calc(100vh - 24px);
  overflow: auto; background: #F9F8F5; border-radius: 8px;
  box-shadow: 0 30px 90px rgba(0,0,0,.45); animation: lsModalPop .3s var(--ease);
}
.product-gallery-dialog > .ls-modal-close {
  position: sticky; top: 14px; z-index: 8; display: flex; float: right;
  margin: 14px 14px -58px 0; background: rgba(255,255,255,.94);
}
.product-gallery-nav {
  position: sticky; top: 0; z-index: 6;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 72px; padding: 18px 76px 18px 44px;
  background: rgba(3,26,56,.97); border-bottom: 1px solid rgba(244,178,56,.35);
  backdrop-filter: blur(12px);
}
.product-gallery-nav strong { color: #FFF; font-size: 13px; letter-spacing: .03em; }
.product-gallery-nav div { display: flex; align-items: center; gap: clamp(24px, 4vw, 58px); }
.product-gallery-nav a {
  color: #FFF; font-size: 10px; font-weight: 600; text-transform: uppercase;
  transition: color .2s;
}
.product-gallery-nav a:hover,
.product-gallery-nav a.is-active { color: #F4B238; }
.product-gallery-sections { text-align: left; }
.hfwi-project { scroll-margin-top: 72px; }
.hfwi-project figure { margin: 0; overflow: hidden; }
.hfwi-project figure img { width: 100%; height: 100%; display: block; object-fit: cover; }
.hfwi-project-hero {
  display: grid; grid-template-columns: minmax(210px, .35fr) minmax(0, 1.65fr);
  gap: clamp(28px, 5vw, 70px); align-items: center;
  padding: 42px 44px 34px;
}
.hfwi-project-copy { position: relative; z-index: 1; }
.hfwi-project-copy h2 {
  margin: 0 0 18px; color: #F4AA00; font-size: clamp(54px, 8vw, 104px);
  font-weight: 700; line-height: .9; text-transform: uppercase;
}
.hfwi-project-copy p { max-width: 260px; color: #181818; font-size: 14px; line-height: 1.65; }
.hfwi-project-copy a {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 36px;
  color: #C98B00; font-size: 10px; font-weight: 600; text-transform: uppercase;
}
.hfwi-project-copy a span { font-size: 18px; font-weight: 400; }
.hfwi-project-mark { position: absolute; top: 0; right: 22px; color: #F4AA00; font-size: 42px; }
.hfwi-project-lead { aspect-ratio: 2.05 / 1; }
.hfwi-project-lead img { object-position: center 42%; }
.hfwi-project--sol .hfwi-project-lead { aspect-ratio: 3 / 2; border-radius: 16px; overflow: hidden; align-self: center; }
.hfwi-project--sol .hfwi-project-lead img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.hfwi-campaign,
.hfwi-other { padding: 0 44px 40px; }
.hfwi-campaign h3,
.hfwi-other h3 {
  margin: 0 0 18px; color: #161616; font-size: 11px; font-weight: 700;
  text-transform: uppercase;
}
.hfwi-campaign-grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px;
  align-items: start;
}
.hfwi-campaign-grid figure { background: #F2F0EB; }
.hfwi-project .hfwi-campaign-grid img { height: auto; object-fit: contain; }
.hfwi-other-grid {
  columns: 3;
  column-gap: 10px;
}
.hfwi-other-grid figure {
  min-height: 0;
  margin: 0 0 10px;
  break-inside: avoid;
  background: #F2F0EB;
}
.hfwi-project .hfwi-other-grid img { height: auto; object-fit: contain; }
.hfwi-project--porter {
  display: grid; grid-template-columns: minmax(220px, .38fr) minmax(0, 1.62fr);
  gap: 34px; align-items: center; padding: 44px;
  margin-top: 12px;
  background: #080808; color: #FFF;
}
.hfwi-project--porter .hfwi-project-copy h2 {
  color: #D5B9A0; font-size: clamp(44px, 6vw, 82px);
}
.hfwi-project--porter .hfwi-project-copy p { color: #FFF; }
.hfwi-project--porter .hfwi-project-copy a { color: #D5B9A0; }
.hfwi-porter-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; min-height: 430px;
}
.hfwi-porter-grid figure { border: 1px solid #4E453F; background: #0D0D0D; }
.hfwi-project .hfwi-porter-grid img { object-fit: contain; }
.product-gallery-dialog:has(#hfwi-affligem:target) .product-gallery-nav {
  background: rgba(3, 26, 56, .96); border-bottom-color: rgba(224, 165, 46, .45);
}
.product-gallery-dialog:has(#hfwi-affligem:target) .product-gallery-nav strong,
.product-gallery-dialog:has(#hfwi-affligem:target) .product-gallery-nav a { color: #FFF; }
.product-gallery-dialog:has(#hfwi-affligem:target) .product-gallery-nav a[href="#hfwi-affligem"] {
  color: #F4B238; border-bottom: 1px solid #F4B238;
}
.hfwi-project--affligem {
  margin-top: 12px; padding: 0; color: #FFF;
  background:
    radial-gradient(circle at 72% 14%, rgba(17, 101, 158, .28), transparent 32%),
    linear-gradient(145deg, #031A38 0%, #062D57 55%, #031B39 100%);
}
.hfwi-affligem-intro {
  display: grid; grid-template-columns: minmax(280px, .46fr) minmax(0, 1.54fr);
  align-items: stretch;
}
.hfwi-affligem-intro .hfwi-project-copy {
  display: flex; flex-direction: column; justify-content: center; padding: 44px;
}
.hfwi-affligem-intro .hfwi-project-copy p { max-width: 210px; color: rgba(255,255,255,.86); }
.hfwi-affligem-intro .hfwi-project-copy a { color: #F4B238; }
.hfwi-affligem-logo {
  width: min(214px, 100%); height: auto; margin-bottom: 26px;
  align-self: flex-start; object-fit: contain; object-position: center;
}
.hfwi-affligem-intro .hfwi-project-copy .hfwi-affligem-title {
  margin: 0 0 18px; color: #FFF; font-family: var(--font-serif);
  font-size: clamp(30px, 3.2vw, 46px); font-weight: 400; line-height: 1.02; text-transform: none;
}
.hfwi-affligem-intro .hfwi-project-copy .hfwi-affligem-title span { display: block; color: #F4B238; }
.hfwi-affligem-lead { min-height: 0; background: #05264B; }
.hfwi-project .hfwi-affligem-lead img { height: auto; object-fit: contain; }
.hfwi-affligem-section { padding: 24px 44px 34px; border-top: 1px solid rgba(244,178,56,.62); }
.hfwi-affligem-section-title {
  display: flex; align-items: center; gap: 20px; margin: 28px 0 14px;
  color: #F4B238; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
}
.hfwi-affligem-section-title::after { content: ''; height: 1px; flex: 1; background: rgba(244,178,56,.75); }
.hfwi-affligem-a3grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.hfwi-affligem-a3grid figure {
  min-width: 0; overflow: hidden; background: #052448;
}
.hfwi-project .hfwi-affligem-a3grid img {
  width: 100%; height: auto; object-fit: contain; display: block;
}
.hfwi-affligem-encarts figure { background: #052448; }
.hfwi-project .hfwi-affligem-encarts img {
  width: 100%; height: auto; object-fit: contain; display: block;
}
.hfwi-affligem-print-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  width: 100%; margin: 12px 0 0;
}
.hfwi-affligem-print-grid figure { min-width: 0; background: #052448; }
.hfwi-project .hfwi-affligem-print-grid img { width: 100%; height: auto; object-fit: contain; display: block; }
.hfwi-affligem-encarts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.hfwi-scouting {
  padding: clamp(50px, 7vw, 88px) 44px 54px;
  background: #F8F7F3; color: #071D3A;
}
.hfwi-scouting-heading {
  display: grid; grid-template-columns: minmax(300px, .8fr) minmax(300px, 1fr);
  gap: clamp(38px, 7vw, 110px); align-items: end; margin-bottom: 34px;
}
.hfwi-scouting-kicker {
  margin: 0 0 18px; color: #A9A77F; font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
}
.hfwi-scouting-heading h3 {
  margin: 0; color: #B7B58E; font-size: clamp(48px, 6vw, 78px);
  font-weight: 700; line-height: .9; text-transform: uppercase;
}
.hfwi-scouting-heading h3 span { display: block; color: #071D3A; }
.hfwi-scouting-heading i { display: block; width: 54px; height: 3px; margin-top: 22px; background: #B7B58E; }
.hfwi-scouting-heading > p {
  max-width: 490px; margin: 0 0 6px; color: #252B32; font-size: 14px; line-height: 1.65;
}
.hfwi-scouting-grid {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, clamp(220px, 24vw, 320px)); gap: 18px;
}
.hfwi-scouting-grid figure {
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0; background: #F8F7F3;
}
.hfwi-scouting-grid .hfwi-scouting-main { grid-row: 1 / span 2; }
.hfwi-project .hfwi-scouting-grid img { min-height: 0; object-position: center; }
.hfwi-scouting-grid figcaption {
  display: flex; align-items: baseline; gap: 8px; padding-top: 10px;
  color: #777469; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
}
.hfwi-scouting-grid figcaption strong { color: #071D3A; font-size: 11px; letter-spacing: .1em; }
.hfwi-scouting--sol { margin-top: 12px; }
/* Repérage : un portrait (1012x1800) et un paysage (1800x1012) cote a cote.
   Colonnes proportionnelles a la largeur de chaque image a hauteur egale
   (0.56 et 1.78 de ratio → 0.32fr / 1fr), pour que les deux photos fassent
   la meme hauteur sans recadrage ni vide. */
.hfwi-shooting-grid {
  display: grid;
  grid-template-columns: minmax(0, .32fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.hfwi-shooting-grid figure {
  display: grid;
  grid-template-rows: auto auto;
  min-width: 0;
  margin: 0;
  background: #F8F7F3;
}
.hfwi-project .hfwi-shooting-grid img {
  width: 100%;
  height: auto;
  min-height: 0;
  object-fit: contain;
  display: block;
}
.hfwi-shooting-grid figcaption {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-top: 10px;
  color: #777469;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hfwi-shooting-grid figcaption strong { color: #071D3A; letter-spacing: .1em; }
/* Shared closing CTA for every case-study modal. Falls back to the
   case study's own --cat-accent/--cat-soft (set inline by
   renderCatalogueCaseHTML) when present, so a new client's footer is
   themed automatically without a dedicated CSS rule. */
.ls-case-contact-footer {
  --case-contact-accent: var(--cat-accent, #b98969);
  --case-contact-bg: var(--cat-soft, #f5f0ea);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin-top: 42px;
  padding: 24px 26px;
  color: #17202a;
  background: var(--case-contact-bg);
  border-top: 1px solid color-mix(in srgb, var(--case-contact-accent) 34%, transparent);
}
.ls-case-contact-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--case-contact-accent);
  border-radius: 50%;
  color: var(--case-contact-accent);
  font-size: 23px;
}
.ls-case-contact-footer strong {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ls-case-contact-footer p {
  max-width: 650px;
  margin: 0;
  color: #59636d;
  font-size: 13px;
  line-height: 1.55;
}
.ls-case-contact-footer > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  min-height: 46px;
  padding: 0 22px;
  color: #fff;
  background: var(--case-contact-accent);
  border: 1px solid var(--case-contact-accent);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .2s ease, filter .2s ease;
}
.ls-case-contact-footer > a:hover { transform: translateY(-2px); filter: brightness(.94); }
/* Variante "riche" pilotée par les données (cfg.footer) : plus généreuse,
   avec un eyebrow au-dessus du titre. Utilisée par renderCatalogueCaseHTML. */
.ls-case-contact-footer--rich { padding: 34px clamp(32px,5vw,88px); margin-top: 0; }
.ls-case-contact-footer--rich .cat-case-footer__eyebrow {
  display: block; margin-bottom: 6px; color: var(--case-contact-accent);
  font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.ls-case-contact-footer--rich strong { font-size: 20px; font-weight: 700; letter-spacing: 0; text-transform: none; margin-bottom: 6px; }
.ls-case-contact-footer--rich p { font-size: 14px; }
.ls-modal-dialog p,
.marina-case-dialog p,
.cist-case-dialog p,
.bonnes-case-dialog p,
.smgeag-case-dialog p,
.so-class-dialog p,
.product-gallery-dialog p { max-width: 75ch; }
.marina-case-dialog .ls-case-contact-footer { --case-contact-accent: #0d4f85; --case-contact-bg: #edf5fa; }
.cist-case-dialog .ls-case-contact-footer { --case-contact-accent: #245ab2; --case-contact-bg: #edf4fb; }
.bonnes-case-dialog .ls-case-contact-footer { --case-contact-accent: #3c7b37; --case-contact-bg: #f0f6eb; }
.smgeag-case-dialog .ls-case-contact-footer { --case-contact-accent: #078ba8; --case-contact-bg: #eaf7f9; }
.ls-catalogue-case .ls-case-contact-footer { --case-contact-accent: #1467d4; --case-contact-bg: #eef4fb; }
.ls-before-after-dialog .ls-case-contact-footer { --case-contact-accent: #092647; --case-contact-bg: #eef1f6; }
.ls-modal.grid-mode .ls-case-contact-footer { --case-contact-accent: #805c86; --case-contact-bg: #f2edf4; }
.ls-modal.gallery-mode .ls-case-contact-footer,
.so-class-dialog .ls-case-contact-footer { --case-contact-accent: #745a45; --case-contact-bg: #f6f0ea; }
.product-gallery-dialog .ls-case-contact-footer { --case-contact-accent: #f4b238; --case-contact-bg: #071d3a; color: #fff; }
.product-gallery-dialog .ls-case-contact-footer p { color: rgba(255,255,255,.78); }
@media (max-width: 650px) {
  .ls-before-after-dialog { padding: 38px 18px 22px; }
  .ls-before-after-grid { grid-template-columns: 1fr; gap: 12px; }
  .ls-before-after-arrow { width: 38px; height: 38px; font-size: 21px; transform: rotate(90deg); }
  .ls-before-after-copy { font-size: 13px; margin-bottom: 24px; }
  .ls-before-after-grid figcaption { font-size: 9px; letter-spacing: .14em; gap: 7px; }
  .ls-before-after-grid figcaption span { width: 16px; }
  .ls-before-after-details-grid { grid-template-columns: 1fr 1fr; }
  .ls-before-after-details-grid img { min-height: 140px; }
  .ls-before-after-details-grid.is-pressing-showcase {
    grid-template-columns: 1fr; grid-template-rows: none; gap: 12px;
  }
  .is-pressing-showcase figure,
  .is-pressing-showcase figure:first-child,
  .is-pressing-showcase figure:nth-child(n) { grid-column: auto; grid-row: auto; }
  .ls-before-after-details-grid.is-pressing-showcase figure img {
    height: auto; min-height: 0; max-height: none; aspect-ratio: auto; object-fit: contain;
  }
  .ls-before-after-details-grid.is-pressing-showcase figure:first-child img {
    aspect-ratio: 16 / 9; object-fit: cover;
  }
  .product-gallery-modal { padding: 12px; }
  .product-gallery-dialog { max-height: calc(100vh - 24px); }
  .product-gallery-nav { min-height: 58px; padding: 14px 60px 14px 18px; }
  .product-gallery-nav div { gap: 16px; }
  .product-gallery-nav a { font-size: 8px; }
  .hfwi-project-hero { grid-template-columns: 1fr; padding: 54px 18px 24px; }
  .hfwi-project-mark { right: 8px; }
  .hfwi-project-lead { aspect-ratio: 1.45 / 1; }
  .hfwi-campaign,
  .hfwi-other { padding-inline: 18px; }
  .hfwi-campaign-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hfwi-campaign-grid figure:last-child { grid-column: span 2; aspect-ratio: auto; }
  .hfwi-other-grid { columns: 2; }
  .hfwi-project--porter { grid-template-columns: 1fr; padding: 48px 18px 24px; }
  .hfwi-porter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 620px; }
  .hfwi-affligem-intro { grid-template-columns: 1fr; }
  .hfwi-affligem-intro .hfwi-project-copy { padding: 44px 18px 30px; }
  .hfwi-affligem-logo { width: min(182px, 72vw); }
  .hfwi-affligem-lead { min-height: 0; }
  .hfwi-affligem-section { padding-inline: 18px; }
  .hfwi-affligem-a3grid { grid-template-columns: 1fr; }
  .hfwi-affligem-print-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%;
  }
  .hfwi-affligem-grid { grid-template-columns: 1fr; padding: 7px 18px 24px; }
  .hfwi-scouting { padding: 44px 18px 28px; }
  .hfwi-scouting-heading { grid-template-columns: 1fr; gap: 20px; }
  .hfwi-scouting-grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 8px; }
  .hfwi-scouting-grid .hfwi-scouting-main { grid-row: auto; }
  .hfwi-scouting-grid figure { grid-template-rows: auto auto; }
  .hfwi-scouting-grid figure img { aspect-ratio: 4 / 3; }
  .hfwi-scouting-grid .hfwi-scouting-main img { aspect-ratio: 16 / 9; }
  .hfwi-scouting-grid figcaption { padding: 9px 0 14px; }
  .hfwi-shooting-grid { grid-template-columns: 1fr; gap: 8px; }
  .hfwi-shooting-grid figcaption { padding: 9px 0 14px; }
.ls-case-contact-footer { grid-template-columns: auto 1fr; margin-top: 28px; padding: 20px 18px; }
.ls-case-contact-footer > a { grid-column: 1 / -1; width: 100%; }
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .ls-header-inner { padding: 0 24px; }
  .projects-grid { grid-template-columns: repeat(2,1fr); }
  .ls-footer-inner {
    grid-template-columns:
      minmax(118px, 1fr)
      minmax(76px, .58fr)
      minmax(108px, .78fr)
      minmax(200px, 1.55fr)
      minmax(82px, .62fr);
    gap: 15px;
    padding: 28px 24px 30px;
  }
  .ls-footer-inner a,
  .ls-footer-inner address,
  .ls-footer-agency-sub { font-size: 11.5px; }
  .ls-footer-contact-line { gap: 7px; font-size: 11px; }
  .ls-footer-bottom { gap: 18px; padding: 12px 24px 18px; }
  .ls-footer-bottom-links { justify-content: center; }
  .ls-clients-grid { padding: 40px 40px; gap: 32px 48px; }
  .ls-project-cta__inner {
    min-height: 270px;
    grid-template-columns: minmax(280px, 420px) auto minmax(200px, 1fr);
    gap: 20px;
    padding-inline: 28px;
  }
  .ls-project-cta__copy { padding-bottom: 30px; }
  .ls-project-cta__button { margin-bottom: 30px; }
  .ls-project-cta__visual { height: 230px; }
}

/* Bascule vers le menu mobile dès 1024px : en dessous, logo + nav + icônes
   sociales + CTA ne tiennent plus sur une ligne sans se chevaucher (mesuré :
   ~918px de largeur minimale requise). Séparé du bloc 768px ci-dessous, qui
   gère le reste de la mise en page mobile (footer, etc.). */
@media (max-width: 1024px) {
  .ls-nav-links, .ls-nav-right { display: none; }
  .ls-mobile-header-socials { display: flex; }
  .ls-hamburger { display: flex; }
}

@media (max-width: 768px) {

  .ls-footer-arch { height: 38px; }
  .ls-footer-arch svg { height: 38px !important; }
  .ls-footer-inner {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "brand social"
      "nav expertise"
      "contact contact";
    gap: 22px;
    padding: 30px 28px;
  }
  .ls-footer-brand { align-items: flex-start; }
  .ls-footer-brand { grid-area: brand; }
  .ls-footer-nav-col { grid-area: nav; }
  .ls-footer-expertises-col { grid-area: expertise; }
  .ls-footer-contact-col { grid-area: contact; }
  .ls-footer-social-col { grid-area: social; }
  .ls-footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px 28px; }
  .ls-footer-bottom-links { gap: 18px; }

  .projects-grid { grid-template-columns: 1fr; }
  .filter-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .filter-tabs::-webkit-scrollbar { display: none; }
  .filter-tab { flex-shrink: 0; }
  .ls-clients-grid { padding: 32px 20px; gap: 26px 34px; }

  /* Modals remain wide and scrollable on compact screens. */
  .ls-modal { padding: 8px; }
  .ls-project-cta__inner {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 46px 24px 0;
  }
  .ls-project-cta__copy { padding-bottom: 0; }
  .ls-project-cta__button { margin: 0; padding-bottom: 0; }
  .ls-project-cta__visual { width: min(520px, 100%); height: 230px; justify-self: end; }
  .marina-case-modal { padding: 8px; }
  .marina-case-dialog { max-height: calc(100vh - 16px); }
  .marina-case-content { padding: 54px 22px 34px; }
  .marina-case-hero { grid-template-columns: 1fr; gap: 30px; padding-bottom: 44px; }
  .marina-case-hero h2 { white-space: normal; }
  .marina-case-logo { width: min(600px, 100%); }
  .marina-system-grid--sim-row { grid-template-columns: 1fr; }
  .marina-before-after {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .marina-before-after-arrow { justify-self: center; transform: rotate(90deg); }
  .marina-dossier-grid,
  .marina-system-grid { grid-template-columns: 1fr; }
  .marina-deployment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .so-class-modal { padding: 8px; }
  .so-class-dialog { max-height: calc(100vh - 16px); }
  .so-class-content { padding: 54px 22px 34px; }
  .so-class-hero { grid-template-columns: 1fr; min-height: 0; gap: 28px; padding-bottom: 44px; }
  .so-class-hero > img { max-height: 620px; }
  .so-class-section--social { margin-inline: -22px; padding-inline: 22px; }
  .so-class-instagram-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .so-class-product-spread { min-height: 620px; }
  .so-class-product-item { grid-template-columns: 1fr; }
  .so-class-product-item figure { min-height: 220px; border-right: 0; border-bottom: 1px solid #E0DAD6; }
  .so-class-product-item figure img { min-height: 220px; }
  .so-class-gallery img,
  .so-class-gallery__wide img { height: auto; }
  .cist-case-modal { padding: 8px; }
  .cist-case-dialog { max-height: calc(100vh - 16px); }
  .cist-case-content { padding: 54px 22px 34px; }
  .pressing-case-content { padding-top: 0; }
  .pressing-case-content > .pressing-case-hero { margin-inline: -22px; }
  .cist-case-hero { grid-template-columns: 1fr; gap: 30px; padding-bottom: 44px; }
  .cist-case-logo { width: min(520px, 100%); }
  .cist-case-section--tinted { margin-inline: -22px; padding-inline: 22px; }
  .cist-before-after { grid-template-columns: 1fr; gap: 12px; }
  .cist-before-after-arrow { justify-self: center; transform: rotate(90deg); }
  .cist-logo-grid,
  .cist-branch-grid,
  .cist-rule-grid,
  .cist-guideline-grid,
  .cist-type-grid,
  .cist-photo-grid,
  .cist-flyer-grid,
  .cist-website-grid,
  .cist-symbol-layout { grid-template-columns: 1fr; }
  .cist-photo-grid__wide { grid-column: span 1; }
  .cist-guideline-grid__wide { grid-column: span 1; }
  .cist-guideline-grid__wide img { aspect-ratio: 1.8 / 1; }
  .cist-website-card--wide { grid-column: span 1; }
  .cist-prohibited-logo-grid { grid-template-columns: 1fr; }
  .cist-social-showcase { grid-template-columns: 1fr; }
  .smgeag-strategy-grid,
  .smgeag-logo-grid,
  .smgeag-showcase-grid { grid-template-columns: 1fr; }
  .smgeag-icon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .smgeag-showcase-grid__wide { grid-column: span 1; }
  .smgeag-showcase-grid img { height: auto; }
  .bonnes-evolution-grid,
  .bonnes-system-grid,
  .bonnes-application-grid { grid-template-columns: 1fr; }
  .bonnes-logo-principles { grid-template-columns: 1fr; }
  .bonnes-logo-board { grid-template-columns: 1fr; }
  .bonnes-application-grid__wide { grid-column: span 1; }
  .bonnes-application-grid__tall { grid-column: 1; grid-row: auto; }
  .bonnes-application-grid__tall img { flex: none; object-fit: contain; max-height: 70vh; }
  .bonnes-case-section--yellow { margin-inline: -22px; padding-inline: 54px 22px; }
  .cist-palette { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cist-application-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cist-application-grid img { height: 240px; }
}

@media (max-width: 420px) {
  .ls-header-inner { padding-inline: 10px; }
  .ls-logo, .ls-nav-logo { gap: 8px; }
  .ls-logo-badge { width: 44px; height: 44px; }
  .ls-logo-name { font-size: 11px; letter-spacing: .08em; }
  .ls-logo-sub { font-size: 7.5px; letter-spacing: .12em; }
}

@media (max-width: 768px) {
  body::before { display: none; }
  .ls-modal-backdrop,
  .ls-before-after-backdrop,
  .product-gallery-backdrop,
  .marina-case-backdrop,
  .cist-case-backdrop,
  .bonnes-case-backdrop,
  .smgeag-case-backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

body[data-page="contact"] .ls-footer-arch { display: none; }
/* Pages dont la dernière section est blanche. */
body[data-page="mentions"],
body[data-page="confidentialite"],
body[data-page="news"] { --footer-arch-surface: var(--color-white); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

@media (max-width: 560px) {
  .ls-footer-inner { grid-template-columns: 1fr 1fr; gap: 22px 20px; }
  .so-class-gallery,
  .so-class-instagram-grid { grid-template-columns: 1fr; }
  .so-class-product-spread { grid-template-columns: 1fr; min-height: 0; }
  .so-class-product-spread--reverse .so-class-product-pair { order: 2; }
  .so-class-product-spread--reverse .so-class-product-model { order: 1; }
  .so-class-product-model img { height: auto; }
  .so-class-product-item { grid-template-columns: minmax(0, 1.2fr) minmax(140px, .8fr); }
  .so-class-product-item figure { min-height: 210px; border-right: 1px solid #E0DAD6; border-bottom: 0; }
  .so-class-product-item figure img { min-height: 210px; }
  .so-class-gallery__wide { grid-column: span 1; }
  .so-class-gallery img,
  .so-class-gallery__wide img { height: auto; max-height: none; aspect-ratio: auto; }
  .cist-application-grid { grid-template-columns: 1fr; }
  .cist-application-card--wide { grid-column: span 1; }
  .cist-application-card--wide img,
  .cist-application-grid img { height: 260px; }
  .smgeag-icon-grid { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  .ls-footer-inner {
    grid-template-columns: 1fr;
    grid-template-areas: "brand" "nav" "expertise" "contact" "social";
  }
}

@media (max-width: 480px) {
  #scroll-top-btn { bottom: 52px; right: 20px; }
}

/* ══════════════════════════════════════════════════════
   MARQUEE — scrolling logo rows
   ══════════════════════════════════════════════════════ */
.ls-marquee-wrapper {
  overflow: hidden;
  padding: 12px 0;
  /* lives outside .container on purpose — full section width instead of
     being capped by the 1280px content container, so the logo band reads
     as wide/horizontal as the reference. The mask-image fade on the rows
     handles the edges so it doesn't feel abrupt. */
  width: 100%;
}
.ls-marquee-row {
  display: flex;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.ls-marquee-row + .ls-marquee-row { margin-top: 36px; }
.ls-marquee-track {
  display: flex;
  gap: 0;
  align-items: center;
  animation: lsMarqueeLeft 38s linear infinite;
  width: max-content;
  flex-shrink: 0;
  will-change: transform;
  transform: translate3d(0,0,0);
}
.ls-marquee-row--rtl .ls-marquee-track {
  animation-direction: reverse;
}
@keyframes lsMarqueeLeft {
  0%   { transform: translate3d(0,0,0); }
  100% { transform: translate3d(-50%,0,0); }
}
/* Les fichiers Logo-Clients-black-*.svg sont déjà monochromes noirs : le
   filtre grayscale+brightness ne changeait rien à l'image mais forçait le
   compositeur à re-rastériser 50 éléments à chaque frame de défilement, d'où
   les saccades sur les machines à petit GPU. Seule l'opacité reste. */
.ls-marquee-track img {
  height: 38px;
  width: auto;
  max-width: 160px;
  opacity: 0.55;
  object-fit: contain;
  flex-shrink: 0;
  transition: opacity 0.25s var(--ease);
  display: block;
  margin-right: 72px;
}
.ls-marquee-track img:hover { opacity: 1; }
.ls-marquee-track .ls-logo-lg { height: 50px; max-width: 180px; }

@media (prefers-reduced-motion: reduce) {
  .ls-marquee-track { animation: none; }
}

/* ══════════════════════════════════════════════════════
   STICKY BOTTOM BAR
   ══════════════════════════════════════════════════════ */
.ls-sticky-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 990;
  background: rgba(20, 20, 18, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,0.08);
  transform: translateY(100%);
  transition: transform 0.38s var(--ease);
  pointer-events: none;
}
.ls-sticky-bar.visible {
  transform: translateY(0);
  pointer-events: auto;
}
.ls-sticky-bar-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.ls-sticky-bar-info {
  display: flex;
  align-items: center;
  gap: 28px;
  flex: 1;
  min-width: 0;
}
.ls-sticky-bar-info a,
.ls-sticky-bar-info span {
  font-family: var(--font-poppins);
  font-size: 12px;
  font-weight: 400;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
  display: flex;
  align-items: center;
  gap: 6px;
}
.ls-sticky-bar-info a:hover { color: var(--color-olive-light); }
.ls-sticky-bar-info svg { flex-shrink: 0; }
.ls-sticky-socials {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.ls-sticky-social {
  color: #ffffff;
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ls-sticky-social:hover { color: var(--color-olive-light); transform: translateY(-1px); }

/* When sticky bar is visible, raise the scroll-to-top button */
#scroll-top-btn.ls-raised { bottom: 88px; }

/* ── LE PRESSING CASE STUDY ──────────────────────────────────────────── */
/* Contrairement au hero CIST (fond blanc, à fleur de page), celui-ci est un
   bloc de couleur : il lui faut ses propres marges intérieures, sinon le texte
   vient coller le bord. */
.pressing-case-hero {
  background: #133246;
  grid-template-columns: minmax(0, 1.2fr) minmax(240px, .78fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  padding: clamp(36px, 4.4vw, 60px) clamp(28px, 4vw, 56px);
  color: #fff;
}
.pressing-case-content { padding-top: 0; }
.pressing-case-content > .pressing-case-hero {
  margin-inline: calc(clamp(48px, 6vw, 100px) * -1);
}
.pressing-case-badge {
  background: rgba(245,200,50,.15);
  color: #F5C832;
  border-color: rgba(245,200,50,.3);
}
.pressing-case-hero h2 { color: #fff; }
.pressing-case-hero p { color: rgba(255,255,255,.76); }
.pressing-case-meta { color: rgba(255,255,255,.52); border-top-color: rgba(245,200,50,.4); }
.pressing-case-close { color: #133246; background: #fff; border-color: rgba(19,50,70,.18); }
.pressing-hero-logo {
  margin: 0;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
}
.pressing-hero-logo img { display: block; width: 100%; height: auto; object-fit: contain; }
.pressing-hero-logo--svg {
  background: transparent;
  padding: 0;
}
.pressing-hero-logo--svg img { max-width: 320px; margin: 0 auto; }

.pressing-case-section--tinted { background: #f3f6f9; }
.pressing-section-heading span { color: #133246; }
.pressing-section-heading h3 { color: #0f2738; }

/* Brief cards */
.pressing-brief-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.6fr;
  gap: 10px;
  margin-bottom: 28px;
}
.pressing-brief-card {
  background: #fff;
  border: 1px solid rgba(19,50,70,.1);
  border-radius: 10px;
  padding: 20px 22px 22px;
}
.pressing-brief-card--accent {
  background: #133246;
  border-color: transparent;
}
.pressing-brief-card h4 {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #133246;
  margin: 0 0 12px;
}
.pressing-brief-card--accent h4 { color: #F5C832; }
.pressing-brief-card ul {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 5px;
}
.pressing-brief-card ul li {
  font-size: 13px; font-weight: 500; color: #2a3a45;
  padding-left: 14px; position: relative;
}
.pressing-brief-card--accent ul li { color: rgba(255,255,255,.85); }
.pressing-brief-card ul li::before {
  content: '—'; position: absolute; left: 0;
  color: #F5C832; font-size: 10px;
}
.pressing-brief-card p { font-size: 13px; line-height: 1.65; color: #3a4a55; margin: 0; }

/* Avant preview (dans les coulisses) */
.pressing-avant-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.pressing-avant-preview figure {
  margin: 0; overflow: hidden; border-radius: 10px;
}
.pressing-avant-preview figure img {
  display: block; width: 100%;
  aspect-ratio: 4/3; object-fit: cover; object-position: center;
}
.pressing-avant-preview figcaption {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 13px; font-size: 12px; color: #3a4a55; background: #f3f6f9;
}

/* AVANT / APRÈS labels */
.pressing-label {
  display: inline-block; font-size: 9px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 3px; flex-shrink: 0;
}
.pressing-label--avant { background: rgba(80,80,80,.1); color: #555; }
.pressing-label--apres { background: rgba(19,50,70,.14); color: #133246; }

/* Notre solution — logo & concept features */
.pressing-logo-feature,
.pressing-concept-feature {
  margin: 0 0 10px; overflow: hidden;
  border-radius: 10px; border: 1px solid rgba(19,50,70,.08); background: #fff;
}
.pressing-logo-feature img {
  display: block; width: 100%; height: auto;
  max-height: 360px; object-fit: contain; padding: 32px 80px;
}
.pressing-concept-feature { margin-bottom: 0; }
.pressing-concept-feature img {
  display: block; width: 100%; height: auto;
  max-height: 280px; object-fit: contain; padding: 28px 60px;
}

/* Système grid (mono + couleur) */
.pressing-systeme-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.pressing-systeme-grid figure {
  margin: 0; overflow: hidden; border-radius: 10px;
  border: 1px solid rgba(19,50,70,.08); background: #fff;
}
.pressing-systeme-grid figure img {
  display: block; width: 100%; height: auto;
  max-height: 300px; object-fit: contain; padding: 16px 20px;
}

/* Full-width charte images */
.pressing-full-img {
  margin: 0; overflow: hidden; border-radius: 10px;
  border: 1px solid rgba(19,50,70,.08); background: #fff;
}
.pressing-full-img img {
  display: block; width: 100%; height: auto;
  max-height: 460px; object-fit: contain; padding: 24px 48px;
}

/* Avant / Après paired */
.pressing-store-label {
  margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #133246;
}
.pressing-store-label + .pressing-avant-apres-grid { margin-bottom: 22px; }
.pressing-avant-apres-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start;
}
.pressing-aa-item {
  margin: 0; overflow: hidden; border-radius: 10px;
}
.pressing-aa-item img {
  display: block; width: 100%;
  aspect-ratio: 16/10; object-fit: cover; object-position: center;
}
.pressing-aa-item--portrait img {
  aspect-ratio: 3/4; object-position: center 35%;
}
.pressing-aa-item figcaption {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 13px; font-size: 12px; color: #3a4a55; background: #f3f6f9;
}

/* Applications */
.pressing-fullbleed {
  margin: 0 0 10px; overflow: hidden; border-radius: 10px;
}
.pressing-fullbleed img {
  display: block; width: 100%;
  max-height: 520px; object-fit: cover; object-position: center 25%;
}
.pressing-fullbleed--contain {
  background: #0e2635;
}
.pressing-fullbleed--contain img {
  max-height: 460px; object-fit: contain; object-position: center;
}
.pressing-apps-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.pressing-apps-grid figure {
  margin: 0; overflow: hidden; border-radius: 10px;
  border: 1px solid rgba(19,50,70,.08);
}
.pressing-apps-grid figure img {
  display: block; width: 100%;
  aspect-ratio: 4/3; object-fit: cover; object-position: center;
}
.pressing-apps-grid--mockups {
  grid-template-columns: repeat(3, 1fr);
}
.pressing-apps-grid--mockups figure {
  background: #f3f6f9;
  display: flex; align-items: center; justify-content: center;
}
.pressing-apps-grid--mockups figure img {
  aspect-ratio: 3/4; object-fit: contain; object-position: center;
  padding: 10px;
}

@media (max-width: 640px) {
  .pressing-case-hero { grid-template-columns: 1fr; }
  .pressing-hero-logo { display: none; }
  .pressing-brief-grid { grid-template-columns: 1fr 1fr; }
  .pressing-brief-card--wide { grid-column: span 2; }
  .pressing-avant-preview,
  .pressing-avant-apres-grid,
  .pressing-systeme-grid,
  .pressing-apps-grid { grid-template-columns: 1fr; }
  .pressing-apps-grid--mockups { grid-template-columns: repeat(2, 1fr); }
  .pressing-logo-feature img { padding: 20px 24px; }
  .pressing-concept-feature img { padding: 16px 20px; }
  .pressing-full-img img { padding: 16px 20px; }
}

@media (max-width: 768px) {
  .ls-sticky-bar-inner { padding: 0 20px; gap: 16px; }
  .ls-sticky-bar-info { gap: 16px; }
  .ls-sticky-bar-info .ls-sticky-addr { display: none; }
  .ls-sticky-bar-info a,
  .ls-sticky-bar-info span { font-size: 11px; }
}

/* ============================================================
   LES BELLES ENVIES (.lbe-*) — pâtisserie premium, éditorial
   ============================================================ */
.ls-modal.custom-mode .ls-modal-dialog:has(.lbe-case) { width:min(98vw,1560px); height:94vh; max-height:94vh; }
.ls-modal.custom-mode .ls-modal-viewport:has(.lbe-case) { background:#FFF; }

.lbe-case {
  --lbe-black:#0b0a0a; --lbe-text:#241c1a; --lbe-red:#e62932;
  --lbe-pink:#f9e3e4; --lbe-pink-light:#fff6f5; --lbe-brown:#5a362f;
  --lbe-cream:#faf6f1; --lbe-line:#eee6e2; --lbe-muted:#716967;
  color:var(--lbe-text); background:#fff; overflow:hidden;
}
.lbe-case * { box-sizing:border-box; }
.lbe-case figure { margin:0; }
.lbe-case img { display:block; max-width:100%; }
.lbe-case > section { padding:clamp(58px,5vw,78px) clamp(24px,5vw,82px); }
.lbe-case > section > * { width:min(100%,1360px); margin-inline:auto; }
.lbe-case h1,.lbe-case h2 { font-family:var(--font-serif); color:var(--lbe-black); }
.lbe-case h1 { margin:0; font-size:clamp(42px,3.45vw,54px); font-weight:600; line-height:1.03; letter-spacing:-.035em; }
.lbe-case h2 { margin:0; font-size:clamp(31px,3.25vw,52px); font-weight:600; line-height:1.07; letter-spacing:-.026em; }
.lbe-case p { margin:0; color:var(--lbe-muted); font-size:clamp(14px,1.02vw,16px); line-height:1.72; }
.lbe-eyebrow {
  margin:0 0 14px !important; color:var(--lbe-red) !important; font-family:var(--font-poppins);
  font-size:10px !important; font-weight:750; letter-spacing:.16em; line-height:1.3 !important; text-transform:uppercase;
}

/* 01 — Hero sans navigation interne. */
.lbe-hero {
  padding-top:clamp(48px,5.5vw,86px) !important;
  padding-bottom:clamp(54px,4vw,70px) !important;
  background:linear-gradient(115deg,#fff 0%,#fffaf8 58%,#fff5f2 100%);
}
.lbe-hero__grid { display:grid; grid-template-columns:minmax(380px,1fr) minmax(420px,1fr); gap:clamp(48px,5.2vw,82px); align-items:center; }
.lbe-kicker {
  display:inline-flex; align-items:center; gap:10px; margin-bottom:22px; color:var(--lbe-black);
  font-family:var(--font-poppins); font-size:11px; font-weight:700; letter-spacing:.09em;
}
.lbe-kicker::before { content:""; width:7px; height:7px; flex:none; border-radius:50%; background:var(--lbe-red); }
.lbe-hero__copy > p:not(.lbe-hero__slogan) { max-width:520px; margin-top:24px; }
.lbe-hero__slogan { margin-top:25px !important; color:var(--lbe-red) !important; font-family:var(--font-serif); font-size:clamp(18px,1.6vw,24px) !important; font-style:italic; }
.lbe-hero__visual { position:relative; width:min(100%,560px); justify-self:end; }
.lbe-hero__top,.lbe-hero__bottom { overflow:hidden; border-radius:22px; background:var(--lbe-cream); }
.lbe-hero__top { aspect-ratio:1.5/1; }
.lbe-hero__top img { width:100%; height:100%; object-fit:cover; object-position:center 52%; }
.lbe-hero__bottom { width:100%; aspect-ratio:1.5/1; margin:14px 0 0; background:#f7c9ca; }
.lbe-hero__bottom img { width:100%; height:100%; object-fit:cover; object-position:center 49%; }
.lbe-hero__logo {
  position:absolute; z-index:2; left:clamp(-46px,-3vw,-24px); top:50%; width:clamp(96px,8.8vw,136px); aspect-ratio:4/5;
  display:grid; place-items:center; padding:clamp(15px,1.4vw,22px); border-radius:24px;
  background:var(--lbe-black); box-shadow:0 14px 34px rgba(31,19,17,.16); transform:translateY(-50%);
}
.lbe-hero__logo img { width:100%; height:100%; object-fit:contain; }

/* 02 — Introduction du processus. */
.lbe-workflow-intro { padding-top:clamp(58px,4.6vw,72px) !important; padding-bottom:clamp(26px,2.3vw,34px) !important; background:#fff; }
.lbe-workflow-intro__copy > p { margin-top:9px; }

/* 03 — Trois réalisations à leur ratio natif 4:5. */
.lbe-featured { padding-top:0 !important; background:#fff; }
.lbe-featured__grid,.lbe-post-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.2vw,32px); }
.lbe-featured figure,.lbe-post-grid figure,.lbe-info-posts__grid figure { overflow:hidden; border-radius:14px; background:var(--lbe-cream); }
.lbe-featured img,.lbe-post-grid img,.lbe-info-posts__grid img { width:100%; height:auto; }

/* 04–05 — Deux démonstrations source → création finale, comme sur la maquette. */
.lbe-showcase-row {
  padding-top:clamp(54px,4vw,64px) !important;
  padding-bottom:clamp(54px,4vw,64px) !important;
  background:#fffdfb;
}
.lbe-showcase-row--alternate { background:#fff; }
.lbe-showcase-row__inner {
  width:min(100%,1220px) !important;
  display:grid; grid-template-columns:minmax(220px,.62fr) minmax(0,1.38fr);
  gap:clamp(44px,6vw,94px); align-items:center;
}
.lbe-showcase-row__copy { max-width:390px; }
.lbe-showcase-row__label {
  margin:0 0 28px !important; color:var(--lbe-brown) !important; font-family:var(--font-serif);
  font-size:12px !important; line-height:1.2 !important;
}
.lbe-showcase-row__copy h2 { max-width:360px; font-size:clamp(30px,3vw,46px); }
.lbe-showcase-row__copy > p:last-child { max-width:360px; margin-top:18px; }
.lbe-showcase-row__media { min-width:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,2vw,30px); }
.lbe-showcase-row__figure { min-width:0; aspect-ratio:4/5; overflow:hidden; border-radius:14px; background:#f0efec; }
.lbe-showcase-row__figure img { width:100%; height:100%; display:block; }
.lbe-showcase-row__figure--source img { object-fit:cover; object-position:center 52%; }
.lbe-showcase-row__figure--final img { object-fit:contain; }

/* 06 — Croissant, Éclair chocolat, Brioche. */
.lbe-viennoiseries { background:#fff; }
.lbe-section-heading { max-width:none; margin-bottom:clamp(28px,3vw,42px) !important; text-align:left; }
.lbe-section-heading > p:last-child { max-width:650px; margin:9px 0 0; }

/* 07 — Communications d’information. */
.lbe-info-posts { background:#fff; }
.lbe-info-posts__inner { display:grid; grid-template-columns:minmax(220px,.64fr) minmax(0,1.8fr); gap:clamp(42px,6vw,92px); align-items:center; }
.lbe-info-posts__copy h2 { font-size:clamp(24px,2.2vw,32px); font-weight:500; letter-spacing:.01em; }
.lbe-info-posts__copy > p:last-child { max-width:390px; margin-top:18px; }
.lbe-info-posts__grid { min-width:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,28px); align-items:start; }

/* 08 — Conclusion éditoriale. */
.lbe-final-cta { padding-top:clamp(54px,4vw,64px) !important; padding-bottom:0 !important; background:#fff; }
.lbe-final-cta__inner { overflow:hidden; display:grid; grid-template-columns:minmax(300px,.72fr) minmax(0,1.5fr); align-items:stretch; border-radius:24px; background:var(--lbe-cream); }
.lbe-final-cta__copy { align-self:center; padding:clamp(36px,4.5vw,70px); }
.lbe-final-cta__copy > p { max-width:390px; margin-top:18px; }
.lbe-final-cta__button {
  display:inline-flex; align-items:center; gap:10px; margin-top:26px; padding:13px 23px; border-radius:999px;
  color:#fff; background:var(--lbe-red); font-family:var(--font-poppins); font-size:11px; font-weight:750;
  letter-spacing:.05em; text-decoration:none; text-transform:uppercase; transition:transform .2s ease,background .2s ease;
}
.lbe-final-cta__button:hover { transform:translateY(-2px); background:#bd171f; }
/* La hauteur suit celle de la colonne texte : une hauteur fixe laissait une
   bande crème sous l'image quand le texte était plus haut. */
.lbe-final-cta__visual { min-height:clamp(340px,28vw,420px); height:100%; align-self:stretch; }
.lbe-final-cta__visual { display:grid; place-items:center; padding:clamp(18px,2.4vw,36px); background:#eee7e0; }
.lbe-final-cta__visual img { width:100%; height:100%; max-height:680px; object-fit:contain; object-position:center; display:block; }

/* 09 — Bande de fin de projet compacte. */
.lbe-project-footer { min-height:112px; padding:22px clamp(24px,5vw,82px); background:var(--lbe-black); }
.lbe-project-footer__inner { width:min(100%,1360px); margin-inline:auto; display:grid; grid-template-columns:.72fr 1.35fr .8fr; align-items:center; gap:clamp(22px,4vw,60px); }
.lbe-project-footer__logo img { width:clamp(150px,14vw,220px); height:auto; }
.lbe-project-footer__mid { color:rgba(255,255,255,.62); font-family:var(--font-poppins); font-size:11px; line-height:1.55; }
.lbe-project-footer__mid b { color:#fff; font-weight:650; }
.lbe-project-footer__right { justify-self:end; text-align:right; }
.lbe-project-footer__right strong { display:block; margin-bottom:8px; color:#fff; font-family:var(--font-poppins); font-size:12px; font-weight:650; }
.lbe-project-footer__button { display:inline-flex; align-items:center; gap:9px; padding:8px 16px; border:1px solid rgba(255,255,255,.34); border-radius:999px; color:#fff; font-family:var(--font-poppins); font-size:10px; font-weight:650; text-decoration:none; }

@media (max-width:1050px) {
  .lbe-hero__grid { grid-template-columns:minmax(300px,.9fr) minmax(380px,1.1fr); gap:42px; }
  .lbe-showcase-row__inner,.lbe-info-posts__inner { grid-template-columns:1fr; }
  .lbe-showcase-row__copy,.lbe-info-posts__copy { max-width:620px; }
  .lbe-showcase-row__copy > p:last-child,.lbe-info-posts__copy > p:last-child { max-width:560px; }
  .lbe-showcase-row__media { width:min(100%,880px); }
}
@media (max-width:820px) {
  .ls-modal.custom-mode .ls-modal-dialog:has(.lbe-case) { width:100vw; height:100dvh; max-height:100dvh; border-radius:0; }
  .lbe-hero__grid { grid-template-columns:1fr; }
  .lbe-hero__copy { max-width:680px; }
  .lbe-hero__visual { width:min(100%,680px); justify-self:center; }
  .lbe-featured__grid,.lbe-post-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lbe-featured__grid figure:last-child,.lbe-post-grid figure:last-child { grid-column:1/-1; width:calc(50% - 12px); justify-self:center; }
  .lbe-project-footer__inner { grid-template-columns:1fr 1.35fr; }
  .lbe-project-footer__right { grid-column:1/-1; justify-self:start; text-align:left; }
}
@media (max-width:620px) {
  .lbe-case > section { padding:64px 20px; }
  .lbe-case h1 { font-size:clamp(38px,12vw,52px); }
  .lbe-case h2 { font-size:clamp(30px,9vw,42px); }
  .lbe-hero { padding-top:58px !important; }
  .lbe-hero__bottom { width:100%; }
  .lbe-hero__logo { left:-8px; top:50%; width:92px; border-radius:19px; }
  .lbe-workflow-intro { padding-bottom:30px !important; }
  .lbe-featured__grid,.lbe-post-grid,.lbe-info-posts__grid { grid-template-columns:1fr; gap:20px; }
  .lbe-featured__grid figure:last-child,.lbe-post-grid figure:last-child { grid-column:auto; width:100%; }
  .lbe-showcase-row__media { grid-template-columns:1fr; gap:20px; }
  .lbe-final-cta__inner { grid-template-columns:1fr; }
  .lbe-final-cta__visual { min-height:0; }
  .lbe-final-cta__visual img { height:auto; object-fit:contain; }
  .lbe-project-footer { padding:30px 20px; }
  .lbe-project-footer__inner { grid-template-columns:1fr; gap:16px; text-align:center; justify-items:center; }
  .lbe-project-footer__right { grid-column:auto; justify-self:center; text-align:center; }
  .lbe-project-footer__mid { max-width:340px; }
}

/* ============================================================
   CAP CRÉOLE (.ccr-*) — social media, éditorial caribéen
   ============================================================ */
.ls-modal.custom-mode .ls-modal-dialog:has(.ccr-case) { width: min(98vw, 1400px); height: 92vh; max-height: 92vh; }
.ls-modal.custom-mode .ls-modal-viewport:has(.ccr-case) { background:#FFF; }

.ccr-case {
  --ccr-black:#0b1f33; --ccr-text:#12212f; --ccr-blue:#1670b8;
  --ccr-turquoise-tint:#e3f3f5; --ccr-sand-light:#fbf7ee; --ccr-navy:#0f2a4a;
  --ccr-sand:#f6f1e4; --ccr-border:#e6e2d6; --ccr-muted:#5f6b72;
  background:#FFF; color:var(--ccr-text);
}
.ccr-case > section { padding:clamp(40px,4.4vw,64px) clamp(24px,3.2vw,64px); }
.ccr-case > section + section { padding-top:0; }
.ccr-case > section > * { max-width:1320px; margin-inline:auto; }
.ccr-case h1, .ccr-case h2 { font-family:var(--font-serif); margin:0 0 18px; font-size:clamp(34px,3.8vw,56px); line-height:1.08; letter-spacing:-.01em; font-weight:600; color:var(--ccr-black); }
.ccr-case h2:not(.case-title) { font-family:var(--font-serif); margin:0 0 8px; font-size:clamp(26px,2.6vw,38px); line-height:1.12; font-weight:600; color:var(--ccr-black); }
.ccr-case h3 { font-family:var(--font-serif); margin:0; font-size:clamp(17px,1.3vw,21px); font-weight:600; }
.ccr-case p { margin:0; color:var(--ccr-muted); font-size:clamp(14.5px,1.05vw,16px); line-height:1.65; }

/* --- Kicker (point rouge + label) --- */
.ccr-kicker { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-poppins); font-size:12.5px; font-weight:600; letter-spacing:.04em; color:var(--ccr-black); margin-bottom:16px; }
.ccr-kicker::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--ccr-blue); flex-shrink:0; }

/* --- 01 Hero --- */
.ccr-hero { padding-top:clamp(28px,3vw,44px) !important; }
.ccr-hero__grid { display:grid; grid-template-columns:.92fr 1fr; gap:clamp(32px,4vw,64px); align-items:center; }
.ccr-hero__copy p { max-width:440px; margin-top:14px; }
.ccr-hero__slogan { font-family:var(--font-serif); font-style:italic; color:var(--ccr-blue); font-size:clamp(16px,1.3vw,19px); margin-top:16px; }
.ccr-hero__visual { position:relative; }
.ccr-hero__top, .ccr-hero__bottom { border-radius:18px; overflow:hidden; background:var(--ccr-sand); }
.ccr-hero__top { aspect-ratio:16/8; margin-bottom:14px; }
.ccr-hero__bottom { aspect-ratio:16/10; background:var(--ccr-sand-light); }
.ccr-hero__top img { width:100%; height:100%; object-fit:cover; display:block; }
.ccr-hero__bottom img { width:100%; height:100%; object-fit:contain; display:block; }
.ccr-hero__logo {
  position:absolute; z-index:2; left:clamp(16px,2.4vw,36px); top:50%; transform:translateY(-50%);
  width:clamp(96px,9vw,140px); aspect-ratio:1/1; border-radius:50%; background:#FFFFFF; border:1px solid var(--ccr-border);
  display:flex; align-items:center; justify-content:center; padding:clamp(18px,1.6vw,24px);
  box-shadow:0 14px 34px rgba(0,0,0,.28);
}
.ccr-hero__logo img { width:100%; height:100%; object-fit:contain; }

/* --- 02 Workflow intro + separator --- */
.ccr-workflow-intro { text-align:left; padding-bottom:0 !important; }
.ccr-workflow-intro p { margin-top:6px; }
.ccr-workflow-sep { display:flex; align-items:center; gap:18px; padding-block:clamp(28px,3vw,40px) !important; }
.ccr-workflow-sep::before, .ccr-workflow-sep::after { content:''; flex:1; height:1px; background:var(--ccr-border); }
.ccr-workflow-sep span { font-family:var(--font-poppins); font-size:12.5px; font-weight:600; letter-spacing:.08em; color:var(--ccr-muted); text-transform:uppercase; white-space:nowrap; }

/* --- Workflow rows --- */
.ccr-workflow-rows { display:flex; flex-direction:column; gap:20px; padding-top:0 !important; }
.ccr-wf-row { border:1px solid var(--ccr-border); border-radius:18px; padding:clamp(22px,2.4vw,32px); box-shadow:0 10px 28px rgba(20,16,14,.04); }
.ccr-wf-row__head { display:flex; align-items:baseline; gap:clamp(14px,2vw,28px); margin-bottom:18px; flex-wrap:wrap; }
.ccr-wf-row__name { font-family:var(--font-poppins); font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--ccr-blue); text-transform:uppercase; flex-shrink:0; }
.ccr-wf-row__steps { display:flex; gap:clamp(40px,7vw,120px); flex:1; }
.ccr-wf-row__steps span { font-family:var(--font-poppins); font-size:12.5px; font-weight:600; color:var(--ccr-muted); }
.ccr-wf-row__grid { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:clamp(10px,1.4vw,20px); }
.ccr-wf-row__cell { aspect-ratio:1/1; border-radius:12px; overflow:hidden; background:var(--ccr-sand); }
.ccr-wf-row__cell img { width:100%; height:100%; object-fit:cover; display:block; }
.ccr-wf-row__cell--final { background:var(--ccr-sand-light); }
.ccr-wf-row__cell--final img { object-fit:contain; }
.ccr-wf-row__arrow { color:var(--ccr-muted); font-size:19px; line-height:1; }

/* --- 03 Galerie — masonry via CSS columns : robuste quel que soit le nombre
   d'images, chaque visuel garde son ratio réel (jamais de crop forcé). --- */
.ccr-gallery-grid { columns:4 220px; column-gap:clamp(12px,1.4vw,18px); }
.ccr-gallery-grid figure { margin:0 0 clamp(12px,1.4vw,18px); border-radius:14px; overflow:hidden; background:var(--ccr-sand); break-inside:avoid; }
.ccr-gallery-grid img { width:100%; height:auto; display:block; }

/* --- 04 Instagram --- */
.ccr-instagram { background:var(--ccr-turquoise-tint); }
.ccr-instagram > .ccr-instagram__grid { max-width:1320px; }
.ccr-instagram__grid { display:grid; grid-template-columns:.8fr 1.6fr; gap:clamp(28px,3.5vw,56px); align-items:center; }
.ccr-instagram__copy h2:not(.case-title) { color:var(--ccr-navy); }
.ccr-instagram__copy p { margin-top:10px; max-width:320px; }
.ccr-instagram__btn {
  margin-top:20px; display:inline-flex; align-items:center; gap:9px; background:#FFF; color:var(--ccr-black);
  font-family:var(--font-poppins); font-size:13px; font-weight:600; padding:11px 20px; border-radius:30px;
  border:1px solid rgba(0,0,0,.08); text-decoration:none;
}
.ccr-instagram__cards { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.4vw,18px); }
.ccr-ig-card { background:#FFF; border-radius:14px; overflow:hidden; box-shadow:0 10px 26px rgba(86,53,45,.1); }
.ccr-ig-card__head { display:flex; align-items:center; gap:7px; padding:9px 10px; font-family:var(--font-poppins); font-size:10.5px; font-weight:600; color:var(--ccr-black); }
.ccr-ig-card__head::before { content:''; width:16px; height:16px; border-radius:50%; background:var(--ccr-blue); flex-shrink:0; }
.ccr-ig-card__media { aspect-ratio:1/1; background:var(--ccr-sand); }
.ccr-ig-card__media img { width:100%; height:100%; object-fit:cover; display:block; }
.ccr-ig-card__foot { display:flex; gap:10px; padding:8px 10px; color:var(--ccr-muted); font-size:13px; }

/* --- 05 CTA --- */
.ccr-cta-block { background:var(--ccr-sand); border-radius:24px; overflow:hidden; display:grid; grid-template-columns:.72fr 1fr; align-items:center; }
.ccr-cta-block__copy { padding:clamp(32px,4vw,56px); }
.ccr-cta-block__copy p { margin-top:12px; max-width:340px; }
.ccr-cta-block__btn {
  margin-top:22px; display:inline-flex; align-items:center; gap:9px; background:var(--ccr-blue); color:#FFF;
  font-family:var(--font-poppins); font-size:12.5px; font-weight:700; letter-spacing:.03em; padding:13px 24px;
  border-radius:30px; text-decoration:none; text-transform:uppercase;
}
.ccr-cta-block__visual { align-self:stretch; }
.ccr-cta-block__visual img { width:100%; height:100%; object-fit:cover; display:block; }

/* --- 06 Footer --- */
.ccr-footer { background:var(--ccr-black); padding:clamp(26px,2.6vw,36px) clamp(24px,3.2vw,64px) !important; }
.ccr-footer__inner { max-width:1320px; margin-inline:auto; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; }
.ccr-footer__logo img { height:34px; width:auto; display:block; background:#FFF; border-radius:50%; padding:4px; box-sizing:content-box; }
.ccr-footer__mid { text-align:center; color:rgba(255,255,255,.7); font-family:var(--font-poppins); font-size:12.5px; line-height:1.5; }
.ccr-footer__mid b { color:#FFF; font-weight:600; }
.ccr-footer__right { justify-self:end; text-align:right; }
.ccr-footer__right strong { display:block; color:#FFF; font-family:var(--font-poppins); font-size:13.5px; font-weight:600; margin-bottom:8px; }
.ccr-footer__btn {
  display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.35); color:#FFF;
  font-family:var(--font-poppins); font-size:12px; font-weight:600; padding:9px 18px; border-radius:30px; text-decoration:none;
}

@media (max-width:980px) {
  .ccr-hero__grid { grid-template-columns:1fr; }
  .ccr-hero__copy p, .ccr-hero__copy { max-width:none; }
  .ccr-wf-row__grid { grid-template-columns:1fr; }
  .ccr-wf-row__arrow { transform:rotate(90deg); justify-self:center; }
  .ccr-wf-row__steps { display:none; }
  .ccr-gallery-grid { columns:2 200px; }
  .ccr-instagram__grid { grid-template-columns:1fr; }
  .ccr-instagram__cards { grid-template-columns:repeat(2,1fr); }
  .ccr-cta-block { grid-template-columns:1fr; }
  .ccr-cta-block__visual { aspect-ratio:16/9; }
  .ccr-footer__inner { grid-template-columns:1fr; text-align:center; gap:14px; }
  .ccr-footer__right { justify-self:center; text-align:center; }
}
@media (max-width:640px) {
  .ccr-case > section { padding-inline:20px; }
  .ccr-instagram__cards { grid-template-columns:1fr 1fr; }
  .ccr-workflow-sep span { white-space:normal; text-align:center; line-height:1.5; }
}

/* ============================================================
   AUTO DISCOUNT (.adc-*) — location de véhicules Antilles-Guyane
   Identité : bleu marine + orange. Les formats éditoriaux remplissent
   leurs cadres natifs ; les sources produit restent affichées sans crop.
   ============================================================ */
.ls-modal.custom-mode .ls-modal-dialog:has(.adc-case) { width:min(98vw,1440px); height:94vh; max-height:94vh; border-radius:20px; background:#FFF; }
.ls-modal.custom-mode .ls-modal-viewport:has(.adc-case) { background:#FFF; }

.adc-case {
  --adc-navy:#28265B; --adc-orange:#E47912; --adc-ink:#16171F;
  --adc-muted:#666A78; --adc-line:#EAEAEE; --adc-tint:#F6F6F9;
  background:#FFF; color:var(--adc-ink);
}
.adc-wf__cell--empty, .adc-reel--empty {
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:repeating-linear-gradient(135deg,#F6F6F9,#F6F6F9 8px,#EFEFF3 8px,#EFEFF3 16px);
  color:var(--adc-muted); font-family:var(--font-poppins); font-size:10.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em; line-height:1.5; padding:10px;
}
.adc-reel--empty { color:rgba(255,255,255,.7); background:repeating-linear-gradient(135deg,#1c1c22,#1c1c22 8px,#26262e 8px,#26262e 16px); }
.adc-case > section { padding:clamp(40px,4.4vw,64px) clamp(24px,3.2vw,64px); }
.adc-case > section + section { padding-top:0; }
.adc-case > section > * { max-width:1320px; margin-inline:auto; }
.adc-case h1, .adc-case h2 { font-family:var(--font-poppins); margin:0 0 14px; font-size:clamp(30px,3.4vw,48px); line-height:1.1; letter-spacing:-.01em; font-weight:800; color:var(--adc-navy); }
.adc-case h2:not(.case-title) { font-family:var(--font-poppins); margin:0 0 8px; font-size:clamp(21px,2.1vw,28px); font-weight:700; color:var(--adc-navy); }
.adc-case p { margin:0; color:var(--adc-muted); font-size:clamp(14px,1.02vw,15.5px); line-height:1.65; }
.adc-eyebrow { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-poppins); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--adc-orange); margin-bottom:12px; }

/* 01 — Header : visuel sans texte + contenu éditorial en vrai HTML */
.adc-case .adc-hero {
  position:relative; isolation:isolate; min-height:clamp(590px,43vw,710px); padding:0 !important;
  display:flex; align-items:stretch; overflow:hidden; background:#FFF;
}
.adc-hero__art { position:absolute; inset:0; z-index:-1; max-width:none !important; margin:0 !important; }
.adc-hero__art img { width:100%; height:100%; display:block; object-fit:cover; object-position:center; }
.adc-hero__content {
  width:min(52%,720px); max-width:none !important; margin:0 !important;
  box-sizing:border-box; padding:clamp(54px,5vw,82px) clamp(36px,5vw,82px); display:flex; flex-direction:column; justify-content:center;
}
.adc-hero__eyebrow {
  margin:0 0 18px !important; color:var(--adc-orange) !important; font-family:var(--font-poppins);
  font-size:12px !important; font-weight:800; letter-spacing:.16em; line-height:1.2 !important; text-transform:uppercase;
}
.adc-case .adc-hero h1, .adc-case .adc-hero h2 { margin:0 0 22px; color:#080828; font-size:clamp(48px,5.2vw,78px); line-height:.98; letter-spacing:-.035em; }
.adc-hero__tagline { color:#101127 !important; font-family:var(--font-poppins); font-size:clamp(23px,2.25vw,34px) !important; line-height:1.24 !important; letter-spacing:-.025em; }
.adc-hero__lead { max-width:650px; margin-top:24px !important; color:#384052 !important; font-size:clamp(14px,1.13vw,17px) !important; line-height:1.72 !important; }
.adc-hero__promise { display:flex; align-items:center; gap:15px; max-width:430px; margin-top:30px; }
.adc-hero__promise > span { flex:none; display:grid; place-items:center; width:48px; height:48px; border-radius:50%; color:#FFF; background:#090933; }
.adc-hero__promise svg { width:25px; height:25px; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.adc-hero__promise p { color:#24283a !important; font-size:clamp(13px,1vw,15px) !important; line-height:1.5 !important; }
.adc-hero__promise strong { color:var(--adc-orange); font-weight:750; }

/* 02 — Intro éditoriale légère (au-dessus du 1er workflow) */
.adc-intro { text-align:left; padding-bottom:0 !important; }
.adc-intro p { margin-top:10px; max-width:76ch; }
.adc-intro__labels { display:flex; align-items:center; gap:10px; margin-top:18px; font-family:var(--font-poppins); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--adc-navy); }
.adc-intro__labels span:nth-child(even) { color:var(--adc-orange); font-weight:400; }

.adc-sep { display:flex; align-items:center; gap:18px; padding-block:clamp(26px,2.8vw,38px) !important; }
.adc-sep::before, .adc-sep::after { content:''; flex:1; height:1px; background:var(--adc-line); }
.adc-sep span { font-family:var(--font-poppins); font-size:12px; font-weight:600; letter-spacing:.1em; color:var(--adc-muted); text-transform:uppercase; white-space:nowrap; }
.adc-sep--accent::before, .adc-sep--accent::after { background:var(--adc-orange); opacity:.38; }
.adc-sep--accent span { color:var(--adc-navy); }
.adc-accent { color:var(--adc-orange); font-style:normal; }

/* 03 — Workflow : pile de 3 sources → flèche → composition → flèche → post final */
.adc-workflow { padding-top:0 !important; }
.adc-workflow__title { margin-bottom:22px !important; }
.adc-wf__grid { display:grid; grid-template-columns:minmax(110px,170px) auto minmax(0,1fr) auto minmax(0,1fr); gap:clamp(12px,1.6vw,22px); align-items:center; }
.adc-wf__sources { display:grid; gap:11px; align-self:stretch; }
.adc-wf__sources--two { align-content:center; }
.adc-wf__cell {
  margin:0; aspect-ratio:1/1; border-radius:12px; overflow:hidden; background:#F0F2F6;
  border:1px solid #DCE0E8; box-shadow:0 8px 18px rgba(32,35,53,.045);
}
.adc-wf__cell img { width:100%; height:100%; object-fit:contain; display:block; }
.adc-wf__sources .adc-wf__cell { aspect-ratio:auto; }
.adc-wf__sources .adc-wf__cell img { height:auto; object-fit:contain; }
.adc-wf__cell--product { background:linear-gradient(145deg,#EAEDF3,#F8F8FA); }
.adc-wf__cell--product img { padding:8px; box-sizing:border-box; }
.adc-wf__cell--car img { padding:0; transform:none; }
.adc-wf__cell--main, .adc-wf__cell--final {
  aspect-ratio:4/5; border:1px solid #D8DDE7; border-radius:16px; background:#F1F3F6;
  box-shadow:0 14px 30px rgba(31,36,60,.09);
}
.adc-wf__cell--main img, .adc-wf__cell--final img { object-fit:cover; }
.adc-wf__arrow { color:var(--adc-orange); font-size:20px; line-height:1; text-align:center; }
.adc-cap { margin-top:8px; text-align:center; font-family:var(--font-poppins); font-size:11.5px; font-weight:600; color:var(--adc-ink); }

/* 04 — Duos pleine largeur : carré (autres exemples) et 4:5 (déclinaisons) */
.adc-duo, .adc-duo45 { display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.4vw,36px); }
.adc-duo figure, .adc-duo45 figure {
  margin:0; border:1px solid #D8DDE7; border-radius:16px; overflow:hidden; background:#F0F2F6;
  box-shadow:0 12px 28px rgba(31,36,60,.07);
}
.adc-duo figure { aspect-ratio:1/1; }
.adc-duo45 figure { aspect-ratio:4/5; }
.adc-duo img, .adc-duo45 img { width:100%; height:100%; object-fit:cover; display:block; }

/* 05 — Châssis Instagram partagé : campagnes et sélection de 3 posts */
.adc-ig-card { background:#FFF; border:1px solid var(--adc-line); border-radius:14px; overflow:hidden; }
.adc-ig-card__head { display:flex; align-items:center; gap:9px; padding:11px 13px; }
.adc-ig-card__avatar { width:26px; height:26px; border-radius:50%; overflow:hidden; flex:none; background:var(--adc-navy); }
.adc-ig-card__avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.adc-ig-card__id { flex:1; min-width:0; font-family:var(--font-poppins); font-size:11.5px; font-weight:600; color:var(--adc-ink); }
.adc-ig-card__more { color:var(--adc-ink); font-size:15px; letter-spacing:1px; }
.adc-ig-card__media { margin:0; aspect-ratio:1/1; background:var(--adc-tint); }
.adc-ig-card__media img { width:100%; height:100%; object-fit:cover; display:block; }
.adc-ig-card__foot { display:flex; gap:11px; padding:9px 13px; color:var(--adc-ink); }
.adc-ig-card__foot svg { width:17px; height:17px; }
.adc-ig-card__foot span:last-child { margin-left:auto; }
.adc-campaigns, .adc-grid3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2vw,28px); }
.adc-campaigns .adc-ig-card__media { aspect-ratio:4/5; }
.adc-grid3 .adc-ig-card__media { aspect-ratio:4/5; }
.adc-campaign-visual {
  margin:0; overflow:hidden; border:1px solid var(--adc-line); border-radius:16px;
  background:#f4f5f8; box-shadow:0 14px 34px rgba(31,36,60,.075);
}
.adc-campaign-visual img { width:100%; height:auto; display:block; object-fit:contain; }

/* 06 — Intro production vidéo En Drive */
.adc-video-intro { overflow:hidden; }
.adc-video-heading { display:grid; grid-template-columns:minmax(260px,.66fr) minmax(560px,1.34fr); gap:clamp(32px,4vw,60px); align-items:center; }
.adc-video-intro p { margin-top:10px; max-width:58ch; }
.adc-video-meta { display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:18px; font-family:var(--font-poppins); font-size:12px; font-weight:600; color:#FFF; }
.adc-video-meta span { display:inline-flex; align-items:center; gap:7px; }
.adc-video-meta span::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--adc-orange); }
.adc-video-meta { color:var(--adc-navy); }
.adc-accent { color:var(--adc-orange); }

/* 07 — Lecteurs YouTube verticaux réels */
.adc-youtube-stack { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.5vw,20px); align-items:center; }
.adc-youtube-card {
  position:relative; margin:0; aspect-ratio:9/16; overflow:hidden; border-radius:18px; background:#0B0B0F;
  box-shadow:0 18px 42px rgba(15,15,20,.2); transform:scale(.92);
}
.adc-youtube-card--featured { transform:scale(1); box-shadow:0 24px 52px rgba(15,15,20,.28); }
.adc-youtube-card iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.adc-playlist-link {
  display:flex; width:max-content; max-width:100%; align-items:center; gap:9px; margin:24px 0 0; padding:11px 20px;
  border:1px solid rgba(40,38,91,.22); border-radius:999px; color:var(--adc-navy); text-decoration:none;
  font-family:var(--font-poppins); font-size:12px; font-weight:700; transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);
}
.adc-playlist-link:hover { color:#FFF; border-color:var(--adc-orange); background:var(--adc-orange); }

/* 08 — Statistiques */
.adc-stats { padding-block:clamp(30px,3vw,42px) !important; background:linear-gradient(180deg,#FAFAFC,#F5F5F8); border-radius:20px; text-align:center; }
.adc-stats-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin-top:24px; text-align:left; }
.adc-stats-grid > div { min-width:0; padding:18px 15px; border:1px solid var(--adc-line); border-radius:14px; background:#FFF; box-shadow:0 8px 22px rgba(31,30,54,.05); }
.adc-stats-grid strong { display:block; font-family:var(--font-poppins); font-size:clamp(22px,2.15vw,30px); font-weight:800; line-height:1.08; color:var(--adc-orange); }
.adc-stats-grid span { display:block; margin-top:6px; color:var(--adc-ink); font-family:var(--font-poppins); font-size:11.5px; font-weight:700; line-height:1.35; }
.adc-stats-grid small { display:block; margin-top:6px; color:var(--adc-muted); font-size:9.5px; line-height:1.35; }

/* 09 — CTA final : bande pleine largeur, fond marine, logo + copie + bouton */
.adc-case .adc-cta {
  display:flex; flex-wrap:wrap; align-items:center; gap:clamp(22px,3vw,54px);
  padding:clamp(30px,3vw,44px) clamp(28px,4vw,80px); background:var(--adc-navy);
}
.adc-case .adc-cta__logo { flex:0 0 auto; width:clamp(72px,6vw,94px); height:auto; border-radius:50%; }
.adc-case .adc-cta__copy { flex:1 1 320px; }
.adc-case .adc-cta__copy strong { display:block; margin-bottom:5px; font-family:var(--font-poppins); font-size:clamp(18px,1.5vw,23px); font-weight:700; color:#FFF; }
.adc-case .adc-cta__copy strong em { font-style:normal; color:var(--adc-orange); }
.adc-case .adc-cta__copy p { max-width:52ch; margin:0; color:rgba(255,255,255,.66); font-size:14px; line-height:1.55; }
.adc-case .adc-cta > a {
  flex:0 0 auto; display:inline-flex; align-items:center; gap:9px; background:var(--adc-orange); color:#FFF;
  font-family:var(--font-poppins); font-size:12.5px; font-weight:700; letter-spacing:.03em; padding:13px 24px;
  border-radius:30px; text-decoration:none; text-transform:uppercase; transition:filter .2s var(--ease);
}
.adc-case .adc-cta > a:hover { filter:brightness(1.1); }

@media (max-width:980px) {
  .adc-wf__grid { grid-template-columns:1fr; }
  .adc-wf__sources { grid-template-columns:repeat(3,1fr); }
  .adc-wf__sources--two { grid-template-columns:repeat(2,1fr); }
  .adc-wf__arrow { transform:rotate(90deg); justify-self:center; }
  .adc-duo, .adc-duo45 { grid-template-columns:1fr; }
  .adc-campaigns { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .adc-grid3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .adc-stats-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .adc-video-heading { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .adc-case > section { padding-inline:20px; }
  .adc-case .adc-hero { min-height:0; padding:0 0 clamp(330px,90vw,430px) !important; display:block; }
  .adc-hero__content { position:relative; z-index:1; width:100%; padding:30px 20px 24px; background:#fff; }
  .adc-hero__art { z-index:0; top:auto; height:clamp(330px,90vw,430px); }
  .adc-hero__art img { object-fit:cover; object-position:73% center; }
  .adc-case .adc-hero h1, .adc-case .adc-hero h2 { font-size:clamp(34px,9.5vw,40px); white-space:normal; }
  .adc-hero__tagline { font-size:clamp(20px,6.4vw,27px) !important; }
  .adc-hero__lead { margin-top:18px !important; font-size:14px !important; }
  .adc-hero__promise { margin-top:20px; align-items:flex-start; }
  .adc-hero__promise > span { width:40px; height:40px; }
  .adc-hero__promise p { min-width:0; overflow-wrap:anywhere; }
  .adc-campaigns, .adc-grid3 { grid-template-columns:1fr; }
  .adc-youtube-stack { display:flex; gap:14px; overflow-x:auto; margin-inline:-20px; padding:8px 20px 24px; scroll-snap-type:x mandatory; }
  .adc-youtube-card, .adc-youtube-card--featured { flex:0 0 min(72vw,250px); transform:none; scroll-snap-align:center; }
  .adc-stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .adc-stats-grid > div { padding:15px 12px; }
  .adc-case .adc-cta { flex-direction:column; align-items:flex-start; text-align:left; }
  .adc-case .adc-cta__copy { flex-basis:auto; }
}

/* ============================================================
   CAP CRÉOLE — SOCIAL MEDIA (réutilise le namespace .ccr-* déjà
   défini plus haut — actuellement inutilisé dans le HTML — et
   le composant pile vidéo .adc-reel* construit pour Auto Discount.
   Extensions ci-dessous uniquement, rien au-dessus n'est modifié.
   ============================================================ */
.ls-modal.custom-mode .ls-modal-dialog:has(.ccr-social) { width:min(98vw,1440px); height:94vh; max-height:94vh; border-radius:20px; background:#FFF; }
.ls-modal.custom-mode .ls-modal-viewport:has(.ccr-social) { background:#FFF; }

/* Colonne source : plusieurs carrés empilés (jamais côte à côte) */
.ccr-wf-row__sources { display:grid; gap:11px; }
.ccr-wf-row__sources .ccr-wf-row__cell { aspect-ratio:1/1; }

/* Variante verticale 4:5 pour mise en situation / post final — jamais 1:1, jamais cover agressif */
.ccr-wf-row__cell--45 { aspect-ratio:4/5; background:var(--ccr-sand-light); }
.ccr-wf-row__cell--45 img { object-fit:contain; }

/* Petit inset "passage IA" facultatif sur une étape intermédiaire */
.ccr-wf-row__inset { position:relative; }
.ccr-wf-row__inset-tag {
  position:absolute; left:8px; bottom:8px; z-index:1; background:rgba(15,42,74,.86); color:#FFF;
  font-family:var(--font-poppins); font-size:9.5px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; padding:4px 9px; border-radius:6px;
}

/* "Autres exemples" : exactement 2 visuels, chacun garde son ratio réel (jamais forcé en carré) */
.ccr-duo { display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.4vw,32px); align-items:start; }
.ccr-duo figure { margin:0; border-radius:14px; overflow:hidden; background:var(--ccr-sand); }
.ccr-duo img { display:block; width:100%; height:auto; }
.ccr-duo-cap { margin-top:8px; text-align:center; font-family:var(--font-poppins); font-size:11.5px; font-weight:600; color:var(--ccr-text); }

/* Avant / Après : paires alignées, toujours 4:5, jamais carré ni paysage */
.ccr-ap { display:grid; gap:22px; }
.ccr-ap-card { border:1px solid var(--ccr-border); border-radius:18px; padding:clamp(20px,2.2vw,30px); }
.ccr-ap-card h4 { display:flex; align-items:center; gap:10px; margin:0 0 18px; font-family:var(--font-poppins); font-size:14px; font-weight:700; color:var(--ccr-black); }
.ccr-ap-card h4 span { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--ccr-blue); color:#FFF; font-size:11px; flex:none; }
.ccr-ap-grid { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:clamp(16px,2vw,26px); }
.ccr-ap-grid > div { text-align:center; }
.ccr-ap-grid p { margin:0 0 8px; font-family:var(--font-poppins); font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ccr-muted); }
.ccr-ap-grid figure { margin:0; aspect-ratio:4/5; border-radius:12px; overflow:hidden; background:var(--ccr-sand); }
.ccr-ap-grid img { width:100%; height:100%; object-fit:contain; display:block; }
.ccr-ap-arrow { color:var(--ccr-muted); font-size:20px; align-self:center; }
.ccr-ap-empty {
  border:1px dashed var(--ccr-border); border-radius:18px; padding:clamp(26px,3vw,40px); text-align:center;
  color:var(--ccr-muted); font-family:var(--font-poppins); font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em;
}

/* Galerie Instagram : 3 posts, média en 4:5 (pas carré), UI minimale mais reconnaissable */
.ccr-ig3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,2.2vw,30px); }
.ccr-ig-card__media--45 { aspect-ratio:4/5; }
.ccr-ig-card__media--45 img { object-fit:contain; }

/* Google Ads : visuel seul, plein cadre, jamais retouché ni entouré */
.ccr-ads { padding-top:0 !important; }
.ccr-ads figure { margin:0; }
.ccr-ads img { display:block; width:100%; height:auto; object-fit:contain; }

/* Stats : simples, alignées, sans grosses cartes */
.ccr-stats-row { display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(28px,4vw,56px); }
.ccr-stats-row div { text-align:center; }
.ccr-stats-row strong { display:block; font-family:var(--font-poppins); font-size:clamp(20px,2vw,26px); font-weight:700; color:var(--ccr-navy); }
.ccr-stats-row small { display:block; margin-top:4px; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ccr-muted); }

/* CTA de fin compact, une seule ligne (remplace le duo cta-block+footer pour cette page) */
.ccr-social .ccr-cta-compact {
  display:flex; flex-wrap:wrap; align-items:center; gap:clamp(20px,2.6vw,40px);
  padding:clamp(24px,2.6vw,36px) clamp(28px,4vw,80px); background:var(--ccr-navy);
}
.ccr-cta-compact__logo { flex:0 0 auto; width:54px; height:54px; border-radius:50%; background:#FFF; padding:8px; }
.ccr-cta-compact__logo img { width:100%; height:100%; object-fit:contain; display:block; }
.ccr-cta-compact__copy { flex:1 1 260px; }
.ccr-cta-compact__copy strong { display:block; font-family:var(--font-poppins); font-size:16px; font-weight:700; color:#FFF; }
.ccr-cta-compact__copy p { margin:2px 0 0; color:rgba(255,255,255,.66); font-size:13px; }
.ccr-social .ccr-cta-compact > a {
  flex:none; display:inline-flex; align-items:center; gap:8px; background:var(--ccr-blue); color:#FFF;
  font-family:var(--font-poppins); font-size:12px; font-weight:700; padding:11px 20px; border-radius:30px; text-decoration:none;
}

@media (max-width:980px) {
  .ccr-wf-row__sources { grid-template-columns:repeat(2,1fr); }
  .ccr-wf-row__sources .ccr-wf-row__cell { aspect-ratio:1/1; }
  .ccr-duo { grid-template-columns:1fr; }
  .ccr-ig3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ccr-ap-grid { grid-template-columns:1fr; }
  .ccr-ap-arrow { transform:rotate(90deg); justify-self:center; }
}
@media (max-width:640px) {
  .ccr-ig3 { grid-template-columns:1fr; }
  .ccr-social .ccr-cta-compact { flex-direction:column; align-items:flex-start; text-align:left; }
}

/* ── Corrections QA (retour client) ──────────────────────────── */

/* Bug : l'avatar Instagram n'avait jamais été stylé et débordait à sa
   taille native, cassant toute la carte. */
.ccr-ig-card__avatar { width:30px; height:30px; border-radius:50%; overflow:hidden; flex:none; background:var(--ccr-sand); }
.ccr-ig-card__avatar img { width:100%; height:100%; object-fit:cover; display:block; }

/* Chaque colonne du workflow porte désormais son propre label juste
   au-dessus de SON image (fini le header .ccr-wf-row__steps qui ne
   s'alignait jamais avec la grille en dessous). */
.ccr-wf-row__col { min-width:0; }
.ccr-wf-row__label {
  margin:0 0 10px; font-family:var(--font-poppins); font-size:11px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ccr-blue); text-align:center;
}
/* La colonne source (2 carrés empilés) est plus étroite que les deux
   grandes colonnes 4:5, qui doivent dominer visuellement le bloc. */
.ccr-social .ccr-wf-row__grid { grid-template-columns:.62fr auto 1fr auto 1fr; }

/* Séparateur renforcé entre le premier et le deuxième exemple : la
   version standard (fine ligne + petit label) passait inaperçue. */
.ccr-workflow-sep--strong { padding-block:clamp(36px,4vw,54px) !important; }
.ccr-workflow-sep--strong::before, .ccr-workflow-sep--strong::after { height:2px; background:var(--ccr-blue); opacity:.2; }
.ccr-workflow-sep--strong span { font-size:15px; font-weight:700; color:var(--ccr-navy); letter-spacing:.04em; }

/* Bande légèrement teintée pour rythmer la page (fond utilisé nulle
   part ailleurs jusqu'ici alors que la variable existait déjà). */
.ccr-social .ccr-instagram { background:var(--ccr-turquoise-tint); border-radius:24px; }

@media (max-width:980px) {
  .ccr-social .ccr-wf-row__grid { grid-template-columns:1fr; }
}

/* ── Direction artistique Cap Créole — océan, sable et soleil ── */
.ccr-social {
  --ccr-black:#041c43;
  --ccr-text:#102b4f;
  --ccr-blue:#0797d5;
  --ccr-cyan:#2dcde5;
  --ccr-yellow:#f7b800;
  --ccr-turquoise-tint:#e8f9fb;
  --ccr-sand-light:#fffaf0;
  --ccr-navy:#03285f;
  --ccr-sand:#f8f0dc;
  --ccr-border:rgba(3,40,95,.12);
  --ccr-muted:#52677c;
  overflow:hidden;
  background:linear-gradient(180deg,#fffdf8 0%,#fff 32%,#f7fcfd 100%);
}
.ccr-social > section { position:relative; }
.ccr-social > section + section { padding-top:clamp(46px,5vw,76px); }
.ccr-social h2:not(.case-title) { font-size:clamp(32px,3.5vw,50px); line-height:1.03; letter-spacing:-.025em; }
.ccr-social .ccr-kicker {
  gap:10px; margin-bottom:14px; color:var(--ccr-blue); font-size:11px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase;
}
.ccr-social .ccr-kicker::before { width:18px; height:3px; border-radius:4px; background:var(--ccr-yellow); }

/* Header : les images restent décoratives, tout le contenu reste du vrai HTML. */
.ccr-social .ccr-hero {
  min-height:clamp(650px,56vw,790px); padding:0 !important; isolation:isolate;
  display:flex; align-items:stretch; overflow:hidden; background:#fffaf0;
}
.ccr-hero__art { position:absolute; inset:0; z-index:-1; max-width:none !important; margin:0 !important; pointer-events:none; }
.ccr-hero__bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ccr-hero__brand-world {
  position:absolute; z-index:1; top:0; right:0; width:57%; height:100%; object-fit:cover; object-position:center;
  display:block; -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.42) 12%,#000 31%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.42) 12%,#000 31%);
}
.ccr-hero__content {
  position:relative; z-index:2; width:min(58%,790px); max-width:none !important; margin:0 !important;
  box-sizing:border-box;
  padding:clamp(44px,4.4vw,72px) clamp(34px,5vw,82px) clamp(42px,4vw,66px);
  display:flex; flex-direction:column; justify-content:center;
}
.ccr-hero__topline { display:flex; align-items:center; gap:clamp(18px,2.2vw,34px); margin-bottom:clamp(22px,2.8vw,38px); }
.ccr-hero__mark { width:clamp(74px,7vw,108px); height:auto; display:block; filter:drop-shadow(0 12px 18px rgba(3,40,95,.12)); }
.ccr-hero__chip {
  display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:8px 22px;
  border:1.5px solid #eea500; border-radius:999px; color:#db8e00; background:rgba(255,255,255,.5);
  font-family:var(--font-poppins); font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
}
.ccr-social .ccr-hero h1, .ccr-social .ccr-hero h2 {
  margin:0 0 clamp(20px,2vw,30px); color:var(--ccr-navy); font-size:clamp(49px,5.6vw,82px);
  font-weight:500; line-height:.96; letter-spacing:-.035em;
}
.ccr-social .ccr-hero h1 span, .ccr-social .ccr-hero h2 span { color:var(--ccr-blue); font-weight:300; }
.ccr-hero__lead { max-width:650px; color:#263b55 !important; font-size:clamp(15px,1.25vw,18px) !important; line-height:1.62 !important; }
.ccr-hero__benefits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:clamp(26px,3vw,42px); }
.ccr-hero__benefit {
  display:flex; align-items:flex-start; gap:12px; min-width:0; padding-right:14px;
}
.ccr-hero__benefit + .ccr-hero__benefit { padding-left:18px; border-left:1px solid rgba(232,154,0,.35); }
.ccr-hero__icon {
  flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  color:var(--ccr-blue); background:rgba(255,243,211,.78);
}
.ccr-hero__icon svg { width:25px; height:25px; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ccr-hero__benefit > span:last-child { min-width:0; }
.ccr-hero__benefit strong { display:block; color:#12213a; font-family:var(--font-poppins); font-size:12px; font-weight:750; line-height:1.3; }
.ccr-hero__benefit small { display:block; margin-top:5px; color:#536679; font-size:10.5px; line-height:1.45; }
.ccr-social .ccr-hero__slogan {
  margin-top:clamp(28px,3.2vw,46px); color:var(--ccr-navy); font-family:var(--font-serif);
  font-size:clamp(21px,2vw,29px); font-style:italic; line-height:1.2;
}
.ccr-hero__slogan em { color:var(--ccr-blue); font-weight:500; }

/* Un rythme éditorial plus affirmé dans le reste de l'étude de cas. */
.ccr-social .ccr-workflow-intro {
  padding-block:clamp(58px,6vw,88px) !important; background:#fffaf0;
}
.ccr-workflow-intro > * { max-width:900px !important; margin-left:max(0px,calc((100% - 1320px)/2)) !important; margin-right:auto !important; }
.ccr-workflow-intro > p:last-child { max-width:72ch !important; margin-top:14px !important; font-size:clamp(16px,1.25vw,18px) !important; }
.ccr-social .ccr-workflow-sep { gap:20px; padding-block:clamp(30px,3.5vw,50px) !important; }
.ccr-social .ccr-workflow-sep::before,.ccr-social .ccr-workflow-sep::after { height:1px; background:rgba(3,40,95,.18); opacity:1; }
.ccr-social .ccr-workflow-sep span { color:var(--ccr-navy); font-weight:800; letter-spacing:.12em; }
.ccr-social .ccr-wf-row {
  position:relative; overflow:hidden; padding:clamp(24px,2.8vw,38px); border:0; border-radius:24px;
  background:#fff; box-shadow:0 22px 60px rgba(3,40,95,.1);
}
.ccr-social .ccr-wf-row::before { content:''; position:absolute; inset:0 0 auto; height:5px; background:var(--ccr-navy); }
.ccr-social .ccr-wf-row__head { margin-bottom:24px; }
.ccr-social .ccr-wf-row__name {
  display:inline-flex; padding:8px 14px; border-radius:999px; background:var(--ccr-navy); color:#fff;
  font-size:12px; letter-spacing:.1em;
}
.ccr-social .ccr-wf-row__label { color:var(--ccr-navy); font-size:11.5px; letter-spacing:.08em; }
.ccr-social .ccr-wf-row__cell { border:1px solid rgba(3,40,95,.1); box-shadow:0 12px 28px rgba(3,40,95,.08); }
.ccr-social .ccr-wf-row__arrow { color:var(--ccr-yellow); font-size:26px; font-weight:700; }
.ccr-social .ccr-duo figure { border:4px solid #fff; border-radius:22px; box-shadow:0 18px 46px rgba(3,40,95,.12); }
.ccr-social .ccr-duo-cap { color:var(--ccr-navy); font-size:12px; font-weight:750; letter-spacing:.04em; text-transform:uppercase; }
.ccr-social .ccr-ap { grid-template-columns:1fr; }
.ccr-social .ccr-ap-card { border:0; border-radius:24px; background:#f2fbfc; box-shadow:0 18px 48px rgba(3,40,95,.1); }
.ccr-social .ccr-ap-card h4 { color:var(--ccr-navy); font-size:16px; }
.ccr-social .ccr-ap-card h4 span { background:var(--ccr-yellow); color:var(--ccr-navy); }
.ccr-social .ccr-ap-empty { grid-column:1/-1; background:#fffaf0; border-color:rgba(3,40,95,.16); }
.ccr-social .ccr-instagram {
  padding-block:clamp(58px,6vw,86px) !important; border-radius:0;
  background:#eaf9fb;
}
.ccr-social .ccr-instagram h2:not(.case-title) { color:var(--ccr-navy); }
.ccr-social .ccr-ig-card { border:1px solid rgba(3,40,95,.1); border-radius:20px; box-shadow:0 18px 42px rgba(3,40,95,.12); }
.ccr-social .ccr-ig-card__media--45 img { object-fit:cover; }
.ccr-social .ccr-ig-card__foot svg { width:18px; height:18px; }
.ccr-social .ccr-ig-card__foot { color:var(--ccr-navy); }
.ccr-social .ccr-ap-placeholder {
  display:grid; place-items:center; border:1px dashed rgba(3,40,95,.26); background:#fff;
  color:var(--ccr-muted); font-family:var(--font-poppins); font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
}
.ccr-social .ccr-ads { padding-block:clamp(56px,6vw,86px) !important; background:var(--ccr-navy); }
.ccr-social .ccr-ads .ccr-kicker { color:#fff; }
.ccr-social .ccr-ads figure { overflow:hidden; border-radius:24px; box-shadow:0 24px 70px rgba(0,0,0,.25); }

/* Stats Cap Créole : bande d'impact aux codes de la marque. */
.ccr-social .ccr-stats {
  padding-block:clamp(58px,6vw,86px) !important; text-align:center; color:#fff;
  background:
    radial-gradient(circle at 16% 18%,rgba(45,205,229,.22),transparent 26%),
    radial-gradient(circle at 88% 80%,rgba(247,184,0,.16),transparent 28%),
    linear-gradient(135deg,#031b44 0%,#07377a 55%,#075c96 100%);
}
.ccr-stats__heading { text-align:center; }
.ccr-social .ccr-stats .ccr-kicker { color:#fff; }
.ccr-social .ccr-stats h2:not(.case-title) { color:#fff; }
.ccr-social .ccr-stats-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:30px; }
.ccr-social .ccr-stats-row > div {
  min-width:0; padding:24px 18px; border:1px solid rgba(255,255,255,.18); border-radius:18px;
  background:rgba(255,255,255,.08); box-shadow:inset 0 1px rgba(255,255,255,.12); backdrop-filter:blur(8px);
}
.ccr-stats__icon { display:grid; place-items:center; width:42px; height:42px; margin:0 auto 14px; color:var(--ccr-yellow); }
.ccr-stats__icon svg { width:31px; height:31px; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ccr-social .ccr-stats-row strong { color:#fff; font-size:clamp(27px,3vw,40px); font-weight:800; }
.ccr-social .ccr-stats-row small { margin-top:9px; color:rgba(255,255,255,.8); font-size:10px; font-weight:650; line-height:1.5; }
.ccr-social .ccr-cta-compact {
  margin-top:0 !important;
  background:
    radial-gradient(circle at 90% 30%,rgba(45,205,229,.18),transparent 24%),
    linear-gradient(90deg,#021a40,#042c66);
}
.ccr-social .ccr-stats + .ccr-cta-compact { margin-top:0 !important; }
.ccr-social .ccr-cta-compact > a { background:var(--ccr-yellow); color:var(--ccr-navy); }

/* Auto Discount — section En Drive : univers voyage nocturne et lecteurs réels. */
.adc-case .adc-video-intro {
  position:relative; isolation:isolate; margin:0 clamp(14px,2vw,28px) clamp(36px,4vw,60px);
  padding:clamp(54px,6vw,88px) clamp(28px,4.5vw,72px) !important; border-radius:28px; overflow:hidden;
  background:
    linear-gradient(90deg,rgba(2,35,87,.34) 0%,rgba(2,35,87,.11) 45%,rgba(2,35,87,.025) 100%),
    url('/assets/projects/social/auto-discount/en-drive/en-drive-section-bg.webp?v=2') center/cover no-repeat;
  box-shadow:0 24px 58px rgba(3,52,119,.18);
}
.adc-case .adc-video-intro::before,.adc-case .adc-video-intro::after { content:none; }
.adc-video-intro .adc-video-heading { position:relative; z-index:1; }
.adc-video-intro .adc-eyebrow { color:#fff; opacity:.86; }
.adc-video-intro h2:not(.case-title) { color:#fff; font-size:clamp(30px,2.6vw,38px); }
.adc-video-intro > .adc-video-heading > div:first-child > p:not(.adc-eyebrow) { color:rgba(255,255,255,.78); font-size:clamp(14px,1.1vw,16px); }
.adc-video-intro .adc-video-meta { color:#fff; }
.adc-video-intro .adc-video-meta span::before { background:var(--adc-orange); box-shadow:0 0 0 5px rgba(228,121,18,.13); }
.adc-video-intro .adc-youtube-card { border:1px solid rgba(255,255,255,.66); box-shadow:0 18px 42px rgba(1,30,77,.28); }
.adc-video-intro .adc-youtube-card--featured { box-shadow:0 24px 54px rgba(1,30,77,.34); }
.adc-video-intro .adc-playlist-link {
  position:relative; z-index:1; border-color:rgba(255,255,255,.65); color:#fff; background:rgba(255,255,255,.04);
}
.adc-video-intro .adc-playlist-link:hover { border-color:var(--adc-orange); background:var(--adc-orange); color:#fff; }

@media (max-width:980px) {
  .ccr-social .ccr-hero { min-height:760px; }
  .ccr-hero__content { width:68%; padding-inline:clamp(30px,5vw,62px); }
  .ccr-hero__brand-world { width:55%; opacity:.92; }
  .ccr-social .ccr-ap { grid-template-columns:1fr; }
  .ccr-social .ccr-stats-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px) {
  .ccr-social .ccr-hero {
    min-height:0; padding:0 0 clamp(390px,100vw,470px) !important; display:block;
  }
  .ccr-hero__content { width:100%; padding:26px 20px 10px; }
  .ccr-hero__bg { object-position:30% center; }
  .ccr-hero__brand-world {
    top:auto; bottom:0; width:100%; height:47%; object-fit:contain; object-position:center bottom;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.68) 12%,#000 27%);
    mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.68) 12%,#000 27%);
  }
  .ccr-hero__topline { margin-bottom:22px; }
  .ccr-hero__mark { width:64px; }
  .ccr-hero__chip { min-height:34px; padding-inline:15px; font-size:9px; letter-spacing:.16em; }
  .ccr-social .ccr-hero h1, .ccr-social .ccr-hero h2 { font-size:clamp(41px,12vw,54px); line-height:.98; }
  .ccr-hero__lead { font-size:14.5px !important; line-height:1.55 !important; }
  .ccr-hero__benefits { gap:0; margin-top:24px; }
  .ccr-hero__benefit { display:block; padding:0 8px; text-align:center; }
  .ccr-hero__benefit + .ccr-hero__benefit { padding-left:8px; }
  .ccr-hero__icon { width:38px; height:38px; margin:0 auto 8px; }
  .ccr-hero__icon svg { width:22px; height:22px; }
  .ccr-hero__benefit strong { font-size:10.5px; }
  .ccr-hero__benefit small { font-size:9px; line-height:1.35; }
  .ccr-social .ccr-hero__slogan { margin-top:24px; font-size:21px; text-align:center; }
  .ccr-social > section + section { padding-top:42px; }
  .ccr-social .ccr-wf-row { padding:22px 16px; border-radius:20px; }
  .ccr-social .ccr-wf-row__name { white-space:normal; line-height:1.4; }
  .ccr-social .ccr-ap-card { padding:18px 14px; }
  .ccr-social .ccr-stats-row { grid-template-columns:1fr 1fr; gap:10px; }
  .ccr-social .ccr-stats-row > div { padding:20px 10px; }
  .adc-case .adc-video-intro { margin-inline:10px; padding-inline:20px !important; border-radius:22px; }
}

/* Les cartes conservées en cache restent dans le HTML sans être rendues. */
.project-grid > .project-card[hidden] { display:none !important; }
.project-grid.project-grid--photos-curated { grid-template-columns:repeat(2,minmax(0,1fr)); width:min(100%,1200px); }
/* Deux cartes très larges : ratio 3/2 proche des sources ; le léger cover
   absorbe uniquement les bordures intégrées aux fichiers. */
.project-grid--photos-curated .project-visual { aspect-ratio: 3 / 2; }
.project-grid--photos-curated .project-card--so-class .project-visual img {
  max-width:none;
  transform:scale(1.045);
}
.project-grid--photos-curated .project-card--so-class:hover .project-visual img { transform:scale(1.055); }
@media (max-width:600px) {
  .project-grid.project-grid--photos-curated { grid-template-columns:1fr; }
}

/* ── Page Social : deux rangées régulières de trois projets ── */
.project-grid--social .project-card .project-visual--social-brand {
  display:grid; place-items:center; background:#050505;
}
.project-grid--social .project-card .project-visual--social-brand::after { background:none; }
.project-grid--social .project-card .project-visual--social-brand > img {
  width:min(58%,340px); height:auto; max-height:58%; object-fit:contain; object-position:center; transform:none;
}
.project-grid--social .project-card:hover .project-visual--social-brand > img { transform:scale(1.025); }
.project-grid--social .project-card .project-visual--cap-creole {
  position:relative; isolation:isolate; overflow:hidden;
  background:
    radial-gradient(circle at 50% 44%,rgba(41,178,219,.16),transparent 42%),
    linear-gradient(145deg,#063d73 0%,#07578e 100%);
}
.project-grid--social .project-card .project-visual--cap-creole .project-badge { z-index:3; }
.project-grid--social .project-card .project-visual--cap-creole::after {
  z-index:1; background:linear-gradient(145deg,rgba(255,255,255,.17),transparent 56%);
}
.project-grid--social .project-card .project-visual--cap-creole > .cap-creole-card__wordmark {
  position:relative; z-index:2; width:min(76%,560px); height:auto; max-height:none;
  object-fit:contain; transform:none; filter:drop-shadow(0 15px 28px rgba(1,31,69,.26));
  transition:transform .35s var(--ease),filter .35s var(--ease);
}
.project-grid--social .project-card:hover .project-visual--cap-creole > .cap-creole-card__wordmark {
  transform:translateY(-3px) scale(1.018); filter:drop-shadow(0 18px 32px rgba(1,31,69,.32));
}
.project-grid--social .project-card .project-visual--digilife > img { width:min(52%,300px); }
.project-grid--social .project-card .project-visual--lbe-social {
  display:grid; place-items:center; background:#f8e3e7;
}
.project-grid--social .project-card .project-visual--lbe-social::after { background:none; }
.project-grid--social .project-card .project-visual--lbe-social > img {
  position:absolute; inset:0; width:100%; height:100%; max-height:none; object-fit:contain; object-position:center; transform:none;
}
.project-grid--social .project-card:hover .project-visual--lbe-social > img { transform:scale(1.012); }
.project-brand-lockup { display:grid; justify-items:center; gap:20px; width:78%; text-align:center; color:#fff; }
.project-brand-lockup img { width:min(72%,330px); height:auto; display:block; }
.project-brand-lockup strong { font-family:var(--font-poppins); font-size:clamp(17px,1.6vw,25px); font-weight:500; letter-spacing:.01em; }
.project-brand-lockup strong span { color:#e3343a; }

/* Miniatures social media : même profondeur discrète sur tous les aplats. */
.project-grid--social .project-card .project-visual--digilife {
  background:
    radial-gradient(circle at 38% 38%,rgba(255,255,255,.075),transparent 42%),
    linear-gradient(145deg,#171719 0%,#030304 72%,#0a0a0c 100%);
}
.project-grid--social .project-card .project-visual--digilife-influence {
  background:
    radial-gradient(circle at 72% 36%,rgba(219,40,51,.13),transparent 36%),
    linear-gradient(145deg,#19191c 0%,#030304 72%,#0b0b0d 100%);
}
.project-grid--social .project-card .project-visual--lifeon {
  background:
    radial-gradient(circle at 58% 42%,rgba(75,176,52,.14),transparent 35%),
    linear-gradient(145deg,#171817 0%,#020302 72%,#090b09 100%);
}
.project-grid--social .project-card .project-visual--lifeon > img { width:min(60%,360px); max-height:58%; }
.project-grid--social .project-card .project-visual--lbe-social {
  background:
    radial-gradient(circle at 52% 44%,rgba(255,255,255,.07),transparent 38%),
    linear-gradient(145deg,#1a1818 0%,#070707 70%,#111 100%);
}
.project-grid--social .project-card .project-visual--lbe-social > img {
  position:relative; inset:auto; width:min(74%,410px); height:auto; max-height:60%; object-fit:contain; transform:none;
}
.project-grid--social .project-card:hover .project-visual--lbe-social > img { transform:scale(1.025); }
.project-brand-lockup {
  display:flex; align-items:center; justify-content:center; gap:clamp(12px,1.5vw,24px);
  width:min(86%,700px); color:#fff; text-align:left; white-space:nowrap;
}
.project-brand-lockup img { width:min(43%,280px); height:auto; flex:0 1 auto; }
.project-brand-lockup strong { flex:0 0 auto; font-size:clamp(13px,1.45vw,23px); }
.project-visual--digilife-influence .project-brand-lockup { width:88%; gap:10px; }
.project-visual--digilife-influence .project-brand-lockup img { width:min(38%,150px); }
.project-visual--digilife-influence .project-brand-lockup strong { font-size:clamp(11px,1.08vw,17px); }

/* ============================================================
   LIFEON (.lifeon-*) — étude de cas social media Apple service
   ============================================================ */
.ls-modal.custom-mode .ls-modal-dialog:has(.lifeon-case) {
  width:min(98vw,1480px); max-width:1480px; height:94vh; max-height:94vh;
  border-radius:22px; background:#f7f7f6;
}
.ls-modal.custom-mode .ls-modal-viewport:has(.lifeon-case) { background:#f7f7f6; }
.ls-modal:has(.lifeon-case) .ls-case-contact-footer { display:none; }
.lifeon-case {
  --lifeon-green:#4cad32; --lifeon-ink:#0c0e0c; --lifeon-muted:#676b67;
  color:var(--lifeon-ink); background:#f7f7f6; overflow-x:hidden;
}
.lifeon-case h1, .lifeon-case h2, .lifeon-case h2 { font-family:var(--font-poppins); color:var(--lifeon-ink); }
.lifeon-case figure { margin:0; }
.lifeon-eyebrow {
  margin:0 0 12px; color:var(--lifeon-green); font-size:10px; line-height:1.2;
  font-weight:700; letter-spacing:.17em; text-transform:uppercase;
}
.lifeon-hero {
  position:relative; display:grid; grid-template-columns:minmax(380px,.86fr) minmax(0,1.35fr);
  height:clamp(440px,37vw,540px); min-height:0; margin:clamp(18px,2.4vw,30px);
  overflow:hidden; border:1px solid rgba(12,14,12,.06); border-radius:30px;
  background:#fff; box-shadow:0 16px 44px rgba(15,18,15,.075);
}
.lifeon-hero__copy {
  position:relative; z-index:3; align-self:center; padding:clamp(34px,4vw,56px) 0 clamp(34px,4vw,56px) clamp(34px,5vw,76px);
}
.lifeon-hero__logo { display:block; width:clamp(150px,14vw,210px); height:auto; margin-bottom:7px; }
.lifeon-hero__certification { margin:0 0 clamp(28px,3vw,42px); color:#393c39; font-size:10px; font-weight:600; }
.lifeon-hero__certification span { color:#111; font-size:7px; vertical-align:2px; }
.lifeon-hero h1, .lifeon-hero h2 { margin:0 0 14px; font-size:clamp(40px,4.6vw,64px); font-weight:500; line-height:.98; letter-spacing:-.052em; }
.lifeon-hero__accent { margin:0 0 22px; color:var(--lifeon-green); font-size:clamp(22px,2.3vw,31px); line-height:1.1; font-weight:650; }
.lifeon-hero__lead { max-width:420px; margin:0; color:#4f544f; font-size:14px; line-height:1.7; }
.lifeon-hero__visual { position:relative; min-width:0; overflow:hidden; background:#141714; }
.lifeon-hero__visual > img { width:100%; height:100%; display:block; object-fit:cover; object-position:center 50%; }
.lifeon-hero__visual::before {
  content:""; position:absolute; z-index:1; inset:0; pointer-events:none;
  background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.92) 7%,rgba(255,255,255,.2) 28%,transparent 48%);
}
.lifeon-social-float {
  position:absolute; z-index:2; display:grid; place-items:center; width:48px; height:48px;
  border-radius:14px; color:#fff; font-size:22px; box-shadow:0 14px 30px rgba(0,0,0,.18); backdrop-filter:blur(7px);
}
.lifeon-social-float--like { top:16%; right:14%; background:rgba(83,180,56,.88); transform:rotate(4deg); }
.lifeon-social-float--share { right:8%; bottom:19%; background:rgba(255,255,255,.88); color:var(--lifeon-green); transform:rotate(-5deg); }
.lifeon-performance,.lifeon-selection { padding:clamp(82px,8vw,126px) clamp(28px,6vw,92px); background:#f7f7f6; }
.lifeon-section-heading { width:min(760px,100%); margin:0 auto clamp(44px,5vw,68px); text-align:center; }
.lifeon-section-heading h2:not(.case-title) { margin:0 0 14px; font-size:clamp(34px,4vw,54px); line-height:1.06; letter-spacing:-.04em; }
.lifeon-section-heading > p:last-child { max-width:650px; margin:0 auto; color:var(--lifeon-muted); font-size:14px; line-height:1.7; }
.lifeon-performance .lifeon-section-heading,
.lifeon-selection .lifeon-section-heading {
  width:min(1120px,100%); text-align:left;
}
.lifeon-performance .lifeon-section-heading > p:last-child,
.lifeon-selection .lifeon-section-heading > p:last-child { max-width:650px; margin-left:0; }
.lifeon-post-grid { width:min(1120px,100%); margin:0 auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,2.7vw,38px); }
.lifeon-post-grid figure {
  aspect-ratio:4/5; overflow:hidden; border-radius:22px; background:#fff;
  box-shadow:0 15px 36px rgba(20,23,20,.075); border:1px solid rgba(18,20,18,.055);
}
.lifeon-post-grid img { width:100%; height:100%; display:block; object-fit:contain; }
.lifeon-universe {
  position:relative; width:calc(100% - clamp(36px,5vw,78px)); aspect-ratio:3/1;
  margin:0 auto clamp(88px,8vw,130px); overflow:hidden; border-radius:28px;
  background:#081110; box-shadow:0 18px 46px rgba(5,12,10,.15);
}
.lifeon-universe > img { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:contain; }
.lifeon-universe__copy {
  position:absolute; z-index:1; inset:0 auto 0 0; width:44%; display:flex; flex-direction:column; justify-content:center;
  padding:clamp(28px,4vw,66px); color:#fff;
}
.lifeon-universe__copy h2:not(.case-title) { margin:0 0 17px; color:#fff; font-size:clamp(30px,3.3vw,50px); line-height:1.02; letter-spacing:-.045em; }
.lifeon-universe__copy h2:not(.case-title) span { color:#7acb60; }
.lifeon-universe__copy > p:not(.lifeon-eyebrow) { max-width:420px; margin:0; color:rgba(255,255,255,.76); font-size:13px; line-height:1.65; }
.lifeon-universe__copy ul { display:flex; flex-wrap:wrap; gap:9px 18px; margin:24px 0 0; padding:0; list-style:none; color:rgba(255,255,255,.78); font-size:10px; font-weight:600; }
.lifeon-universe__copy li::before { content:"•"; margin-right:7px; color:#7acb60; }
.lifeon-workflows { padding:clamp(84px,8vw,132px) clamp(26px,4.8vw,74px); background:#e9e9e8; }
.lifeon-workflow {
  width:min(1320px,100%); margin:0 auto; display:grid; grid-template-columns:minmax(190px,.68fr) minmax(0,3.45fr);
  align-items:center; gap:clamp(28px,4vw,58px);
}
.lifeon-workflow + .lifeon-workflow { margin-top:clamp(52px,5.5vw,78px); padding-top:clamp(52px,5.5vw,78px); border-top:1px solid rgba(12,14,12,.13); }
.lifeon-workflow__copy h2:not(.case-title) { margin:0 0 18px; font-size:clamp(28px,3vw,42px); line-height:1.04; letter-spacing:-.04em; }
.lifeon-workflow__copy > p:not(.lifeon-eyebrow) { margin:0 0 24px; color:#686b68; font-size:12px; line-height:1.65; }
.lifeon-workflow__copy > span { color:#3f493d; font-size:10px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }
.lifeon-workflow__visuals { min-width:0; display:grid; grid-template-columns:.58fr 22px minmax(0,1fr) 22px minmax(0,1fr) 22px minmax(0,1fr); align-items:center; gap:clamp(8px,1vw,14px); }
.lifeon-workflow__sources { display:grid; grid-template-rows:repeat(2,minmax(0,1fr)); gap:clamp(10px,1.4vw,20px); }
.lifeon-workflow__sources figure,.lifeon-workflow__step {
  min-width:0; overflow:hidden; border-radius:20px; background:#fff; border:1px solid rgba(12,14,12,.06);
  box-shadow:0 10px 24px rgba(20,22,20,.055);
}
.lifeon-workflow__sources figure { aspect-ratio:1/1; display:grid; place-items:center; }
.lifeon-workflow__sources img { width:100%; height:100%; display:block; object-fit:contain; }
.lifeon-workflow__step { position:relative; aspect-ratio:4/5; display:grid; place-items:center; }
.lifeon-workflow__step img { width:100%; height:100%; display:block; object-fit:contain; }
.lifeon-workflow__step figcaption {
  position:absolute; z-index:1; top:12px; left:12px; padding:6px 9px; border-radius:999px;
  background:rgba(255,255,255,.9); color:#424642; font-size:8px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  box-shadow:0 5px 14px rgba(0,0,0,.06);
}
.lifeon-workflow__step--final { box-shadow:0 16px 34px rgba(20,23,20,.12); }
.lifeon-workflow__arrow {
  display:grid; place-items:center; color:var(--lifeon-green); font-size:24px; font-weight:700; line-height:1;
}
.lifeon-selection { background:#fff; }
.lifeon-footer {
  display:grid; grid-template-columns:minmax(150px,.7fr) minmax(260px,1.7fr) auto; align-items:center;
  gap:clamp(22px,4vw,58px); min-height:128px; padding:24px clamp(28px,5vw,72px);
  border-top:1px solid #e7e8e5; background:#fafafa;
}
.lifeon-footer > img { display:block; width:clamp(135px,13vw,190px); height:auto; }
.lifeon-footer strong { display:block; margin-bottom:5px; font-size:14px; }
.lifeon-footer p { margin:0; color:#6a6d6a; font-size:11px; line-height:1.55; }
.lifeon-footer a {
  display:inline-flex; align-items:center; justify-content:center; gap:13px; min-height:46px; padding:0 21px;
  border-radius:13px; background:linear-gradient(145deg,#181b18,#050605); color:#fff; font-size:11px; font-weight:700;
  box-shadow:0 10px 24px rgba(9,11,9,.13); transition:transform .2s ease,box-shadow .2s ease;
}
.lifeon-footer a span { color:#6fce55; font-size:16px; }
.lifeon-footer a:hover { transform:translateY(-2px); box-shadow:0 14px 28px rgba(9,11,9,.18); }

@media (max-width:1050px) {
  .lifeon-hero { grid-template-columns:minmax(330px,.9fr) minmax(0,1.1fr); height:460px; }
  .lifeon-hero__copy { padding-left:40px; }
  .lifeon-workflow { grid-template-columns:1fr; }
  .lifeon-workflow__copy { max-width:560px; }
  .lifeon-universe__copy { width:48%; }
}
@media (max-width:760px) {
  .project-brand-lockup { width:88%; gap:10px; }
  .project-brand-lockup img { width:41%; }
  .project-brand-lockup strong { font-size:clamp(11px,3.2vw,16px); }
  .lifeon-hero { grid-template-columns:1fr; height:auto; margin:12px; border-radius:22px; }
  .lifeon-hero__copy { padding:34px 28px 32px; }
  .lifeon-hero__certification { margin-bottom:26px; }
  .lifeon-hero__visual { min-height:360px; }
  .lifeon-hero__visual::before { background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.82) 9%,transparent 34%); }
  .lifeon-social-float { width:42px; height:42px; }
  .lifeon-post-grid { grid-template-columns:1fr; width:min(420px,100%); gap:24px; }
  .lifeon-universe { width:calc(100% - 24px); aspect-ratio:auto; min-height:570px; border-radius:22px; }
  .lifeon-universe > img { object-fit:cover; object-position:68% center; }
  .lifeon-universe::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(4,11,9,.97) 0%,rgba(4,11,9,.72) 48%,rgba(4,11,9,.05) 78%); }
  .lifeon-universe__copy { z-index:2; inset:0 0 auto; width:100%; padding:38px 28px; justify-content:flex-start; }
  .lifeon-workflows { padding-inline:18px; }
  .lifeon-workflow__visuals { grid-template-columns:1fr; gap:18px; }
  .lifeon-workflow__arrow { transform:rotate(90deg); justify-self:center; }
  .lifeon-workflow__sources { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:none; }
  .lifeon-workflow__step { aspect-ratio:auto; min-height:0; }
  .lifeon-workflow__step img { width:100%; height:auto; }
  .lifeon-footer { grid-template-columns:1fr; text-align:center; justify-items:center; padding-block:32px; }
  .lifeon-footer p { max-width:320px; }
}

/* Bouton Instagram partagé, volontairement sans compteur ni métrique. */
.social-instagram-link {
  display:flex; width:max-content; max-width:100%; align-items:center; gap:10px; margin:28px auto 0;
  padding:12px 22px; border:1px solid rgba(40,38,91,.22); border-radius:999px; color:var(--adc-navy);
  background:#fff; text-decoration:none; font-family:var(--font-poppins); font-size:12px; font-weight:750;
  transition:transform .2s var(--ease),background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.social-instagram-link svg { width:18px; height:18px; flex:none; }
.social-instagram-link:hover { transform:translateY(-2px); color:#fff; border-color:var(--adc-orange); background:var(--adc-orange); }
.social-instagram-link--cap-creole { color:var(--ccr-navy); border-color:rgba(3,40,95,.22); }
.social-instagram-link--cap-creole:hover { color:#fff; border-color:var(--ccr-navy); background:var(--ccr-navy); }

/* En Drive : fond illustré clair, contenu central volontairement calme. */
.adc-video-decor { display:none; }
.adc-video-intro .adc-youtube-card { transform:none; border-radius:22px; }
.adc-video-intro .adc-youtube-card--featured { z-index:1; transform:translateY(-12px) scale(1.08); }

@media (min-width:641px) {
  .adc-video-intro h2:not(.case-title) { white-space:nowrap; }
}

@media (max-width:640px) {
  .adc-video-intro .adc-youtube-card--featured { transform:none; }
}

/* ══════════════════════════════════════════════════════════════════════
   DIGILIFE — RÉSEAUX SOCIAUX (namespace .digilife-*)
   Étude de cas longue, fidèle à la maquette : blanc Apple, respirations
   généreuses, formats natifs et ruptures noires ponctuelles.
   ══════════════════════════════════════════════════════════════════════ */
.ls-modal.custom-mode .ls-modal-dialog:has(.digilife-social-case) {
  width:min(98vw,1800px); max-width:1800px; height:96vh; max-height:96vh;
  border-radius:18px; background:#fff;
}
.ls-modal.custom-mode .ls-modal-viewport:has(.digilife-social-case) { background:#fff; }
.digilife-social-case {
  --digilife-ink:#09090b;
  --digilife-muted:#6a6a72;
  --digilife-red:#f13b4c;
  --digilife-pink:#ff5d78;
  --digilife-line:#ececef;
  color:var(--digilife-ink); background:#fff; overflow:hidden;
}
.digilife-social-case * { box-sizing:border-box; }
.digilife-social-case figure { margin:0; }
.digilife-social-case img { max-width:100%; display:block; }
.digilife-social-case h1,
.digilife-social-case h2,
.digilife-social-case h3 { font-family:var(--font-poppins); letter-spacing:-.045em; }
.digilife-social-case h1, .digilife-social-case h2 { margin:0; font-size:clamp(46px,5vw,78px); font-weight:740; line-height:.98; }
.digilife-social-case h2:not(.case-title) { margin:0; font-size:clamp(36px,4vw,62px); font-weight:730; line-height:1.02; }
.digilife-social-case h3 { margin:0; font-size:clamp(25px,2.3vw,34px); font-weight:720; line-height:1.05; }
.digilife-social-eyebrow {
  margin:0 0 18px; color:var(--digilife-red); font-family:var(--font-poppins);
  font-size:10px; font-weight:820; letter-spacing:.18em; line-height:1.4; text-transform:uppercase;
}
.digilife-social-button {
  display:inline-flex; width:max-content; max-width:100%; min-height:42px; align-items:center; justify-content:center; gap:10px;
  padding:11px 19px; border:1px solid currentColor; border-radius:999px; color:var(--digilife-ink); background:transparent;
  font-family:var(--font-poppins); font-size:10px; font-weight:790; letter-spacing:.045em; line-height:1.2;
  text-decoration:none; text-transform:uppercase; cursor:pointer;
  transition:transform .2s var(--ease),color .2s var(--ease),background .2s var(--ease);
}
.digilife-social-button:hover { transform:translateY(-2px); color:#fff; background:var(--digilife-ink); }
.digilife-social-button--dark { color:#fff; border-color:var(--digilife-ink); background:var(--digilife-ink); }
.digilife-social-button--dark:hover { background:#2b2b30; }

/* Hero compact : texte à gauche, composition réelle de posts à droite. */
.digilife-social-hero {
  min-height:560px; padding:clamp(48px,5vw,76px) clamp(34px,5vw,84px);
  display:grid; grid-template-columns:minmax(390px,.72fr) minmax(520px,1.28fr);
  gap:clamp(28px,2.8vw,42px); align-items:center;
  color:#fff; background:linear-gradient(115deg,#050506 0%,#09090b 54%,#111116 100%);
}
.digilife-social-hero__copy { position:relative; z-index:2; width:100%; max-width:610px; min-width:0; margin-inline:0 !important; }
.digilife-social-hero__copy h1, .digilife-social-hero__copy h2 { max-width:500px; color:#fff; font-size:clamp(42px,3.5vw,58px); white-space:normal; }
.digilife-social-hero__copy .digilife-social-eyebrow { color:var(--digilife-pink); }
.digilife-social-hero__copy > p:not(.digilife-social-eyebrow) {
  max-width:440px; margin:28px 0 30px; color:#c3c3c9; font-size:clamp(15px,1.08vw,18px); line-height:1.72;
}
.digilife-social-hero__visual { position:relative; z-index:1; width:100%; max-width:1080px; justify-self:end; }
.digilife-social-hero__visual img { width:100%; height:auto; object-fit:contain; filter:contrast(1.035) saturate(1.02) drop-shadow(0 24px 42px rgba(0,0,0,.08)); }
.digilife-social-hero .digilife-social-button--dark { border-color:#fff; color:#050506; background:#fff; }
.digilife-social-hero .digilife-social-button--dark:hover { color:#fff; background:transparent; }

.digilife-section-intro {
  width:min(100%,1320px); margin:0 auto clamp(22px,3vw,38px); text-align:left;
}
.digilife-section-intro > p:last-child {
  max-width:660px; margin:22px 0 0; color:var(--digilife-muted); font-size:clamp(15px,1.08vw,17px); line-height:1.7;
}
.digilife-section-intro--workflow { width:min(100%,860px); margin-bottom:clamp(48px,5vw,82px); }

/* Trois workflows larges : la source reste compacte, les deux résultats dominent. */
.digilife-workflows { padding:clamp(76px,7vw,116px) clamp(28px,5.5vw,96px) 0; background:#fff; }
.digilife-workflow {
  width:min(100%,1520px); margin:0 auto; padding:clamp(52px,5vw,82px) 0;
  display:grid; grid-template-columns:minmax(220px,.68fr) minmax(108px,.34fr) 26px minmax(250px,1fr) 26px minmax(250px,1fr);
  gap:clamp(14px,1.7vw,28px); align-items:center; border-top:1px solid var(--digilife-line);
}
.digilife-workflow:last-child { border-bottom:1px solid var(--digilife-line); }
.digilife-workflow__copy { padding-right:clamp(0px,1.4vw,22px); }
.digilife-workflow__number {
  margin:0 0 15px; color:var(--digilife-red); font-family:var(--font-poppins);
  font-size:9px; font-weight:820; letter-spacing:.17em; text-transform:uppercase;
}
.digilife-workflow__tagline { margin:18px 0 20px !important; color:#24242a !important; font-weight:620; line-height:1.55 !important; }
.digilife-workflow__copy > p:not(.digilife-workflow__number):not(.digilife-workflow__tagline) {
  margin:0; color:var(--digilife-muted); font-size:13px; line-height:1.72;
}
.digilife-workflow__legend { display:grid; gap:8px; margin:28px 0 0; padding:0; list-style:none; }
.digilife-workflow__legend li { display:flex; align-items:center; gap:9px; color:#74747c; font-size:10px; line-height:1.3; }
.digilife-workflow__dot { width:10px; height:10px; flex:none; border-radius:2px; background:#e8e6e1; }
.digilife-workflow__dot--scene { background:#76afd0; }
.digilife-workflow__dot--final { background:#fa6272; }
.digilife-workflow-step { min-width:0; }
.digilife-workflow-step img {
  width:100%; height:auto; border:1px solid #e7e7ea; border-radius:12px; background:#fafafa; object-fit:contain;
  box-shadow:0 12px 32px rgba(12,12,16,.055);
}
.digilife-workflow-step--source img { width:100%; }
.digilife-workflow-step--large img { border-radius:16px; box-shadow:0 18px 42px rgba(12,12,16,.075); }
.digilife-workflow-step figcaption {
  margin-top:12px; color:#888890; font-family:var(--font-poppins); font-size:9px; font-weight:650; text-align:center;
}
.digilife-workflow__arrow { color:#9c9ca2; font-size:23px; line-height:1; text-align:center; }

.digilife-social-transition {
  margin-top:clamp(52px,5vw,80px); padding:clamp(58px,5.5vw,82px) clamp(28px,6vw,108px);
  color:#fff; text-align:center; background:#050506;
}
.digilife-social-transition > * { max-width:900px; margin-inline:auto; }
.digilife-social-transition .digilife-social-eyebrow { color:var(--digilife-pink); }
.digilife-social-transition h2:not(.case-title) { color:#fff; }
.digilife-social-transition > p:last-child {
  max-width:650px; margin-top:24px; color:#adadb5; font-size:clamp(15px,1.08vw,17px); line-height:1.7;
}

.digilife-campaign,
.digilife-wide-campaign { padding:clamp(42px,4.2vw,62px) clamp(28px,6vw,108px); background:#fff; }
.digilife-campaign--neo { padding-top:clamp(48px,4.5vw,68px); }
.digilife-campaign--tradein { padding-inline:clamp(20px,2.5vw,42px); }
.digilife-campaign--premium { padding-bottom:clamp(62px,6vw,92px); }
.digilife-campaign__grid,
.digilife-wide-campaign__gallery,
.digilife-premium-grid { width:min(100%,1320px); margin:0 auto; }
.digilife-campaign__grid { display:grid; gap:clamp(20px,2.3vw,36px); align-items:start; }
.digilife-campaign__grid figure,
.digilife-wide-campaign__gallery figure,
.digilife-premium-grid figure { overflow:hidden; border-radius:16px; background:#f2f2f3; box-shadow:0 18px 46px rgba(8,8,10,.07); }
.digilife-campaign__grid img,
.digilife-wide-campaign__gallery img,
.digilife-premium-grid img { width:100%; height:auto; object-fit:contain; }
.digilife-campaign__grid--two-portrait { width:min(100%,1080px); grid-template-columns:repeat(2,minmax(0,1fr)); }
.digilife-campaign__grid--three-portrait { grid-template-columns:repeat(3,minmax(0,1fr)); }
.digilife-campaign__grid--squares { width:min(100%,1320px); grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(12px,1.4vw,20px); }
.digilife-wide-campaign__gallery { width:min(100%,1500px); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,2vw,30px); }
.digilife-wide-campaign__gallery figure { border-radius:14px; }
.digilife-premium-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(22px,2.6vw,40px); }

.digilife-influence-link {
  position:relative; min-height:0;
  margin:clamp(42px,5vw,74px) clamp(28px,6vw,108px) clamp(20px,2vw,30px); padding:0;
  display:block; overflow:hidden; border:1px solid var(--digilife-line); border-radius:16px;
  background:#f4f1ef; box-shadow:0 16px 44px rgba(10,10,12,.06);
}
.digilife-influence-link__copy { width:min(100%,780px); margin:0 !important; padding:clamp(38px,4vw,60px); }
.digilife-influence-link h2 { font-size:clamp(30px,3vw,46px); }
.digilife-influence-link__copy > p:not(.digilife-social-eyebrow) { margin:16px 0 0; color:var(--digilife-muted); font-size:14px; line-height:1.6; }
.digilife-influence-link .digilife-social-button { margin-top:24px; }

.digilife-social-stats {
  padding:clamp(48px,4.5vw,70px) clamp(28px,6vw,108px); display:grid;
  grid-template-columns:minmax(260px,.72fr) minmax(0,1.4fr); gap:clamp(42px,6vw,100px); align-items:center;
  color:#fff; background:#050506;
}
.digilife-social-stats__intro { margin-inline:0 !important; }
.digilife-social-stats__intro .digilife-social-eyebrow { color:var(--digilife-pink); }
.digilife-social-stats__intro h2:not(.case-title) { color:#fff; font-size:clamp(28px,2.8vw,43px); }
.digilife-social-stats__intro > p:last-child { max-width:440px; margin:15px 0 0; color:#a8a8b0; font-size:13px; line-height:1.6; }
.digilife-social-stats__grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0; padding:0; }
.digilife-social-stats__grid > div { min-width:0; padding:8px clamp(16px,2vw,30px); border-left:1px solid rgba(255,255,255,.15); }
.digilife-social-stats__grid dt { font-family:var(--font-poppins); font-size:clamp(30px,3.1vw,48px); font-weight:620; line-height:1; letter-spacing:-.045em; }
.digilife-social-stats__grid dd { margin:9px 0 0; color:#a8a8b0; font-size:10px; line-height:1.4; }

.digilife-project-cta {
  min-height:118px; margin:16px clamp(28px,6vw,108px) 30px; padding:18px clamp(24px,3.2vw,48px); display:grid;
  grid-template-columns:minmax(170px,.7fr) minmax(220px,1.25fr) auto auto; align-items:center; gap:clamp(18px,2.4vw,38px);
  color:var(--digilife-ink); background:#fff; border:1px solid var(--digilife-line); border-radius:14px;
}
.digilife-project-cta__title { max-width:240px; font-family:var(--font-poppins); font-size:clamp(16px,1.4vw,21px); line-height:1.25; }
.digilife-project-cta > p { max-width:430px; margin:0; color:var(--digilife-muted); font-size:11px; line-height:1.55; }
.digilife-project-cta__brand { display:flex; align-items:center; gap:16px; }
.digilife-project-cta__brand img { width:clamp(105px,10vw,150px); height:auto; }
.digilife-project-cta__brand span { max-width:100px; padding-left:16px; border-left:1px solid #d7d7db; color:#626269; font-size:9px; line-height:1.35; }
.digilife-project-cta .digilife-social-button { border:1px solid #b9b9bf; color:var(--digilife-ink); background:#fff; }
.digilife-project-cta .digilife-social-button:hover { border-color:var(--digilife-ink); color:#fff; background:var(--digilife-ink); }

@media (min-width:901px) {
  .digilife-social-hero__visual { width:100%; transform:none; }
}

@media (max-width:1180px) {
  .digilife-social-hero { grid-template-columns:minmax(370px,.86fr) minmax(380px,1.14fr); gap:24px; }
  .digilife-social-hero__copy h1, .digilife-social-hero__copy h2 { font-size:clamp(42px,4vw,50px); white-space:normal; }
  .digilife-workflow {
    grid-template-columns:minmax(200px,.68fr) minmax(92px,.3fr) 20px minmax(210px,1fr) 20px minmax(210px,1fr);
    gap:14px;
  }
  .digilife-social-stats { grid-template-columns:1fr; }
  .digilife-social-stats__grid { max-width:900px; }
  .digilife-project-cta { grid-template-columns:minmax(165px,.72fr) minmax(200px,1.1fr) auto auto; gap:18px; }
}

@media (max-width:900px) {
  .ls-modal.custom-mode .ls-modal-dialog:has(.digilife-social-case) { width:100vw; height:100dvh; max-height:100dvh; border-radius:0; }
  .digilife-social-hero { min-height:0; grid-template-columns:1fr; padding-top:76px; }
  .digilife-social-hero__copy { max-width:680px; }
  .digilife-social-hero__copy h1, .digilife-social-hero__copy h2 { white-space:normal; }
  .digilife-social-hero__visual { max-width:760px; justify-self:center; }
  .digilife-workflow {
    grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr); align-items:start; gap:18px;
  }
  .digilife-workflow__copy { grid-column:1/-1; max-width:620px; margin-bottom:20px; }
  .digilife-workflow-step--source { grid-column:1/-1; width:min(190px,36%); justify-self:center; }
  .digilife-workflow > .digilife-workflow__arrow:first-of-type { grid-column:1/-1; transform:rotate(90deg); justify-self:center; }
  .digilife-workflow-step--large { grid-row:auto; }
  .digilife-workflow > .digilife-workflow__arrow:last-of-type { align-self:center; }
  .digilife-campaign__grid--three-portrait { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .digilife-campaign__grid--three-portrait figure:last-child { grid-column:1/-1; width:calc(50% - 10px); justify-self:center; }
  .digilife-campaign__grid--squares { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .digilife-wide-campaign__gallery { grid-template-columns:1fr; }
  .digilife-influence-link__copy { width:min(100%,780px); }
  .digilife-project-cta { grid-template-columns:minmax(0,1fr) auto; }
  .digilife-project-cta__title { grid-column:1; grid-row:1; }
  .digilife-project-cta > p { grid-column:1; grid-row:2; }
  .digilife-project-cta .digilife-social-button { grid-column:2; grid-row:1/3; }
  .digilife-project-cta__brand { grid-column:1/-1; grid-row:3; width:100%; justify-content:flex-start; }
}

@media (max-width:640px) {
  .digilife-social-case h1, .digilife-social-case h2 { font-size:clamp(42px,12vw,56px); }
  .digilife-social-case h2:not(.case-title) { font-size:clamp(33px,9.5vw,46px); }
  .digilife-social-hero,
  .digilife-workflows,
  .digilife-campaign,
  .digilife-wide-campaign,
  .digilife-social-stats { padding-inline:20px; }
  .digilife-social-hero { padding-block:64px 54px; gap:34px; }
  .digilife-social-hero__copy > p:not(.digilife-social-eyebrow) { margin-block:22px 26px; font-size:14px; }
  .digilife-workflows { padding-top:64px; }
  .digilife-workflow { grid-template-columns:1fr; padding-block:48px; gap:16px; }
  .digilife-workflow__copy,
  .digilife-workflow-step--source,
  .digilife-workflow > .digilife-workflow__arrow:first-of-type,
  .digilife-workflow-step--large,
  .digilife-workflow > .digilife-workflow__arrow:last-of-type { grid-column:1; }
  .digilife-workflow-step--source { width:min(180px,56%); }
  .digilife-workflow__arrow { transform:rotate(90deg); justify-self:center; }
  .digilife-workflow-step figcaption { font-size:10px; }
  .digilife-social-transition { margin-top:76px; padding:72px 20px; }
  .digilife-campaign,
  .digilife-wide-campaign { padding-block:70px; }
  .digilife-campaign--neo { padding-top:76px; }
  .digilife-campaign--premium { padding-bottom:70px; }
  .digilife-section-intro { margin-bottom:38px; text-align:left; }
  .digilife-section-intro > p:last-child { margin-left:0; font-size:14px; }
  .digilife-campaign__grid--two-portrait,
  .digilife-campaign__grid--three-portrait,
  .digilife-premium-grid { grid-template-columns:1fr; gap:20px; }
  .digilife-campaign__grid--squares { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .digilife-campaign__grid--three-portrait figure:last-child { grid-column:auto; width:100%; }
  .digilife-wide-campaign__gallery { grid-template-columns:1fr; gap:20px; }
  .digilife-wide-campaign__gallery figure { border-radius:8px; }
  .digilife-influence-link { min-height:0; margin-inline:20px; background:#f4f1ef; }
  .digilife-influence-link__copy { width:100%; padding:34px 28px 28px; background:#f4f1ef; }
  .digilife-social-stats__grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 0; }
  .digilife-social-stats__grid > div:nth-child(odd) { border-left:0; padding-left:0; }
  .digilife-social-stats__grid dt { font-size:35px; }
  .digilife-project-cta { min-height:0; margin:14px 20px 24px; padding:26px 20px; grid-template-columns:1fr; align-items:flex-start; gap:16px; }
  .digilife-project-cta__title,
  .digilife-project-cta > p,
  .digilife-project-cta .digilife-social-button,
  .digilife-project-cta__brand { grid-column:1; grid-row:auto; max-width:none; }
  .digilife-project-cta .digilife-social-button { width:100%; }
  .digilife-project-cta__brand { margin-top:4px; }
}

/* ══════════════════════════════════════════════════════════════════════
   DIGILIFE × MICHELLE MNTK — campagne d’influence (namespace .dgi-*)
   Page éditoriale dédiée : les règles ne s’appliquent à aucun autre cas.
   ══════════════════════════════════════════════════════════════════════ */
.ls-modal.custom-mode .ls-modal-dialog:has(.dgi-case) {
  width:min(97vw,1800px); max-width:1800px; height:95vh; max-height:95vh;
  border-radius:20px; background:#fff;
}
.ls-modal.custom-mode .ls-modal-viewport:has(.dgi-case) { background:#fff; }

.dgi-case {
  --dgi-ink:#0a0a0d;
  --dgi-muted:#686873;
  --dgi-pink:#ff2f67;
  --dgi-soft:#f7f7fa;
  color:var(--dgi-ink); background:#fff; overflow:hidden;
}
.dgi-case section { padding:clamp(70px,7vw,118px) clamp(28px,6vw,108px); }
.dgi-case section > * { max-width:1480px; margin-inline:auto; }
.dgi-eyebrow {
  margin:0 0 22px; color:var(--dgi-pink); font-family:var(--font-poppins);
  font-size:11px; font-weight:800; letter-spacing:.14em; line-height:1.4; text-transform:uppercase;
}
.dgi-eyebrow span { color:var(--dgi-ink); }
.dgi-case h1, .dgi-case h2, .dgi-case h2 { font-family:var(--font-poppins); letter-spacing:-.045em; }
.dgi-case h1, .dgi-case h2 {
  margin:0; font-size:clamp(44px,5.2vw,82px); line-height:.99; font-weight:750;
}
.dgi-case h2:not(.case-title) {
  margin:0 0 26px; font-size:clamp(34px,3.7vw,58px); line-height:1.04; font-weight:730;
}
.dgi-copy { display:grid; gap:18px; max-width:560px; }
.dgi-copy p,.dgi-instagram__copy > p,.dgi-results__copy > p,.dgi-behind__copy > p,.dgi-making__copy > p {
  margin:0; color:var(--dgi-muted); font-size:clamp(15px,1.15vw,18px); line-height:1.72;
}

/* 01 — Header */
.dgi-hero {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.72fr);
  gap:clamp(60px,8vw,138px); align-items:center; min-height:740px;
  background:linear-gradient(105deg,#fff 0%,#fff 58%,#fafaff 100%);
}
.dgi-hero__copy { padding-left:clamp(0px,2vw,30px); }
.dgi-label {
  margin:22px 0 34px; color:var(--dgi-pink); font-family:var(--font-poppins);
  font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
}
.dgi-hero__portrait {
  width:min(100%,470px); margin:0; justify-self:end; border-radius:24px; overflow:hidden;
  background:#efefef; box-shadow:0 20px 54px rgba(15,18,30,.08);
}
.dgi-hero__portrait img { width:100%; height:auto; display:block; }

/* 02 — Profil de la créatrice */
.dgi-profile {
  display:grid; grid-template-columns:minmax(280px,.82fr) minmax(0,1.45fr);
  gap:clamp(46px,7vw,112px); align-items:center;
  background:linear-gradient(112deg,#f8f9fd 0%,#fff 58%,#fff3f7 100%);
}
.dgi-profile__copy,.dgi-profile__facts { margin-inline:0 !important; }
.dgi-profile__copy > p:last-child {
  max-width:610px; margin:0; color:var(--dgi-muted); font-size:clamp(15px,1.15vw,18px); line-height:1.72;
}
.dgi-profile__facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.dgi-profile__facts > div {
  min-height:160px; padding:24px 18px; display:flex; flex-direction:column; justify-content:center; gap:10px;
  border:1px solid rgba(255,47,103,.13); border-radius:18px; background:rgba(255,255,255,.9);
  box-shadow:0 16px 42px rgba(21,24,42,.06);
}
.dgi-profile__facts strong {
  color:var(--dgi-pink); font-family:var(--font-poppins); font-size:clamp(22px,2vw,34px); line-height:1;
}
.dgi-profile__facts span { color:#4d4d58; font-size:11px; font-weight:650; line-height:1.45; }

/* 03 — Concept */
.dgi-concept {
  display:grid; grid-template-columns:minmax(250px,.66fr) minmax(0,1.58fr);
  gap:clamp(48px,7vw,116px); align-items:center; background:#f8f9fc;
}
.dgi-concept__copy .dgi-copy { max-width:440px; }
.dgi-concept__media { min-width:0; margin-inline:0 !important; }
.dgi-concept__collage {
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  gap:16px; align-items:stretch;
}
.dgi-concept__collage figure { margin:0; overflow:hidden; border-radius:20px; background:#e9eaf0; }
.dgi-concept__collage img { width:100%; height:100%; display:block; object-fit:cover; }
.dgi-concept__main { aspect-ratio:9/16; }
.dgi-concept__secondary {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-content:center;
}
.dgi-concept__secondary > figure:not(.dgi-concept__wide) { aspect-ratio:9/16; }
.dgi-concept__secondary .dgi-concept__wide { grid-column:1/-1; aspect-ratio:16/9; }
.dgi-concept__all { width:100%; margin:18px 0 0 !important; }
.dgi-concept__all summary {
  display:flex; min-height:44px; align-items:center; justify-content:space-between; gap:18px;
  padding:11px 17px; border:1px solid rgba(10,10,13,.2); border-radius:999px;
  color:var(--dgi-ink); font-family:var(--font-poppins); font-size:11px; font-weight:700; cursor:pointer; list-style:none;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.dgi-concept__all summary::-webkit-details-marker { display:none; }
.dgi-concept__all summary:hover { border-color:var(--dgi-pink); background:rgba(255,47,103,.05); }
.dgi-concept__all summary span { color:var(--dgi-pink); font-size:18px; transition:transform .2s var(--ease); }
.dgi-concept__all[open] summary span { transform:rotate(45deg); }
.dgi-concept__all-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:22px; }
.dgi-concept__all-grid figure { margin:0; overflow:hidden; border-radius:14px; background:#e9eaf0; }
.dgi-concept__all-grid img { width:100%; height:auto; display:block; object-fit:contain; }

/* 03 — Instagram */
.dgi-instagram {
  display:grid; grid-template-columns:minmax(230px,.54fr) minmax(0,1.6fr);
  min-width:0; gap:clamp(42px,6vw,98px); align-items:center; color:#fff; background:#070708;
}
.dgi-instagram .dgi-eyebrow,.dgi-behind .dgi-eyebrow { color:var(--dgi-pink); }
.dgi-instagram h2:not(.case-title), .dgi-behind h2:not(.case-title) { color:#fff; }
.dgi-instagram h2:not(.case-title) em { color:var(--dgi-pink); font-style:normal; }
.dgi-instagram__copy > p,.dgi-behind__copy > p { color:#b8b8c1; }
.dgi-instagram__numbers {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 22px;
  margin:44px 0 0; padding:0;
}
.dgi-instagram__numbers div:last-child { grid-column:1/-1; }
.dgi-instagram__numbers dt {
  color:var(--dgi-pink); font-family:var(--font-poppins); font-size:28px; font-weight:780; line-height:1;
}
.dgi-instagram__numbers dd { margin:8px 0 0; color:#c7c7cf; font-size:12px; line-height:1.4; }
.dgi-instagram__posts { width:100%; max-width:100%; min-width:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.7vw,24px); }
.dgi-ig-card {
  display:block; min-width:0; overflow:hidden; border:1px solid #dedee4; border-radius:18px;
  color:#17171b; background:#fff; text-decoration:none; box-shadow:0 18px 46px rgba(0,0,0,.18);
}
.dgi-ig-card__head { display:flex; align-items:center; gap:10px; min-height:54px; padding:10px 13px; }
.dgi-ig-card__avatar { width:30px; height:30px; flex:none; overflow:hidden; border-radius:50%; background:#050505; }
.dgi-ig-card__avatar img { width:100%; height:100%; display:block; object-fit:cover; }
.dgi-ig-card__head > span:nth-child(2) { display:grid; gap:2px; min-width:0; }
.dgi-ig-card__head strong { overflow:hidden; font-size:11px; line-height:1; text-overflow:ellipsis; white-space:nowrap; }
.dgi-ig-card__head small { color:#7c7c83; font-size:8px; line-height:1; }
.dgi-ig-card__head b { margin-left:auto; font-size:13px; letter-spacing:.08em; }
.dgi-ig-card figure { margin:0; aspect-ratio:9/16; background:#f1f1f4; }
.dgi-ig-card figure img { width:100%; height:100%; display:block; object-fit:cover; }
.dgi-ig-card figure iframe { width:100%; height:100%; display:block; border:0; background:#fff; }
.dgi-ig-card__actions { display:flex; gap:11px; align-items:center; min-height:46px; padding:11px 13px; }
.dgi-ig-card__actions svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.dgi-ig-card__actions svg:last-child { margin-left:auto; }
.dgi-ig-card:focus-visible,.dgi-cta a:focus-visible { outline:3px solid var(--dgi-pink); outline-offset:4px; }

/* 04 — Résultats */
.dgi-results {
  display:grid; grid-template-columns:minmax(320px,.68fr) minmax(0,1.5fr);
  gap:clamp(40px,5vw,76px); align-items:center; background:#fff;
}
.dgi-results__copy > p { max-width:390px; }
.dgi-results__grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.dgi-results__grid > div {
  min-height:190px; padding:28px 24px; border:1px solid #eeeef2; border-radius:18px;
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:9px;
  text-align:center; background:#f8f8fa;
}
.dgi-results__grid > div > span { width:30px; height:30px; color:#16161a; }
.dgi-results__grid svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.dgi-results__grid strong { font-family:var(--font-poppins); font-size:clamp(24px,2.2vw,36px); line-height:1; }
.dgi-results__grid small { color:#666670; font-size:11px; line-height:1.45; }

/* 05 — Coulisses */
.dgi-behind {
  display:grid; grid-template-columns:minmax(310px,.68fr) minmax(0,1.62fr);
  gap:clamp(40px,5vw,72px); align-items:center; color:#fff; background:#070708;
}
.dgi-behind__copy > p { max-width:400px; }
.dgi-behind__gallery {
  min-width:0; display:grid; grid-template-columns:minmax(0,1.45fr) repeat(2,minmax(0,.58fr)); gap:14px; align-items:center;
}
.dgi-behind__gallery figure {
  min-width:0; margin:0; overflow:hidden; border-radius:18px; background:#18181b;
}
.dgi-behind__gallery img { width:100%; height:auto; display:block; object-fit:contain; }
.dgi-behind__all { grid-column:2; width:100%; min-width:0; margin:18px 0 0 !important; }
.dgi-behind__all summary {
  display:flex; min-height:44px; align-items:center; justify-content:space-between; gap:18px;
  padding:11px 17px; border:1px solid rgba(255,255,255,.28); border-radius:999px;
  color:#fff; font-family:var(--font-poppins); font-size:11px; font-weight:700; cursor:pointer; list-style:none;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.dgi-behind__all summary::-webkit-details-marker { display:none; }
.dgi-behind__all summary:hover { border-color:var(--dgi-pink); background:rgba(255,47,103,.08); }
.dgi-behind__all summary span { color:var(--dgi-pink); font-size:18px; transition:transform .2s var(--ease); }
.dgi-behind__all[open] summary span { transform:rotate(45deg); }
.dgi-behind__all-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:22px; }
.dgi-behind__all-grid figure { margin:0; overflow:hidden; border-radius:14px; background:#18181b; }
.dgi-behind__all-grid img { width:100%; height:auto; display:block; object-fit:contain; }

/* 06 — Making-of */
.dgi-making {
  display:grid; grid-template-columns:minmax(230px,.52fr) minmax(0,1.48fr);
  gap:clamp(48px,7vw,110px); align-items:center; background:#f8f9fc;
}
.dgi-making__copy > p { max-width:380px; }
.dgi-making__link {
  display:inline-flex; align-items:center; gap:10px; margin-top:24px; padding:12px 19px;
  border:1px solid rgba(10,10,13,.24); border-radius:999px; color:var(--dgi-ink);
  font-family:var(--font-poppins); font-size:11px; font-weight:720; text-decoration:none;
  transition:transform .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.dgi-making__link:hover { transform:translateY(-2px); border-color:var(--dgi-pink); color:var(--dgi-pink); }
.dgi-making__video { overflow:hidden; border-radius:20px; background:#08080a; box-shadow:0 18px 50px rgba(18,18,27,.1); }
.dgi-making__video video { width:100%; aspect-ratio:16/9; display:block; object-fit:contain; background:#050505; }

/* 07 — CTA extrait sous le viewport par le composant modal */
.dgi-cta {
  box-sizing:border-box; height:94px; min-height:94px; margin:0; padding:14px clamp(24px,4vw,64px); display:flex; align-items:center; gap:24px;
  color:#fff; background:#050506; border-top:1px solid rgba(255,255,255,.09);
}
.dgi-cta__logo { width:120px; height:38px; flex:none; }
.dgi-cta__logo img { width:100%; height:100%; display:block; object-fit:contain; }
.dgi-cta__separator { width:1px; height:42px; flex:none; background:rgba(255,255,255,.22); }
.dgi-cta p { margin:0; }
.dgi-cta__signature { min-width:230px; color:#bdbdc5; font-size:11px; line-height:1.55; }
.dgi-cta__pitch { margin-left:auto !important; color:#fff; font-size:12px; line-height:1.45; }
.dgi-cta__pitch strong { font-family:var(--font-poppins); font-size:13px; }
.dgi-cta__pitch span { color:#a7a7b0; }
.dgi-cta a {
  flex:none; display:inline-flex; align-items:center; gap:10px; padding:13px 20px; border-radius:10px;
  color:#fff; background:var(--dgi-pink); font-family:var(--font-poppins); font-size:11px; font-weight:750; text-decoration:none;
  transition:transform .2s var(--ease),background .2s var(--ease);
}
.dgi-cta a:hover { transform:translateY(-2px); background:#e91f58; }

@media (max-width:1200px) {
  .dgi-case section { padding-inline:clamp(26px,5vw,64px); }
  .dgi-hero { grid-template-columns:minmax(0,1fr) minmax(280px,.65fr); gap:54px; min-height:650px; }
  .dgi-profile,.dgi-concept { grid-template-columns:1fr; }
  .dgi-profile__copy { max-width:760px; }
  .dgi-concept__copy { max-width:720px; }
  .dgi-instagram,.dgi-results,.dgi-behind,.dgi-making { grid-template-columns:1fr; }
  .dgi-instagram__copy,.dgi-results__copy,.dgi-behind__copy,.dgi-making__copy { max-width:720px; margin-inline:0; }
  .dgi-instagram__numbers { grid-template-columns:repeat(3,minmax(0,1fr)); max-width:620px; }
  .dgi-instagram__numbers div:last-child { grid-column:auto; }
  .dgi-results__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dgi-behind__gallery { height:auto; }
  .dgi-behind__all { grid-column:1; }
  .dgi-cta { gap:18px; }
  .dgi-cta__signature { display:none; }
}

@media (max-width:900px) {
  .ls-modal.custom-mode .ls-modal-dialog:has(.dgi-case) { width:100vw; height:100dvh; max-height:100dvh; border-radius:0; }
  .dgi-case section { padding:64px 30px; }
  .dgi-hero { grid-template-columns:1fr; gap:48px; min-height:0; }
  .dgi-hero__copy { padding:0; }
  .dgi-hero__portrait { width:min(100%,430px); justify-self:center; }
  .dgi-instagram__posts {
    grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(250px,41vw);
    overflow-x:auto; padding:2px 2px 18px; scroll-snap-type:x mandatory;
  }
  .dgi-ig-card { scroll-snap-align:start; }
  .dgi-cta { height:auto; flex-wrap:wrap; min-height:96px; padding-block:14px; }
  .dgi-cta__pitch { margin-left:0 !important; flex:1; min-width:250px; }
}

@media (max-width:640px) {
  .dgi-case section { padding:54px 20px; }
  .dgi-case h1, .dgi-case h2 { font-size:clamp(40px,12.5vw,54px); }
  .dgi-case h2:not(.case-title) { font-size:clamp(32px,9vw,44px); }
  .dgi-eyebrow { margin-bottom:16px; font-size:10px; }
  .dgi-label { margin:18px 0 28px; }
  .dgi-hero { gap:36px; }
  .dgi-hero__portrait { border-radius:18px; }
  .dgi-profile__facts { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .dgi-profile__facts > div { min-height:132px; padding:20px 14px; border-radius:14px; }
  .dgi-concept__collage { grid-template-columns:1fr; }
  .dgi-concept__main { width:100%; }
  .dgi-concept__secondary { gap:10px; }
  .dgi-concept__collage figure { border-radius:14px; }
  .dgi-concept__all-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .dgi-instagram__numbers { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 16px; margin-top:34px; }
  .dgi-instagram__numbers div:last-child { grid-column:1/-1; }
  .dgi-instagram__posts { grid-auto-columns:minmax(258px,82vw); margin-inline:-2px; }
  .dgi-results__grid { gap:10px; }
  .dgi-results__grid > div { min-height:150px; padding:22px 12px; border-radius:14px; }
  .dgi-behind__gallery { height:auto; grid-template-columns:1fr; gap:10px; }
  .dgi-behind__gallery figure { border-radius:14px; }
  .dgi-behind__all-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .dgi-making__video { border-radius:14px; }
  .dgi-cta { align-items:center; gap:10px 14px; padding:14px 18px; }
  .dgi-cta__logo { width:105px; }
  .dgi-cta__separator { display:none; }
  .dgi-cta__pitch { min-width:0; font-size:10px; }
  .dgi-cta__pitch strong { font-size:11px; }
  .dgi-cta a { width:100%; justify-content:center; padding:11px 16px; }
}

@media (max-width:420px) {
  .dgi-case section { padding-inline:18px; }
  .dgi-copy p,.dgi-instagram__copy > p,.dgi-results__copy > p,.dgi-behind__copy > p,.dgi-making__copy > p { font-size:14px; }
  .dgi-results__grid strong { font-size:24px; }
  .dgi-results__grid small { font-size:10px; }
  .dgi-cta__logo { display:none; }
}

/* Cartes Instagram devenues de vraies vidéos autoplay/muted/loop (au lieu
   de liens statiques vers Instagram) : même traitement que l'image qu'elles
   remplacent, plus un petit lien discret vers le post d'origine. */
.dgi-ig-card figure video { width:100%; height:100%; display:block; object-fit:cover; }
.dgi-ig-card__source {
  margin-left:auto; color:#7c7c83; font-size:11px; text-decoration:none; flex:none;
  transition:color .15s var(--ease);
}
.dgi-ig-card__source:hover { color:#17171b; }

/* Google Ads Cap Créole : le visuel n'est pas retouché, mais habillé
   d'un vrai cadre de bannière display (badge "Annonce" façon AdChoices,
   croix de fermeture, bandeau URL) pour qu'on comprenne que c'est une
   intégration publicitaire réelle et pas juste une image isolée. */
.ccr-ads__frame { position:relative; }
.ccr-ads__badge {
  position:absolute; z-index:1; top:10px; left:10px; display:inline-flex; align-items:center; gap:5px;
  padding:4px 9px 4px 6px; border-radius:4px; background:rgba(255,255,255,.94); color:#1a1a1a;
  font-family:var(--font-poppins); font-size:10.5px; font-weight:600; box-shadow:0 2px 8px rgba(0,0,0,.22);
}
.ccr-ads__badge svg { width:12px; height:12px; fill:#1a73e8; }
.ccr-ads__close {
  position:absolute; z-index:1; top:10px; right:10px; display:grid; place-items:center; width:22px; height:22px;
  border-radius:50%; background:rgba(255,255,255,.94); color:#1a1a1a; font-size:10px; box-shadow:0 2px 8px rgba(0,0,0,.22);
}
.ccr-ads__bar {
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 14px;
  background:#f1f3f4; color:#5f6368; font-family:var(--font-poppins); font-size:10.5px;
}
.ccr-ads__bar strong { color:#202124; font-size:11px; }

/* Galerie photo Cap Créole : rythme éditorial asymétrique (grande, deux
   moitiés inégales, grande) plutôt qu'une grille uniforme. Aucune image
   n'a de ratio forcé — width:100%/height:auto uniquement — donc rien
   n'est jamais recadré, chaque photo garde exactement son cadrage. */
.ccr-gallery { display:grid; gap:clamp(18px,2vw,30px); }
.ccr-gallery figure { margin:0; }
.ccr-gallery__wide { border-radius:20px; overflow:hidden; background:var(--ccr-sand); }
.ccr-gallery__wide img { display:block; width:100%; height:auto; }
.ccr-gallery__split { display:grid; grid-template-columns:.62fr 1fr; gap:clamp(18px,2vw,30px); align-items:start; }
.ccr-gallery__split figure { border-radius:20px; overflow:hidden; background:var(--ccr-sand); }
.ccr-gallery__split img { display:block; width:100%; height:auto; }
.ccr-gallery figcaption {
  padding:10px 14px; font-family:var(--font-poppins); font-size:11.5px; font-weight:600;
  color:var(--ccr-muted); background:#fff;
}
@media (max-width:700px) {
  .ccr-gallery__split { grid-template-columns:1fr; }
}


/* ── CTA : le visuel rejoint le bord droit sur écran large ───────────────
   Au-delà de 1700px, le conteneur centré (1400px) laissait une bande beige
   vide entre la fin du visuel et le bord du bandeau. Le visuel est sorti du
   flux de la grille et ancré sur la section, qui est pleine largeur. */
@media (min-width: 1700px) {
  .ls-project-cta__inner {
    grid-template-columns: minmax(320px, 450px) auto minmax(260px, 1fr);
  }
  .ls-project-cta__visual {
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(46vw, 900px);
    height: 100%;
    margin: 0;
  }
  .ls-project-cta__visual img {
    bottom: 0;
    height: 100%;
  }
}