/* =========================================================================
   SIPSA AFRIKA FOOD EXPORT — page styles
   Loaded after ../css/style.css. Part 1 re-points the homepage's colour
   tokens, so its shared components (header, pills, carousel dots, modal,
   footer) take the Afrika Food Export palette:
     burgundy #A92837  main colour (the logo's "Food Export")
     orange   #F8A441  accents, figures on dark grounds
     gold     #FBD135  the homepage's gold pill, for the main calls to action
     green    #178155  accent (the logo's "SIPSA Afrika"); the footer keeps
                       the homepage's forest green #0B4521
   The rest lays out this page after the client's reference
   (docs/afrika-reference): Poppins uppercase two-tone titles, bayadère
   strips, rounded cards, pill buttons.
   ========================================================================= */

/* 1. TOKENS ---------------------------------------------------------------- */
:root {
  --afk-burgundy: #a92837;
  --afk-burgundy-deep: #6e1622;
  --afk-burgundy-ink: #4a0f18;     /* text on gold/orange: 7:1, the brand burgundy is only 4.4:1 */
  --afk-burgundy-night: #350a13;   /* the reference's dark cards */
  --afk-orange: #f8a441;
  --afk-orange-dark: #ec8c20;
  --afk-gold: #fbd135;             /* = homepage --sipsa-gold */
  --afk-gold-dark: #e9bd1c;
  --afk-green: #178155;
  --afk-green-deep: #0e5c3c;
  --afk-forest: #0b4521;           /* = homepage --sipsa-green-dark */
  --afk-olive: #7d8a4e;            /* the client's logistics pictograms */
  --afk-cream: #fbf6f0;            /* the reference's warm cream */
  --afk-rose: #f4e3e2;
  --afk-ink: #2a0d12;              /* titles' dark half */
  --afk-text: #3a2a2c;
  --afk-muted: #6c5d60;
  --afk-r: 20px;                   /* card radius */
  --afk-r-lg: 24px;                /* panels */

  /* homepage tokens, re-pointed */
  --sipsa-green-dark: var(--afk-burgundy-deep);
  --sipsa-green-primary: var(--afk-burgundy);
  --sipsa-green-light: #e9b7bc;
  --sipsa-green-secondary: #7a2a35;
  --sipsa-gold: var(--afk-gold);
  --sipsa-gold-dark: var(--afk-gold-dark);
  --sipsa-cream: var(--afk-cream);
  --sipsa-green-btn: var(--afk-burgundy);
  --sipsa-green-deep: var(--afk-burgundy-deep);
  --sipsa-green-bright: #b8323f;
  --sipsa-green-text: #8c1f2c;
  --sipsa-green-muted: #8a5a60;
  --band-dark: linear-gradient(100deg, var(--afk-burgundy-deep) 0%, #8d1d2b 45%, #b8323f 100%);
  --band-tint: var(--afk-rose);
  --ink-green: #22090d;
  --shadow-sm: 0 2px 10px rgba(74, 15, 24, 0.07);
  --shadow-md: 0 12px 30px rgba(74, 15, 24, 0.1);
  --shadow-lift: 0 18px 36px rgba(74, 15, 24, 0.16);
}

/* Slide-ins from the side never widen the page. */
.afk main {
  overflow-x: clip;
}

/* Gold pills carry deep burgundy text (contrast, see token above). */
.afk .btn-gold,
.afk .main-nav .nav-ctas .btn-gold {
  color: var(--afk-burgundy-ink);
}

/* Header ------------------------------------------------------------------- */
.afk .site-logo img {
  height: 58px;
  width: auto;
}

.afk .header-inner {
  max-width: var(--container-max);
}

.afk .main-nav > ul {
  justify-content: center;
}

/* The section in view (js/afrika.js), as the reference's underline. */
.afk .main-nav a.is-active {
  color: var(--afk-burgundy);
  border-bottom-color: var(--afk-burgundy);
}

.afk .header-ctas {
  display: flex;
  gap: var(--space-2xs);
}

.afk .afk-pill-green {
  background: var(--afk-green);
  color: var(--sipsa-white);
}

.afk .afk-pill-green:hover {
  background: var(--afk-green-deep);
}

.afk .main-nav .nav-ctas {
  gap: var(--space-2xs);
}

@media (max-width: 1280px) {
  .afk .header-ctas .afk-pill-green { display: none; }
}

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

/* 2. SCROLL REVEALS (js/afrika.js) -------------------------------------------
   The hidden state exists only under html.afk-motion, which the script sets
   when motion is allowed. */
.afk-motion [data-afk-reveal]:not(.is-in) {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
}

.afk-motion [data-afk-reveal="left"]:not(.is-in) {
  transform: translate3d(-40px, 0, 0);
}

.afk-motion [data-afk-reveal="right"]:not(.is-in) {
  transform: translate3d(40px, 0, 0);
}

.afk-motion [data-afk-reveal]:not(.is-done) {
  transition:
    opacity 700ms cubic-bezier(0.2, 0.65, 0.25, 1) var(--afk-delay, 0ms),
    transform 700ms cubic-bezier(0.2, 0.65, 0.25, 1) var(--afk-delay, 0ms);
}

/* 3. SHARED PIECES ----------------------------------------------------------- */
.afk-section {
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 5.5rem);
}

.afk-band {
  background: var(--afk-cream);
}

.afk-head {
  margin-bottom: var(--space-lg);
}

.afk-head--center {
  text-align: center;
}

/* Title left, a note or the controls on the right. */
.afk-head--split {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-sm) var(--space-lg);
}

.afk-head-aside {
  max-width: 34ch;
  padding-bottom: 0.35em;
  color: var(--afk-text);
}

/* Eyebrow: a short rule before the label. */
.afk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: var(--space-2xs);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--afk-burgundy);
}

.afk-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

.afk-head--center .afk-eyebrow {
  justify-content: center;
}

.afk-title {
  max-width: 44ch;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.3rem);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--afk-ink);
}

.afk-head--center .afk-title {
  margin-inline: auto;
}

/* Two-tone titles. */
.afk-red { color: var(--afk-burgundy); }
.afk-orange { color: var(--afk-orange); }
.afk-ink { color: var(--afk-ink); }

.afk-head--light .afk-title { color: var(--sipsa-white); }
.afk-head--light .afk-eyebrow { color: var(--afk-orange); }

.afk-lead {
  max-width: 72ch;
  margin-bottom: var(--space-lg);
  font-size: 1.05rem;
  color: var(--afk-text);
}

/* Edition number placeholder — deliberately visible until the client confirms. */
.afk-tbc {
  display: inline-flex;
  align-items: center;
  padding: 0.12em 0.7em;
  border: 1.5px dashed var(--afk-burgundy);
  border-radius: var(--radius-pill);
  background: rgba(248, 164, 65, 0.18);
  color: var(--afk-burgundy-deep);
  font-weight: 700;
  font-size: 0.92em;
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;
}

.afk-tbc--dark {
  border-color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.12);
  color: var(--sipsa-white);
}

/* 4. HERO -------------------------------------------------------------------- */
.afk-hero {
  position: relative;
  overflow: hidden;
  background: var(--afk-cream);
}

/* No z-index here: the visual's multiply blend has to reach the hero's
   cream, so the inner grid must not form its own stacking context. */
.afk-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-md);
  padding-block: var(--space-md) clamp(4rem, 3rem + 3vw, 6rem);
}

.afk-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-bottom: var(--space-sm);
  font-size: 0.78rem;
  color: var(--afk-muted);
}

.afk-crumbs a:hover {
  color: var(--afk-burgundy);
}

.afk-crumbs [aria-current] {
  color: var(--afk-burgundy);
  font-weight: 600;
}

.afk-hero-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em 0.8em;
  margin-bottom: var(--space-md);
  font-size: 0.8rem;
}

.afk-kicker-pill {
  padding: 0.5em 1.1em;
  border-radius: var(--radius-pill);
  background: var(--afk-burgundy);
  color: var(--sipsa-white);
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.afk-hero-logo {
  width: clamp(200px, 12vw + 90px, 290px);
  height: auto;
  margin-bottom: var(--space-sm);
}

.afk-hero-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2.3rem, 1.4rem + 3vw, 3.7rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.afk-hero-tagline {
  margin-top: var(--space-xs);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--afk-green);
}

.afk-hero-lead {
  max-width: 44ch;
  margin-top: var(--space-2xs);
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--afk-text);
}

/* The logo's five sectors, as square-cornered tags. */
.afk-chain {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--space-sm) 0 0;
  padding: 0;
  list-style: none;
}

.afk-chain li {
  padding: 0.38em 0.85em;
  border-radius: 4px;
  background: var(--chip);
  color: var(--chip-ink, var(--sipsa-white));
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Date + place, as two info cards. */
.afk-hero-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  max-width: 560px;
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
}

.afk-info-card {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.85rem 1rem;
  border-radius: 16px;
  background: var(--sipsa-white);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.3;
  color: var(--afk-ink);
}

.afk-info-card small {
  display: block;
  margin-bottom: 0.15em;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--afk-burgundy);
}

.afk-info-ico {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--afk-rose);
  color: var(--afk-burgundy);
}

.afk-info-ico svg {
  width: 22px;
  height: 22px;
}

.afk-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.afk-hero-ctas .btn {
  font-size: 0.9rem;
  padding: 1em 1.5em;
}

.afk-hero-ctas .btn-green {
  box-shadow: 0 10px 22px rgba(169, 40, 55, 0.28);
}

.afk-btn-outline {
  border: 2px dashed rgba(169, 40, 55, 0.55);
  background: transparent;
  color: var(--afk-burgundy);
}

.afk-btn-outline:hover {
  border-style: solid;
  border-color: var(--afk-burgundy);
  background: var(--sipsa-white);
}

/* The visual bleeds off the top and the right edge of the page. */
.afk-hero-art {
  position: relative;
  align-self: stretch;
  margin: calc(-1 * var(--space-md)) calc(-1 * var(--container-pad) - max(0px, (100vw - var(--container-max)) / 2)) 0 0;
}

.afk-hero-art img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  max-height: 760px;
  object-fit: contain;
  object-position: right top;
  mix-blend-mode: multiply;
}

/* Wave into the band: two layers, each twice the width of the page, that
   slide by half their width so the loop is seamless. */
.afk-hero-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(40px, 6vw, 90px);
  overflow: hidden;
  pointer-events: none;
}

.afk-wv {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 200%;
  height: 100%;
}

.afk-wv--back { animation: afk-wave 26s linear infinite reverse; }
.afk-wv--front { animation: afk-wave 18s linear infinite; }

@keyframes afk-wave { to { transform: translate3d(-50%, 0, 0); } }

/* Thin band under the wave: the old banner as a slow ticker. Eight equal
   groups; the track slides by one group, so the loop is seamless. */
.afk-ribbon {
  overflow: hidden;
  padding: 0.75rem 0 0.9rem;
  background: #8d1d2b;
  color: var(--sipsa-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.afk-ribbon-track {
  display: flex;
  width: max-content;
  animation: afk-ticker 34s linear infinite;
}

.afk-ribbon:hover .afk-ribbon-track { animation-play-state: paused; }

.afk-ribbon-group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 1.4em;
  padding-right: 1.4em;
}

@keyframes afk-ticker { to { transform: translate3d(-12.5%, 0, 0); } }

.afk-ribbon-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--afk-orange);
}

/* Ambient layer: behind the copy and the visual (painted before them). */
.afk-hero-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.afk-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
}

.afk-glow--a {
  left: -8%;
  top: -12%;
  width: 46vw;
  height: 46vw;
  max-width: 640px;
  max-height: 640px;
  background: radial-gradient(circle, rgba(251, 209, 53, 0.55), rgba(251, 209, 53, 0) 70%);
  animation: afk-glow-a 18s ease-in-out infinite alternate;
}

.afk-glow--b {
  right: 18%;
  bottom: -18%;
  width: 40vw;
  height: 40vw;
  max-width: 560px;
  max-height: 560px;
  background: radial-gradient(circle, rgba(244, 163, 170, 0.6), rgba(244, 163, 170, 0) 70%);
  animation: afk-glow-b 22s ease-in-out infinite alternate;
}

@keyframes afk-glow-a { to { transform: translate3d(14%, 18%, 0) scale(1.15); } }
@keyframes afk-glow-b { to { transform: translate3d(-18%, -10%, 0) scale(0.9); } }

/* Grains, leaves, olives, coffee beans and oil drops rise like bubbles:
   the <i> climbs, its <svg> sways and turns. */
.afk-particles i {
  position: absolute;
  left: var(--x);
  bottom: -40px;
  width: calc(var(--s, 16px) * 1.25);
  height: calc(var(--s, 16px) * 1.25);
  color: var(--c);
  animation: afk-rise var(--t, 20s) linear infinite;
  animation-delay: var(--d, 0s);
  will-change: transform, opacity;
}

.afk-particles svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
  animation: afk-sway calc(var(--t, 20s) / 4) ease-in-out infinite alternate;
  animation-delay: var(--d, 0s);
}

@keyframes afk-rise {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  8%   { opacity: 0.75; }
  85%  { opacity: 0.75; }
  100% { transform: translate3d(0, -115vh, 0); opacity: 0; }
}

@keyframes afk-sway {
  from { transform: translateX(-14px) rotate(0deg); }
  to   { transform: translateX(14px) rotate(var(--r, 140deg)); }
}

/* The field: one plant or animal for each food of the Africa visual, in a
   single row along the whole bottom of the hero. Their foot sits behind the
   wave, so they seem to grow out of the ground, and they sway from it. The
   layer comes after the copy and the visual, so the fist's multiply blend
   can't swallow them. --k scales the whole field with the screen; when the
   row is still too wide, each drawing shrinks and keeps its foot down
   (preserveAspectRatio xMidYMax on the symbols). */
.afk-hero-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.afk-field {
  --k: 1;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-inline: 0.5%;
}

.afk-plant {
  flex: 0 1 auto;
  min-width: 0;
  width: calc(var(--w) * var(--k));
  height: calc(var(--h) * var(--k));
  margin-inline: -4px;   /* plants overlap a little, like a hedge */
  opacity: 0.92;
  transform-origin: 50% 100%;
  animation: afk-ear var(--t, 5s) ease-in-out infinite alternate;
  animation-delay: var(--d, 0s);
}

.afk-plant--tree { animation-name: afk-tree; }   /* trunks bend less */

.afk-plant--ear {
  color: #c99a06;
  fill: #e9bd1c;
  opacity: 0.85;
}

/* Hens peck now and then, chicks hop; "flip" ones face the other way. */
.afk-plant--hen {
  transform-origin: 50% 95%;
  animation: afk-peck var(--t, 5s) ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

.afk-plant--chick {
  animation: afk-hop var(--t, 1.8s) ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

.afk-plant--flip { scale: -1 1; }

/* Animals and low crops stand on the wave's crest instead of behind it. */
.afk-plant--hen,
.afk-plant--chick,
.afk-plant:has(use[href="#fx-peanut"]) { margin-bottom: calc(38px * var(--k)); }
.afk-plant:has(use[href="#fx-pineapple"]),
.afk-plant:has(use[href="#fx-tomato"]) { margin-bottom: calc(18px * var(--k)); }

@keyframes afk-ear {
  from { transform: rotate(-5deg) skewX(-2deg); }
  to   { transform: rotate(6deg) skewX(3deg); }
}

@keyframes afk-tree {
  from { transform: rotate(-1.6deg) skewX(-1deg); }
  to   { transform: rotate(2deg) skewX(1.2deg); }
}

@keyframes afk-peck {
  0%, 62%, 100% { transform: rotate(0deg); }
  68%, 80%      { transform: rotate(16deg) translateY(2px); }
  74%           { transform: rotate(10deg); }
}

@keyframes afk-hop {
  0%, 55%, 100% { transform: translateY(0); }
  70%           { transform: translateY(-7px); }
  82%           { transform: translateY(0); }
}

/* Room for the field under the buttons on two-column layouts. */
@media (min-width: 961px) {
  .afk-hero-inner { padding-bottom: calc(clamp(4rem, 3rem + 3vw, 6rem) + 56px); }
}

@media (max-width: 1440px) { .afk-field { --k: 0.86; } }
@media (max-width: 1360px) { .afk-field { --k: 0.76; } }
@media (max-width: 1200px) { .afk-field { --k: 0.7; } }
@media (max-width: 960px)  { .afk-field { --k: 0.6; } }
@media (max-width: 640px) {
  .afk-field { --k: 0.5; }
  .afk-plant--low { display: none; }   /* phones keep the trees' half */
}
/* The Africa visual floats; golden sparkles twinkle around it. */
.afk-hero-art img {
  animation: afk-float 8s ease-in-out infinite alternate;
}

@keyframes afk-float {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to   { transform: translate3d(0, -12px, 0) rotate(-0.8deg); }
}

.afk-sparks {
  filter: drop-shadow(0 0 6px rgba(251, 209, 53, 0.9));
}

.afk-sparks i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 22px;
  height: 22px;
  background: radial-gradient(circle, #fff 0 18%, rgba(251, 209, 53, 0.95) 30%, rgba(251, 209, 53, 0) 70%);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: afk-twinkle 3.4s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

@keyframes afk-twinkle {
  0%, 100% { transform: scale(0.2) rotate(0deg); opacity: 0; }
  45%      { transform: scale(1.25) rotate(45deg); opacity: 1; }
  70%      { transform: scale(0.8) rotate(80deg); opacity: 0.6; }
}

/* "Réservez votre stand" sends a soft ring now and then. */
.afk-hero-ctas .btn-green {
  animation: afk-pulse 2.8s ease-out infinite;
}

.afk-hero-ctas .btn-green:hover { animation-play-state: paused; }

@keyframes afk-pulse {
  0%   { box-shadow: 0 10px 22px rgba(169, 40, 55, 0.28), 0 0 0 0 rgba(169, 40, 55, 0.35); }
  70%  { box-shadow: 0 10px 22px rgba(169, 40, 55, 0.28), 0 0 0 14px rgba(169, 40, 55, 0); }
  100% { box-shadow: 0 10px 22px rgba(169, 40, 55, 0.28), 0 0 0 0 rgba(169, 40, 55, 0); }
}

@media (max-width: 960px) {
  .afk-hero-inner { grid-template-columns: minmax(0, 1fr); }
  .afk-hero-art { margin: 0 calc(-1 * var(--container-pad)) 0; max-width: none; }
  .afk-hero-art img { max-height: 520px; object-position: center top; }
  .afk-particles i:nth-child(n + 9) { display: none; }   /* lighter on small screens */
}

@media (max-width: 560px) {
  .afk-hero-info { grid-template-columns: minmax(0, 1fr); }
  .afk-hero-ctas .btn { width: 100%; white-space: normal; }
}

/* Reduced motion: everything stands still; moving-only pieces are hidden,
   and the ribbon goes back to a single centred line. */
@media (prefers-reduced-motion: reduce) {
  .afk-hero *,
  .afk-ribbon * { animation: none !important; }
  .afk-particles,
  .afk-sparks { display: none; }
  .afk-ribbon-track { width: auto; justify-content: center; }
  .afk-ribbon-group[aria-hidden] { display: none; }
  .afk-ribbon-group { flex-wrap: wrap; justify-content: center; padding-inline: var(--container-pad); }
  .afk-ribbon-group > .afk-ribbon-dot:last-child { display: none; }
}

/* 5. À PROPOS ------------------------------------------------------------------- */
.afk-about-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

.afk-about-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--afk-r-lg);
  background: var(--sipsa-white);
  box-shadow: var(--shadow-md);
  line-height: 1.7;
  color: var(--afk-text);
}

.afk-about-card h3 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.35;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--afk-burgundy);
}

.afk-about-card strong {
  color: var(--afk-burgundy);
}

/* The edition, as a pull quote. */
.afk-edition {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-2xs);
  padding: var(--space-sm) var(--space-md);
  border-left: 4px solid var(--afk-orange);
  border-radius: 0 14px 14px 0;
  background: var(--afk-cream);
  font-size: 0.95rem;
}

.afk-edition-n {
  flex-shrink: 0;
  display: grid;
  justify-items: center;
  gap: 0.3em;
}

.afk-edition-n span {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--afk-burgundy);
}

.afk-edition-n .afk-tbc {
  font-size: 0.66rem;
}

.afk-about-card--dark {
  background: var(--afk-burgundy-night);
  color: rgba(255, 255, 255, 0.85);
}

/* The reference's large ring in the corner. */
.afk-about-card--dark::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -110px;
  width: 300px;
  height: 300px;
  border: 26px solid rgba(248, 164, 65, 0.12);
  border-radius: 50%;
  pointer-events: none;
}

.afk-about-card--dark h3 {
  color: var(--afk-orange);
}

.afk-about-card--dark strong {
  color: var(--sipsa-white);
}

.afk-points {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-2xs);
  margin: var(--space-2xs) 0 0;
  padding: 0;
  list-style: none;
}

.afk-points li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.8rem 1rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  line-height: 1.45;
  transition: background-color var(--transition-base);
}

.afk-points li:hover {
  background: rgba(255, 255, 255, 0.1);
}

.afk-point-ico {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--afk-orange);
  color: var(--afk-burgundy-ink);
}

.afk-point-ico svg {
  width: 20px;
  height: 20px;
}

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

@media (max-width: 480px) {
  .afk-edition { flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
}

/* 6. OPPORTUNITÉS ---------------------------------------------------------------- */
.afk-opps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm) var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --tone / --tint per card (HTML): the coloured top edge, icon and number. */
.afk-opp {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-top: 4px solid var(--tone);
  border-radius: var(--afk-r);
  background: var(--sipsa-white);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.afk-opp:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

.afk-opp-ico {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--tint);
  color: var(--tone);
}

.afk-opp-ico svg {
  width: 26px;
  height: 26px;
}

.afk-opp-n {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-md);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--tint);
}

.afk-opp p {
  font-weight: 500;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--afk-ink);
}

/* The three action tiles under the cards. */
.afk-actions {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.afk-action {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--afk-r);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.afk-action:hover,
.afk-action:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

.afk-action strong {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1.3;
  text-transform: uppercase;
}

.afk-action small {
  display: block;
  margin-top: 0.2em;
  font-size: 0.8rem;
  opacity: 0.8;
}

.afk-action-ico {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
}

.afk-action-ico svg {
  width: 26px;
  height: 26px;
}

.afk-action--stand {
  background: var(--afk-burgundy);
  color: var(--sipsa-white);
}

.afk-action--stand .afk-action-ico {
  background: var(--afk-gold);
  color: var(--afk-burgundy-ink);
}

.afk-action--video {
  background: var(--afk-burgundy-night);
  color: var(--sipsa-white);
}

.afk-action--video .afk-action-ico {
  background: rgba(255, 255, 255, 0.12);
}

.afk-action--doc {
  background: var(--sipsa-white);
  color: var(--afk-burgundy);
  box-shadow: var(--shadow-sm);
}

.afk-action--doc .afk-action-ico {
  background: var(--afk-rose);
}

.afk-actions-badge {
  margin-top: var(--space-md);
  text-align: center;
  color: var(--afk-text);
}

.afk-actions-badge a,
.afk-final-badge a {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-weight: 700;
  color: var(--afk-burgundy);
}

.afk-actions-badge svg,
.afk-final-badge svg {
  width: 1em;
  height: 1em;
}

@media (max-width: 960px) {
  .afk-opps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .afk-actions { grid-template-columns: minmax(0, 1fr); }
}

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

/* 7. POURQUOI — three cards at a time ------------------------------------------- */
.afk-why-controls {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.afk-why-nav {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--afk-burgundy);
  color: var(--sipsa-white);
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.afk-why-nav:hover {
  background: var(--afk-burgundy-deep);
  transform: scale(1.06);
}

.afk-why-nav--prev {
  background: var(--sipsa-white);
  color: var(--afk-burgundy);
  box-shadow: inset 0 0 0 1.5px rgba(169, 40, 55, 0.25);
}

.afk-why-nav--prev:hover {
  background: var(--afk-rose);
}

.afk-why-nav svg {
  width: 22px;
  height: 22px;
}

.afk-why-counter {
  min-width: 3.2em;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--afk-muted);
}

.afk-why-track {
  --afk-gap: var(--space-md);
  display: flex;
  gap: var(--afk-gap);
  margin: calc(-1 * var(--space-sm)) -12px 0;
  padding: var(--space-sm) 12px var(--space-md);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 12px;
  scrollbar-width: none;
}

.afk-why-track::-webkit-scrollbar {
  display: none;
}

.afk-why-card {
  flex: 0 0 calc((100% - 2 * var(--afk-gap)) / 3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-height: 400px;
  padding: var(--space-md);
  border-radius: var(--afk-r);
  background: var(--sipsa-white);
  box-shadow: 0 0 0 1px rgba(110, 22, 34, 0.07), 0 4px 14px rgba(74, 15, 24, 0.06);
  scroll-snap-align: start;
  transition: background-color 400ms ease, box-shadow 400ms ease;
}

.afk-why-count {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--afk-green);
}

.afk-why-card h3 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--afk-ink);
}

.afk-why-card > p:not([class]) {
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--afk-text);
}

.afk-why-big {
  margin-top: var(--space-xs);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2rem, 1.5rem + 1.4vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--afk-burgundy);
}

.afk-why-label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--afk-ink);
}

.afk-why-source {
  margin-top: auto;
  padding-top: var(--space-sm);
  font-size: 0.75rem;
  font-style: italic;
  color: var(--afk-muted);
}

/* The highlighted card (js/afrika.js keeps it on the first in view). */
.afk-why-card.is-focus {
  background: linear-gradient(160deg, var(--afk-burgundy) 0%, var(--afk-burgundy-deep) 100%);
  box-shadow: 0 8px 18px rgba(110, 22, 34, 0.22);
}

.afk-why-card.is-focus .afk-why-count,
.afk-why-card.is-focus .afk-why-big { color: var(--afk-orange); }
.afk-why-card.is-focus h3,
.afk-why-card.is-focus .afk-why-label { color: var(--sipsa-white); }
.afk-why-card.is-focus > p:not([class]) { color: rgba(255, 255, 255, 0.86); }
.afk-why-card.is-focus .afk-why-source { color: rgba(255, 255, 255, 0.7); }

/* Dots: the active one stretches into a pill. */
.afk-why-dots {
  margin-top: var(--space-xs);
}

.afk-why-dots span {
  width: 8px;
  height: 8px;
  background: var(--afk-rose);
  transition: width var(--transition-base), background-color var(--transition-base);
}

.afk-why-dots span.is-active {
  width: 28px;
  border-radius: 4px;
  background: var(--afk-burgundy);
}

@media (max-width: 1100px) {
  .afk-why-card { flex-basis: calc((100% - var(--afk-gap)) / 2); }
}

@media (max-width: 760px) {
  .afk-why-track { --afk-gap: var(--space-sm); }
  .afk-why-card { flex-basis: 86%; min-height: 0; }
  .afk-why-controls { display: none; }
}

/* 8. INNOVATION — full-width burgundy band ------------------------------------------ */
.afk-innov {
  background:
    radial-gradient(ellipse at 0% 100%, rgba(169, 40, 55, 0.55) 0, transparent 55%),
    linear-gradient(120deg, #3d0b14 0%, var(--afk-burgundy-deep) 55%, #4a1a14 100%);
  color: rgba(255, 255, 255, 0.88);
}

.afk-innov-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: center;
}

.afk-innov .afk-title {
  max-width: 24ch;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem);
}

.afk-innov-copy > p {
  font-size: 1rem;
  line-height: 1.75;
}

.afk-innov-copy strong {
  color: var(--afk-orange);
}

.afk-innov-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-top: var(--space-md);
  padding: 0.4em 1.1em 0.4em 0.4em;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sipsa-white);
}

.afk-innov-tag-ico {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--afk-gold);
  color: var(--afk-burgundy-ink);
}

.afk-innov-tag-ico svg {
  width: 18px;
  height: 18px;
}

/* A tall photo on the left, two stacked on the right. */
.afk-innov-photos {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  aspect-ratio: 5 / 3.4;
}

.afk-innov-main {
  position: relative;
  grid-row: 1 / -1;
  margin: 0;
}

.afk-innov-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--afk-r);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.afk-innov-main .afk-innov-photo {
  object-position: 45% center;
}

.afk-innov-play {
  position: absolute;
  left: var(--space-sm);
  bottom: var(--space-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.4em 1em 0.4em 0.4em;
  border-radius: var(--radius-pill);
  background: rgba(53, 10, 19, 0.82);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--sipsa-white);
  transition: background-color var(--transition-fast);
}

.afk-innov-play:hover {
  background: var(--afk-burgundy);
}

.afk-innov-play span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--sipsa-white);
  color: var(--afk-burgundy);
}

.afk-innov-play svg {
  width: 18px;
  height: 18px;
}

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

/* 9. CHIFFRES — 5 × 2 tiles ------------------------------------------------------------- */
.afk-stats {
  padding-top: var(--space-lg);
}

.afk-stats .stats-bayadere {
  margin-bottom: var(--space-lg);
}

.afk-stats-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.afk-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  min-height: 190px;
  padding: var(--space-md) var(--space-sm);
  border-radius: var(--afk-r);
  background: var(--afk-cream);
  text-align: center;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.afk-stat:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

.afk-stat-ico {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-2xs);
  border-radius: 50%;
  background: var(--sipsa-white);
  box-shadow: var(--shadow-sm);
}

.afk-stat-ico img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.afk-stat strong {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.3rem);
  line-height: 1;
  color: var(--afk-burgundy);
}

.afk-stat > span:last-child {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--afk-muted);
}

.afk-stat--burgundy { background: linear-gradient(150deg, var(--afk-burgundy) 0%, var(--afk-burgundy-deep) 100%); }
.afk-stat--green { background: var(--afk-forest); }

.afk-stat--burgundy .afk-stat-ico,
.afk-stat--green .afk-stat-ico {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}

.afk-stat--burgundy strong { color: var(--afk-orange); }
.afk-stat--green strong { color: var(--sipsa-white); }
.afk-stat--burgundy > span:last-child,
.afk-stat--green > span:last-child { color: rgba(255, 255, 255, 0.8); }

/* The tenth tile: a call to book. */
.afk-stat--cta {
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  background: var(--afk-gold);
  text-align: left;
}

.afk-stat--cta p {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--afk-burgundy-ink);
}

.afk-stat--cta .btn {
  font-size: 0.75rem;
}

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

@media (max-width: 600px) {
  .afk-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .afk-stat { min-height: 160px; }
}

/* 10. SECTEURS — the client's five families (1–5) as horizontal bands:
   coloured label on the left, every activity as a compact chip on the right,
   so each band is only as tall as its content and nothing is hidden. ---------- */
.afk-future-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.afk-panel {
  --tone: var(--afk-burgundy);
  --tint: #f8ecee;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  overflow: hidden;
  border-radius: var(--afk-r-lg);
  background: var(--sipsa-white);
  box-shadow: var(--shadow-md);
}

/* families 2, 3, 5 keep the tones of the client's second infographic */
.afk-panel--agro  { --tone: var(--afk-burgundy); --tint: #f8ecee; --head: linear-gradient(160deg, var(--afk-burgundy-deep), var(--afk-burgundy)); }
.afk-panel--trans { --tone: #d9620c; --tint: #fcf0e6; --head: linear-gradient(160deg, #9a4307, #d9620c); }
.afk-panel--bev   { --tone: #0277bd; --tint: #e8f2fa; --head: linear-gradient(160deg, #01497f, #0277bd); }
.afk-panel--logi  { --tone: var(--afk-green); --tint: #e8f3ed; --head: linear-gradient(160deg, var(--afk-green-deep), var(--afk-green)); }
.afk-panel--olea  { --tone: #565f45; --tint: #eff1ea; --head: linear-gradient(160deg, #343a2a, #565f45); }

.afk-panel-head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--head);
  color: var(--sipsa-white);
}

.afk-panel-n {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
  font-family: var(--font-heading);
  font-weight: 800;
}

.afk-panel h3 {
  flex: 1;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.afk-panel-pill {
  flex-shrink: 0;
  padding: 0.45em 1em;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
  color: var(--sipsa-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: zoom-in;
  transition: background-color var(--transition-fast);
}

.afk-panel-pill:hover {
  background: rgba(255, 255, 255, 0.25);
}

.afk-picto-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));   /* same chip size in every band */
  align-content: center;
  gap: 10px;
  margin: 0;
  padding: var(--space-md);
  list-style: none;
}

.afk-picto-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 8px 14px 8px 8px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: var(--tint);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.8rem;
  line-height: 1.3;
  color: var(--afk-ink);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.afk-picto-list li:hover {
  border-color: var(--tone);
  background: var(--sipsa-white);
}

.afk-picto-list img {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  transition: transform var(--transition-base);
}

.afk-picto-list li:hover img {
  transform: scale(1.08);
}

.afk-future-more {
  margin-top: var(--space-md);
  text-align: center;
  font-size: 0.92rem;
  color: var(--afk-text);
}

.afk-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--afk-burgundy);
  cursor: zoom-in;
}

.afk-link-btn svg {
  width: 1em;
  height: 1em;
}

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

/* tablet and below: the label becomes a bar above the chips */
@media (max-width: 900px) {
  .afk-panel { grid-template-columns: minmax(0, 1fr); }
  .afk-panel-head { flex-direction: row; align-items: center; padding: var(--space-sm) var(--space-md); }
}

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

@media (max-width: 480px) {
  .afk-picto-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: var(--space-sm); }
  .afk-picto-list li { gap: 8px; padding: 6px 8px 6px 6px; font-size: 0.74rem; }
  .afk-picto-list img { width: 36px; height: 36px; }
  .afk-panel-head { flex-wrap: wrap; }
}

/* 11. ILS NOUS ONT FAIT CONFIANCE -------------------------------------------------------- */
.afk-trust .afk-head {
  margin-bottom: var(--space-md);
}

.afk-logo-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-sm);
}

.afk-logo-row span {
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 2;
  padding: var(--space-2xs);
  border: 1.5px dashed rgba(110, 22, 34, 0.18);
  border-radius: 14px;
  background: var(--sipsa-white);
  color: var(--afk-muted);
  font-size: 0.75rem;
  text-align: center;
}

.afk-trust-note {
  margin-top: var(--space-sm);
  text-align: center;
  font-size: 0.85rem;
  color: var(--afk-muted);
}

/* The associated salons' banner (old page). */
.afk-allies-card {
  margin-top: var(--space-xl);
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1rem, 3vw, 2.5rem);
  border-radius: var(--afk-r-lg);
  background: var(--sipsa-white);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.afk-allies-card img {
  width: 100%;
  height: auto;
  margin-top: var(--space-2xs);
}

@media (max-width: 960px) {
  .afk-logo-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 12. PROFIL DES EXPOSANTS ----------------------------------------------------------------- */
.afk-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--space-sm);
  margin-bottom: var(--space-md);
}

.afk-tabs[hidden] {
  display: none;
}

.afk-tabs [role="tab"] {
  padding: 0.85em 1.5em;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--afk-ink);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.afk-tabs [role="tab"]:hover {
  background: var(--afk-rose);
}

.afk-tabs [role="tab"][aria-selected="true"] {
  background: var(--afk-burgundy);
  color: var(--sipsa-white);
  box-shadow: 0 8px 18px rgba(169, 40, 55, 0.25);
}

.afk-tabs [role="tab"]:focus-visible {
  outline: 2px solid var(--afk-orange);
  outline-offset: 2px;
}

.afk-tabpanel + .afk-tabpanel {
  margin-top: var(--space-lg);
}

.afk-tabs:not([hidden]) ~ .afk-tabpanel + .afk-tabpanel {
  margin-top: 0;
}

.afk-tabpanel[hidden] {
  display: none;
}

/* Intro box: label left, text right. */
.afk-intro {
  display: grid;
  grid-template-columns: minmax(180px, 0.3fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--afk-r);
  background: #f3e7e3;
}

.afk-intro h3 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--afk-burgundy);
}

.afk-intro p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--afk-text);
}

.afk-pgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.afk-pcard {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-height: 170px;
  padding: var(--space-md);
  border-radius: var(--afk-r);
  background: var(--sipsa-white);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.afk-pcard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

.afk-pcard h4 {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.3;
  color: var(--afk-ink);
}

/* the client's round pictogram, above the title */
.afk-pico {
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  margin-bottom: var(--space-2xs);
  border-radius: 50%;
  box-shadow: 0 6px 14px -8px rgba(42, 13, 18, 0.45);
  transition: transform var(--transition-base);
}

.afk-pcard:hover .afk-pico {
  transform: scale(1.06) rotate(-4deg);
}

.afk-pcard p {
  font-size: 0.85rem;
  line-height: 1.55;
  color: #4a3c3e;
}

/* Logistique: the same intro box and cards, in the green of the client's
   logistics family; the long lists open under each card. */
.afk-intro--logi {
  background: #e6f1ea;
}

.afk-intro--logi h3 {
  color: var(--afk-green-deep);
}

.afk-pcard--logi .afk-pico {
  box-shadow: 0 6px 14px -8px rgba(11, 69, 33, 0.5);
}

.afk-pcard--logi p {
  color: #3d4a40;
}

/* every "Voir le détail" sits on the card's bottom line */
.afk-pcard .afk-more {
  margin-top: auto;
  padding-top: var(--space-2xs);
  border-top: 1px dashed rgba(11, 69, 33, 0.18);
}

.afk-pcard .afk-more[open] .afk-dots {
  padding: var(--space-xs) var(--space-xs) var(--space-xs) 1.6em;
  border-radius: 12px;
  background: #f2f6f1;
}

.afk-dots {
  display: grid;
  gap: 0.2em;
  margin: 0;
  padding-left: 1.1em;
  list-style: disc;
  font-size: 0.84rem;
  line-height: 1.5;
  color: #3d4a40;
}

.afk-dots ul {
  margin-top: 0.25em;
  padding-left: 1.1em;
  list-style: circle;
}

.afk-dots li::marker {
  color: var(--afk-green);
}

.afk-more summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--afk-green);
  list-style: none;
}

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

.afk-more summary::after {
  content: "→";
  transition: transform var(--transition-fast);
}

.afk-more[open] summary::after {
  transform: rotate(90deg);
}

.afk-more[open] summary {
  margin-bottom: 0.4em;
}

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

@media (max-width: 600px) {
  .afk-intro { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .afk-pgrid { grid-template-columns: minmax(0, 1fr); }
  .afk-pcard { min-height: 0; }
  .afk-tabs [role="tab"] { width: 100%; white-space: normal; }
}

/* 13. FINAL CTA — burgundy card ------------------------------------------------------------ */
.afk-final {
  padding-block: clamp(3rem, 2rem + 4vw, 5rem);
}

.afk-final-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-lg);
  padding: clamp(1.75rem, 1rem + 3vw, 3.25rem);
  border-radius: var(--afk-r-lg);
  background: linear-gradient(100deg, var(--afk-burgundy-deep) 0%, var(--afk-burgundy) 60%, #c1453f 100%);
  color: var(--sipsa-white);
}

/* The reference's large ring in the middle of the card. */
.afk-final-card::before {
  content: "";
  position: absolute;
  left: 38%;
  top: 50%;
  width: 380px;
  height: 380px;
  border: 40px solid rgba(248, 164, 65, 0.1);
  border-radius: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.afk-final-copy,
.afk-final-ctas {
  position: relative;
}

.afk-final .afk-eyebrow {
  color: var(--afk-orange);
}

.afk-final-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.5rem);
  line-height: 1.12;
  text-transform: uppercase;
}

.afk-final-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  margin-top: var(--space-sm);
  font-weight: 600;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.9);
}

.afk-final-meta svg {
  width: 18px;
  height: 18px;
  color: var(--afk-orange);
}

.afk-final-badge {
  margin-top: var(--space-xs);
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.8);
}

.afk-final-badge a {
  color: var(--afk-gold);
}

.afk-final-ctas {
  display: grid;
  gap: var(--space-xs);
  min-width: 290px;
}

.afk-final-ctas .btn {
  min-height: 52px;
  font-size: 0.88rem;
}

.afk-btn-line {
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--sipsa-white);
}

.afk-btn-line:hover {
  background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 860px) {
  .afk-final-card { grid-template-columns: minmax(0, 1fr); }
  .afk-final-ctas { min-width: 0; }
  .afk-final-ctas .btn { white-space: normal; }
}

/* 14. FOOTER — the homepage component on forest green ----------------------------------------- */
.afk-foot {
  background: var(--afk-forest);
  color: rgba(255, 255, 255, 0.85);
}

.afk-foot .foot-inner {
  padding-bottom: var(--space-xl);
}

.afk-foot-logo {
  display: inline-block;
  margin-bottom: var(--space-sm);
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--sipsa-white);
}

.afk-foot-logo img {
  display: block;
  width: 150px;
  height: auto;
}

.afk-foot h3 {
  color: var(--afk-gold);
}

.afk-foot .foot-col a,
.afk-foot .foot-tagline {
  color: rgba(255, 255, 255, 0.82);
  opacity: 1;
}

.afk-foot .foot-col a:hover {
  color: var(--afk-gold);
}

.afk-foot .foot-social a {
  color: var(--sipsa-white);
}

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

.afk-foot .foot-contact svg {
  color: var(--afk-gold);
}

.afk-foot .foot-contact a:hover {
  color: var(--afk-gold);
}

.afk-foot .foot-bottom {
  background: #083818;
  color: rgba(255, 255, 255, 0.7);
}

.afk-foot .foot-legal a:hover {
  color: var(--afk-gold);
}