.hero-compact { padding: 64px 0 48px; }

.site-types-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* repli si aucune classe .cols-N */
  gap: 24px;
  align-items: start;   /* .hauteur-egale ci-dessous passe à stretch */
}

/* Nombre de colonnes et alignement des formules : des classes, pas du style
   en ligne — le CSP du site bloque les attributs style="" (cf. gotchas). */
.site-types-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.site-types-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.site-types-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.site-types-grid.hauteur-egale { align-items: stretch; }

.site-type-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  position: relative;
  transition: all 0.3s ease;
}

.site-type-card:hover {
  border-color: var(--blue);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.site-type-featured {
  border-color: var(--blue);
  box-shadow: var(--shadow-md);
}

.site-type-badge-top {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--blue);
  color: white;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 14px;
  border-radius: 20px;
  white-space: nowrap;
}

.site-type-icon {
  width: 56px;
  height: 56px;
  background: var(--blue-light);
  color: var(--blue);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 14px;
}

/* Palette qui tourne sur les badges d'icône, pour éviter le "tout bleu"
   monotone des glyphes Tabler (contrairement aux emoji de la page Services,
   nativement colorés). S'applique aux formules et aux grilles deliverable. */
.site-type-card:nth-child(4n+2) .site-type-icon,
.deliverable-card:nth-child(4n+2) .deliverable-icon {
  background: #f3e8fd;
  color: #7c3aed;
}
.site-type-card:nth-child(4n+3) .site-type-icon,
.deliverable-card:nth-child(4n+3) .deliverable-icon {
  background: #fef3e2;
  color: #d97706;
}
.site-type-card:nth-child(4n+4) .site-type-icon,
.deliverable-card:nth-child(4n+4) .deliverable-icon {
  background: #e6f7f5;
  color: #0d9488;
}

.site-type-card h3 {
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text);
}

.site-type-card p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 16px;
}

.feature-list { list-style: none; margin-bottom: 20px; }

.feature-list li {
  font-size: 14px;
  color: var(--text);
  padding: 5px 0;
  padding-left: 18px;
  position: relative;
}

.feature-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--blue);
  font-weight: 700;
}

.site-type-badge {
  display: inline-block;
  background: var(--blue-light);
  color: var(--blue);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 20px;
}

/* Tarifs — prix d'une formule (grande carte) */
.site-type-price {
  font-family: var(--font-title);
  font-size: 28px;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 14px;
}
.site-type-price .site-type-price-periode {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
}

/* Offre — variante "liste à coche" (reprise du brief : pas de cartes
   bordées pour "Toujours inclus" / "Sans surprise", juste une liste). */
.offre-liste-wrap { padding: 8px 0; }
.offre-liste {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 32px;
}
.offre-liste li {
  position: relative;
  padding-left: 24px;
}
.offre-liste li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--blue);
  font-weight: 700;
}
.offre-liste li strong { display: block; font-size: 14px; color: var(--text); }
.offre-liste-desc { display: block; font-size: 13px; color: var(--text-muted); margin-top: 2px; }

.offre-liste-encadree {
  background: var(--blue-light);
  border-radius: var(--radius-lg);
  padding: 32px;
}

@media (max-width: 780px) {
  .offre-liste { grid-template-columns: 1fr; }
}

/* Texte libre — blocs d'argumentaire en prose, pas en grille de cartes */
.texte-libre-wrap { max-width: 760px; margin: 0 auto; }
.texte-libre-item { padding: 28px 0; border-bottom: 1px solid var(--border); }
.texte-libre-item:last-child { border-bottom: none; }

/* Variante "mise en avant" (badge=populaire sur l'item) : encadré jaune
   repris du brief, pour un passage qu'on veut faire ressortir plutôt
   qu'empiler comme le reste. */
.texte-libre-item.texte-libre-avant {
  background: var(--yellow-bg);
  border: none;
  border-left: 3px solid var(--yellow);
  border-radius: var(--radius-md);
  padding: 20px 24px;
}
.texte-libre-item.texte-libre-avant h3 { color: #a07800; }

/* Variante 2 colonnes : côte à côte avec un filet vertical entre elles,
   plutôt qu'empilées avec un filet horizontal. */
.texte-libre-colonnes {
  max-width: 980px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 40px;
}
.texte-libre-colonnes .texte-libre-item {
  border-bottom: none;
  padding: 0;
}
.texte-libre-colonnes .texte-libre-item:nth-child(even) {
  border-left: 1px solid var(--yellow);
  padding-left: 40px;
}
.texte-libre-item h3 {
  font-family: var(--font-title);
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
}
.texte-libre-item p { font-size: 15px; color: var(--text-muted); line-height: 1.75; }

/* Tarifs — groupe d'options (petites cartes sous les formules) */
.tarifs-groupe-titre {
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 40px 0 16px;
  text-align: center;
}
.tarifs-groupe-titre:first-child { margin-top: 0; }

/* Process */
.process-steps {
  display: flex;
  align-items: flex-start;   /* repli si aucune classe .align-xxx (ne devrait pas arriver) */
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.process-steps.align-haut   { align-items: flex-start; }
.process-steps.align-centre { align-items: center; }
.process-steps.align-bas    { align-items: flex-end; }

.process-step {
  flex: 1;
  min-width: 180px;
  max-width: 240px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 20px;
  text-align: center;
}

.process-num {
  font-family: var(--font-title);
  font-size: 36px;
  font-weight: 800;
  color: var(--blue);
  opacity: 0.25;
  line-height: 1;
  margin-bottom: 12px;
}
/* Même palette tournante que les badges d'icône, posée en classe par PHP
   (process.index % 4) plutôt qu'en nth-child CSS — les flèches entre les
   étapes sont aussi des éléments de la liste et fausseraient le compte. */
.process-num.num-c0 { color: var(--blue); }
.process-num.num-c1 { color: #7c3aed; }
.process-num.num-c2 { color: #d97706; }
.process-num.num-c3 { color: #0d9488; }

.process-step h3 {
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text);
}

.process-step p { font-size: 13px; color: var(--text-muted); line-height: 1.6; }

.process-arrow {
  font-size: 24px;
  color: var(--blue);
  opacity: 0.4;
  flex-shrink: 0;
  margin-top: 24px;   /* repère visuel à hauteur du numéro d'étape, cartes alignées en haut */
}

/* FAQ */
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  text-align: left;
  transition: background var(--transition);
}

.faq-question:hover { background: var(--bg-section); }

.faq-question[aria-expanded="true"] { color: var(--blue); }

.faq-icon {
  font-size: 20px;
  font-weight: 300;
  color: var(--blue);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.faq-question[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }

.faq-answer {
  padding: 0 20px 18px;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
}

@media (max-width: 780px) {
  /* !important : le nombre de colonnes de bureau vient d'un style en ligne
     (réglage admin), donc plus spécifique qu'une règle de classe — sans ça,
     le choix "4 colonnes" résisterait à cette bascule mobile en 1 colonne. */
  .site-types-grid { grid-template-columns: 1fr !important; }
  /* En colonne, align-items ne règle plus le haut/bas des cartes (sens
     bureau) mais leur centrage horizontal — le réglage haut/centre/bas
     choisi pour le bureau n'a plus de sens ici, donc centré, point final. */
  .process-steps { flex-direction: column !important; align-items: center !important; }
  .process-arrow { transform: rotate(90deg); }
  .texte-libre-colonnes { grid-template-columns: 1fr !important; }
  .texte-libre-colonnes .texte-libre-item:nth-child(even) { border-left: none; padding-left: 0; }
}

.deliverables-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.deliverable-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  text-align: center;
  transition: all 0.3s ease;
}

.deliverable-card:hover { border-color: var(--blue); box-shadow: var(--shadow-md); transform: translateY(-3px); }

.deliverable-icon {
  width: 48px;
  height: 48px;
  background: var(--blue-light);
  color: var(--blue);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 12px;
}

.deliverable-card h3 { font-family: var(--font-title); font-size: 16px; font-weight: 600; margin-bottom: 8px; color: var(--text); }

.deliverable-card p { font-size: 13px; color: var(--text-muted); line-height: 1.6; }

.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }