/* ============================================================
   AfricaTech — Design System  (aligné sur le template)
   "L'Afrique innove. Nous codons son avenir."
   Near-black + orange #FF5000 + cream · motifs africains
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@500;600;700;800;900&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  /* Brand */
  --at-orange:      #FF5000;
  --at-orange-600:  #E84800;
  --at-orange-400:  #FF7A33;
  --at-orange-50:   #FFF1EA;

  /* Dark surfaces (near-black, comme le template) */
  --at-black:       #0B0B0D;
  --at-black-2:     #111114;
  --at-black-3:     #17171B;
  --at-card-dark:   #1A1A1F;
  --at-card-line:   rgba(255,255,255,.08);

  /* Navy accent (motifs) */
  --at-navy:        #0E1B33;

  /* Cream panels */
  --at-cream:       #F1EBE0;
  --at-cream-2:     #E9E1D2;
  --at-cream-line:  rgba(15,15,20,.10);

  /* Neutrals */
  --at-0:    #FFFFFF;
  --at-ink:  #14141A;
  --at-body: #4A4A55;
  --at-mut:  #8A8A96;
  --at-white-70: rgba(255,255,255,.72);
  --at-white-50: rgba(255,255,255,.50);

  /* Type */
  --at-display: 'Archivo Black','Archivo',system-ui,sans-serif;
  --at-head:    'Archivo','Segoe UI',system-ui,sans-serif;
  --at-text:    'Manrope','Segoe UI',system-ui,sans-serif;

  /* Radii */
  --at-r-sm: 10px;
  --at-r:    16px;
  --at-r-lg: 22px;
  --at-r-xl: 30px;
  --at-pill: 999px;

  /* Shadows */
  --at-sh:        0 10px 30px rgba(0,0,0,.10);
  --at-sh-lg:     0 24px 60px rgba(0,0,0,.18);
  --at-sh-orange: 0 12px 30px rgba(255,80,0,.34);

  --at-ease: cubic-bezier(.22,.61,.36,1);
  --at-maxw: 1280px;

  /* Motif africain — trame géométrique kente (tile 48×48) */
  --at-pattern-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M0 7L0 0L7 0' fill='none' stroke='%231a0a00' stroke-width='1.2' opacity='.28'/%3E%3Cpath d='M41 0L48 0L48 7' fill='none' stroke='%231a0a00' stroke-width='1.2' opacity='.28'/%3E%3Cpath d='M48 41L48 48L41 48' fill='none' stroke='%231a0a00' stroke-width='1.2' opacity='.28'/%3E%3Cpath d='M7 48L0 48L0 41' fill='none' stroke='%231a0a00' stroke-width='1.2' opacity='.28'/%3E%3Cpolygon points='24,13 35,24 24,35 13,24' fill='none' stroke='%231a0a00' stroke-width='.9' opacity='.32'/%3E%3Cline x1='24' y1='16' x2='24' y2='32' stroke='%231a0a00' stroke-width='.6' opacity='.2'/%3E%3Cline x1='16' y1='24' x2='32' y2='24' stroke='%231a0a00' stroke-width='.6' opacity='.2'/%3E%3Ccircle cx='24' cy='13' r='1.2' fill='%231a0a00' opacity='.32'/%3E%3Ccircle cx='35' cy='24' r='1.2' fill='%231a0a00' opacity='.32'/%3E%3Ccircle cx='24' cy='35' r='1.2' fill='%231a0a00' opacity='.32'/%3E%3Ccircle cx='13' cy='24' r='1.2' fill='%231a0a00' opacity='.32'/%3E%3C/svg%3E");

  /* Séparateur de section — chevron angulaire bogolan (tile 40×28) */
  --at-pattern-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='28'%3E%3Cpath d='M0 20L8 8L16 20L24 8L32 20L40 8' fill='none' stroke='%23FF5000' stroke-width='1.5' opacity='.22'/%3E%3Cpath d='M0 24L8 16L16 24L24 16L32 24L40 16' fill='none' stroke='%231a0a00' stroke-width='.7' opacity='.1'/%3E%3C/svg%3E");
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--at-text); color:var(--at-body);
  background:var(--at-black); -webkit-font-smoothing:antialiased; line-height:1.6; font-size:16.5px;
}
h1,h2,h3,h4,h5{ margin:0; font-family:var(--at-head); color:var(--at-ink); line-height:1.05; font-weight:800; letter-spacing:-.01em; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
p{ margin:0; }

.at-wrap{ max-width:var(--at-maxw); margin:0 auto; padding:0 40px; }
@media (max-width:900px){ .at-wrap{ padding:0 20px; } }

/* ---------- Display headline (template) ---------- */
.at-display{ font-family:var(--at-display); font-weight:400; line-height:.96; letter-spacing:0; text-transform:uppercase; }

/* ---------- Eyebrow ---------- */
.at-eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--at-text);
  font-weight:800; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--at-orange); margin:0 0 16px; }
.at-eyebrow::before{ content:""; width:28px; height:3px; background:var(--at-orange); border-radius:2px; }
.at-eyebrow.center{ justify-content:center; }
.text-orange{ color:var(--at-orange); }

/* ---------- Buttons (template) ---------- */
.at-btn{ display:inline-flex; align-items:center; gap:12px; cursor:pointer; font-family:var(--at-text);
  font-weight:800; font-size:14.5px; letter-spacing:.04em; text-transform:uppercase;
  padding:16px 28px; border-radius:var(--at-pill); border:2px solid transparent; white-space:nowrap;
  transition:transform .18s var(--at-ease), background .2s, color .2s, box-shadow .2s, border-color .2s; }
.at-btn svg{ width:17px; height:17px; }
.at-btn--primary{ background:var(--at-orange); color:#fff; box-shadow:var(--at-sh-orange); }
.at-btn--primary:hover{ background:var(--at-orange-600); transform:translateY(-2px); }
.at-btn--outline{ background:transparent; color:var(--at-orange); border-color:var(--at-orange); }
.at-btn--outline:hover{ background:var(--at-orange); color:#fff; transform:translateY(-2px); }
.at-btn--ghostlight{ background:transparent; color:var(--at-ink); border-color:rgba(15,15,20,.2); }
.at-btn--ghostlight:hover{ border-color:var(--at-ink); transform:translateY(-2px); }
.at-btn:active{ transform:translateY(0) scale(.99); }

/* ---------- Chips ---------- */
.at-chip{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700;
  padding:8px 15px; border-radius:var(--at-pill); background:rgba(255,255,255,.07); color:var(--at-white-70);
  border:1px solid rgba(255,255,255,.12); }

/* ---------- Photo slots ---------- */
image-slot.at-photo{ display:block; width:100%; height:100%; background:var(--at-black-3); }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--at-ease), transform .7s var(--at-ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- Séparateur de section (motif bogolan) ---------- */
.at-divider{
  height:28px;
  background-image:var(--at-pattern-divider);
  background-repeat:repeat-x;
  background-size:40px 28px;
  background-position:center;
}