/* ============================================================
   AfricaTech — Site partagé (nav, footer, bannières, composants)
   Utilisé par toutes les pages (multipage). Lier APRÈS africatech.css.
   ============================================================ */

/* ---------- NAV (blanche) ---------- */
.nav{ position:sticky; top:0; z-index:60; background:#fff; border-bottom:1px solid rgba(15,15,20,.07); }
.nav__in{ display:flex; align-items:center; justify-content:space-between; height:80px; }
.nav__logo{ display:flex; align-items:center; gap:12px; }
.nav__logo img{ height:48px; }
.nav__logo .wm{ display:flex; flex-direction:column; line-height:1; }
.nav__logo .wm b{ font-family:var(--at-head); font-weight:900; font-size:22px; letter-spacing:.02em; text-transform:uppercase; color:var(--at-navy); }
.nav__logo .wm b .o{ color:var(--at-orange); }
.nav__logo .wm small{ font-family:var(--at-text); font-weight:700; font-size:8.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--at-mut); margin-top:3px; }
.nav__links{ display:flex; align-items:center; gap:26px; }
.nav__links a{ font-family:var(--at-text); font-weight:700; font-size:13.5px; letter-spacing:.05em; text-transform:uppercase; color:#2a2a32; position:relative; padding:6px 0; transition:color .15s; }
.nav__links a:hover{ color:var(--at-orange); }
.nav__links a.active{ color:var(--at-orange); }
.nav__links a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2.5px; background:var(--at-orange); border-radius:2px; }
.nav__burger{ display:none; background:none; border:none; cursor:pointer; padding:8px; }
.nav__burger span{ display:block; width:24px; height:2.4px; background:var(--at-ink); border-radius:2px; margin:5px 0; transition:.25s; }
.nav.open .nav__burger span:nth-child(1){ transform:translateY(7.4px) rotate(45deg); }
.nav.open .nav__burger span:nth-child(2){ opacity:0; }
.nav.open .nav__burger span:nth-child(3){ transform:translateY(-7.4px) rotate(-45deg); }
@media (max-width:1120px){
  .nav__burger{ display:block; }
  .nav__links{ position:absolute; top:80px; left:0; right:0; background:#fff; flex-direction:column; align-items:flex-start;
    gap:0; padding:0 24px; max-height:0; overflow:hidden; border-bottom:1px solid transparent; transition:max-height .3s var(--at-ease); }
  .nav.open .nav__links{ max-height:560px; padding:12px 24px 22px; border-bottom:1px solid rgba(15,15,20,.08); box-shadow:var(--at-sh); }
  .nav__links a{ width:100%; padding:14px 0; border-bottom:1px solid rgba(15,15,20,.06); font-size:15px; }
  .nav__links a.active::after{ display:none; }
  .nav__links a.nav__cta{ margin-top:14px; border-bottom:none; justify-content:center; }
}

/* ---------- PAGE BANNER (héros des sous-pages) ---------- */
.banner{ position:relative; background:var(--at-black); overflow:hidden; padding:64px 0 56px; }
.banner::before{ content:""; position:absolute; inset:0; opacity:.5; background-image:radial-gradient(rgba(255,255,255,.07) 1.3px, transparent 1.3px); background-size:26px 26px; }
.banner__glow{ position:absolute; width:520px; height:520px; border-radius:50%; right:-160px; top:-200px; background:radial-gradient(circle, rgba(255,80,0,.42), transparent 64%); }
.banner__band{ position:absolute; top:24px; bottom:24px; width:28px; z-index:2; object-fit:cover; border-radius:5px; opacity:.9; }
.banner__band.l{ left:16px; } .banner__band.r{ right:16px; transform:scaleX(-1); }
.banner__in{ position:relative; z-index:3; text-align:center; max-width:780px; margin:0 auto; }
.banner h1{ font-family:var(--at-display); font-weight:400; text-transform:uppercase; color:#fff; font-size:clamp(38px,5.4vw,64px); line-height:.98; }
.banner h1 .o{ color:var(--at-orange); }
.banner p{ color:var(--at-white-70); font-size:18px; margin:16px auto 0; max-width:60ch; }
.crumb{ display:flex; gap:8px; justify-content:center; align-items:center; margin-top:20px; font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--at-white-50); }
.crumb a{ color:var(--at-white-50); transition:color .15s; } .crumb a:hover{ color:var(--at-orange); }
.crumb .sep{ color:var(--at-orange); }

/* ---------- Sections génériques ---------- */
.sec{ padding:80px 0; }
.sec--dark{ background:var(--at-black); }
.sec--black{ background:#070708; }
.sec--cream{ background:var(--at-cream); background-image:var(--at-pattern-cream); background-size:48px; background-blend-mode:multiply; }
.sec__head{ max-width:720px; margin:0 auto 48px; text-align:center; }
.sec__head h2{ font-family:var(--at-display); font-weight:400; text-transform:uppercase; font-size:clamp(28px,3.8vw,44px); }
.sec--dark .sec__head h2, .sec--black .sec__head h2{ color:#fff; }
.sec--cream .sec__head h2{ color:var(--at-ink); }
.sec__head p{ margin-top:14px; font-size:17px; }
.sec--dark .sec__head p, .sec--black .sec__head p{ color:var(--at-white-70); }
.sec--cream .sec__head p{ color:#5a5a64; }
.sec__head.left{ text-align:left; margin-left:0; }

/* ---------- Cartes service (sombre) ---------- */
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.svc-card{ background:var(--at-black-2); border:1px solid var(--at-card-line); border-radius:var(--at-r-lg); padding:30px; transition:transform .22s var(--at-ease), border-color .22s; }
.svc-card:hover{ transform:translateY(-6px); border-color:var(--at-orange); }
.svc-card__ic{ width:58px; height:58px; border-radius:15px; background:rgba(255,80,0,.12); color:var(--at-orange); display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.svc-card__ic svg{ width:28px; height:28px; }
.svc-card h3{ font-family:var(--at-head); font-weight:900; text-transform:uppercase; font-size:18px; letter-spacing:.02em; color:#fff; margin-bottom:10px; }
.svc-card p{ font-size:15px; color:var(--at-white-70); }
.svc-card ul{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:7px; }
.svc-card li{ font-size:13.5px; color:rgba(255,255,255,.6); padding-left:20px; position:relative; }
.svc-card li::before{ content:""; position:absolute; left:0; top:7px; width:7px; height:7px; border-radius:50%; background:var(--at-orange); }
@media (max-width:900px){ .svc-grid{ grid-template-columns:1fr; } }

/* ---------- Cartes claires ---------- */
.lcard-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.lcard{ background:#fff; border:1px solid rgba(15,15,20,.1); border-radius:var(--at-r-lg); padding:28px; transition:transform .22s var(--at-ease), box-shadow .22s, border-color .22s; }
.lcard:hover{ transform:translateY(-6px); box-shadow:var(--at-sh-lg); border-color:var(--at-orange); }
.lcard__ic{ width:54px; height:54px; border-radius:14px; background:var(--at-orange-50); color:var(--at-orange); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.lcard__ic svg{ width:26px; height:26px; }
.lcard h3{ font-family:var(--at-head); font-weight:900; text-transform:uppercase; font-size:17px; color:var(--at-ink); margin-bottom:9px; }
.lcard p{ font-size:14.5px; color:#5a5a64; }
@media (max-width:900px){ .lcard-grid{ grid-template-columns:1fr; } }

/* ---------- Steps (approche) ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.step__n{ width:54px; height:54px; border-radius:15px; background:var(--at-ink); color:#fff; font-family:var(--at-display); font-size:22px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.step:nth-child(even) .step__n{ background:var(--at-orange); }
.step h3{ font-family:var(--at-head); font-weight:900; text-transform:uppercase; font-size:17px; color:var(--at-ink); margin-bottom:8px; }
.step p{ font-size:14.5px; color:#5a5a64; }
.sec--dark .step h3{ color:#fff; } .sec--dark .step p{ color:var(--at-white-70); }
@media (max-width:900px){ .steps{ grid-template-columns:1fr 1fr; gap:30px 20px; } }

/* ---------- Direction / portrait ---------- */
.dir{ display:grid; grid-template-columns:.8fr 1.2fr; gap:54px; align-items:center; }
.dir__photo{ position:relative; }
.dir__photo .frame{ border-radius:var(--at-r-xl); overflow:hidden; aspect-ratio:4/5; border:1px solid var(--at-card-line); background:var(--at-black-3); }
.dir__photo .frame img, .dir__photo .frame image-slot{ width:100%; height:100%; object-fit:cover; object-position:center 20%; }
.dir__photo .badge{ position:absolute; left:-20px; bottom:30px; background:var(--at-orange); color:#fff; border-radius:16px; padding:16px 22px; box-shadow:var(--at-sh-orange); }
.dir__photo .badge b{ font-family:var(--at-display); font-size:16px; display:block; text-transform:uppercase; }
.dir__photo .badge span{ font-size:12.5px; opacity:.92; }
.dir blockquote{ margin:0 0 22px; font-family:var(--at-head); font-weight:700; font-size:24px; line-height:1.38; color:#fff; }
.dir blockquote .o{ color:var(--at-orange); }
.dir p{ color:var(--at-white-70); font-size:16px; }
.dir .sign{ display:flex; align-items:center; gap:14px; margin-top:24px; }
.dir .sign .av{ width:50px; height:50px; border-radius:50%; overflow:hidden; background:var(--at-orange); color:#fff; font-family:var(--at-display); font-size:16px; display:flex; align-items:center; justify-content:center; }
.dir .sign .av img{ width:100%; height:100%; object-fit:cover; }
.dir .sign b{ color:#fff; font-family:var(--at-head); font-weight:800; font-size:16px; }
.dir .sign span{ color:var(--at-white-50); font-size:13.5px; }
@media (max-width:900px){ .dir{ grid-template-columns:1fr; gap:36px; } }

/* ---------- Stats clair ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,auto) 1fr; gap:26px; align-items:center; }
.stat{ display:flex; align-items:center; gap:13px; padding-right:24px; border-right:1px solid rgba(15,15,20,.12); }
.stat__ic{ color:var(--at-ink); } .stat__ic svg{ width:36px; height:36px; }
.stat b{ font-family:var(--at-display); font-size:32px; color:var(--at-ink); line-height:1; display:block; }
.stat span{ font-family:var(--at-head); font-weight:800; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:#6a6a74; }
.stats__slogan{ font-family:var(--at-display); text-transform:uppercase; font-size:19px; line-height:1.2; text-align:right; }
.stats__slogan .w{ color:var(--at-ink); } .stats__slogan .o{ color:var(--at-orange); }
@media (max-width:900px){ .stats{ grid-template-columns:1fr 1fr; gap:22px; } .stat{ border-right:none; } .stats__slogan{ grid-column:1/-1; text-align:left; } }

/* ---------- CTA ---------- */
.cta{ position:relative; overflow:hidden; border-radius:var(--at-r-xl); background:var(--at-orange); padding:60px; text-align:center; }
.cta__bands{ position:absolute; top:0; bottom:0; width:40px; opacity:.45; object-fit:cover; }
.cta__bands.l{ left:0; } .cta__bands.r{ right:0; transform:scaleX(-1); }
.cta h2{ font-family:var(--at-display); font-weight:400; text-transform:uppercase; color:#fff; font-size:clamp(28px,3.6vw,44px); position:relative; z-index:2; }
.cta p{ color:rgba(255,255,255,.92); font-size:18px; max-width:54ch; margin:14px auto 28px; position:relative; z-index:2; }
.cta__btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; position:relative; z-index:2; }
.at-btn--dark{ background:var(--at-black); color:#fff; }
.at-btn--dark:hover{ background:var(--at-black-2); transform:translateY(-2px); }
.at-btn--lightout{ background:transparent; border-color:#fff; color:#fff; }
.at-btn--lightout:hover{ background:#fff; color:var(--at-orange); transform:translateY(-2px); }

/* ---------- Formulaire / contact ---------- */
.cinfo-list{ display:flex; flex-direction:column; gap:14px; }
.cinfo{ display:flex; gap:16px; align-items:center; }
.cinfo__ic{ flex:none; width:50px; height:50px; border-radius:13px; background:rgba(255,80,0,.12); color:var(--at-orange); display:flex; align-items:center; justify-content:center; }
.cinfo__ic svg{ width:22px; height:22px; }
.cinfo b{ display:block; font-family:var(--at-head); font-weight:800; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--at-white-50); }
.cinfo span{ font-size:16px; color:#fff; font-weight:600; }
.form{ background:var(--at-black-2); border:1px solid var(--at-card-line); border-radius:var(--at-r-lg); padding:32px; }
.field{ margin-bottom:15px; } .form__row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field label{ display:block; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--at-white-50); margin-bottom:7px; }
.field input,.field textarea,.field select{ width:100%; font-family:var(--at-text); font-size:15px; padding:13px 15px; border:1.5px solid rgba(255,255,255,.12); border-radius:10px; background:var(--at-black-3); color:#fff; transition:border-color .15s, box-shadow .15s; }
.field input::placeholder,.field textarea::placeholder{ color:var(--at-mut); }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--at-orange); box-shadow:0 0 0 3px rgba(255,80,0,.18); }
.field textarea{ resize:vertical; min-height:96px; }
.field select{ color:#fff; } .field select option{ background:var(--at-black-2); }
.form__ok{ display:none; margin-top:14px; padding:13px 16px; border-radius:10px; background:rgba(255,80,0,.14); border:1px solid var(--at-orange); color:#fff; font-size:14px; font-weight:600; }
.form__ok.show{ display:block; }

/* ---------- FOOTER ---------- */
.foot{ background:#070708; border-top:1px solid rgba(255,255,255,.07); padding:56px 0 26px; color:var(--at-white-50); }
.foot__top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:36px; padding-bottom:38px; border-bottom:1px solid rgba(255,255,255,.08); }
.foot__brand img{ height:46px; margin-bottom:16px; }
.foot__brand p{ font-size:14px; max-width:34ch; color:var(--at-white-50); }
.foot__soc{ display:flex; gap:10px; margin-top:18px; }
.foot__soc a{ width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; color:#fff; transition:background .15s, transform .15s; }
.foot__soc a:hover{ background:var(--at-orange); transform:translateY(-2px); }
.foot__soc svg{ width:18px; height:18px; }
.foot h4{ color:#fff; font-family:var(--at-head); font-weight:800; font-size:12px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:16px; }
.foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.foot ul a{ font-size:14px; transition:color .15s; } .foot ul a:hover{ color:var(--at-orange); }
.foot__bottom{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-top:20px; font-size:13px; }
@media (max-width:900px){ .foot__top{ grid-template-columns:1fr 1fr; gap:28px; } }

/* ---------- Accordéon (FAQ) ---------- */
.acc{ max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.acc__item{ border:1px solid rgba(255,255,255,.12); border-radius:14px; background:var(--at-black-2); overflow:hidden; }
.sec--cream .acc__item{ background:#fff; border-color:rgba(15,15,20,.1); }
.acc__q{ width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:20px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:var(--at-head); font-weight:800; font-size:16.5px; color:#fff; }
.sec--cream .acc__q{ color:var(--at-ink); }
.acc__q .ico{ flex:none; width:26px; height:26px; border-radius:50%; background:var(--at-orange); color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; transition:transform .25s; }
.acc__item.open .acc__q .ico{ transform:rotate(45deg); }
.acc__a{ max-height:0; overflow:hidden; transition:max-height .3s var(--at-ease); }
.acc__a p{ padding:0 24px 20px; font-size:15px; color:var(--at-white-70); }
.sec--cream .acc__a p{ color:#5a5a64; }
.acc__item.open .acc__a{ max-height:340px; }

/* ---------- Filtres (réalisations) ---------- */
.filterbar{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:40px; }
.filterbar button{ font-family:var(--at-text); font-weight:700; font-size:13.5px; letter-spacing:.03em; text-transform:uppercase;
  padding:10px 20px; border-radius:var(--at-pill); border:1.5px solid rgba(255,255,255,.16); background:transparent; color:var(--at-white-70); cursor:pointer; transition:.18s; }
.filterbar button:hover{ border-color:var(--at-orange); color:#fff; }
.filterbar button.active{ background:var(--at-orange); border-color:var(--at-orange); color:#fff; }

/* ---------- Projets ---------- */
.proj-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.proj{ border-radius:var(--at-r-lg); overflow:hidden; background:var(--at-black-2); border:1px solid var(--at-card-line); transition:transform .22s var(--at-ease), border-color .22s; }
.proj:hover{ transform:translateY(-6px); border-color:var(--at-orange); }
.proj__img{ height:190px; position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:16px; }
.proj__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.proj__img.ph{ background:linear-gradient(135deg,var(--at-navy),var(--at-black)); }
.proj__img.ph.o{ background:linear-gradient(135deg,var(--at-orange-600),#7a2600); }
.proj__img .tag{ position:relative; z-index:2; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:6px 12px; border-radius:var(--at-pill); background:rgba(0,0,0,.5); color:#fff; backdrop-filter:blur(4px); }
.proj__body{ padding:22px 24px; }
.proj__body h3{ font-family:var(--at-head); font-weight:900; text-transform:uppercase; font-size:17px; color:#fff; margin-bottom:8px; }
.proj__body p{ font-size:14px; color:var(--at-white-70); }
@media (max-width:900px){ .proj-grid{ grid-template-columns:1fr; } }

/* ---------- Blog ---------- */
.post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.post{ background:#fff; border:1px solid rgba(15,15,20,.1); border-radius:var(--at-r-lg); overflow:hidden; transition:transform .22s var(--at-ease), box-shadow .22s; display:flex; flex-direction:column; }
.post:hover{ transform:translateY(-6px); box-shadow:var(--at-sh-lg); }
.post__img{ height:180px; position:relative; display:flex; align-items:flex-start; padding:14px; }
.post__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.post__img.ph{ background:linear-gradient(135deg,var(--at-navy),#05060c); }
.post__img.ph.o{ background:linear-gradient(135deg,var(--at-orange),#b23700); }
.post__img .cat{ position:relative; z-index:2; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:6px 12px; border-radius:var(--at-pill); background:#fff; color:var(--at-orange); }
.post__body{ padding:22px 24px; display:flex; flex-direction:column; flex:1; }
.post__meta{ font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--at-mut); margin-bottom:10px; }
.post__body h3{ font-family:var(--at-head); font-weight:900; font-size:18px; color:var(--at-ink); line-height:1.2; margin-bottom:10px; }
.post__body p{ font-size:14px; color:#5a5a64; flex:1; }
.post__more{ margin-top:14px; font-weight:800; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--at-orange); display:inline-flex; align-items:center; gap:7px; }
.post__more svg{ width:15px; height:15px; }
@media (max-width:900px){ .post-grid{ grid-template-columns:1fr; } }

/* ---------- Map / encart ---------- */
.mapbox{ border-radius:var(--at-r-lg); overflow:hidden; border:1px solid var(--at-card-line); min-height:260px; position:relative; background:linear-gradient(135deg,var(--at-black-2),var(--at-black)); display:flex; align-items:center; justify-content:center; }
.mapbox iframe{ width:100%; height:100%; min-height:260px; border:0; display:block; }

/* ---------- Split (texte + visuel) ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; }
.split__media{ border-radius:var(--at-r-xl); overflow:hidden; aspect-ratio:4/3; border:1px solid var(--at-card-line); position:relative; }
.split__media img, .split__media image-slot{ width:100%; height:100%; object-fit:cover; }
.split__media.ph{ background:linear-gradient(135deg,var(--at-navy),var(--at-black)); }
@media (max-width:900px){ .split{ grid-template-columns:1fr; gap:32px; } }

/* ---------- Liste à puces orange ---------- */
.ticks{ list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.ticks li{ position:relative; padding-left:34px; font-size:16px; line-height:1.5; }
.sec--dark .ticks li{ color:var(--at-white-70); } .sec--cream .ticks li{ color:#444; }
.ticks li::before{ content:""; position:absolute; left:0; top:2px; width:22px; height:22px; border-radius:50%; background:var(--at-orange-50);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23FF5000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; }