/* ═══════════════════════════════════════════════════════════════
   KRIBIFACILIT — PREMIUM UPGRADES (version propre, sans conflits)
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   1. ESPACEMENTS GLOBAUX — respiration de toutes les sections
   ───────────────────────────────────────────────────────────── */
section {
  padding: 60px 0;
}
@media (min-width: 860px) {
  section { padding: 76px 0; }
}

/* Sections spéciales qui ont leur propre rythme */
.capsules-section  { padding: 44px 0 40px !important; }
.ceo-section-full  { padding: 72px 0 80px !important; }
.final-admin-banner { padding: 80px 0 !important; }

/* ─────────────────────────────────────────────────────────────
   2. GRILLES — égalité des colonnes, cartes bien centrées
   ───────────────────────────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 600px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
@media (min-width: 860px) {
  .grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }

  /* 1 seule carte → centrée */
  .grid:has(> :last-child:nth-child(1)) {
    grid-template-columns: 1fr;
    max-width: 580px;
    margin-inline: auto;
  }
  /* 2 cartes → 2 colonnes égales, centrées */
  .grid:has(> :last-child:nth-child(2)) {
    grid-template-columns: repeat(2, 1fr);
    max-width: 840px;
    margin-inline: auto;
  }
  /* 3 cartes → toujours 3 colonnes égales */
  .grid:has(> :last-child:nth-child(3)) {
    grid-template-columns: repeat(3, 1fr);
  }
  /* 4 cartes → 2 colonnes égales (50%/50%), pleine largeur du conteneur */
  .grid:has(> :last-child:nth-child(4)) {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Force equal width on all cards */
  .grid > .card { width: 100%; min-width: 0; }
}
@media (max-width: 599px) {
  .grid { grid-template-columns: 1fr !important; gap: 14px !important; }
}

/* ─────────────────────────────────────────────────────────────
   3. CARTES — padding plus généreux et cohérent
   ───────────────────────────────────────────────────────────── */
.card-inner {
  padding: 26px 24px;
}
@media (min-width: 860px) {
  .card-inner { padding: 30px 28px; }
}
.card-inner img {
  border-radius: 12px;
  margin: 4px 0 16px;
}

/* ─────────────────────────────────────────────────────────────
   4. SERVICE BLOCKS — séparation claire entre chaque service
   ───────────────────────────────────────────────────────────── */
.service-block {
  padding-bottom: 12px;
}
.service-block + hr {
  margin: 36px 0;
  border: 0;
  border-top: 1px solid rgba(26,124,42,.09);
}

/* ─────────────────────────────────────────────────────────────
   5. TITRES H2 — jamais tronqués
   ───────────────────────────────────────────────────────────── */
section h2,
.section-head h2 {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

/* ─────────────────────────────────────────────────────────────
   6. CEO / FONDATEUR — section institutionnelle premium
   ───────────────────────────────────────────────────────────── */
.ceo-section-full {
  background: linear-gradient(160deg, #f0f7ec 0%, #e8f3e4 50%, #f4f9f2 100%);
  border-top: 1px solid rgba(26,124,42,.10);
  border-bottom: 1px solid rgba(26,124,42,.10);
}
.ceo-section-title {
  text-align: center;
  margin-bottom: 52px;
}
.ceo-section-title .ceo-title-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase;
  color: var(--green-700);
  background: rgba(121,193,26,.10);
  border: 1.5px solid rgba(121,193,26,.25);
  border-radius: 999px;
  padding: 6px 16px;
  margin-bottom: 18px;
}
.ceo-section-title h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 38px);
  letter-spacing: -.03em;
  color: var(--text);
  margin-bottom: 10px;
  white-space: normal !important;
  overflow: visible !important;
}
.ceo-section-title p {
  color: var(--text-muted);
  font-size: 15px;
  max-width: 56ch;
  margin: 0 auto;
  text-align: center;
}
.ceo-left-card {
  border-radius: 20px;
  box-shadow: 0 16px 56px rgba(10,30,15,.14), 0 4px 16px rgba(10,30,15,.07);
  border: 1.5px solid rgba(26,124,42,.18);
}

/* ─────────────────────────────────────────────────────────────
   7. CEO PORTRAIT PREMIUM
   ───────────────────────────────────────────────────────────── */
.ceo-portrait-block {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  margin-bottom: 24px;
}
@media (max-width: 599px) {
  .ceo-portrait-block { flex-direction: column; align-items: center; gap: 18px; }
}
.ceo-portrait-img-wrap {
  position: relative;
  flex: 0 0 200px;
  width: 200px;
  height: 240px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(10,30,15,.20), 0 4px 12px rgba(10,30,15,.10);
  border: 2px solid rgba(26,124,42,.20);
}
@media (min-width: 860px) {
  .ceo-portrait-img-wrap { flex: 0 0 220px; width: 220px; height: 268px; }
}
.ceo-portrait-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.ceo-portrait-identity {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 4px;
  flex: 1;
}
.ceo-portrait-identity strong {
  font-family: var(--font-display);
  font-size: clamp(17px, 2.5vw, 22px);
  letter-spacing: -.02em;
  color: var(--text);
  line-height: 1.2;
}
.ceo-portrait-identity > span {
  font-size: 12.5px;
  color: var(--green-700);
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ceo-portrait-divider {
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, var(--green-700), var(--lime-400));
  border-radius: 99px;
  margin: 10px 0;
}
.ceo-portrait-quote {
  padding: 14px 18px;
  background: rgba(121,193,26,.07);
  border-left: 3px solid var(--green-700);
  border-radius: 0 12px 12px 0;
  flex: 1;
}
.ceo-portrait-quote p {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text);
  font-style: italic;
  font-weight: 500;
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────
   8. CARROUSEL CAPSULES — transitions douces
   ───────────────────────────────────────────────────────────── */
.capsules-track {
  will-change: transform;
}
.capsule-slide {
  border-radius: 20px;
  box-shadow: 0 6px 22px rgba(10,30,15,.12), 0 2px 6px rgba(10,30,15,.07);
  border: 1.5px solid rgba(26,124,42,.12);
  overflow: hidden;
  flex: 0 0 calc(30% - 14px);
}
@media (max-width: 900px) { .capsule-slide { flex: 0 0 calc(47% - 10px); } }
@media (max-width: 580px)  { .capsule-slide { flex: 0 0 82%; } }
.capsule-slide img { display: block; width: 100%; transition: transform .5s ease; }
.capsule-slide:hover img { transform: scale(1.03); }

/* ─────────────────────────────────────────────────────────────
   9. AGRO HERO BLOCK
   ───────────────────────────────────────────────────────────── */
.agro-hero-block {
  background: linear-gradient(135deg, rgba(26,124,42,.06), rgba(121,193,26,.04));
  border: 1.5px solid rgba(26,124,42,.14);
  border-radius: 20px;
  padding: 32px 34px 26px;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
}
.agro-hero-block::after {
  content: '';
  position: absolute;
  bottom: -30px; right: -20px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(121,193,26,.15), transparent 70%);
  pointer-events: none;
}
.agro-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase;
  color: var(--green-700);
  background: rgba(121,193,26,.12);
  border: 1.5px solid rgba(121,193,26,.25);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 18px;
}
.agro-hero-text {
  font-family: var(--font-display) !important;
  font-size: clamp(26px, 5vw, 50px) !important;
  font-weight: 700 !important;
  letter-spacing: -.03em !important;
  line-height: 1.10 !important;
  color: var(--text) !important;
  display: block !important;
  margin: 0 0 22px !important;
}
.agro-hero-accent { color: var(--green-700); }
.agro-hero-targets {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding-top: 18px;
  border-top: 1px solid rgba(26,124,42,.12);
}
.agro-hero-targets span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--text-muted);
  background: var(--bg);
  border: 1.5px solid rgba(26,124,42,.12);
  border-radius: 999px;
  padding: 5px 14px;
}
.agro-hero-targets i { color: var(--green-700); font-size: 11px; }

/* ─────────────────────────────────────────────────────────────
   10. ABOUT — Identity block premium
   ───────────────────────────────────────────────────────────── */
.about-identity-block {
  background: linear-gradient(135deg, rgba(26,124,42,.06) 0%, rgba(121,193,26,.04) 100%);
  border: 1.5px solid rgba(26,124,42,.15);
  border-radius: 18px;
  padding: 28px 30px 24px;
  margin: 24px 0;
  position: relative;
  overflow: hidden;
}
.about-identity-block::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 4px; height: 100%;
  background: linear-gradient(180deg, var(--green-700), var(--lime-400));
  border-radius: 4px 0 0 4px;
}
.about-identity-header {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase;
  color: var(--green-700);
  margin-bottom: 14px;
}
.about-identity-header i { font-size: 13px; }
.about-discretion-p {
  font-size: 15.5px !important;
  line-height: 1.88 !important;
  color: var(--text) !important;
  font-style: normal !important;
  font-weight: 450 !important;
  padding: 0 !important;
  border-left: none !important;
  background: none !important;
  border-radius: 0 !important;
  margin: 0 0 20px !important;
}
.about-identity-pillars {
  display: flex; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid rgba(26,124,42,.12);
  padding-top: 16px;
}
.about-pillar {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 650; color: var(--green-700);
  background: rgba(121,193,26,.10);
  border: 1.5px solid rgba(121,193,26,.22);
  border-radius: 999px;
  padding: 6px 14px;
}
.about-pillar i { font-size: 11px; }

/* ─────────────────────────────────────────────────────────────
   11. BANNIÈRE FINALE — immersive
   ───────────────────────────────────────────────────────────── */
.final-admin-banner {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: linear-gradient(145deg, var(--green-900) 0%, #071409 100%);
}
.final-admin-banner::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 650px 400px at 25% 50%, rgba(121,193,26,.20) 0%, transparent 70%),
    radial-gradient(ellipse 450px 300px at 80% 30%, rgba(26,124,42,.15) 0%, transparent 65%);
  pointer-events: none;
}
.final-admin-banner .container { position: relative; z-index: 2; text-align: center; }
.final-admin-banner h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 4.5vw, 42px) !important;
  color: #fff !important;
  letter-spacing: -.03em;
  margin-bottom: 16px;
  white-space: normal !important;
}
.final-admin-banner p {
  color: rgba(255,255,255,.70) !important;
  font-size: 15px !important;
  max-width: 54ch;
  margin: 0 auto 28px;
  text-align: center !important;
}
.final-admin-banner .eyebrow {
  color: #c8f570 !important;
  background: rgba(121,193,26,.16) !important;
  border-color: rgba(121,193,26,.38) !important;
  margin: 0 auto 22px !important;
}
.final-admin-banner .eyebrow i { color: #c8f570 !important; }
.final-admin-banner .btn-ghost {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.28) !important;
  color: #fff !important;
}

/* ─────────────────────────────────────────────────────────────
   12. BOUTONS — ombre et visibilité
   ───────────────────────────────────────────────────────────── */
.btn-primary {
  font-size: 14.5px;
  padding: 14px 24px;
  box-shadow: 0 6px 20px rgba(26,124,42,.32), 0 2px 6px rgba(26,124,42,.20);
}
.btn-primary:hover {
  box-shadow: 0 10px 32px rgba(26,124,42,.40), 0 3px 10px rgba(26,124,42,.26);
}

/* ─────────────────────────────────────────────────────────────
   13. MOBILE — corrections finales
   ───────────────────────────────────────────────────────────── */
@media (max-width: 599px) {
  .card-inner { padding: 20px 18px; }
  .service-block + hr { margin: 24px 0; }
  .agro-hero-block { padding: 22px 20px 18px; }
  .about-identity-block { padding: 20px 18px 16px; }
}

/* ─────────────────────────────────────────────────────────────
   14. IMAGES — object-position par contexte
   ───────────────────────────────────────────────────────────── */
img[src*="topographe"]         { object-position: center 10%; }
img[src*="team_meeting"]       { object-position: center 20%; }
img[src*="partners_handshake"] { object-position: center 25%; }
img[src*="ceo_biang"]          { object-position: center top; }

/* ─────────────────────────────────────────────────────────────
   15. ABOUT PAGE — grid responsive
   ───────────────────────────────────────────────────────────── */
@media (min-width: 600px) {
  .activ-grid { grid-template-columns: 1fr 1fr !important; }
}


/* ═══════════════════════════════════════════════════════
   CEO FULL-HEIGHT + DOMAINES 2 COLONNES (v20 upgrade)
   ═══════════════════════════════════════════════════════ */

/* Layout principal : CEO à gauche, domaines à droite */
.ceo-domains-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: stretch;
}
@media (min-width: 860px) {
  .ceo-domains-wrap {
    grid-template-columns: minmax(0, 48%) minmax(0, 1fr);
    gap: 36px;
    align-items: stretch;
  }
}

/* CEO card : pleine hauteur du bloc droit */
.ceo-left-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white);
  border-radius: 24px;
  border: 1.5px solid rgba(26,124,42,.16);
  box-shadow: 0 16px 56px rgba(10,30,15,.12), 0 4px 16px rgba(10,30,15,.06);
  padding: 32px 28px;
  overflow: hidden;
}
/* Le texte corps s'étire pour remplir l'espace */
.ceo-body-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ceo-body-text p {
  font-size: 14.5px;
  line-height: 1.80;
  color: var(--text);
  margin: 0;
}

/* ── DOMAINES : 2 colonnes, stickers plus grands ── */
.domains-12-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.domain-pill-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--white);
  border: 1.5px solid rgba(26,124,42,.10);
  box-shadow: 0 2px 8px rgba(10,30,15,.06);
  text-decoration: none;
  color: var(--text);
  transition: transform .22s ease, border-color .2s, box-shadow .2s, background .2s;
  position: relative;
  overflow: hidden;
}
.domain-pill-card:hover {
  transform: translateY(-3px);
  border-color: rgba(26,124,42,.28);
  box-shadow: 0 8px 28px rgba(10,30,15,.14);
  background: rgba(121,193,26,.04);
}

/* Sticker/icône agrandi */
.d-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(26,124,42,.12), rgba(121,193,26,.10));
  border: 1.5px solid rgba(121,193,26,.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-700);
  font-size: 18px;
  transition: transform .2s ease, background .2s;
}
.domain-pill-card:hover .d-icon {
  transform: scale(1.10);
  background: linear-gradient(135deg, rgba(26,124,42,.20), rgba(121,193,26,.16));
}

/* Texte à droite de l'icône */
.d-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.d-text strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  white-space: normal;
}
.d-text span {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
}

/* Responsive mobile : 1 colonne */
@media (max-width: 599px) {
  .domains-12-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .domain-pill-card { padding: 10px 10px; gap: 9px; }
  .d-icon { width: 38px; height: 38px; font-size: 15px; border-radius: 10px; }
  .d-text strong { font-size: 11.5px; }
  .d-text span { display: none; }
}

/* ceo-right s'aligne en hauteur */
.ceo-right {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.ceo-right .domains-12-grid {
  flex: 1;
}

/* ── Titre "Mot du Fondateur" dans la carte, au-dessus de la photo ── */
.ceo-card-title {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(26,124,42,.10);
}
.ceo-card-title .ceo-title-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green-700);
  background: rgba(121,193,26,.10);
  border: 1.5px solid rgba(121,193,26,.25);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 10px;
}
.ceo-card-title h2 {
  font-family: var(--font-display);
  font-size: clamp(16px, 2.2vw, 22px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
  margin: 0;
  white-space: normal !important;
}

/* ════════ DARK CARD — texte et icônes lisibles sur fond vert-900 ════════ */
/* Produit 6 (Kribi Home Secure) et toute carte avec background sombre */
.card[style*="background:var(--green-900)"] .list li,
.card[style*="background: var(--green-900)"] .list li {
  color: rgba(255,255,255,.88) !important;
}
.card[style*="background:var(--green-900)"] .list li i,
.card[style*="background: var(--green-900)"] .list li i {
  background: rgba(121,193,26,.30) !important;
  color: #c8f06a !important;
}
.card[style*="background:var(--green-900)"] .list li span,
.card[style*="background: var(--green-900)"] .list li span {
  color: rgba(255,255,255,.88) !important;
}


/* ════════ DARK CARD — lisibilité Produit 6 et cartes sombres ════════ */
[style*="background:var(--green-900)"] .list li,
[style*="background:var(--green-900)"] .list li span {
  color: rgba(255,255,255,.90) !important;
}
[style*="background:var(--green-900)"] .list li,
[style*="background:var(--green-900)"] p {
  color: rgba(255,255,255,.75) !important;
}

/* ═══════════════════════════════════════════════════════════════
   FONT AWESOME — règles uniques, sans conflit
   ═══════════════════════════════════════════════════════════════ */

/* Toutes les icônes FA : font correcte, pas de style italique */
i[class*="fa-"],
span[class*="fa-"] {
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: antialiased !important;
  line-height: 1 !important;
}
i.fa-solid, .fa-solid { font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
i.fa-regular, .fa-regular { font-family: "Font Awesome 6 Free" !important; font-weight: 400 !important; }
i.fa-brands, .fa-brands { font-family: "Font Awesome 6 Brands" !important; font-weight: 400 !important; }

/* .list li i — icône circulaire : ne PAS forcer font-family ici,
   laisser les règles FA ci-dessus s'en charger */
.list li i[class*="fa-"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important; height: 22px !important; min-width: 22px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
  font-size: 10px !important;
  background: rgba(26,124,42,0.12) !important;
  color: var(--green-700) !important;
}

/* ── Cartes sombres (Produit 6, etc.) : lisibilité forcée ── */
[style*="background:var(--green-900)"] .list li,
[style*="background:var(--green-900)"] .list li span {
  color: rgba(255,255,255,.92) !important;
}
[style*="background:var(--green-900)"] .list li i[class*="fa-"] {
  background: rgba(121,193,26,.30) !important;
  color: #c8f06a !important;
}
[style*="background:var(--green-900)"] p {
  color: rgba(255,255,255,.76) !important;
}