/* ============================================================
 * ISO&FACE — Page Commune (locale ville)
 *
 * Styles spécifiques au template `page-commune.php` :
 *   - bloc iso/commune-hero (hero local)
 *   - section .commune-content (wrapper du contenu SEO existant)
 *
 * Le reste des sections (banner-group, pillar-row, reasons-stack,
 * cert-banner, banner-reviews) hérite des styles globaux.
 * ============================================================ */

/* ----------------------------------------------------------------
 *  Breadcrumbs (utilisés par plusieurs templates)
 * ---------------------------------------------------------------- */
.crumbs{
  padding:16px 40px; font-size:12px; color:var(--ink-3);
  background:var(--paper-2);
}
.crumbs b{ color:var(--ink); font-weight:600 }
.crumbs a{ color:var(--ink-3); text-decoration:none }
.crumbs a:hover{ color:var(--brand) }

/* ================================================================
 *  iso/commune-hero — hero pour pages locales
 * ================================================================ */
.commune-hero{
  background:var(--paper-2);
  padding:56px 24px 64px;
}
.commune-hero .wrap{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
}

.commune-hero-text .eyebrow{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:700; letter-spacing:.8px;
  text-transform:uppercase; color:var(--brand);
  background:var(--brand-soft); padding:5px 10px; border-radius:999px;
}
.commune-hero-text .eyebrow .dot{
  width:6px; height:6px; border-radius:50%; background:var(--brand);
}

.commune-hero h1{
  font-family:"Google Sans Flex","Inter",sans-serif; font-weight:700;
  font-size:56px; color:var(--ink); letter-spacing:-1.4px; line-height:1.02;
  margin:14px 0 16px;
}
.commune-hero h1 em{ color:var(--ink); font-style:normal }
.commune-hero h1 .dot-o{ color:var(--accent); font-style:normal }

.commune-hero .lead{
  max-width:540px;
  font-size:17px; line-height:1.55; color:var(--ink-2);
  margin:0 0 22px;
}

.commune-hero .hero-cta{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-bottom:22px;
}

.commune-hero .badge-row{
  display:flex; gap:10px; flex-wrap:wrap;
}
.commune-hero .info-pill{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--line);
  padding:8px 14px; border-radius:var(--radius-full, 999px);
  font-size:13px; color:var(--ink-2); font-weight:500;
}
.commune-hero .info-pill .dot{
  width:7px; height:7px; border-radius:50%; background:var(--brand);
}

.commune-hero-illus{
  position:relative; aspect-ratio: 4 / 3;
  background:#fff center/cover no-repeat;
  border-radius:24px; overflow:hidden;
  box-shadow:0 10px 30px rgba(19,67,52,.08);
}
.commune-hero-illus--placeholder{
  background:
    repeating-linear-gradient(45deg, var(--paper) 0 14px, var(--paper-2) 14px 28px);
  border:1px dashed var(--line);
}
.commune-hero-illus .tag{
  position:absolute; left:14px; bottom:14px;
  background:rgba(255,255,255,.92); border:1px solid var(--line);
  color:var(--ink); font-size:12.5px; font-weight:500;
  padding:6px 10px; border-radius:8px;
}

/* ================================================================
 *  .commune-content — wrapper du contenu SEO existant
 * ================================================================ */
.commune-content{ padding:48px 24px }
.commune-content > .wrap{ max-width:1180px; margin:0 auto }
.commune-content-inner{
  max-width:820px; margin:0 auto;
  font-size:16px; line-height:1.65; color:var(--ink-2);
}
.commune-content-inner h2,
.commune-content-inner h3{
  font-family:"Google Sans Flex","Inter",sans-serif;
  color:var(--ink); margin:32px 0 14px; line-height:1.2;
}
.commune-content-inner h2{ font-size:28px; letter-spacing:-.6px }
.commune-content-inner h3{ font-size:22px; letter-spacing:-.4px }
.commune-content-inner h2 em,
.commune-content-inner h3 em{ color:var(--brand); font-style:normal }
.commune-content-inner p{ margin:0 0 16px }
.commune-content-inner ul,
.commune-content-inner ol{ margin:0 0 16px 22px; padding:0 }
.commune-content-inner li{ margin-bottom:6px }
.commune-content-inner strong{ color:var(--ink); font-weight:700 }
.commune-content-inner a{ color:var(--brand); text-decoration:underline }
.commune-content-inner a:hover{ color:var(--accent) }
.commune-content-inner img{ max-width:100%; height:auto; border-radius:14px }
.commune-content-inner .wp-block-columns{ gap:24px; margin:24px 0 }
.commune-content-inner .wp-block-group{ background:transparent !important }
.commune-content-inner figure{ margin:24px 0 }

/* ================================================================
 *  iso/local-backlinks — maillage interne SEO
 * ================================================================ */
.sec-local-backlinks{
  background:var(--paper-2);
  padding:48px 24px;
}
.sec-local-backlinks > .wrap{ max-width:1180px; margin:0 auto }

.local-backlinks-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:32px;
}

.local-backlinks-col{
  background:#fff; border:1px solid var(--line);
  border-radius:18px; padding:24px 28px;
}

.local-backlinks-title{
  margin:0 0 16px;
  font-family:"Google Sans Flex","Inter",sans-serif;
  font-size:20px; font-weight:700; line-height:1.25;
  color:var(--ink); letter-spacing:-.3px;
}
.local-backlinks-title em{
  color:var(--brand); font-style:normal; background:none !important; padding:0;
}

.local-backlinks-list{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:1fr 1fr; gap:6px 18px;
}
.local-backlinks-list--cities{
  grid-template-columns:1fr 1fr 1fr;
}
.local-backlinks-list li{ margin:0 }
.local-backlinks-list a{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 0;
  font-size:14px; color:var(--ink-2); text-decoration:none;
  transition:color .15s ease;
}
.local-backlinks-list a:hover{ color:var(--brand) }
.local-backlinks-list a .arrow{
  color:var(--brand); font-weight:700; flex-shrink:0;
}

/* ----------------------------------------------------------------
 *  Responsive
 * ---------------------------------------------------------------- */
@media (max-width: 1024px){
  .commune-hero .wrap{ grid-template-columns:1fr; gap:28px }
  .commune-hero-illus{ aspect-ratio: 16 / 10 }
}
@media (max-width: 768px){
  .commune-hero{ padding:36px 16px 44px }
  .commune-hero h1{ font-size:34px; letter-spacing:-.8px }
  .commune-hero .lead{ font-size:15.5px }
  .commune-content{ padding:32px 16px }
  .commune-content-inner{ font-size:15.5px }
  .commune-content-inner h2{ font-size:24px }
  .commune-content-inner h3{ font-size:19px }
  .crumbs{ padding:12px 18px }

  .sec-local-backlinks{ padding:28px 16px }
  .local-backlinks-grid{ grid-template-columns:1fr; gap:16px }
  .local-backlinks-col{ padding:18px 20px }
  .local-backlinks-list,
  .local-backlinks-list--cities{ grid-template-columns:1fr 1fr }
}