/* Mobile-specific overrides — matches Figma at 375px viewport */
/* This file ONLY applies below 768px. Desktop is NOT affected. */

@media (max-width: 768px) {

  /* ===== GLOBAL FIXES ===== */

  /* Header: Figma mobile header = 112px total (no extra padding) */
  header,
  #mobile-menu > div:first-of-type {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Footer feedback text sizes: Figma 15px/20px vs Web 16px/27px */
  footer .text-white\/40.text-\[16px\] {
    font-size: 15px !important;
    line-height: 1.28 !important;
  }
  footer .text-white.text-\[27px\] {
    font-size: 20px !important;
    line-height: 24px !important;
  }

  /* Footer mobile logo: Figma 77x77, gap=24px to card */
  footer .flex.lg\:hidden.justify-center {
    margin-bottom: 24px !important;
  }
  footer .flex.lg\:hidden.justify-center img {
    width: 77px !important;
    height: 77px !important;
  }

  /* Footer inner flex: Figma gap=72px between card and address/links */
  footer .max-w-\[1440px\] > .flex.flex-col {
    gap: 72px !important;
  }

  /* Footer right side: gap=72px between address/links and bottom social/legal */
  footer .flex-1.flex.flex-col.gap-10 {
    gap: 72px !important;
  }

  /* Footer address/links section: Figma gap=34px */
  footer .flex-1 > .flex.flex-col.gap-8 {
    gap: 34px !important;
  }

  /* Footer NOS SERVICES link list: Figma gap=10px */
  footer .footer-services-list {
    gap: 10px !important;
  }

  /* Footer link columns: Figma justify-between, gap-y=16px */
  footer .flex.gap-x-6.gap-y-8 {
    gap: 16px 0 !important;
    justify-content: space-between !important;
  }

  /* Footer left column: Figma w=163px */
  footer .flex.gap-x-6.gap-y-8 > div:first-child {
    width: 163px !important;
  }

  /* Footer right column: Figma w=141px, gap=18px */
  footer .flex.gap-x-6.gap-y-8 > div:nth-child(2) {
    width: 141px !important;
  }
  footer .flex.gap-x-6.gap-y-8 > div:nth-child(2) .flex.flex-col.gap-4 {
    gap: 18px !important;
  }

  /* Footer bottom social/legal: Figma gap=28px */
  footer .flex.flex-wrap.items-center.justify-center {
    gap: 28px !important;
  }

  /* Footer legal links: Figma gap=11px 18px */
  footer .flex.flex-wrap.justify-center.gap-x-\[18px\] {
    gap: 11px 18px !important;
  }

  /* ===== HOMEPAGE ===== */

  /* Announcement: Figma h=50 vs web h=39 */
  .hp-announcement {
    height: 50px !important;
  }

  /* Hero: Figma pt=23px (gap header→content), pb=61px (gap screenshots→video) */
  .hp-hero-inner {
    padding-top: 23px !important;
    padding-bottom: 61px !important;
  }

  /* Calendar: Figma title at y=1306. After hero+video (ends ~1225), pt=81px */
  .hp-calendar {
    padding-top: 81px !important;
  }



  /* ===== HOMEPAGE HERO BINS =====
     Remove mix-blend-darken on mobile as it causes rendering differences with Figma. */
  .hp-hero-inner .mix-blend-darken {
    mix-blend-mode: normal !important;
  }


  /* ===== HOMEPAGE CHAIN SECTION =====
     Mobile-only pixel adjustments — scoped to < 700 so they don't
     collide with the proportional % layout used above that breakpoint. */
  @media (max-width: 699px) {
    .hp-hero ~ section.overflow-hidden .w-\[427px\] > .absolute:nth-child(1) {
      top: 38px !important;
    }
    .hp-hero ~ section.overflow-hidden .w-\[427px\] > .absolute:nth-child(2) {
      left: 78px !important;
    }
    .hp-hero ~ section.overflow-hidden .w-\[427px\] > .absolute:nth-child(3) {
      top: 192px !important;
    }
    .hp-hero ~ section.overflow-hidden .w-\[427px\] > .absolute:nth-child(4) {
      left: 313px !important;
    }
  }

  /* ===== A PROPOS PAGE ===== */

  /* Hero image: match Figma crop (wider image, offset left) */
  .apropos-hero-img {
    height: 125.86% !important;
    width: 219.89% !important;
    left: -37.36% !important;
    top: 0 !important;
    max-width: none !important;
  }

  /* Installation card inner gaps: match Figma per card */
  /* Card 2 (compostage): gap=95px between text block and image */
  .apropos-install-cards > div:nth-child(2) {
    gap: 95px !important;
  }
  /* Card 3 (pretraitement): gap=44px between text block and image */
  .apropos-install-cards > div:nth-child(3) {
    gap: 44px !important;
  }

  /* Video play button: uniform position at left:24px for all cards */
  .apropos-video-btn {
    left: 24px !important;
    padding: 12px !important;
  }
  .apropos-video-btn img {
    width: 36px !important;
    height: 36px !important;
  }

  /* ===== COLLECTES PAGE ===== */

  /* Calendar section: Figma title at y=443, hero ends at 374 → gap=69px
     Hero mb=32px → section starts at 406 → need pt=37px to put title at 443
     Card bottom at 1652, consignes at 1716 → need 64px gap at bottom */
  .section-calendar {
    padding-top: 45px !important;
    padding-bottom: 64px !important;
  }

  /* Calendar flex gap: Figma gap between title area (ends 700) and card (starts 778) = 78px */
  .calendar-flex {
    gap: 78px !important;
  }


  /* Consignes title: more breathing room before the first consigne */
  .consignes-title {
    margin-bottom: 50px !important;
  }

  /* Consignes list: bigger gap between each consigne block */
  .consignes-list {
    gap: 80px !important;
    padding-bottom: 0 !important;
  }

  /* Consignes: gap between image and content side */
  .consignes-list > div {
    gap: 40px !important;
  }
  .consignes-list > div:nth-child(3) {
    gap: 40px !important;
  }

  /* Content side: gap between title/description block and the do/don't pills */
  .consignes-list > div > .w-full.flex.flex-col {
    gap: 32px !important;
  }

  /* Image wrapper: rotation bounding box in Figma ~280px */
  .consignes-list > div > .flex.items-center.justify-center {
    min-height: 240px;
  }

  /* Consigne images: Figma exports include the green tint overlay.
     Hide the CSS overlay to avoid double-tinting. */
  .consignes-list .bg-\[rgba\(177\,202\,153\,0\.3\)\] {
    display: none !important;
  }


  /* Do/Don't tags: keep Figma standard gap */

  /* Calendar header area: web h=273 vs Figma h=257. Reduce gap between
     title/description and dropdown/download. Figma Frame 8654 gap=27px. */
  .section-calendar .calendar-flex > div:first-child {
    gap: 27px !important;
  }
  .section-calendar .border-4 {
    border-width: 2px !important;
  }


  /* Contact form: Figma gap from peda=62px, h=879.
     Remove paragraph margins and list spacing to match Figma flush layout. */
  .page-collectes section.bg-sidec-blue {
    margin-top: 62px !important;
  }
  section.bg-sidec-blue:not(.peda-contact):not(.centre-contact):not(.location-contact) {
    min-height: 879px !important;
    box-sizing: border-box !important;
  }
  .bg-sidec-blue .flex.flex-col.gap-2 p {
    margin-bottom: 0 !important;
  }
  .bg-sidec-blue .flex.flex-col.gap-2 ol {
    margin-bottom: 0 !important;
  }
  .bg-sidec-blue .flex.flex-col.gap-2 .space-y-1 > * + * {
    margin-top: 0 !important;
  }

  /* Encombrants (5th consigne): content width in Figma is 345px vs 343px web */
  .consignes-list > div:nth-child(5) > .w-full {
    max-width: 345px !important;
  }

  /* ===== CENTRE DE RESSOURCES PAGE ===== */

  /* Hero: Figma gap from hero bottom (374) to intro (440) = 66px */
  .centre-hero {
    margin-bottom: 66px !important;
  }

  /* Intro: Figma y=440, photos y=893. intro_h(397)+mb=453 → mb=56 */
  .centre-intro {
    margin-bottom: 56px !important;
  }
  .centre-intro p {
    margin: 0 !important;
  }

  /* Photos: Figma gap to Find = 1031-893-89=49px */
  .centre-photos {
    margin-bottom: 49px !important;
  }

  /* Find: Figma y=1031, cards y=1471. find_h(388)+mb=440 → mb=52 */
  .centre-find {
    margin-bottom: 52px !important;
  }

  /* Cards wrapper: Figma cardsGrid ends ~2883, sidebar at 2963 → gap=80 */
  .centre-cards-wrapper {
    gap: 80px !important;
  }

  /* Cards section: Figma gap to ReUse = 42px */
  .centre-cards-section {
    margin-bottom: 42px !important;
  }

  /* ReUse: Figma y=3205, accesPro y=3678, reuse_h(426)+mb=473 → mb=47 */
  .centre-reuse {
    margin-bottom: 47px !important;
  }

  /* Acces pro: Figma gap to contact = 4309-3678-600=31 */
  .centre-acces-pro {
    margin-bottom: 31px !important;
  }
  /* Acces pro link text white on mobile (Figma shows white) */
  .centre-acces-pro a span {
    color: #ffffff !important;
  }

  /* Sidebar card: Figma explicit h=200px, py=32 */
  .centre-sidebar {
    height: 200px !important;
    padding-top: 32px !important;
    padding-bottom: 32px !important;
    box-sizing: border-box !important;
  }

  /* Contact: Figma pb = 67px (template pb-[161px] is too large).
     Text block in Figma is a single 240px text node, remove paragraph margins. */
  .centre-contact {
    padding-bottom: 67px !important;
  }
  .centre-contact .lg\:hidden p {
    margin-bottom: 0 !important;
  }
  .centre-contact .border.border-sidec-dark.rounded-xl {
    height: 56px !important;
    box-sizing: border-box !important;
  }
  .centre-contact button[type="submit"] {
    width: 200px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ===== PEDAGOGIQUES PAGE ===== */

  /* Hero: Figma y=163, header ends at 145 → mt=18px. Hero h=213, mb should give 35px gap to intro */
  .peda-hero {
    margin-top: 18px !important;
    margin-bottom: 35px !important;
    padding-left: 17px !important;
    padding-right: 16px !important;
  }

  /* Intro: Figma Frame 8552 at x=17 y=411, h=180, gap to photos=53px */
  .peda-intro {
    padding-left: 17px !important;
    padding-right: 17px !important;
    margin-bottom: 53px !important;
  }
  .peda-intro-inner {
    gap: 28px !important;
  }
  .peda-intro-inner h2 {
    line-height: 1.125 !important;
  }

  /* Photos: Figma Frame 8555 at x=16 y=644, h=119, gap to visites=53px */
  .peda-photos {
    padding-left: 16px !important;
    padding-right: 15px !important;
    margin-bottom: 53px !important;
  }
  .peda-photos-inner {
    gap: 21px !important;
  }

  /* Visites: Figma Frame 8553 at x=16 y=816, h=457, gap to caisse=69px
     Title h=54, gap to text=82-54=28px, text h=256, gap to CTAs=366-338=28px
     CTA row: Bouton Primaire h=36, gap=15px, Bouton telephone h=40 → total=91px */
  .peda-visites {
    padding-left: 16px !important;
    padding-right: 15px !important;
    margin-bottom: 69px !important;
  }
  .peda-visites-inner {
    gap: 28px !important;
  }
  .peda-visites-title {
    min-height: 54px !important;
  }
  .peda-visites-ctas {
    gap: 15px !important;
  }

  /* Caisse: Figma Frame 8554 at x=16 y=1342, h=337, gap to outils=93px
     Title h=27, gap=28px, text h=160, gap to CTAs=28px, CTAs h=94 */
  .peda-caisse {
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-bottom: 93px !important;
  }
  .peda-caisse-inner {
    gap: 28px !important;
  }
  .peda-caisse-ctas {
    gap: 15px !important;
  }


  /* Hide extra articles on mobile (Figma only shows 2) */
  .peda-article-extra {
    display: none !important;
  }

  /* Articles section spacing */
  .peda-articles {
    margin-bottom: 90px !important;
  }
  .peda-articles-header {
    gap: 14px !important;
    margin-bottom: 30px !important;
  }

  /* Contact form: Figma at y=3005, h=604, inner frame at y=67 from section top
     Text block: h=174, title h=54, gap=8px, description h=112
     Form group: starts at y=214 from inner frame top, gap=40px from text
     Fields: h=56 each, gap between=16px
     Button at y=216 from group top → gap above=16px
     Section pb to fill 604px total */
  .peda-contact {
    padding-top: 67px !important;
    padding-bottom: 141px !important;
  }
  .peda-contact-inner {
    gap: 40px !important;
  }
  .peda-contact-text-inner {
    gap: 8px !important;
  }
  .peda-contact-form {
    gap: 16px !important;
  }
  .peda-field {
    height: 56px !important;
    box-sizing: border-box !important;
  }
  .peda-submit {
    height: 40px !important;
    padding: 0 15px !important;
    display: flex !important;
    align-items: center !important;
  }


  /* ===== LEXIQUE PAGE ===== */

  /* Search box: Figma h=34 (current h=36 from py-2.5=10px). Reduce to py=9px. */
  section:has(#lexique-search) .flex.items-center.gap-2 {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }

  /* Remove gap between search and title in flex-col-reverse.
     Figma: search ends at y=204, title starts at y=204 (0 gap). */
  section:has(#lexique-search) .flex.flex-col-reverse > div.mb-4 {
    margin-bottom: 0 !important;
  }

  /* Filters section: title ends at ~243, Figma filters at 247 -> gap=4px. */
  section:has(.lexique-filter) {
    margin-top: 4px !important;
  }

  /* Filter buttons: Figma h=46 (current h=48 from inline padding 15px).
     Override to 14px top/bottom for 46px total. */
  .lexique-filter {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  /* Entries section: Figma entries at x=18, w=340 (current x=16, w=343).
     Gap from filters bottom to entries = 43px.
     Bottom gap so the pagination arrows don't touch the dark footer. */
  #lexique-entries {
    padding-left: 18px !important;
    padding-right: 17px !important;
    margin-top: 43px !important;
    margin-bottom: 80px !important;
  }

  /* Letter section: Figma gap between sections = 76px.
     Last section to pagination gap = 36px in Figma. */
  .lexique-letter-section {
    margin-bottom: 76px !important;
  }
  .lexique-letter-section:last-child {
    margin-bottom: 36px !important;
  }

  /* Entry title: Figma gap between title and text = 8px */
  .lexique-entry h3 {
    margin-bottom: 8px !important;
  }


  /* ===== ACTUALITES PAGE ===== */

  /* Hero: Figma Frame 8590 at y=154, w=343, h=481, cornerRadius=14 */
  .actualites-hero {
    padding: 0 !important;
    margin-top: 9px !important;
    margin-bottom: 0 !important;
  }
  .actualites-hero-inner {
    height: 481px !important;
    border-radius: 14px !important;
    padding: 10px 22px 22px 22px !important;
  }

  /* Nos conseils: Figma Frame 8592 at y=694, gap=50, no section padding */
  .actualites-conseils {
    padding-top: 59px !important;
    padding-bottom: 0 !important;
  }
  .actualites-conseils-inner {
    gap: 50px !important;
  }
  /* Article grid: Figma gap between rows = 50px, columns = 16px */
  .actualites-conseils .grid {
    gap: 50px 16px !important;
  }
  /* Article card: Figma gap image→text = 20px, card height = 330px */
  .actualites-conseils article,
  .actualites-news article {
    gap: 20px !important;
    min-height: 330px !important;
  }

  /* Nos dernieres actualites: Figma Frame 8593 at y=1671, gap=50, footer at 2758 */
  .actualites-news {
    padding-top: 84px !important;
    padding-bottom: 148px !important;
  }
  .actualites-news-inner {
    gap: 50px !important;
  }
  .actualites-news .grid {
    gap: 50px 16px !important;
  }


  /* ===== TOUS (liste voir tout) PAGE ===== */

  /* Title section: Figma title at y=196, header ends at 145 -> pt=51px
     h1 height=40px (1 line). Articles start at y=287 -> pb=287-196-40=51px */
  .tous-title-section {
    padding-top: 51px !important;
    padding-bottom: 51px !important;
  }

  /* Pagination: Figma y=1861, last article bottom at 1757 -> mt=104px
     Buttons: w=40 h=37, gap=18px */
  .tous-pagination {
    margin-top: 104px !important;
    gap: 18px !important;
  }
  .tous-pagination button {
    width: 40px !important;
    height: 37px !important;
  }

  /* Gradient: Figma starts at y=33 (after status bar), top-0 is relative to wrapper */
  .tous-gradient {
    top: 33px !important;
  }


  /* ===== LOCATION / RULLSPULL PAGE ===== */

  /* Hero: Figma gap hero bottom (y=373) to description (y=418) = 45px */
  .location-hero {
    margin-bottom: 45px !important;
  }

  /* Description + Info: Figma gap between desc text and info box = 20px (not 28px).
     Section mb to video = 34px */
  .location-description {
    margin-bottom: 34px !important;
  }
  .location-description-inner {
    gap: 20px !important;
  }
  /* Info box: Figma bg=rgb(219,218,213) not #d9d9d9=rgb(217,217,217) */
  .location-description-inner > div:nth-child(2) {
    background-color: rgb(219,218,213) !important;
  }

  /* Video: small margin for downstream alignment */
  .location-video {
    margin-bottom: 3px !important;
  }
  /* Video overlay: Figma has no visible overlay - remove it on mobile */
  .location-video .bg-black\/20 {
    background-color: transparent !important;
  }
  /* RullSpull pricing: Figma 34px from video end to pricing cards start.
     Cards gap=27px. */
  .location-rullspull-pricing {
    padding-top: 34px !important;
    padding-bottom: 26px !important;
  }
  .location-rullspull-pricing .grid {
    gap: 27px !important;
  }

  /* Footnote RullSpull: Figma gap to poubelles text = 57px */
  .location-footnote-rullspull {
    margin-bottom: 57px !important;
  }

  /* Poubelles text: Reduce mb to compensate for web text being 11px taller
     and 12px later than Figma. Places photos at ~3079px matching Figma. */
  .location-poubelles-text {
    margin-bottom: 17px !important;
  }

  /* Poubelles photos: consume margin into pricing pt */
  .location-poubelles-photos {
    margin-bottom: 0 !important;
  }

  /* Poubelles pricing: Figma 82px from photos, 30px to footnote.
     Cards gap=22px. */
  .location-poubelles-pricing {
    padding-top: 82px !important;
    padding-bottom: 30px !important;
  }
  .location-poubelles-pricing .grid {
    gap: 22px !important;
  }

  /* Footnote Poubelles: 82px base + 23px compensation for reduced
     poubelles-text mb to maintain contact form position. */
  .location-footnote-poubelles {
    margin-bottom: 105px !important;
  }

  /* Contact form: Figma h=664, py=67, inner gap=40. Min-height to match Figma. */
  .location-contact {
    padding-top: 67px !important;
    padding-bottom: 67px !important;
    min-height: 664px !important;
    box-sizing: border-box !important;
  }
  .location-contact-inner {
    gap: 40px !important;
  }

  /* ===== CONTACT PAGE ===== */
  .contact-hero { padding-top: 28px !important; padding-bottom: 44px !important; }
  .contact-hero .lg\:hidden.relative.h-\[60px\] { height: 0px !important; overflow: visible !important; }
  .contact-hero .mb-\[30px\] { margin-bottom: 38px !important; }
  .contact-hero .flex.gap-\[24px\] a { background-color: #CECCC6 !important; border-color: #CECCC6 !important; }
  /* Decorative photo: Figma w=131 h=147, right edge at x=405 (overflows 375). Position from right=-30px */
  .contact-hero .lg\:hidden.relative .absolute { width: 131px !important; height: 147px !important; right: -14px !important; top: -72px !important; }
  /* Centre card image radius: Figma 4px */
  .contact-centres .grid .rounded-\[8px\] { border-radius: 4px !important; }
  .contact-centres h2 { margin-bottom: 57px !important; }
  /* Horaires sidebar: Figma gap from cards to horaires = 54px, web has mt-30. */
  /* Centre card Tel. line: Figma has blank line (~16px), web has mt-8. Fix to 16px. */
  .contact-centres .grid .mt-\[8px\] { margin-top: 16px !important; }
  .contact-centres .mt-\[30px\] { margin-top: 54px !important; }
  .contact-compostage .flex-col-reverse { gap: 48px !important; }
  /* Compostage card text gap: Figma has blank line ~16px between title and Tel, web has 4px */
  .contact-compostage .gap-\[4px\] { gap: 16px !important; }
  /* Compostage card image radius: Figma 4px, web 8px */
  .contact-compostage .rounded-\[8px\] { border-radius: 4px !important; }
  /* Submit button: Figma h=40, web renders ~37. Force height. */
  .contact-hero button[type="submit"] { height: 40px !important; }
  /* Annuaire pb: adjusted for compostage text gap increase (+24px total for 2 cards) */
  /* Annuaire placeholder photos: contain instead of cover to match Figma silhouette size */
  .contact-annuaire .h-\[174px\] img { object-fit: contain !important; }
  .contact-annuaire { padding-bottom: 238px !important; }

  /* ===== REUSE PAGE ===== */

  /* Hero: Figma gap hero→intro = 36px */
  .reuse-hero {
    margin-bottom: 36px !important;
  }

  /* Intro: Figma gap intro→featured = 55px */
  .reuse-intro {
    margin-bottom: 55px !important;
  }

  /* Featured card: Figma gap featured→donate = 81px, inner card gap = 13px */
  .reuse-featured {
    margin-bottom: 81px !important;
  }
  .reuse-featured-card {
    gap: 13px !important;
  }

  /* FAQ donate: Figma gap donate→pickup = 39px */
  .reuse-faq-donate {
    margin-bottom: 39px !important;
  }

  /* FAQ pickup: Figma gap pickup→stats = 79px */
  .reuse-faq-pickup {
    margin-bottom: 79px !important;
  }

  /* Stats: Figma h=500, gap stats→calhead = 82px */
  .reuse-stats {
    margin-bottom: 82px !important;
  }
  .reuse-stats-inner {
    height: 500px !important;
  }

  /* Calendar heading: Figma gap calhead→grid = 57px */
  .reuse-cal-heading {
    margin-bottom: 57px !important;
  }

  /* Calendar grid: Figma row gap ~27px, col gap 20px, grid→footer adjusted */
  .reuse-cal-grid {
    margin-bottom: 114px !important;
  }
  .reuse-grid {
    gap: 27px 20px !important;
  }

  /* Calendar card text: Figma has no gap between period/title/description */
  .reuse-card-text {
    gap: 0 !important;
  }


  /* Padding: Figma section x positions */
  .reuse-intro {
    padding-left: 15px !important;
    padding-right: 17px !important;
  }
  .reuse-faq-donate {
    padding-left: 15px !important;
    padding-right: 16px !important;
  }
  .reuse-faq-pickup {
    padding-left: 15px !important;
    padding-right: 18px !important;
  }
  .reuse-stats {
    padding-left: 14px !important;
    padding-right: 18px !important;
  }

  /* ===== ARTICLE (single) PAGE ===== */

  .article-title {
    font-size: 36px !important;
    line-height: 40px !important;
    text-align: center !important;
  }

  .article-hero-img {
    border-radius: 8px !important;
  }
  .article-hero-img img {
    border-radius: 8px !important;
  }

  .article-intro {
    font-size: 20px !important;
    line-height: 24px !important;
  }

  .article-intro-section {
    padding-bottom: 58px !important;
  }

  .article-section-title {
    font-size: 16px !important;
    line-height: 18px !important;
  }

  .article-section-inner {
    gap: 18px !important;
  }

  .article-quote-inner {
    gap: 31px !important;
  }

  .article-quote-text {
    font-size: 24px !important;
    line-height: normal !important;
  }

  .article-quote-section {
    padding-left: 17px !important;
    padding-right: 17px !important;
    padding-bottom: 32px !important;
  }
  .article-quote-inner > div:last-child {
    gap: 15px !important;
  }

  .article-gallery-inner {
    gap: 14px !important;
  }
  .article-gallery-thumb {
    width: auto !important;
    height: 95px !important;
    border-radius: 8px !important;
    flex: 1 0 0 !important;
  }
  .article-gallery-thumb img {
    border-radius: 8px !important;
  }
  .article-gallery-mobile {
    padding-left: 17px !important;
    padding-right: 16px !important;
  }

  .article-section3 {
    padding-left: 17px !important;
    padding-right: 17px !important;
    padding-bottom: 98px !important;
  }

  .article-section1 {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 55px !important;
  }

  .article-related-section {
    padding-left: 16px !important;
    padding-right: 17px !important;
    padding-bottom: 139px !important;
  }

  .article-related-title {
    font-size: 32px !important;
    line-height: normal !important;
  }

  .article-related-inner {
    gap: 50px !important;
  }

  .article-related-grid {
    gap: 48px 16px !important;
  }

  .article-related-card-title {
    font-size: 15px !important;
    line-height: 1.28 !important;
  }

  .article-related-card-text {
    font-size: 13px !important;
    line-height: 1.239 !important;
    color: #696868 !important;
  }


  /* ===== COMPOSTAGE PAGE ===== */

  /* Hero: Figma hero bottom=374, intro top=421, gap=47px */
  .compo-hero {
    margin-bottom: 47px !important;
  }

  /* Intro: Figma intro content varies, photos top=647 */
  .compo-intro {
    margin-bottom: 38px !important;
  }

  /* Photos: Figma photos bottom=753, bons gestes top=836, gap=83px */
  .compo-photos {
    margin-bottom: 83px !important;
  }

  /* Bons gestes: Figma bottom~982, consignes first item at 1079, gap=97px */
  .compo-bons-gestes {
    margin-bottom: 105px !important;
  }

  /* Consignes section: remove padding, mb adjusted for Figma centres at 3993 */
  .compo-consignes {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 89px !important;
  }

  /* Consigne image sizes per item (Figma has different sizes each) */
  .compo-consigne-item:nth-child(1) .compo-consigne-img > div > div {
    width: 282px !important;
    height: 262px !important;
  }
  .compo-consigne-item:nth-child(2) .compo-consigne-img > div > div {
    width: 299px !important;
    height: 277px !important;
  }
  .compo-consigne-item:nth-child(3) .compo-consigne-img > div > div {
    width: 321px !important;
    height: 298px !important;
  }

  /* Override flex gap to use per-item margins (Figma has different gaps) */
  .compo-consignes > div {
    gap: 0 !important;
  }
  /* Consigne image-to-content gaps and inter-item margins */
  .compo-consigne-item:nth-child(1) {
    gap: 44px !important;
    margin-bottom: 139px !important;
  }
  .compo-consigne-item:nth-child(2) {
    gap: 37px !important;
    margin-bottom: 127px !important;
  }
  .compo-consigne-item:nth-child(3) {
    gap: 48px !important;
  }

  /* Centres: Figma at y=3993, no top padding */
  .compo-centres {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 70px !important;
  }
  /* Angelsberg image: Figma h=210px vs default 200px */
  .compo-centres .flex.flex-col.gap-\[22px\]:nth-child(2) .h-\[200px\] {
    height: 210px !important;
  }

  /* Saviez-vous: Figma title=24px, image area=214px, section at y=5509 */
  .compo-saviez {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  /* Purple box: Figma inner content=313px in 343px box, px=15px */
  .compo-saviez .bg-\[\#f1e6ff\] {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  .compo-saviez .font-petrona {
    font-size: 24px !important;
  }
  /* Constrain image container to Figma height (214px grid in Figma) */
  .compo-saviez .flex.flex-col.items-center.gap-10 > div:first-child {
    height: 214px !important;
    max-height: 214px !important;
    overflow: hidden !important;
    width: 100% !important;
  }
  .compo-saviez img {
    height: 100% !important;
    width: 100% !important;
    object-fit: contain !important;
  }
  /* Gap between image and text: Figma=41px */
  .compo-saviez .flex.flex-col.items-center.gap-10 {
    gap: 41px !important;
  }

  /* Espace pro: gap to contact adjusted for bin grid height */
  .compo-pro {
    margin-bottom: 62px !important;
  }



}