/* Le catalogue reste intégralement visible, avec ou sans JavaScript. */
.services { background: #f3efea; border-block: 1px solid #e8dfd7; }
.services .titre-section { margin-bottom: 28px; }
.reperes-services { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.reperes-services a { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; padding: 9px 14px; border: 1px solid #cdb7ac; border-radius: 30px; font-size: 13px; font-weight: 600; background: #fcfaf7; }
.reperes-services a span { color: var(--terre); font-size: 16px; }
.reperes-services a:hover { border-color: var(--terre); color: var(--terre); }
.offres-grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.offre { grid-column: span 3; display: flex; flex-direction: column; min-width: 0; padding: 24px; border: 1px solid #e2d5ca; border-radius: 20px; background: #fffefa; scroll-margin-top: 24px; }
.offre-vedette { grid-column: span 6; padding: 28px; }
.offre-en-tete { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.icone-metier { width: 44px; height: 44px; display: grid; place-items: center; flex-shrink: 0; background: #f5e7de; border: 1px solid #e8cfc0; border-radius: 12px; color: var(--terre); }
.icone-metier svg { width: 28px; height: 28px; }
.numero-offre { font-size: 10px; letter-spacing: .07em; font-weight: 700; color: #76594d; }
.offre h3 { font: 650 23px/1.2 var(--police); letter-spacing: -.04em; margin: 0 0 14px; }
.offre-vedette h3 { font-size: 30px; }
.offre>p { margin: 0 0 22px; font-size: 14px; line-height: 1.7; color: var(--secondaire); }
.offre-vedette>p { max-width: 490px; font-size: 15px; }
.liste-prestations { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-direction: column; gap: 9px; }
.liste-prestations li { display: flex; gap: 9px; font-size: 13px; line-height: 1.5; }
.liste-prestations li::before { content: '↗'; color: var(--terre); font-size: 13px; flex-shrink: 0; }
.offre-vedette .liste-prestations { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; }
.offre-vedette .liste-prestations li { padding: 7px 10px; border-radius: 7px; background: #f4ede6; font-size: 12px; }
.offre-vedette .liste-prestations li::before { display: none; }
.offre>.bouton { margin-top: auto; min-height: 50px; padding: 12px 13px; gap: 8px; font-size: 12px; }
.actions-offre { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: auto; }
.actions-offre .bouton { min-height: 52px; padding: 13px 17px; gap: 20px; font-size: 14px; }
.exemple-offre { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 13px; color: var(--terre); font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }
.visuel-metier { position: relative; height: 200px; overflow: hidden; border-radius: 14px; margin-bottom: 26px; }
.nuancier { background: radial-gradient(ellipse at 62% 30%, #fff9f0, transparent 65%), #eee4da; border: 1px solid #e2d3c6; }
.echantillon { position: absolute; width: 117px; height: 158px; top: 18px; left: calc(50% - 120px); border: 7px solid #fffdf7; border-bottom-width: 27px; border-radius: 4px; box-shadow: 0 8px 18px #532c241a; transform-origin: 50% 120%; }
.echantillon-1 { background: #ccb39c; transform: rotate(-22deg); }
.echantillon-2 { background: #ded2bf; transform: translateX(48px) rotate(-2deg); }
.echantillon-3 { background: var(--terre); transform: translateX(90px) rotate(17deg); }
.rouleau-metier { position: absolute; right: 20px; top: 20px; width: 50px; height: 50px; border-radius: 14px; background: #fffdfa; color: var(--terre); display: grid; place-items: center; box-shadow: 0 4px 12px #532c2412; }
.rouleau-metier svg { width: 30px; height: 30px; }
.etiquette-metier { position: absolute; left: 16px; bottom: 14px; background: #fffdf8; border: 1px solid #e4d7ce; border-radius: 8px; padding: 7px 11px; font-size: 11px; font-weight: 650; color: #51382c; }
.decor img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.offre-decoration { background: #fbf4ed; }
.offre-decoration .liste-prestations li { background: #f0e4d8; }
.offre-renovation .icone-metier { background: #f0e8e1; }
.offre-exterieur .icone-metier { background: #eee9de; }
.offre-bois .icone-metier { background: #efdfcf; }
.offre-sols .icone-metier { background: #f0e9e2; }
.projet-global { display: flex; align-items: center; justify-content: space-between; gap: 50px; padding: 32px; margin-top: 20px; border-radius: 18px; background: #e9dfd5; }
.projet-global .surtitre { margin-bottom: 10px; font-size: 10px; color: #735444; }
.projet-global h3 { margin: 0 0 10px; font-size: 24px; font-weight: 600; }
.projet-global p { margin: 0; max-width: 680px; color: var(--secondaire); font-size: 14px; }
.projet-global .bouton { flex-shrink: 0; font-size: 14px; }
@media (max-width: 1150px) {
  .offre { grid-column: span 6; }
  .offre:not(.offre-vedette) { padding: 26px; }
  .offre>.bouton { align-self: start; font-size: 14px; gap: 20px; }
  .offre-vedette { padding: 24px; }
  .offre-vedette h3 { font-size: 27px; }
}
@media (max-width: 850px) {
  .services .titre-section { grid-template-columns: 1fr; gap: 20px; }
  .services .titre-section>p { max-width: 580px; }
  .offres-grille { gap: 14px; }
  .offre, .offre:not(.offre-vedette) { padding: 20px; }
  .offre-vedette h3 { font-size: 24px; }
  .offre h3 { font-size: 23px; }
  .visuel-metier { height: 165px; }
  .echantillon { width: 86px; height: 130px; left: calc(50% - 90px); }
  .echantillon-2 { transform: translateX(34px) rotate(-2deg); }
  .echantillon-3 { transform: translateX(62px) rotate(17deg); }
  .rouleau-metier { right: 12px; top: 12px; width: 38px; height: 38px; }
  .rouleau-metier svg { width: 24px; height: 24px; }
  .etiquette-metier { font-size: 10px; left: 10px; bottom: 10px; }
  .actions-offre { gap: 8px; }
  .actions-offre .bouton { width: 100%; gap: 10px; font-size: 13px; }
  .projet-global { flex-direction: column; align-items: start; gap: 24px; padding: 26px; }
}
@media (max-width: 600px) {
  .offres-grille { grid-template-columns: 1fr; }
  .offre { grid-column: auto; }
  .offre, .offre:not(.offre-vedette) { padding: 24px; }
  .offre h3, .offre-vedette h3 { font-size: 26px; }
  .offre>p { font-size: 15px; }
  .liste-prestations li { font-size: 14px; }
  .offre-vedette .liste-prestations li { font-size: 12px; }
  .offre>.bouton { width: 100%; font-size: 14px; }
  .actions-offre .bouton { font-size: 14px; }
  .visuel-metier { height: 180px; }
  .offre-en-tete { margin-bottom: 20px; }
  .reperes-services { gap: 7px; }
  .reperes-services a { font-size: 12px; padding: 8px 11px; gap: 10px; }
}
@media (max-width: 360px) {
  .offre, .offre:not(.offre-vedette) { padding: 18px; }
  .offre>.bouton, .actions-offre .bouton { font-size: 12px; gap: 8px; }
  .offre h3, .offre-vedette h3 { font-size: 24px; }
  .projet-global { padding: 20px; }
  .projet-global .bouton { width: 100%; font-size: 12px; padding: 12px; gap: 8px; }
}