/**
 * CBS Theme — variantes d'affichage de la colonne « missions » (bloc cbs-tableau-comparatif).
 *
 * Le gabarit d'origine (.offre-phases__grid + .phase-card) reste la variante « cartes ».
 * Deux gabarits plus denses sont proposés ici, pour les pages qui empilent plusieurs
 * listes de missions et où les grandes cartes allongent trop la page :
 *   - « compact » : une ligne par mission, icône + libellé, 2 colonnes ;
 *   - « liste »   : puces à filet doré, jusqu'à 3 colonnes, le plus dense.
 *
 * Les deux réutilisent la section .offre-phases (fond silver-900, en-tête, chapô).
 * Tokens uniquement, aucune couleur en dur hors filets déjà employés par .phase-card.
 */

/* =================== bloc Phases : mises en page alternatives ============== */

/* --- « Lignes pleine largeur » : titre à gauche, texte à droite ----------- */

.offre-phases__wide {
  display: flex;
  flex-direction: column;
}

.module-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cbs-space-4) var(--cbs-space-12);
  margin: 0;
  padding: var(--cbs-space-10) 0;
  border-top: 1px solid color-mix(in srgb, var(--cbs-gold-warm) 15%, transparent);
}

.module-row:first-child {
  border-top: 0;
  padding-top: 0;
}

@media (min-width: 900px) {
  .module-row {
    grid-template-columns: minmax(14rem, 1fr) 2fr;
  }
}

.module-row__icon {
  display: flex;
  margin: 0 0 var(--cbs-space-4);
  color: var(--cbs-gold);
}

.module-row__icon svg {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
}

.module-row__num {
  margin: 0 0 var(--cbs-space-2);
  font-family: var(--cbs-font-sans);
  font-size: var(--cbs-text-xs);
  font-weight: 500;
  letter-spacing: var(--cbs-tracking-wider);
  text-transform: uppercase;
  color: var(--cbs-gold);
  opacity: 0.6;
}

.module-row__title {
  margin: 0;
  font-family: var(--cbs-font-serif);
  font-size: var(--cbs-text-h3);
  font-weight: 600;
  line-height: var(--cbs-leading-snug);
  color: var(--cbs-white);
}

.module-row__soustitre {
  margin: var(--cbs-space-2) 0 0;
  font-family: var(--cbs-font-sans);
  font-size: var(--cbs-text-small);
  line-height: var(--cbs-leading-snug);
  color: var(--cbs-silver-400);
}

.module-row__intro {
  margin: 0;
  font-family: var(--cbs-font-sans);
  font-size: var(--cbs-text-body);
  line-height: var(--cbs-leading-relaxed);
  color: var(--cbs-silver-300);
}

/* Intitulé optionnel au-dessus de la liste (« Prestations incluses », « Étapes »,
   « Modules disponibles » du brief). Absent = liste sans intitulé, comme avant. */
.module-row__list-label,
.module-acc__list-label,
.phase-card__list-label {
  /* .phase-card__list est masquée par défaut (cards.css) et n'apparaît qu'avec
     le modificateur .offre-phases--details : l'intitulé suit la même règle. */
  margin: var(--cbs-space-4) 0 var(--cbs-space-2);
  font-family: var(--cbs-font-sans);
  font-size: var(--cbs-text-xs);
  font-weight: 600;
  letter-spacing: var(--cbs-tracking-wider);
  text-transform: uppercase;
  color: var(--cbs-gold);
}

.module-row__list-label + .module-row__list,
.module-acc__list-label + .module-acc__list,
.phase-card__list-label + .phase-card__list {
  margin-top: 0;
}

.module-row__list {
  margin: var(--cbs-space-4) 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--cbs-font-sans);
  font-size: var(--cbs-text-small);
  line-height: var(--cbs-leading-relaxed);
  color: var(--cbs-silver-400);
}

.module-row__list li {
  margin: 0 0 var(--cbs-space-2);
}

.module-row__list li::before {
  content: "—";
  margin-right: 0.5em;
  color: var(--cbs-gold);
}

.module-row__livrables {
  margin: var(--cbs-space-5) 0 0;
  padding-top: var(--cbs-space-4);
  border-top: 1px solid color-mix(in srgb, var(--cbs-gold-warm) 20%, transparent);
  font-family: var(--cbs-font-sans);
  font-size: var(--cbs-text-xs);
  line-height: var(--cbs-leading-relaxed);
  color: var(--cbs-silver-500);
}

/* --- « Accordéon » : <details>/<summary> natifs, sans JavaScript ---------- */

.offre-phases__accordion {
  display: flex;
  flex-direction: column;
}

.module-acc {
  border-bottom: 1px solid color-mix(in srgb, var(--cbs-gold-warm) 15%, transparent);
}

.module-acc__summary {
  display: flex;
  align-items: center;
  gap: var(--cbs-space-4);
  padding: var(--cbs-space-5) 0;
  cursor: pointer;
  list-style: none;
}

.module-acc__summary::-webkit-details-marker {
  display: none;
}

.module-acc__summary:focus-visible {
  outline: 2px solid var(--cbs-gold);
  outline-offset: 4px;
}

.module-acc__icon {
  display: flex;
  flex: 0 0 auto;
  color: var(--cbs-gold);
}

.module-acc__icon svg {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
}

.module-acc__num {
  flex: 0 0 auto;
  font-family: var(--cbs-font-sans);
  font-size: var(--cbs-text-xs);
  font-weight: 500;
  letter-spacing: var(--cbs-tracking-wide);
  text-transform: uppercase;
  color: var(--cbs-gold);
  opacity: 0.6;
}

.module-acc__title {
  flex: 1 1 auto;
  font-family: var(--cbs-font-serif);
  font-size: var(--cbs-text-h4);
  font-weight: 600;
  line-height: var(--cbs-leading-snug);
  color: var(--cbs-white);
}

.module-acc__chevron {
  flex: 0 0 auto;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 1px solid var(--cbs-gold);
  border-bottom: 1px solid var(--cbs-gold);
  transform: rotate(45deg);
  transition: transform var(--cbs-transition-base);
}

.module-acc[open] .module-acc__chevron {
  transform: rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {
  .module-acc__chevron {
    transition: none;
  }
}

.module-acc__body {
  padding: 0 0 var(--cbs-space-8);
  max-width: 60rem;
}

.module-acc__intro {
  margin: 0;
  font-family: var(--cbs-font-sans);
  font-size: var(--cbs-text-body);
  line-height: var(--cbs-leading-relaxed);
  color: var(--cbs-silver-300);
}

.module-acc__list {
  margin: var(--cbs-space-4) 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--cbs-font-sans);
  font-size: var(--cbs-text-small);
  line-height: var(--cbs-leading-relaxed);
  color: var(--cbs-silver-400);
}

.module-acc__list li {
  margin: 0 0 var(--cbs-space-2);
}

.module-acc__list li::before {
  content: "—";
  margin-right: 0.5em;
  color: var(--cbs-gold);
}

.module-acc__livrables {
  margin: var(--cbs-space-5) 0 0;
  padding-top: var(--cbs-space-4);
  border-top: 1px solid color-mix(in srgb, var(--cbs-gold-warm) 20%, transparent);
  font-family: var(--cbs-font-sans);
  font-size: var(--cbs-text-xs);
  line-height: var(--cbs-leading-relaxed);
  color: var(--cbs-silver-500);
}

/* ------------------------------- sous-points et livrables des cartes phases */

/*
 * cards.css pose `display: none` sur .phase-card__list et .phase-card__livrables,
 * sans jamais les réafficher : le contenu saisi dans « Sous-points » et
 * « Livrables » est présent dans le HTML mais invisible sur tout le site.
 * Le modificateur ci-dessous, activé par la case « Afficher les sous-points et
 * les livrables » du bloc Phases, les rend visibles au cas par cas.
 */
.offre-phases--details .phase-card__list,
.offre-phases--details .phase-card__list-label,
.offre-phases--details .phase-card__livrables {
  display: block;
}

/* ---------------------------------------------------------------- compact */

.offre-phases__rows {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--cbs-space-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .offre-phases__rows {
    grid-template-columns: repeat(2, 1fr);
  }
}

.mission-row {
  display: flex;
  align-items: center;
  gap: var(--cbs-space-4);
  margin: 0;
  padding: var(--cbs-space-4) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--cbs-gold-warm) 15%, transparent);
}

.mission-row__icon {
  display: flex;
  flex: 0 0 auto;
  color: var(--cbs-gold);
}

.mission-row__icon svg {
  display: block;
  width: 1.375rem;
  height: 1.375rem;
}

.mission-row__num {
  flex: 0 0 auto;
  font-family: var(--cbs-font-sans);
  font-size: var(--cbs-text-xs);
  font-weight: 500;
  letter-spacing: var(--cbs-tracking-wide);
  color: var(--cbs-gold);
  opacity: 0.6;
}

.mission-row__label {
  margin: 0;
  font-family: var(--cbs-font-sans);
  font-size: var(--cbs-text-body);
  font-weight: 400;
  line-height: var(--cbs-leading-snug);
  color: var(--cbs-white);
}

/* ------------------------------------------------------------------ liste */

.offre-phases__bullets {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cbs-space-4) var(--cbs-space-10);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .offre-phases__bullets {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .offre-phases__bullets {
    grid-template-columns: repeat(3, 1fr);
  }
}

.mission-bullet {
  position: relative;
  margin: 0;
  padding-left: var(--cbs-space-6);
  font-family: var(--cbs-font-sans);
  font-size: var(--cbs-text-small);
  line-height: var(--cbs-leading-relaxed);
  color: var(--cbs-silver-200);
}

.mission-bullet::before {
  content: "";
  position: absolute;
  top: 0.75em;
  left: 0;
  width: 0.75rem;
  height: 1px;
  background-color: var(--cbs-gold);
}