/* ═══════════════════════════════════════════════════════════════════
   Section « prospection responsable » — alignée sur la grammaire des
   sections voisines.

   CE QUI CHANGE
   Le panneau portait un dégradé (#c7efdc → #e4f8ee), un rayon de 30 px
   et aucune bordure. Les sections voisines partagent au contraire un
   aplat franc, un filet de 1,5 px en vert profond et un rayon de 24 px.

   TROIS DÉCORS RETIRÉS, TOUS DU MÊME ORDRE
   Un cercle en pointillé débordant du coin, un halo radial flouté
   derrière l'animation, et les ombres portées des étiquettes du
   graphique. Chacun ajoutait une texture supplémentaire là où le
   contour suffit désormais à séparer les plans.

   LE GRAPHIQUE EST UNE IFRAME
   `assets/responsible/canal-certifie-animation.html` — un SVG autonome.
   Ses couleurs et ses contours ont été repris dans ce fichier-là, pas
   ici : une feuille de style extérieure n'atteint pas l'intérieur d'une
   iframe.
   ═══════════════════════════════════════════════════════════════════ */

.responsible {
  /* Ni fond, ni contour, ni ombre. La section repose sur le fond de
     page et se lit par sa seule composition. */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  /* UN ESPACE ENTRE LES DEUX COLONNES, QUI N'EXISTAIT PAS.
     La grille d'origine déclarait `58% 42%` sans `gap` : les colonnes
     se touchaient bord à bord. Le panneau vert et le halo flouté
     derrière le graphique le masquaient ; retirés, la proximité saute
     aux yeux.

     On passe en fractions plutôt qu'en pourcentages : avec un `gap`,
     58 % + 42 % + l'espace dépasse la largeur et la seconde colonne
     déborde. `1.25fr` et `1fr` gardent la même proportion et laissent
     la grille retrancher l'espace d'elle-même. */
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) !important;
  gap: 56px !important;
  align-items: center;
}

@media (max-width: 900px) {
  .responsible {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}

/* Le cercle en pointillé qui débordait du coin haut droit. */
.responsible::before { display: none !important; }

/* Le halo radial flouté derrière l'animation. */
.responsible-animation::before { display: none !important; }

/* ── Les quatre garanties ───────────────────────────────────────────
   SANS CONTOUR, IL FAUT UN APLAT. Des pastilles blanches sans bordure
   ni ombre, posées sur un fond blanc, n'existent plus : rien ne dit où
   elles commencent. Le vert pâle les détache sans ajouter de trait. */
.responsible-points span {
  background: #E8F6EC !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
.responsible-points i {
  background: #fff !important;
  /* Vert du logo. Sur une pastille blanche : 3,18:1 — au-dessus du
     seuil de 3:1 qui s'applique à un élément graphique. */
  color: #49A25E !important;
  margin-right: 0 !important;
}

/* ── Le chapeau ─────────────────────────────────────────────────── */
.responsible-copy > p { color: #4A6558 !important; }

/* Le sur-titre garde un vert lisible : à 11 px, c'est du TEXTE, donc
   4,5:1 exigé. Le vert du logo n'y arrive pas (3,18:1). */
.responsible-copy .eyebrow { color: #316D3F !important; }

@media (prefers-contrast: more) {
  .responsible-points span { background: #D8EFD2 !important; }
  .responsible-copy > p { color: #2A3B33 !important; }
}