/* ============================================================
   Destino World — « Le laboratoire » long-form page
   Self-contained stylesheet (tokens + layout + components).
   Loads ONLY on the laboratoire template, so the global
   html{font-size:10px} rule (1rem = 10px) is safe.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,700&family=Archivo:wght@400;500;600;700&family=Abhaya+Libre:wght@500&display=swap');

/* ── Design tokens ── */
:root {

  --dw-ink: rgb(27, 34, 40);
  --dw-black: rgb(0, 0, 0);
  --dw-white: rgb(255, 255, 255);

  --dw-grey-900: rgb(75, 75, 75);
  --dw-grey-700: rgb(119, 119, 119);
  --dw-grey-500: rgb(142, 142, 147);
  --dw-grey-300: rgb(187, 187, 187);
  --dw-grey-200: rgb(204, 204, 204);

  --dw-cream: rgb(235, 231, 231);
  --dw-stone: rgb(216, 213, 207);
  --dw-creamer: #BBBBBB;

  --dw-green: rgb(102, 194, 165);
  --dw-red: rgb(255, 0, 0);
  --dw-red-accent: rgb(255, 56, 60);
  --dw-navy: rgb(39, 61, 96);
  --dw-lavender: rgb(237, 238, 255);

  --text-heading: var(--dw-grey-900);
  --text-body: var(--dw-grey-700);
  --accent: var(--dw-red-accent);
  --shadow-card: 0 4px 5.5px rgba(0, 0, 0, 0.25);
  --overlay-dark: rgba(0, 0, 0, 0.55);

  /* --font-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-serif: "Abhaya Libre", Georgia, serif; */
}
/* 
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text-body);
  background: var(--dw-white);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
} */

img {
  max-width: 100%;
  display: block;
}

p {
  margin: 0 0 1.4em;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--dw-red-accent);
}

a:hover {
  color: var(--dw-grey-900);
}

/* ── Layout helpers ── */
.wrap {
  width: min(1600px, 90vw);
  margin-inline: auto;
}

.band {
  padding: clamp(6rem, 9vw, 14rem) 0;
}

.stacked-paragh {
  text-align: center;
}

section {
  position: relative;
}

/* ── Fluid type scale ── */
.t-display {
  font-size: clamp(3.8rem, 7.2vw, 12.8rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--text-heading);
}

.t-display.fn-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(4.6rem, 8.4vw, 13.5rem);
}

.t-h1 {
  font-size: clamp(3.2rem, 5.4vw, 9.6rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--dw-grey-900);
  max-width: 24ch;
  margin-top: 2rem;
}

.t-h2 {
  font-size: clamp(2.6rem, 3.6vw, 6.4rem);
  font-weight: 400;
  line-height: 1.08;
  color: var(--dw-grey-900);
  margin: 0;
}

.t-h3 {
  font-size: clamp(2.2rem, 2.8vw, 4.8rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--dw-grey-700);
}

.t-lead {
  font-size: clamp(1.9rem, 2.5vw, 3.6rem);
  font-weight: 500;
  line-height: 1.25;
}

.t-lead.prod-lead {
  color: var(--dw-grey-500);
  font-size: 64px;
}

.t-body {
  font-size: clamp(1.7rem, 2.05vw, 3.2rem);
  font-weight: 400;
  line-height: 1.45;
}

.red {
  color: var(--dw-red-accent);
}

/* ═══ Sections 4–6 — Organisation / Départements / Flux ═══ */
.sec46 {
  background: var(--dw-white);
}

#organisation {
  padding-top: clamp(10rem, 15vw, 22rem);
}

#departements {
  padding-top: clamp(4rem, 6vw, 8rem);
}

#flux {
  padding-top: 0;
}

.block-head {
  margin: 0 0 clamp(3rem, 4vw, 6rem);
}

.block-title {
  color: var(--dw-grey-900);
  font-weight: 700;
  font-size: clamp(2.0rem, 2.8vw, 3.0rem);
  line-height: 1.15;
  margin: 0 0 0.9rem;
}

.block-sub {
  color: var(--dw-grey-300);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.75vw, 2.4rem);
  line-height: 1.4;
  max-width: 74ch;
  margin: 0;
}

/* Section 4 — Organisation intro */
.org-title {
  font-family: Montserrat, sans-serif;
  font-weight: 400;
  color: var(--dw-grey-900);
  font-size: 60px;
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0 0 clamp(3rem, 4vw, 5.5rem);
}

.org-copy {
  display: grid;
  gap: clamp(2.6rem, 3.2vw, 4.4rem);
}

.org-copy p {
  margin: 0;
  color: var(--dw-grey-700);
  font-weight: 400;
  font-size: clamp(1.7rem, 2.0vw, 3.0rem);
  line-height: 1.45;
}

.org-copy p.lead-strong {
  color: var(--dw-grey-700);
  font-weight: 700;
}

/* Section 5 — Départements (desktop diagram) */
.dept-diagram {
  width: min(1320px, 100%);
  margin: 0 auto;
  display: block;
}

.dept-timeline {
  display: none;
}

/* Section 6 — Le flux général (desktop horizontal) */
.flux-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  column-gap: clamp(0.5rem, 0vw, 1rem);
  align-items: stretch;
}

.flux-step {
  min-width: 0;
  background: var(--dw-green);
  border-radius: clamp(1.4rem, 1.6vw, 2.2rem);
  padding: clamp(2rem, 2vw, 3rem) clamp(1.6rem, 1.6vw, 2.4rem) clamp(2.6rem, 2.6vw, 3.6rem);
  color: #fff;
  display: flex;
  flex-direction: column;
}

.flux-step .num {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.4);
  font-size: clamp(3.2rem, 3.8vw, 5.8rem);
  margin: 0 0 clamp(1.4rem, 1.6vw, 2.4rem);
}

.flux-step .st-title {
  color: var(--dw-white);
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.01em;
  font-size: clamp(1.3rem, 1.35vw, 1.4rem);
  line-height: 1.25;
  margin: 0;
  min-height: 5em;
  overflow-wrap: break-word;
  hyphens: auto;
}

.flux-step ul {
  margin: clamp(1.4rem, 1.6vw, 2.2rem) 0 0;
  padding: 0 0 0 1.7rem;
  list-style: disc;
}

.flux-step li {
  color: rgba(255, 255, 255, 0.96);
  font-size: 15px;
  line-height: 1.35;
  margin: 0 0 0.7rem;
}

.flux-step li:last-child {
  margin-bottom: 0;
}

.flux-arrow {
  flex: none;
  align-self: center;
  color: var(--dw-navy);
  font-weight: 700;
  font-size: clamp(1.8rem, 2.2vw, 3rem);
  line-height: 1;
}

.flux-rail-icons-img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: clamp(3.4rem, 4.5vw, 6rem);
}

.flux-flow-img {
  display: none;
}

/* ── Section eyebrow + title ── */
.sec-eyebrow {
  font-size: clamp(1.6rem, 1.8vw, 3.2rem);
  font-weight: 700;
  color: var(--dw-green);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 1.6rem;
}

.card-dark.prod-methodo p {
  font-size: clamp(1.5rem, 1.75vw, 2.7rem);
  margin: 0 0 3.5rem;
}

.prod-methodo .t-body {
    margin: 0 0 1rem;
}

.wrap.prod-methodo {
  gap: clamp(5rem, 8vw, 11rem);
}

.methodo-quote {
  font-style: italic;
  display: grid;
  gap: 1.8rem;
}

.gap-sm {
  gap: 2.4rem;
}

.mw-26 {
  max-width: 26ch;
}

.mw-30 {
  max-width: 30ch;
}

.prod-schema-img {
  width: 100%;
  border-radius: 1.2rem;
}

.prod-intro {
  margin-block: 3rem 6rem;
  text-align: center;
}

/* ── Rich body columns ── */
.prose {
  max-width: 46ch;
}

.prose.wide {
  max-width: 60ch;
}

/* ── Dark rounded card ── */
.card-dark {
  background: var(--dw-ink);
  color: var(--dw-cream);
  border-radius: clamp(4rem, 6vw, 10rem);
  padding: clamp(4rem, 6vw, 9rem) clamp(3.5rem, 6vw, 10rem);
  box-shadow: var(--shadow-card);
}

.card-dark p {
  color: var(--dw-cream);
  font-size: clamp(1.6rem, 2vw, 3.2rem);
  line-height: 1.5;
}

.card-dark .center,
.card-tan .center {
  margin-bottom: 4rem;
}

.card-dark .center img,
.card-tan .center img {
  width: min(560px, 70%);
  margin: 0 auto 2rem;
}

.card-propose-label {
  color: var(--dw-white);
  font-weight: 700;
  font-size: clamp(2rem, 2.6vw, 3.2rem);
  letter-spacing: 0.04em;
}

.card-tan {
  background: var(--dw-stone);
  color: var(--dw-grey-700);
  border-radius: clamp(4rem, 6vw, 10rem);
  padding: clamp(4rem, 6vw, 9rem) clamp(3.5rem, 6vw, 10rem);
  box-shadow: var(--shadow-card);
  margin-top: clamp(3rem, 4vw, 5rem);
}

.card-tan .card-propose-label {
  color: var(--dw-grey-700);
}

.card-tan p {
  color: var(--dw-grey-500);
  font-size: clamp(1.6rem, 2vw, 3.2rem);
  line-height: 1.5;
}

.card-tan p:first-child {
  margin-bottom: clamp(2rem, 2.6vw, 3.4rem);
}

/* ── Photo band section headers ── */
.photo-head {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--dw-cream);
}

.photo-head .bg {
  position: absolute;
  inset: 0;
  background-image: var(--bg-url);
  background-size: cover;
  background-position: center;
}

.photo-head h2 .w900 {
  font-weight: 900;
}

.photo-head .scrim {
  position: absolute;
  inset: 0;
  background: var(--overlay-dark);
}

.photo-head .wrap {
  position: relative;
  z-index: 2;
  padding-block: clamp(6rem, 9vw, 12rem);
}

.photo-head h2 {
  font-size: clamp(3.6rem, 6.6vw, 12.8rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  color: var(--dw-cream);
  text-shadow: var(--shadow-card);
}

.photo-head h2 .med {
  font-weight: 500;
}

.photo-head .sub {
  margin-top: 2.6rem;
  font-size: clamp(1.8rem, 2.2vw, 3.2rem);
  color: var(--dw-cream);
}

/* ── Accordions (native <details>, collapsed by default) ── */
.acc {
  border-top: 2px solid rgba(119, 119, 119, 0.35);
}

.acc[open] {
  padding-bottom: 2rem;
}

.acc>summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 1.6rem;
  padding: clamp(2rem, 2.4vw, 3.4rem) 0;
  font-size: clamp(2rem, 2.9vw, 6.4rem);
  font-weight: 400;
  color: var(--dw-grey-700);
  transition: color .18s ease;
}

.acc>summary::-webkit-details-marker {
  display: none;
}

.acc>summary::before {
  content: "▶";
  color: var(--dw-red-accent);
  font-size: 0.62em;
  transform: translateY(-0.12em);
  transition: transform .2s ease;
  flex: none;
}

.acc[open]>summary::before {
  transform: rotate(90deg) translateX(-0.08em);
}

.acc>summary:hover {
  color: var(--dw-grey-900);
}

.acc .acc-body {
  padding: 0 0 1rem 0;
}

.acc .acc-body p {
  font-size: clamp(1.7rem, 2.05vw, 3.2rem);
  line-height: 1.45;
  color: var(--dw-grey-700);
}

.acc .acc-title {
  font-size: clamp(1.7rem, 3.05vw, 5.2rem) !important;
  margin: 0 0 2.5rem;
}

.acc-title-block {
  margin: 12rem 0;
}

.acc-title-block-last {
  margin: 0 0;
}

/* Accordion on dark surfaces */
.on-dark .acc {
  border-color: rgba(216, 213, 207, 0.28);
}

.on-dark .acc>summary {
  color: var(--dw-creamer);
}

.on-dark .acc>summary:hover {
  color: var(--dw-white);
}

.on-dark .acc .acc-body p {
  color: var(--dw-creamer);
  font-size: clamp(1.7rem, 1.7vw, 3.2rem);
}

/* Section 23 — commercialisation flow */
.comm-flow {
  display: grid;
}

.comm-flow .acc.bare {
  border-top: none;
  margin-bottom: clamp(3rem, 10vw, 15rem);
  width: 92%;
  margin-left: 25px;
}

.comm-flow .acc.bare:last-child {
  margin-bottom: 0;
}

.comm-intro {
  display: grid;
  gap: clamp(1.8rem, 2.4vw, 3.4rem);
}

.comm-lead {
  color: #D8D5CF;
  max-width: none;
  margin: 0;
  line-height: 1.22;
}

/* "PLUS DE DETAILS" small toggle */
.more {
  color: var(--dw-grey-700);
  font-size: clamp(1.5rem, 1.6vw, 2.4rem);
  margin-top: 15px;
}

.more>summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  gap: 1rem;
  padding: 1.4rem 0;
}

.more>summary::-webkit-details-marker {
  display: none;
}

.more>summary::before {
  content: "▶";
  color: var(--dw-green);
  font-size: 0.8em;
  transition: transform .2s;
}

.more[open]>summary::before {
  transform: rotate(90deg);
}

.more .acc-body p {
  font-size: clamp(1.6rem, 1.9vw, 3rem);
  line-height: 1.45;
}

/* ── CSS-only smooth open/close (used when JS is off / unsupported).
   When laboratoire.js is active it sets <html class="js-accordions"> and
   drives the animation itself, so we disable the pseudo transition then. ── */
html:not(.js-accordions) .acc,
html:not(.js-accordions) .more,
html:not(.js-accordions) .peek {
  interpolate-size: allow-keywords;
}

html:not(.js-accordions) .acc::details-content,
html:not(.js-accordions) .more::details-content,
html:not(.js-accordions) .peek::details-content {
  block-size: 0;
  overflow: clip;
  opacity: 0;
  transition: block-size .42s cubic-bezier(.4, 0, .2, 1), opacity .32s ease, content-visibility .42s allow-discrete;
}

html:not(.js-accordions) .acc[open]::details-content,
html:not(.js-accordions) .more[open]::details-content,
html:not(.js-accordions) .peek[open]::details-content {
  block-size: auto;
  opacity: 1;
}

/* ═══ Section 26 — Promotion (peek accordions) ═══ */
.promo26 .promo-intro {
  text-align: center;
  margin: 0 auto clamp(5rem, 8vw, 12rem);
  display: grid;
  gap: clamp(1.6rem, 2vw, 2.6rem);
}

.promo26 .promo-intro p {
  margin: 0;
  color: var(--dw-grey-300);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.7vw, 3.0rem);
  line-height: 1.5;
}

.promo26 .promo-intro p b {
  color: var(--dw-grey-700);
  font-weight: 700;
}

.promo26 .promo-title {
  margin: 0 0 clamp(4.5rem, 7vw, 10rem);
  color: var(--dw-grey-900);
  font-weight: 700;
  font-size: clamp(3.6rem, 6.4vw, 13rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.promo26 {
  --peek-indent: clamp(3rem, 3.6vw, 5.4rem);
}

.peek-stack {
  display: grid;
  gap: clamp(5rem, 8vw, 11rem);
}

.peek {
  border: none;
}

.peek>summary {
  list-style: none;
  cursor: pointer;
  display: block;
}

.peek>summary::-webkit-details-marker {
  display: none;
}

.peek-title {
  display: flex;
  align-items: baseline;
  margin: 0 0 clamp(2rem, 2.6vw, 3.4rem);
  color: var(--dw-grey-500);
  font-weight: 400;
  font-size: clamp(2.2rem, 3vw, 4rem);
  line-height: 1.15;
  transition: color .18s ease;
}

.peek-title::before {
  content: "▶";
  flex: none;
  color: var(--dw-red-accent);
  font-size: 0.52em;
  margin-right: clamp(1.2rem, 1.4vw, 2rem);
  transform: translateY(-0.14em);
  transition: transform .22s ease;
}

.peek[open]>summary .peek-title::before {
  transform: rotate(90deg);
}

.peek>summary:hover .peek-title {
  color: var(--dw-grey-700);
}

.peek-lead {
  margin: 0 0 1.2em;
  padding-left: var(--peek-indent);
  max-width: 84ch;
  color: var(--dw-grey-500);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.85vw, 2.6rem);
  line-height: 1.55;
}

.peek-lead:last-child {
  margin-bottom: 0;
}

.peek-hero {
  margin: 0 0 clamp(1.8rem, 2.4vw, 3rem);
  padding-left: var(--peek-indent);
  color: var(--dw-grey-900);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(2.4rem, 3.4vw, 5rem);
  line-height: 1.16;
}

.peek-body {
  padding-left: var(--peek-indent);
  padding-top: clamp(1.4rem, 2vw, 2.4rem);
}

.peek-body>p {
  margin: 0 0 1.2em;
  max-width: 84ch;
  color: var(--dw-grey-500);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.85vw, 2.6rem);
  line-height: 1.55;
}

.peek-body>p:last-child {
  margin-bottom: 0;
}

.peek-body a {
  color: var(--dw-grey-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* sub-blocks revealed inside supports / outils */
.promo-sub {
  margin-top: clamp(3.4rem, 4.5vw, 6rem);
}

.promo-sub:first-child {
  margin-top: 0;
}

.promo-sub h4 {
  margin: 0 0 clamp(0.8rem, 1vw, 1.4rem);
  color: var(--dw-grey-700);
  font-weight: 400;
  font-size: clamp(1.9rem, 2.3vw, 3rem);
  line-height: 1.2;
}

.promo-sub .sub-lead {
  margin: 0 0 0.5rem;
  color: var(--dw-grey-900);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.7vw, 2.3rem);
  line-height: 1.4;
}

.promo-sub p {
  margin: 0;
  color: var(--dw-grey-500);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.7vw, 2.3rem);
  line-height: 1.55;
}

/* nested accordions inside "messages de promotion" */
.peek-body .peek {
    margin-top: clamp(1.5rem, 5vw, 2.5rem);
}

.peek-body .peek .peek-title {
  font-size: clamp(1.9rem, 2.3vw, 3rem);
  margin-bottom: 0;
}

.peek-body .peek .peek-title b,
.peek-body .peek .peek-title span {
  font-weight: 700;
  color: var(--dw-grey-700);
  margin-left: 0.3em;
}

.peek-body .peek[open]>summary .peek-title {
  margin-bottom: clamp(1.6rem, 2vw, 2.4rem);
}

.peek-body .peek .peek-body {
  padding-top: 0;
}

/* ── Grid helpers ── */
.stack {
  display: grid;
  gap: clamp(2rem, 3vw, 5rem);
}

.center {
  text-align: center;
}

/* ── Ecosystem ── */
.eco {
  position: relative;
  background: var(--dw-white);
  overflow: hidden;
}

.eco .bg-map {
  position: absolute;
  inset: 0;
  background-image: var(--bg-url);
  background-size: cover;
  background-position: center;
  opacity: 0.12;
}

.eco .wrap {
  position: relative;
  z-index: 2;
}

.eco .eco-logo {
  width: min(640px, 78vw);
  margin-block: clamp(10rem, 9vw, 18rem);
  margin-inline: auto;
}

.eco h3 {
  text-align: center;
  font-size: clamp(2.4rem, 3.4vw, 3.8rem);
  color: #4B4B4B;
  font-weight: 400;
  letter-spacing: 0.02em;
  margin: 0 0 clamp(1.5rem, 2.5vw, 3rem);
  text-transform: uppercase;
}

.eco-heading {
  font-family: var(--font-display);
  font-size: clamp(3.6rem, 7vw, 8.6rem);
  line-height: 1.08;
  margin-bottom: clamp(3rem, 5vw, 6rem);
}

.eco-heading-red {
  color: rgba(255, 0, 0, 0.74);
}

.eco-heading-grey {
  color: var(--dw-grey-500);
}

.eco-heading-sub {
  display: block;
  font-family: var(--font-sans);
  font-size: clamp(2.2rem, 3vw, 4.4rem);
  color: var(--dw-grey-500);
  font-weight: 400;
  margin-top: 0.4rem;
}

.eco-org-chart-wrap {
  position: relative;
  width: min(1320px, 100%);
  margin: 0 auto;
}

.eco-org-chart {
  width: 100%;
  display: block;
  border-radius: 1.2rem;
}

.eco-org-link {
  position: absolute;
  display: block;
  width: 33.333%;
  height: 47.5%;
  top: 52%;
}

.eco-org-link::after {
  content: "";
  position: absolute;
  inset: 2%;
  border-radius: 50%;
  opacity: 0;
  transform: scale(.85);
  background: radial-gradient(circle, rgba(102, 194, 165, 0.45) 0%, rgba(102, 194, 165, 0) 70%);
  transition: opacity .18s cubic-bezier(.23, 1, .32, 1), transform .18s cubic-bezier(.23, 1, .32, 1);
  pointer-events: none;
}

.eco-org-link:hover::after,
.eco-org-link:focus-visible::after {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .eco-org-link::after {
    transform: none;
    transition: opacity .18s ease;
  }
}

.eco-org-link--cubania {
  left: 0%;
}

.eco-org-link--caraibes {
  left: 33.333%;
}

.eco-org-link--cuba {
  left: 66.667%;
}

/* ── Operation lavender band ── */
.lavender {
  background: var(--dw-lavender);
}

/* ── Split feature (Technologie / Direction) ── */
.split-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 4vw, 6rem);
  align-items: start;
}

.split-feature.reverse .split-copy {
  order: 2;
}

.split-feature.reverse .split-media {
  order: 1;
}

.split-feature.reverse .split-copy {
  text-align: center;
  align-items: flex-end;
}

.split-feature.reverse .split-body {
  text-align: right;
}

.split-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6rem;
}

.split-title {
  font-size: clamp(2.2rem, 2.6vw, 3.6rem);
  font-weight: 400;
  color: var(--dw-grey-900);
  margin: 0;
}

.split-body {
  font-size: clamp(1.8rem, 2vw, 2.3rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--dw-grey-700);
  margin: 0;
  max-width: 42ch;
}

.split-group {
  display: grid;
  gap: clamp(6rem, 9vw, 13rem);
}

.split-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--dw-red-accent);
  color: var(--dw-white);
  font-weight: 700;
  font-size: clamp(1.3rem, 1.4vw, 1.6rem);
  padding: 1.15rem 2.4rem;
  border-radius: 999px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 2px 10px rgba(255, 56, 60, 0.25);
  transition: box-shadow .3s ease, gap .3s ease;
}

.split-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--dw-navy);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.65, 0, .35, 1);
}

.split-btn::after {
  content: "→";
  display: inline-block;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width .35s ease, opacity .25s ease .05s;
}

.split-btn:hover {
  gap: 0.9rem;
  color: var(--dw-white);
  box-shadow: 0 6px 18px rgba(39, 61, 96, 0.35);
}

.split-btn:hover::before {
  transform: scaleX(1);
}

.split-btn:hover::after {
  max-width: 1.4em;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {

  .split-btn,
  .split-btn::before,
  .split-btn::after {
    transition: none;
  }
}

.split-media {
  position: relative;
  border-radius: 1.2rem;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--dw-grey-200);
}

.split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Footer card ── */
.footer {
  background: var(--dw-white);
  padding-bottom: clamp(6rem, 9vw, 14rem);
}

.footer .card-dark img {
  width: min(560px, 66%);
  margin: 0 auto 2rem;
}

.footer .propose-label {
  text-align: center;
  color: var(--dw-white);
  font-weight: 700;
  font-size: clamp(1.7rem, 2vw, 2.6rem);
  letter-spacing: 0.12em;
  margin-bottom: clamp(3.4rem, 5vw, 6rem);
}

.footer .footer-copy {
  display: grid;
  gap: clamp(2.4rem, 3vw, 3.6rem);
}

.footer .footer-copy p {
  margin: 0;
}

/* ═══ First three sections ═══ */
.wrap-sec {
  width: min(1560px, 88vw);
  margin-inline: auto;
}

.photo-sec {
  position: relative;
  background: #121212;
  overflow: hidden;
}

.photo-sec>.bgimg {
  width: 100%;
  display: block;
}

.photo-sec .scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.photo-sec .overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
}

.photo-sec .overlay>.wrap-sec {
  width: min(1560px, 88vw);
  display: flex;
}

/* Section 1 — jars */
.jars .scrim {
  background: linear-gradient(180deg, rgba(16, 16, 16, 0.86) 0%, rgba(16, 16, 16, 0.55) 34%, rgba(16, 16, 16, 0.32) 58%, rgba(16, 16, 16, 0.50) 100%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.jars .overlay {
  align-items: flex-start;
}

.jars .overlay>.wrap-sec {
  padding-top: clamp(6rem, 10.5vw, 14rem);
}

.jars-copy h2 {
  margin: 0;
  font-family: var(--font-display);
  color: #EBE7E7;
  font-weight: 700;
  font-size: clamp(2.4rem, 3.6vw, 6.4rem);
  line-height: 1.18;
  letter-spacing: 0.002em;
}

.jars-copy .sub {
  margin: clamp(1.8rem, 2.6vw, 3.4rem) 0 0;
  color: #EBE7E7;
  font-weight: 400;
  font-size: clamp(1.6rem, 1.95vw, 3.4rem);
  line-height: 1.5;
}

.jars-copy .sub b {
  color: #ffffff;
  font-weight: 600;
}

/* Section 2 — white manifesto */
.manifesto {
  background: var(--dw-white);
  padding: clamp(7rem, 11vw, 16rem) 0;
}

.manifesto .big {
  margin: 0 0 clamp(5rem, 7.5vw, 10rem);
  color: #4B4B4B;
  font-weight: 700;
  font-family: Archivo, sans-serif;
  font-size: clamp(4rem, 7.2vw, 12rem);
  line-height: 1.12;
  letter-spacing: -0.005em;
}

.manifesto .m1 {
  margin: 0 0 clamp(4rem, 6vw, 7.5rem);
  color: #777777;
  font-weight: 600;
  font-family: Archivo, sans-serif;
  font-size: clamp(2.4rem, 3.5vw, 6.4rem);
  line-height: 1.28;
}

.manifesto .m2 {
  margin: 0 0 clamp(5.5rem, 8vw, 11rem);
  color: #bdbdbd;
  font-weight: 700;
  font-size: 42px;
  line-height: 1.32;
}

.manifesto .m3 {
  margin: 0;
  color: #777777;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.0vw, 3.2rem);
  line-height: 1.5;
}

/* Section 3 — flag/boat */
.flag .scrim {
  background: linear-gradient(270deg, rgba(10, 10, 10, 0.72) 0%, rgba(10, 10, 10, 0.42) 42%, rgba(10, 10, 10, 0.08) 100%);
}

.flag .overlay {
  align-items: center;
}

.flag .overlay>.wrap-sec {
  justify-content: flex-end;
  padding-block: clamp(3rem, 5vw, 6rem);
}

.flag-copy {
  text-align: right;
  max-width: 82rem;
  margin-left: auto;
}

.flag-copy p {
  margin: 0 0 clamp(2.2rem, 3vw, 3.4rem);
  color: #ffffff;
  font-weight: 700;
  font-size: clamp(1.5rem, 1.82vw, 2.9rem);
  line-height: 1.45;
}

.flag-copy p:last-child {
  margin-bottom: 0;
}

.flag-copy p.bold {
  font-weight: 700;
}

.strong-prose {
  color: var(--dw-grey-900);
}

/* ── Migrated inline styles: one-off classes + small utilities ── */
.pt-0 {
  padding-top: 0;
}

.gap-10r {
  gap: 10rem;
}

.t-body.prose.wide {
  margin-inline: auto;
}

.order-steps .t-body.prose.wide {
  text-align: left;
}

.mt-5r {
  margin-top: 5rem;
}

.mw-34 {
  max-width: 34ch;
}

.fn-lead {
  font-weight: 400;
  color: var(--dw-grey-700);
  font-size: clamp(2.3rem, 3.3vw, 4.3rem);
  line-height: 1.3;
  margin: 0;
}

.hl {
  color: var(--dw-grey-700);
}

.callout-italic {
  font-style: italic;
  font-weight: 700;
  color: var(--dw-stone);
}

.op-diagram-img {
  width: min(1520px, 94vw);
  margin: clamp(3rem, 5vw, 7rem) auto 0;
  display: block;
}

.op-intro {
  font-size: clamp(1.5rem, 1.8vw, 2.6rem);
}

section.band.on-dark {
  background: var(--dw-ink);
  color: var(--dw-cream);
}

/* Lavender band ("le rythme et la cohérence") */
.wrap-lavender {
  max-width: min(1100px, 88vw);
  margin-inline: auto;
}

.lav-p {
  color: var(--dw-grey-500);
  padding-left: clamp(1.4rem, 3vw, 4rem);
  margin: 0;
  font-size: clamp(1.5rem, 1.85vw, 2.8rem);
}

.lav-p.navy {
  color: var(--dw-navy);
}

.lav-h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--dw-navy);
  font-size: clamp(3rem, 4.4vw, 6.4rem);
  line-height: 1;
  padding-left: clamp(1.4rem, 3vw, 4rem);
}

.lav-h3.first {
  margin: clamp(3.5rem, 5vw, 6rem) 0 clamp(1.8rem, 2.4vw, 3rem);
}

.lav-h3.second {
  margin: clamp(5rem, 7vw, 9rem) 0 clamp(1.8rem, 2.4vw, 3rem);
}

/* "L'ordre des trois fonctions" section */
.wrap-order {
  max-width: min(1180px, 90vw);
  margin-inline: auto;
}

.order-title {
  font-weight: 600;
  color: var(--dw-grey-900);
  font-size: clamp(3rem, 4.4vw, 6rem);
  line-height: 1.16;
  letter-spacing: -0.005em;
  margin: 0 0 clamp(2.6rem, 3.4vw, 4.4rem);
}

.order-sub {
  font-weight: 600;
  color: var(--dw-grey-500);
  max-width: 52ch;
  margin: 0 0 clamp(1.8rem, 2vw, 2.6rem);
}

.order-sub.last {
  margin: 0;
}

.order-steps {
  display: grid;
  gap: clamp(4.5rem, 6.5vw, 8.5rem);
  margin-top: clamp(5.5rem, 8vw, 10rem);
}

.order-h4 {
  font-weight: 400;
  color: var(--dw-grey-700);
  font-size: clamp(2rem, 2.5vw, 3.6rem);
  line-height: 1.2;
  margin: 0 0 clamp(1.8rem, 2vw, 2.6rem);
}

.order-body {
  color: var(--dw-grey-500);
  margin: 0;
}

.sec-eyebrow.navy {
  color: var(--dw-navy);
}

/* ── Scroll reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s cubic-bezier(0.215, 0.610, 0.355, 1.000),
    transform 1s cubic-bezier(0.215, 0.610, 0.355, 1.000);
  will-change: transform, opacity;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   RESPONSIVE — no toca la vista de escritorio (PC).
   Todas las reglas de tablet / móvil / móvil pequeño viven aquí.
   ============================================================ */

/* ── Tablet (≤1024px) ── */
@media (max-width: 1024px) {
  /* Section 1 — jars heading */
  .jars-copy h2 {
    font-size: clamp(3.2rem, 4.5vw, 5.4rem);
  }

  /* Section 2 — manifesto m2 */
  .manifesto .m2 {
    font-size: clamp(2.4rem, 3.4vw, 3.2rem);
  }

  /* "Les fonctions du réceptif" — menos espacio entre párrafos */
  .gap-10r {
    gap: 3rem;
  }

  /* Section 3 — flag copy */
  .flag-copy {
    max-width: 60%;
  }

  /* Section 5 — dept diagram → timeline */
  .dept-diagram {
    display: none;
  }

  .dept-timeline {
    display: block;
    position: relative;
    padding-left: 3.4rem;
  }

  .dept-timeline::before {
    content: "";
    position: absolute;
    left: 0.6rem;
    top: 1.4rem;
    bottom: 1.4rem;
    width: 2px;
    background: var(--dw-ink);
  }

  .dept-item {
    position: relative;
    margin-bottom: 2rem;
  }

  .dept-item:last-child {
    margin-bottom: 0;
  }

  .dept-item::before {
    content: "";
    position: absolute;
    left: -3.35rem;
    top: 2rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--dw-red);
    box-shadow: 0 0 0 4px var(--dw-white);
  }

  .dept-card {
    background: #f2f2f2;
    border-radius: 1.6rem;
    padding: 2rem 2.2rem;
  }

  .dept-card .ch {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.4rem 1.4rem;
  }

  .dept-card .cname {
    color: var(--dw-grey-900);
    font-weight: 700;
    font-size: 1.9rem;
    letter-spacing: 0.01em;
  }

  .dept-card .resp {
    color: var(--dw-grey-500);
    font-weight: 500;
    font-size: 1.5rem;
  }

  .dept-card .meta {
    color: var(--dw-grey-500);
    font-size: 1.5rem;
    line-height: 1.45;
    margin: 0.7rem 0 0;
  }

  .dept-card ul {
    margin: 1.2rem 0 0;
    padding-left: 1.8rem;
  }

  .dept-card li {
    color: var(--dw-grey-700);
    font-size: 1.5rem;
    line-height: 1.35;
    margin-bottom: 0.4rem;
  }

  .dept-card.direction {
    background: var(--dw-ink);
    padding: 2.6rem 2.4rem;
    display: flex;
    align-items: center;
    gap: 2rem;
  }

  .dept-card.direction .dot {
    flex: none;
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 50%;
    background: var(--dw-red);
  }

  .dept-card.direction .cname {
    color: var(--dw-white);
    font-size: 2.4rem;
  }

  .dept-card.direction .meta {
    color: var(--dw-stone);
    margin-top: 0.6rem;
  }

  /* Section 6 — flux-flow: reemplazado por imagen única */
  .flux-flow,
  .flux-rail-icons-img {
    display: none;
  }

  .flux-flow-img {
    display: block;
    width: 100%;
    height: auto;
  }

  .flux-step {
    background: var(--dw-ink);
    border-radius: 1.8rem;
    padding: 2.2rem 2.4rem;
    flex-direction: row;
    align-items: flex-start;
    gap: 1.8rem;
  }

  .flux-step .num {
    color: rgba(255, 255, 255, 0.24);
    font-size: 4.6rem;
    margin: 0;
    flex: none;
  }

  .flux-step .st-body {
    flex: 1;
  }

  .flux-step .st-title {
    min-height: 0;
    color: var(--dw-white);
    width: 100%;
    text-align: left;
  }

  .flux-step ul {
    margin-top: 1.2rem;
  }

  .flux-arrow {
    align-self: flex-start;
    margin: 0 0 0 2.4rem;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    background: var(--dw-red);
    color: var(--dw-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    transform: rotate(90deg);
  }

  .flux-rail-icons-img {
    margin-top: clamp(3rem, 5vw, 5rem);
  }

  /* Split feature (Technologie / Direction) */
  .split-feature {
    grid-template-columns: 1fr;
  }

  .split-title {
    font-size: clamp(3rem, 4vw, 4.4rem);
  }

  .split-feature.reverse .split-copy {
    order: 1;
  }

  .split-feature.reverse .split-media {
    order: 2;
  }

  .split-copy,
  .split-feature.reverse .split-copy {
    align-items: flex-start;
    text-align: left;
  }

  .split-body,
  .split-feature.reverse .split-body {
    max-width: none;
    text-align: left;
  }

  /* Photo head banners (Production, Administration, Opération…) */
  .photo-head {
    min-height: 60vh;
  }

  .photo-head h2 {
    font-size: clamp(4.4rem, 8vw, 8rem);
  }

  .photo-head .sub {
    font-size: clamp(2rem, 2.4vw, 3.4rem);
  }
}

/* ── Móvil (≤767px) ── */
@media (max-width: 767px) {

  .jars-copy h2 br,
  .manifesto .big br,
  .manifesto .m1 br,
  .manifesto .m2 br,
  .manifesto .m3 br,
  .jars-copy .sub br {
    display: none;
  }

  /* Section 1 — jars: más alto, texto más pequeño y centrado verticalmente en móvil */
  .jars .bgimg {
    min-height: 65vh;
    object-fit: cover;
  }

  .jars .overlay {
    align-items: center;
  }

  .jars .overlay > .wrap-sec {
    padding-top: 0;
  }

  .jars-copy h2 {
    font-size: clamp(2.4rem, 7.2vw, 3.4rem);
  }

  .jars-copy .sub {
    font-size: clamp(1.5rem, 3.6vw, 1.9rem);
  }

  .flag-copy {
    max-width: 100%;
  }

  .flag .scrim {
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.5), rgba(10, 10, 10, 0.75));
  }

  /* Section 3 — flag: más alto, mostrando el lado izquierdo (bandera), texto más pequeño */
  .flag .bgimg {
    min-height: 60vh;
    object-fit: cover;
    object-position: left center;
  }

  .flag-copy p {
    font-size: clamp(1.1rem, 3.4vw, 1.4rem);
  }

  /* Section 4 — Organisation title */
  .org-title {
    font-size: clamp(2.6rem, 8vw, 3.4rem);
  }

  /* "Les fonctions du réceptif" */
  .t-display.fn-title {
    font-size: clamp(3.8rem, 8vw, 4.8rem);
  }

  /* "La Production" — mismo tamaño y estilo que el t-h1 anterior */
  .t-lead.prod-lead {
    font-size: clamp(4.5rem, 5.4vw, 9.6rem);
  }

  /* "Commercialisation," — 1px menos que el h2 de photo-head */
  #commercialisation .w900 {
    font-size: clamp(3.9rem, 7vw, 8rem);
  }

  /* "la vente directe et indirecte" */
  #commercialisation .med {
    font-size: clamp(3.9rem, 7vw, 8rem);
  }

  /* "Les canaux de distributeurs" — menos espacio entre acc-title-block */
  .acc-title-block {
    margin: 4rem 0;
  }

  /* Títulos "La vente en direct (B2C)"... más grandes, solo en esta sección */
  .acc-title-block .acc-title {
    font-size: clamp(2.2rem, 6vw, 3rem) !important;
  }

  /* Carousel "Réflexions..." — base definida en methodologie.css, laboratoire.css
     carga después así que gana sin necesitar !important */
  .carousel-title {
    font-size: clamp(3.4rem, 6vw, 4.6rem);
  }

  /* "Le message de la position commercial(e)" / "...philosophie" — el .peek-title
     es flex sin wrap, así que el <span> en negrita se apretaba a su lado en vez
     de fluir como texto normal */
  .peek-body .peek .peek-title {
    flex-wrap: wrap;
  }

}

/* ── Móvil pequeño (<380px) ── */
@media (max-width: 380px) {
  /* Section 1 — jars: ocupa toda la pantalla */
  .jars .bgimg {
    min-height: 90vh;
  }

  /* Section 3 — flag: menos de 90vh en el breakpoint de 767px, se sube a 90vh; texto más pequeño */
  .flag .bgimg {
    min-height: 90vh;
  }

  .flag-copy p {
    font-size: clamp(1.1rem, 3.5vw, 1.2rem);
  }

  /* "Commercialisation," / "la vente directe et indirecte" — misma relación de
     reducción que se usó de <1024 a <768 (-0.5rem min, -1vw preferred) */
  #commercialisation .w900,
  #commercialisation .med {
    font-size: clamp(3.4rem, 6vw, 8rem);
  }

  /* Photo-head banners (Production, Administration, Opération, Commercialisation, Promotion) */
  .photo-head {
    min-height: 90vh;
  }

  /* Commercialisation — comm-lead: 2px menos que el t-h3 base */
  .comm-lead {
    font-size: clamp(2rem, 2.8vw, 4.6rem);
  }

  /* Carousel "Réflexions..." — un poco menos que en <768 */
  .carousel-title {
    font-size: clamp(2.5rem, 4.5vw, 4rem) ip !important;
  }
}