/* ============================================================
   Page À propos (2026-10-16)
   Modele : auraconciergerie.com/a-propos. Grandes photos en moitie
   d'ecran, alternance craie / encre, titres en Fraunces (serif de la
   charte), apparitions au defilement, chiffres qui comptent.
   Charge seulement par /a-propos, apres styles.css.
   ============================================================ */

.ap-serif { font-family: "Fraunces", Georgia, serif; font-weight: 500; letter-spacing: -0.02em; }

/* fonds clairs : on rebascule les roles de couleur sur la section */
.ap-clair {
  --fond:       var(--craie);
  --fond-carte: var(--blanc);
  --texte:      var(--encre);
  --texte-2:    #475569;
  --accent:     var(--cobalt);
  --trait:      var(--bordure);
  background: var(--fond);
  color: var(--texte);
}

/* petit intitule en capitales au-dessus des titres (sans filet, 2026-10-16) */
.ap-filet {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
}

.ap-section { padding: 80px 0; position: relative; }
.ap-section h2, .ap-split h2 { font-size: 36px; line-height: 1.08; margin-bottom: 24px; }
.ap-intro { color: var(--texte-2); font-size: 18px; max-width: 42em; margin-bottom: 40px; }

/* ---------- 1. Ouverture ---------- */
.ap-ouverture { padding: 72px 0 80px; text-align: center; }
.ap-ouverture .ap-filet { justify-content: center; }
.ap-ouverture h1 { font-size: 44px; line-height: 1.04; margin: 0 auto 24px; max-width: 14em; }
.ap-chapo { color: var(--texte-2); font-size: 18px; max-width: 36em; margin: 0 auto; }

/* ---------- 2/3/5. Moitie texte, moitie photo ---------- */
.ap-split { display: grid; grid-template-columns: 1fr; }
.ap-split-texte { padding: 64px var(--marge); max-width: 640px; }
.ap-split-texte p { color: var(--texte-2); font-size: 17px; line-height: 1.65; }
.ap-split-photo { margin: 0; position: relative; min-height: 460px; overflow: hidden; }
/* mobile : la photo ouvre chaque bloc, pour alterner photo / texte sans deux photos collees */
.ap-split-photo { order: -1; }
.ap-split-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ap-split-photo figcaption {
  position: absolute;
  left: 20px;
  bottom: 20px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--craie);
  font-size: 14px;
  font-weight: 700;
}
.ap-inverse { background: var(--fond-relief); border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }

.ap-puces { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ap-puces li {
  border: 1px solid var(--trait);
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--texte);
  background: var(--fond-carte);
}

.ap-resultats { list-style: none; margin: 24px 0 28px; padding: 0; display: grid; gap: 10px; }
.ap-resultats li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 14px 18px;
  border-radius: var(--rayon);
  background: var(--fond-carte);
  border: 1px solid var(--trait);
  border-left: 3px solid var(--accent);
}
.ap-resultats span { color: var(--texte-2); font-size: 14px; font-weight: 700; }
.ap-resultats strong { color: var(--accent); font-size: 17px; white-space: nowrap; }

/* ---------- 6. Frise en cartes ---------- */
.ap-frise {
  list-style: none;
  margin: 8px 0 0;
  padding: 8px var(--marge) 16px;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.ap-frise li {
  flex: 0 0 240px;
  scroll-snap-align: start;
  background: var(--fond-carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 22px;
}
.ap-frise h3 { font-size: 17px; margin-bottom: 8px; }
.ap-frise p { color: var(--texte-2); font-size: 15px; margin: 0; }
.ap-annee { display: block; font-family: "Fraunces", Georgia, serif; font-size: 34px; font-weight: 600; color: var(--accent); line-height: 1; margin-bottom: 14px; }
.ap-frise .ap-frise-now { border-color: var(--accent); background: linear-gradient(160deg, rgba(77, 124, 255, 0.18), var(--fond-carte) 70%); }

/* ---------- 7. Seul, photo bureau ---------- */
.ap-seul { display: grid; grid-template-columns: 1fr; gap: 20px; }
.ap-seul-photo { margin: 0; position: relative; border-radius: var(--rayon); overflow: hidden; aspect-ratio: 4 / 5; }
.ap-seul-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-seul-photo figcaption {
  position: absolute; left: 16px; bottom: 16px; padding: 8px 14px; border-radius: 999px;
  background: rgba(15, 23, 42, 0.72); color: var(--craie); font-size: 14px; font-weight: 700;
}
.ap-seul-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; align-content: center; }
.ap-seul-points li { background: var(--fond-carte); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 24px 26px; }
.ap-seul-points h3 { font-size: 19px; margin-bottom: 8px; }
.ap-seul-points p { color: var(--texte-2); font-size: 16px; margin: 0; }

/* ---------- 8. Valeurs ---------- */
.ap-valeurs { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
.ap-valeurs li { border-top: 1px solid var(--trait); padding: 28px 0; }
.ap-num { display: block; font-family: "Fraunces", Georgia, serif; font-size: 44px; font-weight: 500; color: var(--accent); line-height: 1; margin-bottom: 16px; }
.ap-valeurs h3 { font-size: 20px; margin-bottom: 8px; }
.ap-valeurs p { color: var(--texte-2); font-size: 16px; margin: 0; }

/* ---------- 9. Engagements ---------- */
.ap-engagements { background: var(--fond-relief); border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.ap-chiffres { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 32px 20px; }
.ap-chiffres li { border-top: 2px solid var(--accent); padding-top: 18px; }
.ap-chiffres strong { display: block; font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: 48px; line-height: 1; letter-spacing: -0.03em; margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.ap-chiffres li > span { display: block; color: var(--texte-2); font-size: 15px; line-height: 1.4; }

/* ---------- 10. Villes ---------- */
.ap-villes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 16px; }
.ap-villes li { background: var(--fond-carte); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 22px 24px; }
.ap-villes span { display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texte-2); margin-bottom: 10px; }
.ap-villes h3 { font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: 24px; margin-bottom: 6px; }
.ap-villes p { color: var(--texte-2); font-size: 15px; margin: 0; }

/* ---------- 11. Suite de la visite ---------- */
.ap-suite { display: grid; grid-template-columns: 1fr; gap: 20px; }
.ap-carte {
  display: flex;
  flex-direction: column;
  background: var(--fond-carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  overflow: hidden;
  color: var(--texte);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.ap-carte:hover { border-color: var(--accent); transform: translateY(-3px); }
.ap-carte img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.ap-carte-corps { display: flex; flex-direction: column; gap: 8px; padding: 24px; }
.ap-carte-corps .ap-filet { margin: 0; }
.ap-carte strong { font-size: 24px; line-height: 1.15; }
.ap-carte-texte { color: var(--texte-2); font-size: 16px; }
.ap-carte-lien { margin-top: 6px; font-weight: 700; color: var(--accent); }

/* ---------- 12. Appel final ---------- */
.ap-final { padding: 96px 0; text-align: center; border-top: 1px solid var(--trait); }
.ap-final h2 { font-size: 36px; line-height: 1.1; margin-bottom: 16px; }
.ap-final p { color: var(--texte-2); font-size: 18px; max-width: 32em; margin: 0 auto 28px; }
.ap-final .ap-final-mail { font-size: 15px; margin: 20px auto 0; }
.ap-final-mail a { color: var(--accent); }

/* ---------- Apparitions (seulement si le script a pose .ap-anime) ---------- */
.ap-anime .ap-apparait { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.ap-anime .ap-apparait.ap-visible { opacity: 1; transform: none; }
.ap-anime .ap-frise li:nth-child(2), .ap-anime .ap-valeurs li:nth-child(2), .ap-anime .ap-villes li:nth-child(2), .ap-anime .ap-seul-points li:nth-child(2) { transition-delay: 0.08s; }
.ap-anime .ap-frise li:nth-child(3), .ap-anime .ap-valeurs li:nth-child(3), .ap-anime .ap-villes li:nth-child(3), .ap-anime .ap-seul-points li:nth-child(3) { transition-delay: 0.16s; }
.ap-anime .ap-valeurs li:nth-child(4), .ap-anime .ap-villes li:nth-child(4) { transition-delay: 0.24s; }

/* ============================================================
   Tablette
   ============================================================ */
@media (min-width: 700px) {
  .ap-ouverture h1 { font-size: 58px; }
  .ap-section h2, .ap-split h2, .ap-final h2 { font-size: 44px; }
  .ap-valeurs { grid-template-columns: 1fr 1fr; gap: 0 32px; }
  .ap-chiffres { grid-template-columns: repeat(4, 1fr); }
  .ap-villes { grid-template-columns: 1fr 1fr; }
  .ap-suite { grid-template-columns: 1fr 1fr; }
  .ap-frise li { flex-basis: 260px; }
}

/* ============================================================
   Desktop : vraies moities d'ecran, photo collee pendant la lecture
   ============================================================ */
@media (min-width: 1000px) {
  .ap-ouverture { padding: 112px 0 120px; }
  .ap-ouverture h1 { font-size: 76px; }
  .ap-section { padding: 120px 0; }
  .ap-section h2, .ap-split h2, .ap-final h2 { font-size: 52px; }

  .ap-split { grid-template-columns: 1fr 1fr; min-height: 780px; }
  .ap-split-texte { align-self: center; justify-self: end; padding: 120px 72px 120px var(--marge); max-width: 640px; }
  .ap-inverse .ap-split-texte { justify-self: start; padding: 120px var(--marge) 120px 72px; }
  .ap-split-photo { min-height: 100%; order: 0; }


  /* la frise tient sur une ligne : plus de defilement */
  .ap-frise { max-width: var(--max); margin: 8px auto 0; overflow: visible; display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; }
  .ap-frise li { padding: 20px 16px; }
  .ap-annee { font-size: 28px; }
  .ap-frise h3 { font-size: 15px; }
  .ap-frise p { font-size: 14px; }

  .ap-seul { grid-template-columns: 5fr 7fr; gap: 32px; }
  .ap-valeurs { grid-template-columns: repeat(4, 1fr); gap: 0 28px; }
  .ap-chiffres strong { font-size: 72px; }
}

@media (max-width: 479px) {
  .ap-puces { grid-template-columns: 1fr; }
  .ap-resultats li { flex-direction: column; gap: 4px; }
  .ap-chiffres strong { font-size: 40px; }
}

/* ============================================================
   « Concretement » (2026-10-16) : ce que je livre, un exemple,
   le prix, les outils, ce que je ne fais pas. Ajoute apres une
   relecture a froid : un inconnu ne comprenait pas le metier.
   ============================================================ */
.ap-inverse-fond { background: var(--fond-relief); border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }

.ap-concret, .ap-infos { display: grid; grid-template-columns: 1fr; gap: 16px; }
.ap-infos { margin-top: 16px; }
.ap-bloc { background: var(--fond-carte); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 26px 26px 24px; }
.ap-bloc h3 { font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: 22px; margin-bottom: 14px; }
.ap-bloc p { color: var(--texte-2); font-size: 16px; line-height: 1.6; }
.ap-bloc p:last-child { margin-bottom: 0; }

.ap-exemple { border-left: 3px solid var(--accent); }
.ap-exemple-label { font-size: 12px !important; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte-2); margin: 0 0 6px; }
.ap-exemple-apres { color: var(--accent) !important; margin-top: 18px; }
.ap-lien { display: inline-block; margin-top: 6px; font-weight: 700; color: var(--accent); text-decoration: none; }
.ap-lien:hover { text-decoration: underline; }

.ap-coches { list-style: none; margin: 0 0 18px; padding: 0; }
.ap-coches li { position: relative; padding: 0 0 0 28px; margin-bottom: 10px; font-size: 16px; color: var(--texte); }
.ap-coches li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 800; }
.ap-coches li:last-child { color: var(--texte-2); font-style: italic; }
.ap-agences { border-top: 1px solid var(--trait); padding-top: 16px; font-size: 15px !important; }
.ap-agences a { color: var(--accent); font-weight: 700; text-decoration: none; white-space: nowrap; }

.ap-resultats li { flex-wrap: wrap; }
.ap-resultats span { flex: 1 1 14em; }

@media (min-width: 700px) {
  .ap-concret { grid-template-columns: 1fr 1fr; gap: 20px; }
  .ap-infos { grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
}
@media (min-width: 1000px) {
  .ap-villes { grid-template-columns: repeat(3, 1fr); }
  .ap-bloc { padding: 32px 32px 28px; }
}

/* deux metiers cote a cote, et les paliers de prix (2026-10-16) */
.ap-metiers { display: grid; grid-template-columns: 1fr; gap: 8px 24px; }
.ap-metiers .ap-coches { margin-bottom: 8px; }
.ap-coches li:last-child { color: var(--texte); font-style: normal; }
.ap-agences { font-style: italic; }
.ap-paliers { list-style: none; margin: 0 0 16px; padding: 0; }
.ap-paliers li { padding: 10px 0; border-bottom: 1px solid var(--trait); }
.ap-paliers li:first-child { padding-top: 0; }
.ap-paliers strong { display: block; color: var(--texte); font-size: 17px; margin-bottom: 2px; }
.ap-paliers span { color: var(--texte-2); font-size: 15px; line-height: 1.5; }
@media (min-width: 700px) { .ap-metiers { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .ap-ouverture h1 { font-size: 62px; max-width: 15em; } }
@media (min-width: 1000px) { .ap-concret { grid-template-columns: 1fr 1.3fr; } }

/* telephone (2026-10-16) : aucun enfant de grille ne doit imposer sa largeur
   (la page debordait de 44 px), et les cartes de resultats s'empilent
   sans etirement */
.ap-split > *, .ap-concret > *, .ap-infos > *, .ap-seul > *, .ap-villes > *, .ap-suite > * { min-width: 0; }
@media (max-width: 479px) {
  .ap-resultats span { flex: none; }
  .ap-resultats strong { white-space: normal; }
  .ap-filet { letter-spacing: 0.1em; flex-wrap: wrap; }
}