/*!
 * BonAgro — landing.css · site/index.html: logo intro + interactive Africa map (docs/SPEC.md §5,
 * restyled per docs/DESIGN-V2.md §4: logo browns, greens and neutrals, no gold, corners ≤ 10px).
 * Loaded after core.css (tokens, fonts, reset, flags, skip link).
 *
 * Timeline (pure CSS, ~1.8 s, once per browser, any tap/scroll/key skips it; landing.js only skips / remembers /
 * cleans up — bounce-rate pass 2026-10-05: was 2.9 s on every new session):
 *   0.05 s  logo fades in (slight focus)                   0.30 s  fine green rule draws under it
 *   0.45 s  bilingual line "Protection des cultures · Crop protection" appears
 *   0.60 s  parent-company lockup: "Une société du · A company of" + the Xingfa Group logo (group.py)
 *   1.30 s  the overlay dissolves onto the page (--map-delay 1.35 s)            1.80 s  overlay gone
 * Map entrance (relative to --map-delay): sticker → BonAgro countries fade in → continent wave from
 * West Africa → pins drop → leader lines draw → labels slide in → legend, note + list reveal.
 * Protocol: countries listed alphabetically; disputed boundaries dashed; boundary disclaimer under the map.
 * html.ba-intro-off (seen in this browser: the <head> script hides the intro) and html.ba-intro-skip (skipped: the
 * overlay fades out and absorbs that tap) set --map-delay to ~0. Entrance animations are scoped to body.is-entering
 * so landing.js can replay them after a skip; returning visitors get the panel and list at once.
 *
 * Order: the welcome panel (h1, shortcut, country list) comes first in the DOM — first screen on phones —
 * and sits right of the map on desktop (grid areas). The shortcut (07b) is chosen before the first paint.
 * Sections: 01 page · 02 intro · 03 header · 04 layout · 05 map · 06 legend, hover card & tooltip ·
 * 07 country list · 07b shortcut · 07c facts band · 08 footer · 09 leave transition · 10 languages ·
 * 11 keyframes · 12 responsive · 13 reduced motion · 14 print & forced colours
 */

/* ==========================================================================
   01. PAGE
   ========================================================================== */
:root{
  --map-delay:1.35s;
  --land-gap:clamp(1.25rem,.6rem + 2.4vw,2.75rem);
  --map-max:1080px;
  /* header + footer + vertical padding: the map takes the rest of the viewport height */
  --map-fit:calc(100svh - 8.5rem);
  --page-w:1520px;
}
:root.ba-intro-off,:root.ba-intro-skip{--map-delay:.05s}

body.ba-landing{display:flex;flex-direction:column;min-height:100vh;min-height:100svh;overflow-x:clip;background:linear-gradient(180deg,#FFFFFF 0%,var(--c-cream-50) 40%,var(--c-cream-100) 100%);background-color:var(--c-cream-50)}
.ba-landing ::selection{background:var(--c-green-100);color:var(--c-brown-950)}
.ba-landing .skip-link{z-index:400}
.ba-landing .skip-link:not(:focus){box-shadow:none}

/* ==========================================================================
   02. INTRO OVERLAY
   ========================================================================== */
.ba-intro{position:fixed;inset:0;z-index:250;overflow:hidden;pointer-events:none;animation:ba-intro-out 1ms linear 1.8s forwards}
.ba-intro-off .ba-intro,:root:has(:target) .ba-intro{display:none}

/* Stage: quiet cream ground; dissolves onto the map */
.ba-intro__stage{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;pointer-events:auto;
  background:radial-gradient(120% 92% at 50% 44%,#FFFFFF 0%,var(--c-cream-50) 45%,var(--c-cream-100) 100%);
  animation:ba-intro-stage-out .5s var(--ease-out) 1.3s forwards}

/* Original logo, fine rule, bilingual line (FR and EN with equal weight) */
.ba-intro__center{display:flex;flex-direction:column;align-items:center;width:min(84vw,520px);translate:0 -2vh}
.ba-intro__logo{width:100%;aspect-ratio:1302/448}
.ba-intro__logo img{display:block;width:100%;height:auto;animation:ba-intro-logo-focus .6s var(--ease-out-expo) .05s both}
.ba-intro__rule{display:block;width:min(46%,220px);height:2px;margin-top:clamp(1rem,2.6vmin,1.5rem);background:var(--c-green-700);transform-origin:50% 50%;animation:ba-intro-horizon .5s var(--ease-out-expo) .3s both}
.ba-intro__lines{display:flex;flex-direction:column;align-items:center;gap:.3rem;margin:clamp(.85rem,2.2vmin,1.2rem) 0 0;font:600 clamp(.75rem,.66rem + .35vw,.875rem)/1.35 var(--font-body);letter-spacing:.14em;text-transform:uppercase;text-align:center;color:var(--c-taupe-600);animation:ba-intro-lines-in .45s var(--ease-out) .45s both}
.ba-intro__lines span+span{color:var(--c-taupe-500)}
/* Parent company (Xingfa Group): its artwork keeps its own colours, on the intro's white/cream ground */
.ba-intro__group{display:flex;flex-direction:column;align-items:center;gap:.6rem;margin-top:clamp(1.15rem,3vmin,1.75rem);animation:ba-intro-lines-in .45s var(--ease-out) .6s both}
.ba-intro__group-label{display:flex;flex-wrap:wrap;justify-content:center;gap:0 .55em;font:600 clamp(.625rem,.59rem + .18vw,.6875rem)/1.3 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--c-taupe-500)}
.ba-intro__group-label span+span::before{content:"·";margin-right:.55em}
.ba-intro__group-logo{display:block;width:auto;height:clamp(40px,32px + 2vmin,56px)}

/* Skip button */
.ba-intro__skip{position:absolute;right:max(1rem,env(safe-area-inset-right));top:max(1rem,env(safe-area-inset-top));z-index:6;display:inline-flex;align-items:center;gap:.65rem;min-height:2.75rem;padding:.5rem .6rem .5rem 1rem;border-radius:var(--radius-sm);border:1px solid rgba(70,51,25,.16);background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--c-brown-800);font:600 .8125rem/1.1 var(--font-body);letter-spacing:.02em;text-decoration:none;box-shadow:var(--shadow-sm);pointer-events:auto;animation:ba-intro-skip-in .4s var(--ease-out-expo) .15s both,ba-intro-skip-out .3s ease 1.15s forwards;transition:background-color var(--dur-2) ease,color var(--dur-2) ease,border-color var(--dur-2) ease}
.ba-intro__skip:hover{background:var(--c-brown-800);border-color:var(--c-brown-800);color:#fff}
.ba-intro__skip:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.ba-intro__skip-icon{position:relative;display:grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:var(--radius-sm);background:var(--c-brown-800);transition:background-color var(--dur-2) ease}
.ba-intro__skip:hover .ba-intro__skip-icon{background:var(--c-green-700)}
.ba-intro__skip-icon::before,.ba-intro__skip-icon::after{content:"";position:absolute;top:50%;width:.36rem;height:.36rem;margin-top:-.18rem;border-right:2px solid #fff;border-top:2px solid #fff;rotate:45deg}
.ba-intro__skip-icon::before{left:.38rem}
.ba-intro__skip-icon::after{left:.66rem}
.ba-intro.is-skipping{animation:ba-intro-fade .45s var(--ease-out) both}

/* ==========================================================================
   03. HEADER — logo, region, language switch
   ========================================================================== */
.ba-top{position:relative;z-index:5}
.ba-top__inner{display:flex;align-items:center;gap:clamp(.9rem,2.4vw,2rem);width:100%;max-width:var(--page-w);margin-inline:auto;padding:clamp(.55rem,1vw,.8rem) var(--gutter)}
.ba-top__brand{flex:none;display:block}
.ba-top__brand img{width:auto;height:clamp(36px,1.5rem + 1.1vw,48px)}
.ba-top__region{margin:0;padding-left:clamp(.9rem,2.4vw,1.5rem);border-left:1px solid var(--color-border);font:600 .75rem/1.3 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--c-taupe-600)}
.ba-lang{flex:none;display:inline-flex;gap:2px;margin-left:auto;padding:3px;border-radius:var(--radius-sm);background:#fff;border:1px solid var(--color-border);box-shadow:var(--shadow-xs)}
.ba-lang__btn{min-width:2.75rem;min-height:2.25rem;padding:0 .8rem;border-radius:var(--radius-xs);font:600 .75rem/1 var(--font-body);letter-spacing:.08em;text-align:center;color:var(--c-brown-700);transition:color var(--dur-2) ease,background-color var(--dur-2) ease}
.ba-lang__btn:hover{color:var(--c-brown-900);background:var(--c-cream-100)}
.ba-lang__btn[aria-pressed="true"]{color:#fff;background:var(--c-brown-800)}
.ba-lang__btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.no-js .ba-lang{display:none}

/* ==========================================================================
   04. LAYOUT
   ========================================================================== */
.ba-main{position:relative;z-index:1;flex:1 0 auto;display:grid;align-items:center;gap:var(--land-gap);width:100%;max-width:var(--page-w);margin-inline:auto;padding:0 var(--gutter) clamp(1.25rem,3vw,2.25rem);outline:none}
.ba-mapzone{grid-area:map;display:grid;justify-items:center;justify-self:stretch;width:100%;min-width:0}
.ba-panel{grid-area:panel}

/* ==========================================================================
   05. MAP — graticule, shadow, sticker, land, BonAgro countries, pins, labels
   ========================================================================== */
.ba-map{position:relative;width:min(100%,var(--map-max))}
.ba-map__svg{display:block;width:100%;height:auto;aspect-ratio:1;overflow:hidden;-webkit-tap-highlight-color:transparent;user-select:none}
.ba-map__base{transform-box:fill-box;transform-origin:50% 50%}

/* 10° graticule + dashed equator, faded towards the edges by an SVG mask */
.ba-map__grid{pointer-events:none}
.ba-map__graticule,.ba-map__equator{fill:none;stroke:var(--c-brown-700);stroke-width:1;vector-effect:non-scaling-stroke}
.ba-map__graticule{stroke-opacity:.08}
.ba-map__equator{stroke-opacity:.22;stroke-dasharray:5 5}

/* Other countries: shared warm-neutral west→east gradient; hover darkens slightly (tooltip: country name) */
.ba-map__land path{transform-box:fill-box;transform-origin:50% 50%;transition:filter var(--dur-3) ease}
.ba-map__land path[data-fr]:hover,.ba-map__land path.is-soon{filter:brightness(.93)}

/* Disputed / undetermined boundaries (Morocco – Western Sahara): dashed, following international practice */
.ba-map__disputed{pointer-events:none}
.ba-map__disputed path{fill:none;stroke-linecap:butt;stroke-linejoin:round}
.ba-map__disputed-mask{stroke:url(#ba-map-earth);stroke-width:2.6}
.ba-map__disputed-line{stroke:#fff;stroke-width:1.25;stroke-dasharray:3.2 2.6}

/* BonAgro countries: leaf-gradient links; hover/focus/list sync → darker green + lifted */
.ba-map__link{cursor:pointer;outline:none}
.ba-map__shape{transform-box:fill-box;transform-origin:50% 50%;transition:translate var(--dur-4) var(--ease-out-expo),filter var(--dur-4) var(--ease-out-expo),stroke var(--dur-2) ease,stroke-width var(--dur-2) ease}
.ba-map__link:hover .ba-map__shape,.ba-map__link:focus-visible .ba-map__shape,.ba-map__link.is-hot .ba-map__shape{fill:url(#ba-map-leaf-hot);translate:0 -3px;filter:drop-shadow(0 6px 6px rgba(35,26,16,.22))}
.ba-map__link:focus-visible .ba-map__shape{stroke:var(--c-brown-900);stroke-width:2.5}
/* Keyboard focus ring drawn above every layer (later shapes would hide part of the stroke); landing.js sets its href */
.ba-map__ring{fill:none;stroke:var(--c-brown-900);stroke-width:2.5;stroke-linejoin:round;translate:0 -3px;pointer-events:none;visibility:hidden}
.ba-map__ring.is-focus{visibility:visible}

/* Leader lines + pins (white disc, green dot, two green ripples) */
.ba-map__leaders,.ba-map__pins{pointer-events:none}
.ba-map__leader{fill:none;stroke:var(--c-brown-700);stroke-width:1;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.ba-map__leader-dot{fill:var(--c-brown-700);transform-box:fill-box;transform-origin:50% 50%}
.ba-map__pin-disc{fill:#fff}
.ba-map__pin-dot{fill:var(--c-green-700);transition:fill var(--dur-2) ease}
.ba-map__pin-body{transition:scale var(--dur-4) var(--ease-out-expo)}
.ba-map__pin.is-hot .ba-map__pin-body{scale:1.25}
.ba-map__pin.is-hot .ba-map__pin-dot{fill:var(--c-green-800)}
.ba-map__ripple{fill:var(--c-green-400);transform-box:fill-box;transform-origin:50% 50%;animation:ba-map-ripple 2.4s var(--ease-out-expo) 2 both;animation-delay:calc(var(--map-delay) + 1.6s + var(--k) * .3s)}

/* Labels: white 3px rectangles, Montserrat 700 caps — also links; hover = espresso */
.ba-map__label{cursor:pointer;outline:none}
.ba-map__label rect{fill:#fff;transition:fill var(--dur-2) ease}
.ba-map__label text{font-family:var(--font-display);font-weight:700;letter-spacing:.06em;fill:var(--c-brown-900);pointer-events:none;transition:fill var(--dur-2) ease}
.ba-map__label:hover rect,.ba-map__label.is-hot rect{fill:var(--c-brown-800)}
.ba-map__label:hover text,.ba-map__label.is-hot text{fill:#fff}

/* Photo backdrop behind the map (client, 2026-10-04: "add some image in the africa map background").
   One wide farmland-under-rain photograph (theme-weather, reserved for this page: it appears on no country page), under a light cream wash (≈40–60 %, client: stronger photo) so the
   land, borders, labels, legend, note and tooltips keep their contrast. A CSS background, so it never competes
   with the map for LCP; it bleeds to the viewport edges, fades in with the map (--map-delay) and drifts very
   slowly — the drift is off under prefers-reduced-motion. */
.ba-backdrop{position:absolute;inset:0 calc(50% - 50vw);z-index:-1;overflow:hidden;pointer-events:none}
.ba-backdrop::before{content:"";position:absolute;inset:-3%;transform-origin:100% 60%;transform:scale(1.16);background:url(../img/photos/theme-weather-1600.webp) right 60%/cover no-repeat;background-image:image-set(url(../img/photos/theme-weather-1600.webp) type("image/webp"),url(../img/photos/theme-weather.jpg) type("image/jpeg"));animation:ba-map-backdrop-drift 48s var(--ease-in-out) infinite alternate}
.ba-backdrop::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 42% 48%,rgb(250 249 247 / .4) 0%,rgb(250 249 247 / .46) 55%,rgb(250 249 247 / .58) 100%),linear-gradient(180deg,rgb(250 249 247 / .35) 0%,transparent 14%,transparent 86%,rgb(245 243 239 / .45) 100%)}
@media (max-width:700px){.ba-backdrop::before{background-image:url(../img/photos/theme-weather-1024.webp)}}

/* Entrance (body.is-entering; delays relative to --map-delay) */
.is-entering .ba-backdrop{animation:ba-map-backdrop-in 1.4s ease both;animation-delay:var(--map-delay)}
.is-entering .ba-map__grid{animation:ba-map-foot-in 1.2s ease both;animation-delay:var(--map-delay)}
.is-entering .ba-map__base{animation:ba-map-sticker-in 1s var(--ease-out-expo) both;animation-delay:var(--map-delay)}
.is-entering .ba-map__shape{animation:ba-map-pop .7s var(--ease-out-expo) both;animation-delay:calc(var(--map-delay) + .1s + var(--k) * .08s)}
.is-entering .ba-map__land path{animation:ba-map-country-in .6s var(--ease-out-expo) both;animation-delay:calc(var(--map-delay) + .32s + var(--d))}
.is-entering .ba-map__pin-body{animation:ba-map-pin-drop .6s var(--ease-out-expo) both;animation-delay:calc(var(--map-delay) + 1.02s + var(--k) * .09s)}
.is-entering .ba-map__leader{animation:ba-map-leader-draw .55s var(--ease-in-out) both;animation-delay:calc(var(--map-delay) + 1.3s + var(--k) * .1s)}
.is-entering .ba-map__leader-dot{animation:ba-map-pop .45s var(--ease-out-expo) both;animation-delay:calc(var(--map-delay) + 1.72s + var(--k) * .1s)}
.is-entering .ba-map__label{animation:ba-map-label-in .6s var(--ease-out-expo) both;animation-delay:calc(var(--map-delay) + 1.4s + var(--k) * .08s)}

/* ==========================================================================
   06. LEGEND, MAP NOTE, HOVER CARD & COUNTRY-NAME TOOLTIP (card/tooltip positioned by landing.js via --x/--y)
   ========================================================================== */
.ba-legend{position:absolute;left:3%;bottom:3.5%;z-index:2;display:grid;gap:.45rem;margin:0;padding:.7rem .85rem;list-style:none;border-radius:var(--radius-md);background:rgba(255,255,255,.9);border:1px solid var(--color-border);box-shadow:var(--shadow-xs);font:500 .75rem/1.2 var(--font-body);color:var(--c-text-brown)}
.ba-legend__item{display:flex;align-items:center;gap:.6rem}
.ba-legend__key{flex:none;width:.875rem;height:.875rem;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(35,26,16,.3)}
.ba-legend__key--active{background:linear-gradient(135deg,var(--c-green-400),var(--c-green-700))}
.ba-legend__key--other{background:linear-gradient(135deg,#EBE6DF,#C7BBAD)}
.is-entering .ba-legend{animation:ba-map-card-in .7s var(--ease-out-expo) both;animation-delay:calc(var(--map-delay) + 1.5s)}
/* Boundary disclaimer (usual cartographic notice), discreet, under the map */
.ba-mapnote{width:fit-content;max-width:62ch;margin:.55rem auto 0;padding:.3rem .7rem;border-radius:var(--radius-sm);background:rgb(250 249 247 / .86);font-size:.71875rem;line-height:1.5;text-align:center;color:var(--color-text-muted);text-wrap:balance}
.is-entering .ba-mapnote{animation:ba-map-foot-in .8s ease both;animation-delay:calc(var(--map-delay) + 1.7s)}

.ba-map__cards{position:absolute;inset:0;z-index:4;pointer-events:none}
.ba-card{position:absolute;left:0;top:0;width:min(17.5rem,calc(100vw - 2rem));padding:1.05rem 1.1rem 1rem;border-radius:var(--radius-lg);background:#fff;border:1px solid var(--color-border);box-shadow:var(--shadow-lg);translate:var(--x,0) var(--y,0);opacity:0;visibility:hidden;overflow:hidden;transition:opacity var(--dur-2) ease,visibility 0s linear var(--dur-2)}
.ba-card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--c-green-700)}
.ba-card.is-visible{opacity:1;visibility:visible;transition-delay:0s;animation:ba-map-tip-in .3s var(--ease-out-expo)}
.ba-card__head{display:flex;align-items:center;gap:.75rem}
.ba-card__head .flag{font-size:1rem;border-radius:2px}
.ba-card__id{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.ba-card__name{font:700 1.0625rem/1.2 var(--font-display);color:var(--c-brown-900);letter-spacing:-.01em}
.ba-card__lang{font:600 .6875rem/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--c-green-800)}
.ba-card__tagline{margin:.7rem 0 0;font-size:.8125rem;line-height:1.5;color:var(--c-text-brown);text-wrap:pretty}
.ba-card__label{margin:.8rem 0 .4rem;font:600 .6875rem/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted)}
.ba-card__crops{display:flex;flex-wrap:wrap;gap:.3rem;margin:0;padding:0;list-style:none}
.ba-card__crops li{padding:.25rem .5rem;border-radius:var(--radius-sm);background:var(--c-green-100);color:var(--c-green-900);font-size:.71875rem;font-weight:600;line-height:1.3}
.ba-card__cta{display:flex;align-items:center;gap:.45rem;margin-top:.9rem;padding-top:.75rem;border-top:1px solid var(--color-border);font:600 .8125rem/1 var(--font-body);color:var(--c-brown-800)}
.ba-card__arrow{display:inline-block;color:var(--c-green-700)}

.ba-tip{position:absolute;left:0;top:0;z-index:5;display:flex;flex-direction:column;gap:.15rem;padding:.5rem .75rem .55rem;border-radius:var(--radius-md);background:rgba(31,22,11,.94);box-shadow:var(--shadow-md);color:#fff;pointer-events:none;white-space:nowrap;translate:var(--x,0) var(--y,0);opacity:0;visibility:hidden;transition:opacity var(--dur-1) ease,visibility 0s linear var(--dur-1)}
.ba-tip.is-visible{opacity:1;visibility:visible;transition-delay:0s;animation:ba-map-tip-in .25s var(--ease-out-expo)}
.ba-tip__name{font:700 .8125rem/1.2 var(--font-display)}

/* ==========================================================================
   07. COUNTRY LIST (primary navigation on mobile; synced with the map)
   ========================================================================== */
.ba-panel{position:relative;align-self:center;padding:clamp(1.15rem,1rem + .8vw,1.6rem);border-radius:var(--radius-lg);background:#fff;border:1px solid var(--color-border);box-shadow:var(--shadow-md);outline:none}
.ba-panel::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;border-radius:var(--radius-lg) var(--radius-lg) 0 0;background:var(--c-green-700)}
.ba-panel__eyebrow{display:flex;align-items:center;gap:.65rem;margin:0;font:600 var(--fs-xs)/1.3 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--c-green-700)}
.ba-panel__eyebrow::before{content:"";flex:none;width:24px;height:2px;background:var(--c-green-700)}
.ba-panel__title{margin:.6rem 0 .55rem;font:700 clamp(1.5rem,1.2rem + .9vw,1.95rem)/1.18 var(--font-display);letter-spacing:-.015em;color:var(--c-brown-900);text-wrap:balance}
.ba-panel__lead{margin:0;font-size:var(--fs-sm);line-height:1.6;color:var(--color-text-muted);text-wrap:pretty}
/* Parent-company endorsement (Xingfa Group logo on white, never recoloured) */
.ba-panel__group{display:flex;align-items:center;gap:.85rem;margin:1rem 0 0;padding:.6rem .85rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:#fff}
.ba-panel__group-logo{flex:none;display:block;width:auto;height:30px}
.ba-panel__group-text{padding-right:.85rem;border-right:1px solid var(--color-border);font:600 .75rem/1.35 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--c-brown-800)}
.ba-panel__subtitle{margin:1.15rem 0 .65rem;padding-top:1rem;border-top:1px solid var(--color-border);font:600 .75rem/1.3 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--c-brown-800)}
.ba-panel__note{margin:-.4rem 0 1rem;font-size:var(--fs-sm);color:var(--color-text-muted)}
.ba-countries{display:grid;gap:.5rem;margin:0;padding:0;list-style:none}
/* Alphabetical in both languages: the DOM follows the French names, English uses each item's --o-en rank */
html[data-lang="en"] .ba-countries__item{order:var(--o-en,0)}
.ba-country{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.8rem;min-height:4.1rem;padding:.65rem .7rem .65rem .95rem;border-radius:var(--radius-md);background:#fff;border:1px solid var(--color-border);color:inherit;text-decoration:none;overflow:hidden;transition:box-shadow var(--dur-3) ease,border-color var(--dur-3) ease,background-color var(--dur-3) ease}
.ba-country::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c-green-700);scale:1 0;transition:scale var(--dur-3) var(--ease-out-expo)}
.ba-country:hover,.ba-country:focus-visible,.ba-country.is-hot{border-color:var(--color-border-strong);background:var(--c-cream-50);box-shadow:var(--shadow-sm);color:inherit}
.ba-country:hover::before,.ba-country:focus-visible::before,.ba-country.is-hot::before{scale:1}
.ba-country:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.ba-country__flag{font-size:1.4rem;border-radius:2px;box-shadow:0 0 0 1px rgba(35,26,16,.08)}
.ba-country__body{min-width:0}
.ba-country__name{display:block;font:700 1rem/1.2 var(--font-display);color:var(--c-brown-900);letter-spacing:-.01em}
.ba-country__meta{display:block;margin-top:.2rem;font-size:.8125rem;line-height:1.35;color:var(--color-text-muted)}
.ba-country__go{position:relative;display:grid;place-items:center;width:2rem;height:2rem;border-radius:var(--radius-sm);background:var(--c-cream-100);transition:background-color var(--dur-2) ease}
.ba-country__go::before{content:"";width:.42rem;height:.42rem;margin-left:-.15rem;border-top:2px solid var(--c-brown-700);border-right:2px solid var(--c-brown-700);rotate:45deg;transition:border-color var(--dur-2) ease}
.ba-country:hover .ba-country__go,.ba-country:focus-visible .ba-country__go,.ba-country.is-hot .ba-country__go{background:var(--c-brown-800)}
.ba-country:hover .ba-country__go::before,.ba-country:focus-visible .ba-country__go::before,.ba-country.is-hot .ba-country__go::before{border-color:#fff}
.is-entering .ba-top{animation:ba-map-header-in .8s var(--ease-out-expo) both;animation-delay:calc(var(--map-delay) + .12s)}
.is-entering .ba-panel{animation:ba-map-panel-in .45s var(--ease-out-expo) both;animation-delay:var(--map-delay)}
.is-entering .ba-countries__item{animation:ba-map-card-in .4s var(--ease-out-expo) both;animation-delay:calc(var(--map-delay) + .1s + var(--k) * .04s)}
/* returning visitors: the choice is usable at the first paint */
:root.ba-intro-off .is-entering :is(.ba-panel,.ba-suggest,.ba-countries__item){animation:none}

/* ==========================================================================
   07b. SHORTCUT — one country site, chosen before the first paint by the <head> script (html[data-suggest]):
   the last country site visited ("continue") or the region of the browser language ("locale"). Every country is
   pre-rendered and hidden; only the chosen one is displayed, so nothing shifts. The list below stays alphabetical.
   ========================================================================== */
.ba-suggest,.ba-suggest__item,.ba-suggest [data-mode]{display:none}
html[data-suggest] .ba-suggest{display:block;margin-top:1rem}
html[data-suggest="ci"] [data-suggest-for="ci"],html[data-suggest="cm"] [data-suggest-for="cm"],html[data-suggest="gh"] [data-suggest-for="gh"],
html[data-suggest="ng"] [data-suggest-for="ng"],html[data-suggest="tz"] [data-suggest-for="tz"],html[data-suggest="ug"] [data-suggest-for="ug"]{display:block}
html[data-suggest-mode="continue"] .ba-suggest [data-mode="continue"],html[data-suggest-mode="locale"] .ba-suggest [data-mode="locale"]{display:inline}
.ba-suggest__item{border:1px solid rgb(65 127 75 / .35);border-radius:var(--radius-md);background:var(--c-green-50);overflow:hidden}
.ba-suggest__main{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.35rem .85rem;padding:.85rem .95rem .9rem;color:inherit;text-decoration:none}
.ba-suggest__main:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-3px}
.ba-suggest__flag{font-size:1.6rem;border-radius:2px;box-shadow:0 0 0 1px rgb(35 26 16 / .08)}
.ba-suggest__text{min-width:0}
.ba-suggest__title{display:block;font:700 1rem/1.25 var(--font-display);letter-spacing:-.01em;color:var(--c-brown-900);text-wrap:balance}
.ba-suggest__note{display:block;margin-top:.15rem;font-size:.75rem;line-height:1.4;color:var(--color-text-muted)}
.ba-suggest__go{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:.55rem;min-height:2.75rem;margin-top:.45rem;border-radius:var(--radius-sm);background:var(--c-green-700);color:#fff;font:600 .875rem/1 var(--font-body);transition:background-color var(--dur-2) ease}
.ba-suggest__go::after{content:"";width:.42rem;height:.42rem;margin-left:-.1rem;border-top:2px solid currentColor;border-right:2px solid currentColor;rotate:45deg}
.ba-suggest__main:hover .ba-suggest__go,.ba-suggest__main.is-hot .ba-suggest__go{background:var(--c-green-800)}
.ba-suggest__links{display:flex;flex-wrap:wrap;align-items:center;gap:0 1rem;margin:0;padding:.35rem .95rem .45rem;list-style:none;border-top:1px solid rgb(65 127 75 / .22);font:600 .8125rem/1.3 var(--font-body)}
.ba-suggest__links a{display:inline-flex;align-items:center;min-height:2.25rem;color:var(--c-green-800);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.ba-suggest__links a:hover{color:var(--c-brown-900)}
.ba-suggest__links a:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-xs)}
.is-entering .ba-suggest{animation:ba-map-card-in .4s var(--ease-out-expo) both;animation-delay:calc(var(--map-delay) + .1s)}

/* ==========================================================================
   07c. FACTS BAND — what each country site offers (figures from the catalogue, context.landing_facts)
   ========================================================================== */
.ba-facts{position:relative;z-index:1;border-top:1px solid var(--color-border);background:#fff;--icon-accent:var(--c-green-700)}
.ba-facts__inner{width:100%;max-width:var(--page-w);margin-inline:auto;padding:clamp(1.75rem,1.2rem + 2vw,2.75rem) var(--gutter)}
.ba-facts__title{margin:0 0 1.1rem;font:700 clamp(1.15rem,1rem + .6vw,1.45rem)/1.25 var(--font-display);letter-spacing:-.01em;color:var(--c-brown-900);text-wrap:balance}
.ba-facts__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12.5rem),1fr));gap:.75rem;margin:0;padding:0;list-style:none}
.ba-fact{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:.8rem;align-content:start;padding:.9rem 1rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--c-cream-50)}
.ba-fact__icon{grid-row:1/3;align-self:start;width:2.5rem;height:2.5rem;padding:.5rem;border-radius:var(--radius-sm);background:var(--c-green-100);color:var(--c-brown-800);fill:none}
.ba-fact__value{font:700 1.4rem/1.15 var(--font-display);color:var(--c-brown-900)}
.ba-fact__value--text{font-size:1rem;line-height:1.3}
.ba-fact__label{margin-top:.15rem;font-size:.8125rem;line-height:1.45;color:var(--color-text-muted);text-wrap:pretty}
.ba-facts__cta{display:inline-flex;align-items:center;gap:.65rem;min-height:2.75rem;margin-top:1.15rem;padding:0 1.1rem;border-radius:var(--radius-sm);background:var(--c-brown-800);color:#fff;font:600 .875rem/1 var(--font-body);text-decoration:none;transition:background-color var(--dur-2) ease}
.ba-facts__cta:hover{background:var(--c-brown-900);color:#fff}
.ba-facts__cta:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.ba-facts__cta-arrow{width:.42rem;height:.42rem;margin-top:.2rem;border-top:2px solid currentColor;border-right:2px solid currentColor;rotate:-45deg}

/* ==========================================================================
   08. FOOTER STRIP — flat espresso, straight 3px green rule
   ========================================================================== */
.ba-foot{position:relative;z-index:1;border-top:3px solid var(--c-green-700);background:var(--c-brown-950);color:rgba(245,243,239,.78);font-size:var(--fs-xs)}
.ba-foot__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.35rem 1.5rem;width:100%;max-width:var(--page-w);margin-inline:auto;padding:.8rem var(--gutter) max(.8rem,env(safe-area-inset-bottom))}
.ba-foot p{margin:0}
.ba-foot__tagline{font:italic 600 .875rem/1.2 var(--font-display);color:var(--c-green-200)}
.ba-foot__group{display:inline-flex;align-items:center;gap:.35em;color:var(--c-green-200);text-decoration:none}
.ba-foot__group::after{content:"\2197";font-size:.95em;line-height:1}
.ba-foot__group:hover{color:#fff;text-decoration:underline;text-underline-offset:.2em}
.ba-foot__group:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.ba-foot__sample{flex-basis:100%;order:3;font-size:.6875rem;line-height:1.45}
.is-entering .ba-foot{animation:ba-map-foot-in .8s var(--ease-out-expo) both;animation-delay:calc(var(--map-delay) + .7s)}

/* ==========================================================================
   09. LEAVING — zoom into the country (landing.js animates the viewBox) + cream fade with logo
   ========================================================================== */
.ba-map.is-zooming .ba-legend,.ba-map.is-zooming .ba-map__cards,.ba-map.is-zooming .ba-tip,.ba-map.is-zooming .ba-map__grid{opacity:0;transition:opacity var(--dur-2) ease}
.ba-map.is-zooming .ba-map__land{opacity:.8;transition:opacity var(--dur-5) ease}
.ba-map.is-zooming .ba-map__svg{-webkit-mask-image:radial-gradient(circle closest-side,#000 78%,transparent);mask-image:radial-gradient(circle closest-side,#000 78%,transparent)}
.ba-leave{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:radial-gradient(120% 92% at 50% 44%,#FFFFFF 0%,var(--c-cream-50) 34%,var(--c-cream-100) 100%);opacity:0;visibility:hidden;transition:opacity .25s ease .12s,visibility 0s linear .37s}
.is-leaving .ba-leave{opacity:1;visibility:visible;transition-delay:.12s,0s}
.ba-leave__inner{display:grid;justify-items:center;gap:1.1rem}
.ba-leave__logo{width:min(340px,64vw);height:auto}
.is-leaving .ba-leave__logo{animation:ba-map-leave-logo .5s var(--ease-out-expo) .12s both}
.ba-leave__name{font:600 .8125rem/1 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--c-green-800)}
.ba-leave__bar{position:relative;width:9rem;height:3px;overflow:hidden;background:var(--c-cream-300)}
.ba-leave__bar::after{content:"";position:absolute;inset:0;background:var(--c-green-700);animation:ba-map-progress 1.1s var(--ease-in-out) infinite}

/* ==========================================================================
   10. LANGUAGES — html[data-lang] shows [data-l10n] of the active language (default fr)
   ========================================================================== */
:root:not([data-lang="en"]) [data-l10n="en"],:root[data-lang="en"] [data-l10n="fr"]{display:none!important}

/* ==========================================================================
   11. KEYFRAMES — ba-intro-* (intro overlay) and ba-map-* (map page)
   ========================================================================== */
@keyframes ba-intro-horizon{from{opacity:0;scale:0 1}to{opacity:1;scale:1 1}}
@keyframes ba-intro-logo-focus{0%{opacity:0;scale:.97;filter:blur(4px)}100%{opacity:1;scale:1;filter:blur(0)}}
@keyframes ba-intro-lines-in{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
@keyframes ba-intro-stage-out{to{opacity:0;visibility:hidden}}
@keyframes ba-intro-out{to{visibility:hidden}}
@keyframes ba-intro-skip-in{from{opacity:0;translate:0 -12px}to{opacity:1;translate:0 0}}
@keyframes ba-intro-skip-out{to{opacity:0;visibility:hidden;translate:0 -10px}}
@keyframes ba-intro-fade{to{opacity:0;visibility:hidden}}

@keyframes ba-map-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes ba-map-backdrop-drift{from{transform:scale(1.16)}to{transform:scale(1.21) translate3d(-1%,-.8%,0)}}  /* ≥1.16 anchored right: crops the yellow field on the photo's left edge (no gold) */
@keyframes ba-map-sticker-in{from{opacity:0;scale:.96}to{opacity:1;scale:1}}
@keyframes ba-map-pop{from{opacity:0;scale:.9}to{opacity:1;scale:1}}
@keyframes ba-map-country-in{from{opacity:0;scale:.9}to{opacity:1;scale:1}}
@keyframes ba-map-pin-drop{from{opacity:0;translate:0 -16px}to{opacity:1;translate:0 0}}
@keyframes ba-map-ripple{0%{opacity:0;scale:.5}12%{opacity:.6}100%{opacity:0;scale:1.6}}
@keyframes ba-map-leader-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes ba-map-label-in{from{opacity:0;translate:var(--dx,0) var(--dy,0)}to{opacity:1;translate:0 0}}
@keyframes ba-map-header-in{from{opacity:0;translate:0 -12px}to{opacity:1;translate:0 0}}
@keyframes ba-map-panel-in{from{opacity:0;translate:16px 0}to{opacity:1;translate:0 0}}
@keyframes ba-map-card-in{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@keyframes ba-map-foot-in{from{opacity:0}to{opacity:1}}
@keyframes ba-map-tip-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes ba-map-leave-logo{from{opacity:0;scale:.92;filter:blur(6px)}to{opacity:1;scale:1;filter:blur(0)}}
@keyframes ba-map-progress{0%{translate:-100% 0;scale:.3 1}50%{translate:10% 0;scale:.6 1}100%{translate:100% 0;scale:.3 1}}

/* ==========================================================================
   12. RESPONSIVE (360 → 1920+)
   ========================================================================== */
/* Desktop: map + side panel; the map fills the viewport height left by the header and footer */
/* The page frame hugs map + panel, so no empty band opens between them */
@media (min-width:1100px){
  :root{--map-w:min(var(--map-max),max(560px,var(--map-fit)));--panel-w:380px;--page-w:calc(var(--map-w) + var(--panel-w) + var(--land-gap) + 2 * var(--gutter))}
  .ba-main{grid-template-columns:minmax(0,1fr) minmax(320px,var(--panel-w));grid-template-areas:"map panel";padding-bottom:.75rem}
  .ba-map{width:min(100%,var(--map-w))}
  .ba-panel{max-width:var(--panel-w)}
  /* the map keeps its place when a shortcut makes the panel taller, and stays in view while the list scrolls */
  .ba-mapzone{align-self:start;position:sticky;top:0}
  html[data-suggest] .ba-countries{gap:.375rem}
  html[data-suggest] .ba-country{min-height:3.5rem;padding-block:.45rem}
}
@media (min-width:1600px){:root{--map-max:1160px;--panel-w:400px}}
@media (min-width:2000px){:root{--map-max:1320px}}
/* Desktop: the map is sized by the viewport height, so the width left beside it goes to the panel (380 → 560px);
   a wide panel runs the country list in two columns: every site stays in the first screen, even under a shortcut */
@media (min-width:1100px){
  :root{--panel-w:clamp(380px,100vw - var(--map-w) - var(--land-gap) - 2 * var(--gutter) - 24px,560px)}
  .ba-countries{grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr))}
}
/* Narrow country cards (two columns, very small phones): the products count goes under the site language, no arrow */
.ba-country{container-type:inline-size}
@container (max-width:15rem){
  .ba-country__count{display:block}
  .ba-country__sep,.ba-country__go{display:none}
}
/* Tablet & phone: single column, the welcome panel and its country list first, the map after it */
@media (max-width:1099.98px){
  .ba-main{justify-items:center;grid-template-areas:"panel" "map"}
  .ba-map{width:min(100%,820px)}
  .ba-panel{width:min(100%,820px)}
}
@media (min-width:640px) and (max-width:1099.98px){
  .ba-countries{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ba-countries__item:last-child:nth-child(odd){grid-column:1/-1}
}
/* Phones: header wraps, the map runs edge to edge, list is the primary navigation */
@media (max-width:699.98px){
  .ba-top__inner{flex-wrap:wrap;row-gap:.5rem}
  .ba-top__region{display:none}  /* the panel eyebrow says it: the header stays on one line */
  .ba-map{width:calc(100% + 2 * var(--gutter));max-width:none;margin-inline:calc(-1 * var(--gutter))}
  /* the left margin of the canvas is kept for the Côte d'Ivoire label, hidden here: re-centre the continent */
  .ba-map__svg{translate:-2.1% 0}
  .ba-map__labels,.ba-map__leaders{display:none}
  .ba-map__pin-body{scale:1.35}
  .ba-legend{position:static;display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem 1.1rem;width:fit-content;margin:.4rem auto 0;padding:.45rem .7rem;font-size:.6875rem}
  .ba-legend__key{width:.75rem;height:.75rem}
  .ba-panel{display:flex;flex-direction:column;padding:1.1rem}
  .ba-panel__group{gap:.7rem;margin-top:.75rem;padding:.4rem .7rem}  /* compact lockup, still under the lead (DESIGN-V2 §7) */
  .ba-panel__group-logo{height:24px}
  .ba-panel__group-text{padding-right:.7rem;font-size:.6875rem}
  .ba-panel__title{margin-bottom:.4rem}
  .ba-panel__subtitle{margin-top:.9rem;padding-top:.8rem}
  .ba-country{min-height:4.1rem}
  .ba-facts__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
  .ba-fact{grid-template-columns:minmax(0,1fr);padding:.75rem .8rem}
  .ba-fact__icon{grid-row:auto;width:2.1rem;height:2.1rem;padding:.4rem;margin-bottom:.45rem}
  .ba-fact__value{font-size:1.2rem}
  .ba-fact__value--text{font-size:1rem}
}
@media (max-width:379.98px){
  .ba-country{grid-template-columns:auto minmax(0,1fr) auto;gap:.65rem;padding-inline:.8rem .65rem}
  .ba-country__go{display:none}
}
/* Landscape tablets and phones: the map is capped by the viewport height, not only the width */
@media (max-width:1099.98px) and (orientation:landscape){
  .ba-map{width:min(100%,820px,max(260px,var(--map-fit)));max-width:100%;margin-inline:auto}
}
/* Short landscape screens: no labels, key below the map, intro composition inside the viewport */
@media (max-height:520px) and (orientation:landscape){
  .ba-map__labels,.ba-map__leaders{display:none}
  .ba-legend{position:static;display:flex;gap:.35rem 1.25rem;width:fit-content;margin:.5rem auto 0}
  .ba-intro__center{width:min(56vw,480px);translate:0 0}
}
/* Touch devices: no hover card; the list stays the primary navigation */
@media (hover:none){
  .ba-map__land path:hover{filter:none}
}

/* ==========================================================================
   13. REDUCED MOTION — intro = short static fade; no decorative motion
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  :root{--map-delay:0s}
  .ba-intro *,.ba-intro *::before,.ba-intro *::after{animation:none!important;transition:none!important}
  .ba-intro{animation:ba-intro-fade .3s ease .4s both}
  .ba-backdrop::before{animation:none!important}
  .is-entering :is(.ba-backdrop,.ba-top,.ba-panel,.ba-suggest,.ba-countries__item,.ba-foot,.ba-legend,.ba-mapnote,.ba-map__grid,.ba-map__base,.ba-map__shape,.ba-map__land path,.ba-map__pin-body,.ba-map__leader,.ba-map__leader-dot,.ba-map__label),
  .ba-map__ripple,.ba-card.is-visible,.ba-tip.is-visible,.is-leaving .ba-leave__logo{animation:none!important}
  .ba-map__ripple{opacity:.3;scale:1.2}
  .ba-map__shape,.ba-country,.ba-country::before,.ba-country__go,.ba-map__pin-body,.ba-suggest__go,.ba-facts__cta{transition-duration:.01ms!important}
  .ba-leave{transition:none}
}

/* ==========================================================================
   14. PRINT & FORCED COLOURS
   ========================================================================== */
@media print{
  .ba-intro,.ba-leave,.ba-lang,.ba-map__cards,.ba-tip,.ba-backdrop,.ba-suggest,.ba-facts__cta{display:none!important}
  .ba-panel{box-shadow:none}
  .ba-foot{background:none;color:#000}
}
@media (forced-colors:active){
  .ba-intro{display:none}
  .ba-map__link:focus-visible .ba-map__shape{stroke:Highlight}
  .ba-country:focus-visible{outline-color:Highlight}
  .ba-lang__btn[aria-pressed="true"]{forced-color-adjust:none}
  .ba-legend__key{forced-color-adjust:none;outline:1px solid CanvasText}
  .ba-map__ring{stroke:Highlight}
  .ba-suggest__go,.ba-facts__cta{border:1px solid ButtonText}
}