﻿:root {
  --green-deep:   #1a4a2e;
  --green-mid:    #2a7a4a;
  --green-light:  #3db870;
  --blue-deep:    #03101f;
  --blue-mid:     #1245b0;
  --blue-light:   #2f7ae8;
  --blue-sky:     #62b8f8;
  --cream:        #edf1f9;
  --white:        #ffffff;
  --text-dark:    #0a1a14;
  --text-muted:   #3d5a80;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'DM Sans', sans-serif;
  background: var(--cream);
  color: var(--text-dark);
  overflow-x: hidden;
}

/* â”€â”€ NAV â”€â”€ */
nav {
  position:fixed; top:0; width:100%; z-index:100;
  display:flex; justify-content:space-between; align-items:center;
  padding:1rem 3rem;
  background: rgba(3,16,31,0.98);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(58,127,193,0.2);
}
.nav-logo img { height:40px; }
.nav-links { display:flex; gap:2rem; list-style:none; }
.nav-links a {
  color: rgba(240,244,242,0.8);
  text-decoration:none; font-size:0.82rem;
  font-weight:500; letter-spacing:0.09em;
  text-transform:uppercase;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--blue-sky); }
.lang-toggle {
  background:transparent;
  border: 1.5px solid var(--blue-light);
  color: var(--blue-sky);
  padding:0.3rem 0.9rem; border-radius:20px;
  cursor:pointer; font-size:0.78rem; font-weight:600;
  letter-spacing:0.06em; transition: all 0.2s;
}
.lang-toggle:hover { background: var(--blue-light); color: white; }

/* â”€â”€ HERO â”€â”€ */
#hero {
  min-height:100vh;
  background: linear-gradient(160deg, #03101f 0%, #071a3a 50%, #0b2a16 100%);
  display:flex; align-items:center;
  position:relative; overflow:hidden;
  padding: 7rem 3rem 5rem;
}
.hero-mesh {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 800px 700px at 78% 38%, rgba(47,122,232,0.32) 0%, transparent 65%),
    radial-gradient(ellipse 500px 400px at 15% 65%, rgba(61,184,112,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 300px 300px at 50% 90%, rgba(18,69,176,0.15) 0%, transparent 60%);
}
.hero-grid-lines {
  position:absolute; inset:0; opacity:0.04;
  background-image:
    linear-gradient(rgba(255,255,255,1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,1) 1px, transparent 1px);
  background-size: 60px 60px;
}
.hero-content { position:relative; z-index:2; max-width:720px; }
.hero-badge {
  display:inline-flex; align-items:center; gap:0.5rem;
  background: rgba(58,127,193,0.15);
  border: 1px solid rgba(106,180,240,0.4);
  color: var(--blue-sky);
  padding:0.4rem 1.2rem; border-radius:30px;
  font-size:0.73rem; letter-spacing:0.12em;
  text-transform:uppercase; font-weight:600;
  margin-bottom:2rem;
  animation: fadeUp 0.7s ease both;
}
.hero-title {
  font-family:'Playfair Display', serif;
  font-size: clamp(2.8rem, 5.5vw, 5rem);
  font-weight:900; color: var(--white);
  line-height:1.08; margin-bottom:1.5rem;
  animation: fadeUp 0.7s 0.1s ease both;
}
.hero-title em { font-style:italic; color: var(--blue-sky); }
.hero-title strong { color: var(--green-light); font-style:normal; }
.hero-sub {
  font-size:1.05rem; color:rgba(240,244,242,0.72);
  line-height:1.75; max-width:540px;
  margin-bottom:2.5rem;
  animation: fadeUp 0.7s 0.2s ease both;
}
.hero-ctas {
  display:flex; gap:1rem; flex-wrap:wrap;
  animation: fadeUp 0.7s 0.3s ease both;
}
.btn-primary {
  background: linear-gradient(135deg, #1245b0, #2f7ae8);
  color: white; padding:0.85rem 2rem;
  border-radius:8px; text-decoration:none;
  font-weight:700; font-size:0.88rem; letter-spacing:0.04em;
  box-shadow: 0 4px 20px rgba(47,122,232,0.4);
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(47,122,232,0.5); }
.btn-outline {
  border: 1.5px solid rgba(106,180,240,0.5);
  color: var(--blue-sky); padding:0.85rem 2rem;
  border-radius:8px; text-decoration:none;
  font-weight:500; font-size:0.88rem;
  transition: background 0.2s, border-color 0.2s;
}
.btn-outline:hover { background:rgba(58,127,193,0.12); border-color: var(--blue-sky); }
.hero-orbs {
  position:absolute; right:5%; top:50%;
  transform:translateY(-50%); z-index:1;
  width:380px; height:380px;
}
.orb {
  position:absolute; border-radius:50%;
}
.orb-1 {
  width:280px; height:280px;
  background: radial-gradient(circle, rgba(47,122,232,0.32), transparent 70%);
  border: 1px solid rgba(47,122,232,0.45);
  top:50px; left:50px;
  animation: float 6s ease-in-out infinite;
}
.orb-2 {
  width:200px; height:200px;
  background: radial-gradient(circle, rgba(90,176,245,0.3), transparent 70%);
  border: 1px solid rgba(90,176,245,0.5);
  top:0; right:0;
  animation: float 8s ease-in-out infinite reverse;
}
.orb-3 {
  width:120px; height:120px;
  border: 2px solid rgba(106,180,240,0.4);
  bottom:20px; left:20px;
  animation: float 5s ease-in-out infinite 1s;
}
.hero-stats {
  display:flex; gap:3rem; margin-top:3.5rem;
  animation: fadeUp 0.7s 0.45s ease both;
}
.stat .stat-number {
  font-family:'Playfair Display', serif;
  font-size:2rem; font-weight:900; color: var(--green-light);
  display:block;
}
.stat .stat-label {
  font-size:0.72rem; color:rgba(240,244,242,0.55);
  text-transform:uppercase; letter-spacing:0.1em;
}

/* â”€â”€ SECTIONS â”€â”€ */
section { padding:6rem 3rem; }
.section-label {
  font-size:0.73rem; letter-spacing:0.14em;
  text-transform:uppercase; color: #2f7ae8;
  font-weight:700; margin-bottom:0.75rem;
}
.section-title {
  font-family:'Playfair Display', serif;
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  font-weight:700; line-height:1.2; margin-bottom:1.5rem;
}
.section-lead {
  font-size:1rem; color: var(--text-muted);
  line-height:1.8; max-width:640px;
}

/* â”€â”€ MISSION â”€â”€ */
#mission { background: var(--white); }
.mission-grid {
  display:grid; grid-template-columns:1fr 1.1fr;
  gap:5rem; align-items:center;
  max-width:1100px; margin:0 auto;
}
.mission-visual {
  position:relative; height:400px;
}
.mv-block {
  position:absolute; border-radius:16px;
}
.mv-1 {
  width:260px; height:260px;
  background: linear-gradient(145deg, #071a3a, #1245b0);
  top:0; left:0;
  display:flex; align-items:center; justify-content:center;
  color:white; font-family:'Playfair Display', serif;
  font-size:1rem; font-style:italic; text-align:center;
  padding:2rem; line-height:1.5;
}
.mv-2 {
  width:160px; height:160px;
  background: linear-gradient(145deg, #2a7a4a, #3db870);
  bottom:30px; right:30px;
  border-radius:50%;
}
.mv-3 {
  width:100px; height:100px;
  border: 3px solid var(--green-light);
  border-radius:12px;
  bottom:60px; left:200px;
  transform: rotate(12deg);
}
.mv-dot {
  position:absolute; border-radius:50%;
  background: var(--blue-sky); opacity:0.6;
  width:14px; height:14px;
  top:140px; right:80px;
}
.pillars { display:flex; flex-direction:column; gap:1rem; margin-top:2.5rem; }
.pillar {
  display:flex; gap:1rem; align-items:flex-start;
  padding:1rem 1.2rem;
  background: var(--cream); border-radius:10px;
  border-left: 4px solid #2f7ae8;
  transition: border-color 0.2s;
}
.pillar:nth-child(even) { border-left-color: #3db870; }
.pillar:hover { border-left-color: #3db870; }
.pillar-icon { font-size:1.3rem; flex-shrink:0; }
.pillar-title { font-weight:700; font-size:0.9rem; margin-bottom:0.15rem; color: var(--text-dark); }
.pillar-desc { font-size:0.82rem; color: var(--text-muted); line-height:1.55; }

/* â”€â”€ SERVICES â”€â”€ */
#services {
  background: linear-gradient(180deg, #edf1f9 0%, #dce8f5 100%);
}
.services-head { max-width:1100px; margin:0 auto; }
.services-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1.5rem; margin-top:3rem;
  max-width:1100px; margin-left:auto; margin-right:auto;
}
.service-card {
  background: var(--white); border-radius:14px;
  padding:2rem; position:relative; overflow:hidden;
  border: 1px solid rgba(0,0,0,0.06);
  transition: transform 0.25s, box-shadow 0.25s;
}
.service-card::after {
  content:''; position:absolute;
  top:0; left:0; right:0; height:3px;
}
.service-card:nth-child(1)::after { background: var(--green-mid); }
.service-card:nth-child(2)::after { background: var(--blue-light); }
.service-card:nth-child(3)::after { background: var(--green-light); }
.service-card:nth-child(4)::after { background: var(--blue-mid); }
.service-card:nth-child(5)::after { background: var(--green-mid); }
.service-card:nth-child(6)::after { background: var(--blue-light); }
.service-card:hover { transform:translateY(-5px); box-shadow:0 14px 40px rgba(7,26,58,0.14); }
.service-num {
  font-family:'Playfair Display', serif;
  font-size:2.4rem; font-weight:900;
  color:rgba(10,61,46,0.08); display:block; margin-bottom:0.4rem;
}
.service-title { font-weight:700; font-size:0.95rem; margin-bottom:0.6rem; color: var(--text-dark); }
.service-desc { font-size:0.83rem; color: var(--text-muted); line-height:1.65; }

/* â”€â”€ TEAM â”€â”€ */
#team {
  background: linear-gradient(160deg, #03101f 0%, #071a3a 65%, #0e2318 100%);
  color: var(--cream);
}
#team .section-label { color: var(--blue-sky); }
#team .section-title { color: var(--white); }
#team .section-lead { color:rgba(240,244,242,0.7); }
.team-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:2.5rem; max-width:1000px;
  margin:3rem auto 0;
}
.team-card {
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:18px; padding:2.5rem;
  position:relative; overflow:hidden;
  transition: border-color 0.25s;
}
.team-card:hover { border-color:rgba(98,184,248,0.5); }
.team-card::before {
  content:''; position:absolute;
  bottom:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, #3db870, #2f7ae8);
}
.team-avatar {
  width:70px; height:70px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Playfair Display', serif;
  font-size:1.5rem; font-weight:700; color:white;
  margin-bottom:1.25rem;
}
.av-ma { background: linear-gradient(135deg, #1245b0, #2f7ae8); }
.av-sr { background: linear-gradient(135deg, var(--blue-mid), var(--blue-light)); }
.team-name {
  font-family:'Playfair Display', serif;
  font-size:1.3rem; font-weight:700; color:white;
  margin-bottom:0.2rem;
}
.team-role {
  font-size:0.75rem; text-transform:uppercase; letter-spacing:0.1em;
  color: var(--blue-sky); font-weight:600; margin-bottom:1.25rem;
}
.team-bio {
  font-size:0.86rem; color:rgba(240,244,242,0.68);
  line-height:1.75; margin-bottom:1.5rem;
}
.team-tags { display:flex; flex-wrap:wrap; gap:0.45rem; }
.team-tag {
  background:rgba(58,127,193,0.15);
  border:1px solid rgba(58,127,193,0.3);
  color: var(--blue-sky);
  padding:0.22rem 0.7rem; border-radius:20px;
  font-size:0.7rem; font-weight:500; letter-spacing:0.03em;
}
.team-tag.green {
  background:rgba(46,168,122,0.12);
  border-color:rgba(46,168,122,0.3);
  color: #7dd8b0;
}

/* â”€â”€ IMPACT â”€â”€ */
#impact { background: var(--white); }
.impact-inner { max-width:1100px; margin:0 auto; }
.impact-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:4rem; align-items:start; }
.impact-numbers {
  display:grid; grid-template-columns:1fr 1fr;
  gap:1.25rem; margin-top:2.5rem;
}
.icard {
  border-radius:12px; padding:1.75rem; text-align:center;
}
.icard-g { background: linear-gradient(145deg, #071a3a, #1245b0); }
.icard-b { background: linear-gradient(145deg, #0e2d80, #2f7ae8); }
.icard-gs { background: linear-gradient(145deg, #1a4a2e, #3db870); }
.icard-bs { background: linear-gradient(145deg, #2a7a4a, #3db870); }
.icard-big {
  font-family:'Playfair Display', serif;
  font-size:2.6rem; font-weight:900; color:white;
  display:block; line-height:1;
}
.icard-label {
  font-size:0.73rem; color:rgba(255,255,255,0.65);
  margin-top:0.4rem; display:block; letter-spacing:0.05em;
}
.regions-box {
  background: var(--cream); border-radius:14px;
  padding:2rem; border: 1px solid rgba(0,0,0,0.06);
}
.regions-box h3 {
  font-weight:700; font-size:0.9rem;
  letter-spacing:0.04em; margin-bottom:1.25rem;
  color: var(--text-dark);
}
.region-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:0.65rem 0; border-bottom:1px solid rgba(0,0,0,0.06);
  font-size:0.85rem;
}
.region-row:last-child { border-bottom:none; }
.rdot {
  width:9px; height:9px; border-radius:50%;
  display:inline-block; margin-right:0.55rem; flex-shrink:0;
}
.rdot-g { background: var(--green-light); }
.rdot-b { background: var(--blue-light); }
.rdot-m { background: var(--blue-mid); }
.rdot-d { background: #8aaabf; }
.rbadge {
  background: white; border:1px solid rgba(0,0,0,0.08);
  padding:0.2rem 0.65rem; border-radius:12px;
  font-size:0.7rem; font-weight:600; color: var(--text-muted);
}

/* â”€â”€ CONTACT â”€â”€ */
#contact { background: var(--cream); }
.contact-inner { max-width:1100px; margin:0 auto; }
.contact-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:5rem; align-items:start; }
.contact-items { margin-top:2rem; display:flex; flex-direction:column; gap:1.5rem; }
.citem { display:flex; gap:1rem; align-items:flex-start; }
.cicon {
  width:44px; height:44px; border-radius:10px;
  background: linear-gradient(135deg, #071a3a, #1245b0);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; flex-shrink:0;
}
.clabel { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.1em; color:#8aa09a; font-weight:600; }
.cvalue { font-weight:500; color: var(--text-dark); font-size:0.9rem; }
.contact-form {
  background: var(--white); border-radius:16px;
  padding:2.5rem;
  box-shadow: 0 4px 30px rgba(10,61,46,0.08);
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.fg { margin-bottom:1rem; }
.fg label {
  display:block; font-size:0.75rem; font-weight:700;
  letter-spacing:0.06em; text-transform:uppercase;
  color: var(--text-muted); margin-bottom:0.4rem;
}
.fg input, .fg select, .fg textarea {
  width:100%; padding:0.8rem 1rem;
  border:1.5px solid rgba(0,0,0,0.09);
  border-radius:8px;
  font-family:'DM Sans', sans-serif; font-size:0.88rem;
  background: var(--cream);
  transition: border-color 0.2s, background 0.2s;
}
.fg input:focus, .fg select:focus, .fg textarea:focus {
  outline:none; border-color: #2f7ae8;
  background: white;
}
.fg textarea { resize:vertical; min-height:100px; }
.form-btn {
  width:100%; padding:1rem;
  background: linear-gradient(135deg, #071a3a, #1245b0);
  color:white; border:none; border-radius:8px;
  font-family:'DM Sans', sans-serif; font-size:0.88rem;
  font-weight:700; letter-spacing:0.05em; cursor:pointer;
  transition: opacity 0.2s, transform 0.2s;
}
.form-btn:hover { opacity:0.9; transform:translateY(-1px); }

/* â”€â”€ FOOTER â”€â”€ */
footer {
  background: #03101f;
  color:rgba(240,244,242,0.55);
  padding:3rem; text-align:center;
  border-top:1px solid rgba(58,127,193,0.15);
}
.footer-logo img { height:34px; opacity:0.75; margin-bottom:1.5rem; }
.footer-links {
  display:flex; justify-content:center; gap:2rem;
  list-style:none; margin-bottom:1.5rem;
}
.footer-links a {
  color:rgba(240,244,242,0.55); text-decoration:none;
  font-size:0.8rem; transition:color 0.2s;
}
.footer-links a:hover { color: var(--blue-sky); }
.footer-copy { font-size:0.75rem; }
.footer-line {
  width:60px; height:2px;
  background: linear-gradient(90deg, #3db870, #2f7ae8);
  margin:0 auto 1.5rem;
}

/* â”€â”€ ANIMATIONS â”€â”€ */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(22px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes float {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-14px); }
}

/* â”€â”€ BILINGUAL â”€â”€ */
[data-en] { display:none; }
body.en [data-fr] { display:none; }
body.en [data-en] { display:unset; }
span[data-en],p[data-en],h1[data-en],h2[data-en],h3[data-en],li[data-en],a[data-en],div[data-en] { display:none; }
body.en span[data-fr],body.en p[data-fr],body.en h1[data-fr],body.en h2[data-fr],
body.en h3[data-fr],body.en li[data-fr],body.en a[data-fr] { display:none; }
body.en span[data-en],body.en p[data-en],body.en h1[data-en],body.en h2[data-en],
body.en h3[data-en],body.en li[data-en],body.en a[data-en] { display:inline; }
div[data-en] { display:none; }
body.en div[data-fr] { display:none; }
body.en div[data-en] { display:block; }

@media (max-width:900px) {
  #mission [style*="grid-template-columns:repeat(3"] { display: grid !important; grid-template-columns: 1fr 1fr !important; }
  #mission [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }

  nav { padding:1rem 1.5rem; }
  .nav-links { display:none; }
  .mission-grid,.team-grid,.contact-grid,.impact-grid { grid-template-columns:1fr; }
  .services-grid,.biblio-grid { grid-template-columns:1fr 1fr; }
  .hero-orbs { display:none; }
  section { padding:4rem 1.5rem; }
}




/* â”€â”€ OUTILS SOMA â”€â”€ */
#outils { background: linear-gradient(180deg, #071a3a 0%, #03101f 100%); padding: 6rem 3rem; }
#outils .section-label { color: #3db870; }
#outils .section-title { color: white; }
#outils .section-lead { color: rgba(240,244,242,0.72); }

.outils-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem; max-width: 1100px; margin: 3rem auto 0;
}
.outil-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px; overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
}
.outil-card:hover { border-color: rgba(98,184,248,0.4); transform: translateY(-2px); }
.outil-card-header {
  padding: 1.5rem 1.75rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  display: flex; align-items: flex-start; gap: 1rem;
}
.outil-icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; flex-shrink: 0;
}
.outil-meta { flex: 1; }
.outil-tag {
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.12em;
  font-weight: 700; margin-bottom: 0.35rem; display: block;
}
.outil-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem; font-weight: 700; color: white;
  margin-bottom: 0.25rem; line-height: 1.25;
}
.outil-sub {
  font-size: 0.75rem; color: rgba(240,244,242,0.55);
  font-style: italic;
}
.outil-card-body {
  padding: 1.25rem 1.75rem;
}
.outil-desc {
  font-size: 0.83rem; color: rgba(240,244,242,0.7);
  line-height: 1.7; margin-bottom: 1.1rem;
}
.outil-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.25rem; }
.outil-pill {
  font-size: 0.65rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.07em; padding: 0.22rem 0.65rem;
  border-radius: 20px; border: 1px solid;
}
.outil-launch {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 1.4rem; border-radius: 8px; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 0.83rem; font-weight: 700;
  border: none; transition: opacity 0.2s, transform 0.15s; letter-spacing: 0.03em;
}
.outil-launch:hover { opacity: 0.9; transform: translateY(-1px); }

/* Modal / iframe overlay */
.outil-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(3,16,31,0.92); backdrop-filter: blur(8px);
  align-items: center; justify-content: center;
}
.outil-modal-overlay.open { display: flex; }
.outil-modal {
  background: white; border-radius: 16px; overflow: hidden;
  width: min(1100px, 96vw); height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}
.outil-modal-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 1.25rem;
  background: #071a3a; border-bottom: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.outil-modal-title {
  font-family: 'Playfair Display', serif;
  font-size: 1rem; font-weight: 700; color: white;
}
.outil-modal-close {
  background: rgba(255,255,255,0.1); border: none; color: white;
  width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
  font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.outil-modal-close:hover { background: rgba(255,255,255,0.2); }
.outil-iframe {
  flex: 1; border: none; width: 100%;
}

/* Guide tÃ©lÃ©chargeable */
.guide-card {
  max-width: 1100px; margin: 2rem auto 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(61,184,112,0.25);
  border-radius: 14px; padding: 1.5rem 2rem;
  display: flex; align-items: center; gap: 1.5rem;
}
.guide-icon { font-size: 2rem; flex-shrink: 0; }
.guide-text h3 { font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 700; color: white; margin-bottom: 0.3rem; }
.guide-text p { font-size: 0.82rem; color: rgba(240,244,242,0.65); line-height: 1.6; margin: 0; }
.guide-dl { background: rgba(61,184,112,0.15); border: 1px solid rgba(61,184,112,0.3); color: #3db870; padding: 0.6rem 1.2rem; border-radius: 8px; font-size: 0.8rem; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: default; }

@media (max-width: 900px) {
  .outils-grid { grid-template-columns: 1fr; }
  .guide-card { flex-direction: column; text-align: center; }
}

/* â”€â”€ CV PAR PAYS â”€â”€ */
#cv-pays { background: linear-gradient(180deg, #e4ecf5 0%, #edf1f9 100%); }

.cv-pays-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem; max-width: 1100px; margin: 2.5rem auto 0;
}
.cv-country-block {
  background: white; border-radius: 14px;
  overflow: hidden; border: 1px solid rgba(18,69,176,0.08);
  transition: transform 0.22s, box-shadow 0.22s;
}
.cv-country-block:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(18,69,176,0.1); }

.cv-country-header {
  padding: 1rem 1.25rem;
  display: flex; align-items: center; gap: 0.6rem;
}
.cv-country-flag { font-size: 1.4rem; }
.cv-country-name { font-weight: 800; font-size: 0.9rem; color: white; }
.cv-country-sub  { font-size: 0.68rem; color: rgba(255,255,255,0.75); font-weight: 500; }

.cv-cards-list { padding: 0.75rem; display: flex; flex-direction: column; gap: 0.6rem; }

.cv-mini-card {
  border-radius: 10px; padding: 0.85rem 1rem;
  border: 1px solid rgba(18,69,176,0.08);
  background: #f7f9fd;
}
.cv-mini-type {
  font-size: 0.6rem; text-transform: uppercase;
  letter-spacing: 0.1em; font-weight: 700;
  margin-bottom: 0.3rem; display: block;
}
.cv-mini-title { font-weight: 700; font-size: 0.78rem; color: #0a1a2e; margin-bottom: 0.25rem; line-height: 1.35; }
.cv-mini-desc  { font-size: 0.72rem; color: #3d5a80; line-height: 1.55; margin-bottom: 0.5rem; }
.cv-mini-tip {
  font-size: 0.67rem; color: #5a7090; font-style: italic;
  padding: 0.25rem 0.5rem; background: rgba(18,69,176,0.05);
  border-radius: 6px; display: block; margin-bottom: 0.45rem;
}
.cv-mini-link {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.72rem; font-weight: 700; text-decoration: none;
  transition: gap 0.15s;
}
.cv-mini-link::after { content: 'â†’'; }
.cv-mini-link:hover { gap: 0.5rem; }
.cv-link-blue  { color: #2f7ae8; }
.cv-link-green { color: #2a7a4a; }
.cv-link-red   { color: #c41e3a; }
.cv-link-teal  { color: #1a7a6e; }

/* conseil gÃ©nÃ©ral */
.cv-conseil-box {
  max-width: 1100px; margin: 2rem auto 0;
  background: linear-gradient(135deg, #071a3a, #0e2318);
  border-radius: 14px; padding: 1.75rem 2rem;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem;
}
.cv-conseil-item { color: rgba(240,244,242,0.85); }
.cv-conseil-title { color: #62b8f8; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.4rem; }
.cv-conseil-text  { font-size: 0.78rem; line-height: 1.65; }

@media (max-width: 900px) {
  .cv-pays-grid    { grid-template-columns: 1fr 1fr; }
  .cv-conseil-box  { grid-template-columns: 1fr; }
}

/* â”€â”€ RESSOURCES PAR PAYS â”€â”€ */
#ressources-pays { background: var(--white); }
.pays-intro { max-width: 1100px; margin: 0 auto; }

.pays-tabs {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  max-width: 1100px; margin: 2rem auto 0;
}
.pays-tab {
  padding: 0.5rem 1.2rem; border-radius: 30px;
  border: 1.5px solid rgba(18,69,176,0.2);
  background: white; color: #1245b0;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem; font-weight: 700;
  cursor: pointer; transition: all 0.2s;
  display: flex; align-items: center; gap: 0.4rem;
}
.pays-tab:hover { border-color: #1245b0; background: rgba(18,69,176,0.05); }
.pays-tab.active { background: #1245b0; color: white; border-color: #1245b0; }

.pays-panel {
  max-width: 1100px; margin: 2rem auto 0;
  display: none;
}
.pays-panel.active { display: block; }

.pays-header {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.5rem 2rem;
  border-radius: 14px 14px 0 0;
  border: 1px solid rgba(18,69,176,0.1);
  border-bottom: none;
}
.pays-flag { font-size: 2.2rem; }
.pays-nom { font-family: 'Playfair Display', serif; font-size: 1.4rem; font-weight: 700; }
.pays-agence {
  font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.1em; font-weight: 600; margin-top: 0.1rem;
}

.pays-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 0; border: 1px solid rgba(18,69,176,0.1);
  border-radius: 0 0 14px 14px; overflow: hidden;
}
.pays-col {
  padding: 1.5rem;
  border-right: 1px solid rgba(18,69,176,0.08);
}
.pays-col:last-child { border-right: none; }
.pays-col-title {
  font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.12em; font-weight: 700;
  margin-bottom: 1rem; padding-bottom: 0.6rem;
  border-bottom: 2px solid;
  display: flex; align-items: center; gap: 0.4rem;
}
.col-outil .pays-col-title { color: #2a7a4a; border-color: #3db870; }
.col-video .pays-col-title { color: #1245b0; border-color: #2f7ae8; }
.col-infog .pays-col-title { color: #0a2d3e; border-color: #62b8f8; }

.pays-res {
  margin-bottom: 1rem; padding-bottom: 1rem;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.pays-res:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.pays-res-title {
  font-weight: 700; font-size: 0.82rem;
  color: #0a1a2e; margin-bottom: 0.3rem; line-height: 1.4;
}
.pays-res-desc {
  font-size: 0.77rem; color: #3d5a80;
  line-height: 1.6; margin-bottom: 0.5rem;
}
.pays-res-link {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.74rem; font-weight: 700;
  text-decoration: none; transition: gap 0.15s;
}
.pays-res-link:hover { gap: 0.5rem; }
.pays-res-link::after { content: 'â†’'; }
.link-green { color: #2a7a4a; }
.link-blue  { color: #2f7ae8; }
.link-sky   { color: #1245b0; }

/* section transversale */
.transversal-box {
  max-width: 1100px; margin: 2.5rem auto 0;
  background: linear-gradient(135deg, rgba(3,16,31,0.04), rgba(18,69,176,0.06));
  border-radius: 14px; padding: 2rem;
  border: 1px solid rgba(18,69,176,0.1);
}
.transversal-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem; font-weight: 700;
  margin-bottom: 1.25rem; color: #03101f;
  display: flex; align-items: center; gap: 0.5rem;
}
.transversal-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.trans-card {
  background: white; border-radius: 10px;
  padding: 1.25rem; border: 1px solid rgba(18,69,176,0.08);
}
.trans-badge {
  font-size: 0.65rem; text-transform: uppercase;
  letter-spacing: 0.1em; font-weight: 700;
  padding: 0.18rem 0.6rem; border-radius: 10px;
  display: inline-block; margin-bottom: 0.65rem;
}
.badge-rapport { background: rgba(18,69,176,0.1); color: #1245b0; }
.badge-infog   { background: rgba(42,122,74,0.1); color: #2a7a4a; }
.badge-video   { background: rgba(47,122,232,0.08); color: #2f7ae8; }
.trans-title { font-weight: 700; font-size: 0.85rem; margin-bottom: 0.3rem; line-height: 1.4; }
.trans-desc  { font-size: 0.77rem; color: #3d5a80; line-height: 1.6; margin-bottom: 0.6rem; }
.trans-stat {
  font-size: 0.73rem; background: #edf1f9;
  padding: 0.35rem 0.7rem; border-radius: 8px;
  color: #1245b0; font-weight: 600; margin-bottom: 0.5rem;
  display: inline-block;
}

@media (max-width: 900px) {
  .pays-grid { grid-template-columns: 1fr; }
  .pays-col  { border-right: none; border-bottom: 1px solid rgba(18,69,176,0.08); }
  .transversal-grid { grid-template-columns: 1fr; }
}


/* â”€â”€ BIBLIO GEO SUB-SECTIONS â”€â”€ */
.biblio-geo-tabs {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  max-width: 1100px; margin: 1.5rem auto 0;
}
.geo-tab {
  padding: 0.45rem 1.1rem; border-radius: 30px;
  border: 1.5px solid rgba(18,69,176,0.2);
  background: white; color: #1245b0;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem; font-weight: 700;
  cursor: pointer; transition: all 0.2s;
  display: flex; align-items: center; gap: 0.4rem;
}
.geo-tab:hover { border-color: #1245b0; background: rgba(18,69,176,0.05); }
.geo-tab.active-geo { background: #071a3a; color: white; border-color: #071a3a; }
.geo-tab.active-fr  { background: #2f7ae8; color: white; border-color: #2f7ae8; }
.geo-tab.active-af  { background: #2a7a4a; color: white; border-color: #2a7a4a; }

.biblio-geo-panel { display: none; }
.biblio-geo-panel.active { display: block; }

.geo-subsection-label {
  max-width: 1100px; margin: 2rem auto 1rem;
  display: flex; align-items: center; gap: 0.75rem;
}
.geo-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 1rem; border-radius: 30px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
}
.geo-badge-fr { background: rgba(47,122,232,0.1); color: #2f7ae8; border: 1px solid rgba(47,122,232,0.25); }
.geo-badge-af { background: rgba(42,122,74,0.1);  color: #2a7a4a; border: 1px solid rgba(42,122,74,0.25); }
.geo-badge-pt { background: rgba(196,30,58,0.08); color: #c41e3a; border: 1px solid rgba(196,30,58,0.2); }
.geo-tab.active-pt { background: #006600; color: white; border-color: #006600; }
.geo-divider {
  height: 1px; background: linear-gradient(90deg, transparent, rgba(18,69,176,0.15), transparent);
  max-width: 1100px; margin: 0 auto 1.5rem;
}

/* â”€â”€ BIBLIOTHÃˆQUE â”€â”€ */
#bibliotheque { background: linear-gradient(180deg, #dce8f5 0%, #edf1f9 100%); }
.biblio-intro { max-width: 1100px; margin: 0 auto; }

.biblio-tabs {
  display: flex; gap: 0.5rem; margin-top: 2.5rem;
  flex-wrap: wrap; max-width: 1100px; margin-left: auto; margin-right: auto;
}
.tab-btn {
  padding: 0.55rem 1.3rem; border-radius: 30px;
  border: 1.5px solid rgba(18,69,176,0.25);
  background: white; color: #1245b0;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
  letter-spacing: 0.03em;
}
.tab-btn:hover, .tab-btn.active {
  background: #1245b0; color: white;
  border-color: #1245b0;
}
.tab-btn.active-g { background: #2a7a4a; color: white; border-color: #2a7a4a; }

.biblio-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; margin-top: 2rem;
  max-width: 1100px; margin-left: auto; margin-right: auto;
}
.res-card {
  background: white; border-radius: 14px;
  padding: 1.6rem; border: 1px solid rgba(18,69,176,0.08);
  transition: transform 0.22s, box-shadow 0.22s;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.res-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(18,69,176,0.12); }
.res-type-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.bar-article { background: #2f7ae8; }
.bar-video   { background: #3db870; }
.bar-infog   { background: #1245b0; }
.bar-outil   { background: #2a7a4a; }

.res-badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.2rem 0.7rem; border-radius: 20px;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 0.9rem; width: fit-content;
}
.badge-article { background: rgba(47,122,232,0.1); color: #2f7ae8; }
.badge-video   { background: rgba(61,184,112,0.12); color: #2a7a4a; }
.badge-infog   { background: rgba(18,69,176,0.1); color: #1245b0; }
.badge-outil   { background: rgba(42,122,74,0.12); color: #2a7a4a; }

.res-title {
  font-weight: 700; font-size: 0.92rem;
  color: #0a1a2e; margin-bottom: 0.45rem; line-height: 1.4;
}
.res-source {
  font-size: 0.75rem; color: #5a7a9a;
  font-weight: 600; margin-bottom: 0.6rem;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.res-desc {
  font-size: 0.82rem; color: #3d5a80;
  line-height: 1.65; flex: 1; margin-bottom: 1.1rem;
}
.res-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 1rem; }
.res-tag {
  background: #edf1f9; color: #1245b0;
  padding: 0.18rem 0.55rem; border-radius: 10px;
  font-size: 0.68rem; font-weight: 500;
}
.res-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: #2f7ae8; font-size: 0.8rem; font-weight: 600;
  text-decoration: none; margin-top: auto;
  transition: gap 0.2s;
}
.res-link:hover { gap: 0.65rem; }
.res-link::after { content: 'â†’'; }

.biblio-public-toggle {
  display: flex; gap: 1rem; margin-bottom: 1.5rem;
  max-width: 1100px; margin-left: auto; margin-right: auto;
  margin-top: 1.5rem;
}
.pub-chip {
  padding: 0.4rem 1.1rem; border-radius: 20px;
  font-size: 0.78rem; font-weight: 600;
  border: 1.5px solid rgba(42,122,74,0.3);
  color: #2a7a4a; background: rgba(61,184,112,0.08);
  cursor: default;
}
.pub-chip.blue {
  border-color: rgba(18,69,176,0.3);
  color: #1245b0; background: rgba(47,122,232,0.08);
}
