/* ==========================================================================
   AFRICONSULT : styles communs (complément de Tailwind)
   ========================================================================== */

:root {
  --navy: #00167A;
  --navy-900: #000833;
  --green: #007A3F;
  --aqua: #83F7EF;
  --ink: #0B1230;
  --sand: #F5F3EE;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  font-feature-settings: "cv11", "ss01";
  color: var(--ink);
  background: #FBFAF7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--aqua); color: var(--navy-900); }

/* Chiffres (compteurs, dates, étapes) : Inter, chiffres alignés */
.font-num { font-family: 'Inter', system-ui, sans-serif; font-weight: 600; letter-spacing: -0.035em; font-variant-numeric: tabular-nums lining-nums; }

/* Chiffres insérés dans un titre en Cormorant : Inter, un peu réduit pour s'aligner sur la hauteur des lettres */
.num-inline { font-family: 'Inter', system-ui, sans-serif; font-style: normal; font-weight: 500; font-size: .84em; letter-spacing: -0.03em; font-variant-numeric: lining-nums; }

/* Cormorant Garamond : petit œil, on resserre légèrement et on garde une graisse lisible */
.font-display { letter-spacing: -0.01em; font-weight: 600; }
.font-display em, .font-display i { font-style: italic; font-weight: 500; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .9rem 1.5rem; border-radius: 999px;
  font-weight: 700; font-size: .95rem; line-height: 1;
  transition: transform .35s var(--ease-out), background-color .25s, color .25s, box-shadow .35s var(--ease-out);
  will-change: transform;
}
.btn svg { transition: transform .35s var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--green); color: #fff; box-shadow: 0 1px 2px rgba(11,18,48,.12), 0 8px 18px -10px rgba(11,18,48,.45); }
.btn-primary:hover { background: #006233; box-shadow: 0 2px 4px rgba(11,18,48,.12), 0 12px 24px -12px rgba(11,18,48,.5); }
.btn-navy { background: var(--navy); color: #fff; box-shadow: 0 1px 2px rgba(11,18,48,.12), 0 8px 18px -10px rgba(11,18,48,.45); }
.btn-navy:hover { background: #000D47; }
.btn-ghost-light { color: #fff; border: 1px solid rgba(255,255,255,.3); }
.btn-ghost-light:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); }
.btn-ghost { color: var(--navy); border: 1px solid rgba(0,22,122,.2); }
.btn-ghost:hover { background: rgba(0,22,122,.05); border-color: var(--navy); }

/* Lien souligné animé */
.link-u { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .45s var(--ease-out); padding-bottom: 2px; }
.link-u:hover { background-size: 100% 1.5px; }

/* Sur-titre */
.eyebrow {
  display: inline-flex; align-items: center;
  font-size: .75rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--green);
}
.eyebrow.on-dark { color: var(--aqua); }

/* ---------- En-tête ---------- */
#site-header { transition: background-color .4s, box-shadow .4s, transform .5s var(--ease-out); }
#site-header.is-scrolled { background: rgba(251,250,247,.86); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); box-shadow: 0 1px 0 rgba(11,18,48,.06), 0 10px 30px -18px rgba(11,18,48,.25); }
#site-header.is-hidden { transform: translateY(-110%); }
#site-header .nav-link { position: relative; }
#site-header .nav-link::after {
  content: ""; position: absolute; left: 50%; bottom: -6px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--green); transform: translateX(-50%) scale(0); transition: transform .35s var(--ease-out);
}
#site-header .nav-link:hover::after, #site-header .nav-link[aria-current="page"]::after { transform: translateX(-50%) scale(1); }

/* En-tête transparent sur héros sombre */
[data-header="dark"] #site-header:not(.is-scrolled) .nav-link,
[data-header="dark"] #site-header:not(.is-scrolled) .menu-btn { color: #fff; }
[data-header="dark"] #site-header:not(.is-scrolled) .brand-sub { color: rgba(255,255,255,.65); }
/* Sur fond sombre : bleu et vert éclaircis pour rester lisibles */
[data-header="dark"] #site-header:not(.is-scrolled) .brand-afri { color: #B0BCEB; }
[data-header="dark"] #site-header:not(.is-scrolled) .brand-consult { color: #58BC84; }
[data-header="dark"] #site-header:not(.is-scrolled) .nav-link::after { background: var(--aqua); }

/* Menu déroulant */
/* Centrage et décalage dans une seule propriété transform ; ouverture pilotée par main.js (.is-open). */
.dropdown-panel {
  position: absolute; top: 100%; left: 50%;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity .2s, transform .3s var(--ease-out), visibility 0s linear .2s;
}
.dropdown.is-open .dropdown-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
  transition: opacity .25s, transform .4s var(--ease-out), visibility 0s;
}
.dropdown .nav-chevron { transition: transform .3s var(--ease-out); }
.dropdown.is-open .nav-chevron { transform: rotate(180deg); }

/* Menu mobile */
#mobile-menu { clip-path: circle(0% at calc(100% - 40px) 40px); transition: clip-path .7s var(--ease-out); }
#mobile-menu.is-open { clip-path: circle(150% at calc(100% - 40px) 40px); }
#mobile-menu .m-item { opacity: 0; transform: translateY(20px); transition: opacity .5s, transform .6s var(--ease-out); }
#mobile-menu.is-open .m-item { opacity: 1; transform: none; }

/* ---------- Animations d'apparition ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-out), transform 1s var(--ease-out); transition-delay: var(--d, 0s); }
.reveal.from-left { transform: translateX(-36px); }
.reveal.from-right { transform: translateX(36px); }
.reveal.zoom { transform: scale(.94); }
.reveal.is-in { opacity: 1; transform: none; }

/* Rideau qui se lève sur l'image (pas de clip-path : il fausse l'IntersectionObserver) */
.img-reveal { position: relative; }
.img-reveal::after { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--curtain, #FBFAF7); transform-origin: 50% 0; transition: transform 1.3s var(--ease-out); transition-delay: var(--d, 0s); pointer-events: none; }
.img-reveal img { transform: scale(1.18); transition: transform 1.6s var(--ease-out); transition-delay: var(--d, 0s); }
.img-reveal.is-in::after { transform: scaleY(0); }
.img-reveal.is-in img { transform: scale(1); }

/* Titre héros : mots qui montent */
.split-line { display: block; overflow: hidden; padding-bottom: .16em; margin-bottom: -.1em; }
.split-line > span { display: inline-block; transform: translateY(110%); transition: transform 1.1s var(--ease-out); transition-delay: var(--d, 0s); }
.is-loaded .split-line > span { transform: none; }
.hero-fade { opacity: 0; transform: translateY(16px); transition: opacity 1s, transform 1s var(--ease-out); transition-delay: var(--d, 0s); }
.is-loaded .hero-fade { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .hero-fade, .split-line > span, .img-reveal, .img-reveal img { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .img-reveal::after { display: none; }
  .marquee-track, .float-a, .float-b, .spin-slow { animation: none !important; }
}

/* ---------- Décors ---------- */
.rings {
  background:
    radial-gradient(circle at center, transparent 0 38%, rgba(131,247,239,.10) 38% 38.4%, transparent 38.4% 52%, rgba(131,247,239,.08) 52% 52.3%, transparent 52.3% 66%, rgba(131,247,239,.06) 66% 66.25%, transparent 66.25%);
}
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.dot-grid { background-image: radial-gradient(rgba(0,22,122,.14) 1px, transparent 1px); background-size: 22px 22px; }
.dot-grid-light { background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px); background-size: 22px 22px; }

@keyframes floatA { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-12px) } }
@keyframes floatB { 0%,100% { transform: translateY(0) } 50% { transform: translateY(10px) } }
@keyframes spin { to { transform: rotate(360deg) } }
.float-a { animation: floatA 6s ease-in-out infinite; }
.float-b { animation: floatB 7s ease-in-out infinite; }
.spin-slow { animation: spin 40s linear infinite; }

/* ---------- Défilement des logos ---------- */
.marquee { mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 45s linear infinite; }
.marquee-track.reverse { animation-direction: reverse; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.logo-tile img { filter: grayscale(1) contrast(.9); opacity: .65; transition: filter .4s, opacity .4s, transform .4s var(--ease-out); }
.logo-tile:hover img { filter: none; opacity: 1; transform: scale(1.06); }

/* ---------- Cartes ---------- */
.card-lift { transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .3s; }
.card-lift:hover { transform: translateY(-6px); box-shadow: 0 2px 4px rgba(11,18,48,.04), 0 28px 50px -20px rgba(0,22,122,.28); }

.service-card .service-img img { transition: transform 1.2s var(--ease-out); }
.service-card:hover .service-img img { transform: scale(1.07); }
.service-card .arrow { transition: transform .45s var(--ease-out), background-color .3s, color .3s; }
.service-card:hover .arrow { transform: rotate(-45deg); background: var(--green); color: #fff; }

/* Lueur qui suit le curseur */
.glow-card { position: relative; isolation: isolate; }
.glow-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(131,247,239,.18), transparent 45%);
}
.glow-card:hover::before { opacity: 1; }

/* Onglets / filtres */
.chip { transition: background-color .25s, color .25s, border-color .25s; }
.chip.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Accordéon */
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-out); }
.acc-panel > div { overflow: hidden; }
.acc.is-open .acc-panel { grid-template-rows: 1fr; }
.acc .acc-icon { transition: transform .4s var(--ease-out); }
.acc.is-open .acc-icon { transform: rotate(45deg); }

/* Barre de progression de lecture */
#progress { transform-origin: 0 50%; transform: scaleX(0); }

/* Champs de formulaire */
.field { position: relative; }
.field input, .field textarea, .field select {
  width: 100%; background: #fff; border: 1px solid #E2E0D8; border-radius: 14px; padding: 1.35rem 1rem .55rem; font-size: .95rem;
  transition: border-color .25s, box-shadow .25s; outline: none; appearance: none;
}
.field textarea { min-height: 150px; resize: vertical; }
.field label { position: absolute; left: 1rem; top: .95rem; font-size: .95rem; color: #6B7085; pointer-events: none; transition: all .25s var(--ease-out); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--navy); box-shadow: 0 0 0 4px rgba(0,22,122,.08); }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
.field select + label { top: .45rem; font-size: .7rem; font-weight: 700; letter-spacing: .04em; color: var(--navy); }

/* Retour en haut */
#to-top { opacity: 0; visibility: hidden; transform: translateY(12px); transition: all .4s var(--ease-out); }
#to-top.is-visible { opacity: 1; visibility: visible; transform: none; }

/* Barre de défilement */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #F5F3EE; }
::-webkit-scrollbar-thumb { background: #B0BCEB; border-radius: 10px; border: 2px solid #F5F3EE; }

/* Tiret du nom « Africonsult-ci » : celui d’Inter, centré sur la hauteur des minuscules de Cormorant (mesuré) */
.brand-dash { font-family: 'Inter', system-ui, sans-serif; font-weight: 500; font-size: .8em; margin: 0 .06em; position: relative; top: .01em; }

/* Champ newsletter du pied de page (fond sombre) */
.nl-input { background-color: #0d1b52; border-color: rgba(255,255,255,.22); color: #fff; -webkit-appearance: none; appearance: none; }
.nl-input::placeholder { color: rgba(255,255,255,.6); }
.nl-input:focus { border-color: var(--aqua); background-color: #12226a; }
.nl-input:-webkit-autofill { -webkit-text-fill-color: #fff; box-shadow: 0 0 0 1000px #0d1b52 inset; }