/* Pages métier – compléments au design system (site.css) et au premier écran de l'accueil (home.css, chargé avant).
   Aucune couleur hors tokens, aucune ombre, aucun dégradé. */

/* Premier écran : la photo du métier (4:5) à côté des garanties, sous la promesse ; le simulateur à droite */
.metier-more { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: var(--sp-8); align-items: center; }
.metier-photo { margin: 0; }
.metier-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); }
.metier-more .check-list { margin-bottom: var(--sp-5); }
.metier-hero .hero-copy .lead { text-wrap: pretty; }

/* Exemples de loyers : quatre équipements types */
.metier-examples .section-head { margin-bottom: var(--sp-6); }
.eq-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); list-style: none; margin: 0; padding: 0; }
.eq-card { display: flex; flex-direction: column; max-width: none; }
.eq-card h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-1); }
.eq-price { color: var(--ink-3); margin: 0 0 var(--sp-4); font-variant-numeric: tabular-nums; }
.eq-card .card-example { margin: 0 0 var(--sp-3); }
.eq-simulate { margin-top: auto; align-self: flex-start; min-height: 44px; padding: 0; border: 0; background: none; font: 600 1rem/1.3 var(--font-body); cursor: pointer; text-align: left; }
.eq-simulate:hover { text-decoration: underline; }

/* Questions fréquentes (grille de l'accueil) et liens vers les autres métiers */
.metier-faq .accordion { border-top: 1px solid var(--line); }
.metier-nav { margin-top: var(--sp-10); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.metier-nav .metier-links { margin: 0; }
@media (min-width: 768px) { .metier-faq { padding: var(--sp-12) 0; } }

@media (max-width: 1023px) {
  .eq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metier-more { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: var(--sp-6); }
}
@media (max-width: 767px) {
  /* Mobile : promesse, simulateur, puis la photo à côté des garanties */
  .metier-more { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--sp-4); align-items: start; }
  .metier-more .check-list { gap: var(--sp-2); }
  .metier-more .check-list li { font-size: var(--fs-small); line-height: var(--lh-small); padding-left: 30px; }
  .metier-more .check-list li::before { width: 20px; height: 20px; background-size: 20px; }
  /* Cibles tactiles de 44 px : liens sous le bouton du simulateur et des questions */
  .metier-more .link-arrow, .metier-faq .link-arrow { min-height: 44px; }
  .metier-hero .sim-foot a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
  .metier-hero .sim-foot { gap: 0; }
  .eq-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  /* Cartes compactes : équipement et prix à gauche, loyer à droite */
  .eq-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-3); padding: var(--sp-4) var(--sp-5) var(--sp-2); }
  .eq-card h3 { grid-column: 1 / -1; }
  .eq-card .eq-price { grid-column: 1; margin: 0; align-self: center; }
  .eq-card .card-example { grid-column: 2; margin: 0; text-align: right; display: block; }
  .eq-card .card-example strong { display: block; font-size: 1rem; }
  .eq-card .card-example-base { display: block; }
  .eq-card .eq-simulate { grid-column: 1 / -1; margin-top: var(--sp-1); }
  .metier-nav { margin-top: var(--sp-8); }
}