/* =========================================================================
   1. DESIGN TOKENS
   Source: docs/BUILD_SPEC.md §1 — colors sampled from client mockups.
   Treat as a strong starting point; supersede with official brand guide
   if/when the client provides one.
   ========================================================================= */
:root {
  /* Greens */
  --sipsa-green-dark: #0b4521;      /* deep forest green — banners, footer bg, header nav text */
  --sipsa-green-primary: #7cb443;   /* leaf green — card titles, accents (unchanged, = maquette #76ae3d) */
  --sipsa-green-light: #9ccb3b;     /* maquette eyebrows, category labels, carousel arrows */
  --sipsa-green-secondary: #2e705d; /* muted teal-green — stat labels, secondary text accents */

  /* Gold / amber */
  --sipsa-gold: #fbd135;            /* gold/yellow pill buttons (maquette) */
  --sipsa-gold-dark: #e9bd1c;       /* gold hover state */

  /* Neutrals */
  --sipsa-cream: #f4f7ee;           /* cream bands and cards (maquette) */
  --sipsa-green-btn: #226f38;       /* filled green pills + text on gold (maquette) */
  --sipsa-green-deep: #00592d;      /* dark band gradient start (maquette) */
  --sipsa-green-bright: #09954c;    /* dark band gradient end (maquette) */
  --sipsa-green-text: #026533;      /* green figures/headlines on white (maquette) */
  --band-dark: linear-gradient(100deg, var(--sipsa-green-deep) 0%, #03703a 45%, var(--sipsa-green-bright) 100%);
  --font-arabic: 'Cairo', 'Poppins', sans-serif;
  --sipsa-white: #ffffff;
  --sipsa-ink: #1f2421;             /* body text */

  /* Section banding. --band-tint carries a little more chroma than
     --sipsa-cream: as a full-width background the flat cream read as dull
     next to white, while cards in --sipsa-cream still need to stay quiet.
     --ink-green replaces a neutral #0d0d0d that sat off-palette against
     the greens. (Client feedback 2026-09-21: section transitions.) */
  --band-tint: #ecf2e0;
  --ink-green: #08180e;

  /* Bayadère stripe (decorative divider) — red/white not in the spec's
     token list; sampled approximations from 00-bandeau-bayadere-stripe.png */
  --bayadere-red: #c1272d;
  --bayadere-white: #ffffff;

  /* Sector colors (§5 écosystème mosaic) — not in the spec's token list;
     approximated from 04-ecosysteme-salon-reference.png */
  --sector-blue: #206ba9;
  --sector-orange: #fc6003;

  /* Typography */
  --font-heading: 'Poppins', 'Montserrat', sans-serif;
  --font-body: 'Inter', 'Work Sans', sans-serif;

  /* Fluid type scale */
  --fs-h1: clamp(2rem, 1.4rem + 2.5vw, 3.5rem);
  --fs-h2: clamp(1.6rem, 1.3rem + 1.3vw, 2.5rem);
  --fs-h3: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8rem;

  /* Spacing scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* Radii / shadows / motion */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(11, 69, 33, 0.08);
  --shadow-md: 0 8px 24px rgba(11, 69, 33, 0.12);
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* Layout */
  --container-max: 1360px;
  --container-pad: clamp(1rem, 2vw, 2rem);
  --header-height: 88px;
  --bandeau-height: 8px;
}

/* =========================================================================
   BASE / RESET
   ========================================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* "light dark" (not just "light") tells Chromium this page has its own
     opinion on color scheme, which disables its auto/forced-dark repaint —
     a system-level feature (Settings > Appearance > "Auto dark mode for
     web contents" on Windows Chrome, tied to the OS dark theme) that
     otherwise inverts light-background/dark-text pages wholesale, without
     it showing up in getComputedStyle. "light" alone does not disable it,
     since a light-only page is exactly what the feature targets. */
  color-scheme: light dark;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--bandeau-height) + 12px);
  background: var(--sipsa-white);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--sipsa-ink);
  background: var(--sipsa-white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

/* Consistent, on-brand keyboard-focus indicator across every interactive
   element (buttons, links, form controls) instead of relying on each
   browser's inconsistent default outline. Only shows for keyboard
   navigation (:focus-visible), not mouse clicks. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--sipsa-green-primary);
  outline-offset: 2px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  margin: 0;
  line-height: 1.15;
}

p {
  margin: 0;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Reusable buttons (used across the header CTAs, hero, accès rapide, etc.) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.75em 1.4em;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--sipsa-green-primary);
  color: var(--sipsa-white);
}

.btn-primary:hover {
  background: var(--sipsa-green-dark);
}

.btn-gold {
  background: var(--sipsa-gold);
  color: var(--sipsa-ink);
}

.btn-gold:hover {
  background: var(--sipsa-gold-dark);
}

.btn-outline-gold {
  background: transparent;
  color: var(--sipsa-ink);
  border-color: var(--sipsa-gold-dark);
}

.btn-outline-gold:hover {
  background: var(--sipsa-gold);
}

.btn-outline-green {
  background: transparent;
  color: var(--sipsa-green-dark);
  border-color: var(--sipsa-green-primary);
}

.btn-outline-green:hover {
  background: var(--sipsa-green-primary);
  color: var(--sipsa-white);
}

/* =========================================================================
   2. GLOBAL ELEMENTS
   ========================================================================= */

/* 2.1 Bandeau bayadère — decorative dash stripe, built in pure CSS
   (repeating-linear-gradient) rather than shipping the reference image. */
.bandeau-bayadere {
  height: var(--bandeau-height);
  width: 100%;
  background-image: repeating-linear-gradient(
    90deg,
    var(--sipsa-green-dark) 0 14px,
    transparent 14px 18px,
    var(--sipsa-gold) 18px 32px,
    transparent 32px 36px,
    var(--bayadere-red) 36px 50px,
    transparent 50px 54px,
    var(--bayadere-white) 54px 68px,
    transparent 68px 72px
  );
  background-color: var(--sipsa-cream);
  background-repeat: repeat-x;
}

/* 2.2 Header / navigation */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--sipsa-white);
  box-shadow: var(--shadow-sm);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: var(--header-height);
  padding-block: var(--space-2xs);
}

.site-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.site-logo img {
  height: 56px;
  width: auto;
}

.main-nav {
  flex: 1;
  min-width: 0;
}

.main-nav > ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
}

.main-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-weight: 600;
  font-size: 0.88rem;
  white-space: nowrap;
  color: var(--sipsa-green-dark);
  padding: var(--space-3xs) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.main-nav a:hover,
.main-nav a:focus-visible {
  color: var(--sipsa-green-primary);
  border-bottom-color: var(--sipsa-green-primary);
}

.main-nav .nav-home a {
  padding: var(--space-3xs);
}

.main-nav .nav-home svg {
  width: 18px;
  height: 18px;
}

.main-nav .caret {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}

.header-ctas {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  flex-shrink: 0;
}

.header-ctas .btn {
  font-size: 0.78rem;
  padding: 0.7em 1.1em;
}

.header-ctas .btn svg {
  width: 16px;
  height: 16px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--sipsa-green-dark);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 960px) {
  .main-nav {
    order: 3;
    flex-basis: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-base);
  }

  .main-nav.is-open {
    max-height: 480px;
  }

  .main-nav > ul {
    flex-direction: column;
    align-items: flex-start;
    padding-block: var(--space-sm);
    gap: var(--space-sm);
  }

  .nav-toggle {
    display: flex;
  }

  .header-ctas .btn span.btn-label {
    display: none;
  }

  .header-ctas .btn {
    padding: 0.7em;
    border-radius: 50%;
  }
}

@media (max-width: 560px) {
  .site-logo img {
    height: 44px;
  }
}

/* =========================================================================
   V3 — shared pieces
   ========================================================================= */
.ui-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Filled pills from the maquette: green with white text, gold with green
   text (spec §2.1: text on yellow is green). */
.btn-green {
  background: var(--sipsa-green-btn);
  color: var(--sipsa-white);
}

.btn-green:hover {
  background: var(--sipsa-green-deep);
}

.btn-gold {
  color: var(--sipsa-green-btn);
}

.btn svg {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
}

/* Client's bayadère artwork, tiled along the top of the page. */
.bandeau-bayadere {
  background: url('../assets/images/v3-01-hero/bayadere.svg') repeat-x left center / auto 100%;
  height: 16px;
}

.main-nav svg,
.nav-home svg {
  display: block;
}

.site-logo img {
  height: 64px;
}

.nav-ctas {
  display: none;
}

.main-nav .nav-ctas a {
  border-bottom: 0;
  color: inherit;
}

.main-nav .nav-ctas .btn-green { color: var(--sipsa-white); }
.main-nav .nav-ctas .btn-gold  { color: var(--sipsa-green-btn); }

@media (max-width: 640px) {
  .header-inner {
    flex-wrap: wrap;
  }

  .header-ctas {
    display: none;
  }

  .nav-toggle {
    margin-left: auto;
  }

  .main-nav .nav-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    padding-top: var(--space-2xs);
  }
}

@media (max-width: 560px) {
  .site-logo img {
    height: 46px;
  }
}

/* =========================================================================
   1. HERO — spec §4.1
   Everything on the stage is placed in the maquette's own coordinates:
   the stage is 1921 × 1243 (maquette px, header excluded), and every
   left/top/width below is that element's maquette position over those
   totals. Type inside the stage scales with it through cqw units.
   ========================================================================= */
.hero {
  position: relative;
  container-type: inline-size;
  background: var(--sipsa-white);
}

.hero-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1921 / 1243;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(1080 / 1243 * 100%);
  overflow: hidden;
  background: var(--sipsa-green-deep);
}

.hero-video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-band {
  position: absolute;
  left: 0;
  top: calc(933 / 1243 * 100%);
  width: 100%;
  height: calc(310 / 1243 * 100%);
  z-index: 2;
}

.hero-band-flat {
  display: none;
}

.hero-art {
  position: absolute;
  z-index: 4;
  height: auto;
  overflow: visible;
  pointer-events: none;
}

.hero-art--frame-left {
  left: 0;
  top: calc(443 / 1243 * 100%);
  width: calc(789 / 1921 * 100%);
}

/* Lower than its maquette spot (-17 / 1243), at the client's request: the
   blade tips clear the stage's top edge and the hill comes down onto the band. */
.hero-art--frame-right {
  left: calc(1167 / 1921 * 100%);
  top: calc(80 / 1282 * 100%);
  width: calc(803 / 1921 * 100%);
}

/* The tractor sits on the band's top edge, between the two frames. Its
   track spans the stage; the frames (drawn above it) hide it at the edges,
   so it drives out behind one hill and back in behind the other. */
.hero-tractor-track {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.hero-art--tractor {
  left: calc(800 / 1921 * 100%);
  top: calc(833 / 1243 * 100%);
  width: calc(268 / 1921 * 100%);
  z-index: auto;
}

/* Neutral play button in the site's colours — not YouTube's. */
.hero-play {
  position: absolute;
  z-index: 5;
  left: calc(965 / 1921 * 100%);
  top: calc(496 / 1243 * 100%);
  width: max(48px, 4.6cqw);
  aspect-ratio: 1;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--sipsa-green-btn);
  box-shadow: 0 0 0 0.55cqw rgba(255, 255, 255, 0.35), 0 8px 22px rgba(0, 0, 0, 0.28);
  transition: transform var(--transition-base), background-color var(--transition-fast), box-shadow var(--transition-base);
}

.hero-play svg {
  width: 56%;
  height: 56%;
  margin-left: 8%; /* optical centre of the triangle */
}

.hero-play:hover,
.hero-play:focus-visible {
  transform: scale(1.08);
  background: var(--sipsa-white);
  box-shadow: 0 0 0 0.9cqw rgba(255, 255, 255, 0.4), 0 10px 26px rgba(0, 0, 0, 0.3);
}

/* Title bands. Desktop: laid over the stage at maquette positions. */
.hero-topband {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(76 / 1921 * 100cqw);
  display: grid;
  align-content: center;
  justify-items: center;
  color: var(--sipsa-white);
  background: linear-gradient(90deg, var(--sipsa-green-deep) 0%, var(--sipsa-green-deep) 62%, rgba(0, 89, 45, 0.55) 76%, rgba(0, 89, 45, 0) 86%);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.54cqw;
  line-height: 1.2;
  text-align: center;
}

.hero-topband h1 {
  font: inherit;
  text-transform: uppercase;
}

.hero-topband p span:first-child {
  text-transform: uppercase;
}

.hero-topband p {
  display: flex;
  gap: 3.5cqw;
}

.hero-bandtext {
  position: absolute;
  z-index: 5;
  left: 0;
  width: 100%;
  top: calc(975 / 1921 * 100cqw);
  color: var(--sipsa-white);
  font-family: var(--font-arabic);
  font-weight: 700;
  text-align: center;
}

.hero-ar-title {
  font-size: 1.86cqw;
  line-height: 1.45;
}

.hero-ar-meta {
  display: flex;
  justify-content: center;
  gap: 4.5cqw;
  margin-top: 1.5cqw;
  font-size: 1.58cqw;
}

.hero-ar-meta span:first-child {
  font-size: 1.1em;
}

/* Recherche avancée — a discreet button, not the old overlay panel. */
.hero-search-wrap {
  position: absolute;
  z-index: 6;
  left: 1.6cqw;
  top: calc(96 / 1921 * 100cqw);
  max-width: min(560px, 60%);
}

.hero-search-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.55em 1.1em;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.88);
  color: var(--sipsa-green-btn);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.8rem;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(4px);
  transition: background-color var(--transition-fast);
}

.hero-search-toggle:hover {
  background: var(--sipsa-white);
}

.hero-search-toggle svg {
  width: 16px;
  height: 16px;
}

.hero-search {
  margin-top: var(--space-2xs);
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-md);
}

.hero-search[hidden] {
  display: none;
}

.hero-search-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
  margin-bottom: var(--space-xs);
}

.hero-tab {
  padding: 0.35em 0.9em;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--sipsa-green-btn);
  background: var(--sipsa-cream);
}

.hero-tab.is-active {
  background: var(--sipsa-green-btn);
  color: var(--sipsa-white);
}

.hero-search-row {
  display: flex;
  gap: var(--space-2xs);
}

.hero-search-row input,
.hero-search-row select {
  min-width: 0;
  font: inherit;
  font-size: 0.85rem;
  padding: 0.55em 0.8em;
  border: 1px solid #d5dccb;
  border-radius: var(--radius-sm);
  background: var(--sipsa-white);
  color: var(--sipsa-ink);
}

.hero-search-row input {
  flex: 1;
}

.hero-search-submit {
  display: grid;
  place-items: center;
  width: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--sipsa-green-btn);
  color: var(--sipsa-white);
}

.hero-search-submit svg {
  width: 18px;
  height: 18px;
}

/* ---- Hero animation (spec §4.1) -------------------------------------
   Discreet by brief: a degree or two of rotation, a pixel of travel.
   Every figure pivots on its own feet (origins are in the SVG's user
   units, via transform-box: view-box), so the ground never moves. */
.hero-art [class*="ha-"] {
  transform-box: view-box;
}

.ha-farmer { transform-origin: 262px 381px; animation: ha-farmer 6.5s ease-in-out infinite; }
.ha-hen    { transform-origin: 301px 398px; animation: ha-peck 5.2s ease-in-out infinite 1.3s; }
.ha-goat   { transform-origin: 36px 419px;  animation: ha-graze 7.5s ease-in-out infinite; }
.ha-goose  { transform-origin: 285px 499px; animation: ha-sway 4.6s ease-in-out infinite 0.8s; }
.ha-fish   { animation: ha-swim 4.2s ease-in-out infinite; }
.ha-fish--1 { transform-origin: 383px 549px; }
.ha-fish--2 { transform-origin: 353px 572px; animation-delay: -1.4s; animation-duration: 4.8s; }
.ha-fish--3 { transform-origin: 447px 578px; animation-delay: -2.6s; animation-duration: 3.9s; }
.ha-ripple { transform-origin: 391px 610px; animation: ha-ripple 4.2s ease-in-out infinite; }

.ha-cowhead { transform-origin: 652px 707px; animation: ha-nod 6.8s ease-in-out infinite 0.5s; }
.ha-sheep   { transform-origin: 419px 738px; animation: ha-breathe 3.6s ease-in-out infinite; }
.ha-rabbit  { transform-origin: 530px 735px; animation: ha-twitch 7s ease-in-out infinite 2s; }
.ha-turkey  { transform-origin: 492px 800px; animation: ha-sway 5.4s ease-in-out infinite 1.7s; }
.ha-palm    { transform-origin: 709px 792px; animation: ha-palm 8s ease-in-out infinite; }

.hero-art--tractor {
  animation: ha-drive 64s linear infinite;
  animation-delay: -32s; /* page opens with the tractor in its maquette spot */
}

/* Wheels spin on their own hub: fill-box, and specific enough to beat the
   view-box rule above. */
.hero-art .ha-wheel { transform-box: fill-box; transform-origin: center; animation: ha-spin linear infinite; }
.hero-art .ha-wheel--rear  { animation-duration: 5.5s; }
.hero-art .ha-wheel--front { animation-duration: 3s; }

@keyframes ha-farmer {
  0%, 100% { transform: rotate(0deg); }
  45%      { transform: rotate(-1.6deg); }
  60%      { transform: rotate(-1.2deg); }
}

@keyframes ha-peck {
  0%, 62%, 100% { transform: rotate(0deg); }
  68%           { transform: rotate(9deg); }
  73%           { transform: rotate(1deg); }
  78%           { transform: rotate(8deg); }
  84%           { transform: rotate(0deg); }
}

@keyframes ha-graze {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(1.3deg); }
}

@keyframes ha-sway {
  0%, 100% { transform: rotate(-1.4deg); }
  50%      { transform: rotate(1.4deg); }
}

@keyframes ha-swim {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  30%      { transform: translateX(-3px) rotate(-2.5deg); }
  65%      { transform: translateX(3px) rotate(2deg); }
}

@keyframes ha-ripple {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.04); opacity: 0.8; }
}

@keyframes ha-nod {
  0%, 55%, 100% { transform: rotate(0deg); }
  70%           { transform: rotate(4deg); }
  85%           { transform: rotate(3deg); }
}

@keyframes ha-breathe {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.025); }
}

@keyframes ha-twitch {
  0%, 80%, 100% { transform: rotate(0deg); }
  83%           { transform: rotate(-3deg); }
  86%           { transform: rotate(0deg); }
  89%           { transform: rotate(-2deg); }
  92%           { transform: rotate(0deg); }
}

@keyframes ha-palm {
  0%, 100% { transform: rotate(-0.7deg); }
  50%      { transform: rotate(0.8deg); }
}

@keyframes ha-drive {
  from { transform: translateX(calc(-60cqw)); }
  to   { transform: translateX(calc(60cqw)); }
}

@keyframes ha-spin {
  to { transform: rotate(360deg); }
}

/* ---- Hero, narrow screens --------------------------------------------
   The stage keeps its composition; the two title bands leave it and
   stack above/below at readable sizes. */
@media (max-width: 760px) {
  .hero {
    display: flex;
    flex-direction: column;
  }

  .hero-topband {
    position: static;
    order: -1;
    height: auto;
    justify-items: stretch;
    padding: 0.7rem var(--container-pad);
    background: var(--sipsa-green-deep);
    font-size: 0.72rem;
    gap: 0.25rem;
  }

  .hero-topband p {
    flex-direction: column;
    gap: 0.1rem;
    font-size: 0.68rem;
    font-weight: 500;
  }

  .hero-band-arc { display: none; }
  .hero-band-flat { display: inline; }

  .hero-bandtext {
    position: static;
    margin-top: -1px;
    padding: 0.4rem var(--container-pad) 2.4rem;
    background: linear-gradient(90deg, #036e38, #088d48);
    border-radius: 0 0 50% 50% / 0 0 1.6rem 1.6rem;
  }

  .hero-ar-title { font-size: 1.15rem; }

  .hero-ar-meta {
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0.6rem;
    font-size: 0.9rem;
  }

  .hero-play { width: 44px; }

  .hero-search-wrap {
    top: 0.6rem;
    left: 0.6rem;
    max-width: calc(100% - 1.2rem);
  }

  .hero-search-toggle { font-size: 0.72rem; }
}

/* =========================================================================
   2. ACCÈS RAPIDE — spec §4.2
   Maquette geometry at 1921px: four 365 × 470 cards, 31px gutters, the
   pair of pills centred below. Type sizes are the 14 Sept ones (§2.1).
   ========================================================================= */
.acces {
  background: var(--sipsa-white);
  padding: var(--space-lg) var(--container-pad) var(--space-xl);
}

.acces-inner {
  max-width: 1550px;
  margin-inline: auto;
}

.acces-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 1.6vw, 31px);
}

.acces-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  min-height: 470px;
  padding: 1.2rem clamp(1.25rem, 2.9vw, 3.4rem) 2rem;
  border-radius: 40px;
  background: #f2f7ea;
  text-align: center;
  transition: transform 450ms cubic-bezier(0.22, 0.8, 0.3, 1), box-shadow 450ms ease;
}

.acces-visual {
  width: auto;
  height: var(--visual-h, 200px);
  max-width: 100%;
  object-fit: contain;
  /* Each illustration keeps the maquette's own size; all four share a
     220px band and sit on its baseline, so the titles line up. */
  margin-top: calc(220px - var(--visual-h, 200px));
  margin-bottom: var(--space-2xs);
  transition: transform 450ms cubic-bezier(0.22, 0.8, 0.3, 1);
}

.acces-title {
  font-size: 1.05rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--sipsa-green-primary);
}

.acces-divider {
  position: relative;
  width: 46px;
  height: 1px;
  background: var(--sipsa-gold-dark);
  opacity: 0.6;
}

.acces-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  background: var(--sipsa-gold);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.acces-body {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--sipsa-ink);
  opacity: 0.85;
}

.acces-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding-top: var(--space-2xs);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--sipsa-green-dark);
  transition: color var(--transition-fast), gap var(--transition-fast);
}

.acces-card:nth-child(1) { --visual-h: 215px; }
.acces-card:nth-child(2) { --visual-h: 172px; }
.acces-card:nth-child(3) { --visual-h: 158px; }
.acces-card:nth-child(4) { --visual-h: 185px; }

.acces-link svg {
  width: 0.95em;
  height: 0.95em;
}

.acces-link:hover {
  color: var(--sipsa-green-primary);
  gap: 0.5em;
}

/* The row reacts as a group (spec §4.2): the card under the pointer — or
   holding keyboard focus — grows, and its siblings step back to give it
   room. Scale is used (not width) so no text reflows mid-transition. */
@media (hover: hover) and (min-width: 1025px) {
  .acces-grid:has(.acces-card:hover) .acces-card:not(:hover),
  .acces-grid:has(.acces-card:focus-within) .acces-card:not(:focus-within) {
    transform: scale(0.955);
  }

  .acces-card:hover,
  .acces-card:focus-within {
    transform: scale(1.06);
    box-shadow: 0 18px 40px rgba(11, 69, 33, 0.12);
    position: relative;
    z-index: 1;
  }

  .acces-card:hover .acces-visual,
  .acces-card:focus-within .acces-visual {
    transform: scale(1.04);
  }
}

.acces-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

/* Maquette pills are 318 × 70 at 1921px. The label keeps the 14 Sept
   btn-lg size (§2.1); only the pill's box grows to the maquette's. */
.btn-xl {
  font-size: 1rem;
  min-width: min(318px, 100%);
  min-height: 64px;
  padding: 0.85em 2.2em;
}

@media (max-width: 1024px) {
  .acces-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .acces-grid {
    grid-template-columns: 1fr;
  }

  .acces-card {
    min-height: 0;
  }

  .acces-visual {
    height: calc(var(--visual-h, 200px) * 0.85);
    margin-top: 0;
  }

  .acces-ctas .btn {
    width: 100%;
  }
}

/* =========================================================================
   3. LE SALON EN CHIFFRES — spec §4.3
   Maquette at 1921px: bayadère strip on white, then the dark green band;
   four 287 × 363 white cards (93px gutters), photo on top, figure below.
   The band ends in a cream wave; the client's memorial watermark stands
   on it at the right, the Africa map straddles it on the left.
   ========================================================================= */
.stats-bayadere {
  width: min(1445px, calc(100% - 2 * var(--container-pad)));
  height: 30px;
  margin: 0 auto;
  background: url('../assets/images/v3-01-hero/bayadere.svg') repeat-x left center / auto 100%;
}

.stats {
  position: relative;
  z-index: 1;
  container-type: inline-size;
  overflow-x: clip; /* memorial runs off the right edge; the map may still hang below */
  background: var(--band-dark);
  /* No side padding here: cqw must measure the full band width. */
  padding: 54px 0 max(13cqw, 130px);
}

.stats-inner {
  position: relative;
  z-index: 2;
  max-width: calc(1425px + 2 * var(--container-pad));
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* White on the dark band (§2.1); size/weight are the 14 Sept ones. */
.stats-heading {
  font-size: var(--fs-h2);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--sipsa-white);
  text-align: center;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 287px));
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: 35px;
}

.stat-card {
  display: flex;
  flex-direction: column;
  border-radius: 40px;
  overflow: hidden;
  background: var(--sipsa-cream);
  min-height: 363px;
}

/* The photo shows clean — no colour wash. Only its lower edge melts into
   the card, as in the maquette. */
.stat-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 287 / 222;
  object-fit: cover;
}

/* Framing per photo, matching the maquette's crops. */
.stat-card:nth-child(1) .stat-photo { object-position: 100% 100%; transform-origin: 100% 85%; transform: scale(1.75); }
.stat-card:nth-child(4) .stat-photo { object-position: 20% 40%; transform-origin: 30% 38%; transform: scale(1.8); }

.stat-photo-frame {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
}

.stat-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 1rem 1.4rem;
  text-align: center;
  color: var(--sipsa-green-text);
}

.stat-number {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.stats-wave {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  aspect-ratio: 1921 / 200;
  height: auto;
  z-index: 1;
}

.stats-memorial {
  position: absolute;
  z-index: 0;
  left: calc(1440 / 1921 * 100cqw);
  bottom: calc(40 / 1921 * 100cqw);
  height: calc(610 / 1921 * 100cqw);
  width: auto;
  pointer-events: none;
}

.stats-africa {
  position: absolute;
  z-index: 3;
  left: calc(65 / 1921 * 100cqw);
  bottom: calc(-150 / 1921 * 100cqw);
  width: calc(365 / 1921 * 100cqw);
  pointer-events: none;
}

.stats-africa img {
  width: 100%;
  height: auto;
}


@media (max-width: 1100px) {
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 320px));
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
  }

  .stat-card {
    min-height: 0;
    border-radius: 24px;
  }

  .stat-body {
    padding: 0.4rem 0.5rem 1rem;
  }

  .stat-label {
    font-size: 0.75rem;
  }

  .stats-africa {
    width: 34cqw;
    bottom: -18cqw;
  }
}

/* =========================================================================
   4. ÉCOSYSTÈME — spec §4.4
   Maquette at 1921px: text column x 240–935; composition box x 962–1811
   (849 × 805), starting 70px above the text. Bottom edge: the client's
   silhouette + bayadère + the band that continues into §5.
   ========================================================================= */
.eco {
  position: relative;
  container-type: inline-size;
  background: var(--sipsa-cream);
  /* No side padding here: cqw must measure the full band width. */
  padding: 6px 0 calc(90 / 1921 * 100cqw);
}

.eco-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 695px) minmax(0, 849px);
  column-gap: 27px;
  max-width: calc(1571px + 2 * var(--container-pad));
  padding-inline: var(--container-pad);
  margin-left: max(0px, calc(50cqw - 720px - var(--container-pad)));
}

.eco-brand {
  position: relative;
  padding-top: 195px;
}

.eco-25 {
  position: absolute;
  top: 0;
  left: 245px;
  width: 235px;
  height: auto;
}

.eco-wordmark {
  display: flex;
  flex-direction: column;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2rem, 1.3rem + 3vw, 3.6rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.eco-wordmark-dark { color: var(--sipsa-green-dark); }
.eco-wordmark-bright { color: var(--sipsa-green-primary); margin-top: 0.12em; }

.eco-bayadere {
  width: 410px;
  max-width: 100%;
  height: 5px;
  margin-top: 36px;
  background: url('../assets/images/v3-01-hero/bayadere.svg') repeat-x left center / auto 100%;
}

.eco-intro {
  margin-top: 18px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--sipsa-ink);
}

.eco-theme {
  margin-top: 40px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem);
  line-height: 1.25;
  color: var(--sipsa-green-dark);
}

.eco-theme-eau { color: var(--sector-blue); }
.eco-theme-energie { color: var(--sector-orange); }

.eco-practical {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-top: 34px;
  padding-block: var(--space-sm);
  border-block: 1px solid rgba(11, 69, 33, 0.15);
}

.eco-practical li {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-weight: 600;
  color: var(--sipsa-green-dark);
}

.eco-practical svg {
  width: 20px;
  height: 20px;
  color: var(--sipsa-green-primary);
  flex-shrink: 0;
}

.eco-desc {
  margin-top: 36px;
  font-size: 0.95rem;
  line-height: 1.65;
  opacity: 0.85;
}

.eco-tagline {
  margin-top: 30px;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--sipsa-green-dark);
}

.eco-side {
  margin-top: -70px;
}

/* The composition keeps the maquette's scatter at any width: every item is
   placed in % of the 849 × 805 box. */
.eco-compo {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 849 / 805;
}

.eco-item {
  position: absolute;
  animation: eco-zoom 7s ease-in-out infinite;
}

/* Neighbours (items are in reading order) drift out of phase, so the zoom
   travels across the composition rather than pulsing in unison. */
.eco-item:nth-child(4n+2) { animation-delay: -1.75s; }
.eco-item:nth-child(4n+3) { animation-delay: -3.5s; }
.eco-item:nth-child(4n+4) { animation-delay: -5.25s; }
.eco-square { animation-name: eco-zoom-sq; animation-duration: 5.6s; }

@keyframes eco-zoom {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.055); }
}

@keyframes eco-zoom-sq {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}

.eco-card {
  display: grid;
  place-items: center;
  padding: 0.9cqw 1.1cqw;
  border: 1.5px solid var(--edge);
  border-radius: 6px;
  background: #fbfcf7;
}

.eco-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.eco-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6cqw;
  border-radius: 1.7cqw;
  background: var(--tile);
  color: var(--sipsa-white);
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.3cqw;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.eco-tile svg {
  width: 48%;
  aspect-ratio: 1;
  height: auto;
}

/* Sector pictograms (sprite): white strokes, translucent secondary fill,
   offset ink outline. */
.sx { fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.sx .sx-fill { fill: rgba(255, 255, 255, 0.28); }
.sx .sx-solid { fill: currentColor; }
.sx-shadow { fill: none; stroke: rgba(0, 0, 0, 0.22); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }

.eco-square {
  border-radius: 3px;
  background: var(--sq);
}

.eco-ar {
  margin-top: 40px;
  font-family: var(--font-arabic);
  font-weight: 700;
  font-size: clamp(1.25rem, 0.9rem + 1.25vw, 2.1rem);
  line-height: 1.5;
  color: #2d713c;
  text-align: center;
}

.eco-ground {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: -40px;
  aspect-ratio: 1921 / 420;
  pointer-events: none;
}

.eco-ground-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.eco-ground-bayadere {
  position: absolute;
  left: calc(360 / 1921 * 100%);
  width: calc(1320 / 1921 * 100%);
  bottom: calc(40 / 420 * 100%);
  height: calc(20 / 420 * 100%);
  background: url('../assets/images/v3-01-hero/bayadere.svg') repeat-x left center / auto 100%;
}

@media (max-width: 1200px) {
  .eco-inner {
    grid-template-columns: minmax(0, 1fr);
    max-width: calc(849px + 2 * var(--container-pad));
    margin-inline: auto;
    row-gap: var(--space-xl);
  }

  .eco-side {
    margin-top: 0;
  }

  .eco-brand {
    padding-top: 0;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-md);
  }

  .eco-25 {
    position: static;
    width: clamp(120px, 26vw, 235px);
  }
}

@media (max-width: 600px) {
  .eco-compo {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .eco-item {
    position: static;
    width: auto !important;
    height: auto !important;
  }

  .eco-card {
    aspect-ratio: 16 / 10;
    padding: 6px;
  }

  .eco-tile {
    aspect-ratio: 1;
    font-size: 0.6rem;
    gap: 4px;
    border-radius: 12px;
  }

  .eco-square {
    display: none;
  }

  /* Clear the Africa map that hangs down from §3. */
  .eco {
    padding-top: calc(18cqw + 1rem);
  }

  .eco-brand {
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-sm);
  }

  .eco-25 {
    width: 34%;
  }
}

/* =========================================================================
   5. DERNIÈRE ACTUALITÉ — spec §4.5
   Maquette at 1921px: content x 240–1667; featured card 526 × 690, four
   387 × 324 cards in a 2 × 2 grid (43px gutters); photo on top, white strip
   with title + date. Text on the band turns white (§2.1).
   ========================================================================= */
.news {
  position: relative;
  background: var(--band-dark);
  padding: 76px 0 70px;
}

.news-inner {
  max-width: calc(1427px + 2 * var(--container-pad));
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.news-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.news-headline {
  font-size: var(--fs-h2);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--sipsa-white);
  margin-bottom: var(--space-2xs);
}

.news-sub {
  color: var(--sipsa-white);
  opacity: 0.9;
  max-width: 42ch;
}

.news-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--sipsa-white);
  white-space: nowrap;
  margin-bottom: 1.4rem;
  transition: gap var(--transition-fast);
}

.news-link svg { width: 1em; height: 1em; }
.news-link:hover { gap: 0.6em; }

.news-grid {
  display: grid;
  grid-template-columns: minmax(0, 526fr) minmax(0, 817fr);
  gap: 86px;
  margin-top: 38px;
}

.news-secondary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 43px;
}

.news-card {
  display: flex;
  flex-direction: column;
  border-radius: 34px;
  overflow: hidden;
  background: var(--sipsa-white);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
}

.news-card-thumb {
  display: block;
  aspect-ratio: 387 / 240;
  overflow: hidden;
  background: #e9efe0;
}

.news-card--featured .news-card-thumb {
  aspect-ratio: 526 / 562;
}

.news-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms ease;
}

.news-card:hover .news-card-thumb img {
  transform: scale(1.04);
}

/* Missing photo: an honest, labelled empty slot — never a stand-in. */
.news-pending {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(135deg, rgba(11, 69, 33, 0.05) 0 12px, transparent 12px 24px),
    #e9efe0;
  box-shadow: inset 0 0 0 2px rgba(11, 69, 33, 0.12);
}

.news-pending span {
  padding: 0.45em 1em;
  border: 1.5px dashed rgba(11, 69, 33, 0.35);
  border-radius: var(--radius-pill);
  color: var(--sipsa-green-dark);
  opacity: 0.7;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.news-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 16px 28px 22px;
}

.news-card-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--sipsa-ink);
  line-height: 1.35;
}

.news-card-date {
  font-size: 0.75rem;
  color: var(--sipsa-green-secondary);
  font-weight: 600;
  margin-top: auto;
  padding-top: var(--space-2xs);
}

.news-card--featured .news-card-body {
  padding: 26px 30px 30px;
}

.news-card--featured .news-card-title {
  font-weight: 800;
  font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);
  line-height: 1.3;
}

.news-card--featured .news-card-date {
  font-size: 0.85rem;
  color: var(--sipsa-ink);
  opacity: 0.85;
}

/* Lower edge: the band dips in a soft arc into the white À propos. */
.news-edge {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: auto;
  aspect-ratio: 1921 / 60;
  margin-top: -1px;
}

@media (max-width: 1100px) {
  .news-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
  }

  .news-card--featured .news-card-thumb {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 560px) {
  .news-secondary {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
  }

  .news-link {
    margin-bottom: 0;
  }
}

/* =========================================================================
   6. À PROPOS — spec §4.6
   Maquette at 1921px: Arabic heading above; cream panel x 198–1725 from
   y 5019 (radius ~80); portrait tile 230 × 267 overhanging the panel top
   by 78px; sister cards 415px wide with 74px gutters.
   ========================================================================= */
.about {
  background: var(--sipsa-white);
  padding: 96px 0 90px;
}

.about-inner {
  max-width: calc(1527px + 2 * var(--container-pad));
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.about-ar {
  padding-left: 322px;
  font-family: var(--font-arabic);
  font-weight: 700;
  font-size: clamp(1.3rem, 0.9rem + 1.3vw, 2.15rem);
  line-height: 1.45;
  color: #2d713c;
  text-align: center;
}

.about-ar-title {
  font-size: 1.15em;
}

.about-panel {
  position: relative;
  margin-top: 30px;
  padding: 80px 45px 52px 48px;
  border-radius: 80px;
  background: var(--sipsa-cream);
}

.about-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 592px);
  gap: var(--space-lg);
}

.about-president {
  display: flex;
  align-items: flex-start;
  gap: 54px;
  min-height: 110px;
}

/* Large rounded rectangle (spec §4.6), overhanging the panel's top edge
   as in the maquette. The portrait is a cut-out, so it sits on the tile. */
.about-portrait {
  flex-shrink: 0;
  width: 230px;
  aspect-ratio: 230 / 267;
  margin-top: -158px;
  border-radius: 40px;
  overflow: hidden;
  background: radial-gradient(circle at 45% 32%, #0e9a4d 0%, #03703a 45%, var(--sipsa-green-deep) 85%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.about-portrait img {
  width: 100%;
  height: 88%;
  object-fit: cover;
  object-position: 50% 0;
}

.about-president-info {
  padding-top: 2px;
}

.about-president-name {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--sipsa-ink);
}

.about-president-title {
  font-size: 0.85rem;
  opacity: 0.75;
}

.about-president-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  margin-top: var(--space-3xs);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--sipsa-green-primary);
  transition: gap var(--transition-fast);
}

.about-president-link svg { width: 0.9em; height: 0.9em; }
.about-president-link:hover { gap: 0.55em; }

.about-headline {
  margin-top: 18px;
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem);
  font-weight: 800;
  color: var(--sipsa-ink);
  line-height: 1.15;
}

.about-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  padding-top: 38px;
}

.about-intro {
  font-size: 1rem;
  line-height: 1.65;
  opacity: 0.85;
}

.btn-leaf {
  background: var(--sipsa-green-primary);
  color: var(--sipsa-white);
  padding: 1em 1.8em;
}

.btn-leaf:hover {
  background: var(--sipsa-green-btn);
}

/* Sister events — the client asked for larger logos and text (§4.6). */
.about-sisters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 415px));
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: 62px;
  padding-inline: 28px;
}

.sister {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 22px 0;
  border-radius: 30px;
  height: 100%;
  background: var(--sipsa-white);
  text-align: center;
}

.sister-logo {
  width: auto;
  height: 118px;
  max-width: 100%;
  object-fit: contain;
}

.sister-tagline {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--brand);
}

/* The button sits on the card's lower edge, half in, half out. */
.sister-btn {
  display: grid;
  place-items: center;
  width: min(282px, 90%);
  min-height: 48px;
  margin-top: auto; /* all three buttons line up on the cards' lower edge */
  margin-bottom: -24px;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: var(--sipsa-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  transition: filter var(--transition-fast), transform var(--transition-fast);
}

.sister-btn:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.sister--afrika   { --brand: #a22f47; }
.sister--djazaqua { --brand: #164f99; }
.sister--oleomed  { --brand: #317137; }
.sister--oleomed .sister-tagline { color: #343e1f; }

@media (max-width: 1100px) {
  .about-ar {
    padding-left: 0;
  }

  .about-top {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-right {
    padding-top: 0;
  }

  /* The Arabic heading spans the full width here, so the portrait's
     overhang shrinks to stay clear of it. */
  .about-panel {
    margin-top: 72px;
  }

  .about-portrait {
    margin-top: -118px;
  }

  .about-sisters {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    row-gap: 48px;
    padding-inline: 0;
  }
}

@media (max-width: 640px) {
  .about-panel {
    padding: 28px 20px 48px;
    border-radius: 36px;
  }

  .about-president {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .about-portrait {
    width: 180px;
    margin-top: -72px;
  }

  .about-panel {
    margin-top: 64px;
  }

  .sister-logo {
    height: 96px;
  }

  .sister-btn {
    margin-top: 8px;
  }
}

/* =========================================================================
   7. COMPÉTITIONS & DISTINCTIONS — spec §4.7
   Maquette at 1921px: content x 241–1669; two 700 × 570 cards (29px gap);
   light grey incubator banner below. Card type = 14 Sept sizes; colours
   follow each card's background (§2.1).
   ========================================================================= */
.comp {
  background: var(--sipsa-white);
  padding: 20px 0 64px;
}

.comp-inner {
  max-width: calc(1428px + 2 * var(--container-pad));
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.comp-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.comp-eyebrow {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sipsa-green-primary);
  margin-bottom: var(--space-3xs);
}

.comp-headline {
  font-size: var(--fs-h2);
  font-weight: 800;
  color: var(--sipsa-ink);
  margin-bottom: var(--space-2xs);
}

.comp-sub {
  color: var(--sipsa-ink);
  opacity: 0.75;
  max-width: 42ch;
}

.comp-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin-top: 1.1rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--sipsa-green-primary);
  white-space: nowrap;
  transition: gap var(--transition-fast), color var(--transition-fast);
}

.comp-link svg { width: 1em; height: 1em; }
.comp-link:hover { gap: 0.6em; color: var(--sipsa-green-dark); }

.comp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 29px;
  margin-top: 58px;
}

.comp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 570px;
  padding: 44px 44px 30px;
  border-radius: 56px;
  overflow: hidden;
  isolation: isolate;
}

.comp-card--innov {
  background: linear-gradient(135deg, var(--sipsa-green-deep) 0%, #03703a 55%, #09944c 100%);
  color: var(--sipsa-white);
}

/* The client's illustration fills the card's height from the right; its
   own soft backdrop melts into the card colour on the left. */
.comp-card--oleomed {
  background: linear-gradient(160deg, #f8f7eb 0%, #f4efcf 55%, #f1e8ba 100%);
  color: #0f563c;
}

/* Green foot over the illustration (maquette) — keeps the white
   "En savoir plus" legible. Same z-layer as the art, later in order. */
.comp-card--oleomed::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(15, 86, 60, 0.95) 0%, rgba(15, 86, 60, 0.55) 9%, transparent 22%);
  pointer-events: none;
}

.comp-art {
  position: absolute;
  z-index: -1;
  /* Placed from the source's measured canopy (x 295–735, top 265 of
     800 × 1048) onto the maquette's (card x 290–700, top 50): scale .93. */
  top: -34.4%;
  right: -8.6%;
  height: 171%;
  width: auto;
  max-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
}

.comp-poster {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.7rem);
  line-height: 1.2;
  text-transform: uppercase;
  margin-bottom: 58px;
}

.comp-edition {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
}

.comp-card--innov .comp-edition { color: var(--sipsa-gold); }

.comp-title {
  font-size: calc(var(--fs-h3) * 1.3);
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: var(--space-2xs);
}

.comp-desc {
  font-size: calc(0.9rem * 1.3);
  line-height: 1.6;
  max-width: 46ch;
}

/* Same measure as before the 1.3× type: the text must stay clear of the tree. */
.comp-card--oleomed .comp-desc {
  max-width: calc(24ch / 1.3);
}

.comp-actions {
  align-self: stretch;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md) 70px;
  margin-top: auto;
  padding-top: var(--space-lg);
}

.btn-comp {
  min-width: min(331px, 100%);
  min-height: 60px;
}

.comp-more {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.2em;
  font-size: 0.95rem;
  color: var(--sipsa-white);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.comp-more svg {
  width: 2.2em;
  height: 0.75em;
  transition: transform var(--transition-base);
}

.comp-more:hover svg {
  transform: translateX(4px);
}

.comp-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: 36px;
  padding: 22px 44px;
  border-radius: 16px;
  background: #f2f2f2;
}

.comp-banner p {
  color: var(--sipsa-ink);
  font-size: 0.95rem;
}

.comp-banner strong {
  color: var(--sipsa-green-dark);
}

@media (max-width: 1000px) {
  .comp-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .comp-card {
    min-height: 0;
    padding: 30px 24px 26px;
    border-radius: 32px;
  }

  .comp-poster {
    margin-bottom: 28px;
  }

  /* Text stays readable over the illustration: the art moves to the
     card's lower half. */
  /* Art takes the card's lower half; buttons sit on the green foot. */
  .comp-card--oleomed {
    padding-bottom: 26px;
  }

  .comp-card--oleomed .comp-actions {
    padding-top: 330px;
  }

  .comp-art {
    top: auto;
    bottom: -80px;
    right: 50%;
    transform: translateX(56%);
    height: 640px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
  }

  .comp-card--oleomed .comp-desc {
    max-width: none;
  }

  .comp-banner {
    padding: 20px 22px;
  }
}

/* =========================================================================
   8. SERVICES DES EXPOSANTS — spec §4.8
   Maquette at 1921px: wavy dark band y 6735–7385; heading block at x 242;
   track x 700–1672 showing 3½ tiles of 258 × 292 (radius 40, 23px gap);
   light-green round arrows; dots below. The client's tractor (mirrored)
   climbs the band's top edge at the right.
   ========================================================================= */
.serv {
  position: relative;
  container-type: inline-size;
  margin-top: 30px;
  overflow-x: clip; /* the tilted tractor may graze the right edge */
}

.serv-wave {
  display: block;
  width: 100%;
  height: auto;
  fill: #036e38;
}

.serv-wave--top { aspect-ratio: 1921 / 130; margin-bottom: -1px; }
.serv-wave--bottom { aspect-ratio: 1921 / 100; margin-top: -1px; }

.serv-tractor {
  position: absolute;
  z-index: 1;
  right: calc(8 / 1921 * 100cqw);
  top: calc(-94 / 1921 * 100cqw);
  width: calc(275 / 1921 * 100cqw);
  min-width: 120px;
  height: auto;
  transform: scaleX(-1) rotate(6deg);
  pointer-events: none;
}

.serv-band {
  background: #036e38;
  padding-block: 28px 4px;
}

.serv-inner {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  align-items: center;
  gap: 48px;
  max-width: calc(1510px + 2 * var(--container-pad));
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* White on the dark band (§2.1); 14 Sept size. */
.serv-heading {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  font-weight: 600;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--sipsa-white);
}

.serv-heading strong {
  font-weight: 800;
}

.serv-intro .btn {
  margin-top: 28px;
}

.serv-carousel {
  position: relative;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 50px;
  align-items: center;
  gap: 30px;
}

.serv-track {
  display: flex;
  gap: 23px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-radius: 40px 0 0 40px;
}

.serv-track::-webkit-scrollbar { display: none; }

.serv-track:focus-visible {
  outline: 2px solid var(--sipsa-gold);
  outline-offset: 4px;
}

.serv-tile {
  flex: 0 0 auto;
  width: 258px;
  aspect-ratio: 258 / 292;
  scroll-snap-align: start;
  border-radius: 40px;
  overflow: hidden;
  background: var(--sipsa-white);
}

.serv-tile a,
.serv-tile img {
  display: block;
  width: 100%;
  height: 100%;
}

.serv-tile img {
  object-fit: cover;
  transition: transform 600ms ease;
  user-select: none;
}

.serv-tile--contain img {
  object-fit: contain;
  padding: 10px;
}

.serv-tile a:hover img {
  transform: scale(1.05);
}

.serv-nav {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--sipsa-green-light);
  color: var(--sipsa-green-btn);
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.serv-nav:hover {
  background: #b3d965;
  transform: scale(1.06);
}

.serv-nav svg {
  width: 26px;
  height: 26px;
}

.serv-dots {
  grid-column: 2;
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 26px;
}

.serv-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--sipsa-green-btn);
  transition: background-color var(--transition-base);
}

.serv-dots span.is-active {
  background: var(--sipsa-gold);
}

@media (max-width: 1100px) {
  .serv-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
}

@media (max-width: 640px) {
  .serv-carousel {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .serv-carousel .serv-nav {
    display: none; /* swipe on phones */
  }

  .serv-dots {
    grid-column: 1;
  }

  .serv-tile {
    width: 70vw;
    max-width: 258px;
    border-radius: 28px;
  }

  .serv-track {
    border-radius: 28px 0 0 28px;
  }
}

/* =========================================================================
   9. PLATEFORME DIGITALE — spec §4.9
   Maquette at 1921px: text x 245–870; splash phone 422 px wide at
   x 893 (top 7480), home phone 367 px wide at x 1273 (top 7405).
   ========================================================================= */
.plat {
  background: var(--sipsa-white);
  padding: 20px 0 70px;
}

.plat-inner {
  display: grid;
  grid-template-columns: minmax(0, 625px) minmax(0, 770px);
  justify-content: space-between;
  align-items: start;
  gap: var(--space-lg);
  max-width: calc(1430px + 2 * var(--container-pad));
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.plat-text {
  padding-top: 90px;
}

.plat-heading {
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--sipsa-green-dark);
}

.plat-copy {
  margin-top: 1.4rem;
  color: var(--sipsa-green-dark);
  line-height: 1.65;
  text-align: justify;
  hyphens: auto;
}

.btn-plat {
  margin-top: 2rem;
  min-width: min(466px, 100%);
  min-height: 62px;
}

.plat-stores {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 32px;
}

.plat-stores a {
  display: block;
  transition: transform var(--transition-fast);
}

.plat-stores a:hover {
  transform: translateY(-2px);
}

.plat-stores img {
  width: 243px;
  height: auto;
}

/* Phones: placed in % of a 770 × 740 stage, as in the maquette. */
.plat-phones {
  position: relative;
  aspect-ratio: 770 / 740;
}

.plat-phone {
  position: absolute;
  height: auto;
  filter: drop-shadow(0 22px 28px rgba(8, 24, 14, 0.18));
  animation: plat-float 6s ease-in-out infinite;
}

.plat-phone--splash {
  left: 0;
  top: 10%;
  width: 54.8%;
}

.plat-phone--home {
  left: 49.4%;
  top: 0;
  width: 47.7%;
  animation-delay: -2.4s;   /* out of step with the splash phone */
  animation-duration: 6.8s;
}

@keyframes plat-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

@media (max-width: 1000px) {
  .plat-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .plat-text {
    padding-top: 0;
  }

  .plat-phones {
    max-width: 620px;
    width: 100%;
    margin-inline: auto;
  }
}

@media (max-width: 560px) {
  .plat-copy {
    text-align: left;
  }

  .plat-stores img {
    width: 150px;
  }
}

/* =========================================================================
   10. NOS PARTENAIRES — spec §4.10
   Maquette at 1921px: centred eyebrow + headline; three rows, label at
   x 243, logos between round arrows (x 159 / 1712), 5–6 per row, each
   in a uniform ~190px box. Full colour — no greyscale, no fading.
   ========================================================================= */
.part {
  background: var(--sipsa-white);
  padding: 30px 0 80px;
}

.part-inner {
  max-width: calc(1603px + 2 * var(--container-pad));
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.part-eyebrow {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sipsa-green-light);
  text-align: center;
  margin-bottom: var(--space-3xs);
}

.part-headline {
  font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.4rem);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--sipsa-green-btn);
  text-align: center;
}

.part-row {
  margin-top: 40px;
}

.part-label {
  margin-left: 84px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--sipsa-green-light);
}

.part-carousel {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 50px;
  align-items: center;
  gap: 34px;
  margin-top: 12px;
}

.part-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.part-track::-webkit-scrollbar { display: none; }

.part-track:focus-visible {
  outline: 2px solid var(--sipsa-green-light);
  outline-offset: 4px;
}

/* Uniform boxes: every logo fits the same frame, centred, full colour. */
.part-tile {
  flex: 0 0 calc(100% / var(--per, 5));
  height: 190px;
  padding: 10px 22px;
  display: grid;
  place-items: center;
  scroll-snap-align: start;
}

.part-tile img {
  max-width: 100%;
  max-height: 170px;
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
}

@media (max-width: 1100px) {
  .part-row { --per: 3 !important; }
  .part-label { margin-left: 0; }
}

@media (max-width: 640px) {
  .part-row { --per: 2 !important; }

  .part-carousel {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    gap: 6px;
  }

  .part-nav {
    width: 40px;
    height: 40px;
  }

  .part-tile {
    height: 120px;
    padding: 8px 12px;
  }

  .part-tile img {
    max-height: 104px;
  }
}

/* =========================================================================
   11. ILS TÉMOIGNENT — spec §4.11
   Maquette at 1921px: dark band, white curve dipping in at the top and a
   cream curve rising at the bottom; centred eyebrow + white headline;
   four 340 × 278 cards (radius 40, 22px gap) between round arrows.
   ========================================================================= */
.tem {
  position: relative;
  margin-top: 10px;
}

.tem-edge {
  display: block;
  width: 100%;
  height: auto;
  fill: #036e38;
}

.tem-edge--top { aspect-ratio: 1921 / 70; margin-bottom: -1px; }
.tem-edge--bottom { aspect-ratio: 1921 / 90; margin-top: -1px; }

/* the bottom curve is the cream of §12 rising into the band */
.tem-edge--bottom { fill: #036e38; background: var(--sipsa-cream); }

.tem-band {
  /* same gradient, same axis as the curved edges (SVG #tem-grad) */
  background: linear-gradient(90deg, #00592d 0%, #03703a 45%, #09954c 100%);
  padding: 40px 0 30px;
}

.tem-inner {
  max-width: calc(1603px + 2 * var(--container-pad));
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.tem-eyebrow {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sipsa-green-light);
  text-align: center;
  margin-bottom: var(--space-3xs);
}

/* White on the dark band (§2.1). */
.tem-headline {
  font-size: var(--fs-h2);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--sipsa-white);
  text-align: center;
}

.tem-carousel {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 50px;
  align-items: center;
  gap: 36px;
  margin-top: 56px;
}

.tem-track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-block: 6px; /* room for the hover lift */
}

.tem-track::-webkit-scrollbar { display: none; }

.tem-track:focus-visible {
  outline: 2px solid var(--sipsa-gold);
  outline-offset: 4px;
}

.tem-item {
  flex: 0 0 calc((100% - 3 * 22px) / 4);
  scroll-snap-align: start;
}

.tem-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 40px;
  overflow: hidden;
  background: var(--sipsa-cream);
  text-align: left;
  cursor: pointer;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.tem-card:hover,
.tem-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.25);
}

.tem-card:focus-visible {
  outline: 3px solid var(--sipsa-gold);
  outline-offset: 3px;
}

.tem-thumb {
  position: relative;
  display: block;
  aspect-ratio: 340 / 210;
  overflow: hidden;
}

.tem-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  -webkit-mask-image: linear-gradient(180deg, #000 82%, rgba(0, 0, 0, 0.35) 100%);
  mask-image: linear-gradient(180deg, #000 82%, rgba(0, 0, 0, 0.35) 100%);
}

/* Testimonial text, in surimpression (spec §4.11): fades in over a pale
   wash of the still, as in the maquette's alternate cards. */
.tem-quote {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 18px 22px;
  background: rgba(244, 247, 238, 0.86);
  color: #0f563c;
  font-style: italic;
  font-weight: 600;
  font-size: 0.8rem;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 450ms ease, transform 450ms ease;
}

.tem-card:hover .tem-quote,
.tem-card:focus-visible .tem-quote {
  opacity: 1;
  transform: none;
}

/* Long quotes: keep within the still, ellipsis at the end. */
.tem-quote {
  -webkit-line-clamp: 7;
}

.tem-strip {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 68px;
  padding: 10px 26px 14px;
}

.tem-logo {
  flex: 0 0 auto;
  width: 120px;
  height: 40px;
  object-fit: contain;
  object-position: left center;
}

.tem-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--sipsa-ink);
}

.tem-who strong {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  color: var(--sipsa-green-dark);
}

.tem-dots {
  grid-column: 2;
}

@media (max-width: 1100px) {
  .tem-item { flex-basis: calc((100% - 22px) / 2); }
}

@media (max-width: 640px) {
  .tem-carousel {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    gap: 8px;
  }

  .tem-nav { width: 40px; height: 40px; }

  .tem-item { flex-basis: 100%; }

  .tem-card { border-radius: 28px; }
}

/* =========================================================================
   12. NOS SPONSORS — spec §4.12
   Maquette at 1921px: cream; centred heading and light-green tier labels;
   USSEC|US SOY lockup ~500 wide, Agro Rayane ~215, then Atlantis /
   Cosider / tntex spread across x 370–1495. Logos only, generous air.
   ========================================================================= */
.spon {
  background: var(--sipsa-cream);
  padding: 20px 0 90px;
}

.spon-inner {
  max-width: calc(1200px + 2 * var(--container-pad));
  margin-inline: auto;
  padding-inline: var(--container-pad);
  text-align: center;
}

.spon-heading {
  font-size: var(--fs-h2);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--sipsa-green-btn);
  letter-spacing: 0.01em;
}

.spon-tier + .spon-tier {
  margin-top: 70px;
}

.spon-tier {
  margin-top: 30px;
}

/* Light green, full strength (spec §4.12) — the old grey half-opacity
   label read as faded. */
.spon-tier-label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--sipsa-green-light);
}

.spon-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 28px;
}

.spon-logos--others {
  justify-content: space-between;
  max-width: 1125px;
  margin-inline: auto;
  gap: var(--space-lg);
}

.spon-logo {
  height: auto;
  max-width: 100%;
  transition: transform var(--transition-base);
}

.spon-logo:hover {
  transform: scale(1.04);
}

.spon-logo--gold     { width: 500px; }
.spon-logo--silver   { width: 215px; }
.spon-logo--atlantis { width: 240px; }
.spon-logo--cosider  { width: 390px; }
.spon-logo--tntex    { width: 190px; }

@media (max-width: 900px) {
  .spon-logos--others {
    flex-direction: column;
    gap: 44px;
  }
}

@media (max-width: 560px) {
  .spon-logo--gold    { width: 300px; }
  .spon-logo--silver  { width: 160px; }
  .spon-logo--atlantis{ width: 190px; }
  .spon-logo--cosider { width: 260px; }
  .spon-logo--tntex   { width: 140px; }
}

/* =========================================================================
   13. MÉDIATHÈQUE — spec §4.13
   Maquette at 1921px: cream; head row x 188–1737; five 300 × 290 photos
   per row (20px gap, radius 36) from x 171.
   ========================================================================= */
.med {
  background: var(--sipsa-cream);
  padding: 50px 0 70px;
}

.med-inner {
  max-width: calc(1580px + 2 * var(--container-pad));
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.med-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding-inline: 17px;
}

.med-eyebrow {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sipsa-green-primary);
  margin-bottom: var(--space-3xs);
}

.med-headline {
  font-size: var(--fs-h2);
  font-weight: 800;
  color: var(--sipsa-ink);
  margin-bottom: var(--space-2xs);
}

.med-sub {
  color: var(--sipsa-ink);
  opacity: 0.75;
}

.med-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.med-tabs {
  display: flex;
  gap: 10px;
}

.med-tab,
.med-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 46px;
  padding: 0 1.4em;
  border-radius: var(--radius-pill);
  border: 1px solid #e3e8dc;
  background: #fbfcf8;
  color: var(--sipsa-ink);
  font-weight: 500;
  font-size: 0.95rem;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.med-tab svg,
.med-link svg {
  width: 1.05em;
  height: 1.05em;
}

.med-tab:hover {
  border-color: var(--sipsa-green-primary);
}

.med-tab.is-active {
  background: var(--sipsa-green-dark);
  border-color: var(--sipsa-green-dark);
  color: var(--sipsa-white);
}

.med-link {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--sipsa-green-dark);
  background: var(--sipsa-white);
}

.med-link:hover {
  border-color: var(--sipsa-green-dark);
}

.med-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 25px 20px;
  margin-top: 50px;
}

.med-tile[hidden] {
  display: none;
}

.med-tile button {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 300 / 290;
  border-radius: 36px;
  overflow: hidden;
  cursor: zoom-in;
}

.med-tile--video button {
  cursor: pointer;
}

.med-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms ease;
}

.med-tile button:hover img,
.med-tile button:focus-visible img {
  transform: scale(1.05);
}

.med-tile button:focus-visible {
  outline: 3px solid var(--sipsa-green-primary);
  outline-offset: 3px;
}

/* Play badge for video items. */
.med-play {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--sipsa-green-btn);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.med-play svg {
  width: 34px;
  height: 34px;
  margin-left: 4px;
}

.med-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 18px 16px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), transparent);
  color: var(--sipsa-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  text-align: left;
}

@media (max-width: 1100px) {
  .med-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .med-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .med-tile button { border-radius: 22px; }

  .med-head { padding-inline: 0; }

  .med-tab,
  .med-link {
    min-height: 40px;
    padding: 0 1em;
    font-size: 0.85rem;
  }
}

/* =========================================================================
   14. FINAL CTA + FOOTER — spec §4.14
   Maquette at 1921px: cream; centred eyebrow + headline; two 502 × 397
   photos (x 423 / 997, radius 40) with 502 × 80 pills under them. Footer:
   light grey, the client's hero artwork along its foot, white legal bar.
   ========================================================================= */
.cta {
  background: var(--sipsa-cream);
  padding: 30px 0 64px;
}

.cta-inner {
  max-width: calc(1076px + 2 * var(--container-pad));
  margin-inline: auto;
  padding-inline: var(--container-pad);
  text-align: center;
}

.cta-eyebrow {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sipsa-green-light);
}

.cta-headline {
  font-size: var(--fs-h2);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--sipsa-green-dark);
}

.cta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 502px));
  justify-content: space-between;
  gap: var(--space-lg);
  margin-top: 44px;
}

.cta-col {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.cta-photo {
  aspect-ratio: 502 / 397;
  border-radius: 40px;
  overflow: hidden;
}

.cta-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.btn-cta {
  width: 100%;
  min-height: 72px;
  font-size: 1rem;
}

.btn-cta--green {
  background: linear-gradient(90deg, var(--sipsa-green-deep), #09944c);
  color: var(--sipsa-white);
}

.btn-cta--green:hover {
  filter: brightness(1.1);
}

.foot {
  position: relative;
  overflow: hidden;
  background: #e0e0e0;
  color: var(--sipsa-ink);
  container-type: inline-size;
}

.foot-art {
  position: absolute;
  height: auto;
  pointer-events: none;
}

/* The hero frames, cropped by the footer like in the maquette. */
.foot-art--left    { left: 0;  bottom: calc(-30 / 1921 * 100cqw);  width: calc(560 / 1921 * 100cqw); }
.foot-art--right   { right: 0; bottom: calc(-25 / 1921 * 100cqw);  width: calc(420 / 1921 * 100cqw); }
.foot-art--tractor { left: calc(565 / 1921 * 100cqw); bottom: calc(52 / 1921 * 100cqw); width: calc(265 / 1921 * 100cqw); }

.foot-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.3fr 0.95fr 0.95fr 0.9fr 1.15fr;
  gap: var(--space-lg);
  max-width: calc(1440px + 2 * var(--container-pad));
  margin-inline: auto;
  padding: 50px var(--container-pad) calc(170 / 1921 * 100cqw + 40px);
}

.foot-logo {
  width: 96px;
  height: auto;
  margin-bottom: var(--space-sm);
}

.foot-tagline {
  font-size: 0.85rem;
  line-height: 1.55;
  opacity: 0.75;
  max-width: 32ch;
  margin-bottom: var(--space-md);
}

.foot-social {
  display: flex;
  gap: 8px;
}

.foot-social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--sipsa-green-dark);
  transition: background-color var(--transition-fast);
}

.foot-social a:hover {
  background: rgba(255, 255, 255, 0.6);
}

.foot-social svg {
  width: 20px;
  height: 20px;
}

.foot h3 {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sipsa-green-dark);
  margin-bottom: var(--space-sm);
}

.foot-col li + li {
  margin-top: 12px;
}

.foot-col a {
  font-size: 0.88rem;
  opacity: 0.75;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}

.foot-col a:hover {
  opacity: 1;
  color: var(--sipsa-green-dark);
}

.foot-contact {
  padding-top: 26px;
}

.foot-contact p {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  font-size: 0.85rem;
  margin-bottom: var(--space-sm);
}

.foot-contact svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--sipsa-green-primary);
}

.foot-fax {
  display: block;
  opacity: 0.6;
  font-size: 0.8rem;
  margin-top: 2px;
}

.foot-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  max-width: 100%;
  margin-inline: auto;
  padding: 14px 16px;
  background: var(--sipsa-white);
  font-size: 0.82rem;
  color: rgba(31, 36, 33, 0.7);
}

.foot-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.foot-legal a:hover {
  color: var(--sipsa-green-dark);
}

@media (max-width: 1100px) {
  .foot-inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .foot-brand {
    grid-column: 1 / -1;
  }

  .foot-contact {
    padding-top: 0;
  }
}

@media (max-width: 640px) {
  .cta-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cta-photo {
    border-radius: 28px;
  }

  .foot-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-bottom: 150px;
  }

  .foot-contact {
    grid-column: 1 / -1;
  }

  .foot-art--left    { width: 240px; bottom: -60px; }
  .foot-art--right   { width: 180px; bottom: -10px; }
  .foot-art--tractor { display: none; }
}

/* =========================================================================
   VIDEO MODAL — hero film + testimonials (spec §4.11: centred, large but
   not full-screen, starts automatically).
   ========================================================================= */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: var(--space-md);
}

.video-modal[hidden] {
  display: none;
}

.video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 30, 15, 0.78);
  animation: vm-fade 250ms ease;
}

.video-modal-panel {
  position: relative;
  width: min(1100px, 88vw, calc((88vh - 3rem) * 16 / 9));
  animation: vm-rise 300ms ease;
}

.video-modal-frame {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.video-modal-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.video-modal-frame iframe,
.video-modal-frame video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-modal-missing {
  display: grid;
  place-items: center;
  height: 100%;
  padding: var(--space-lg);
  text-align: center;
  color: var(--sipsa-white);
  background: var(--band-dark);
  font-family: var(--font-heading);
  font-weight: 600;
}

.video-modal-caption {
  margin-top: 16px;
  padding: 16px 22px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.95);
  color: var(--sipsa-green-dark);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.6;
}

.video-modal-close {
  position: absolute;
  top: -3rem;
  right: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sipsa-white);
  color: var(--sipsa-green-btn);
}

.video-modal-close svg {
  width: 20px;
  height: 20px;
}

@keyframes vm-fade { from { opacity: 0; } }
@keyframes vm-rise { from { opacity: 0; transform: translateY(12px) scale(0.98); } }

/* =========================================================================
   REDUCED MOTION — spec §5: every animation off, cleanly. Figures sit in
   their maquette pose; the hero shows the video's still frame.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}



/* =========================================================================
   4.1 REMINDER MODAL
   ========================================================================= */
.reminder-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}

.reminder-modal[hidden] {
  display: none;
}

.reminder-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 20, 12, 0.55);
}

.reminder-modal-panel {
  position: relative;
  z-index: 1;
  background: var(--sipsa-white);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: var(--shadow-md);
}

.reminder-modal-close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sipsa-cream);
  color: var(--sipsa-green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.reminder-modal-close:hover {
  background: var(--sipsa-green-primary);
  color: var(--sipsa-white);
}

.reminder-modal-close svg {
  width: 16px;
  height: 16px;
}

.reminder-modal-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--sipsa-ink);
  padding-right: var(--space-xl);
}

.reminder-modal-sub {
  font-size: 0.9rem;
  opacity: 0.75;
  margin-top: var(--space-3xs);
  margin-bottom: var(--space-lg);
}

.reminder-section {
  padding-block: var(--space-md);
  border-top: 1px solid var(--sipsa-cream);
  border-radius: var(--radius-sm);
  transition: background-color 400ms ease;
}

/* Briefly flashed when a trigger outside the modal (the "Alertes" banner's
   3 buttons) jumps straight to this method — see openModal() in
   initReminderModal(), js/main.js. */
.reminder-section.is-highlighted {
  background-color: rgba(124, 180, 67, 0.14);
}

.reminder-section:first-of-type {
  border-top: none;
  padding-top: 0;
}

.reminder-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1rem;
  color: var(--sipsa-green-dark);
  margin-bottom: var(--space-3xs);
}

.reminder-section-title svg {
  width: 18px;
  height: 18px;
  color: var(--sipsa-green-primary);
  flex-shrink: 0;
}

.reminder-section-desc {
  font-size: 0.85rem;
  opacity: 0.75;
  margin-bottom: var(--space-sm);
}

.reminder-calendar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

.reminder-cal-link {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--sipsa-green-dark);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.reminder-cal-link:hover {
  color: var(--sipsa-green-primary);
  border-bottom-color: currentColor;
}

.reminder-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

.reminder-channel-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  font-size: 0.9rem;
  font-weight: 600;
}

.reminder-channel-option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
}

.reminder-field {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.reminder-field label {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sipsa-green-secondary);
}

.reminder-field input {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  padding: 0.65em 0.85em;
  border: 1px solid rgba(11, 69, 33, 0.18);
  border-radius: var(--radius-sm);
  background: var(--sipsa-white);
  color: var(--sipsa-ink);
}

.reminder-field input:focus {
  outline: 2px solid var(--sipsa-green-primary);
  outline-offset: 1px;
}

.reminder-note {
  font-size: 0.78rem;
  opacity: 0.6;
  line-height: 1.5;
}

.reminder-confirmation {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--sipsa-green-dark);
  background: var(--sipsa-cream);
  border-radius: var(--radius-sm);
  padding: var(--space-2xs) var(--space-sm);
}

@media (max-width: 480px) {
  .reminder-modal-panel {
    padding: var(--space-md);
    max-height: 92vh;
  }

  .reminder-modal-title {
    font-size: 1.3rem;
  }
}