/*!
 * Owando v2.1 — compléments « sensations » (chargés après owando.css, rien n’est modifié dans l’existant)
 * 1 Présence en Afrique · 2 Temps forts · 3 Effets au survol · 4 Mobile · 5 Mouvement réduit
 */

/* 1 ─ Présence en Afrique ──────────────────────────────────────────────── */
.presence{position:relative;overflow:hidden;background:radial-gradient(900px 600px at 72% 45%,rgba(33,180,166,.16),transparent 60%),linear-gradient(180deg,var(--navy),#05121e);color:#fff}
.presence::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(90deg,#000,transparent 55%);-webkit-mask-image:linear-gradient(90deg,#000,transparent 55%);pointer-events:none}
.presence__grid{position:relative;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(40px,6vw,96px);align-items:center}
.presence h2{margin:0 0 22px;font-family:var(--display);font-weight:600;font-size:clamp(40px,4.3vw,66px);line-height:.98;letter-spacing:-.048em;text-wrap:balance}
.presence h2 em{font-style:normal;color:var(--aqua-2)}
.presence__copy>p{margin:0;max-width:520px;color:rgba(255,255,255,.72)}
.presence__places{display:grid;gap:10px;margin:34px 0 0;padding:0;list-style:none}
.presence__places button{display:flex;align-items:center;gap:18px;width:100%;padding:18px 20px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.03);color:#fff;text-align:left;transition:background-color .3s ease,border-color .3s ease,transform .35s var(--ease-out)}
.presence__places button:hover,.presence__places button.is-hot{border-color:rgba(33,180,166,.65);background:rgba(33,180,166,.1);transform:translateX(6px)}
.presence__places b{display:block;font:600 18px/1.25 var(--display);letter-spacing:-.01em}
.presence__places small{display:block;margin-top:3px;font-size:13.5px;color:rgba(255,255,255,.6)}
.presence__pin{position:relative;flex:0 0 auto;width:14px;height:14px;border-radius:50%;background:var(--aqua);box-shadow:0 0 0 4px rgba(33,180,166,.2)}
.presence__pin::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--aqua);animation:plus-halo 2.4s ease-out infinite}
[data-place="bf"] .presence__pin{background:var(--yellow);box-shadow:0 0 0 4px rgba(244,211,94,.22)}
[data-place="bf"] .presence__pin::after{border-color:var(--yellow)}
@keyframes plus-halo{from{transform:scale(.6);opacity:1}to{transform:scale(2.2);opacity:0}}
.presence__map{position:relative;aspect-ratio:600/640;width:100%;max-width:640px;justify-self:end}
.presence__map canvas{position:absolute;inset:0;width:100%;height:100%}
.presence__label{position:absolute;z-index:2;display:grid;gap:1px;padding:7px 12px;border-radius:10px;background:rgba(7,24,39,.82);box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.12);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transform:translate(16px,-50%);white-space:nowrap;pointer-events:none;transition:transform .4s var(--ease-out),box-shadow .3s ease}
.presence__label b{font:600 13.5px/1.2 var(--display);color:#fff}
.presence__label small{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--aqua-2)}
.presence__label--bf small{color:var(--yellow)}
.presence__label.is-hot{transform:translate(20px,-50%) scale(1.06);box-shadow:0 14px 34px rgba(0,0,0,.4),inset 0 0 0 1px var(--aqua)}
.presence__label--bf{transform:translate(calc(-100% - 16px),-50%);text-align:right}
.presence__label--bf.is-hot{transform:translate(calc(-100% - 20px),-50%) scale(1.06);box-shadow:0 14px 34px rgba(0,0,0,.4),inset 0 0 0 1px var(--yellow)}
.js .presence__map:not(.is-live) .presence__label{opacity:0}
.presence__map .presence__label{transition:opacity .6s ease .2s,transform .4s var(--ease-out),box-shadow .3s ease}
html:not(.js) .presence__map{display:none}

/* 2 ─ Temps forts ─────────────────────────────────────────────────────── */
.timeline{background:#fff}
.timeline__track{position:relative}
.timeline__rail{position:absolute;left:0;right:0;top:9px;height:2px;background:var(--line)}
.timeline__rail i{position:absolute;inset:0;background:linear-gradient(90deg,var(--teal),var(--aqua));transform-origin:left;transform:scaleX(var(--tl,0))}
html:not(.js) .timeline__rail i{transform:none}
.timeline__list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px;margin:0;padding:0;list-style:none}
.timeline__item{position:relative;padding-top:44px}
.timeline__dot{position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--line);transition:box-shadow .45s ease,transform .45s var(--ease-spring)}
.timeline__item.is-on .timeline__dot,html:not(.js) .timeline__dot{box-shadow:inset 0 0 0 6px var(--aqua);transform:scale(1.12)}
.timeline__item.is-next .timeline__dot{box-shadow:inset 0 0 0 2px var(--yellow)}
.timeline__item.is-next.is-on .timeline__dot{box-shadow:inset 0 0 0 6px var(--yellow)}
.timeline__date{margin:0;font:700 12px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.timeline__date span{display:block;margin-top:4px;font-weight:600;letter-spacing:.06em;color:var(--muted)}
.timeline__item h3{margin:16px 0 10px;font:600 21px/1.18 var(--display);letter-spacing:-.025em;color:var(--navy)}
.timeline__item p:last-child{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
.js .timeline__item{opacity:.35;transform:translateY(10px);transition:opacity .6s ease,transform .7s var(--ease-out)}
.js .timeline__item.is-on{opacity:1;transform:none}

/* 3 ─ Effets au survol (souris uniquement) ─────────────────────────────── */
@media (hover:hover) and (pointer:fine){
  .fx .expertise-card:hover,.fx .post-card:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .15s linear}
  .fx .expertise-card::after{background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(33,180,166,.16),transparent 60%),linear-gradient(180deg,var(--mint),rgba(238,248,245,0))}
  .fx .btn-accent{transform:translate(var(--bx,0),var(--by,0));transition:transform .45s var(--ease-out),color var(--t-fast) ease}
  .fx .aura-host{position:relative;isolation:isolate}
  .fx .aura{position:absolute;z-index:0;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;background:radial-gradient(circle,rgba(33,180,166,.18),transparent 62%);pointer-events:none;opacity:0;transform:translate(var(--ax,0),var(--ay,0));transition:opacity .5s ease}
  .fx .aura-host:hover>.aura{opacity:1}
  .fx .aura-host>*:not(.aura){position:relative;z-index:1}
}

/* Retour en haut avec anneau de progression (ordinateur et mobile) */
.totop{position:fixed;right:28px;bottom:28px;z-index:80;display:none;place-items:center;width:52px;height:52px;padding:0;border:0;border-radius:50%;background:var(--navy);color:#fff;box-shadow:0 12px 30px rgba(4,19,31,.28);cursor:pointer;opacity:0;transform:translateY(14px) scale(.9);transition:opacity .35s ease,transform .45s var(--ease-out),background-color .25s ease}
.totop.is-on{opacity:1;transform:none}
.totop:hover{background:var(--teal)}
.totop:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.totop svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.totop circle{fill:none;stroke-width:2.5}
.totop .totop__bg{stroke:rgba(255,255,255,.14)}
.totop .totop__fg{stroke:var(--aqua);stroke-linecap:round;stroke-dasharray:138.2;stroke-dashoffset:calc(138.2 - 138.2 * var(--sp,0))}
.totop b{position:relative;font:600 18px/1 var(--sans)}
@media (min-width:981px){.totop{display:grid}}
@media (max-width:980px){.totop{display:grid;right:18px;bottom:calc(82px + env(safe-area-inset-bottom));width:46px;height:46px}.totop b{font-size:16px}}

/* Correctif v2.0 : les cercles décoratifs des articles ne créent plus de défilement horizontal */
.page-hero__orbits{overflow:hidden}
.article-nav__img{position:relative}

/* 4 ─ Mobile ──────────────────────────────────────────────────────────── */
@media (max-width:980px){
  .presence__grid{grid-template-columns:minmax(0,1fr)}
  .presence__map{justify-self:center;max-width:520px;order:-1;margin:-10px 0 -12%}
  .timeline__rail{left:9px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .timeline__rail i{transform-origin:top;transform:scaleY(var(--tl,0))}
  .timeline__list{grid-template-columns:minmax(0,1fr);gap:30px}
  .timeline__item{padding:0 0 0 46px}
  .timeline__dot{top:2px}
}
@media (max-width:640px){
  .presence__label{padding:5px 9px;transform:translate(10px,-50%)}
  .presence__label--bf{transform:translate(calc(-100% - 10px),-50%)}
  .presence__label b{font-size:12px}
  .presence__label small{font-size:9.5px}
  .presence__places button{padding:15px 16px}
}

/* 5 ─ Mouvement réduit ───────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .presence__pin::after{animation:none}
  .totop{transition:none}
  .js .timeline__item{opacity:1;transform:none}
  .timeline__dot{box-shadow:inset 0 0 0 6px var(--aqua)!important}
  .timeline__rail i{transform:none!important}
  .fx .expertise-card:hover,.fx .post-card:hover,.fx .btn-accent{transform:none!important}
}

/* 6 ─ Palette accueil affinée après retour client ───────────────────────
 * Bleu pétrole plus proche du logo Owando, sans modifier les pages
 * intérieures ni la hiérarchie turquoise / jaune existante.
 */
body.home{
  --ow-home-blue:#07354c;
  --ow-home-blue-mid:#0a4057;
  --ow-home-blue-deep:#062b40;
}
body.home .hero{
  background:
    radial-gradient(circle at 13% 17%,rgba(33,180,166,.20),transparent 34%),
    radial-gradient(circle at 82% 32%,rgba(18,132,151,.16),transparent 42%),
    linear-gradient(135deg,var(--ow-home-blue) 0%,var(--ow-home-blue-mid) 58%,var(--ow-home-blue-deep) 100%);
}
body.home .hero-slide__frame{background:var(--ow-home-blue-mid)}
body.home .hero-proof{background:rgba(4,43,61,.68)}
body.home .hero-pause{background:rgba(4,43,61,.42)}
body.home .sectors{background:var(--ow-home-blue);}
body.home .presence{
  background:
    radial-gradient(900px 600px at 72% 45%,rgba(33,180,166,.20),transparent 60%),
    linear-gradient(180deg,var(--ow-home-blue-mid),var(--ow-home-blue-deep));
}
body.home .band-pecb{background:#0a3b51;}