/*
 * Sympa — about.css
 *
 * Styles de la page « À propos » (page-a-propos.php).
 * Chargé uniquement sur cette page via wp_enqueue_style conditionnel.
 *
 * Toutes les classes sont préfixées « .s-about » pour ne pas polluer
 * le reste du site. Les sections sont ajoutées au fil de la phase 6.
 */


/* ── Hero ─────────────────────────────────────────────────────────── */

/* En-tête de la page : overline + titre + accroche. */
.s-about-hero {
  padding-top:    var(--sympa-space-16);  /* 64px */
  padding-bottom: var(--sympa-space-6);   /*  24px */
}

/* L'overline « À propos » porte sa propre marge basse. */
.s-about-hero__overline {
  margin-bottom: var(--sympa-space-3);    /* 12px */
}

/* Titre principal — plus gros que .s-h1 global (48/56 contre 44/52). */
.s-about-hero__title {
  font: 700 48px/56px var(--sympa-font-sans);
  letter-spacing: -0.02em;
  color: var(--sympa-ink-900);
  margin: 0 0 var(--sympa-space-5);       /* 20px */
}

/* Accroche d'introduction — équivalent .s-body-lg, teinte ink-600. */
.s-about-hero__lead {
  font: 400 18px/28px var(--sympa-font-sans);
  color: var(--sympa-ink-600);
  margin: 0;
}


/* ── Largeur de lecture étendue sur la page À propos ─────────────── */

/* La maquette élargit la zone de lecture à 760px (vs 680px standard) ET
   la centre horizontalement dans .s-container — par défaut .s-reading est
   aligné à gauche, donc sur grand écran le contenu apparaîtrait poussé
   à gauche avec un grand vide à droite. Le margin auto rétablit le
   centrage, et le max-width assure que le contenu reste lisible peu
   importe la taille de la fenêtre (rétrécit sur mobile, plafonne à
   760px sur desktop). */
.s-about .s-reading {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}


/* ── Sections courantes (post-hero) ──────────────────────────────── */

/* Espacement vertical des sections : 32px haut, 48px bas. */
.s-about-section {
  padding-top:    var(--sympa-space-8);   /* 32px */
  padding-bottom: var(--sympa-space-12);  /* 48px */
}

/* Typo locale des sections. La maquette pousse l'encre plus foncée et
   le line-height un peu plus généreux que les classes utilitaires
   globales (.s-h2 / .s-body) — d'où ces règles dédiées au contexte. */
.s-about-section h2 {
  font: 700 32px/40px var(--sympa-font-sans);
  letter-spacing: -0.01em;
  color: var(--sympa-ink-900);
  margin: 0 0 var(--sympa-space-4);       /* 16px */
}
.s-about-section p {
  font: 400 16px/26px var(--sympa-font-sans);
  color: var(--sympa-ink-700);
  margin: 0 0 14px;
}
.s-about-section p.lead {
  font: 400 18px/30px var(--sympa-font-sans);
  color: var(--sympa-ink-600);
}


/* ── Grille de 3 piliers (Gratuit · Honnête · Concret) ───────────── */

.s-about-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sympa-space-4);              /* 16px */
  margin-top: 28px;                       /* hors échelle — valeur maquette */
  margin-bottom: var(--sympa-space-2);    /*  8px */
}

.s-about-pillar {
  background: var(--sympa-surface);       /* blanc cassé des content cards */
  border: 1px solid var(--sympa-line-soft);
  border-radius: var(--sympa-radius-lg);  /* 12px */
  padding: 22px;                          /* hors échelle — valeur maquette */
}
.s-about-pillar__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--sympa-radius-md);  /*  8px */
  background: var(--sympa-brand-50);
  color: var(--sympa-brand-600);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;                    /* hors échelle — valeur maquette */
}
.s-about-pillar__title {
  font: 600 16px/22px var(--sympa-font-sans);
  color: var(--sympa-ink-900);
  margin: 0 0 6px;                        /* hors échelle — valeur maquette */
}
.s-about-pillar__text {
  font: 400 14px/22px var(--sympa-font-sans);
  color: var(--sympa-ink-500);
  margin: 0;
}


/* ── Variante : section sans padding haut ────────────────────────── */

/* Pour les sections qui s'enchaînent visuellement sans rupture — le
   padding bas de la section précédente assure déjà l'espacement. */
.s-about-section--flush-top {
  padding-top: 0;
}


/* ── Promise card — engagement « pas de bullshit » ───────────────── */

/* Carte indigo pleine couleur, posée dans le flux de lecture. */
.s-about-promise {
  background: var(--sympa-brand-600);
  color: #fff;
  border-radius: var(--sympa-radius-xl);  /* 16px */
  padding: var(--sympa-space-8);          /* 32px */
  margin: var(--sympa-space-3) 0 var(--sympa-space-2);  /* 12px ↑ · 8px ↓ */
}

.s-about-promise__title {
  font: 700 22px/30px var(--sympa-font-sans);
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 var(--sympa-space-4);       /* 16px */
}

.s-about-promise__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.s-about-promise__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sympa-space-3);              /* 12px */
  font: 400 15px/24px var(--sympa-font-sans);
  color: #fff;
  opacity: 0.96;
  margin-bottom: var(--sympa-space-3);    /* 12px */
}
.s-about-promise__list li:last-child {
  margin-bottom: 0;
}

/* Puce « check » : cercle blanc translucide + icône SVG inline.
   On utilise un data-URI plutôt qu'un <i data-lucide> pour éviter une
   dépendance JS sur chaque puce (et pour que la puce existe même sans
   Lucide chargé). */
.s-about-promise__list li::before {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 8 7 11 12 5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
  flex-shrink: 0;
  margin-top: 4px;
}


/* ── Séparateur partie 1 / partie 2 ──────────────────────────────── */

/* Filet d'1px très discret entre la section « pas de bullshit » et le
   bio header — marque visuellement le changement de sujet (le site → moi). */
.s-about-divider {
  padding-top:    var(--sympa-space-6);  /* 24px */
  padding-bottom: var(--sympa-space-6);  /* 24px */
}
.s-about-divider__line {
  height: 1px;
  background: var(--sympa-line-soft);
}


/* ── Variante de section : padding plus serré ────────────────────── */

/* Pour la bio (24/32 au lieu du 32/48 par défaut). */
.s-about-section--tight {
  padding-top:    var(--sympa-space-6);  /* 24px */
  padding-bottom: var(--sympa-space-8);  /* 32px */
}

/* Marge basse de l'overline quand il introduit une section (pas le hero). */
.s-about-section__overline {
  margin-bottom: var(--sympa-space-3);   /* 12px */
}


/* ── Bio header — photo + nom + rôle + tags ──────────────────────── */

/* Grille 2 colonnes : photo (140px) + bloc info (1fr). */
.s-about-bio {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 28px;                              /* hors échelle — valeur maquette */
  align-items: center;
  margin: var(--sympa-space-4) 0 var(--sympa-space-6);  /* 16 ↑ · 24 ↓ */
}

/* Photo (ou placeholder initiales) : disque indigo pâle cerclé d'encre.
   Le « overflow:hidden » permettra de basculer en <img> plus tard sans
   toucher au layout. */
.s-about-bio__photo {
  width: 140px;
  height: 140px;
  border-radius: var(--sympa-radius-full);
  background: var(--sympa-brand-50);
  border: 1.5px solid var(--sympa-ink-900);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sympa-brand-600);
  font: 700 56px/1 var(--sympa-font-sans);
  letter-spacing: -0.02em;
}

/* Petit libellé « Photo à insérer » sous le disque tant que l'image
   n'a pas été ajoutée. Remplacé par <img class="s-about-bio__photo-img">
   le moment venu (et le span supprimé). */
.s-about-bio__photo-note {
  position: absolute;
  bottom: -22px;                          /* hors échelle — valeur maquette */
  left: 0;
  right: 0;
  text-align: center;
  font: 500 10px/14px var(--sympa-font-sans);
  letter-spacing: 0.02em;
  color: var(--sympa-ink-300);
  text-transform: uppercase;
}

.s-about-bio__name {
  font: 700 28px/36px var(--sympa-font-sans);
  letter-spacing: -0.01em;
  color: var(--sympa-ink-900);
  margin: 0 0 var(--sympa-space-1);       /*  4px */
}
.s-about-bio__role {
  font: 500 14px/20px var(--sympa-font-sans);
  color: var(--sympa-brand-600);
  letter-spacing: 0.02em;
  margin: 0 0 var(--sympa-space-3);       /* 12px */
}
.s-about-bio__tags {
  display: flex;
  gap: var(--sympa-space-2);              /*  8px (maquette: 6) */
  flex-wrap: wrap;
}


/* ── Intro de section (paragraphe sous le H2) ────────────────────── */

/* Quand un paragraphe d'intro vient juste après le H2 et précède un
   bloc lourd (timeline, grille…), il a besoin d'une marge basse plus
   franche que les paragraphes courants. */
.s-about-section__intro {
  margin-bottom: var(--sympa-space-6);    /* 24px */
}


/* ── Timeline parcours ───────────────────────────────────────────── */

/* Liste verticale avec filet d'1px (en réalité 2px) qui relie les
   dots. Le filet est en pseudo-élément ::before sur la liste — il
   reste centré sur les dots peu importe le nombre d'items. */
.s-about-timeline {
  list-style: none;
  position: relative;
  margin: var(--sympa-space-2) 0 var(--sympa-space-6);  /* 8 ↑ · 24 ↓ */
  padding: 0 0 0 28px;                    /* aligne le contenu sur les dots */
}

.s-about-timeline::before {
  content: '';
  position: absolute;
  left: 7px;                              /* aligné sur le centre du dot 16px */
  top:    var(--sympa-space-2);           /*  8px */
  bottom: var(--sympa-space-2);
  width: 2px;
  background: var(--sympa-line-soft);
}

.s-about-timeline__item {
  position: relative;
  padding-bottom: var(--sympa-space-6);   /* 24px */
}
.s-about-timeline__item:last-child {
  padding-bottom: 0;
}

/* Dot : disque indigo 16px, cerclé d'une bordure « papier » qui masque
   le filet sous le dot + halo brand-200 d'1px pour adoucir la couture. */
.s-about-timeline__dot {
  position: absolute;
  left: -28px;                            /* aligne le centre sur le filet */
  top: var(--sympa-space-1);              /*  4px (sous le baseline du year) */
  width: 16px;
  height: 16px;
  border-radius: var(--sympa-radius-full);
  background: var(--sympa-brand-600);
  border: 3px solid var(--sympa-paper);
  box-shadow: 0 0 0 1px var(--sympa-brand-200);
}

.s-about-timeline__year {
  font: 600 12px/18px var(--sympa-font-sans);
  color: var(--sympa-brand-600);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--sympa-space-1);    /*  4px */
}
.s-about-timeline__role {
  font: 600 16px/22px var(--sympa-font-sans);
  color: var(--sympa-ink-900);
  margin: 0 0 var(--sympa-space-1);       /*  4px */
}
.s-about-timeline__org {
  font: 500 14px/20px var(--sympa-font-sans);
  color: var(--sympa-ink-500);
  margin: 0 0 6px;                        /* hors échelle — valeur maquette */
}
.s-about-timeline__desc {
  font: 400 14px/22px var(--sympa-font-sans);
  color: var(--sympa-ink-500);
  margin: 0;
}


/* ── Centres d'intérêt — grille 2 colonnes ───────────────────────── */

.s-about-interests {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;                              /* hors échelle — valeur maquette */
  margin: var(--sympa-space-2) 0;         /* 8 ↑ ↓ */
}

/* Carte centre d'intérêt : disposition horizontale icône + texte. */
.s-about-interest {
  background: var(--sympa-surface);
  border: 1px solid var(--sympa-line-soft);
  border-radius: var(--sympa-radius-lg);  /* 12px */
  padding: 18px;                          /* hors échelle — valeur maquette */
  display: flex;
  align-items: flex-start;
  gap: 14px;                              /* hors échelle — valeur maquette */
}
.s-about-interest__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--sympa-radius-md);  /*  8px */
  background: var(--sympa-brand-50);
  color: var(--sympa-brand-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* min-width:0 force le bloc texte à respecter la largeur de la grille,
   sinon un mot long pourrait casser la grille en 2 colonnes. */
.s-about-interest__body {
  min-width: 0;
}
.s-about-interest__title {
  font: 600 15px/22px var(--sympa-font-sans);
  color: var(--sympa-ink-900);
  margin: 0 0 2px;                        /* hors échelle — valeur maquette */
}
.s-about-interest__text {
  font: 400 13px/20px var(--sympa-font-sans);
  color: var(--sympa-ink-500);
  margin: 0;
}


/* ── Variante section : padding bas élargi (dernière section) ────── */

/* La dernière section avant le footer respire plus largement (80 au
   lieu de 48) — la maquette fait pareil. */
.s-about-section--last {
  padding-bottom: var(--sympa-space-20); /* 80px */
}


/* ── Contact card + grille de liens ──────────────────────────────── */

.s-about-contact {
  background: var(--sympa-surface);
  border: 1px solid var(--sympa-line-soft);
  border-radius: var(--sympa-radius-xl);  /* 16px */
  padding: var(--sympa-space-8);          /* 32px */
  margin: var(--sympa-space-4) 0 var(--sympa-space-2);  /* 16 ↑ · 8 ↓ */
}

/* En-tête de la carte : pastille mail indigo + libellé court. */
.s-about-contact__header {
  display: flex;
  align-items: center;
  gap: 14px;                              /* hors échelle — valeur maquette */
}
.s-about-contact__header-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--sympa-radius-full);
  background: var(--sympa-brand-600);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.s-about-contact__header-title {
  font: 600 16px/22px var(--sympa-font-sans);
  color: var(--sympa-ink-900);
}
.s-about-contact__header-sub {
  font: 400 14px/20px var(--sympa-font-sans);
  color: var(--sympa-ink-500);
}

/* Sous-grille des 4 liens de contact. */
.s-about-contact__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sympa-space-3);              /* 12px */
  margin-top: var(--sympa-space-5);       /* 20px */
}

/* Lien individuel : pastille indigo + libellé + valeur.
   Effet hover discret : passe en brand-50, bordure brand-200, soulève d'1px. */
.s-about-contact__link {
  display: flex;
  align-items: center;
  gap: 14px;                              /* hors échelle */
  padding: 14px 16px;                     /* hors échelle */
  border-radius: 10px;                    /* hors échelle */
  background: var(--sympa-paper);
  border: 1px solid var(--sympa-line-soft);
  text-decoration: none;
  color: inherit;
  transition: background   var(--sympa-dur-sm) var(--sympa-ease-out),
              border-color var(--sympa-dur-sm) var(--sympa-ease-out),
              transform    var(--sympa-dur-sm) var(--sympa-ease-out);
}
.s-about-contact__link:hover {
  background: var(--sympa-brand-50);
  border-color: var(--sympa-brand-200);
  transform: translateY(-1px);
}
.s-about-contact__link-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--sympa-radius-md);  /* 8px */
  background: var(--sympa-brand-600);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* min-width:0 sur le bloc texte pour laisser l'email casser proprement
   (sans le min-width:0, la grille ne ferait pas wrap le texte long). */
.s-about-contact__link-info {
  min-width: 0;
}
.s-about-contact__link-label {
  font: 500 12px/16px var(--sympa-font-sans);
  color: var(--sympa-ink-400);
  letter-spacing: 0.02em;
  margin-bottom: 2px;                     /* hors échelle */
}
.s-about-contact__link-value {
  font: 600 14px/20px var(--sympa-font-sans);
  color: var(--sympa-ink-900);
  word-break: break-all;
}

/* CTA centré sous la carte contact. */
.s-about-contact-cta {
  margin-top: var(--sympa-space-6);       /* 24px */
  display: flex;
  justify-content: center;
}


/* ── Responsive ───────────────────────────────────────────────────── */

@media (max-width: 900px) {

  /* Sous 900px, on bascule les piliers en une seule colonne — la
     maquette desktop pose la même règle. */
  .s-about-pillars {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {

  .s-about-hero__title {
    font-size: 32px;
    line-height: 40px;
  }

  .s-about-section h2 {
    font-size: 24px;
    line-height: 32px;
  }

  /* Carte indigo plus compacte en mobile. */
  .s-about-promise {
    padding: 22px;                        /* hors échelle — valeur maquette */
  }

  /* Bio en colonne unique, contenu centré. */
  .s-about-bio {
    grid-template-columns: 1fr;
    gap: 18px;                            /* hors échelle — valeur maquette */
    text-align: center;
  }
  .s-about-bio__photo {
    margin: 0 auto;
  }
  .s-about-bio__tags {
    justify-content: center;
  }

  /* Centres d'intérêt en une seule colonne. */
  .s-about-interests {
    grid-template-columns: 1fr;
  }

  /* Carte contact plus compacte, grille des liens en colonne unique. */
  .s-about-contact {
    padding: 22px;                        /* hors échelle — valeur maquette */
  }
  .s-about-contact__grid {
    grid-template-columns: 1fr;
  }
}