/* =========================================================================
   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) */
  --sipsa-green-muted: #54785e;     /* language switcher (maquette 2026-10-13) */
  --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: 15px;
}

/* =========================================================================
   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);
}

/* Wider than the page container, like the maquette's header (logo to
   "Badge visiteur" ≈ 1470px at 1921px), so the larger menu type still
   fits on one line from 1280px up. 1500px → 1600px on 2026-10-13 to make
   room for the pills' +15% type; no wider, or FR and the pills drift apart. */
.header-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 1600px;
  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) clamp(9px, 0.75vw, 18px);
}

.main-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-weight: 600;
  /* Never below the earlier 0.88rem (client feedback 2026-10-07: keep at
     least that size, a little larger for legibility): 14.4px up to 1280px,
     ~15.3px at 1440px, ~16.3px on wide screens (the maquette's size). */
  font-size: clamp(0.9rem, 0.4rem + 0.62vw, 1.02rem);
  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;
}

/* Larger than the earlier 0.78rem (client feedback 2026-10-07): 13.6px up
   to 1280px, ~14.8px at 1440px, 16px from 1600px — the 2026-10-13
   maquette's size (11px capitals at 1921px). */
.header-ctas .btn {
  font-size: clamp(0.85rem, 0.25rem + 0.75vw, 1rem);
  padding: 0.8em 1.15em;
}

.header-ctas .btn svg {
  width: 1.3em;
  height: 1.3em;
}

/* Language switcher after the pills (maquette 2026-10-13): translate mark,
   small muted type, 18px from the gold pill. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  flex-shrink: 0;
  margin-left: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--sipsa-green-muted);
  transition: color var(--transition-fast);
}

.lang-switch:hover,
.lang-switch:focus-visible {
  color: var(--sipsa-green-btn);
}

.lang-switch .lang-ico {
  width: 1.3em;
  height: 1.3em;
}

/* the chevron's box is mostly air: larger box, pulled in against "FR" */
.lang-switch .caret {
  width: 15px;
  height: 15px;
  margin-left: -3px;
}

/* Keeps the menu on one line down to 1280px, pictos and the language
   switcher included. */
@media (max-width: 1439px) {
  .main-nav > ul { column-gap: 8px; }
  .header-ctas { gap: 0.4rem; }
  .header-ctas .btn { padding-inline: 0.8em; gap: 0.35em; }
  .header-ctas .btn svg { width: 1.2em; height: 1.2em; }
  .lang-switch { margin-left: 2px; }
}

@media (max-width: 1365px) {
  .main-nav > ul { column-gap: 6px; }
  .header-ctas .btn { padding-inline: 0.7em; }
}

.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) {
  /* the open menu drops below the header row instead of squeezing into it */
  .header-inner {
    flex-wrap: wrap;
  }

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

  .main-nav.is-open {
    /* room for the open sub-menus; scrolls inside if the screen is short */
    max-height: calc(100vh - 110px);
    overflow-y: auto;
  }

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

  .nav-toggle {
    display: flex;
  }

  /* pills and burger keep to the right, as before the menu got its row */
  .header-ctas {
    margin-left: auto;
  }

  .header-ctas .btn {
    padding: 0.7em 1em;
  }
}

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

/* 2.3 Sub-menus — the carets now open the internal pages' sub-pages.
   The parent label stays a link (its hub page); the caret is a button
   that opens the list. Desktop: hover, focus or the caret; phones: the
   caret unfolds the list inside the burger menu. */
.main-nav .has-sub {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
}

.sub-toggle {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 26px;
  border-radius: 6px;
  color: var(--sipsa-green-dark);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.sub-toggle svg {
  width: 9px;
  height: 9px;
  transition: transform var(--transition-base);
}

.sub-toggle:hover {
  color: var(--sipsa-green-primary);
}

.has-sub.is-open > .sub-toggle svg {
  transform: rotate(180deg);
}

.submenu {
  display: grid;
  gap: 2px;
  min-width: 250px;
  padding: 10px;
  border-top: 4px solid var(--sipsa-gold);
  border-radius: 6px 6px 18px 18px;
  background: var(--sipsa-white);
  box-shadow: var(--shadow-md);
}

.main-nav .submenu a {
  display: flex;
  width: 100%;
  padding: 10px 14px;
  border-bottom: 0;
  border-radius: 12px;
  font-size: 0.92rem;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.main-nav .submenu a:hover,
.main-nav .submenu a:focus-visible,
.main-nav .submenu a[aria-current="page"] {
  background: var(--sipsa-cream);
  color: var(--sipsa-green-btn);
}

@media (min-width: 961px) {
  .submenu {
    position: absolute;
    z-index: 120;
    top: calc(100% + 12px);
    left: -14px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility 0s linear 150ms;
  }

  /* a bridge so the pointer can travel from the label to the list */
  .submenu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -18px;
    height: 18px;
  }

  .has-sub:hover > .submenu,
  .has-sub.is-open > .submenu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  .has-sub:hover > .sub-toggle svg {
    transform: rotate(180deg);
  }
}

@media (max-width: 960px) {
  .main-nav .has-sub {
    flex-wrap: wrap;
  }

  .sub-toggle {
    width: 34px;
    height: 30px;
  }

  .submenu {
    display: none;
    flex-basis: 100%;
    min-width: 0;
    margin: 6px 0 2px;
    padding: 4px 0 4px 10px;
    border-top: 0;
    border-left: 3px solid var(--sipsa-gold);
    border-radius: 0;
    box-shadow: none;
  }

  .has-sub.is-open > .submenu {
    display: grid;
  }
}

/* =========================================================================
   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;
}

/* Stand / badge / download pictos leading the pills (maquette 2026-10-13):
   larger than the trailing arrows, largest on the two final CTA pills. */
.btn .btn-ico {
  width: 1.45em;
  height: 1.45em;
}

.btn-plat .btn-ico,
.btn-cta .btn-ico {
  width: 1.9em;
  height: 1.9em;
}

/* Client's bayadère artwork along the top of the page: 15px high, the
   motif repeated every 1643px (2026-10-12). bayadere-band.svg is the
   client's file with preserveAspectRatio="none", so it can take that box. */
.bandeau-bayadere {
  background: url('../media/images/01-hero/bayadere-band.svg') repeat-x left top / 1643px 100%;
  height: var(--bandeau-height);
}

.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); }

/* the menu's link padding would otherwise flatten the pills */
.main-nav .nav-ctas .btn {
  gap: var(--space-2xs);
  padding: 0.8em 1.25em;
  font-size: calc(0.9rem * 1.15); /* the menu links' 0.9rem, +15% */
}

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

  .header-ctas {
    display: none;
  }

  /* pushes itself and the burger to the right */
  .lang-switch {
    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%);
}

/* Art from hero-art-fond.svg, swapped in on 2026-10-12. */
.hero-art--frame-right {
  left: calc(1215 / 1921 * 100%);
  top: calc(74 / 1282 * 100%);
  width: calc(750 / 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;
}

/* ---- Maqam Echahid (client feedback 2026-10-07) ----------------------
   The right frame sits lower than in the maquette (the hill rests on the
   band, an earlier client request), which had brought the monument's tips
   down with it. The monument alone is scaled back up from its feet, same
   proportions, so its tips rise to the top of the video as in the
   maquette — still clear of the stage's top edge. */
.hero-art .ha-monument {
  transform-origin: 600px 789px;
  transform: scale(1.095);
}

/* ---- Hero animation (spec §4.1) -------------------------------------
   Livelier than the first, very discreet pass (client feedback
   2026-10-07: "trop discrètes"): wider gestures, quicker loops, the two
   frames slide in when the page opens and the play button pulses.
   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 4.6s ease-in-out infinite; }
.ha-hen    { transform-origin: 301px 398px; animation: ha-peck 3.6s ease-in-out infinite 1.1s; }
.ha-goat   { transform-origin: 36px 419px;  animation: ha-graze 5.2s ease-in-out infinite; }
.ha-goose  { transform-origin: 285px 499px; animation: ha-sway 3.4s ease-in-out infinite 0.6s; }
.ha-fish   { animation: ha-swim 3s ease-in-out infinite; }
.ha-fish--1 { transform-origin: 383px 549px; }
.ha-fish--2 { transform-origin: 353px 572px; animation-delay: -1.1s; animation-duration: 3.4s; }
.ha-fish--3 { transform-origin: 447px 578px; animation-delay: -2s; animation-duration: 2.8s; }
.ha-ripple { transform-origin: 391px 610px; animation: ha-ripple 3s ease-in-out infinite; }

.ha-cowhead { transform-origin: 652px 707px; animation: ha-nod 4.8s ease-in-out infinite 0.4s; }
.ha-sheep   { transform-origin: 419px 738px; animation: ha-breathe 2.6s ease-in-out infinite; }
.ha-rabbit  { transform-origin: 530px 735px; animation: ha-twitch 4.6s ease-in-out infinite 1.2s; }
.ha-turkey  { transform-origin: 492px 800px; animation: ha-sway 3.8s ease-in-out infinite 1.3s; }
.ha-palm    { transform-origin: 709px 792px; animation: ha-palm 5s ease-in-out infinite; }

.hero-art--tractor {
  animation: ha-drive 44s linear infinite;
  animation-delay: -22s; /* 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: 3.8s; }
.hero-art .ha-wheel--front { animation-duration: 2.1s; }

/* Opening: the frames come in from their own side, the Arabic titles rise
   onto the band. `translate` (not transform) so nothing inside is touched. */
.hero-art--frame-left  { animation: hero-in-left 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.hero-art--frame-right { animation: hero-in-right 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both; }
.hero-bandtext         { animation: hero-in-up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.45s both; }

@keyframes hero-in-left {
  from { translate: -14% 0; opacity: 0; }
  to   { translate: 0 0; opacity: 1; }
}

@keyframes hero-in-right {
  from { translate: 14% 0; opacity: 0; }
  to   { translate: 0 0; opacity: 1; }
}

@keyframes hero-in-up {
  from { translate: 0 24px; opacity: 0; }
  to   { translate: 0 0; opacity: 1; }
}

/* Play button: a halo that keeps rippling out, inviting the click. */
.hero-play::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  animation: hero-play-ring 2.2s ease-out infinite;
  pointer-events: none;
}

@keyframes hero-play-ring {
  0%   { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(1.75); opacity: 0; }
}

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

@keyframes ha-peck {
  0%, 55%, 100% { transform: rotate(0deg); }
  62%           { transform: rotate(16deg); }
  68%           { transform: rotate(2deg); }
  74%           { transform: rotate(15deg); }
  82%           { transform: rotate(0deg); }
}

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

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

@keyframes ha-swim {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  30%      { transform: translate(-9px, -3px) rotate(-6deg); }
  65%      { transform: translate(9px, 2px) rotate(5deg); }
}

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

@keyframes ha-nod {
  0%, 50%, 100% { transform: rotate(0deg); }
  65%           { transform: rotate(9deg); }
  82%           { transform: rotate(7deg); }
}

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

@keyframes ha-twitch {
  0%, 74%, 100% { transform: rotate(0deg); }
  78%           { transform: rotate(-8deg); }
  82%           { transform: rotate(0deg); }
  86%           { transform: rotate(-6deg); }
  90%           { transform: rotate(0deg); }
}

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

@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 was the 14 Sept btn-lg
   size (§2.1), +15% since 2026-10-13. */
.btn-xl {
  font-size: 1.15rem;
  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('../media/images/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;
}

/* Left column type (client feedback 2026-10-07: too small next to the
   logo mosaic). Sizes are the maquette's at 1921px — wordmark ~68px,
   theme ~38px, intro and tagline ~20px, practical ~19px, body ~18px —
   scaled down fluidly on narrower screens, never below a readable floor;
   its vertical rhythm is the maquette's too. */
.eco-wordmark {
  display: flex;
  flex-direction: column;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2.25rem, 1.25rem + 2.5vw, 4.25rem);
  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; }

/* The maquette's strip: 408 × 5px, the client's motif at 0.75 scale (one
   repeat = 1438px wide), so its dashes read as in the artwork. */
.eco-bayadere {
  width: 408px;
  max-width: 100%;
  height: 5px;
  margin-top: 40px;
  background: url('../media/images/01-hero/bayadere-band.svg') repeat-x left top / 1438px 100%;
}

.eco-intro {
  margin-top: 24px;
  font-size: clamp(1.05rem, 0.75rem + 0.42vw, 1.25rem);
  font-weight: 600;
  line-height: 1.6;
  color: var(--sipsa-ink);
}

.eco-theme {
  margin-top: 38px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.5rem, 0.875rem + 1.25vw, 2.4rem);
  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: 0.6rem;
  margin-top: 36px;
  padding-block: 1.1rem;
  border-block: 1px solid rgba(11, 69, 33, 0.15);
}

.eco-practical li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: clamp(1rem, 0.6875rem + 0.42vw, 1.2rem);
  font-weight: 600;
  color: var(--sipsa-green-dark);
}

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

.eco-desc {
  margin-top: 40px;
  font-size: clamp(1rem, 0.75rem + 0.31vw, 1.125rem);
  line-height: 1.7;
  opacity: 0.9;
}

.eco-tagline {
  margin-top: 32px;
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 0.75rem + 0.42vw, 1.25rem);
  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;
}

/* ---- Composition motion (client feedback 2026-10-07, item by item) -----
   1. Entrance: the logos and sector tiles cascade in from the centre
      outwards (main.js sets each one's --d delay from its distance to the
      centre), then the small squares pop in.
   2. Then the loops take over: squares float (±8px, a little rotation,
      each at its own pace) with a mouse parallax (--mx/--my × --depth),
      tiles pulse gently, the sun keeps turning.
   3. Hover: a logo zooms to 115% with a drop shadow, comes to the front
      and shows "Accéder au forum →"; a press sinks it to 95% before its
      forum page opens. A tile's pictogram plays its own gesture.
   The three motions use separate properties — entrance: opacity /
   translate / scale, hover: scale, loops: transform — so they never fight.
   Without JS nothing is hidden (main.js adds .is-armed). */
.eco-item {
  position: absolute;
}

.eco-compo.is-armed .eco-item { opacity: 0; scale: 0.6; }
.eco-compo.is-armed .eco-card,
.eco-compo.is-armed .eco-tile { translate: 0 26px; }

.eco-compo.is-in .eco-item {
  opacity: 1;
  scale: 1;
  transition:
    opacity 450ms ease var(--d, 0ms),
    scale 650ms cubic-bezier(0.34, 1.5, 0.64, 1) var(--d, 0ms),
    translate 650ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0ms);
}

.eco-compo.is-in .eco-card,
.eco-compo.is-in .eco-tile { translate: 0 0; }

/* Once everyone is in: quick, undelayed responses to the pointer. */
.eco-compo.is-settled .eco-item {
  transition:
    opacity 200ms ease,
    scale 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
    translate 450ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 260ms ease;
}

.eco-card {
  transition: scale 260ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 260ms ease;
  border: 1.5px solid var(--edge);
  border-radius: 6px;
  background: #fbfcf7;
}

.eco-link {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0.9cqw 1.1cqw;
  border-radius: inherit;
}

.eco-link:focus-visible {
  outline: 2px solid var(--sipsa-green-btn);
  outline-offset: 3px;
}

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

/* Hover / focus: the logo detaches from the mosaic. (Selectors carry the
   extra classes to outrank the entrance rules above.) */
.eco-compo .eco-item.eco-card:hover,
.eco-compo .eco-item.eco-card:focus-within {
  z-index: 10;
  scale: 1.15;
  box-shadow: 0 14px 30px rgba(8, 24, 14, 0.22), 0 3px 8px rgba(8, 24, 14, 0.12);
}

/* Click: a short press, then main.js opens the forum page. */
.eco-compo .eco-item.eco-card:active,
.eco-compo .eco-item.eco-card.is-pressed {
  z-index: 10;
  scale: 0.95;
  box-shadow: 0 4px 10px rgba(8, 24, 14, 0.18);
}

/* "Accéder au forum →" — tells the logo is a link. */
.eco-link::after {
  content: 'Accéder au forum \2192';
  position: absolute;
  left: 50%;
  top: calc(100% + 7px);
  translate: -50% -4px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: var(--sipsa-green-btn);
  color: var(--sipsa-white);
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(8, 24, 14, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, translate 180ms ease;
}

.eco-card:hover .eco-link::after,
.eco-link:focus-visible::after {
  opacity: 1;
  translate: -50% 0;
}

@media (hover: none) {
  .eco-link::after { display: none; }
}

/* Tiles pulse gently, out of phase with each other. */
.eco-tile {
  animation: eco-pulse 4.8s ease-in-out infinite;
  transition: scale 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.eco-tile:nth-of-type(2n) { animation-delay: -1.6s; }
.eco-tile:nth-of-type(3n) { animation-delay: -3.2s; }

.eco-compo .eco-item.eco-tile:hover {
  z-index: 10;
  scale: 1.08;
}

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

/* Squares: slow float, each at its own pace (main.js sets --float-dur,
   --float-delay and the parallax --depth), plus the mouse parallax. */
.eco-compo .eco-item.eco-square {
  translate: calc(var(--mx, 0) * var(--depth, 10) * 1px) calc(var(--my, 0) * var(--depth, 10) * 1px);
  animation: eco-float var(--float-dur, 6.5s) ease-in-out var(--float-delay, 0s) infinite;
}

@keyframes eco-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-8px) rotate(7deg); }
  75%      { transform: translateY(8px) rotate(-6deg); }
}

.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; }

/* Each sector its own gesture (inline SVGs, so their parts can move):
   water — a drop falls and splashes, the waves ripple; plants — the stem
   grows, the ear sways; seeds — the sprout comes up, the glints twinkle;
   livestock — the cow hops, swishes its tail; energy — the sun turns
   (always, slowly) and glows; agro-industry — the bud sprouts on the
   chimney, the windows flicker. Played once as the tile lands, and on a
   loop while it is hovered. */
.px { overflow: visible; }
.px [class*="px-"] { transform-box: view-box; }

.px-drop   { transform-origin: 24px 32px; }
.px-plant  { transform-origin: 24px 44px; }
.px-ear    { transform-origin: 24px 16px; }
.px-sprout { transform-origin: 24px 35.2px; }
.px-cow    { transform-origin: 26px 37px; }
.px-tail   { transform-origin: 9.2px 19.8px; }
.px-bud    { transform-origin: 37.5px 14px; }
.px-rays,
.px-sun    { transform-origin: 24px 24px; }

.px-rays { animation: px-spin 18s linear infinite; }
.px-window + .px-window { --wd: 160ms; }
.px-window + .px-window + .px-window { --wd: 320ms; }

.eco-compo.is-in .px-drop    { animation: px-drop 1s cubic-bezier(0.3, 0.7, 0.4, 1) calc(var(--d, 0ms) + 350ms) both; }
.eco-compo.is-in .px-wave--1 { animation: px-wave 1.2s ease-in-out calc(var(--d, 0ms) + 900ms) both; }
.eco-compo.is-in .px-wave--2 { animation: px-wave 1.2s ease-in-out calc(var(--d, 0ms) + 1000ms) both reverse; }
.eco-compo.is-in .px-plant   { animation: px-grow 1.1s cubic-bezier(0.3, 0.8, 0.3, 1.1) calc(var(--d, 0ms) + 300ms) both; }
.eco-compo.is-in .px-ear     { animation: px-sway 1.6s ease-in-out calc(var(--d, 0ms) + 1300ms) both; }
.eco-compo.is-in .px-sprout  { animation: px-sprout 1.1s cubic-bezier(0.3, 0.8, 0.3, 1.1) calc(var(--d, 0ms) + 300ms) both; }
.eco-compo.is-in .px-glint   { animation: px-glint 1.2s ease-in-out calc(var(--d, 0ms) + 1100ms) both; }
.eco-compo.is-in .px-cow     { animation: px-hop 1s ease-in-out calc(var(--d, 0ms) + 400ms) both; }
.eco-compo.is-in .px-tail    { animation: px-tail 1.2s ease-in-out calc(var(--d, 0ms) + 500ms) both; }
.eco-compo.is-in .px-bud     { animation: px-sprout 1s cubic-bezier(0.3, 0.8, 0.3, 1.1) calc(var(--d, 0ms) + 400ms) both; }
.eco-compo.is-in .px-window  { animation: px-blink 1.2s ease-in-out calc(var(--d, 0ms) + 700ms + var(--wd, 0ms)) both; }
.eco-compo.is-in .px-sun     { animation: px-glow 1.2s ease-in-out calc(var(--d, 0ms) + 400ms) both; }

.eco-compo .eco-item.eco-tile:hover .px-drop    { animation: px-drop-loop 1.4s cubic-bezier(0.3, 0.7, 0.4, 1) infinite; }
.eco-compo .eco-item.eco-tile:hover .px-wave--1 { animation: px-wave-loop 1.4s ease-in-out infinite; }
.eco-compo .eco-item.eco-tile:hover .px-wave--2 { animation: px-wave-loop 1.4s ease-in-out infinite reverse; }
.eco-compo .eco-item.eco-tile:hover .px-plant   { animation: px-grow-loop 2s cubic-bezier(0.3, 0.8, 0.3, 1.1) infinite; }
.eco-compo .eco-item.eco-tile:hover .px-ear     { animation: px-sway-loop 1.6s ease-in-out infinite; }
.eco-compo .eco-item.eco-tile:hover .px-sprout  { animation: px-sprout-loop 2s cubic-bezier(0.3, 0.8, 0.3, 1.1) infinite; }
.eco-compo .eco-item.eco-tile:hover .px-glint   { animation: px-glint-loop 1.2s ease-in-out infinite; }
.eco-compo .eco-item.eco-tile:hover .px-cow     { animation: px-hop-loop 1.1s ease-in-out infinite; }
.eco-compo .eco-item.eco-tile:hover .px-tail    { animation: px-tail-loop 1.1s ease-in-out infinite; }
.eco-compo .eco-item.eco-tile:hover .px-bud     { animation: px-sway-loop 1.4s ease-in-out infinite; }
.eco-compo .eco-item.eco-tile:hover .px-window  { animation: px-blink-loop 1.2s ease-in-out var(--wd, 0ms) infinite; }
.eco-compo .eco-item.eco-tile:hover .px-rays    { animation-duration: 3s; }
.eco-compo .eco-item.eco-tile:hover .px-sun     { animation: px-glow-loop 1.5s ease-in-out infinite; }

@keyframes px-drop {
  0%   { transform: translateY(-18px) scale(0.9, 1.15); opacity: 0; }
  45%  { transform: translateY(0) scale(0.95, 1.08); opacity: 1; }
  60%  { transform: translateY(0) scale(1.14, 0.84); }
  78%  { transform: translateY(-2px) scale(0.97, 1.04); }
  100% { transform: none; opacity: 1; }
}

@keyframes px-drop-loop {
  0%       { transform: translateY(-18px) scale(0.9, 1.15); opacity: 0; }
  35%      { transform: translateY(0) scale(0.95, 1.08); opacity: 1; }
  48%      { transform: translateY(0) scale(1.14, 0.84); }
  62%      { transform: translateY(-2px) scale(0.97, 1.04); }
  75%, 100% { transform: none; opacity: 1; }
}

@keyframes px-wave {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-3px); }
}

@keyframes px-wave-loop {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-3px); }
}

@keyframes px-grow {
  0%   { transform: scale(0.6, 0.1); opacity: 0; }
  60%  { transform: scale(1.02, 1.08); opacity: 1; }
  80%  { transform: scale(1, 0.97); }
  100% { transform: none; opacity: 1; }
}

@keyframes px-grow-loop {
  0%        { transform: scale(0.6, 0.1); opacity: 0; }
  40%       { transform: scale(1.02, 1.08); opacity: 1; }
  52%       { transform: scale(1, 0.97); }
  62%, 100% { transform: none; opacity: 1; }
}

@keyframes px-sway {
  0%, 100% { transform: rotate(0deg); }
  30%      { transform: rotate(-12deg); }
  65%      { transform: rotate(9deg); }
}

@keyframes px-sway-loop {
  0%, 100% { transform: rotate(0deg); }
  30%      { transform: rotate(-12deg); }
  65%      { transform: rotate(9deg); }
}

@keyframes px-sprout {
  0%   { transform: scale(0.15); opacity: 0; }
  65%  { transform: scale(1.1); opacity: 1; }
  100% { transform: none; opacity: 1; }
}

@keyframes px-sprout-loop {
  0%        { transform: scale(0.15); opacity: 0; }
  42%       { transform: scale(1.1); opacity: 1; }
  60%, 100% { transform: none; opacity: 1; }
}

@keyframes px-glint {
  0%, 50%, 100% { opacity: 1; }
  25%, 75%      { opacity: 0.15; }
}

@keyframes px-glint-loop {
  0%, 50%, 100% { opacity: 1; }
  25%, 75%      { opacity: 0.15; }
}

@keyframes px-hop {
  0%, 50%, 100% { transform: none; }
  25%           { transform: translateY(-3px) rotate(-2deg); }
  72%           { transform: translateY(-1.5px) rotate(1deg); }
}

@keyframes px-hop-loop {
  0%, 50%, 100% { transform: none; }
  25%           { transform: translateY(-3px) rotate(-2deg); }
  72%           { transform: translateY(-1.5px) rotate(1deg); }
}

@keyframes px-tail {
  0%, 100% { transform: rotate(0deg); }
  20%      { transform: rotate(22deg); }
  45%      { transform: rotate(-10deg); }
  70%      { transform: rotate(14deg); }
}

@keyframes px-tail-loop {
  0%, 100% { transform: rotate(0deg); }
  20%      { transform: rotate(22deg); }
  45%      { transform: rotate(-10deg); }
  70%      { transform: rotate(14deg); }
}

@keyframes px-blink {
  0%, 100% { opacity: 1; }
  40%      { opacity: 0.2; }
}

@keyframes px-blink-loop {
  0%, 100% { opacity: 1; }
  40%      { opacity: 0.2; }
}

@keyframes px-glow {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}

@keyframes px-glow-loop {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}

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

.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('../media/images/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;
  }

  .eco-link {
    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;
}

/* Name, role and link scaled up with the intro paragraph (client feedback
   2026-10-07: too small next to the headline, portrait and button), within
   the usual web range. */
.about-president-name {
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 0.9rem + 0.3vw, 1.25rem);
  font-weight: 700;
  color: var(--sipsa-ink);
}

.about-president-title {
  margin-top: 2px;
  font-size: clamp(0.95rem, 0.85rem + 0.2vw, 1.05rem);
  opacity: 0.8;
}

.about-president-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  margin-top: var(--space-2xs);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(0.92rem, 0.85rem + 0.15vw, 1rem);
  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: clamp(1.0625rem, 0.9rem + 0.3vw, 1.2rem);
  line-height: 1.7;
  opacity: 0.9;
}

.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 {
  font-size: calc(var(--fs-small) * 1.15);
  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;
}

/* Client feedback 2026-10-07: the phones show at once, with a quick, firm
   rise (main.js arms it; ~0.35s, no lingering fade), then keep floating up
   and down — faster and livelier than the first 6–7s loop, still smooth.
   Entrance on opacity/translate/scale, float on transform: no clash. */
.plat-phone {
  position: absolute;
  height: auto;
  filter: drop-shadow(0 22px 28px rgba(8, 24, 14, 0.18));
  animation: plat-float 3.2s 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: -1.3s;   /* out of step with the splash phone */
  animation-duration: 3.6s;
}

.plat-phones.is-armed .plat-phone {
  opacity: 0;
  translate: 0 70px;
  scale: 0.94;
}

.plat-phones.is-in .plat-phone {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  transition:
    opacity 200ms ease-out,
    translate 360ms cubic-bezier(0.2, 0.9, 0.25, 1.15),
    scale 360ms cubic-bezier(0.2, 0.9, 0.25, 1.15);
}

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

@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;
}

/* Two rows, the maquette's 340px cards and 22px gutters, scrolled left and
   right with the arrows (user request 2026-10-12): the shared carousel in
   main.js steps one column (a 2025 card over a 2024 card) and loops.
   Four columns show on desktop, two on tablets, one on phones. */
.tem-carousel {
  --tem-cols: 4;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 50px;
  align-items: center;
  gap: 26px;
  max-width: calc(4 * 340px + 3 * 22px + 2 * (50px + 26px));
  margin: 50px auto 0;
}

/* A grid of two rows that every column shares (subgrid), so the bottom row
   stays level even when a name wraps to more lines in one column. */
.tem-track {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: auto auto;
  grid-auto-columns: calc((100% - (var(--tem-cols) - 1) * 22px) / var(--tem-cols));
  gap: 22px;
  padding: 8px 6px; /* room for the hover lift and the focus ring */
  scroll-padding-inline: 6px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

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

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

.tem-col {
  grid-row: span 2;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 22px;
  scroll-snap-align: start;
}

.tem-item {
  display: flex;
}

.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);
}

/* 2024 testimonials: no photo or film of their own, so each borrows one of
   the 2025 stills, shuffled by main.js (user decision 2026-10-12). Nothing
   to open, so no lift or pointer; the quote fades in on hover or keyboard
   focus like the 2025 cards, and stays shown where there is no hover. */
.tem-card--still {
  cursor: default;
}

.tem-card--still:hover {
  transform: none;
  box-shadow: none;
}

@media (hover: none) {
  .tem-card--still .tem-quote {
    opacity: 1;
    transform: none;
  }
}

.tem-logo--dark {
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--sipsa-green-deep);
}

@media (max-width: 1100px) {
  .tem-carousel {
    --tem-cols: 2;
    max-width: calc(2 * 340px + 22px + 2 * (50px + 26px));
  }
}

/* Phones: one column, full width, the arrows centred under it. */
@media (max-width: 640px) {
  .tem-carousel {
    --tem-cols: 1;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "track track"
      "prev  next";
    gap: 14px;
    max-width: 420px;
    margin-top: 36px;
  }

  .tem-track { grid-area: track; }
  .tem-carousel [data-carousel-prev] { grid-area: prev; justify-self: end; }
  .tem-carousel [data-carousel-next] { grid-area: next; justify-self: start; }

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

  .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: clamp(44px, 3.6vw, 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;
  /* scales with the (now fluid) logos; 2rem at the maquette's width */
  font-size: clamp(1.15rem, 0.55rem + 1.2vw, 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);
}

/* Smaller (client feedback 2026-10-07: larger than the maquette). The
   widths were the maquette's 1921px pixels, fixed, so on a laptop screen
   the logos took a far bigger share of the page than in the maquette.
   They now keep the maquette's share of the width, a little under it,
   with floors so each logo stays legible. */
.spon-logo--gold     { width: clamp(240px, 22vw, 420px); }
.spon-logo--silver   { width: clamp(118px, 9.4vw, 180px); }
.spon-logo--atlantis { width: clamp(130px, 10.4vw, 200px); }
.spon-logo--cosider  { width: clamp(200px, 17vw, 325px); }
.spon-logo--tntex    { width: clamp(100px, 8.2vw, 158px); }

.spon-logos--others {
  max-width: min(1125px, 66vw);
}

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

/* =========================================================================
   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: 1.15rem;
  gap: 0.75em;
}

.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;
  }
}