/* Page ville Roubaix — feuille dédiée. Créée le 2026-09-08.
   La page n'était liée à aucune feuille : 20 % de ses classes seulement
   étaient couvertes par les feuilles communes. */

:root{--page-accent:#146B67}

.section{padding:64px 0}
.section .container,.container{max-width:1200px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}
.section-title{font-size:clamp(1.6rem,3.2vw,2.2rem);line-height:1.25;color:var(--primary);margin:0 0 12px;text-align:center;font-weight:700}
.section-subtitle{font-size:1.02rem;line-height:1.65;color:var(--text-secondary);text-align:center;max-width:760px;margin:0 auto 36px}
.section-title+.services-grid,.section-title+.benefits-grid,.section-title+.faq-list{margin-top:32px}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;background-size:cover;background-position:center;background-repeat:no-repeat;color:var(--white);isolation:isolate}
.hero-lg{min-height:460px;display:flex;align-items:center;padding:88px 0}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(100deg,rgba(27,31,75,.88) 0%,rgba(27,31,75,.72) 55%,rgba(20,107,103,.62) 100%);z-index:-1}
.hero-content{position:relative;max-width:880px}
.hero-title{font-size:clamp(1.85rem,4.4vw,2.9rem);line-height:1.18;font-weight:700;margin:0 0 18px;color:var(--white);text-wrap:balance}
.hero-subtitle{font-size:clamp(1rem,1.6vw,1.15rem);line-height:1.65;margin:0;color:rgba(255,255,255,.94);max-width:720px}

/* ------------------------------------------------------------ services */
.section-services-lille{background:var(--white)}
.services-grid{display:grid;gap:20px}
.services-grid-4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.service-card{background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:26px 22px;display:flex;flex-direction:column;transition:border-color .18s ease,transform .18s ease}
.service-card:hover{border-color:var(--page-accent);transform:translateY(-2px)}
.service-card-title{font-size:1.12rem;font-weight:650;color:var(--primary);margin:0 0 10px}
.service-card-description{font-size:.97rem;line-height:1.62;color:var(--text-secondary);margin:0 0 18px;flex:1}
.service-card-link{font-size:.95rem;font-weight:600;color:var(--page-accent);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.service-card-link:hover{text-decoration:underline}
.service-card-link::after{content:"→";font-size:1.05em;line-height:1}

/* ------------------------------------------------------------ benefits */
.section-local-benefits{background:var(--cool-bg)}
.benefits-grid{display:grid;gap:22px}
.benefits-grid-3{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.benefit-card{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:28px 24px}
.benefit-icon{width:44px;height:44px;border-radius:11px;background:rgba(20,107,103,.1);color:var(--page-accent);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.benefit-title{font-size:1.1rem;font-weight:650;color:var(--primary);margin:0 0 9px}
.benefit-text{font-size:.97rem;line-height:1.65;color:var(--text-secondary);margin:0}

/* ------------------------------------------- contexte local & zone */
.section-local-context{background:var(--white)}
.section-local-context .container>h3,.section-local-context .container>p{max-width:820px;margin-left:auto;margin-right:auto}
.section-local-context .container>h3{font-size:1.18rem;font-weight:650;color:var(--primary);margin-top:34px;margin-bottom:12px}
.section-local-context .container>h3:first-of-type{margin-top:8px}
.section-local-context .container>p{font-size:1.02rem;line-height:1.75;color:var(--text);margin-top:0;margin-bottom:16px}
.section-local-context .container>p:last-child{margin-bottom:0}
.section-local-context a{color:var(--page-accent);text-decoration:underline;text-underline-offset:2px}

.section-zone-coverage{background:var(--bg)}
.zone-list{max-width:900px;margin:0 auto}
.zone-list ul{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0;padding:0;list-style:none}
.zone-list li{background:var(--white);border:1px solid var(--border);border-radius:999px;padding:9px 17px;font-size:.94rem;color:var(--text);line-height:1.2}
.zone-list li::marker{content:""}
.zone-list a{color:inherit;text-decoration:none;display:block}
.zone-list li:has(a):hover{border-color:var(--page-accent)}
.zone-list li:has(a):hover a{color:var(--page-accent)}

/* ----------------------------------------------------------------- faq */
.section-faq-lille{background:var(--white)}
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{background:var(--bg);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.faq-item:has(.faq-toggle[aria-expanded="true"]){border-color:var(--page-accent)}
.faq-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:19px 22px;background:none;border:0;cursor:pointer;text-align:left;font:inherit;color:var(--primary)}
.faq-toggle:hover{background:rgba(20,107,103,.05)}
.faq-toggle:focus-visible{outline:2px solid var(--page-accent);outline-offset:-2px}
.faq-question{font-size:1.02rem;font-weight:600;line-height:1.45}
.faq-toggle svg,.faq-toggle .icon-small{flex:0 0 auto;transition:transform .2s ease;color:var(--page-accent)}
.faq-toggle[aria-expanded="true"] svg,.faq-toggle[aria-expanded="true"] .icon-small{transform:rotate(180deg)}
.faq-answer{padding:0 22px 20px}
.faq-answer p{font-size:.98rem;line-height:1.7;color:var(--text-secondary);margin:0}

/* ----------------------------------------------------------------- cta */
.section-cta{background:var(--dark-bg);color:var(--white)}
.cta-content{max-width:760px;margin:0 auto;text-align:center}
.cta-title{font-size:clamp(1.5rem,3vw,2rem);line-height:1.25;font-weight:700;color:var(--white);margin:0 0 14px}
.cta-subtitle{font-size:1.02rem;line-height:1.65;color:rgba(255,255,255,.9);margin:0 0 28px}
.cta-buttons{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* -------------------------------------------------------------- boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;font-weight:600;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background-color .18s ease,color .18s ease,border-color .18s ease;padding:12px 22px;font-size:.98rem;line-height:1}
.btn-lg{padding:15px 30px;font-size:1.03rem}
.btn-primary{background:var(--page-accent);color:var(--white);border-color:var(--page-accent)}
.btn-primary:hover{background:#0F5B58;border-color:#0F5B58}
.btn-secondary{background:transparent;color:var(--white);border-color:rgba(255,255,255,.7)}
.btn-secondary:hover{background:var(--white);color:var(--primary);border-color:var(--white)}

/* --------------------------------------------------------------- icônes */
.icon-small{width:18px;height:18px;display:inline-block}
.icon-medium{width:22px;height:22px;display:inline-block}
/* Repli si Lucide ne charge pas : une pastille pleine plutôt qu'un carré vide */
.benefit-icon:not(:has(svg)){background:var(--page-accent)}
.benefit-icon:not(:has(svg))::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--white)}
.faq-toggle:not(:has(svg))::after{content:"+";font-size:1.35rem;line-height:1;color:var(--page-accent);font-weight:400}
.faq-toggle[aria-expanded="true"]:not(:has(svg))::after{content:"–"}

/* ------------------------------------------------------------ responsive */
@media (max-width:768px){
  .section{padding:44px 0}
  .hero-lg{min-height:0;padding:60px 0}
  .services-grid-4,.benefits-grid-3{grid-template-columns:1fr}
  .service-card,.benefit-card{padding:22px 18px}
  .faq-toggle{padding:16px 18px}
  .faq-answer{padding:0 18px 17px}
  .cta-buttons .btn{width:100%}
}