/* Page /a-propos/ - reprend le rythme visuel et les tokens de home.css (.about-*),
   dans un fichier dédié car cette page n'a pas vocation à charger home.css. */

.ap-main { overflow-x: hidden; }

.ap-intro {
  position: relative;
  overflow: hidden;
  background: var(--color-surface);
  /* Le header est maintenant en position: fixed (pilule flottante, shared.css) - il
     ne pousse plus le contenu qui suit dans le flux. +80px sur le padding-top d'origine
     (64px) = même clearance que scroll-padding-top (shared.css). */
  padding: 144px 32px 64px;
  text-align: center;
}
/* Touche visuelle derrière le H1 : reprend le procédé des halos flous colorés déjà
   utilisé sur .about-diff-band (home.css) et .hero-mark-halo, mêmes couleurs de
   marque, pour que le titre ne soit pas juste du texte plat sur fond uni. */
.ap-intro::before,
.ap-intro::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}
.ap-intro::before {
  width: clamp(200px, 24vw, 340px);
  aspect-ratio: 1;
  top: -20%;
  left: 6%;
  background: #378ADD;
  opacity: 0.16;
  filter: blur(clamp(40px, 5vw, 70px));
}
.ap-intro::after {
  width: clamp(220px, 26vw, 360px);
  aspect-ratio: 1;
  bottom: -30%;
  right: 8%;
  background: #3D5A73;
  opacity: 0.14;
  filter: blur(clamp(44px, 5vw, 75px));
}
.ap-intro h1 {
  position: relative;
  z-index: 1;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2.8rem, 6vw, 4.2rem);
  letter-spacing: -0.01em;
  color: var(--color-primary);
  margin: 0;
}
.ap-intro-accent {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 4px;
  margin: 24px auto 0;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
}

/* Pas de photo en ouverture : mise en valeur typographique du premier paragraphe
   (lettrine + filet d'accent), sans image. */
.ap-lede {
  max-width: 680px;
  margin: 56px auto 0;
  padding: 0 32px 88px;
  text-align: left;
}
.ap-lede-accent {
  width: 48px;
  height: 3px;
  margin-bottom: 28px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
}
.ap-lede p {
  color: var(--color-text);
  font-size: 1.08rem;
  line-height: 1.65;
  margin: 0 0 20px;
}
/* Lettrine sur le tout premier paragraphe : remplace l'image hero par une touche
   éditoriale purement typographique, dans la police de titre. */
.ap-lede p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 3.6em;
  line-height: 0.82;
  margin: 0.02em 0.1em 0 0;
  color: var(--color-primary);
}
.ap-lede p:last-child { margin-bottom: 0; font-weight: 600; color: var(--color-primary); }

.ap-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px;
}

.ap-section { margin-top: 96px; }
.ap-section h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--color-primary);
  margin-bottom: 32px;
}

.ap-section--text { max-width: 680px; }
.ap-section--text p {
  color: var(--color-text);
  font-size: 1.02rem;
  line-height: 1.65;
  margin: 0 0 18px;
}
.ap-section--text p:last-child { margin-bottom: 0; }

/* Alternance texte/image, calquée sur .about-row de home.css */
.ap-row {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}
.ap-row--reverse { grid-template-columns: 0.9fr 1.1fr; }
.ap-row--reverse .ap-row-text { order: 2; }
.ap-row--reverse .ap-row-media { order: 1; }
.ap-row-text p {
  color: var(--color-text);
  font-size: 1.02rem;
  line-height: 1.65;
  max-width: 46ch;
  margin: 0 0 18px;
}
.ap-row-text p:last-child { margin-bottom: 0; }
.ap-row-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
  border-radius: 16px;
  display: block;
  box-shadow: 0 20px 40px rgba(30, 40, 50, 0.16);
}
/* about-soin.webp est un cadrage 3:2 recadré en 4:5 : le sujet (les deux figurines)
   est décalé à gauche du centre de la photo, un recadrage centré coupait une partie
   du brancard. On recentre le crop sur le sujet plutôt que sur le centre de l'image. */
.ap-row-media.ap-row-media--soin img { object-position: 32% center; }

/* Badge coche (refonte du 03/09/2026, demande de Louis) : plus de carte
   rectangulaire (fond + ombre) - juste un contour circulaire vert autour de
   l'icône, même esprit que .ap-row-media--logo juste en dessous (cercle,
   pas de carte). Vert fixe (pas un token partagé --color-success-* : usage
   ponctuel, décoratif, pas un statut réutilisé ailleurs sur le site). */
.ap-row-media--badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 260px);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  border: 3px solid #2e9e4f;
}
.ap-row-media.ap-row-media--badge svg {
  width: 82%;
  height: auto;
  filter: drop-shadow(0 18px 26px rgba(55, 138, 221, 0.3));
}

/* Logo : cercle blanc avec ombre portée (plutôt qu'une carte rectangulaire), taille
   plafonnée pour ne pas s'étirer dans une colonne de grid large. Fond blanc fixe
   (#fff, pas var(--color-bg)) : le wordmark a un fill fixe #3D5A73, il doit rester
   lisible même si la page passait un jour en thème sombre. */
.ap-row-media--logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 300px);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 20px 44px rgba(30, 40, 50, 0.22);
}
.ap-row-media.ap-row-media--logo img {
  width: 56%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
}

/* Récit fondateur : blockquote sémantique, filet latéral + fond contrasté */
.ap-quote {
  margin: 0;
  padding: 32px 36px;
  background: var(--color-surface);
  border-left: 3px solid var(--color-accent);
  border-radius: 4px;
}
.ap-quote p {
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 1.15rem;
  line-height: 1.6;
  margin: 0 0 18px;
}
.ap-quote p:last-of-type { margin-bottom: 20px; }
.ap-quote cite {
  display: block;
  font-style: normal;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-muted);
}

.ap-footnote {
  max-width: 680px;
  margin-top: 20px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-primary);
}

.ap-closing { padding-bottom: 96px; }
.ap-closing p a { font-weight: 600; }

/* Révélation au scroll, appliquée aux trois blocs .ap-row-media (logo, badge,
   photo "Où nous voulons aller") : entièrement en progressive enhancement. Par
   défaut (pas de classe) chaque bloc est visible, donc un navigateur sans JS ou en
   échec de script les affiche normalement. Le script en fin de page ajoute
   .ap-anim-init au chargement (ce qui les masque), puis .is-visible quand chacun
   entre dans le viewport. */
.ap-reveal.ap-anim-init {
  opacity: 0;
  transform: translateY(24px) scale(0.96);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.ap-reveal.ap-anim-init.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (max-width: 860px) {
  .ap-row,
  .ap-row--reverse { grid-template-columns: 1fr; }
  .ap-row-media { order: -1; }
  .ap-row-media img { aspect-ratio: 16/9; }
  .ap-row-media--badge { width: min(60%, 220px); }
  .ap-row-media--logo { width: min(60%, 220px); }
  .ap-intro { padding: 128px 20px 48px; }
  .ap-lede { padding: 0 20px 56px; }
  .ap-section { margin-top: 64px; }
}