/* =========================================================
   TATEA — Hero 3 « la carte »
   D'après la réf. « less is more. » : mur gris clair, carte de l'Afrique en jaune (frontières dessinées)
   au centre, dirigeant détouré en noir et blanc posé devant, très gros titre gras
   à droite, petit texte + bouton à gauche, bandeau de 3 chiffres jaunes
   sous un filet. Pays où se tient TATEA en bleu sur la carte.
   Couleurs de la refonte H&C.
   ========================================================= */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-600.woff2") format("woff2"); }

:root {
  --ink: #16213d;
  --night: #0b1626;       /* 2026-10-19 : le bleu nuit du site H&C (essai #001d39 abandonné) */
  --wall: #edf0f4;        /* 2026-10-19 : clair, en alternance avec le bleu marine (avant #e9ebef) */
  --wall-2: #e2e7ee;      /* bandeau des chiffres, un ton plus bas (avant #e1e4ea) */
  --text: #3d4862;
  --gold: #e2ae0c;
  --gold-strong: #f0bf24;
  --sky: #9cc3e4;         /* tache bleu clair des chiffres */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --edge: clamp(16px, 3.4vw, 48px);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--wall); color: var(--ink); font: 400 16px/1.5 "Barlow", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.page { min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }

/* ---------- Barre ---------- */
.bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 22px var(--edge) 18px; position: relative; z-index: 5; }
.bar__logo img { width: 118px; height: auto; }
.bar__nav { display: flex; gap: clamp(18px, 2.6vw, 36px); font-size: 15px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.bar__nav a { text-decoration: none; }
.bar__nav a:hover { color: #000; }
.bar__menu { justify-self: end; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; display: grid; place-content: center; gap: 5px; cursor: pointer; }
.bar__menu span { width: 22px; height: 2px; background: var(--ink); }
.bar__menu:hover { background: rgb(22 33 61 / .07); }

/* ---------- Hero ---------- */
.hero {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
  padding: 0 var(--edge); min-height: 520px;
  border-bottom: 1.5px solid var(--ink);
}
.hero__left { grid-column: 1; align-self: stretch; position: relative; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(40px, 9vh, 96px) 0 clamp(36px, 7vh, 72px) clamp(0px, 2vw, 30px); }
.hero__lead { margin: 0 0 10px 14px; max-width: 20ch; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.4; color: var(--text); }
/* le texte monte mot par mot depuis un cache, comme le titre */
.hero__lead .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.hero__lead .w > span { display: inline-block; }
.js .hero__lead .w > span { transform: translateY(110%); transition: transform 1s cubic-bezier(.7, 0, .2, 1); transition-delay: calc(.85s + var(--i) * 28ms); }
.js .is-in .hero__lead .w > span { transform: none; }
.hero__more { margin-left: 14px; font-size: 15px; font-weight: 600; text-decoration: none; }
.hero__more:hover { text-decoration: underline; text-underline-offset: 3px; }
.hero__left .btn { margin-top: auto; }

.hero__stage { grid-column: 2; position: relative; align-self: stretch; min-height: 0; clip-path: inset(-100vh -100vw 0 -100vw); } /* la carte s'arrête net au filet */
.hero__map { position: absolute; left: 41.5%; translate: -50% 0; top: 3%; height: 112%; width: auto; max-width: none; aspect-ratio: 1.069; /* carte élargie de 7 % */ overflow: visible; }
.map__c { fill: var(--gold); stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; } /* frontières gardées sur la carte */
.map__c--hc { fill: var(--ink); }
.hero__person {
  position: absolute; left: 50%; bottom: 0; translate: -52% 0;
  height: 86%; width: auto; max-width: none;
  filter: grayscale(1) contrast(1.12) brightness(.96);
}

.hero__title {
  position: absolute; z-index: 4; right: var(--edge); top: 32%;
  margin: 0; font-weight: 600; font-size: clamp(56px, 8.4vw, 132px); line-height: .9; letter-spacing: -.035em; color: #10131a;
  text-align: left; width: min-content;
}
.hero__title .w { display: inline-block; overflow: hidden; padding-bottom: .08em; vertical-align: top; }
.hero__title .w > span { display: inline-block; }
.hero__place { position: absolute; right: var(--edge); bottom: 18px; margin: 0; font-size: 14px; font-weight: 600; }

/* ---------- Boutons (dessin de la refonte) ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 18px 6px 7px; border-radius: 999px; font-size: 15px; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; transition: background-color .25s, transform .3s var(--ease); }
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: var(--gold-strong); }
.btn__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgb(22 33 61 / .12); transition: background-color .25s, transform .4s var(--ease); }
.btn__icon svg, .btn__arrow { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn__icon svg { width: 16px; height: 16px; }
.btn__arrow { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.btn:hover .btn__arrow { transform: translate(2px, -2px); }
.btn--gold:hover .btn__icon { background: rgb(22 33 61 / .18); transform: rotate(-10deg); }

/* ---------- Bandeau des chiffres ---------- */
.stats { position: relative; display: flex; justify-content: center; gap: clamp(36px, 8vw, 120px); padding: clamp(26px, 4.5vh, 44px) var(--edge); background: var(--wall-2); overflow: hidden; isolation: isolate; }
.stat__n { margin: 0; color: var(--gold); font-weight: 600; font-size: clamp(36px, 3.6vw, 52px); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat__l { margin: 10px 0 0; font-size: 14px; line-height: 1.4; color: var(--text); }

/* la carte arrive jaune, puis les frontières se dessinent dessus, puis les 3 pays passent au bleu */
.js .map__c { fill: transparent; stroke-dasharray: 1; stroke-dashoffset: 1; }
/* ---------- Entrée (une fois, ≈ 2,5 s) ---------- */
.js .hero__person { opacity: 0; translate: -52% 14%; transition: opacity .7s 1.2s, translate 1.2s var(--ease) 1.2s; }
.js .hero__title .w > span { transform: translateY(110%); transition: transform 1s cubic-bezier(.7, 0, .2, 1) .55s; }
.js .hero__title .w + .w > span { transition-delay: .7s; }
.js .hero__left > *, .js .hero__place, .js .stat { opacity: 0; transform: translateY(10px); transition: opacity .6s, transform .7s var(--ease); }
.js .hero__left > .hero__lead { transition: none; opacity: 1; transform: none; } .js .hero__left > .hero__more { transition-delay: 1s; }
.js .hero__left > .btn { transition-delay: 1.3s; } .js .hero__place { transition-delay: 1.2s; }
.js .stat:nth-of-type(1) { transition-delay: 1.1s; } .js .stat:nth-of-type(2) { transition-delay: 1.2s; } .js .stat:nth-of-type(3) { transition-delay: 1.3s; }
.js .is-in .map__c { fill: var(--gold); stroke-dashoffset: 0; transition: fill .7s ease .1s, stroke-dashoffset 1.6s cubic-bezier(.45, 0, .25, 1) .8s; }
.js .is-in .map__c--hc { fill: var(--ink); animation: hc-in 2.9s ease backwards; }
@keyframes hc-in { 0% { fill: transparent; } 26% { fill: var(--gold); } 82% { fill: var(--gold); } 100% { fill: var(--ink); } }
.js .is-in .hero__person { opacity: 1; translate: -52% 0; }
.js .is-in .hero__title .w > span { transform: none; }
.js .is-in .hero__left > *, .js .is-in .hero__place, .js .is-in .stat { opacity: 1; transform: none; }

/* ---------- Tablette et mobile ---------- */
@media (max-width: 1180px) {
  .bar__nav { display: none; } .bar { grid-template-columns: 1fr auto; padding-bottom: 8px; }
  .bar__logo img { width: 104px; }
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; padding-top: 14px; min-height: 0; }
  .hero__title { position: static; grid-row: 1; width: auto; font-size: clamp(50px, 14vw, 96px); margin-top: 6px; }
  /* la carte et la dirigeante, centrées et plus grandes */
  .hero__stage { grid-column: 1; grid-row: 2; height: min(96vw, 600px); margin-top: 8px; }
  .hero__map { left: 50%; top: 2%; height: 100%; }
  .hero__person { height: 88%; }
  .hero__left { grid-row: 3; padding: 26px 0 30px; }
  .hero__lead, .hero__more { margin-left: 0; }
  .hero__lead { max-width: 34ch; }
  .hero__left .btn { margin-top: 18px; }
  .hero__place { display: none; }
  /* les trois chiffres restent côte à côte */
  .stats { justify-content: space-between; gap: 18px; padding-block: 26px 30px; }
  .stat { flex: 1 1 0; min-width: 0; }
  .stat__n { font-size: clamp(30px, 8.4vw, 44px); }
  .stat__l { margin-top: 6px; font-size: 12.5px; }
  .stat__l br { display: none; }
}
/* tablette : texte à gauche, bouton à droite */
@media (min-width: 600px) and (max-width: 1180px) {
  .hero__left { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 32px; }
  .hero__lead { grid-column: 1; }
  .hero__more { grid-column: 1; }
  .hero__left .btn { grid-column: 2; grid-row: 1 / 3; margin-top: 0; }
  .hero__lead { max-width: 40ch; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }