/* =========================================================
   Ambassade de Madagascar en Afrique du Sud
   Direction « État moderne » — systématique, net, aéré
   Space Grotesk · accent vert unique · repère vintana
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700&display=swap');

:root{
  --paper:#FCFCFB;
  --surface:#FFFFFF;
  --ink:#15191D;
  --muted:#6A7178;
  --faint:#9AA0A4;
  --line:#E4E5E2;        /* filet fin */
  --line-2:#CFD1CD;
  --datum:#15191D;       /* filet fort (ligne de référence) */
  --green:#0C6B4A;
  --green-d:#094E37;
  --green-bg:#F0F6F2;
  --red:#C0392B;         /* uniquement dans le repère vintana */
  --maxw:1180px;
  --r:4px;
  --font:'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--font); color:var(--ink); background:var(--paper);
  font-size:16px; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--green);text-decoration:none;}
a:hover{color:var(--green-d);text-decoration:underline;text-underline-offset:2px;}
h1,h2,h3,h4{font-weight:500;line-height:1.15;letter-spacing:-.015em;margin:0 0 .5em;color:var(--ink);}

.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:48px;}

/* numéro tabulaire récurrent */
.num{font-variant-numeric:tabular-nums;color:var(--green);}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:var(--green);font-weight:500;margin-bottom:18px;}
.eyebrow .t{color:var(--muted);font-weight:400;}

/* =========================================================
   En-tête
   ========================================================= */
.topbar{border-bottom:1px solid var(--line);font-size:12.5px;color:var(--muted);background:var(--surface);}
.topbar .container{display:flex;justify-content:space-between;align-items:center;min-height:36px;gap:16px;flex-wrap:wrap;}
.topbar .info{display:flex;gap:22px;flex-wrap:wrap;}
.topbar .right{display:flex;align-items:center;gap:16px;}
.topbar a{color:var(--muted);}
.langsw{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;}
.langsw a{color:var(--muted);}
.langsw a:hover{color:var(--ink);text-decoration:none;}
.langsw .on{color:var(--ink);font-weight:500;}
.langsw .sep{color:var(--line-2);}
.topbar .fb-top{display:inline-flex;align-items:center;gap:6px;color:var(--muted);}
.topbar .fb-top:hover{color:var(--ink);text-decoration:none;}

.masthead{background:var(--surface);border-bottom:1px solid var(--line);}
.masthead .container{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding-block:14px;}
.mh-left{justify-self:start;}
.mh-left img{height:62px;width:auto;display:block;}
.mh-center{justify-self:center;text-align:center;text-decoration:none;display:block;}
.mh-center:hover{text-decoration:none;}
.mh-center img{height:82px;width:auto;margin:0 auto 4px;display:block;}
.mh-center .cap{font-size:12.5px;color:var(--muted);}
.mh-right{justify-self:end;}
.search{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:24px;background:var(--surface);overflow:hidden;}
.search input{border:none;outline:none;background:transparent;padding:9px 6px 9px 16px;font-family:inherit;font-size:14px;color:var(--ink);width:180px;}
.search input::placeholder{color:var(--faint);}
.search button{border:none;border-left:1px solid var(--line);background:transparent;color:var(--muted);padding:9px 13px;cursor:pointer;display:flex;align-items:center;}
.search button:hover{color:var(--green);}

/* navigation */
.mainnav{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;}
.mainnav .container{display:flex;align-items:center;}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:var(--r);color:var(--ink);
  font-size:14px;padding:8px 12px;margin:10px 0;cursor:pointer;font-family:inherit;}
.menu{list-style:none;display:flex;margin:0;padding:0;flex-wrap:wrap;}
.menu>li{position:relative;}
.menu>li>a{display:block;color:var(--muted);padding:15px 18px;font-size:14px;font-weight:400;}
.menu>li>a:hover,.menu>li:hover>a{color:var(--ink);text-decoration:none;}
.menu>li.current>a{color:var(--ink);font-weight:500;box-shadow:inset 0 -2px 0 var(--green);}
.submenu{list-style:none;margin:0;padding:6px 0;position:absolute;top:100%;left:0;min-width:260px;
  background:var(--surface);border:1px solid var(--line);box-shadow:0 6px 22px rgba(20,25,29,.07);
  opacity:0;visibility:hidden;transform:translateY(5px);transition:all .14s ease;z-index:60;border-radius:0 0 var(--r) var(--r);}
.menu>li:hover>.submenu{opacity:1;visibility:visible;transform:translateY(0);}
.submenu a{display:flex;gap:10px;padding:9px 18px;color:var(--ink);font-size:13.5px;}
.submenu a:hover{background:var(--paper);text-decoration:none;color:var(--green-d);}
.submenu a .num{font-size:12px;}
.has-children>a::after{content:"";display:inline-block;width:6px;height:6px;border-right:1.4px solid currentColor;
  border-bottom:1.4px solid currentColor;transform:rotate(45deg);margin-left:7px;vertical-align:2px;opacity:.6;}

/* =========================================================
   Hero (accueil)
   ========================================================= */
.hero{background:var(--surface);border-bottom:1px solid var(--line);}
.hero .container{display:grid;grid-template-columns:1fr;gap:48px;align-items:start;padding-block:72px 64px;}
.hero h1{font-size:clamp(30px,4.2vw,46px);font-weight:500;max-width:740px;margin-bottom:20px;}
.hero p{font-size:17px;color:var(--muted);max-width:560px;margin:0;}
.hero .cta{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap;}
.hero .vintwrap{justify-self:end;}
.vintcap{font-size:10.5px;color:var(--faint);margin-top:9px;text-align:center;}

.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:var(--r);
  font-weight:500;font-size:14px;font-family:inherit;border:1px solid transparent;cursor:pointer;transition:.14s;}
.btn:hover{text-decoration:none;}
.btn-primary{background:var(--green);color:#fff;}
.btn-primary:hover{background:var(--green-d);color:#fff;}
.btn-line{background:transparent;color:var(--ink);border-color:var(--line-2);}
.btn-line:hover{border-color:var(--ink);color:var(--ink);}

/* repère vintana (signature) */
.vint{width:104px;height:104px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);border:1px solid var(--ink);}
.vint i{border-right:1px solid var(--line);border-bottom:1px solid var(--line);}
.vint i:nth-child(3n){border-right:none;}
.vint i:nth-child(n+7){border-bottom:none;}
.vint i.g{background:var(--green);}
.vint i.r{background:var(--red);}
.vint.sm{width:60px;height:60px;}

/* =========================================================
   Sections
   ========================================================= */
.section{padding-block:60px;}
.section.tight{padding-block:48px;}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:30px;flex-wrap:wrap;}
.section-head h2{font-size:clamp(22px,2.6vw,28px);margin:0;}
.section-head .meta{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;}
.linkmore{font-size:13.5px;font-weight:500;white-space:nowrap;}
.linkmore::after{content:" →";}

/* page head (pages internes) — clair, systématique */
.page-head{background:var(--surface);border-bottom:1px solid var(--line);}
.page-head .container{display:grid;grid-template-columns:1fr;gap:30px;align-items:center;padding-block:44px;}
.crumbs{font-size:12.5px;color:var(--muted);margin-bottom:14px;font-variant-numeric:tabular-nums;}
.crumbs a{color:var(--muted);}
.page-head h1{font-size:clamp(26px,3.4vw,38px);margin:0;}

/* =========================================================
   Grille d'actualités (filets, pas d'ombres)
   ========================================================= */
.linegrid{display:grid;border:1px solid var(--line);background:var(--line);gap:1px;}
.linegrid.c3{grid-template-columns:repeat(3,1fr);}
.linegrid.c2{grid-template-columns:repeat(2,1fr);}
.linegrid.c4{grid-template-columns:repeat(4,1fr);}
.cell{background:var(--surface);padding:22px 24px 26px;display:flex;flex-direction:column;}
.cell .crow{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.cell .dt{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;}
.cell .idx{font-size:11.5px;color:var(--green);font-variant-numeric:tabular-nums;}
.cell h3{font-size:18px;margin-bottom:8px;line-height:1.25;}
.cell h3 a{color:var(--ink);}
.cell h3 a:hover{color:var(--green-d);}
.cell p{color:var(--muted);font-size:14px;margin:0 0 16px;}
.cell .read{margin-top:auto;font-size:13.5px;font-weight:500;}
.cell .read::after{content:" →";}

/* tuiles services */
.tile{background:var(--surface);padding:26px 24px;display:block;}
.tile:hover{background:var(--paper);text-decoration:none;}
.tile .ico{width:34px;height:34px;color:var(--green);margin-bottom:16px;}
.tile .idx{font-size:11.5px;color:var(--green);font-variant-numeric:tabular-nums;display:block;margin-bottom:6px;}
.tile h3{font-size:16.5px;margin-bottom:4px;color:var(--ink);}
.tile p{font-size:13.5px;color:var(--muted);margin:0;}

/* =========================================================
   Contenu éditorial
   ========================================================= */
.layout-2col{display:grid;grid-template-columns:1fr 280px;gap:56px;align-items:start;}
.prose{max-width:760px;}
.prose>p:first-child{font-size:17px;color:var(--ink);}
.prose h2{font-size:23px;margin-top:1.8em;padding-top:1.1em;border-top:1px solid var(--line);display:flex;align-items:baseline;gap:12px;}
.prose h2 .num{font-size:15px;}
.prose h3{font-size:18px;margin-top:1.5em;color:var(--ink);}
.prose p{margin:0 0 1em;}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.25em;}
.prose li{margin-bottom:.5em;}
.prose li::marker{color:var(--green);}
.note{border:1px solid var(--line);border-left:2px solid var(--green);padding:16px 20px;margin:1.5em 0;background:var(--surface);border-radius:0 var(--r) var(--r) 0;}
.note .lbl{display:block;font-size:11.5px;font-weight:500;color:var(--green);margin-bottom:4px;}
.note p{margin:0;font-size:14.5px;color:var(--ink);}

.sidebar{position:sticky;top:80px;border-top:2px solid var(--datum);padding-top:18px;}
.sidebar h4{font-size:12px;color:var(--muted);font-weight:400;margin-bottom:14px;}
.sidebar ol{list-style:none;margin:0 0 22px;padding:0;counter-reset:s;}
.sidebar ol li{counter-increment:s;border-bottom:1px solid var(--line);}
.sidebar ol li a{display:flex;gap:12px;padding:11px 0;font-size:14px;color:var(--ink);font-weight:400;}
.sidebar ol li a:hover{color:var(--green-d);text-decoration:none;}
.sidebar ol li a::before{content:counter(s,decimal-leading-zero);color:var(--green);font-variant-numeric:tabular-nums;font-size:12.5px;}
.sidebar .box{border:1px solid var(--line);padding:18px;border-radius:var(--r);}
.sidebar .box .k{font-size:12px;color:var(--muted);}
.sidebar .box .v{font-size:14px;margin:2px 0 12px;}

/* tableau de faits */
.facts{width:100%;border-collapse:collapse;margin:1.2em 0;}
.facts th,.facts td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);font-size:14.5px;vertical-align:top;}
.facts th{width:36%;color:var(--ink);font-weight:500;background:var(--paper);}
.facts tr:first-child th,.facts tr:first-child td{border-top:1px solid var(--line);}

/* cartes contact */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);background:var(--line);gap:1px;}
.contact-block{background:var(--surface);padding:26px;}
.contact-block .tag{font-size:11.5px;color:var(--green);font-weight:500;}
.contact-block h3{font-size:19px;margin:4px 0 16px;}
.contact-block dt{font-size:11px;color:var(--muted);margin-top:13px;}
.contact-block dd{margin:2px 0 0;font-size:14.5px;}

/* =========================================================
   Pied de page (anchor ink)
   ========================================================= */
.footer{background:var(--ink);color:#C3C8CB;font-size:14px;}
.footer .container{padding-block:50px 0;}
.footer a{color:#C3C8CB;}
.footer a:hover{color:#fff;}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;padding-bottom:42px;}
.footer .fbrand{display:flex;gap:14px;align-items:flex-start;}
.footer .fbrand .name{color:#fff;font-size:15px;font-weight:500;line-height:1.35;}
.footer h4{color:#fff;font-size:12px;font-weight:400;color:#8A9094;margin-bottom:16px;}
.footer ul{list-style:none;margin:0;padding:0;}
.footer li{margin-bottom:9px;}
.footer .cline{display:flex;gap:10px;margin-bottom:11px;align-items:flex-start;}
.footer .cline svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--green);}
.footer .vint{border-color:#3A3F43;}
.footer .vint i{border-color:#2A2E32;}
.footer-bottom{border-top:1px solid #2A2E32;padding-block:18px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12.5px;color:#7E8488;}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:980px){
  .container{padding-inline:28px;}
  .mh-left img{height:50px;}
  .mh-center img{height:66px;}
  .search input{width:140px;}
  .linegrid.c3,.linegrid.c4,.contact-grid{grid-template-columns:repeat(2,1fr);}
  .layout-2col{grid-template-columns:1fr;gap:36px;}
  .sidebar{position:static;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .hero .container{grid-template-columns:1fr;gap:32px;}
  .hero .vintwrap{justify-self:start;}
  .page-head .container{grid-template-columns:1fr;}
  .page-head .vintwrap{display:none;}
}
@media (max-width:680px){
  .container{padding-inline:20px;}
  .masthead .container{grid-template-columns:1fr;justify-items:center;gap:12px;}
  .mh-left{display:none;}
  .mh-right{width:100%;}
  .search{width:100%;}
  .search input{width:100%;flex:1;}
  .nav-toggle{display:block;margin-left:auto;}
  .menu{display:none;flex-direction:column;width:100%;padding-bottom:8px;}
  .menu.open{display:flex;}
  .menu>li{width:100%;}
  .menu>li>a{padding:13px 2px;border-bottom:1px solid var(--line);}
  .menu>li.current>a{box-shadow:none;border-left:2px solid var(--green);padding-left:10px;}
  .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding:0;display:none;}
  .submenu.open{display:block;}
  .submenu a{padding-left:18px;color:var(--muted);}
  .has-children>a::after{float:right;margin-top:7px;}
  .linegrid.c3,.linegrid.c4,.linegrid.c2,.contact-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
}
a:focus-visible,button:focus-visible{outline:2px solid var(--green);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important;}}