/*
 * Refonte — rubriques de l'accueil.
 * 1) Présentation : texte + axes à gauche, collage de 3 photos + carte logo à droite.
 * 2) Notre mission : bande sombre pleine largeur, photo fondue à gauche, texte à droite.
 * 3) Nos objectifs : fond clair, texte à gauche, photo encadrée à droite.
 * Utilise les variables --aj-* de header.css et les animations de animations.css
 * (classe .is-revealed posée à l'apparition). Couleurs existantes uniquement.
 */

.aj-about {
  padding-top: 96px;
  overflow: hidden;
  background: var(--blanc);
  font-family: var(--font-interface);
  color: var(--texte-fort);
}

/* ---------- Texte riche (Mission, Objectifs, repli) ---------- */

.aj-about__rich {
  font-size: 16px;
  line-height: 1.7;
}

.aj-about__rich p {
  margin: 0 0 var(--space-4);
  text-align: left !important; /* ignore l'alignement saisi dans l'éditeur */
}

.aj-about__rich > :last-child { margin-bottom: 0; }

.aj-about__rich > p:first-child {
  padding-left: var(--space-4);
  border-left: 3px solid var(--vert-action);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6;
}

.aj-about__rich ul {
  margin: var(--space-5) 0;
  padding: 0;
  list-style: none !important;
}

.aj-about__rich ul:first-child { margin-top: 0; }

.aj-about__rich li {
  position: relative;
  min-height: 36px;
  padding: 6px 0 0 52px;
  font-weight: 500;
  line-height: 1.55;
  text-align: left !important;
}

.aj-about__rich li + li { margin-top: var(--space-4); }

.aj-about__rich li::first-letter { text-transform: uppercase; }

.aj-about__rich li::before {
  content: "\f26e"; /* bootstrap-icons : check-lg, déjà chargé par le site */
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(25, 135, 84, 0.12);
  font-family: "bootstrap-icons";
  font-size: 16px;
  line-height: 1;
  color: var(--vert-action);
}

/* Version sur fond sombre */
.aj-about__rich--clair { color: rgba(255, 255, 255, 0.85); }
.aj-about__rich--clair > p:first-child { color: var(--blanc); }
.aj-about__rich--clair li { color: var(--blanc); }
.aj-about__rich--clair li::before { background: rgba(255, 255, 255, 0.12); color: var(--blanc); }

/* ---------- 1) Présentation ---------- */

.aj-pres {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 72px;
  align-items: center;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-8) 112px;
}

.aj-pres__title {
  margin: 0 0 var(--space-5);
  font-family: var(--font-titres);
  font-size: 2.5rem; /* 40px, comme « Adhésion service + » (charte.css, .groupe-tuiles .section-title) */
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--rouge-action);
}

.aj-pres__intro {
  margin: 0 0 var(--space-8);
  font-size: 17px;
  line-height: 1.7;
}

.aj-pres__axes {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin: 0 0 var(--space-8);
  padding: 0;
  list-style: none;
}

.aj-pres__axe {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.aj-pres__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(25, 135, 84, 0.12);
  color: var(--vert-action);
  font-size: 20px;
}

.aj-pres__axe-text {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
}

.aj-pres__axe-text::first-letter { text-transform: uppercase; }

.aj-pres__note {
  margin: 0;
  padding-left: var(--space-4);
  border-left: 3px solid var(--vert-action);
  font-size: 15px;
  line-height: 1.7;
  color: var(--rcf-gris);
}

/* Collage en escalier (comme la maquette) : chaque image en position absolue, en % du cadre.
   A : grande, en haut à gauche ; B : portrait à droite, plus bas, devant A ;
   C : en bas à gauche, devant A ; carte logo : au centre-bas, devant B. Liseré blanc entre les images. */
.aj-pres__collage {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 600 / 660;
  margin-left: auto;
}

.aj-pres__photo {
  position: absolute;
  display: block;
  object-fit: cover;
  border-radius: 22px;
}

.aj-pres__photo--a { left: 6%; top: 0; width: 52%; height: 58%; z-index: 1; }

.aj-pres__photo--b {
  left: 56%;
  top: 16%;
  width: 41%;
  height: 59%;
  z-index: 2;
  border: 6px solid var(--blanc);
  object-position: center top;
}

.aj-pres__photo--c {
  left: 0;
  top: 48%;
  width: 43%;
  height: 47%;
  z-index: 3;
  border: 6px solid var(--blanc);
}

/* Carte du logo (à la place du « 98 % » de la maquette) */
.aj-pres__badge {
  position: absolute;
  left: 44%;
  top: 63%;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38%;
  height: 29%;
  border-radius: 22px;
  background: var(--blanc);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1);
}

.aj-pres__badge img {
  display: block;
  height: 66%;
  width: auto;
}

/* La carte du logo arrive avec un petit rebond */
.aj-anim .aj-pres__badge[data-aj-reveal] {
  transform: scale(0.7) translateY(20px);
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- 2) Bande sombre (Notre mission) ---------- */

.aj-band {
  position: relative;
  overflow: hidden;
  background: var(--texte-fort);
  color: var(--blanc);
}

.aj-band__photo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 56%;
  -webkit-mask-image: linear-gradient(to right, #000 50%, transparent 100%);
  mask-image: linear-gradient(to right, #000 50%, transparent 100%);
}

.aj-band__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 1600ms var(--aj-reveal-ease, ease);
}

.aj-band__photo.is-revealed img,
html:not(.aj-anim) .aj-band__photo img { transform: none; }

/* Trame de points à droite */
.aj-band__dots {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 38%;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1.4px, transparent 1.7px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(to left, #000 20%, transparent 100%);
  mask-image: linear-gradient(to left, #000 20%, transparent 100%);
}

.aj-band__inner {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 104px var(--space-8);
}

.aj-band__text {
  width: 46%;
  margin-left: auto;
}

.aj-band__title {
  margin: 0 0 var(--space-5);
  font-family: var(--font-titres);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--blanc);
}

/* ---------- 3) Nos objectifs : fond clair, texte à gauche, statue encadrée à droite ---------- */

.aj-frame { background: var(--fond-teinte); }

.aj-frame__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 96px var(--space-8);
}

.aj-frame__title {
  margin: 0 0 var(--space-6);
  font-family: var(--font-titres);
  font-size: 2.5rem; /* 40px, comme « Adhésion service + » */
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--rouge-action);
}

.aj-frame__visual {
  /* Bord droit aligné sur le conteneur : même ligne que « Voir plus » et la dernière carte des actualités */
  width: 100%;
}

/* Liste de « Nos objectifs » un peu plus grande */
.aj-frame .aj-about__rich { font-size: 18px; }
.aj-frame .aj-about__rich li { padding-top: 4px; line-height: 1.55; }

/* Composition « statue + 4 encadrés », reprise de l'image fournie (mêmes tons dorés que l'image) */
.aj-scales {
  --aj-scales-ligne: #d6cc9a;
  --aj-scales-titre: #a8915a;

  position: relative;
  width: 100%;
  aspect-ratio: 820 / 560;
  min-height: 360px;
}

.aj-scales__statue {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  width: auto;
  max-width: 62%;
  object-fit: contain;
  object-position: bottom;
  /* l'image garde 6,44 % de marge transparente à droite : on la décale pour que la balance touche le bord du conteneur */
  transform: translateX(6.44%);
  -webkit-mask-image: linear-gradient(to bottom, #000 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 85%, transparent 100%);
}

.aj-scales__arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.aj-scales__arrows path {
  fill: none;
  stroke: var(--aj-scales-ligne);
  stroke-width: 2;
  stroke-dasharray: 3 6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* Encadré : cadre fin doré, icône dans un carré posé sur le bord haut */
.aj-scales__box {
  position: absolute;
  width: 34%;
  padding: 34px 12px 16px;
  border: 1.5px solid var(--aj-scales-ligne);
  background: rgba(255, 255, 255, 0.85);
  text-align: center;
}

.aj-scales__box--0 { left: 0; top: 20%; }
.aj-scales__box--1 { left: 0; top: 61%; }

.aj-scales__icon {
  position: absolute;
  top: -22px;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--aj-scales-ligne);
  background: var(--blanc);
  color: var(--texte-fort);
  font-size: 20px;
  transform: translateX(-50%);
}

.aj-scales__label {
  margin: 0;
  font-family: var(--font-titres);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--aj-scales-titre);
}

/* Animations : la statue monte, les encadrés arrivent depuis leur côté, puis les flèches apparaissent */
.aj-anim .aj-scales__statue { opacity: 0; transform: translate(6.44%, 24px); transition: opacity 900ms ease 200ms, transform 900ms var(--aj-reveal-ease) 200ms; }
.aj-anim .aj-scales__box { opacity: 0; transition: opacity 700ms ease, transform 700ms var(--aj-reveal-ease); }
.aj-anim .aj-scales__box { transform: translateX(-24px); }
.aj-anim .aj-scales__box--0 { transition-delay: 450ms; }
.aj-anim .aj-scales__box--1 { transition-delay: 600ms; }
.aj-anim .aj-scales__arrows { opacity: 0; transition: opacity 800ms ease 900ms; }

.aj-anim .is-revealed .aj-scales__statue { opacity: 1; transform: translateX(6.44%); }
.aj-anim .is-revealed .aj-scales__box { opacity: 1; transform: none; }
.aj-anim .is-revealed .aj-scales__arrows { opacity: 1; }

/* ---------- Tablette ---------- */

@media (max-width: 991.98px) {
  .aj-about { padding-top: 72px; }

  .aj-pres {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    padding: 0 var(--space-6) 88px;
  }

  .aj-pres__collage { margin: 0 auto; }

  .aj-band__photo {
    position: relative;
    width: 100%;
    height: 320px;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  }

  .aj-band__dots { width: 60%; }

  .aj-band__inner { margin-top: -48px; padding: 0 var(--space-6) 72px; }
  .aj-band__text { width: auto; }

  .aj-frame__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    padding: 72px var(--space-6);
  }

}

/* ---------- Mobile ---------- */

@media (max-width: 767.98px) {
  /* « Nos objectifs » : statue en haut, encadrés en grille 2 × 2 dessous, sans flèches */
  .aj-scales {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px var(--space-3);
    aspect-ratio: auto;
    min-height: 0;
  }

  .aj-scales__statue {
    position: relative;
    right: auto;
    grid-column: 1 / -1;
    justify-self: center;
    height: 240px;
    max-width: none;
    margin-bottom: var(--space-2);
    transform: none;
  }

  .aj-anim .aj-scales__statue { transform: translateY(24px); }
  .aj-anim .is-revealed .aj-scales__statue { transform: none; }

  .aj-scales__arrows { display: none; }

  .aj-scales__box { position: relative; inset: auto; width: auto; }

  .aj-frame .aj-about__rich { font-size: 17px; }

  .aj-about { padding-top: 56px; }

  .aj-pres { padding: 0 var(--space-4) 72px; }
  .aj-pres__title { font-size: 1.75rem; } /* 28px */
  .aj-pres__intro { font-size: 16px; }

  .aj-pres__photo,
  .aj-pres__badge { border-radius: 16px; }
  .aj-pres__photo--b,
  .aj-pres__photo--c { border-width: 4px; }

  .aj-band__photo { height: 240px; }
  .aj-band__inner { padding: 0 var(--space-4) 56px; }
  .aj-band__title,
  .aj-frame__title { font-size: 28px; }

  .aj-frame__inner { padding: 56px var(--space-4); }
}