/* Visit Gabon — navigation mobile et bulle de discussion.
   Feuille chargée EN DERNIER : les cinq pages écrites à la main portent leur style
   en ligne, et ces règles doivent passer après. Sélecteurs volontairement étroits. */

:root{--vg-forest:#052a1d;--vg-green:#0f9b57;--vg-gold:#f5c518;--vg-line:#e4e0d5}

/* ── Bouton du menu ── */
.burger{display:none;margin-left:6px;width:42px;height:42px;border-radius:12px;cursor:pointer;
  background:transparent;border:1px solid currentColor;color:inherit;padding:11px 9px;
  flex-direction:column;justify-content:space-between;align-items:stretch;flex:0 0 auto}
.burger span{display:block;height:2px;background:currentColor;border-radius:2px;transition:transform .22s,opacity .18s}
.asphd .burger,.hd .burger{color:#1b2320}
body.vg-menu-ouvert .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
body.vg-menu-ouvert .burger span:nth-child(2){opacity:0}
body.vg-menu-ouvert .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ── Voile ── */
.voile{position:fixed;inset:0;background:rgba(4,21,15,.5);backdrop-filter:blur(3px);opacity:0;
  pointer-events:none;transition:opacity .22s;z-index:80}
body.vg-menu-ouvert .voile{opacity:1;pointer-events:auto}
body.vg-menu-ouvert{position:fixed;left:0;right:0;width:100%;overflow:hidden}

/* ── Tiroir ── */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(88vw,380px);z-index:90;
  background:linear-gradient(175deg,#083626 0%,var(--vg-forest) 46%,#03190f 100%);color:#fff;
  border-radius:22px 0 0 22px;transform:translateX(103%);transition:transform .26s cubic-bezier(.22,.7,.25,1);
  display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;
  box-shadow:-18px 0 60px rgba(0,0,0,.4);padding-bottom:env(safe-area-inset-bottom,0)}
body.vg-menu-ouvert .drawer{transform:none}
.dr-tete{display:flex;align-items:center;gap:12px;padding:18px 20px 14px}
.dr-marque{display:flex;align-items:center;gap:10px;flex:1}
.dr-marque .fl{display:flex;flex-direction:column;width:26px;height:26px;border-radius:99px;overflow:hidden;flex:0 0 auto}
.dr-marque .fl i{flex:1}
.dr-marque .fl i:nth-child(1){background:#009e60}
.dr-marque .fl i:nth-child(2){background:#fcd116}
.dr-marque .fl i:nth-child(3){background:#3a75c4}
.dr-nom{display:flex;flex-direction:column;font-weight:800;font-size:.9rem;letter-spacing:.04em;line-height:1.15}
.dr-nom small{font-weight:500;font-size:.68rem;opacity:.65;letter-spacing:.02em}
.dr-fermer{background:rgba(255,255,255,.1);border:0;color:#fff;font-size:1rem;cursor:pointer;
  width:36px;height:36px;border-radius:99px;font-family:inherit;flex:0 0 auto}
.dr-fermer:hover{background:rgba(255,255,255,.18)}

.dr-reglages{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:4px 20px 16px;
  border-bottom:1px solid rgba(255,255,255,.12)}
.dr-champ label{display:block;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;opacity:.6;margin-bottom:6px}
.dr-reglages select{width:100%;min-height:44px;font-family:inherit;font-size:.92rem;font-weight:600;
  padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.09);color:#fff;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
.dr-reglages select option,.dr-reglages select optgroup{color:#10201a;background:#fff}
.dr-reglages .curnote{grid-column:1/-1;color:#a9c6b8;font-size:.74rem;margin-top:2px}

.dr-groupe{padding:14px 0 4px;border-bottom:1px solid rgba(255,255,255,.08)}
.dr-gt{display:block;padding:0 20px 8px;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--vg-gold);opacity:.85}
.dr-lien{display:flex;align-items:center;gap:12px;padding:12px 20px;color:#fff;font-size:.97rem;
  font-weight:600;min-height:48px;transition:background .15s}
.dr-lien:active,.dr-lien:hover{background:rgba(255,255,255,.07)}
.dr-lien.on{background:rgba(245,197,24,.12);box-shadow:inset 3px 0 0 var(--vg-gold)}
.dr-ic{width:30px;height:30px;border-radius:10px;background:rgba(255,255,255,.09);display:grid;
  place-items:center;font-size:.95rem;flex:0 0 auto}
.dr-tx{flex:1}
.dr-fl{opacity:.4;font-size:1.1rem}
.dr-actions{display:flex;flex-direction:column;gap:10px;padding:16px 20px 8px}
.dr-actions .btn.full{width:100%;justify-content:center;border-radius:99px}
.dr-pied{padding:14px 20px 22px;font-size:.7rem;color:#7f9c8d}

/* ── Barre d'onglets basse ── */
.tabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-top:1px solid var(--vg-line);
  padding-bottom:env(safe-area-inset-bottom,0);transition:transform .24s ease}
.tabbar.cachee{transform:translateY(105%)}
.tabbar .tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:9px 4px 8px;background:transparent;border:0;font-family:inherit;cursor:pointer;
  color:#5b6d65;min-height:56px}
.tabbar .tb-ic{font-size:1.14rem;line-height:1}
.tabbar .tb-tx{font-size:.66rem;font-weight:700;letter-spacing:.01em}
.tabbar .tab.on{color:var(--vg-green)}
.tabbar .tab.on .tb-ic{transform:translateY(-1px)}
body.vg-menu-ouvert .tabbar{transform:translateY(105%)}

/* ── Bulle de discussion ── */
.chat-fab{position:fixed;right:16px;bottom:18px;z-index:75;width:56px;height:56px;border-radius:99px;
  border:0;cursor:pointer;background:var(--vg-green);color:#fff;box-shadow:0 10px 30px rgba(6,42,30,.35);
  display:grid;place-items:center;font-family:inherit;transition:transform .18s,background .18s}
.chat-fab:hover{transform:translateY(-2px);background:#0b7a45}
.cf-ic{font-size:1.4rem;line-height:1}
.cf-pt{position:absolute;top:12px;right:12px;width:9px;height:9px;border-radius:99px;background:var(--vg-gold);
  box-shadow:0 0 0 0 rgba(245,197,24,.7);animation:vgpulse 2.4s infinite}
@keyframes vgpulse{0%{box-shadow:0 0 0 0 rgba(245,197,24,.6)}70%{box-shadow:0 0 0 10px rgba(245,197,24,0)}100%{box-shadow:0 0 0 0 rgba(245,197,24,0)}}
body.vg-chat-ouvert .chat-fab .cf-ic{font-size:1.2rem}
body.vg-chat-ouvert .cf-pt{display:none}

.chat{position:fixed;right:16px;bottom:84px;z-index:76;width:min(94vw,380px);max-height:min(72vh,560px);
  background:#fff;border:1px solid var(--vg-line);border-radius:18px;box-shadow:0 24px 70px rgba(6,42,30,.28);
  display:flex;flex-direction:column;overflow:hidden;opacity:0;transform:translateY(14px) scale(.98);
  pointer-events:none;transition:opacity .2s,transform .2s}
body.vg-chat-ouvert .chat{opacity:1;transform:none;pointer-events:auto}
.ch-tete{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--vg-forest);color:#fff}
.ch-av{width:34px;height:34px;border-radius:99px;background:rgba(255,255,255,.14);display:grid;place-items:center;font-size:1rem}
.ch-id{display:flex;flex-direction:column;flex:1;line-height:1.2}
.ch-id b{font-size:.9rem}
.ch-id small{font-size:.68rem;opacity:.7}
.ch-fermer{background:rgba(255,255,255,.12);border:0;color:#fff;width:30px;height:30px;border-radius:99px;
  cursor:pointer;font-family:inherit;font-size:.85rem}
.ch-fil{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:#f8f5ee}
.ch-b{max-width:86%;padding:11px 14px;border-radius:16px;font-size:.88rem;line-height:1.5}
.ch-b.bot{background:#fff;border:1px solid var(--vg-line);border-bottom-left-radius:5px;color:#10201a}
.ch-b.moi{background:var(--vg-green);color:#fff;align-self:flex-end;border-bottom-right-radius:5px}
.ch-b .ch-note{display:block;margin-top:8px;font-size:.74rem;color:#8a978f}
.ch-liens{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ch-liens a{font-size:.76rem;font-weight:700;padding:6px 11px;border-radius:99px;background:#e8f6ef;
  color:#0b7a45;border:1px solid #cbe9db}
.ch-liens a:hover{background:#d6efe3}
.ch-attente{display:flex;gap:4px;align-items:center;padding:14px}
.ch-attente span{width:6px;height:6px;border-radius:99px;background:#b6c4bd;animation:vgdot 1s infinite}
.ch-attente span:nth-child(2){animation-delay:.15s}
.ch-attente span:nth-child(3){animation-delay:.3s}
@keyframes vgdot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.ch-pied{border-top:1px solid var(--vg-line);background:#fff;padding:10px 12px 12px}
.ch-rapides{display:flex;gap:6px;overflow-x:auto;padding-bottom:9px;scrollbar-width:none}
.ch-rapides::-webkit-scrollbar{display:none}
.ch-rapide{white-space:nowrap;font-family:inherit;font-size:.76rem;font-weight:600;padding:7px 12px;
  border-radius:99px;border:1px solid var(--vg-line);background:#f8f5ee;color:#5b6d65;cursor:pointer}
.ch-rapide:hover{border-color:var(--vg-green);color:#0b7a45}
.ch-ligne{display:flex;gap:8px}
.ch-champ{flex:1;min-height:42px;font-family:inherit;font-size:.9rem;padding:10px 14px;border-radius:99px;
  border:1px solid var(--vg-line);background:#f8f5ee;color:#10201a}
.ch-champ:focus{outline:2px solid #cbe9db;outline-offset:1px}
.ch-envoi{width:42px;height:42px;border-radius:99px;border:0;background:var(--vg-green);color:#fff;
  font-size:1.05rem;cursor:pointer;font-family:inherit;flex:0 0 auto}
.ch-envoi:hover{background:#0b7a45}

/* ── Adaptations mobiles ── */
@media(max-width:1080px){
  .burger{display:flex}
  .tabbar{display:flex}
  body.a-tabbar{padding-bottom:calc(58px + env(safe-area-inset-bottom,0px))}
  .chat-fab{bottom:calc(70px + env(safe-area-inset-bottom,0px))}
  .chat{bottom:calc(136px + env(safe-area-inset-bottom,0px))}
  .nav .bar,.hd .in,.asphd .in{gap:10px}
  .nav .right,.hd .right,.asphd .right{gap:6px}
  .asphd .right .lien,.nav .right .btn,.asphd .right .btn{display:none}
  select.curpick,select.langpick{max-width:96px;min-height:38px}
}
@media(max-width:640px){
  .nav .right select,.hd .right select,.asphd .right select{display:none}
  .wrap{padding:0 18px}
  section{padding:40px 0}
  .chat{right:10px;left:10px;width:auto;max-height:66vh}
  .chat-fab{right:14px}
  .util .sec{gap:12px;font-size:.72rem}
  .aspsec{padding:36px 0}
  .cta{padding:26px}
  .asphero{height:58vw;min-height:240px}
  .aspstat .rond{width:96px;height:96px}
  .mapfig img{max-height:300px}
  .dot span,.pin{font-size:.62rem}
}
@media(min-width:1081px){ body.a-tabbar{padding-bottom:0} }


/* ═══ Huitième vague : finition ═══ */

/* Le sélecteur de devise coupait son libellé sous la flèche. */
.dr-reglages select{padding-right:34px;text-overflow:ellipsis}
select.curpick,select.langpick{padding-right:26px;text-overflow:ellipsis}

/* Lien d'évitement : invisible tant qu'on ne navigue pas au clavier. */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:#052a1d;color:#fff;
  padding:12px 18px;border-radius:0 0 12px 0;font-weight:700;font-size:.85rem}
.skip:focus{left:0}

/* Une ancre sous un en-tête collant se cachait derrière lui. */
:target,[id]{scroll-margin-top:86px}

/* Le focus clavier doit se voir — sans polluer le clic à la souris. */
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,
textarea:focus-visible,summary:focus-visible{outline:3px solid #f5c518;outline-offset:2px;border-radius:6px}

/* Les images qui n'ont pas encore leur place font sauter la page au chargement. */
img{background:#eef1ef}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .drawer{transition:none}
}

@media print{
  .nav,.tabbar,.chat,.chat-fab,.drawer,.voile,.burger,.skip,.hero>img{display:none!important}
  body{background:#fff;color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.75em;color:#555}
}