/* ═══════════════════════════════════════════════════════════════
   CONSOMYZONE — CSS AMÉLIORÉ (charte graphique respectée)
   Remplacez le bloc <style> existant par ce fichier
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Palette officielle CMZ */
  --cmz-bg:           #f4f8f6;
  --cmz-bg-soft:      #fbfdfc;
  --cmz-surface:      rgba(255,255,255,.88);
  --cmz-card:         rgba(255,255,255,.98);
  --cmz-text:         #0b4f4a;
  --cmz-muted:        #58746f;
  --cmz-green:        #8cc63f;
  --cmz-green-dark:   #6fb62f;
  --cmz-green-light:  #a7d85f;
  --cmz-teal:         #0b4f4a;
  --cmz-teal-2:       #14655f;
  --cmz-border:       rgba(11,79,74,.10);
  --cmz-border-card:  rgba(11,79,74,.07);

  /* Ombres cohérentes */
  --cmz-shadow:       0 2px 16px rgba(11,79,74,.09), 0 1px 3px rgba(11,79,74,.06);
  --cmz-shadow-hover: 0 8px 32px rgba(11,79,74,.14), 0 2px 6px rgba(11,79,74,.08);
  --cmz-shadow-soft:  0 1px 8px rgba(11,79,74,.07);

  /* Rayons — coins arrondis signature CMZ */
  --cmz-radius-xl:    28px;
  --cmz-radius-lg:    20px;
  --cmz-radius-md:    14px;
  --cmz-radius-sm:    10px;
  --cmz-pill:         999px;

  --cmz-max:          1280px;

  /* Transition globale */
  --cmz-ease:         .2s cubic-bezier(.4,0,.2,1);
}

/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--cmz-text);
  background:
    radial-gradient(circle at 8% 6%,  rgba(140,198,63,.12), transparent 22%),
    radial-gradient(circle at 92% 94%, rgba(11,79,74,.07),  transparent 20%),
    linear-gradient(180deg, #f7fbf9 0%, #eef5f2 100%);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.container {
  width: min(var(--cmz-max), calc(100% - 32px));
  margin: 0 auto;
}

/* ══════════════════════════════════
   TOPBAR
══════════════════════════════════ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #0b4f4a;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
}

/* Brand */
.brand { display: flex; align-items: center; }

.brand-mark {
  height: 36px;
  width: auto;
  display: flex;
  align-items: center;
}

.brand-logo { height: 34px; width: auto; }

.brand-text {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.2px;
}

/* Nav desktop */
.nav-desktop {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.nav-divider {
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,.18);
  margin: 0 4px;
}

.topbar .nav-link {
  color: rgba(255,255,255,.72);
  font-size: 14px;
  padding: 6px 12px;
  border-radius: var(--cmz-radius-sm);
  transition: background var(--cmz-ease), color var(--cmz-ease);
}

.topbar .nav-link:hover {
  background: rgba(255,255,255,.10);
  color: #fff;
}

/* ══════════════════════════════════
   BOUTONS — signature CMZ
══════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: var(--cmz-pill);
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: transform var(--cmz-ease), box-shadow var(--cmz-ease), background var(--cmz-ease);
  white-space: nowrap;
}

.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }

/* Primaire — teal CMZ */
.btn-primary {
  color: #fff;
  background: var(--cmz-teal);
  box-shadow: 0 4px 16px rgba(11,79,74,.22);
}
.btn-primary:hover { background: var(--cmz-teal-2); box-shadow: 0 6px 22px rgba(11,79,74,.28); }

/* Secondaire */
.btn-secondary {
  color: var(--cmz-text);
  background: rgba(255,255,255,.90);
  border: 1.5px solid var(--cmz-border);
}
.btn-secondary:hover { background: var(--cmz-green); border-color: rgba(11,79,74,.18); }

/* Accent — vert lime CMZ */
.btn-accent {
  color: #0b3d39;
  background: var(--cmz-green);
  box-shadow: 0 4px 16px rgba(140,198,63,.28);
}
.btn-accent:hover { background: var(--cmz-green-light); box-shadow: 0 6px 22px rgba(140,198,63,.36); }

/* Back & CTA topbar */
.btn-back {
  color: rgba(255,255,255,.75);
  font-size: 13px;
  padding: 6px 14px;
  border-radius: var(--cmz-radius-sm);
  border: 1px solid rgba(255,255,255,.18);
  background: transparent;
  transition: all var(--cmz-ease);
}
.btn-back:hover { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.32); }

.btn-cta {
  background: #3b9e7e;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: var(--cmz-radius-sm);
  border: none;
  cursor: pointer;
  transition: background var(--cmz-ease);
}
.btn-cta:hover { background: #2e8066; }

/* Mini-liens dans les cards */
.mini-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 16px;
  border-radius: var(--cmz-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--cmz-teal);
  background: rgba(255,255,255,.80);
  border: 1.5px solid var(--cmz-border);
  transition: background var(--cmz-ease), border-color var(--cmz-ease);
}
.mini-link:hover { background: #fff; border-color: rgba(11,79,74,.18); }

/* cmz-btn — utilisé dans les tool-cards */
.cmz-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 9px 18px;
  border-radius: var(--cmz-pill);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: transform var(--cmz-ease), box-shadow var(--cmz-ease), background var(--cmz-ease);
}
.cmz-btn:hover  { transform: translateY(-1px); }
.cmz-btn:active { transform: scale(.97); }

.cmz-btn-primary {
  color: #fff;
  background: var(--cmz-green);
  box-shadow: 0 3px 12px rgba(140,198,63,.28);
}
.cmz-btn-primary:hover { background: var(--cmz-green-dark); box-shadow: 0 5px 18px rgba(140,198,63,.36); }

.cmz-btn-secondary {
  color: var(--cmz-text);
  background: rgba(255,255,255,.85);
  border: 1.5px solid var(--cmz-border);
}
.cmz-btn-secondary:hover { background: #fff; }

.cmz-arrow { font-size: 12px; opacity: .85; }

/* ══════════════════════════════════
   HERO
══════════════════════════════════ */
.hero { padding: 40px 0 28px; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 20px;
  align-items: stretch;
}

/* Card principale hero */
.hero-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--cmz-radius-xl);
  background: #fff;
  border: 1px solid var(--cmz-border-card);
  box-shadow: var(--cmz-shadow);
  padding: 36px;
  min-height: 510px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Accent bar top */
.hero-card::before {
  content: "";
  position: absolute;
  top: 0; left: 6%; right: 6%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--cmz-green-light), var(--cmz-green), var(--cmz-green-light), transparent);
  border-radius: 0 0 4px 4px;
}

/* Lueur douce en haut à droite */
.hero-card::after {
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(140,198,63,.11), transparent 65%);
  pointer-events: none;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--cmz-pill);
  background: rgba(140,198,63,.12);
  border: 1px solid rgba(140,198,63,.22);
  color: var(--cmz-teal);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 11px;
  font-weight: 700;
}

h1 {
  margin: 16px 0 14px;
  font-size: clamp(34px, 5.5vw, 58px);
  line-height: .96;
  letter-spacing: -.05em;
  max-width: 10ch;
}

.gradient-text {
  background: linear-gradient(135deg, var(--cmz-teal), var(--cmz-green));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-text {
  max-width: 58ch;
  font-size: 15px;
  line-height: 1.8;
  color: var(--cmz-muted);
}

.hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
}

/* Stats */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 32px;
}

.stat {
  border-radius: var(--cmz-radius-md);
  padding: 18px 16px;
  background: #f7fbf9;
  border: 1px solid var(--cmz-border-card);
}

.stat strong {
  display: block;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--cmz-teal);
  margin-bottom: 6px;
}

.stat span {
  color: var(--cmz-muted);
  font-size: 12.5px;
  line-height: 1.5;
}

/* Hero side — carte */
.hero-side {
  position: relative;
  overflow: hidden;
  border-radius: var(--cmz-radius-xl);
  background: linear-gradient(145deg, #dbeae5, #edf5f2 50%, #dce9e5);
  border: 1px solid var(--cmz-border-card);
  box-shadow: var(--cmz-shadow);
  min-height: 510px;
  padding: 20px;
}

.territory {
  position: relative;
  width: 100%; height: 100%;
  min-height: 470px;
  border-radius: var(--cmz-radius-lg);
  overflow: hidden;
  border: 1px solid rgba(11,79,74,.08);
  background:
    linear-gradient(90deg,  transparent 24%, rgba(255,255,255,.18) 24.5%, transparent 25%),
    linear-gradient(0deg,   transparent 24%, rgba(255,255,255,.14) 24.5%, transparent 25%),
    linear-gradient(160deg, rgba(11,79,74,.04), rgba(11,79,74,.01));
  background-size: 150px 150px, 150px 150px, auto;
}

.territory::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 25% 22%, rgba(140,198,63,.17), transparent 16%),
    radial-gradient(circle at 72% 54%, rgba(11,79,74,.09),  transparent 18%),
    radial-gradient(circle at 80% 20%, rgba(140,198,63,.13), transparent 14%);
  pointer-events: none;
}

/* Pins animés */
.pin {
  position: absolute;
  width: 16px; height: 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--cmz-green-light), var(--cmz-green));
  box-shadow: 0 0 0 8px rgba(140,198,63,.15), 0 8px 20px rgba(11,79,74,.18);
  animation: pulse 2.4s infinite ease-in-out;
}
.pin::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  background: #fff;
}

.p1 { top: 16%; left: 20%; }
.p2 { top: 30%; left: 70%; animation-delay: .2s; }
.p3 { top: 52%; left: 34%; animation-delay: .4s; }
.p4 { top: 68%; left: 64%; animation-delay: .6s; }
.p5 { top: 24%; left: 48%; animation-delay: .8s; }
.p6 { top: 62%; left: 18%; animation-delay: 1s;  }

@keyframes pulse {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-5px) scale(1.05); }
}

/* Caption carte */
.map-caption {
  position: absolute;
  left: 16px; right: 16px; bottom: 16px;
  padding: 18px 20px;
  border-radius: var(--cmz-radius-md);
  background: rgba(255,255,255,.93);
  border: 1px solid var(--cmz-border-card);
  box-shadow: var(--cmz-shadow);
}

.map-caption strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--cmz-teal);
  margin-bottom: 6px;
}

.map-caption p {
  margin: 0;
  color: var(--cmz-muted);
  font-size: 13.5px;
  line-height: 1.7;
}

/* ══════════════════════════════════
   SECTION OUTILS
══════════════════════════════════ */
.section { padding: 12px 0 28px; }

.section-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-end;
  margin-bottom: 20px;
}

.section-head h2 {
  margin: 0 0 8px;
  font-size: clamp(26px, 3.5vw, 38px);
  line-height: 1.05;
  letter-spacing: -.04em;
}

.section-head p {
  margin: 0;
  max-width: 56ch;
  color: var(--cmz-muted);
  line-height: 1.75;
  font-size: 14.5px;
}

/* Grille des outils */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* ── Tool card ── */
.tool-card,
.cmz-tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border-radius: var(--cmz-radius-lg);
  background: #fff;
  border: 1px solid var(--cmz-border-card);
  box-shadow: var(--cmz-shadow-soft);
  overflow: hidden;
  transition: transform var(--cmz-ease), box-shadow var(--cmz-ease), border-color var(--cmz-ease);
}

/* Bande colorée top — signature */
.tool-card::before,
.cmz-tool-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cmz-teal), var(--cmz-green));
}

.tool-card:hover,
.cmz-tool-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--cmz-shadow-hover);
  border-color: rgba(140,198,63,.28);
}

/* Icône */
.tool-top,
.cmz-tool-top {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.icon-box,
.cmz-icon {
  width: 52px; height: 52px;
  min-width: 52px;
  border-radius: var(--cmz-radius-sm);
  display: grid;
  place-items: center;
  background: #f4fbf7;
  border: 1px solid rgba(11,79,74,.08);
}

.icon-box svg,
.cmz-icon svg {
  width: 24px; height: 24px;
  stroke: var(--cmz-teal);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Titre outil */
.tool-title,
.cmz-tool-title {
  margin: 3px 0 5px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--cmz-teal);
}

/* Tag / badge */
.tag,
.cmz-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--cmz-pill);
  background: rgba(140,198,63,.13);
  border: 1px solid rgba(140,198,63,.22);
  color: var(--cmz-teal);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
}

/* Texte description */
.tool-card p,
.cmz-tool-text {
  margin: 0;
  color: var(--cmz-muted);
  font-size: 13.5px;
  line-height: 1.75;
  flex: 1;
}

/* Actions en bas de card */
.tool-actions,
.cmz-tool-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}

/* ══════════════════════════════════
   FEATURE BAND
══════════════════════════════════ */
.feature-band {
  margin-top: 22px;
  padding: 28px;
  border-radius: var(--cmz-radius-xl);
  background: linear-gradient(135deg, #0b4f4a, #14655f);
  color: #fff;
  box-shadow: 0 8px 32px rgba(11,79,74,.22);
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 24px;
  align-items: center;
}

.feature-band h3 {
  margin: 0 0 10px;
  font-size: 28px;
  line-height: 1.08;
  letter-spacing: -.03em;
}

.feature-band p {
  margin: 0;
  color: rgba(255,255,255,.82);
  line-height: 1.8;
  font-size: 14.5px;
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.feature-item {
  padding: 16px;
  border-radius: var(--cmz-radius-md);
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.10);
}

.feature-item strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
}

.feature-item span {
  color: rgba(255,255,255,.75);
  font-size: 12.5px;
  line-height: 1.6;
}

/* ══════════════════════════════════
   CTA
══════════════════════════════════ */
.cta { padding: 28px 0 56px; }

.cta-box {
  padding: 40px;
  border-radius: var(--cmz-radius-xl);
  background: #fff;
  border: 1px solid var(--cmz-border-card);
  box-shadow: var(--cmz-shadow);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-box::before {
  content: "";
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--cmz-green-light), var(--cmz-green), var(--cmz-green-light), transparent);
  border-radius: 0 0 4px 4px;
}

.cta-box::after {
  content: "";
  position: absolute;
  top: -80px; right: -80px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(140,198,63,.09), transparent 65%);
  pointer-events: none;
}

.cta-box h2 {
  margin: 0 0 10px;
  font-size: clamp(28px, 4.5vw, 44px);
  letter-spacing: -.04em;
  line-height: 1.05;
}

.cta-box p {
  margin: 0 auto 24px;
  max-width: 58ch;
  color: var(--cmz-muted);
  line-height: 1.8;
  font-size: 15px;
}

.cta-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ══════════════════════════════════
   FORMULAIRE CONTACT / ASSISTANCE
══════════════════════════════════ */
.cmz-contact-form {
  background: #fff;
  border: 1px solid var(--cmz-border-card);
  border-radius: var(--cmz-radius-lg);
  padding: 24px;
}

.cmz-contact-form__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(11,79,74,.08);
}

.cmz-contact-form__icon {
  font-size: 1.4rem;
  background: rgba(140,198,63,.12);
  padding: 8px;
  border-radius: var(--cmz-radius-sm);
  line-height: 1;
}

.cmz-contact-form__title {
  font-weight: 700;
  font-size: 15px;
  color: var(--cmz-teal);
  margin: 0 0 2px;
}

.cmz-contact-form__subtitle {
  font-size: 12px;
  color: var(--cmz-muted);
  margin: 0;
}

.cmz-field { margin-bottom: 14px; }

.cmz-field__label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cmz-text);
  margin-bottom: 5px;
}

.cmz-field__input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cmz-field__icon {
  position: absolute;
  left: 12px;
  color: var(--cmz-muted);
  display: flex;
  align-items: center;
}

.cmz-field__input {
  width: 100%;
  padding: 9px 12px 9px 36px;
  border: 1.5px solid rgba(11,79,74,.14);
  border-radius: var(--cmz-radius-sm);
  font-size: 14px;
  background: #f9fcfa;
  color: var(--cmz-text);
  transition: border-color var(--cmz-ease), box-shadow var(--cmz-ease);
  font-family: inherit;
}

.cmz-field__input:focus {
  outline: none;
  border-color: var(--cmz-green);
  box-shadow: 0 0 0 3px rgba(140,198,63,.15);
  background: #fff;
}

.cmz-field__textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid rgba(11,79,74,.14);
  border-radius: var(--cmz-radius-sm);
  font-size: 14px;
  background: #f9fcfa;
  color: var(--cmz-text);
  resize: vertical;
  transition: border-color var(--cmz-ease), box-shadow var(--cmz-ease);
  font-family: inherit;
  line-height: 1.6;
}

.cmz-field__textarea:focus {
  outline: none;
  border-color: var(--cmz-green);
  box-shadow: 0 0 0 3px rgba(140,198,63,.15);
  background: #fff;
}

.cmz-contact-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

/* ══════════════════════════════════
   MOBILE MENU
══════════════════════════════════ */
body.menu-open { overflow: hidden; }

.topbar-main {
  min-height: 68px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.topbar-left {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.mobile-toggle {
  display: none;
  width: 44px; height: 44px;
  margin-left: auto;
  padding: 0;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: var(--cmz-radius-sm);
  background: transparent;
  color: #fff;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  transition: background var(--cmz-ease), border-color var(--cmz-ease);
}

.mobile-toggle:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.34); }

.mobile-toggle-line {
  width: 20px; height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}

.mobile-toggle.is-open .mobile-toggle-line:nth-child(1) { transform: translateY(7px)  rotate(45deg); }
.mobile-toggle.is-open .mobile-toggle-line:nth-child(2) { opacity: 0; }
.mobile-toggle.is-open .mobile-toggle-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu        { display: none; width: 100%; padding: 0 0 14px; }
.mobile-menu.is-open { display: block; }

.mobile-nav {
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
}

.mobile-nav .btn { justify-content: center; width: 100%; }

/* ══════════════════════════════════
   RESPONSIVE
══════════════════════════════════ */
@media (max-width: 1180px) {
  .nav-desktop .btn { padding: 9px 14px; font-size: 13px; }
}

@media (max-width: 980px) {
  .nav-desktop { display: none; }
  .mobile-toggle { display: inline-flex; }
}

@media (max-width: 1120px) {
  .hero-grid,
  .feature-band { grid-template-columns: 1fr; }
  .tools-grid   { grid-template-columns: repeat(2, 1fr); }
  .hero-card, .hero-side { min-height: auto; }
  .territory { min-height: 340px; }
}

@media (max-width: 760px) {
  .topbar-inner,
  .section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero-card, .hero-side, .cta-box { padding: 22px; }
  .hero-stats, .feature-list { grid-template-columns: 1fr; }
  h1 { max-width: none; }

  .hero-actions .btn,
  .cta-actions .btn,
  .section-head > .btn,
  .tool-actions .cmz-btn,
  .tool-actions .mini-link { width: 100%; justify-content: center; }

  .map-caption { left: 12px; right: 12px; bottom: 12px; padding: 14px; }
}

@media (max-width: 600px) {
  .container { width: min(var(--cmz-max), calc(100% - 20px)); }
  .tools-grid { grid-template-columns: 1fr; }
  .tool-card, .cmz-tool-card { padding: 18px; }
  .stat { padding: 14px; }
  .cta-box { padding: 24px 18px; }
}

/* ══════════════════════════════════
   UTILITAIRES
══════════════════════════════════ */
.hero-card, .hero-side, .cta-box,
.tool-card, .cmz-tool-card,
.stat, .map-caption { max-width: 100%; }

.hero-text, .section-head p, .tool-card p,
.cmz-tool-text, .cta-box p, .map-caption p,
h1, h2, h3 { overflow-wrap: anywhere; word-break: break-word; }

.section-head > .btn { flex-shrink: 0; }


/* ══════════════════════════════════
   TOOL ACTIONS — boutons uniformes
══════════════════════════════════ */
.tool-actions,
.cmz-tool-actions {
  flex-direction: column;
  gap: 8px;
}

.tool-actions .cmz-btn,
.tool-actions .mini-link,
.cmz-tool-actions .cmz-btn,
.cmz-tool-actions .mini-link,
.cmz-tool-actions a {
  width: 100%;
  justify-content: center;
}

/* Bouton secondaire "Lire la suite" — style outline */
.tool-actions .cmz-btn-secondary,
.tool-actions .mini-link,
.cmz-tool-actions .cmz-btn-secondary,
.cmz-tool-actions .mini-link {
  background: transparent;
  border: 1.5px solid var(--cmz-border);
  color: var(--cmz-teal);
  box-shadow: none;
}

.tool-actions .cmz-btn-secondary:hover,
.tool-actions .mini-link:hover,
.cmz-tool-actions .cmz-btn-secondary:hover,
.cmz-tool-actions .mini-link:hover {
  background: rgba(11,79,74,.04);
  border-color: rgba(11,79,74,.2);
}