:root{
    --red:#e8574a;
    --red-soft:#fdeceb;
    --dark:#1a1a2e;
    --gray:#6b7280;
    --light-gray:#9aa1ab;
    --bg:#f7f7fa;
    --card-bg:#ffffff;
    --border:#f0e0de;
    --shadow: 0 6px 20px rgba(20,20,30,0.06);
  }

  .grid-overlay{
    position:fixed;
    inset:0;
    background-size: 48px 48px;
    pointer-events:none;
    z-index:0;
  }

  .page-title{
    position:relative;
    z-index:1;
    text-align:center;
    color:var(--dark);
    font-size:26px;
    font-weight:800;
    letter-spacing:-0.3px;
    margin-bottom:50px;
  }

  .contact-row{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    gap:24px;
    
    max-width:900px;
    max-height:100px;
    margin:0 auto 10px auto;
    flex-wrap:wrap;
  }

  /* Pastille pays () */
  .country-pill{
    display:flex;
    align-items:center;
    gap:10px;
    background:var(--card-bg);
    border:1px solid green;
    border-radius:16px;
    padding:14px 28px;
    min-width:220px;
    justify-content:center;
    box-shadow: var(--shadow);
    flex-shrink:0;
    background-size: cover;
    background-position: center;
    transition: color 0.25s ease;
    position: relative;
    overflow: hidden;
}

/* Au survol : l'image du drapeau remplace le fond */
.country-pill[data-country="tchad"]:hover    { background-image: url('https://flagcdn.com/w320/td.png'); }
.country-pill[data-country="cameroun"]:hover { background-image: url('https://flagcdn.com/w320/cm.png'); }
.country-pill[data-country="rdc"]:hover      { background-image: url('https://flagcdn.com/w320/cd.png'); }
.country-pill[data-country="niger"]:hover    { background-image: url('https://flagcdn.com/w320/ne.png'); }
.country-pill[data-country="rca"]:hover      { background-image: url('https://flagcdn.com/w320/cf.png'); }
.country-pill[data-country="guinee"]:hover   { background-image: url('https://flagcdn.com/w320/gn.png'); }

/* Overlay + texte blanc lisible au survol */
.country-pill:hover .country-name,
.country-pill:hover .flag {
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
    position: relative;
    z-index: 1;
}

.country-pill:hover::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 0;
}

  .country-pill .flag{
    font-size:26px;
    line-height:1;
  }

  .country-pill .country-name{
    color:var(--dark);
    font-weight:800;
    font-size:18px;
    white-space:nowrap;
  }

  /* Barre d'infos (equivalent de la nav Accueil / Menu / ...) */
  .info-bar{
    flex:1;
    min-width:460px;
    display:flex;
    align-items:flex-start;
    justify-content:space-around;
    background: linear-gradient(180deg, #ffffff 0%, #fffff 100%);
    border-radius:22px;
    padding:5px 20px 5px 20px;
    box-shadow: var(--shadow);
    gap:10px;
  }

  .info-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:8px;
    min-width:120px;
    position:relative;
    padding-bottom:1px;r
  }

  .info-item .icon-wrap{
    width:34px;
    height:34px;
    border-radius:50%;
    background:#EDEDED;
    border:1px solid gray;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .info-item svg{
    width:17px;
    height:17px;
    stroke:var(--gray);
    fill:none;
  }

  /* Le premier item (Adresse) reprend le style "actif" du modèle, texte plus marqué */
  .info-item.active .label{
    color:var(--dark);
    font-weight:700;
  }
  .info-item.active::after{
    content:"";
    position:absolute;
    bottom:0;
    width:36px;
    height:3px;
    border-radius:2px;
    background:var(--red);
  }

  .label{
    font-size:15px;
    color:var(--dark);
    font-weight:700;
  }

  .value{
    font-size:13.5px;
    color:black;
    line-height:1.5;
    font-weight:400;
    padding-bottom:3px;
    margin-top:-10px;
  }

  @media (max-width: 900px){
    .contact-row{ flex-direction:column; }
    .info-bar{ min-width:100%; flex-wrap:wrap; row-gap:20px; }
    .country-pill{ width:100%; }
  }
  
  .country-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.country-tab {
    padding: 0.45rem 1rem;
    border-radius: 20px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.country-tab:hover {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

.country-tab.active {
    background: #dc2626;
    border-color: #dc2626;
    color: white;
}

.country-panel {
    display: none;
}

.country-panel.active {
    display: block;
}

.bloc-contact-info-global {
    width: 150%;
    max-width: 2800px;
    max-height: 1000px;
    border: 2px solid #E0E0E0;
    border-radius:21px;
    padding: 20px;
    display: flex;
    gap: 20px;
    align-items: stretch;
    box-sizing: border-box;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.bloc-contact-info-gauche {
    flex: 0 0 65%;
    max-width: 65%;
    box-sizing: border-box;
}

.bloc-contact-info-droit {
    flex: 0 0 35%;
    max-width: 35%;
    box-sizing: border-box;
}

@media (max-width: 900px) {
    .bloc-contact-info-global {
        flex-direction: column;
    }

    .bloc-contact-info-gauche,
    .bloc-contact-info-droit {
        flex: 0 0 100%;
        max-width: 100%;
    }
}