/* =========================================================================
   Solidarité Active — Bibliothèque de composants
   Tout est scopé sous des classes préfixées .sa- (aucun reset global,
   aucun sélecteur nu) pour ne jamais entrer en conflit avec Elementor.
   Réutilisable dans Elementor via les classes CSS des widgets.
   ========================================================================= */

/* --- Conteneur -------------------------------------------------------- */
.sa-container {
  width: 100%;
  max-width: var(--sa-container);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}

/* --- Surtitre mono (eyebrow) ------------------------------------------ */
.sa-eyebrow {
  display: block;
  font-family: var(--sa-font-mono);
  font-size: var(--sa-fs-mono);
  letter-spacing: var(--sa-track-mono);
  text-transform: uppercase;
  color: var(--sa-violet);
  margin-bottom: var(--sa-s2);
}
.sa-eyebrow--or { color: var(--sa-or); }
.sa-eyebrow--clair { color: rgba(255, 255, 255, .7); }

/* --- Titres ----------------------------------------------------------- */
.sa-h1 {
  font-family: var(--sa-font-titre);
  font-weight: 800;
  font-size: var(--sa-fs-h1);
  line-height: 1.04;
  letter-spacing: var(--sa-track-h1);
  color: var(--sa-violet-dark);
  margin: 0 0 var(--sa-s3);
  text-wrap: balance;
}
.sa-h1--hero { font-size: var(--sa-fs-hero); }
.sa-h1--clair { color: var(--sa-blanc); }
/* Second membre de phrase mis en or : « ...n'est pas une aide. C'est une stratégie. » */
.sa-h1 .sa-or { color: var(--sa-or); }

.sa-h2 {
  font-family: var(--sa-font-titre);
  font-weight: 700;
  font-size: var(--sa-fs-h2);
  line-height: 1.15;
  color: var(--sa-violet-dark);
  margin: 0 0 var(--sa-s3);
  text-wrap: balance;
}
.sa-h2--clair { color: var(--sa-blanc); }

.sa-h3 {
  font-family: var(--sa-font-titre);
  font-weight: 600;
  font-size: var(--sa-fs-h3);
  line-height: 1.3;
  color: var(--sa-violet-dark);
  margin: 0 0 var(--sa-s1);
}

.sa-lead {
  font-family: var(--sa-font-corps);
  font-size: var(--sa-fs-corps);
  line-height: var(--sa-lh-corps);
  color: var(--sa-texte);
  margin: 0;
  text-wrap: pretty;
}
.sa-lead--clair { color: rgba(255, 255, 255, .82); }

/* --- Boutons — hauteur ≥ 48 px ---------------------------------------- */
.sa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sa-s1);
  font-family: var(--sa-font-titre);
  font-weight: 600;
  font-size: var(--sa-fs-card);
  line-height: 1;
  border: none;
  border-radius: var(--sa-radius-pill);
  padding: 14px 28px;
  min-height: var(--sa-tap);
  cursor: pointer;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
/* Or = action principale */
.sa-btn--or { background: var(--sa-or); color: var(--sa-violet-dark); }
.sa-btn--or:hover,
.sa-btn--or:focus-visible { background: var(--sa-or-dark); color: var(--sa-blanc); }
/* Violet = action institutionnelle */
.sa-btn--violet { background: var(--sa-violet); color: var(--sa-blanc); }
.sa-btn--violet:hover,
.sa-btn--violet:focus-visible { background: var(--sa-violet-dark); color: var(--sa-blanc); }
/* Secondaire contour */
.sa-btn--ligne {
  background: transparent;
  color: var(--sa-violet);
  border: 2px solid var(--sa-violet);
  padding: 12px 26px;
}
.sa-btn--ligne:hover,
.sa-btn--ligne:focus-visible { background: var(--sa-violet); color: var(--sa-blanc); }
/* Contour clair sur fond violet */
.sa-btn--ligne-clair {
  background: transparent;
  color: var(--sa-blanc);
  border: 2px solid rgba(255, 255, 255, .5);
  padding: 12px 26px;
}
.sa-btn--ligne-clair:hover,
.sa-btn--ligne-clair:focus-visible { background: var(--sa-blanc); color: var(--sa-violet-dark); border-color: var(--sa-blanc); }
/* Désactivé */
.sa-btn[disabled],
.sa-btn--off { background: var(--sa-violet-soft); color: var(--sa-disabled-txt); cursor: not-allowed; }
/* Focus clavier — anneau or */
.sa-btn:focus-visible {
  outline: 3px solid rgba(242, 166, 43, .6);
  outline-offset: 2px;
}

/* --- Lien « lire la suite » : violet souligné d'or -------------------- */
.sa-readmore,
.sa-lien-or {
  display: inline-block;
  font-family: var(--sa-font-titre);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--sa-violet);
  text-decoration: none;
  border-bottom: 2px solid var(--sa-or);
  padding-bottom: 2px;
}
.sa-readmore:hover,
.sa-lien-or:hover { color: var(--sa-violet-dark); }

/* --- Badges ----------------------------------------------------------- */
.sa-badge {
  display: inline-block;
  font-family: var(--sa-font-titre);
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.2;
  border-radius: var(--sa-radius-pill);
  padding: 7px 16px;
}
.sa-badge--or     { background: var(--sa-or); color: var(--sa-violet-dark); }
.sa-badge--violet { background: var(--sa-violet); color: var(--sa-blanc); }
.sa-badge--doux   { background: var(--sa-violet-pale); color: var(--sa-violet); }
.sa-badge--ligne  { background: transparent; border: 1.5px solid var(--sa-violet-tint); color: var(--sa-violet); padding: 6px 16px; }

/* --- Grille de cartes -------------------------------------------------- */
.sa-grid { display: grid; gap: var(--sa-s3); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .sa-grid--2, .sa-grid--3, .sa-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sa-grid--3 { grid-template-columns: repeat(3, 1fr); }
                             .sa-grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* --- Carte ------------------------------------------------------------ */
.sa-card {
  display: flex;
  flex-direction: column;
  background: var(--sa-blanc);
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-radius);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.sa-card:hover,
.sa-card:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--sa-shadow-hover);
}
.sa-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sa-violet-pale); }
.sa-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sa-card__body { padding: var(--sa-s3); display: flex; flex-direction: column; gap: 12px; flex: 1; }
.sa-card__sur {
  font-family: var(--sa-font-titre);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sa-violet);
}
.sa-card__title { font-family: var(--sa-font-titre); font-weight: 600; font-size: 1.25rem; line-height: 1.3; color: var(--sa-violet-dark); margin: 0; }
.sa-card__title a { color: inherit; text-decoration: none; }
.sa-card__title a:hover { color: var(--sa-violet); }
/* Titre limité à 2 lignes, tronqué proprement */
.sa-card__title,
.sa-card__title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sa-card__excerpt { font-size: var(--sa-fs-card); line-height: 1.6; color: var(--sa-muted); margin: 0; }
.sa-card__footer { margin-top: auto; padding-top: var(--sa-s1); }

/* Masques d'image issus des arcs du logo */
.sa-mask--arc-bl  { border-radius: var(--sa-radius-md) var(--sa-radius-md) var(--sa-radius-md) 64px; }
.sa-mask--arc-tl  { border-radius: 64px var(--sa-radius-md) var(--sa-radius-md) var(--sa-radius-md); }
.sa-mask--pill    { border-radius: var(--sa-radius-pill); }
.sa-mask--arc-g   { border-radius: 130px 0 0 130px; }

/* --- Carte chiffre (fond violet, chiffre or) -------------------------- */
.sa-stat-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--sa-violet);
  color: var(--sa-blanc);
  border-radius: var(--sa-radius);
  padding: var(--sa-s3);
}
.sa-stat-card__sur { font-family: var(--sa-font-titre); font-weight: 600; font-size: 0.75rem; letter-spacing: .1em; color: var(--sa-or); text-transform: uppercase; }
.sa-stat-card__value,
.sa-stat__value {
  font-family: var(--sa-font-titre);
  font-weight: 800;
  font-size: clamp(2.75rem, 6vw, 4rem);
  line-height: 1;
  color: var(--sa-or);
  margin: var(--sa-s2) 0 var(--sa-s1);
}
.sa-stat-card__label { font-size: 1.0625rem; line-height: 1.6; color: rgba(255, 255, 255, .86); margin: 0; }

/* Chiffre sur fond clair */
.sa-stat { text-align: left; }
.sa-stat--clair .sa-stat__value { color: var(--sa-violet-dark); }
.sa-stat__label { font-size: var(--sa-fs-card); line-height: 1.5; color: var(--sa-muted); margin: 0; }

/* --- Citation / témoignage -------------------------------------------- */
.sa-quote {
  background: var(--sa-blanc);
  border-radius: var(--sa-radius);
  border: 1px solid var(--sa-line);
  padding: var(--sa-s4);
  display: flex;
  flex-direction: column;
  gap: var(--sa-s3);
}
.sa-quote__text {
  font-family: var(--sa-font-titre);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.45;
  color: var(--sa-violet-dark);
  margin: 0;
}
.sa-quote__author { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.sa-quote__author img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.sa-quote__name { font-family: var(--sa-font-titre); font-weight: 600; font-size: var(--sa-fs-card); color: var(--sa-violet-dark); }
.sa-quote__role { font-size: 0.875rem; color: var(--sa-muted); }

/* --- Ligne avant / après (histoire de changement) --------------------- */
.sa-avant-apres { display: flex; align-items: center; gap: var(--sa-s3); }
.sa-avant-apres__bloc { flex: 1; }
.sa-avant-apres__lab { font-family: var(--sa-font-mono); font-size: var(--sa-fs-mono); letter-spacing: var(--sa-track-mono); color: var(--sa-mono-muted); display: block; margin-bottom: 4px; }
.sa-avant-apres__val { font-family: var(--sa-font-titre); font-weight: 700; font-size: 1.5rem; color: var(--sa-violet-dark); }
.sa-avant-apres__val--apres { color: var(--sa-or-dark); }
.sa-avant-apres__fleche { color: var(--sa-or); font-size: 1.5rem; line-height: 1; }

/* --- Étape numérotée (théorie du changement, objectifs) --------------- */
.sa-etape { display: flex; gap: var(--sa-s3); align-items: flex-start; }
.sa-etape__num {
  flex: none;
  font-family: var(--sa-font-titre);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--sa-or);
  min-width: 48px;
}
.sa-etape__titre { font-family: var(--sa-font-titre); font-weight: 600; font-size: var(--sa-fs-h3); color: var(--sa-violet-dark); margin: 0 0 6px; }
.sa-etape__desc { font-size: var(--sa-fs-card); line-height: 1.6; color: var(--sa-muted); margin: 0; }

/* --- Barre de répartition --------------------------------------------- */
.sa-barre { margin-bottom: var(--sa-s2); }
.sa-barre__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sa-s2); margin-bottom: var(--sa-s1); }
.sa-barre__label { font-family: var(--sa-font-titre); font-weight: 600; font-size: var(--sa-fs-card); color: var(--sa-violet-dark); }
.sa-barre__val { font-family: var(--sa-font-titre); font-weight: 700; font-size: var(--sa-fs-card); color: var(--sa-or-dark); }
.sa-barre__piste { height: 10px; background: var(--sa-violet-pale); border-radius: var(--sa-radius-pill); overflow: hidden; }
.sa-barre__jauge { height: 100%; background: var(--sa-violet); border-radius: var(--sa-radius-pill); transition: width .8s ease; }

/* --- Ligne de document téléchargeable --------------------------------- */
.sa-doc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sa-s3);
  background: var(--sa-blanc);
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-radius-md);
  padding: var(--sa-s3);
  text-decoration: none;
  min-height: var(--sa-tap);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.sa-doc:hover { border-color: var(--sa-or); box-shadow: var(--sa-shadow-card); }
.sa-doc__titre { font-family: var(--sa-font-titre); font-weight: 600; font-size: var(--sa-fs-card); color: var(--sa-violet-dark); display: block; }
.sa-doc__meta { font-family: var(--sa-font-mono); font-size: var(--sa-fs-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sa-mono-muted); }
.sa-doc__icone {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--sa-or);
  color: var(--sa-violet-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.125rem; font-weight: 700;
}

/* --- Filtres (puces cliquables) --------------------------------------- */
.sa-filtres { display: flex; flex-wrap: wrap; gap: var(--sa-s1); }
.sa-filtre {
  font-family: var(--sa-font-titre);
  font-weight: 600;
  font-size: 0.9375rem;
  border-radius: var(--sa-radius-pill);
  padding: 12px 22px;
  min-height: 44px;
  cursor: pointer;
  background: transparent;
  border: 1.5px solid var(--sa-violet-tint);
  color: var(--sa-violet);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.sa-filtre:hover { border-color: var(--sa-violet); }
.sa-filtre.is-actif,
.sa-filtre[aria-current="true"] { background: var(--sa-violet); border-color: var(--sa-violet); color: var(--sa-blanc); }

/* --- Champs de formulaire --------------------------------------------- */
.sa-champ {
  width: 100%;
  font-family: var(--sa-font-corps);
  font-size: 1.0625rem;
  color: var(--sa-texte);
  background: var(--sa-blanc);
  border: 1.5px solid var(--sa-line-form);
  border-radius: var(--sa-radius-sm);
  padding: 14px 16px;
  min-height: 52px;
}
.sa-champ::placeholder { color: var(--sa-placeholder); }
.sa-champ:focus { border: 2px solid var(--sa-violet); padding: 13px 15px; outline: none; }
.sa-champ--erreur { border-color: var(--sa-erreur); }
.sa-erreur-msg { font-size: 0.875rem; color: var(--sa-erreur); margin-top: var(--sa-s1); }
/* Prénom + Nom sur la même ligne */
.sa-champs-2 { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .sa-champs-2 { grid-template-columns: 1fr 1fr; } }

/* --- Sections violettes ------------------------------------------------ */
.sa-section-violet { background: var(--sa-violet); color: var(--sa-blanc); }
.sa-section-violet-dark { background: var(--sa-violet-dark); color: var(--sa-blanc); }
.sa-section-bg { background: var(--sa-bg); }

/* --- Motif d'arcs entrelacés (filigrane de marque) -------------------- */
.sa-arcs { position: relative; overflow: hidden; }
.sa-arcs > * { position: relative; z-index: 1; }
.sa-arcs::before,
.sa-arcs::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.sa-arcs::before {
  width: 620px; height: 620px;
  border: 1.5px solid rgba(242, 166, 43, .16);
  top: -260px; right: -180px;
}
.sa-arcs::after {
  width: 420px; height: 420px;
  border: 1px solid rgba(255, 255, 255, .14);
  bottom: -200px; left: -150px;
}
/* Variante sur fond clair */
.sa-arcs--clair::before { border-color: rgba(106, 35, 130, .14); }
.sa-arcs--clair::after  { border-color: rgba(242, 166, 43, .35); }

/* --- Séparateur -------------------------------------------------------- */
.sa-sep { height: 1px; background: var(--sa-line); border: 0; margin: var(--sa-s4) 0; }
.sa-sep--or { height: 3px; width: 90px; background: var(--sa-or); border-radius: 2px; }

/* --- Logos partenaires : gris par défaut, couleur au survol ----------- */
.sa-logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sa-s4); }
.sa-logos img {
  max-height: 56px; width: auto;
  filter: grayscale(1); opacity: .65;
  transition: filter .2s ease, opacity .2s ease;
}
.sa-logos img:hover { filter: grayscale(0); opacity: 1; }

/* --- Accessibilité ---------------------------------------------------- */
.sa-skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--sa-violet-dark); color: var(--sa-blanc);
  padding: 14px 22px; z-index: 9999; border-radius: 0 0 var(--sa-radius-sm) 0;
  font-family: var(--sa-font-titre); font-weight: 600;
}
.sa-skip-link:focus { left: 0; }
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .sa-card, .sa-btn, .sa-doc, .sa-barre__jauge, .sa-logos img { transition: none; }
}