/* ========== SECTION PARIS PROS ========== */

/* Structure de base du résumé (fermé) */
#paris-pros details > summary.expander-summary {
  position: relative;
  display: block;
  list-style: none;
  padding: 14px 16px;
  padding-right: 9.5rem; /* espace réservé au bouton */
  cursor: pointer;
}
#paris-pros details > summary.expander-summary::-webkit-details-marker { display: none; }
#paris-pros details > summary.expander-summary::marker { content: ""; }

/* Texte à gauche */
#paris-pros .expander-summary > .teaser {
  margin: 0;
  text-align: left;
  line-height: 1.45;
}
#paris-pros .teaser > strong { display:block; font-size:1.4rem; font-weight:700; margin-bottom:.3rem; }
#paris-pros .teaser > span   { display:block; font-size:1rem;   font-weight:400; }

/* Bouton fermé : à droite, centré verticalement */
#paris-pros .expander-summary > .expander-cta {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  min-width: 110px;
}

/* --- Quand le bloc est ouvert --- */
#paris-pros details[open] {
  position: relative;
}
#paris-pros details[open] > summary.expander-summary {
  padding-right: 16px; /* retire l’espace car bouton ne flotte plus ici */
}

/* place le bouton en bas droite */
#paris-pros details[open] > summary.expander-summary > .expander-cta {
  position: absolute;
  bottom: 16px;
  right: 16px;
  top: auto;
  transform: none;
  z-index: 3;
}

/* ajoute l’espace nécessaire pour le bouton */
#paris-pros details[open] .expander-content {
  position: relative;
  padding: 0 16px 64px;
}

/* Mobile : remet le bouton dans le flux */
@media (max-width:640px) {
  #paris-pros details > summary.expander-summary { padding-right: 16px; }
  #paris-pros .expander-summary > .expander-cta {
    position: static;
    transform: none;
    margin-top: .75rem;
  }
}
/* ── PARIS PROS — bouton collé en bas-droite quand OUVERT ───────────────── */
#paris-pros details.expander { position: relative !important; }

/* le résumé redevient 'static' -> le bouton peut se positionner sur <details> */
#paris-pros details.expander[open] > summary.expander-summary {
  position: static !important;
  padding-right: 16px !important; /* plus d’espace réservé ici */
}

/* le bouton n'est plus sur le résumé : on l’ancre au bas-droite du <details> */
#paris-pros details.expander[open] .expander-cta {
  position: absolute !important;
  right: 16px !important;
  bottom: 16px !important;
  top: auto !important;
  transform: none !important;
  z-index: 3 !important;
}

/* on réserve la place pour éviter tout chevauchement */
#paris-pros details.expander[open] .expander-content {
  position: relative !important;
  padding: 0 16px 22px !important;   /* 72px ≈ hauteur bouton + marge */
}
/* =========================================================
   SECTIONS — PARIS FORMATION / SANTÉ / MOBILITÉ / PARIS 8
   Même structure et design que #paris-pros
   ========================================================= */

/* structure du résumé (fermé) */
#paris-formation details > summary.expander-summary,
#paris-sante      details > summary.expander-summary,
#paris-mobilite   details > summary.expander-summary,
#paris-8          details > summary.expander-summary {
  position: relative;
  display: block;
  list-style: none;
  padding: 14px 16px;
  padding-right: 9.5rem; /* réserve l’espace pour le bouton à droite */
  cursor: pointer;
}
#paris-formation details > summary.expander-summary::-webkit-details-marker,
#paris-sante      details > summary.expander-summary::-webkit-details-marker,
#paris-mobilite   details > summary.expander-summary::-webkit-details-marker,
#paris-8          details > summary.expander-summary::-webkit-details-marker { display:none; }
#paris-formation details > summary.expander-summary::marker,
#paris-sante      details > summary.expander-summary::marker,
#paris-mobilite   details > summary.expander-summary::marker,
#paris-8          details > summary.expander-summary::marker { content:""; }

/* double ligne de teaser (grand + normal) */
#paris-formation .teaser > strong,
#paris-sante .teaser > strong,
#paris-mobilite .teaser > strong,
#paris-8 .teaser > strong {
  display:block;
  font-size:1.4rem;
  font-weight:700;
  margin-bottom:.3rem;
}
#paris-formation .teaser > span,
#paris-sante .teaser > span,
#paris-mobilite .teaser > span,
#paris-8 .teaser > span {
  display:block;
  font-size:1rem;
  font-weight:400;
}

/* bouton fermé : aligné à droite, centré verticalement */
#paris-formation .expander-summary > .expander-cta,
#paris-sante .expander-summary > .expander-cta,
#paris-mobilite .expander-summary > .expander-cta,
#paris-8 .expander-summary > .expander-cta {
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  margin:0;
  min-width:110px;
}

/* état ouvert : bouton collé en bas-droite + padding bas pour le texte */
#paris-formation details[open],
#paris-sante details[open],
#paris-mobilite details[open],
#paris-8 details[open] {
  position:relative;
}
#paris-formation details[open] > summary.expander-summary,
#paris-sante      details[open] > summary.expander-summary,
#paris-mobilite   details[open] > summary.expander-summary,
#paris-8          details[open] > summary.expander-summary {
  position:static;
  padding-right:16px;
}
#paris-formation details[open] .expander-cta,
#paris-sante      details[open] .expander-cta,
#paris-mobilite   details[open] .expander-cta,
#paris-8          details[open] .expander-cta {
  position:absolute;
  right:16px;
  bottom:16px;
  top:auto;
  transform:none;
  z-index:3;
}
#paris-formation details[open] .expander-content,
#paris-sante      details[open] .expander-content,
#paris-mobilite   details[open] .expander-content,
#paris-8          details[open] .expander-content {
  position:relative;
  padding:0 16px 72px; /* réserve de place pour le bouton */
}

/* mobile : remet le bouton dans le flux */
@media (max-width:640px) {
  #paris-formation details > summary.expander-summary,
  #paris-sante      details > summary.expander-summary,
  #paris-mobilite   details > summary.expander-summary,
  #paris-8          details > summary.expander-summary { padding-right:16px; }

  #paris-formation .expander-summary > .expander-cta,
  #paris-sante      .expander-summary > .expander-cta,
  #paris-mobilite   .expander-summary > .expander-cta,
  #paris-8          .expander-summary > .expander-cta {
    position:static;
    transform:none;
    margin-top:.75rem;
  }
}
/* Met en italique uniquement le texte d’intro de la section “Paris Pros” */
.section-paris-pros .pp-intro-text {
  font-style: italic;
}