:root {
    /* Palette charte Ma Commune Live : vert vif + marine */
    --primary: #2ECC71;
    --primary-dark: #27AE60;
    --primary-deep: #1E8449;
    --primary-light: #D4EFDF;
    --primary-soft: #F4FBF7;

    /* Neutres : beige chaud (papier) → ivoire → marine profond */
    --bg: #F7F5EF;
    --bg-warm: #EFECE2;
    --surface: #FFFFFF;
    --surface-dark: #002147;

    /* Texte : marine de la charte */
    --text: #002147;
    --text-mid: #556661;
    --text-light: #8A9A94;

    /* Accents pastel pour les icônes de modules (variés, vivants) */
    --accent-blue: #2563EB;
    --accent-blue-soft: #DBEAFE;
    --accent-violet: #7C3AED;
    --accent-violet-soft: #EDE9FE;
    --accent-green: #059669;
    --accent-green-soft: #D1FAE5;
    --accent-orange: #EA580C;
    --accent-orange-soft: #FED7AA;
    --accent-amber: #D97706;
    --accent-amber-soft: #FEF3C7;
    --accent-rose: #E11D48;
    --accent-rose-soft: #FFE4E6;

    --border: #E5E0D6;
    --border-strong: #D3CCBE;

    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 20px;
    --shadow-sm: 0 1px 2px rgba(0, 33, 71, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 33, 71, 0.06), 0 2px 4px rgba(0, 33, 71, 0.04);
    --shadow-lg: 0 20px 40px rgba(0, 33, 71, 0.08), 0 8px 16px rgba(0, 33, 71, 0.04);
    --shadow-primary: 0 20px 40px rgba(46, 204, 113, 0.30);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  :target, section[id] { scroll-margin-top: 90px; }
  body {
    font-family: 'Source Sans 3', system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    font-size: 17px;
  }

  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; cursor: pointer; border: none; background: none; }

  .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
  .section { padding: 100px 0; position: relative; }

  h1, h2, h3, h4 {
    font-family: 'Bricolage Grotesque', sans-serif;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text);
  }
  h1 { font-size: clamp(38px, 5.5vw, 64px); font-weight: 800; }
  h2 { font-size: clamp(30px, 4vw, 44px); font-weight: 700; }
  h3 { font-size: clamp(20px, 2vw, 26px); font-weight: 700; letter-spacing: -0.01em; }
  p { color: var(--text-mid); font-size: 17px; }
  .lead { font-size: 20px; color: var(--text-mid); line-height: 1.5; }
  .lead a {
    color: var(--primary); text-decoration: underline;
    text-underline-offset: 3px; font-weight: 600;
    transition: color 0.2s;
  }
  .lead a:hover { color: var(--primary-dark); }

  .eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.15em;
    color: var(--primary);
    padding: 6px 14px;
    background: var(--primary-light);
    border-radius: 50px;
    margin-bottom: 20px;
  }
  .eyebrow.eyebrow-green { color: var(--accent-green); background: var(--accent-green-soft); }
  .eyebrow.eyebrow-orange { color: var(--accent-orange); background: var(--accent-orange-soft); }

  /* NAV */
  .nav {
    position: sticky; top: 0; z-index: 100;
    background: rgba(247, 245, 239, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
  }
  .nav.scrolled { border-bottom-color: var(--border); }
  .nav-inner {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 0;
  }
  .logo {
    display: inline-flex; align-items: center;
    gap: 6px;
  }
  .logo-text {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800; font-size: 22px;
    letter-spacing: -0.02em;
    color: var(--text);
    line-height: 1;
  }
  .logo-mark-svg {
    height: 30px; width: auto;
    display: block;
  }
  @media (max-width: 480px) {
    .logo-text { font-size: 18px; }
    .logo-mark-svg { height: 24px; }
  }
  .nav-menu { display: flex; gap: 32px; }
  .nav-menu a {
    font-size: 16px; font-weight: 500; color: var(--text-mid);
    transition: color 0.2s;
  }
  .nav-menu a:hover { color: var(--text); }
  .nav-cta {
    padding: 10px 20px; border-radius: 8px;
    background: var(--primary); color: white;
    font-size: 14px; font-weight: 600;
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .nav-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(46, 204, 113, 0.25); }
  @media (max-width: 900px) { .nav-menu { display: none; } }

  /* HERO */
  .hero {
    padding: 80px 0 80px;
    position: relative;
    overflow: hidden;
  }
  .hero::before {
    content: '';
    position: absolute;
    top: -10%; right: -10%;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(46, 204, 113, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
  }
  .hero::after {
    content: '';
    position: absolute;
    bottom: -10%; left: -5%;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
  }

  .hero-inner { position: relative; z-index: 1; text-align: center; max-width: 880px; margin: 0 auto; }
  .hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px; border-radius: 50px;
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 13px; color: var(--text-mid); font-weight: 500;
    margin-bottom: 28px;
    box-shadow: var(--shadow-sm);
  }
  .hero-badge .pulse {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent-green);
    position: relative;
  }
  .hero-badge .pulse::before {
    content: '';
    position: absolute; inset: -4px;
    border-radius: 50%;
    background: var(--accent-green);
    opacity: 0.3;
    animation: pulse 2s ease-out infinite;
  }
  @keyframes pulse {
    0% { transform: scale(0.8); opacity: 0.5; }
    100% { transform: scale(2.5); opacity: 0; }
  }

  .hero h1 {
    font-size: clamp(40px, 6vw, 72px);
    font-weight: 800;
    margin-bottom: 24px;
  }
  .hero h1 .gradient {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent-orange) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .hero-sub {
    font-size: 20px; line-height: 1.55;
    color: var(--text-mid);
    max-width: 620px; margin: 0 auto 48px;
  }

  .dual-paths {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 880px;
    margin: 0 auto;
  }
  @media (max-width: 720px) { .dual-paths { grid-template-columns: 1fr; } }
  .path-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 36px 32px;
    text-align: left;
    transition: all 0.3s cubic-bezier(.4,0,.2,1);
    position: relative;
    overflow: hidden;
  }
  .path-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
  }
  .path-card.citizen::before { background: var(--accent-green); }
  .path-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
  }
  .path-card.citizen:hover { border-color: var(--accent-green); }
  .path-card:hover::before { transform: scaleX(1); }
  .path-icon {
    width: 48px; height: 48px; border-radius: 12px;
    background: var(--primary-light);
    display: flex; align-items: center; justify-content: center;
    color: var(--primary);
    margin-bottom: 20px;
  }
  .path-card.citizen .path-icon { background: var(--accent-green-soft); color: var(--accent-green); }
  .path-badge {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--primary); margin-bottom: 8px;
  }
  .path-card.citizen .path-badge { color: var(--accent-green); }
  .path-card h3 { font-size: 26px; margin-bottom: 12px; }
  .path-card p { margin-bottom: 24px; color: var(--text-mid); line-height: 1.5; }
  .path-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 20px; border-radius: 10px;
    background: var(--primary); color: white;
    font-weight: 600; font-size: 15px;
    transition: transform 0.2s;
  }
  .path-card.citizen .path-btn { background: var(--accent-green); }
  .path-btn:hover { transform: translateX(2px); }

  .trust-row {
    display: flex; justify-content: center; gap: 14px;
    margin-top: 48px;
    font-size: 14px; color: var(--text-mid);
    flex-wrap: wrap;
  }
  .trust-row > span,
  .trust-row > a {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 500;
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
  }
  .trust-row > a:hover {
    color: var(--primary-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .trust-row svg { width: 16px; height: 16px; color: var(--accent-green); flex-shrink: 0; }

  /* WHY US */
  .why-us { background: var(--surface); border-top: 1px solid var(--border); }
  .section-header { text-align: center; max-width: 680px; margin: 0 auto 60px; }
  .section-header h2 { margin-bottom: 16px; }

  .benefits {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
  @media (max-width: 900px) { .benefits { grid-template-columns: 1fr; } }
  .benefit {
    padding: 40px 32px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    position: relative;
    transition: transform 0.3s;
  }
  .benefit:hover { transform: translateY(-3px); }
  .benefit-icon {
    width: 52px; height: 52px; border-radius: 14px;
    background: white;
    display: flex; align-items: center; justify-content: center;
    color: var(--primary);
    margin-bottom: 24px;
    border: 1px solid var(--border);
  }
  .benefit:nth-child(2) .benefit-icon { color: var(--accent-green); }
  .benefit:nth-child(3) .benefit-icon { color: var(--accent-orange); }
  .benefit h3 { margin-bottom: 10px; font-size: 22px; }
  .benefit p { line-height: 1.55; }
  .benefit .highlight {
    display: inline-block;
    margin-top: 16px; padding: 4px 10px;
    background: var(--primary-light); color: var(--primary);
    border-radius: 50px; font-size: 13px; font-weight: 600;
  }
  .benefit:nth-child(2) .highlight { background: var(--accent-green-soft); color: var(--accent-green); }
  .benefit:nth-child(3) .highlight { background: var(--accent-orange-soft); color: var(--accent-orange); }

  /* MODULES */
  .modules-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  }
  @media (max-width: 1000px) { .modules-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 720px) { .modules-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { .modules-grid { grid-template-columns: 1fr; } }
  .module {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px 20px;
    transition: all 0.3s ease;
    position: relative;
  }
  .module:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
  }
  .module-icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
  }
  .module-icon svg { width: 20px; height: 20px; }
  .module h4 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 16px; font-weight: 700; color: var(--text);
    margin-bottom: 6px;
    line-height: 1.2;
  }
  .module p { font-size: 13.5px; line-height: 1.45; color: var(--text-mid); }
  .module.popular::after {
    content: 'POPULAIRE';
    position: absolute; top: -8px; right: 12px;
    background: var(--accent-orange); color: white;
    font-size: 9px; font-weight: 800; letter-spacing: 0.1em;
    padding: 3px 8px; border-radius: 4px;
  }

  .ic-blue { background: var(--accent-blue-soft); color: var(--accent-blue); }
  .ic-violet { background: var(--accent-violet-soft); color: var(--accent-violet); }
  .ic-green { background: var(--accent-green-soft); color: var(--accent-green); }
  .ic-orange { background: var(--accent-orange-soft); color: var(--accent-orange); }
  .ic-pink { background: var(--accent-rose-soft); color: var(--accent-rose); }
  .ic-red { background: var(--accent-rose-soft); color: var(--accent-rose); }
  .ic-primary { background: var(--primary-light); color: var(--primary); }

  /* CITIZEN SECTION : surface crème teintée teal, un seul halo pour la profondeur */
  .citizen-section {
    background: var(--primary-soft);
    color: var(--text); position: relative; overflow: hidden;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .citizen-section::before {
    content: '';
    position: absolute; top: -150px; right: -150px;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(46, 204, 113, 0.10) 0%, transparent 65%);
    border-radius: 50%;
    pointer-events: none;
  }
  .citizen-section h2, .citizen-section h3 { color: var(--text); }
  .citizen-section .eyebrow {
    background: var(--primary); color: white;
  }
  .citizen-inner {
    display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
    align-items: center; position: relative; z-index: 1;
  }
  @media (max-width: 900px) { .citizen-inner { grid-template-columns: 1fr; gap: 48px; } }
  .citizen-text p { color: var(--text-mid); margin-bottom: 32px; font-size: 18px; }
  .citizen-list {
    list-style: none; margin-bottom: 36px;
  }
  .citizen-list li {
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 14px;
    color: var(--text); font-size: 15px;
  }
  .citizen-list li:last-child { border-bottom: none; }
  .citizen-list li::before {
    content: ''; width: 22px; height: 22px; flex-shrink: 0;
    border-radius: 50%;
    background: var(--primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
  }

  /* Bloc téléchargement section #telecharger : 2 boutons stores + carte QR alignés.
     min-height commune force la même hauteur sur les 3 éléments. */
  .download-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .download-btns { display: flex; gap: 12px; flex-wrap: wrap; }
  .download-row .dl-btn,
  .download-row .dl-qr { min-height: 64px; box-sizing: border-box; }

  /* Carte QR : reprend l'esthétique pill des .dl-btn mais en variante outline claire */
  .dl-qr {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 18px 6px 6px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  }
  .dl-qr:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
  }
  .dl-qr img {
    display: block;
    width: 52px; height: 52px;
    border-radius: 4px;
    background: white;
    flex-shrink: 0;
  }
  .dl-qr small { display: block; font-size: 11px; font-weight: 500; color: var(--text-mid); margin-bottom: -2px; }
  .dl-qr strong { font-weight: 700; font-size: 15px; color: var(--text); }
  .dl-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 20px; border-radius: 10px;
    background: var(--text); color: white;
    font-weight: 600; font-size: 15px;
    transition: transform 0.2s, background 0.2s;
  }
  .dl-btn:hover { transform: translateY(-2px); background: var(--primary-deep); }
  .dl-btn small { display: block; font-size: 11px; font-weight: 500; opacity: 0.6; margin-bottom: -2px; }
  .dl-btn strong { font-weight: 700; font-size: 16px; }

  /* Variante "Bientôt" : bouton non-cliquable pour un store pas encore publié */
  .dl-btn-soon {
    position: relative;
    background: var(--text-mid);
    opacity: 0.65;
    cursor: not-allowed;
  }
  .dl-btn-soon:hover { transform: none; background: var(--text-mid); }
  .dl-btn-soon-badge {
    position: absolute;
    top: -8px; right: -8px;
    background: var(--primary);
    color: white;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    padding: 3px 8px; border-radius: 50px;
    box-shadow: 0 2px 6px rgba(46, 204, 113, 0.4);
  }

  /* Badge "Bientôt disponible" - affiché tant que macl_get_app_stores()['available'] est false */
  .download-soon {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 14px 20px; border-radius: 12px;
    background: var(--primary-soft);
    border: 1.5px solid var(--primary-light);
    color: var(--text);
  }
  .download-soon-pulse {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.6);
    animation: download-soon-pulse 2s infinite;
    flex-shrink: 0;
  }
  .download-soon-text { display: flex; flex-direction: column; line-height: 1.3; }
  .download-soon-text strong { font-weight: 700; font-size: 15px; color: var(--primary-deep); }
  .download-soon-text > span { font-size: 13px; color: var(--text-mid); }
  @keyframes download-soon-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.55); }
    70%  { box-shadow: 0 0 0 12px rgba(46, 204, 113, 0); }
    100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
  }

  /* PAGE TÉLÉCHARGEMENT APP (/app/) - template page-app-redirect.php */
  .app-redirect-page {
    padding: 60px 0 80px;
    background: var(--bg);
    min-height: calc(100vh - 80px);
  }
  .app-redirect-content {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
  }
  .app-redirect-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px;
    background: var(--primary-light);
    border-radius: 50px;
    font-size: 13px; font-weight: 600;
    color: var(--primary-deep);
    margin-bottom: 24px;
  }
  .app-redirect-content h1 {
    font-size: clamp(32px, 4.5vw, 48px);
    margin-bottom: 16px;
  }
  .app-redirect-lead {
    font-size: 18px;
    color: var(--text-mid);
    margin-bottom: 48px;
    line-height: 1.5;
  }
  .app-redirect-qr-block {
    display: flex; align-items: center; gap: 32px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-md);
    margin-bottom: 32px;
    text-align: left;
  }
  .app-redirect-qr {
    flex-shrink: 0;
    padding: 12px;
    background: white;
    border-radius: var(--radius);
    border: 1px solid var(--border);
  }
  .app-redirect-qr img {
    display: block;
    width: 200px; height: 200px;
  }
  .app-redirect-qr-text strong {
    display: block;
    font-size: 18px; font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
  }
  .app-redirect-qr-text p {
    font-size: 15px; line-height: 1.5;
    margin: 0;
  }
  .app-redirect-or {
    display: flex; align-items: center; gap: 16px;
    margin: 32px 0 24px;
    color: var(--text-light);
    font-size: 14px;
  }
  .app-redirect-or::before,
  .app-redirect-or::after {
    content: ''; flex: 1; height: 1px; background: var(--border);
  }
  .app-redirect-btns {
    justify-content: center;
    margin-bottom: 64px;
  }
  .app-redirect-features {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
    text-align: left;
    padding-top: 48px;
    border-top: 1px solid var(--border);
  }
  .app-redirect-feature {
    padding: 20px;
  }
  .app-redirect-feature .feature-icon {
    width: 44px; height: 44px; border-radius: 10px;
    background: var(--primary-light);
    color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 12px;
  }
  .app-redirect-feature strong {
    display: block;
    font-size: 16px; font-weight: 700;
    margin-bottom: 6px;
  }
  .app-redirect-feature span {
    font-size: 14px;
    color: var(--text-mid);
    line-height: 1.5;
  }
  /* Note discrète sous les boutons stores : passerelle pour les élus */
  .app-redirect-elu-note {
    margin: 32px 0 48px;
    padding: 14px 20px;
    background: var(--primary-soft);
    border: 1px solid var(--primary-light);
    border-radius: 10px;
    color: var(--text-mid);
    font-size: 15px;
    text-align: center;
  }
  .app-redirect-elu-note a {
    color: var(--primary-deep);
    font-weight: 600;
    text-decoration: none;
  }
  .app-redirect-elu-note a:hover { text-decoration: underline; text-underline-offset: 3px; }

  @media (max-width: 680px) {
    .app-redirect-qr-block { flex-direction: column; text-align: center; gap: 20px; }
    .app-redirect-features { grid-template-columns: 1fr; gap: 8px; }
    .app-redirect-feature { padding: 12px; }
  }

  /* PHONE MOCKUP fidèle à l'app réelle */
  .phone-wrap {
    display: flex; justify-content: center; position: relative;
  }
  .phone {
    width: 290px;
    aspect-ratio: 9 / 19.5;
    background: #1a1a1c;
    border-radius: 42px;
    padding: 10px;
    box-shadow:
      0 30px 80px rgba(0,0,0,0.5),
      0 0 0 8px rgba(255,255,255,0.05);
    position: relative;
    transform: rotate(-2deg);
    transition: transform 0.5s;
  }
  .phone:hover { transform: rotate(0deg) scale(1.02); }
  .phone-notch {
    position: absolute; top: 14px; left: 50%;
    transform: translateX(-50%);
    width: 100px; height: 26px;
    background: #0a0810; border-radius: 20px;
    z-index: 3;
  }
  .phone-screen {
    width: 100%; height: 100%;
    background: #f5f5f7;
    border-radius: 32px;
    overflow: hidden;
    position: relative;
    display: flex; flex-direction: column;
  }
  .phone-screenshot {
    width: 100%; height: 100%;
    display: block;
    object-fit: cover;
    object-position: top;
  }

  /* COMPARISON */
  .compare-table {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-top: 40px;
  }
  .compare-row {
    display: grid; grid-template-columns: 2fr 1fr 1fr;
    border-bottom: 1px solid var(--border);
    align-items: center;
  }
  .compare-row:last-child { border-bottom: none; }
  .compare-row.header {
    background: var(--bg-warm);
    font-weight: 700;
  }
  .compare-row.highlight {
    background: linear-gradient(90deg, transparent, rgba(46, 204, 113, 0.03));
  }
  .compare-cell {
    padding: 18px 24px;
    font-size: 15px;
  }
  .compare-cell.label { color: var(--text); font-weight: 500; }
  .compare-cell.center { text-align: center; }
  .compare-cell.mcl {
    background: rgba(46, 204, 113, 0.04);
    color: var(--primary);
    font-weight: 600;
    border-left: 1px solid rgba(46, 204, 113, 0.15);
  }
  .compare-row.header .compare-cell.mcl {
    background: var(--primary); color: white;
    font-family: 'Bricolage Grotesque', sans-serif;
  }
  .compare-row.header .compare-cell:nth-child(2) {
    color: var(--text-mid); text-align: center;
  }
  .cross { color: var(--accent-rose); font-size: 18px; margin-right: 6px; vertical-align: middle; }
  .warn { color: var(--accent-amber); font-size: 18px; margin-right: 6px; vertical-align: middle; }
  .check { color: var(--accent-green); font-size: 18px; }
  .in-option {
    display: inline-block; font-size: 14px;
    color: var(--text-mid); margin-left: 4px;
    font-style: italic;
  }
  @media (max-width: 720px) {
    .in-option { display: block; margin-left: 0; margin-top: 2px; font-size: 13px; }
  }
  .compare-price { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; }
  .compare-row:not(.highlight) .compare-cell.center:not(.mcl) { color: var(--text-mid); }
  .compare-row.highlight .compare-cell.center:not(.mcl) { color: var(--text-mid); }

  /* Sous-texte dans les cellules du tableau comparatif (précisions, mentions légères) */
  .compare-cell .cell-sub {
    display: block;
    font-size: 12px;
    color: var(--text-light);
    font-weight: 400;
    margin-top: 3px;
    line-height: 1.4;
  }
  .compare-row.header .compare-cell .cell-sub { color: rgba(255, 255, 255, 0.75); }

  /* Note de bas de tableau comparatif */
  .compare-note {
    max-width: 820px; margin: 20px auto 0;
    text-align: center;
    font-size: 12px; color: var(--text-light);
    line-height: 1.5;
  }
  @media (max-width: 720px) {
    .compare-row { grid-template-columns: 1fr; }
    .compare-cell { padding: 10px 20px; }
    .compare-cell.mcl { border-left: none; border-top: 1px solid rgba(46, 204, 113, 0.15); }
  }

  /* PRICING CTA */
  /* ========== SIMULATEUR INTÉGRÉ ========== */
  /* Section compactée : padding réduit par rapport aux autres sections */
  #tarifs.section { padding: 64px 0 72px; }
  .sim-wrap { max-width: 820px; margin: 0 auto; }
  .sim-intro { text-align: center; margin-bottom: 24px; }
  .sim-intro h2 { margin-bottom: 10px; }
  .sim-intro p { font-size: 17px; color: var(--text-mid); max-width: 560px; margin: 0 auto; }

  .sim-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 22px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
  }
  .sim-card-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 16px; font-weight: 700;
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 6px;
  }
  .sim-step {
    width: 26px; height: 26px;
    background: var(--primary); color: white;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; flex-shrink: 0;
  }
  .sim-card-sub {
    font-size: 14px; color: var(--text-light);
    margin-bottom: 14px; padding-left: 36px;
  }

  /* Engagement */
  .engagement-options {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  }
  @media (max-width: 560px) { .engagement-options { grid-template-columns: 1fr; } }
  .engagement-btn {
    padding: 14px 12px; border-radius: 10px;
    border: 2px solid var(--border); background: var(--surface);
    font-family: 'Source Sans 3', sans-serif; font-size: 14px; font-weight: 600;
    color: var(--text-mid); cursor: pointer; transition: all 0.25s ease;
    position: relative; text-align: center;
  }
  .engagement-btn:hover { border-color: var(--primary); }
  .engagement-btn.active {
    border-color: var(--primary); background: var(--primary-soft);
    color: var(--text); box-shadow: var(--shadow-sm);
  }
  .engagement-btn .dur {
    display: block; font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 20px; font-weight: 800; color: var(--text); margin-bottom: 2px;
  }
  .engagement-btn.active .dur { color: var(--primary); }
  .engagement-btn .bonus {
    display: block; font-size: 12px; color: var(--accent-green);
    font-weight: 700; margin-top: 4px;
  }
  .engagement-badge {
    position: absolute; top: -9px; right: 10px;
    background: var(--accent-green); color: white;
    font-size: 9px; font-weight: 700; padding: 2px 8px;
    border-radius: 20px; white-space: nowrap;
    text-transform: uppercase; letter-spacing: 0.3px;
  }

  /* Slider */
  .slider-container { padding: 0 8px; }
  .slider-value { text-align: center; margin-bottom: 16px; }
  .slider-value .number {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 34px; font-weight: 800; color: var(--primary); line-height: 1;
  }
  .slider-value .unit { font-size: 16px; color: var(--text-light); font-weight: 500; }
  input[type="range"] {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 6px;
    background: var(--border); border-radius: 3px;
    outline: none; cursor: pointer;
  }
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%;
    background: var(--primary); border: 4px solid white;
    box-shadow: 0 2px 8px rgba(46,204,113,0.4); cursor: pointer;
    transition: transform 0.15s ease;
  }
  input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
  input[type="range"]::-moz-range-thumb {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--primary); border: 4px solid white;
    box-shadow: 0 2px 8px rgba(46,204,113,0.4); cursor: pointer;
  }
  .slider-labels {
    display: flex; justify-content: space-between;
    margin-top: 12px; padding: 0;
    gap: 4px;
  }
  .slider-labels span {
    font-size: 13px; color: var(--text-mid); font-weight: 500; text-align: center;
    flex: 1;
  }
  @media (max-width: 640px) {
    /* Sur mobile : on cache 1 label sur 2 pour garder la lisibilité */
    .slider-labels span:nth-child(even) { display: none; }
    .slider-labels span { font-size: 12px; }
  }
  .free-notice {
    display: none; background: var(--accent-green-soft); color: var(--accent-green);
    padding: 10px 16px; border-radius: 10px;
    font-size: 14px; font-weight: 600;
    margin-top: 14px; text-align: center; line-height: 1.5;
  }
  .free-notice.visible { display: block; }

  /* Offre */
  .offer {
    border-radius: var(--radius);
    border: 2px solid var(--primary);
    background: linear-gradient(135deg, var(--primary-soft) 0%, #F7F5EF 100%);
    padding: 18px 18px 16px; position: relative;
    box-shadow: var(--shadow-md);
    width: 100%; max-width: 560px; margin: 0 auto;
    transition: all 0.3s ease;
  }
  .offer.offer-idle {
    border-color: var(--border-strong);
    border-style: dashed;
    background: var(--bg);
    box-shadow: none;
  }
  .offer.offer-idle .offer-badge { display: none; }
  .offer.offer-idle h3 { color: var(--text-mid); }
  .offer.offer-idle .offer-price-tag { color: var(--text-light); }
  .offer-badge {
    position: absolute; top: -10px; right: 14px;
    padding: 3px 10px; border-radius: 6px;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    background: var(--primary); color: white;
  }
  .offer h3 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 18px; font-weight: 700; margin-bottom: 10px;
  }
  .offer-modules {
    list-style: none; padding: 0;
    display: grid; grid-template-columns: 1fr 1fr;
    column-gap: 18px; row-gap: 2px;
  }
  @media (max-width: 560px) {
    .offer-modules { grid-template-columns: 1fr; }
  }
  .offer-modules li {
    font-size: 12.5px; padding: 3px 0;
    display: flex; align-items: center; gap: 7px;
    color: var(--text-mid); line-height: 1.35;
  }
  .offer-modules li .check {
    width: 18px; height: 18px; border-radius: 5px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; flex-shrink: 0; font-weight: 700;
    background: var(--primary); color: white;
  }
  .offer-price-tag {
    margin-top: 14px; padding-top: 12px;
    border-top: 1px solid rgba(46,204,113,0.15);
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 22px; font-weight: 800; color: var(--primary);
  }
  .offer-price-tag .per {
    font-size: 13px; font-weight: 500; color: var(--text-light);
  }
  .pop-tag {
    font-size: 9px;
    background: var(--accent-amber-soft); color: var(--accent-amber);
    padding: 1px 5px; border-radius: 3px; font-weight: 700;
    margin-left: 4px; vertical-align: middle;
  }

  /* Result (sticky) */
  .result-card {
    background: var(--surface);
    border-radius: var(--radius);
    border: 2px solid var(--primary);
    box-shadow: var(--shadow-lg);
    padding: 32px 28px; margin-top: 28px;
    text-align: center;
    position: sticky; bottom: 16px; z-index: 10;
  }
  .result-card.free-result { border-color: var(--accent-green); }

  /* État initial : aucune interaction, tarif en attente */
  .result-card.result-idle {
    border-color: var(--border-strong);
    border-style: dashed;
    background: var(--bg);
  }
  /* Pas d'em dash "-" en idle : inutile et visuellement trompeur */
  .result-card.result-idle .result-price { display: none; }
  /* Label "Votre tarif" agrandi, typo des titres */
  .result-card.result-idle .result-label {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: clamp(22px, 3vw, 28px);
    font-weight: 700;
    color: var(--text);
    text-transform: none;
    letter-spacing: -0.01em;
    margin-bottom: 10px;
  }
  .result-card.result-idle .result-details { color: var(--text-mid); font-size: 15px; margin-top: 4px; }
  .result-cta-disabled {
    background: var(--border) !important;
    color: var(--text-light) !important;
    box-shadow: none !important;
    pointer-events: none;
    cursor: not-allowed;
  }
  .result-label {
    font-size: 13px; color: var(--text-light); font-weight: 500;
    text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 4px;
  }
  .result-price {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: clamp(40px, 8vw, 56px); font-weight: 800;
    color: var(--primary); line-height: 1.1; letter-spacing: -1px;
  }
  .result-card.free-result .result-price { color: var(--accent-green); }
  .result-price .currency { font-size: 0.5em; vertical-align: super; margin-right: 2px; }
  .result-price .period { font-size: 0.3em; color: var(--text-light); font-weight: 500; }
  .result-details {
    margin-top: 10px; font-size: 14px; color: var(--text-mid); line-height: 1.6;
  }
  .result-details strong { color: var(--text); }
  .result-equiv { font-size: 13px; color: var(--text-light); margin-top: 4px; }
  .result-savings {
    display: inline-block; padding: 4px 14px; border-radius: 20px;
    font-size: 13px; font-weight: 700; margin-top: 10px;
    background: var(--accent-green-soft); color: var(--accent-green);
  }
  .result-cta {
    display: inline-block; margin-top: 18px; padding: 14px 36px;
    background: var(--primary); color: white; border: none; border-radius: 50px;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 16px; font-weight: 700;
    cursor: pointer; transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(46,204,113,0.35); text-decoration: none;
  }
  .result-card.free-result .result-cta {
    background: var(--accent-green);
    box-shadow: 0 4px 14px rgba(5,150,105,0.3);
  }
  .result-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(46,204,113,0.45);
  }
  .result-per-hab {
    margin-top: 14px; padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 13px; color: var(--text-light);
  }
  .result-per-hab strong { color: var(--text); }

  /* Masque les zones vides (separateur + marges superflus en idle/gratuit/devis) */
  .result-per-hab:empty,
  .result-equiv:empty,
  #savings-container:empty { display: none; }

  /* Padding compacté en idle - aucun prix à afficher, on resserre la carte */
  .result-card.result-idle { padding: 22px 24px; }

  /* Encart pour les intercommunalités, sous la result-card */
  .intercom-notice {
    margin-top: 20px;
    padding: 18px 22px;
    background: var(--primary-soft);
    border: 1px solid var(--primary-light);
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
  }
  .intercom-notice-text strong {
    display: block; font-weight: 700; color: var(--text);
    font-size: 15px; margin-bottom: 2px;
  }
  .intercom-notice-text span { color: var(--text-mid); font-size: 14px; }
  .intercom-cta {
    background: var(--primary); color: white;
    padding: 10px 20px; border-radius: 50px;
    font-weight: 600; font-size: 14px; white-space: nowrap;
    transition: background 0.2s, transform 0.2s;
  }
  .intercom-cta:hover { background: var(--primary-dark); transform: translateX(2px); }
  @media (max-width: 560px) {
    .intercom-notice { flex-direction: column; align-items: flex-start; }
    .intercom-cta { align-self: stretch; text-align: center; }
  }

  .price-update { animation: pricePop 0.3s ease; }
  @keyframes pricePop {
    0% { transform: scale(1); }
    50% { transform: scale(1.04); }
    100% { transform: scale(1); }
  }

  /* FAQ */
  .faq-list { max-width: 820px; margin: 0 auto; }
  .faq-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 10px;
    overflow: hidden;
    transition: border-color 0.2s;
  }
  .faq-item[open] { border-color: var(--primary); }
  .faq-item summary {
    padding: 22px 28px;
    cursor: pointer;
    list-style: none;
    display: flex; justify-content: space-between; align-items: center;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 17px; font-weight: 600; color: var(--text);
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::after {
    content: '+'; font-size: 24px; font-weight: 300;
    color: var(--primary);
    transition: transform 0.3s;
  }
  .faq-item[open] summary::after { transform: rotate(45deg); }
  .faq-answer {
    padding: 0 28px 22px; color: var(--text-mid);
    line-height: 1.6;
  }
  /* Apparition douce de la réponse à l'ouverture (GPU : opacity + transform) */
  .faq-item[open] .faq-answer {
    animation: faqFadeIn 0.25s ease-out;
  }
  @keyframes faqFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .faq-item[open] .faq-answer { animation: none; }
  }

  /* CONTACT */
  .contact-section { background: var(--bg-warm); }
  .contact-inner { max-width: 720px; margin: 0 auto; }
  .contact-form {
    background: var(--surface);
    padding: 40px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
  }
  .form-group { margin-bottom: 18px; }
  .form-group label {
    display: block; font-size: 13px; font-weight: 600;
    color: var(--text); margin-bottom: 6px;
  }
  .form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: 12px 14px;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg); font-family: inherit; font-size: 15px;
    color: var(--text);
    transition: border-color 0.2s, background 0.2s;
  }
  .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none; border-color: var(--primary); background: white;
  }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  @media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
  .form-check {
    display: flex; gap: 10px; align-items: flex-start;
    font-size: 13px; color: var(--text-mid);
    margin-bottom: 20px;
  }
  .form-check input { width: 16px; height: 16px; margin-top: 2px; }
  .form-submit,
  input[type="submit"].form-submit {
    width: 100%; padding: 14px;
    background: var(--primary); color: white;
    border: none; border-radius: 10px;
    font-family: inherit; font-weight: 600; font-size: 15px;
    cursor: pointer; appearance: none; -webkit-appearance: none;
    transition: background 0.2s;
  }
  .form-submit:hover,
  input[type="submit"].form-submit:hover { background: var(--primary-dark); }

  .contact-info h3 { margin-bottom: 10px; }
  .contact-info .lead { margin-bottom: 32px; }
  .contact-detail {
    display: flex; gap: 14px; padding: 16px 0;
    border-bottom: 1px solid var(--border);
  }
  .contact-detail:last-child { border-bottom: none; }
  .contact-detail-icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--primary-light); color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .contact-detail-text strong { display: block; font-size: 14px; color: var(--text); font-weight: 600; }
  .contact-detail-text span { font-size: 14px; color: var(--text-mid); }

  /* FOOTER */
  footer {
    background: var(--surface-dark);
    color: rgba(255, 255, 255, 0.72);
    padding: 72px 0 32px;
    position: relative;
    overflow: hidden;
  }
  footer::before {
    content: '';
    position: absolute; top: -200px; right: -200px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(46, 204, 113, 0.35) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
  }
  .footer-grid, .footer-bottom { position: relative; z-index: 1; }
  .footer-grid {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px; margin-bottom: 48px;
  }
  @media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
  .footer-brand h4 {
    color: white; font-family: 'Bricolage Grotesque', sans-serif;
    margin-bottom: 12px; font-size: 18px;
  }
  .footer-brand p { font-size: 14px; color: rgba(255, 255, 255, 0.55); line-height: 1.6; }
  .footer-brand p a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: underline; text-underline-offset: 3px;
    transition: color 0.2s;
  }
  .footer-brand p a:hover { color: white; }
  .footer-contact { margin-top: 22px; font-size: 13px; line-height: 1.6; }
  .footer-contact address {
    font-style: normal;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 10px;
  }
  .footer-contact p {
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
    font-size: 13px;
  }
  .footer-contact a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: color 0.2s;
  }
  .footer-contact a:hover { color: white; text-decoration: underline; }
  .footer-col h5 {
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.45); margin-bottom: 18px;
  }
  .footer-col a {
    display: block; padding: 6px 0;
    font-size: 14px; color: rgba(255, 255, 255, 0.72);
    transition: color 0.2s, transform 0.2s;
  }
  .footer-col a:hover { color: white; transform: translateX(2px); }
  .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 32px;
    display: flex; justify-content: space-between; gap: 20px;
    font-size: 13px; color: rgba(255, 255, 255, 0.45); flex-wrap: wrap;
  }
  .footer-bottom a {
    color: inherit; text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.25);
    text-underline-offset: 2px;
    transition: color 0.2s, text-decoration-color 0.2s;
  }
  .footer-bottom a:hover {
    color: white; text-decoration-color: rgba(255, 255, 255, 0.7);
  }

  .fade-up {
    opacity: 0; transform: translateY(20px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  .fade-up.visible { opacity: 1; transform: translateY(0); }

  /* ========== TOAST STICKY : Simuler mon tarif ========== */
  .sim-toast {
    position: fixed;
    right: 24px; bottom: 24px;
    z-index: 90;
    display: flex; align-items: center; gap: 14px;
    background: var(--surface-dark);
    color: white;
    padding: 12px 12px 12px 20px;
    border-radius: 50px;
    box-shadow: 0 12px 32px rgba(0, 33, 71, 0.25), 0 4px 12px rgba(0, 33, 71, 0.2);
    transform: translateY(120px);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    pointer-events: none;
  }
  .sim-toast.visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .sim-toast-label {
    font-size: 14px; font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
  }
  .sim-toast-label strong { color: white; font-weight: 700; }
  .sim-toast-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 18px;
    background: var(--primary); color: white;
    border-radius: 50px;
    font-size: 14px; font-weight: 700;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
  }
  .sim-toast-btn:hover { background: var(--primary-dark); transform: translateX(2px); }
  .sim-toast-btn svg { flex-shrink: 0; }
  .sim-toast-close {
    background: transparent; border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer; padding: 8px;
    border-radius: 50%;
    transition: color 0.2s, background 0.2s;
    display: flex; align-items: center; justify-content: center;
  }
  .sim-toast-close:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
  }
  .sim-toast-pulse {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7);
    animation: toastPulse 2s infinite;
    flex-shrink: 0;
  }
  @keyframes toastPulse {
    0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.6); }
    70% { box-shadow: 0 0 0 10px rgba(46, 204, 113, 0); }
    100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
  }

  /* Mobile : pleine largeur en bas */
  @media (max-width: 640px) {
    .sim-toast {
      left: 12px; right: 12px; bottom: 12px;
      border-radius: 16px;
      padding: 12px 14px;
      justify-content: space-between;
    }
    .sim-toast-label { font-size: 13px; }
    .sim-toast-btn { padding: 9px 14px; font-size: 13px; }
  }

  /* ========== reCAPTCHA v3 (badge masqué + mention légale stylée sous form) ==========
     Google autorise le masquage du badge à condition d'afficher la mention texte
     "Ce site est protégé par reCAPTCHA…" sur chaque page contenant un formulaire.
     Cette mention est ajoutée dans le template CF7 (sous le bouton submit). */
  .grecaptcha-badge { visibility: hidden !important; opacity: 0 !important; }
  .recaptcha-notice {
    font-size: 12px;
    color: var(--text-light);
    text-align: center;
    margin: 16px 0 0;
    line-height: 1.5;
  }
  .recaptcha-notice a {
    color: var(--text-mid);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s;
  }
  .recaptcha-notice a:hover { color: var(--primary); }

  /* ========== MOOVE GDPR COOKIE BAR : override discret au style du thème ========== */
  /* Bannière principale en bas-gauche (toast simulateur reste à droite, pas de chevauchement) */
  #moove_gdpr_cookie_info_bar {
    position: fixed !important;
    bottom: 24px !important;
    left: 24px !important;
    right: auto !important;
    max-width: 420px !important;
    width: auto !important;
    min-height: auto !important;
    padding: 16px 20px !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    font-family: 'Source Sans 3', system-ui, sans-serif !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  .moove-gdpr-info-bar-container,
  .moove-gdpr-info-bar-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }
  .moove-gdpr-cookie-notice,
  .moove-gdpr-cookie-notice p {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    color: var(--text-mid) !important;
    line-height: 1.5 !important;
    text-align: left !important;
  }
  .moove-gdpr-cookie-notice a {
    color: var(--primary) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    font-weight: 600 !important;
  }
  .moove-gdpr-button-holder {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
    margin: 0 !important;
    justify-content: flex-start !important;
  }
  #moove_gdpr_cookie_info_bar .mgbutton {
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    transition: background 0.2s, color 0.2s, border-color 0.2s !important;
    line-height: 1.2 !important;
    min-height: auto !important;
    min-width: auto !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
  }
  /* "Tout accepter" = primary vert */
  #moove_gdpr_cookie_info_bar .mgbutton.moove-gdpr-infobar-allow-all {
    background: var(--primary) !important;
    color: white !important;
    border-color: var(--primary) !important;
  }
  #moove_gdpr_cookie_info_bar .mgbutton.moove-gdpr-infobar-allow-all:hover {
    background: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    color: white !important;
  }
  /* "Refuser" = secondaire neutre */
  #moove_gdpr_cookie_info_bar .mgbutton.moove-gdpr-infobar-reject-btn,
  #moove_gdpr_cookie_info_bar .mgbutton.moove-gdpr-infobar-settings-btn {
    background: var(--bg) !important;
    color: var(--text-mid) !important;
    border-color: var(--border) !important;
  }
  #moove_gdpr_cookie_info_bar .mgbutton.moove-gdpr-infobar-reject-btn:hover,
  #moove_gdpr_cookie_info_bar .mgbutton.moove-gdpr-infobar-settings-btn:hover {
    background: var(--border) !important;
    color: var(--text) !important;
  }

  /* Mobile : pleine largeur en bas, plus compact, le toast simulateur est caché
     automatiquement par sa propre logique JS quand on scrolle après #tarifs */
  @media (max-width: 640px) {
    #moove_gdpr_cookie_info_bar {
      bottom: 12px !important;
      left: 12px !important;
      right: 12px !important;
      max-width: none !important;
      width: auto !important;
      border-radius: 16px !important;
      padding: 14px 16px !important;
    }
    /* Mobile : boutons empilés en pleine largeur (évite le débordement Safari iOS) */
    #moove_gdpr_cookie_info_bar .moove-gdpr-button-holder {
      flex-direction: column !important;
      width: 100% !important;
      gap: 8px !important;
    }
    #moove_gdpr_cookie_info_bar .mgbutton {
      width: 100% !important;
      padding: 12px 16px !important;
      text-align: center !important;
      justify-content: center !important;
      box-sizing: border-box !important;
    }
    /* Sur mobile, quand la bannière est là, on remonte le toast pour pas l'écraser */
    body:has(#moove_gdpr_cookie_info_bar:not(.hidden)) .sim-toast.visible {
      display: none !important;
    }
  }

  /* Bouton flottant cogwheel (après acceptation/rejet cookies) : discret au repos,
     plein contraste au hover. Petit cercle marine semi-transparent, bottom-left. */
  .gdpr-floating-button-custom-position {
    width: 36px !important;
    height: 36px !important;
    bottom: 16px !important;
    left: 16px !important;
    background: rgba(0, 33, 71, 0.5) !important;
    border: none !important;
    border-radius: 50% !important;
    opacity: 0.45 !important;
    box-shadow: 0 2px 8px rgba(0, 33, 71, 0.18) !important;
    transition: opacity 0.25s ease, background 0.25s ease, transform 0.25s ease !important;
  }
  .gdpr-floating-button-custom-position:hover,
  .gdpr-floating-button-custom-position:focus {
    opacity: 1 !important;
    background: var(--surface-dark) !important;
    transform: scale(1.08) !important;
  }
  .gdpr-floating-button-custom-position .moove_gdpr_icon,
  .gdpr-floating-button-custom-position .moove_gdpr_icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  /* Modal "Paramètres des cookies" : typo + boutons stylés cohérent thème */
  #moove_gdpr_cookie_modal,
  .moove-gdpr-modal-content {
    font-family: 'Source Sans 3', system-ui, sans-serif !important;
  }
  .moove-gdpr-modal-content h1,
  .moove-gdpr-modal-content h2,
  .moove-gdpr-modal-content h3 {
    font-family: 'Bricolage Grotesque', sans-serif !important;
    color: var(--text) !important;
  }

  /* Conteneur des 3 boutons d'action de la modale : flex aligné, gap propre */
  #moove_gdpr_cookie_modal .moove-gdpr-button-holder {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: flex-end !important;
    align-items: center !important;
  }

  /* Boutons modale : reset + style cohérent thème */
  #moove_gdpr_cookie_modal .mgbutton {
    padding: 10px 18px !important;
    border-radius: 8px !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    transition: background 0.2s, color 0.2s, border-color 0.2s !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    min-height: auto !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
  }
  /* "Tout activer" = primary vert */
  #moove_gdpr_cookie_modal .mgbutton.moove-gdpr-modal-allow-all {
    background: var(--primary) !important;
    color: white !important;
    border-color: var(--primary) !important;
  }
  #moove_gdpr_cookie_modal .mgbutton.moove-gdpr-modal-allow-all:hover {
    background: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
  }
  /* "Tout rejeter" et "Enregistrer" = secondaire neutre */
  #moove_gdpr_cookie_modal .mgbutton.moove-gdpr-modal-reject-all,
  #moove_gdpr_cookie_modal .mgbutton.moove-gdpr-modal-save-settings {
    background: var(--bg) !important;
    color: var(--text-mid) !important;
    border-color: var(--border) !important;
  }
  #moove_gdpr_cookie_modal .mgbutton.moove-gdpr-modal-reject-all:hover,
  #moove_gdpr_cookie_modal .mgbutton.moove-gdpr-modal-save-settings:hover {
    background: var(--border) !important;
    color: var(--text) !important;
  }

  /* Mobile : 3 boutons modale empilés en pleine largeur */
  @media (max-width: 640px) {
    #moove_gdpr_cookie_modal .moove-gdpr-button-holder {
      flex-direction: column !important;
      align-items: stretch !important;
      width: 100% !important;
    }
    #moove_gdpr_cookie_modal .mgbutton {
      width: 100% !important;
      text-align: center !important;
      justify-content: center !important;
      box-sizing: border-box !important;
    }
  }

  /* ========== CONTACT FORM 7 : habillage au style du thème ========== */
  .contact-form .wpcf7,
  .contact-form form.wpcf7-form { margin: 0; padding: 0; }

  /* L'input CF7 est wrapé dans un <span class="wpcf7-form-control-wrap"> : on le remet en block avec bon spacing */
  .form-group .wpcf7-form-control-wrap { display: block; margin-top: 6px; }

  /* Acceptance checkbox RGPD (structure imbriquée spécifique CF7) */
  .form-check .wpcf7-form-control-wrap,
  .form-check .wpcf7-acceptance,
  .form-check .wpcf7-list-item { display: block; margin: 0; }
  .form-check .wpcf7-list-item label {
    display: flex; gap: 10px; align-items: flex-start;
    font-weight: 400; color: var(--text-mid); font-size: 13px;
    cursor: pointer; margin: 0;
  }
  .form-check .wpcf7-list-item input[type="checkbox"] {
    width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0;
  }
  .form-check .wpcf7-list-item-label { flex: 1; }

  /* Classe utilitaire à coller sur un <a> pour avoir le style "lien teinté" du thème.
     Utilisée notamment pour le lien "Lire la politique de confidentialité" dissocié
     de l'acceptance CF7 (CF7 surcharge les styles des liens dans l'acceptance, donc
     on sort le lien hors de [acceptance] et on le style via cette classe). */
  .policy-link {
    color: var(--primary) !important; text-decoration: underline !important;
    text-underline-offset: 3px; font-weight: 600;
    transition: color 0.2s;
  }
  .policy-link:hover { color: var(--primary-dark) !important; }

  /* Wrapper du lien politique dissocié de l'acceptance : aligné sous la case à cocher */
  .policy-link-wrap {
    margin: -10px 0 20px;
    padding-left: 26px;
    font-size: 13px;
  }

  /* ========== PAGE 404 ========== */
  .error-page {
    min-height: calc(100vh - 320px);
    display: flex; align-items: center; justify-content: center;
    padding: 100px 24px;
    background: linear-gradient(180deg, var(--primary-soft) 0%, var(--bg) 70%);
  }
  .error-content {
    width: 100%; max-width: 640px;
    margin: 0 auto; text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 64px 48px 56px;
    box-shadow: var(--shadow-lg);
  }
  .error-code {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: clamp(80px, 12vw, 128px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    margin-bottom: 24px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent-orange) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .error-content h1 {
    font-size: clamp(22px, 3vw, 30px);
    margin-bottom: 16px;
    color: var(--text);
  }
  .error-content > p {
    font-size: 16px; color: var(--text-mid);
    margin: 0 auto 36px;
    max-width: 480px;
    line-height: 1.6;
  }
  .error-actions {
    display: flex; gap: 12px;
    flex-wrap: wrap; justify-content: center;
    margin-bottom: 40px;
  }
  .error-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 28px; border-radius: 50px;
    font-weight: 600; font-size: 15px;
    transition: transform 0.2s, background 0.2s, color 0.2s, border-color 0.2s;
  }
  .error-btn-primary {
    background: var(--primary); color: white;
    box-shadow: var(--shadow-primary);
  }
  .error-btn-primary:hover {
    background: var(--primary-dark);
    transform: translateX(2px);
  }
  .error-btn-secondary {
    background: var(--surface); color: var(--text);
    border: 1.5px solid var(--border);
  }
  .error-btn-secondary:hover {
    border-color: var(--primary); color: var(--primary);
  }
  .error-nav {
    font-size: 14px; color: var(--text-light);
    padding-top: 28px; border-top: 1px solid var(--border);
    display: flex; flex-wrap: wrap; gap: 10px 18px;
    justify-content: center; align-items: center;
  }
  .error-nav > span { color: var(--text-light); }
  .error-nav a {
    color: var(--text-mid); font-weight: 500;
    transition: color 0.2s;
  }
  .error-nav a:hover { color: var(--primary); }

  @media (max-width: 640px) {
    .error-page { padding: 60px 16px; min-height: calc(100vh - 280px); }
    .error-content { padding: 48px 28px 40px; }
    .error-actions { flex-direction: column; gap: 10px; }
    .error-btn { width: 100%; justify-content: center; }
  }

  /* ========== PAGES LÉGALES (mentions, CGV, confidentialité) ========== */
  .legal-page { padding: 80px 0 100px; background: var(--surface); }
  .legal-content {
    max-width: 760px; margin: 0 auto;
    color: var(--text-mid); font-size: 16px; line-height: 1.7;
  }
  .legal-content h1 {
    font-size: clamp(32px, 4vw, 44px);
    margin-bottom: 40px; color: var(--text);
  }
  .legal-content h2 {
    font-size: clamp(20px, 2.5vw, 26px);
    margin: 48px 0 16px; color: var(--text);
  }
  .legal-content h3 {
    font-size: 18px;
    margin: 32px 0 12px; color: var(--text);
  }
  .legal-content p { margin-bottom: 16px; }
  .legal-content a {
    color: var(--primary); text-decoration: underline;
    text-underline-offset: 3px;
  }
  .legal-content a:hover { color: var(--primary-dark); }
  .legal-content ul, .legal-content ol {
    margin: 0 0 20px 20px; padding-left: 10px;
  }
  .legal-content li { margin-bottom: 6px; }
  .legal-content strong { color: var(--text); }
  .legal-content hr {
    border: none; border-top: 1px solid var(--border);
    margin: 40px 0;
  }

  /* ============================================================
     PAGE TARIF (/tarif-application-mairie/) - template page-legal.php
     Composants spécifiques injectés dans le contenu Gutenberg.
     ============================================================ */

  /* CTA secondaire "Voir le guide complet des tarifs" sous le simulateur (home).
     Styled comme un bouton pill outline, centré, pour ne pas paraître "oublié"
     en bas de la section #tarifs. */
  .tarif-deep-link {
    text-align: center;
    margin: 24px 0 0;
    padding: 0;
  }
  /* Réduit le padding-bottom de la section #tarifs car le bouton .tarif-deep-link
     est visuellement léger : on évite les 200px d'air avant la FAQ (100px bottom
     #tarifs + 100px top #faq) qui paraissaient disproportionnés. */
  #tarifs.section { padding-bottom: 50px; }
  .tarif-deep-link a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 50px;
    color: var(--text);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
  }
  .tarif-deep-link a:hover {
    border-color: var(--primary);
    color: var(--primary-deep);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
  }

  /* Encart d'introduction chiffré en haut de la page tarif */
  .tarif-callout {
    background: var(--primary-soft);
    border: 1.5px solid var(--primary-light);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    margin: 32px 0 40px;
  }
  .tarif-callout-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 18px; font-weight: 700;
    color: var(--primary-deep);
    margin-bottom: 16px;
  }
  .tarif-callout-list {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
    list-style: none; margin: 0 !important; padding: 0;
  }
  .tarif-callout-list li {
    text-align: center; margin: 0 !important;
  }
  .tarif-callout-list strong {
    display: block;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 28px; font-weight: 800;
    color: var(--primary-deep);
    line-height: 1.1; margin-bottom: 6px;
  }
  .tarif-callout-list span {
    display: block; font-size: 14px; color: var(--text-mid);
  }
  @media (max-width: 600px) {
    .tarif-callout-list { grid-template-columns: 1fr; gap: 16px; }
    .tarif-callout { padding: 22px; }
  }

  /* Tableau des tarifs par tranche de population (grid responsive) */
  .tarif-grid {
    margin: 24px 0 40px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .tarif-grid-row {
    display: grid; grid-template-columns: 2fr 1.5fr 1.5fr;
    border-bottom: 1px solid var(--border);
  }
  .tarif-grid-row:last-child { border-bottom: none; }
  .tarif-grid-row.header {
    background: var(--bg-warm);
    font-weight: 700;
    color: var(--text);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .tarif-grid-row.popular { background: var(--primary-soft); }
  .tarif-grid-row.popular .tarif-grid-cell:first-child::after {
    content: 'POPULAIRE';
    display: inline-block;
    background: var(--primary);
    color: white;
    font-size: 10px; font-weight: 700;
    padding: 2px 8px; border-radius: 50px;
    margin-left: 10px;
    vertical-align: middle;
    letter-spacing: 0.05em;
  }
  .tarif-grid-cell {
    padding: 16px 20px;
    color: var(--text);
    font-size: 16px;
  }
  .tarif-grid-cell.price {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700; color: var(--primary-deep);
  }
  .tarif-grid-cell.per-hab {
    color: var(--text-mid); font-size: 15px;
  }
  @media (max-width: 600px) {
    .tarif-grid-row { grid-template-columns: 1fr 1fr; font-size: 14px; }
    .tarif-grid-row.header .tarif-grid-cell:nth-child(3),
    .tarif-grid-row:not(.header) .tarif-grid-cell:nth-child(3) { display: none; }
    .tarif-grid-cell { padding: 12px 14px; font-size: 14px; }
  }

  /* Grille des 15 fonctionnalités incluses */
  .tarif-features {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
    list-style: none !important; margin: 16px 0 32px !important; padding: 0 !important;
  }
  .tarif-features li {
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text);
    margin: 0 !important;
  }
  .tarif-features li::before {
    content: '✓ ';
    color: var(--primary);
    font-weight: 700;
    margin-right: 4px;
  }
  @media (max-width: 700px) {
    .tarif-features { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 480px) {
    .tarif-features { grid-template-columns: 1fr; }
  }

  /* Encart "coût par habitant" - mise en avant chiffrée */
  .tarif-per-hab-callout {
    background: var(--surface);
    border-left: 4px solid var(--primary);
    padding: 20px 24px;
    margin: 24px 0;
    border-radius: 4px;
    font-size: 16px;
    color: var(--text);
  }
  .tarif-per-hab-callout strong { color: var(--primary-deep); }

  /* Grille engagement 1/2/3 ans */
  .tarif-engagement-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
    margin: 24px 0 32px;
  }
  .tarif-engagement-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    text-align: center;
  }
  .tarif-engagement-card.featured {
    border-color: var(--primary);
    background: var(--primary-soft);
  }
  .tarif-engagement-card .duration {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 22px; font-weight: 800;
    color: var(--text);
    display: block; margin-bottom: 4px;
  }
  .tarif-engagement-card .months {
    font-size: 13px; color: var(--text-mid); display: block; margin-bottom: 12px;
  }
  .tarif-engagement-card .bonus {
    display: inline-block;
    background: var(--primary);
    color: white;
    font-size: 12px; font-weight: 600;
    padding: 4px 10px; border-radius: 50px;
  }
  .tarif-engagement-card .no-bonus {
    color: var(--text-light); font-size: 13px;
  }
  @media (max-width: 600px) {
    .tarif-engagement-grid { grid-template-columns: 1fr; }
  }

  /* CTA final vers le simulateur */
  .tarif-cta-final {
    text-align: center;
    margin: 48px 0 24px;
    padding: 32px;
    background: var(--surface-dark);
    border-radius: var(--radius-lg);
    color: white;
  }
  .tarif-cta-final h2,
  .legal-content .tarif-cta-final h2 {
    color: white !important;
    margin: 0 0 12px;
  }
  .tarif-cta-final p {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 20px;
  }
  .tarif-cta-final .btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--primary);
    color: white !important;
    padding: 14px 28px;
    border-radius: 10px;
    font-weight: 700; font-size: 16px;
    text-decoration: none !important;
    transition: background 0.2s, transform 0.2s;
  }
  .tarif-cta-final .btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
  }

  /* ============================================================
     PAGE GUIDE COMMENT CHOISIR (/application-mairie-comment-choisir/)
     template page-comment-choisir.php
     Composants : guide-lead, guide-toc, guide-callout, guide-checklist,
     guide-inline-cta, guide-cta, guide-cta-btn, guide-recap, guide-faq.
     Hérite du contexte .legal-content (max-width, typo, paragraphs).
     ============================================================ */

  /* Chapô d'introduction : texte légèrement plus grand et plus aéré */
  .guide-content .guide-lead {
    font-size: 19px;
    line-height: 1.65;
    color: var(--text);
    margin: 0 0 36px;
  }

  /* Sommaire / TOC : encadré navigation */
  .guide-toc {
    background: var(--bg-warm);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 24px 28px;
    margin: 0 0 48px;
  }
  .guide-toc-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text);
    margin: 0 0 12px !important;
  }
  .guide-toc ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    columns: 2;
    column-gap: 32px;
  }
  .guide-toc li {
    margin: 0 0 6px !important;
    break-inside: avoid;
  }
  .guide-toc a {
    color: var(--primary-deep);
    text-decoration: none;
    font-size: 15px;
    line-height: 1.4;
    transition: color 0.15s;
  }
  .guide-toc a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  @media (max-width: 680px) {
    .guide-toc ul { columns: 1; }
    .guide-toc { padding: 20px; }
  }

  /* Scroll-margin sur ancres pour compenser le header sticky (nav) */
  .guide-content h2[id],
  .guide-content h3[id],
  .guide-content section[id] {
    scroll-margin-top: 90px;
  }

  /* CTA en ligne dans le corps : encart attirant l'oeil au milieu du texte */
  .guide-inline-cta {
    background: var(--primary-soft);
    border-left: 4px solid var(--primary);
    padding: 18px 24px;
    margin: 32px 0;
    border-radius: 4px;
  }
  .guide-inline-cta p {
    margin: 0 !important;
    font-size: 16px;
    color: var(--text);
  }
  .guide-inline-cta a {
    color: var(--primary-deep);
    font-weight: 600;
  }

  /* Callout : encadré pour la checklist des questions à poser */
  .guide-callout {
    background: var(--surface);
    border: 1.5px solid var(--primary-light);
    border-radius: var(--radius-lg);
    padding: 32px 36px;
    margin: 48px 0;
    box-shadow: var(--shadow-md);
  }
  .guide-callout h2 {
    margin-top: 0 !important;
    font-size: 22px;
    color: var(--primary-deep);
  }
  .guide-callout p {
    margin-bottom: 20px !important;
  }

  /* Checklist : liste à puces stylée pour les 8 questions */
  .guide-checklist {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .guide-checklist li {
    position: relative;
    padding: 10px 0 10px 36px;
    margin: 0 !important;
    border-bottom: 1px solid var(--border);
    font-size: 16px;
    color: var(--text);
    line-height: 1.5;
  }
  .guide-checklist li:last-child {
    border-bottom: none;
  }
  .guide-checklist li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    width: 20px;
    height: 20px;
    border: 2px solid var(--primary);
    border-radius: 4px;
    background: var(--surface);
  }
  @media (max-width: 600px) {
    .guide-callout { padding: 24px; }
    .guide-checklist li { font-size: 15px; padding-left: 32px; }
  }

  /* Liste récapitulative "MCL face à ces critères" : cartes empilées */
  .guide-recap {
    list-style: none !important;
    margin: 24px 0 32px !important;
    padding: 0 !important;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .guide-recap li {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    padding: 14px 18px;
    border-radius: 6px;
    margin: 0 !important;
    font-size: 16px;
    line-height: 1.55;
    color: var(--text-mid);
  }
  .guide-recap li strong {
    color: var(--text);
    margin-right: 4px;
  }
  .guide-recap li a {
    color: var(--primary-deep);
    font-weight: 600;
  }

  /* CTA final : encart sombre type bannière de fin de page */
  .guide-cta {
    margin: 56px 0 24px;
    padding: 36px;
    background: var(--surface-dark);
    border-radius: var(--radius-lg);
    color: white;
    text-align: center;
  }
  .guide-cta p {
    color: rgba(255, 255, 255, 0.9) !important;
    margin-bottom: 20px !important;
    font-size: 17px;
    line-height: 1.6;
  }
  .guide-cta p:last-child {
    margin-bottom: 0 !important;
  }
  .guide-cta strong {
    color: white;
  }
  .guide-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--primary);
    color: white !important;
    padding: 14px 28px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none !important;
    transition: background 0.2s, transform 0.2s;
  }
  .guide-cta-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
  }

  /* FAQ de la page guide : carte simple par Q/R */
  .guide-faq {
    margin: 48px 0 24px;
  }
  .guide-faq h2 {
    margin-bottom: 24px !important;
  }
  .guide-faq-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px 28px;
    margin-bottom: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .guide-faq-item:hover {
    border-color: var(--primary-light);
    box-shadow: var(--shadow-sm);
  }
  .guide-faq-item h3 {
    margin: 0 0 12px !important;
    font-size: 18px;
    color: var(--text);
    line-height: 1.35;
  }
  .guide-faq-item p {
    margin: 0 !important;
    color: var(--text-mid);
    line-height: 1.6;
  }
  @media (max-width: 600px) {
    .guide-faq-item { padding: 20px; }
    .guide-faq-item h3 { font-size: 17px; }
  }

  /* ============================================================
     PAGE "Votre commune est déjà dans l'app"
     (/application-mairie-mode-decouverte/)
     template page-votre-commune-deja.php
     Toutes les règles sont préfixées .cdl pour isoler ce composant
     et utilisent les variables du design system du thème (--primary*).
     ============================================================ */

  .cdl {
    font-family: 'Source Sans 3', system-ui, sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: var(--text);
  }
  .cdl h1, .cdl h2, .cdl h3, .cdl .display {
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin: 0;
  }
  .cdl p { margin: 0 0 1rem; }
  .cdl a { color: var(--primary-deep); }
  .cdl .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
  .cdl .eyebrow {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary);
    margin: 0 0 0.9rem;
  }

  /* Hero */
  .cdl .hero { padding: 84px 0 64px; }
  .cdl .hero h1 {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    max-width: 26ch;
  }
  .cdl .hero .lead {
    font-size: 1.22rem;
    color: var(--text-mid);
    margin-top: 1.2rem;
  }
  .cdl .cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 2rem;
  }
  .cdl .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    font-size: 1.02rem;
    text-decoration: none;
    padding: 14px 26px;
    border-radius: 12px;
    transition: transform 0.15s ease, background 0.15s ease;
  }
  .cdl .btn-primary { background: var(--primary); color: #fff; }
  .cdl .btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); }
  .cdl .btn-ghost {
    background: transparent;
    color: var(--primary-deep);
    border: 1.5px solid var(--border);
  }
  .cdl .btn-ghost:hover { border-color: var(--primary); background: var(--primary-soft); }

  .cdl .stat-strip {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 3rem;
    padding: 28px 32px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: 14px;
    flex-wrap: wrap;
  }
  .cdl .stat-num {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: clamp(3rem, 6.8vw, 4rem);
    color: var(--primary-deep);
    letter-spacing: -0.02em;
    line-height: 1;
    flex-shrink: 0;
  }
  .cdl .stat-lbl {
    color: var(--text-mid);
    font-size: 1.15rem;
    line-height: 1.55;
    max-width: 48ch;
  }
  .cdl .stat-lbl strong {
    color: var(--text);
    font-weight: 600;
  }

  /* Signature : les deux états (Aujourd'hui / En partenariat) */
  .cdl .states {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
    margin: 8px 0 0;
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    background: var(--surface);
  }
  .cdl .state { padding: 34px 32px; }
  .cdl .state .tag {
    display: inline-block;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 999px;
    margin-bottom: 14px;
  }
  .cdl .state h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.6rem; }
  .cdl .state p { color: var(--text-mid); margin-bottom: 0; }
  .cdl .state.now { background: var(--bg); }
  .cdl .state.now .tag { background: var(--border); color: var(--text-mid); }
  .cdl .state.partner { background: var(--primary-deep); color: #fff; }
  .cdl .state.partner h3 { color: #fff; }
  .cdl .state.partner p { color: var(--primary-light); }
  .cdl .state.partner .tag { background: var(--primary); color: #fff; }

  /* Sections */
  .cdl section { padding: 64px 0; }
  .cdl section.alt {
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .cdl .sec-head { margin-bottom: 2.2rem; }
  .cdl .sec-head h2 {
    font-size: clamp(1.25rem, 2.5vw, 1.625rem);
    font-weight: 700;
  }
  .cdl .sec-head p {
    color: var(--text-mid);
    font-size: 1.12rem;
    line-height: 1.55;
    margin-top: 0.9rem;
  }

  .cdl .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
  }
  .cdl .card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px;
  }
  .cdl section.alt .card {
    background: var(--primary-soft);
    border-color: var(--primary-light);
  }
  .cdl .card h3 {
    font-size: 1.12rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: var(--primary-deep);
  }
  .cdl .card p {
    color: var(--text-mid);
    font-size: 0.98rem;
    margin: 0;
  }

  .cdl .three {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
    margin-top: 0.5rem;
  }
  .cdl .three .n {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: 2.4rem;
    color: var(--primary);
    letter-spacing: -0.02em;
  }
  .cdl .three .k {
    font-weight: 600;
    margin: 0.2rem 0 0.15rem;
  }
  .cdl .three .d {
    color: var(--text-mid);
    font-size: 0.96rem;
  }

  /* Tarif teaser (bandeau sombre avec lien vers grille tarifaire) */
  .cdl .price {
    background: var(--primary-deep);
    color: #fff;
    border-radius: 20px;
    padding: 42px 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
  }
  .cdl .price h2 {
    color: #fff;
    font-size: clamp(1.7rem, 3.4vw, 2.3rem);
    max-width: 20ch;
  }
  .cdl .price p {
    color: var(--primary-light);
    margin: 0.8rem 0 0;
    max-width: 40ch;
  }
  .cdl .price .btn-primary {
    background: #fff;
    color: var(--primary-deep);
  }
  .cdl .price .btn-primary:hover { background: var(--primary-light); }

  /* FAQ (details/summary natifs HTML) */
  .cdl details {
    border-bottom: 1px solid var(--border);
    padding: 18px 0;
  }
  .cdl details summary {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    font-size: 1.12rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--text);
  }
  .cdl details summary::-webkit-details-marker { display: none; }
  .cdl details summary::after {
    content: '+';
    color: var(--primary);
    font-weight: 700;
  }
  .cdl details[open] summary::after { content: '−'; }
  .cdl details p {
    color: var(--text-mid);
    margin: 0.9rem 0 0;
  }

  /* CTA final : carte marine centrée sur fond clair (uniformisé avec les
     .tarif-cta-final et .guide-cta des autres pages-piliers) */
  .cdl .final {
    text-align: center;
    padding: 56px 24px 80px;
    background: var(--bg);
  }
  .cdl .final > .wrap {
    max-width: 720px;
    background: var(--surface-dark);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 56px 40px;
  }
  .cdl .final h2 {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 700;
    max-width: 22ch;
    margin: 0 auto;
    color: #fff;
  }
  .cdl .final .btn-ghost {
    color: #fff;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.3);
  }
  .cdl .final .btn-ghost:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.08);
  }
  .cdl .final .contact {
    margin-top: 1.6rem;
    color: rgba(255, 255, 255, 0.85);
  }
  .cdl .final .contact strong { color: #fff; }
  .cdl .final .contact a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
  }
  .cdl .final .contact a:hover { text-decoration: underline; text-underline-offset: 3px; }

  .cdl :focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
    border-radius: 6px;
  }

  @media (max-width: 720px) {
    .cdl { font-size: 17px; }
    .cdl .states { grid-template-columns: 1fr; }
    .cdl .price { flex-direction: column; align-items: flex-start; }
  }

  @media (prefers-reduced-motion: reduce) {
    .cdl * {
      transition: none !important;
      scroll-behavior: auto;
    }
  }

  /* ============================================================
     PAGE "Accessibilité d'une application mobile pour mairie"
     (/accessibilite-application-mairie/)
     template page-accessibilite.php
     Toutes les règles sont préfixées .acc pour isoler ce composant.
     Variables harmonisées sur le design system du thème (--primary*).
     ============================================================ */

  .acc {
    font-family: 'Source Sans 3', system-ui, sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: var(--text);
  }
  .acc h1, .acc h2, .acc h3 {
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0;
  }
  .acc p { margin: 0 0 1rem; }
  .acc a { color: var(--primary-deep); }
  .acc .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
  .acc .eyebrow {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary);
    margin: 0 0 0.9rem;
  }

  /* Hero */
  .acc .hero { padding: 84px 0 60px; }
  .acc .hero h1 {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
  }
  .acc .hero .lead {
    font-size: 1.2rem;
    color: var(--text-mid);
    margin-top: 1.2rem;
  }
  .acc .cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 2rem;
  }
  .acc .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    font-size: 1.02rem;
    text-decoration: none;
    padding: 14px 26px;
    border-radius: 12px;
    transition: transform 0.15s ease, background 0.15s ease;
  }
  .acc .btn-primary { background: var(--primary); color: #fff; }
  .acc .btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); }
  .acc .btn-ghost {
    background: transparent;
    color: var(--primary-deep);
    border: 1.5px solid var(--border);
  }
  .acc .btn-ghost:hover { border-color: var(--primary); background: var(--primary-soft); }

  .acc .stat-strip {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 3rem;
    padding: 28px 32px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: 14px;
    flex-wrap: wrap;
  }
  .acc .stat-num {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: clamp(2.4rem, 5.6vw, 3.2rem);
    color: var(--primary-deep);
    letter-spacing: -0.02em;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .acc .stat-lbl {
    color: var(--text-mid);
    font-size: 1.05rem;
    line-height: 1.55;
  }

  /* Sections */
  .acc section { padding: 60px 0; }
  .acc section.alt {
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .acc .sec-head { margin-bottom: 2.2rem; }
  .acc .sec-head h2 {
    font-size: clamp(1.25rem, 2.5vw, 1.625rem);
    font-weight: 700;
  }
  .acc .sec-head p {
    color: var(--text-mid);
    font-size: 1.1rem;
    line-height: 1.55;
    margin-top: 0.9rem;
  }

  /* Callout sombre : encart "Le cadre" / obligation légale */
  .acc .callout {
    background: var(--primary-deep);
    color: #fff;
    border-radius: 18px;
    padding: 38px 36px;
  }
  /* Eyebrow dans le callout sombre : inverser le contraste
     (fond global var(--primary-light) écrasé par un fond blanc translucide,
     texte blanc pour rester lisible sur le bandeau vert foncé) */
  .acc .callout .eyebrow {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
  }
  .acc .callout h2 {
    color: #fff;
    font-size: clamp(1.7rem, 3.4vw, 2.2rem);
  }
  .acc .callout p {
    color: var(--primary-light);
    margin-top: 1rem;
    line-height: 1.6;
  }
  .acc .callout p:last-child { margin-bottom: 0; }
  .acc .callout strong { color: #fff; }

  /* Briques accessibilité : cartes "Une personne aveugle / malvoyante..." */
  .acc .feats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
  }
  .acc .feat {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px;
  }
  .acc section.alt .feat {
    background: var(--primary-soft);
    border-color: var(--primary-light);
  }
  .acc .feat h3 {
    font-size: 1.18rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--primary-deep);
  }
  .acc .feat p {
    color: var(--text-mid);
    font-size: 0.98rem;
    margin: 0;
  }
  .acc .feats-note {
    color: var(--text-light);
    font-size: 0.92rem;
    margin-top: 1.4rem;
  }

  /* Signature : annonces lecteur d'écran (badges) */
  .acc .says { margin-top: 0.9rem; }
  .acc .say {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--surface);
    border: 1px solid var(--primary-light);
    color: var(--primary-deep);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 5px 12px 5px 10px;
    border-radius: 999px;
    margin: 6px 6px 0 0;
  }
  .acc .say svg { flex: 0 0 auto; }

  /* Benefits : 3 cards "En plein soleil / D'une seule main / Connexion lente" */
  .acc .benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
  }
  .acc .benefits div {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 20px;
    color: var(--text-mid);
    font-size: 0.98rem;
  }
  .acc .benefits strong {
    display: block;
    color: var(--primary-deep);
    font-family: 'Bricolage Grotesque', sans-serif;
    margin-bottom: 0.2rem;
  }

  /* FAQ (details/summary natifs HTML) */
  .acc details {
    border-bottom: 1px solid var(--border);
    padding: 18px 0;
  }
  .acc details summary {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--text);
  }
  .acc details summary::-webkit-details-marker { display: none; }
  .acc details summary::after {
    content: '+';
    color: var(--primary);
    font-weight: 700;
  }
  .acc details[open] summary::after { content: '−'; }
  .acc details p {
    color: var(--text-mid);
    margin: 0.9rem 0 0;
  }

  /* CTA final : carte marine centrée sur fond clair (uniformisé avec les
     .tarif-cta-final et .guide-cta des autres pages-piliers). Pas de
     collision avec le footer marine car la carte est limitée en largeur. */
  .acc .final {
    text-align: center;
    padding: 56px 24px 80px;
    background: var(--bg);
  }
  .acc .final > .wrap {
    max-width: 720px;
    background: var(--surface-dark);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 56px 40px;
  }
  .acc .final h2 {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 700;
    max-width: 22ch;
    margin: 0 auto;
    color: #fff;
  }
  .acc .final .btn-ghost {
    color: #fff;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.3);
  }
  .acc .final .btn-ghost:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.08);
  }
  .acc .final .contact {
    margin-top: 1.4rem;
    color: rgba(255, 255, 255, 0.85);
  }
  .acc .final .contact a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
  }
  .acc .final .contact a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .acc .final .contact strong { color: #fff; }

  .acc :focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
    border-radius: 6px;
  }

  @media (max-width: 720px) {
    .acc { font-size: 17px; }
    .acc .callout { padding: 28px 24px; }
  }

  /* Lien deep vers le guide (placé sous la note du comparatif sur la home) */
  .guide-deep-link {
    text-align: center;
    margin: 24px 0 0;
  }
  .guide-deep-link a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 50px;
    color: var(--text);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
  }
  .guide-deep-link a:hover {
    border-color: var(--primary);
    color: var(--primary-deep);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
  }

  /* Messages de validation par champ */
  .wpcf7-not-valid-tip {
    display: block; color: #b91c1c; font-size: 12px;
    margin-top: 4px; font-weight: 500;
  }

  /* Message global en bas du form (succès / erreur) */
  .wpcf7-response-output {
    margin: 16px 0 0 !important;
    padding: 12px 14px !important;
    border: 1px solid !important;
    border-radius: 8px !important;
    font-size: 14px; line-height: 1.5;
  }
  .wpcf7 form.sent .wpcf7-response-output {
    border-color: var(--accent-green) !important;
    background: var(--accent-green-soft) !important;
    color: var(--accent-green) !important;
  }
  .wpcf7 form.failed .wpcf7-response-output,
  .wpcf7 form.invalid .wpcf7-response-output,
  .wpcf7 form.unaccepted .wpcf7-response-output,
  .wpcf7 form.aborted .wpcf7-response-output,
  .wpcf7 form.spam .wpcf7-response-output {
    border-color: #b91c1c !important;
    background: #fee2e2 !important;
    color: #b91c1c !important;
  }

  /* Spinner de chargement (couleur du thème) */
  .wpcf7-spinner {
    background-color: var(--primary-dark) !important;
    margin: 0 0 0 12px;
  }

  /* Champ invalide : bordure rouge discrète */
  .wpcf7-not-valid {
    border-color: #b91c1c !important;
  }