*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --creme:   #FDFAF6;
      --fond:    #F5EFE6;
      --beige:   #C4A882;
      --beige-clair: #CFB899; /* variante claire du beige, pour texte lisible (4.5:1+) sur fond --profond */
      --beige-plus-clair: #D7C5A8; /* variante encore + claire : --beige-clair tombe sous 4.5:1 sur les
        fonds semi-transparents (ex. .conseil-card, rgba(253,250,246,0.06) sur --profond) qui éclaircissent
        légèrement le fond par rapport à --profond pur */
      --brun:    #8B6343;
      --profond: #5C3D2E;
      --texte:   #3A2A1E;
    }

    /* scroll-behavior: smooth n'est PAS mis ici en global : ça casse la restauration
       native du scroll par le navigateur au clic sur "← Retour au site" depuis un article
       (le navigateur tente d'animer le retour vers l'ancienne position pendant que la page
       finit de charger, et atterrit ailleurs). Le scroll fluide est géré en JS, uniquement
       pour les clics sur les liens d'ancrage internes — voir script.js. */

    body {
      font-family: 'Lato', sans-serif;
      background: var(--fond);
      color: var(--texte);
      font-weight: 300;
      line-height: 1.7;
    }

    /* ── Accessibilité : lien d'évitement ── */
    .skip-link {
      position: fixed; top: -60px; left: 16px; z-index: 999;
      background: var(--profond); color: var(--creme);
      padding: 12px 20px; border-radius: 8px;
      text-decoration: none; font-size: 0.85rem;
      transition: top 0.2s;
    }
    .skip-link:focus { top: 16px; }

    /* ── NAV desktop ── */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 200;
      display: flex; justify-content: space-between; align-items: center;
      padding: 18px 48px;
      background: rgba(253,250,246,0.95);
      backdrop-filter: blur(6px);
      border-bottom: 1px solid var(--beige);
    }
    .nav-logo {
      font-family: 'Playfair Display', serif;
      font-size: 1.05rem;
      color: var(--profond);
      letter-spacing: 0.04em;
      line-height: 1.3;
    }
    .nav-logo span { font-style: italic; color: var(--brun); font-size: 0.9rem; }
    nav ul { list-style: none; display: flex; gap: 28px; align-items: center; }
    nav ul a {
      text-decoration: none;
      font-size: 0.82rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--brun);
      transition: color 0.2s;
      white-space: nowrap;
    }
    nav ul a:hover { color: var(--profond); }
    .nav-badge-new {
      background: var(--brun); color: var(--creme);
      font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase;
      padding: 2px 7px; border-radius: 20px; vertical-align: middle;
      margin-left: 4px; font-weight: 700;
    }
    .nav-rdv a {
      background: var(--brun); color: var(--creme) !important;
      padding: 9px 20px; border-radius: 30px; transition: background 0.2s !important;
    }
    .nav-rdv a:hover { background: var(--profond) !important; }

    /* ── BURGER MOBILE ── */
    .burger {
      display: none;
      flex-direction: column; gap: 5px; cursor: pointer;
      background: none; border: none; padding: 4px;
      z-index: 300;
    }
    .burger span {
      display: block; width: 24px; height: 2px;
      background: var(--profond); border-radius: 2px;
      transition: all 0.3s;
    }
    .burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .burger.open span:nth-child(2) { opacity: 0; }
    .burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* ── MENU MOBILE ── */
    .nav-mobile-menu {
      display: none;
      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      background: var(--creme);
      z-index: 150;
      flex-direction: column;
      align-items: center; justify-content: center;
      gap: 0;
      padding: 80px 32px 40px;
    }
    .nav-mobile-menu.open { display: flex; }
    .nav-mobile-menu a {
      display: block;
      padding: 18px 0;
      font-size: 1.3rem;
      font-family: 'Playfair Display', serif;
      color: var(--profond);
      text-decoration: none;
      border-bottom: 1px solid rgba(196,168,130,0.3);
      width: 100%;
      text-align: center;
      transition: color 0.2s;
    }
    .nav-mobile-menu a:hover { color: var(--brun); }
    .nav-mobile-menu .mobile-rdv {
      margin-top: 28px;
      background: var(--brun); color: var(--creme) !important;
      border-radius: 40px; border-bottom: none !important;
      padding: 16px 40px !important; font-size: 1rem !important;
      font-family: 'Lato', sans-serif !important;
      letter-spacing: 0.08em; text-transform: uppercase;
    }

    /* ── RDV FLOTTANT (mobile uniquement, apparaît après le hero) ── */
    .floating-rdv {
      display: none;
      position: fixed; right: 24px; bottom: 24px; z-index: 140;
      opacity: 0; transform: translateY(16px); pointer-events: none;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .floating-rdv.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .floating-rdv a {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--brun); color: var(--creme);
      text-decoration: none; padding: 14px 28px; border-radius: 40px;
      font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase;
      box-shadow: 0 8px 24px rgba(92,61,46,0.28);
      transition: background 0.25s, transform 0.2s;
    }
    .floating-rdv a:hover { background: var(--profond); transform: translateY(-2px); }
    @media (max-width: 640px) {
      .floating-rdv { display: block; right: 16px; bottom: 16px; }
      .floating-rdv a { padding: 12px 22px; font-size: 0.78rem; }
    }

    /* ── WAVE ── */
    .wave-divider { width: 100%; overflow: hidden; line-height: 0; }
    .wave-divider svg { display: block; width: 100%; }
    .wave-top { margin-bottom: -2px; }
    .wave-bottom { margin-top: -2px; }

    /* ── HERO ── */
    #accueil {
      min-height: 100vh;
      display: flex; align-items: center; justify-content: center;
      text-align: center;
      padding: 120px 24px 80px;
      background: var(--creme);
      position: relative;
    }
    .hero-inner { max-width: 700px; }
    .hero-eyebrow {
      display: block;
      font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--brun); margin-bottom: 20px;
    }
    .hero-title {
      font-family: 'Playfair Display', serif;
      font-size: clamp(2.2rem, 5vw, 3.8rem);
      line-height: 1.18; color: var(--profond); margin-bottom: 16px;
    }
    .hero-title em { font-style: italic; color: var(--brun); }
    .hero-subtitle {
      font-size: 1rem; color: var(--brun); max-width: 520px;
      margin: 0 auto 40px; line-height: 1.8;
    }
    .btn-primary {
      display: inline-block; background: var(--brun); color: var(--creme);
      text-decoration: none; padding: 14px 36px; border-radius: 40px;
      font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase;
      transition: background 0.25s, transform 0.2s;
    }
    .btn-primary:hover { background: var(--profond); transform: translateY(-2px); }
    .btn-outline {
      display: inline-block; border: 1.5px solid var(--brun); color: var(--brun);
      text-decoration: none; padding: 13px 32px; border-radius: 40px;
      font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase;
      margin-left: 14px; transition: all 0.25s;
    }
    .btn-outline:hover { background: var(--brun); color: var(--creme); }
    .hero-scroll {
      position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
      display: flex; flex-direction: column; align-items: center; gap: 8px;
      color: var(--brun); font-size: 0.72rem; letter-spacing: 0.14em;
      text-transform: uppercase;
      animation: bob 2.2s ease-in-out infinite;
    }
    @keyframes bob { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(6px)} }
    .hero-scroll svg { width: 18px; opacity: 0.6; }

    /* ── SECTIONS ── */
    section { padding: 90px 24px; }
    .section-inner { max-width: 960px; margin: 0 auto; }
    .section-label {
      font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--brun); margin-bottom: 12px;
    }
    .section-title {
      font-family: 'Playfair Display', serif;
      font-size: clamp(1.8rem, 3.5vw, 2.6rem);
      color: var(--profond); line-height: 1.25; margin-bottom: 24px;
    }
    .section-title em { font-style: italic; color: var(--brun); }

    /* ── À PROPOS ── */
    #apropos { background: var(--fond); }
    .apropos-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 60px; align-items: center; margin-top: 20px;
    }
    .apropos-visual { position: relative; }
    .apropos-photo-placeholder {
      width: 100%; aspect-ratio: 4/5;
      border-radius: 12px 80px 12px 80px;
      overflow: hidden;
    }
    .apropos-photo-placeholder img {
      width: 100%; height: 100%; object-fit: cover; object-position: center top;
      display: block;
    }
    .apropos-badge {
      position: absolute; bottom: -16px; right: -16px;
      background: var(--creme); border: 2px solid var(--beige); border-radius: 50%;
      width: 100px; height: 100px;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      text-align: center; box-shadow: 0 4px 20px rgba(92,61,46,0.12);
    }
    .apropos-badge strong {
      font-family: 'Playfair Display', serif; font-size: 1.5rem;
      color: var(--profond); line-height: 1;
    }
    .apropos-badge span {
      font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brun);
    }
    .apropos-text p { margin-bottom: 16px; font-size: 0.97rem; }
    .apropos-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
    .apropos-credentials {
      margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--beige);
      display: grid; grid-template-columns: auto 1fr; column-gap: 6px; row-gap: 6px;
      font-size: 0.82rem; color: var(--brun);
    }
    .apropos-credentials dt { color: var(--profond); font-weight: 400; }
    .apropos-credentials dt::after { content: "\2014"; margin-left: 6px; }
    .apropos-credentials dd { margin: 0; color: var(--brun); }
    .apropos-ids { font-size: 0.74rem; color: var(--brun); margin-top: 10px; letter-spacing: 0.03em; }
    .tag {
      background: var(--creme); border: 1px solid var(--beige); color: var(--brun);
      padding: 6px 16px; border-radius: 20px; font-size: 0.78rem; letter-spacing: 0.06em;
    }

    /* ── SPÉCIALITÉS ── */
    #specialites { background: var(--creme); }
    .specialites-intro { max-width: 580px; margin-bottom: 52px; }
    .specialites-intro p { font-size: 0.97rem; }
    .cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .card {
      background: var(--fond); border: 1px solid var(--beige); border-radius: 16px;
      padding: 32px 28px; transition: transform 0.25s, box-shadow 0.25s;
    }
    .card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(92,61,46,0.1); }
    .card-icon { margin-bottom: 16px; display: block; }
    .card-icon svg { width: 30px; height: 30px; }
    .card h3 {
      font-family: 'Playfair Display', serif; font-size: 1.1rem;
      color: var(--profond); margin-bottom: 10px;
    }
    .card p { font-size: 0.88rem; line-height: 1.65; }
    .card-link {
      display: inline-block; margin-top: 12px; padding: 4px 0; font-size: 0.82rem;
      color: var(--brun); text-decoration: none; letter-spacing: 0.03em;
      border-bottom: 1px solid transparent; transition: border-color 0.2s;
    }
    .card-link:hover { border-bottom-color: var(--brun); }

    /* ── DRAINAGE ── */
    #drainage { background: var(--profond); color: var(--creme); }
    #drainage .section-label { color: var(--beige-clair); }
    #drainage .section-title { color: var(--creme); }
    #drainage .section-title em { color: var(--beige-clair); }
    #drainage .btn-outline { border-color: var(--beige-clair); color: var(--beige-clair); margin-left: 14px; }
    #drainage .btn-outline:hover { background: var(--beige); color: var(--profond); }
    .drainage-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 60px; align-items: center; margin-top: 16px;
    }
    .drainage-text p { font-size: 0.97rem; margin-bottom: 16px; opacity: 0.9; }
    .drainage-benefits {
      list-style: none; margin: 24px 0;
      display: flex; flex-direction: column; gap: 12px;
    }
    .drainage-benefits li {
      display: flex; align-items: center; gap: 12px;
      font-size: 0.9rem; opacity: 0.9;
    }
    .drainage-benefits li::before {
      content: ''; display: block; width: 6px; height: 6px;
      border-radius: 50%; background: var(--beige); flex-shrink: 0;
    }
    .drainage-visual-photo {
      border-radius: 80px 16px 80px 16px;
      overflow: hidden; height: 420px;
      border: 1px solid rgba(196,168,130,0.3);
    }
    /* figure/picture n'ont pas de hauteur propre : sans ça, le height:100%
       de l'image ne se résout contre rien et object-position n'a aucun effet
       (l'image garde son ratio naturel et se fait rogner par le haut). */
    .drainage-visual-photo figure,
    .drainage-visual-photo picture {
      display: block; width: 100%; height: 100%;
    }
    .drainage-visual-photo img {
      width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block;
    }

    /* ── TARIFS ── */
    #tarifs { background: var(--fond); }
    .tarifs-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 20px; margin-top: 40px;
    }
    .tarif-group {
      background: var(--creme); border: 1px solid var(--beige);
      border-radius: 16px; padding: 36px 32px;
    }
    .tarif-group h3 {
      font-family: 'Playfair Display', serif; font-size: 1.1rem;
      color: var(--profond); margin-bottom: 24px; padding-bottom: 16px;
      border-bottom: 1px solid var(--beige);
      display: flex; align-items: center; gap: 10px;
    }
    .tarif-group h3 svg { flex-shrink: 0; width: 22px; height: 22px; }
    .tarif-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
    .tarif-line { border-bottom: 1px dashed rgba(196,168,130,0.4); }
    .tarif-line:last-child { border-bottom: none; }
    .tarif-table td { padding: 10px 0; vertical-align: baseline; }
    .tarif-line .tarif-nom { color: var(--texte); text-align: left; }
    .tarif-line .tarif-prix {
      font-family: 'Playfair Display', serif; font-size: 1.15rem;
      color: var(--brun); font-weight: 600; white-space: nowrap;
      text-align: right; padding-left: 12px;
    }
    .tarif-cure-badge {
      background: var(--brun); color: var(--creme); font-size: 0.65rem;
      padding: 2px 8px; border-radius: 20px; margin-left: 6px;
      vertical-align: middle; letter-spacing: 0.05em;
    }
    .tarif-line--cure td { background: rgba(196,168,130,0.08); padding-top: 10px; padding-bottom: 10px; }
    .tarif-line--cure td.tarif-nom { border-radius: 6px 0 0 6px; padding-left: 8px; }
    .tarif-line--cure td.tarif-prix { border-radius: 0 6px 6px 0; padding-right: 8px; }
    .sr-only {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
    }
    .tarif-note {
      /* opacity retirée : combinée à --brun sur --creme, elle faisait tomber
         le contraste sous 4.5:1 (audit PageSpeed) ; l'italique suffit à
         distinguer la note du texte courant. */
      margin-top: 28px; font-size: 0.82rem; color: var(--brun);
      font-style: italic;
    }
    .tarifs-cta { text-align: center; margin-top: 48px; }
    .tarifs-cta p { margin-bottom: 20px; font-size: 0.95rem; }

    /* ── CONSEILS ── */
    #conseils { background: var(--profond); color: var(--creme); }
    #conseils .section-label { color: var(--beige-clair); }
    #conseils .section-title { color: var(--creme); }
    #conseils .section-title em { color: var(--beige-clair); }
    .conseils-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
    .conseil-card {
      background: rgba(253,250,246,0.06); border: 1px solid rgba(196,168,130,0.35);
      border-radius: 16px; padding: 26px 22px; text-decoration: none; color: var(--creme);
      display: flex; flex-direction: column; gap: 12px; transition: background 0.2s, transform 0.2s;
    }
    .conseil-card:hover { background: rgba(253,250,246,0.12); transform: translateY(-3px); }
    .conseil-card h3 {
      font-family: 'Playfair Display', serif; font-size: 1.02rem; line-height: 1.35; color: var(--creme);
    }
    .conseil-card p { font-size: 0.84rem; opacity: 0.85; line-height: 1.6; margin: 0; }
    .conseil-card span.conseil-read {
      font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--beige-plus-clair); margin-top: auto;
    }

    /* ── FAQ ── */
    #faq { background: var(--creme); }
    .faq-list { max-width: 760px; margin-top: 40px; display: flex; flex-direction: column; gap: 12px; }
    .faq-item {
      background: var(--fond); border: 1px solid var(--beige);
      border-radius: 12px; overflow: hidden;
    }
    .faq-item summary {
      cursor: pointer; padding: 18px 24px; font-size: 0.98rem;
      color: var(--profond); font-family: 'Playfair Display', serif;
      list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after {
      content: '+'; font-size: 1.3rem; color: var(--brun); flex-shrink: 0;
      transition: transform 0.2s;
    }
    .faq-item[open] summary::after { transform: rotate(45deg); }
    .faq-item .faq-answer {
      padding: 0 24px 20px; font-size: 0.92rem; color: var(--texte); line-height: 1.7;
    }

    /* ── CONTACT ── */
    #contact { background: var(--creme); }
    .contact-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 60px; margin-top: 40px; align-items: start;
    }
    .contact-info { display: flex; flex-direction: column; gap: 28px; }
    .contact-item { display: flex; gap: 18px; align-items: flex-start; }
    .contact-item-icon {
      width: 44px; height: 44px; background: var(--fond);
      border: 1px solid var(--beige); border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; font-size: 1.1rem;
    }
    .contact-item-text strong {
      display: block; font-size: 0.78rem; text-transform: uppercase;
      letter-spacing: 0.1em; color: var(--brun); margin-bottom: 4px;
    }
    .contact-item-text span, .contact-item-text a {
      font-size: 0.95rem; color: var(--texte); text-decoration: none;
    }
    .contact-item-text a:hover { color: var(--brun); }
    .instagram-cta {
      display: flex; align-items: center; gap: 12px;
      background: var(--fond); border: 1px solid var(--beige); border-radius: 12px;
      padding: 20px 24px; text-decoration: none; transition: all 0.25s; margin-top: 8px;
    }
    .instagram-cta:hover { background: var(--beige); border-color: var(--brun); }
    .instagram-cta svg { width: 28px; flex-shrink: 0; }
    .instagram-cta div strong { display: block; color: var(--profond); font-size: 0.9rem; }
    .instagram-cta div span { font-size: 0.8rem; color: var(--brun); }
    .map-embed-wrap { display: flex; flex-direction: column; gap: 10px; }
    .map-link {
      display: inline-block; padding: 4px 0; font-size: 0.78rem; color: var(--brun);
      text-decoration: underline; letter-spacing: 0.06em;
    }

    /* ── AVIS ── */
    .reviews-section { margin-top: 56px; }
    .reviews-heading {
      font-family: 'Playfair Display', serif;
      font-size: clamp(1.4rem, 2.5vw, 1.9rem);
      color: var(--profond); margin-bottom: 32px;
    }
    .reviews-heading em { font-style: italic; color: var(--brun); }
    .reviews-track-wrap {
      position: relative; width: 100%;
      overflow-x: auto; overflow-y: hidden;
      scroll-snap-type: x mandatory;
      scrollbar-width: none; -ms-overflow-style: none;
      cursor: grab;
    }
    .reviews-track-wrap::-webkit-scrollbar { display: none; }
    .reviews-track-wrap.dragging { cursor: grabbing; scroll-snap-type: none; }
    .reviews-track { display: flex; gap: 20px; }
    .review-card {
      min-width: calc((100% - 40px) / 3);
      max-width: calc((100% - 40px) / 3);
      background: var(--fond); border: 1px solid var(--beige);
      border-radius: 16px; padding: 24px 20px; flex-shrink: 0;
      box-sizing: border-box;
      scroll-snap-align: start;
      user-select: none;
    }
    .review-meta { font-size: 0.78rem; color: var(--brun); margin-bottom: 10px; font-weight: 400; }
    .review-date { opacity: 0.7; }
    .review-new {
      background: var(--brun); color: var(--creme); font-size: 0.6rem;
      padding: 2px 7px; border-radius: 20px; margin-left: 4px;
      vertical-align: middle; font-weight: 700; letter-spacing: 0.05em;
    }
    .review-stars { color: var(--brun); font-size: 1rem; margin-bottom: 10px; letter-spacing: 2px; }
    .review-text {
      font-size: 0.88rem; font-style: italic; line-height: 1.7;
      color: var(--texte); margin-bottom: 0;
    }
    .reviews-dots {
      display: flex; justify-content: center; gap: 8px; margin-top: 24px;
    }
    .reviews-dots button {
      width: 8px; height: 8px; border-radius: 50%; border: none;
      background: var(--beige); opacity: 0.4; cursor: pointer;
      transition: opacity 0.2s, transform 0.2s; padding: 0;
      position: relative;
    }
    /* Zone cliquable élargie (24px) sans agrandir le point visuel — les points
       étant très rapprochés (1 par avis), les halos se chevauchent légèrement
       entre voisins ; ça reste largement mieux que les 8px d'origine. */
    .reviews-dots button::before {
      content: ''; position: absolute; inset: -8px;
    }
    .reviews-dots button.active { opacity: 1; transform: scale(1.3); background: var(--brun); }

    /* ── FOOTER ── */
    footer {
      background: var(--profond); color: rgba(253,250,246,0.6);
      text-align: center; padding: 36px 24px;
      font-size: 0.8rem; letter-spacing: 0.05em;
    }
    footer a { color: var(--beige-clair); text-decoration: none; display: inline-block; padding: 6px 2px; }
    footer .footer-name {
      font-family: 'Playfair Display', serif; font-size: 1.1rem;
      color: var(--creme); margin-bottom: 8px;
    }

    /* ── NAV : bascule sur le burger dès que logo + 7 liens + bouton RDV ne
       tiennent plus sur une ligne (~1035-1085px selon la largeur du logo).
       Séparé du breakpoint mobile ci-dessous pour ne pas forcer tout le reste
       de la page (grilles, sections) en mise en page mobile sur cette plage
       de largeur "petit écran/tablette" où elles ont encore de la place. ── */
    @media (max-width: 1100px) {
      nav ul { display: none; }
      .burger { display: flex; }
    }

    /* ── RESPONSIVE MOBILE ── */
    @media (max-width: 768px) {
      nav { padding: 14px 20px; }

      section { padding: 60px 20px; }

      .hero-inner { padding: 0 8px; }
      .hero-subtitle { font-size: 0.95rem; }
      .btn-primary, .btn-outline {
        display: block; text-align: center;
        margin: 0 0 12px 0; padding: 15px 24px;
      }
      .btn-outline { margin-left: 0; }

      .apropos-grid { grid-template-columns: 1fr; gap: 32px; }
      .apropos-photo-placeholder { aspect-ratio: 1/1; border-radius: 12px 60px 12px 60px; }
      .apropos-badge { bottom: 12px; right: 12px; width: 80px; height: 80px; }
      .apropos-badge strong { font-size: 1.2rem; }

      .cards-grid { grid-template-columns: 1fr; gap: 14px; }
      .card { padding: 24px 20px; }

      .drainage-grid { grid-template-columns: 1fr; gap: 36px; }
      .drainage-visual-photo { height: 260px; border-radius: 40px 12px 40px 12px; }

      .tarifs-grid { grid-template-columns: 1fr; gap: 16px; }
      .tarif-group { padding: 24px 20px; }

      .contact-grid { grid-template-columns: 1fr; gap: 36px; }
      .contact-grid iframe { height: 240px; }

      .conseils-grid { grid-template-columns: 1fr; gap: 14px; }

      .review-card { min-width: 100%; max-width: 100%; }

      .wave-divider svg { height: 32px; }
    }

    @media (max-width: 480px) {
      .hero-title { font-size: 2rem; }
      .nav-logo span { display: none; }
    }