:root {
    --bg:#050706;
    --panel:#0a0d0c;
    --line:rgba(255,255,255,.12);
    --text:#fff;
    --muted:#c9d0ca;
    --green:#34d43a;
    --yellow:#ffd31a;
    --shadow:0 18px 60px rgba(0,0,0,.42);
    --max:1420px
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:Arial,Helvetica,sans-serif
}

a {
    color:inherit;
    text-decoration:none
}

img {
    max-width:100%;
    display:block
}

.container {
    width:min(var(--max),calc(100% - 80px));
    margin-inline:auto
}

.site-header {
    height:88px;
    background:#020302;
    display:grid;
    grid-template-columns:210px 1fr auto;
    align-items:center;
    gap:28px;
    padding:0 48px;
    border-bottom:1px solid rgba(255,255,255,.08);
    position:sticky;
    top:0;
    z-index:50
}

.brand img {
    width:178px;
    height:72px;
    object-fit:contain;
    object-position:left center
}

.header-actions {
    display:flex;
    align-items:center;
    gap:22px;
    font-size:31px
}

.icon-link,.cart-link {
    line-height:1;
    opacity:.95
}

.cart-link {
    position:relative;
    font-size:25px
}

.cart-link span {
    position:absolute;
    right:-10px;
    top:-12px;
    background:var(--green);
    color:#fff;
    border-radius:99px;
    font-size:11px;
    width:17px;
    height:17px;
    display:grid;
    place-items:center
}

.menu-toggle,.menu-button {
    display:none
}

.navbar {
    width:100%
}

.menu {
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    margin:0;
    padding:0
}

.menu li {
    position:relative
}

.menu>li>a {
    color:#fff;
    font-weight:900;
    text-transform:uppercase;
    font-size:12px;
    padding:34px 0;
    display:block;
    white-space:nowrap
}

.menu>li>a:hover,.current-menu>a {
    color:var(--green)!important
}

.current-menu>a:after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:8px;
    height:3px;
    background:var(--green);
    border-radius:10px
}

.submenu {
    display:none;
    position:absolute;
    top:100%;
    left:0;
    min-width:230px;
    background:#080b09;
    border:1px solid rgba(255,255,255,.12);
    border-radius:10px;
    padding:10px 0;
    z-index:999;
    box-shadow:0 18px 45px rgba(0,0,0,.45)
}

.submenu a {
    display:block;
    padding:10px 18px;
    color:#fff;
    font-size:13px
}

.submenu a:hover {
    background:#111713;
    color:var(--green)
}

.dropdown:hover .submenu {
    display:block
}

.west-hero {
    position:relative;
    min-height:570px;
    overflow:hidden;
    border-bottom:1px solid rgba(52,212,58,.2)
}

.west-hero-bg {
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(5,7,6,.12),rgba(5,7,6,.34)),url('assets/images/ouest/west-hero-bg.png') center/cover no-repeat;
    background-color:#0b110d
}

.west-hero-overlay {
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(0,0,0,.98) 0%,rgba(0,0,0,.78) 38%,rgba(0,0,0,.28) 66%,rgba(0,0,0,.82) 100%),linear-gradient(0deg,rgba(4,8,5,.96),transparent 55%),radial-gradient(circle at 67% 48%,rgba(52,212,58,.18),transparent 34%)
}

.west-hero-content {
    position:relative;
    min-height:570px;
    display:grid;
    grid-template-columns:minmax(430px,.82fr) 1.18fr;
    align-items:center;
    gap:35px;
    padding:36px 0
}

.breadcrumb {
    display:flex;
    gap:10px;
    align-items:center;
    font-size:14px;
    margin-bottom:24px
}

.breadcrumb a {
    color:var(--green);
    font-weight:800
}

.breadcrumb span {
    color:#768078
}

.eyebrow {
    text-transform:uppercase;
    letter-spacing:2.5px;
    font-size:12px;
    font-weight:900;
    color:#dce5dd;
    margin:0 0 12px
}

.west-copy h1 {
    margin:0;
    text-transform:uppercase;
    font-size:clamp(58px,6.8vw,106px);
    line-height:.84;
    letter-spacing:-4px;
    font-weight:1000;
    text-shadow:0 12px 34px rgba(0,0,0,.7)
}

.west-copy h1 span,.west-copy h1 strong {
    display:block
}

.west-copy h1 strong {
    color:var(--green)
}

.title-line {
    width:92px;
    height:6px;
    border-radius:8px;
    background:var(--yellow);
    margin:28px 0 20px
}

.west-intro {
    max-width:590px;
    margin:0 0 28px;
    color:#eef1ef;
    font-size:18px;
    line-height:1.55
}

.hero-cta {
    display:inline-flex;
    align-items:center;
    gap:14px;
    height:50px;
    padding:0 22px;
    border-radius:6px;
    background:linear-gradient(180deg,#39dc3d,#159619);
    font-weight:1000;
    text-transform:uppercase;
    font-size:13px;
    box-shadow:0 15px 35px rgba(52,212,58,.2)
}

.west-visual {
    min-height:470px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center
}

.image-slot {
    border:1px dashed rgba(255,255,255,.35);
    background:rgba(4,8,5,.36);
    backdrop-filter:blur(6px);
    display:grid;
    place-items:center;
    text-align:center;
    color:#d9e0da
}

.image-slot span {
    font-size:14px;
    font-weight:1000;
    color:var(--green)
}

.image-slot small {
    display:block;
    margin-top:5px;
    color:#aeb8b0
}

.map-placeholder {
    width:min(560px,82%);
    aspect-ratio:1/.88;
    clip-path:polygon(12% 8%,85% 4%,98% 47%,82% 96%,18% 91%,0 48%);
    box-shadow:0 0 80px rgba(52,212,58,.14)
}

.badge-placeholder {
    position:absolute;
    right:1%;
    top:22%;
    width:165px;
    height:165px;
    border-radius:50%;
    border-color:rgba(52,212,58,.58);
    box-shadow:0 0 45px rgba(52,212,58,.18)
}

.countries-section {
    padding:58px 0 64px;
    background:linear-gradient(180deg,#050706,#080b09)
}

.section-title-row {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
    margin-bottom:26px
}

.section-kicker {
    margin:0 0 8px;
    color:var(--green);
    font-size:12px;
    font-weight:1000;
    text-transform:uppercase;
    letter-spacing:2px
}

.section-title-row h2 {
    margin:0;
    font-size:34px;
    text-transform:uppercase;
    letter-spacing:-1px
}

.section-title-row h2 span {
    color:var(--green)
}

.section-summary {
    max-width:450px;
    color:#bfc8c1;
    font-size:14px;
    line-height:1.45;
    margin:0;
    text-align:right
}

.countries-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px
}

.country-card {
    border:1px solid rgba(52,212,58,.28);
    border-radius:14px;
    overflow:hidden;
    background:linear-gradient(180deg,#101511,#090c0a);
    box-shadow:var(--shadow);
    transition:.25s ease;
    display:flex;
    flex-direction:column
}

.country-card:hover {
    transform:translateY(-7px);
    border-color:rgba(52,212,58,.65);
    box-shadow:0 24px 70px rgba(52,212,58,.13)
}

.country-image {
    height:180px;
    background-size:cover;
    background-position:center;
    position:relative;
    overflow:hidden;
    background-color:#141b16
}

.country-image:after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(0deg,#0b0e0c 0%,transparent 58%)
}

.image-label {
    position:absolute;
    left:14px;
    top:14px;
    z-index:2;
    background:rgba(0,0,0,.72);
    border:1px dashed rgba(255,255,255,.35);
    padding:7px 9px;
    border-radius:6px;
    font-size:11px;
    color:#d7ded8;
    font-weight:800
}

.country-body {
    position:relative;
    padding:42px 18px 16px;
    min-height:175px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center
}

.country-body h3 {
    margin:0 0 18px;
    font-size:20px;
    text-transform:uppercase;
    line-height:1.05;
    min-height:43px;
    display:flex;
    align-items:center;
    justify-content:center
}

.country-link {
    display:flex;
    align-items:center;
    justify-content:space-between;
    border:1px solid rgba(52,212,58,.38);
    border-radius:7px;
    padding:11px 13px;
    font-size:12px;
    font-weight:900;
    width:100%;
    margin-top:auto;
    text-align:left
}

.country-link b {
    color:var(--green);
    font-size:18px
}

.flag {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    top:-31px;
    width:64px;
    height:64px;
    border-radius:50%;
    border:3px solid #fff;
    box-shadow:0 9px 25px rgba(0,0,0,.45);
    overflow:hidden;
    background:#222
}

.flag-sn {
    background:linear-gradient(90deg,#00853f 0 33.33%,#fdef42 33.33% 66.66%,#e31b23 66.66% 100%)
}

.flag-sn:after,.flag-gh i,.flag-bf i,.flag-tg i,.flag-gw i {
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:16px;
    height:16px;
    clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 95%,50% 72%,21% 95%,32% 57%,2% 35%,39% 35%)
}

.flag-sn:after {
    background:#00853f
}

.flag-ci {
    background:linear-gradient(90deg,#f77f00 0 33.33%,#fff 33.33% 66.66%,#009e60 66.66%)
}

.flag-gh {
    background:linear-gradient(#ce1126 0 33.33%,#fcd116 33.33% 66.66%,#006b3f 66.66%)
}

.flag-gh i {
    background:#111
}

.flag-ng {
    background:linear-gradient(90deg,#008753 0 33.33%,#fff 33.33% 66.66%,#008753 66.66%)
}

.flag-ne {
    background:linear-gradient(#e05206 0 33.33%,#fff 33.33% 66.66%,#0db02b 66.66%)
}

.flag-ne i {
    position:absolute;
    width:15px;
    height:15px;
    border-radius:50%;
    background:#e05206;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%)
}

.flag-ml {
    background:linear-gradient(90deg,#14b53a 0 33.33%,#fcd116 33.33% 66.66%,#ce1126 66.66%)
}

.flag-bf {
    background:linear-gradient(#ef2b2d 0 50%,#009e49 50%)
}

.flag-bf i {
    background:#fcd116
}

.flag-bj {
    background:linear-gradient(90deg,#008751 0 40%,transparent 40%),linear-gradient(#fcd116 0 50%,#e8112d 50%)
}

.flag-tg {
    background:repeating-linear-gradient(#006a4e 0 12.8px,#ffce00 12.8px 25.6px)
}

.flag-tg:before {
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:28px;
    height:38px;
    background:#d21034
}

.flag-tg i {
    background:#fff;
    left:14px;
    top:19px;
    width:12px;
    height:12px
}

.flag-sl {
    background:linear-gradient(#1eb53a 0 33.33%,#fff 33.33% 66.66%,#0072c6 66.66%)
}

.flag-gm {
    background:linear-gradient(#ce1126 0 30%,#fff 30% 36%,#0c1c8c 36% 64%,#fff 64% 70%,#3a7728 70%)
}

.flag-gn {
    background:linear-gradient(90deg,#ce1126 0 33.33%,#fcd116 33.33% 66.66%,#009460 66.66%)
}

.flag-gw {
    background:linear-gradient(90deg,#ce1126 0 35%,transparent 35%),linear-gradient(#fcd116 0 50%,#009e49 50%)
}

.flag-gw i {
    background:#111;
    left:17%;
    width:13px;
    height:13px
}

.country-senegal {
    background-image:url('assets/images/ouest/country-senegal.png')
}

.country-cote-divoire {
    background-image:url('assets/images/ouest/country-cote-divoire.png')
}

.country-ghana {
    background-image:url('assets/images/ouest/country-ghana.png')
}

.country-nigeria {
    background-image:url('assets/images/ouest/country-nigeria.png')
}

.country-niger {
    background-image:url('assets/images/ouest/country-niger.png')
}

.country-mali {
    background-image:url('assets/images/ouest/country-mali.png')
}

.country-burkina {
    background-image:url('assets/images/ouest/country-burkina-faso.png')
}

.country-benin {
    background-image:url('assets/images/ouest/country-benin.png')
}

.country-togo {
    background-image:url('assets/images/ouest/country-togo.png')
}

.country-sierra-leone {
    background-image:url('assets/images/ouest/country-sierra-leone.png')
}

.country-gambie {
    background-image:url('assets/images/ouest/country-gambie.png')
}

.country-guinee {
    background-image:url('assets/images/ouest/country-guinee.png')
}

.country-guinee-bissau {
    background-image:url('assets/images/ouest/country-guinee-bissau.png')
}

.features-strip {
    padding:0 0 38px;
    background:#080b09
}

.features-grid {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
    overflow:hidden
}

.features-grid article {
    min-height:108px;
    padding:22px;
    display:flex;
    align-items:center;
    gap:16px;
    border-right:1px solid rgba(255,255,255,.1)
}

.features-grid article:last-child {
    border-right:0
}

.icon-slot {
    width:58px;
    height:58px;
    flex:0 0 auto;
    border:1px dashed rgba(52,212,58,.8);
    border-radius:12px;
    display:grid;
    place-items:center;
    text-align:center;
    color:var(--green);
    font-size:10px;
    font-weight:900
}

.icon-slot small {
    font-size:8px;
    color:#d5ddd7
}

.features-grid h3 {
    margin:0 0 5px;
    text-transform:uppercase;
    font-size:14px
}

.features-grid p {
    margin:0;
    color:#c9d0ca;
    font-size:13px;
    line-height:1.35
}

.site-footer {
    background:#070807;
    padding:34px 0 16px;
    border-top:1px solid rgba(255,255,255,.08)
}

.footer-grid {
    display:grid;
    grid-template-columns:1.6fr repeat(5,1fr);
    gap:32px
}

.footer-brand img {
    width:145px;
    height:82px;
    object-fit:contain;
    object-position:left
}

.footer-grid h3 {
    text-transform:uppercase;
    font-size:13px;
    margin:0 0 13px
}

.footer-grid a {
    display:block;
    color:#d6dcd7;
    font-size:13px;
    margin:0 0 8px
}

.footer-grid a:hover {
    color:var(--green)
}

.footer-grid p {
    color:#d6dcd7;
    font-size:13px;
    line-height:1.35
}

.socials {
    display:flex;
    gap:10px
}

.socials a {
    width:24px;
    height:24px;
    border-radius:50%;
    background:#181d1a;
    display:grid;
    place-items:center;
    margin:0
}

.copyright {
    text-align:center;
    color:#9fa7a1;
    font-size:12px;
    border-top:1px solid rgba(255,255,255,.08);
    padding-top:14px;
    margin:20px auto 0;
    width:min(var(--max),calc(100% - 80px))
}

@media(max-width:1180px) {
    .site-header {
        grid-template-columns:170px 1fr auto;
        padding:0 24px
    }

    .menu {
        gap:13px
    }

    .menu>li>a {
        font-size:11px
    }

    .west-hero-content {
        grid-template-columns:1fr 1fr
    }

    .countries-grid {
        grid-template-columns:repeat(3,minmax(0,1fr))
    }

    .features-grid {
        grid-template-columns:repeat(2,1fr)
    }

    .features-grid article {
        border-bottom:1px solid rgba(255,255,255,.1)
    }

    .footer-grid {
        grid-template-columns:repeat(3,1fr)
    }

    
}

@media(max-width:900px) {
    .container {
        width:min(100% - 32px,var(--max))
    }

    .site-header {
        height:auto;
        min-height:78px;
        grid-template-columns:150px 1fr auto;
        padding:0 16px
    }

    .brand img {
        width:138px;
        height:70px
    }

    .menu-button {
        display:grid;
        gap:5px;
        justify-self:end;
        cursor:pointer
    }

    .menu-button span {
        width:30px;
        height:3px;
        background:#fff;
        border-radius:10px
    }

    .navbar {
        display:none;
        grid-column:1/-1;
        width:100%;
        padding:12px 0 20px
    }

    .menu-toggle:checked~.navbar {
        display:block
    }

    .menu {
        flex-direction:column;
        align-items:flex-start;
        gap:0
    }

    .menu>li {
        width:100%;
        border-bottom:1px solid rgba(255,255,255,.08)
    }

    .menu>li>a {
        padding:13px 0;
        font-size:13px
    }

    .current-menu>a:after {
        display:none
    }

    .submenu {
        display:block;
        position:static;
        min-width:100%;
        background:transparent;
        border:0;
        box-shadow:none;
        padding:0 0 10px 14px
    }

    .submenu a {
        padding:7px 0;
        font-size:13px;
        color:#cfd6d1
    }

    .header-actions {
        font-size:24px;
        gap:14px
    }

    .west-hero-content {
        grid-template-columns:1fr;
        padding-top:52px
    }

    .west-visual {
        min-height:390px
    }

    .west-copy h1 {
        font-size:68px
    }

    .section-title-row {
        align-items:flex-start;
        flex-direction:column
    }

    .section-summary {
        text-align:left
    }

    .countries-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    
}

@media(max-width:620px) {
    .site-header {
        grid-template-columns:120px 1fr
    }

    .brand img {
        width:110px
    }

    .header-actions {
        display:none
    }

    .west-hero {
        min-height:auto
    }

    .west-hero-content {
        min-height:auto
    }

    .west-copy h1 {
        font-size:50px;
        letter-spacing:-2px
    }

    .west-intro {
        font-size:16px
    }

    .west-visual {
        min-height:320px
    }

    .map-placeholder {
        width:96%
    }

    .badge-placeholder {
        width:120px;
        height:120px;
        right:0;
        top:13%
    }

    .countries-grid {
        grid-template-columns:1fr
    }

    .country-image {
        height:220px
    }

    .section-title-row h2 {
        font-size:28px
    }

    .features-grid {
        grid-template-columns:1fr
    }

    .features-grid article {
        border-right:0
    }

    .footer-grid {
        grid-template-columns:1fr
    }

    .copyright {
        width:calc(100% - 32px)
    }

    
}

/* =========================
   INTÉGRATION DES IMAGES
   ========================= */
.west-visual {
    overflow:visible
}

.west-map {
    
  width:min(620px,88%);
    
  max-height:470px;
    
  object-fit:contain;
    
  filter:drop-shadow(0 0 34px rgba(52,212,58,.25));
    

}

.west-badge {
    
  position:absolute;
    
  right:0;
    
  top:20%;
    
  width:170px;
    
  height:auto;
    
  object-fit:contain;
    
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.55));
    

}

.image-slot,.map-placeholder,.badge-placeholder {
    display:none!important
}

.image-label {
    display:none!important
}

.feature-icon {
    
  width:56px;
    
  height:56px;
    
  object-fit:contain;
    
  flex:0 0 auto;
    
  filter:drop-shadow(0 0 14px rgba(52,212,58,.35));
    

}

.features-grid article {
    min-width:0
}

.icon-missing:before {
    
  content:"Icône à ajouter";
    
  display:block;
    
  color:var(--green);
    
  font-size:10px;
    
  text-transform:uppercase;
    
  letter-spacing:.7px;
    
  margin-bottom:5px;
    

}

@media(max-width:900px) {
    .west-badge {
        right:2%;
        top:18%;
        width:145px
    }

    
}

@media(max-width:620px) {
    .west-badge {
        width:110px;
        right:0;
        top:12%
    }

    .feature-icon {
        width:50px;
        height:50px
    }

    
}