/* Dezinsect Corse — Gabarit commun des pages zones et pages legales */

:root { --primary-blue:#1A4DFB; --primary-blue-hover:#0F37BE; --text-main:#0F172A; --text-muted:#64748B; --border-color:#E2E8F0; --bg-soft:#F8FAFC; }
    * { box-sizing: border-box; }
    body { margin:0; font-family: var(--font-body); color:#334155; }
    .container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
    .zone-hero { text-align:center; padding: 32px 0 8px; }
    .zone-badge { display:inline-flex; align-items:center; gap:6px; background:#EDF2FF; color:var(--primary-blue-hover); font-weight:700; font-size:0.78rem; text-transform:uppercase; padding:6px 14px; border-radius:999px; margin-bottom:16px; }
    .zone-hero h1 { font-family: var(--font-heading); font-weight:800; font-size:clamp(1.7rem,3.4vw,2.5rem); color:var(--text-main); margin:0 0 14px; }
    .zone-hero h1 span { color: var(--primary-blue); }
    .zone-hero p { max-width:70ch; margin:0 auto; color:var(--text-muted); font-size:1.02rem; line-height:1.6; }
    .trust-row { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin: 24px 0 40px; }
    .trust-row span { display:flex; align-items:center; gap:6px; background:var(--bg-soft); border:1px solid var(--border-color); border-radius:999px; padding:8px 16px; font-size:0.85rem; font-weight:600; color:var(--text-main); }
    .section-header { text-align:center; margin: 40px 0 24px; }
    .section-header h2 { font-family: var(--font-heading); font-weight:800; font-size:clamp(1.4rem,2.6vw,1.9rem); color:var(--text-main); margin:0; }
    .services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; margin-bottom: 48px; }
    .service-card { background:#fff; border:1px solid var(--border-color); border-radius:16px; padding:24px; }
    .service-icon { width:52px; height:52px; border-radius:12px; background:#EDF2FF; color:var(--primary-blue); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
    .service-title { font-family: var(--font-heading); font-size:1.05rem; color:var(--text-main); margin:0 0 8px; }
    .service-desc { font-size:0.9rem; color:var(--text-muted); line-height:1.55; margin:0; }
    .service-desc a { color: var(--primary-blue); font-weight:600; text-decoration:none; }
    .geo-section { background:var(--bg-soft); border-radius:20px; padding:32px; margin-bottom:48px; }
    .geo-title { display:flex; align-items:center; gap:10px; font-family: var(--font-heading); font-size:1.3rem; color:var(--text-main); margin:0 0 14px; }
    .geo-text { color:var(--text-muted); font-size:0.95rem; line-height:1.6; margin:0 0 24px; }
    .geo-text a { color:var(--primary-blue); font-weight:600; text-decoration:none; }
    .zone-group { margin-bottom:20px; }
    .zone-title { font-family: var(--font-heading); font-weight:700; font-size:0.95rem; color:var(--text-main); margin-bottom:10px; }
    .commune-tags { display:flex; flex-wrap:wrap; gap:8px; }
    .tag { background:#fff; border:1px solid var(--border-color); border-radius:999px; padding:6px 14px; font-size:0.82rem; color:var(--text-main); }
    .tag.highlight { background:var(--primary-blue); color:#fff; border-color:var(--primary-blue); font-weight:700; }
    .faq-section { display:grid; gap:12px; margin-bottom: 56px; }
    .faq-item { background:#fff; border:1px solid var(--border-color); border-radius:14px; padding: 4px 20px; }
    .faq-item summary { padding:16px 0; font-weight:700; color:var(--text-main); cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:12px; list-style:none; }
    .faq-item summary::-webkit-details-marker { display:none; }
    .faq-icon { width:18px; height:18px; flex-shrink:0; color:var(--primary-blue); transition: transform .2s ease; }
    .faq-item[open] .faq-icon { transform: rotate(45deg); }
    .faq-answer p { margin:0 0 16px; color:var(--text-muted); font-size:0.92rem; line-height:1.6; }
    @media (max-width: 640px) { .zone-hero h1 { font-size:1.6rem; } }

/* --- issu de zones-dintervention.html --- */


    .cta-group {
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-items: center;
      justify-content: center;
    }


    .dept-heading {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 36px 0 4px 0;
    }


    .dept-heading h3 {
      font-size: 1.2rem;
      font-weight: 800;
      color: var(--primary);
    }


    .dept-badge-lg {
      font-size: 0.75rem;
      font-weight: 700;
      background: var(--blue-bg);
      color: var(--accent-blue-hover);
      padding: 3px 10px;
      border-radius: 6px;
    }


    .grid-zones {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
      margin-top: 16px;
    }


    .city-tag {
      display: inline-block;
      background: var(--bg-light);
      padding: 2px 8px;
      border-radius: 6px;
      border: 1px solid var(--card-border);
      color: var(--primary);
      font-weight: 600;
      text-decoration: none;
      margin: 2px 0;
    }


    .service-card-link {
      text-decoration: none;
      color: inherit;
      display: block;
    }


    .service-item {
      background: #FFFFFF;
      border-left: 4px solid var(--accent-blue);
      padding: 20px;
      border-radius: 0 12px 12px 0;
      border-top: 1px solid var(--card-border);
      border-right: 1px solid var(--card-border);
      border-bottom: 1px solid var(--card-border);
      transition: transform 0.2s, box-shadow 0.2s, border-left-color 0.2s;
    }


    .service-card-link:hover .service-item {
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.06);
      border-left-color: var(--accent-blue-hover);
    }


    .service-item h3 {
      color: var(--primary);
      font-size: 1.1rem;
      margin-bottom: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }


    .service-item h3::after {
      content: "<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="ico"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg>";
      font-size: 1rem;
      color: var(--accent-blue);
    }


    .seo-links-block {
      background: #FFFFFF;
      border: 1px solid var(--card-border);
      border-radius: 16px;
      padding: 24px;
      margin-top: 40px;
    }


    @media (min-width: 900px) {
      .grid-zones.triple { grid-template-columns: repeat(3, 1fr); }
    }