/* =============================================================
   page-zones.css — Centrage + styles distincts par zone

   Tout le contenu (hors hero) est centré sur la page.
   Couleurs et tailles différentes selon la zone.
   ============================================================= */

/* ------- CENTRAGE — titres seulement, toutes zones ------- */
.guide-near main h1, .guide-near main h2, .guide-near main h3, .guide-near main h4,
.agent-near main h1, .agent-near main h2, .agent-near main h3, .agent-near main h4,
.guide-mid  main h1, .guide-mid  main h2, .guide-mid  main h3, .guide-mid  main h4,
.agent-mid  main h1, .agent-mid  main h2, .agent-mid  main h3, .agent-mid  main h4,
.guide-far  main h1, .guide-far  main h2, .guide-far  main h3, .guide-far  main h4,
.agent-far  main h1, .agent-far  main h2, .agent-far  main h3, .agent-far  main h4,
.guide-edge main h1, .guide-edge main h2, .guide-edge main h3, .guide-edge main h4,
.agent-edge main h1, .agent-edge main h2, .agent-edge main h3, .agent-edge main h4 {
  text-align: center !important;
}

/* ------- CONTAINERS CENTRÉS — toutes zones (override layout.css) ------- */
.guide-near main [class*="container"],
.agent-near main [class*="container"],
.guide-mid  main [class*="container"],
.agent-mid  main [class*="container"],
.guide-far  main [class*="container"],
.agent-far  main [class*="container"],
.guide-edge main [class*="container"],
.agent-edge main [class*="container"] {
  margin-left:  auto !important;
  margin-right: auto !important;
}

/* ------- LISTES — alignement centré comme les paragraphes ------- */
.guide-near main ul, .agent-near main ul,
.guide-mid  main ul, .agent-mid  main ul,
.guide-far  main ul, .agent-far  main ul,
.guide-edge main ul, .agent-edge main ul,
.guide-near main ol, .agent-near main ol,
.guide-mid  main ol, .agent-mid  main ol,
.guide-far  main ol, .agent-far  main ol,
.guide-edge main ol, .agent-edge main ol {
  max-width: var(--width-container-narrow);
  margin-inline: auto;
}

/* ------- ZONE NEAR — Bleu ------- */
.guide-near p, .agent-near p {
  color: #1a3a52;
  font-size: 1.1rem;
  line-height: 1.75;
}
.guide-near h1, .agent-near h1 { color: #006be8; font-size: 2.5rem; }
.guide-near h2, .agent-near h2 { color: #006be8; font-size: 2rem; }
.guide-near h3, .agent-near h3 { color: #0055c4; font-size: 1.5rem; }
.guide-near ul li, .agent-near ul li { color: #1a3a52; margin-bottom: 0.8rem; }
.guide-near a:not(.btn), .agent-near a:not(.btn) { color: #006be8; }

/* ------- ZONE MID — Rose ------- */
.guide-mid p, .agent-mid p {
  color: #5a2855;
  font-size: 1.1rem;
  line-height: 1.75;
}
.guide-mid h1, .agent-mid h1 { color: #df4a7e; font-size: 2.6rem; }
.guide-mid h2, .agent-mid h2 { color: #df4a7e; font-size: 2.1rem; }
.guide-mid h3, .agent-mid h3 { color: #b8345f; font-size: 1.6rem; }
.guide-mid ul li, .agent-mid ul li { color: #5a2855; margin-bottom: 0.9rem; }
.guide-mid a:not(.btn), .agent-mid a:not(.btn) { color: #df4a7e; }

/* ------- ZONE FAR — Violet ------- */
.guide-far p, .agent-far p {
  color: #3a2555;
  font-size: 1.1rem;
  line-height: 1.8;
}
.guide-far h1, .agent-far h1 { color: #402b7d; font-size: 2.7rem; }
.guide-far h2, .agent-far h2 { color: #402b7d; font-size: 2.2rem; }
.guide-far h3, .agent-far h3 { color: #5a3fa0; font-size: 1.7rem; }
.guide-far ul li, .agent-far ul li { color: #3a2555; margin-bottom: 1rem; }
.guide-far a:not(.btn), .agent-far a:not(.btn) { color: #402b7d; }

/* ------- ZONE EDGE — Rouge ------- */
.guide-edge p, .agent-edge p {
  color: #6b0a12;
  font-size: 1.1rem;
  line-height: 1.85;
}
.guide-edge h1, .agent-edge h1 { color: #cc0b13; font-size: 2.8rem; }
.guide-edge h2, .agent-edge h2 { color: #cc0b13; font-size: 2.3rem; }
.guide-edge h3, .agent-edge h3 { color: #a00a0f; font-size: 1.8rem; }
.guide-edge ul li, .agent-edge ul li { color: #6b0a12; margin-bottom: 1rem; }
.guide-edge a:not(.btn), .agent-edge a:not(.btn) { color: #cc0b13; }

/* ------- Espace avant les titres qui suivent du contenu ------- */
.guide-near main p + h2, .agent-near main p + h2,
.guide-mid  main p + h2, .agent-mid  main p + h2,
.guide-far  main p + h2, .agent-far  main p + h2,
.guide-edge main p + h2, .agent-edge main p + h2,
.guide-near main ul + h2, .agent-near main ul + h2,
.guide-mid  main ul + h2, .agent-mid  main ul + h2,
.guide-far  main ul + h2, .agent-far  main ul + h2,
.guide-edge main ul + h2, .agent-edge main ul + h2 { margin-top: var(--space-10); }

.guide-near main p + h3, .agent-near main p + h3,
.guide-mid  main p + h3, .agent-mid  main p + h3,
.guide-far  main p + h3, .agent-far  main p + h3,
.guide-edge main p + h3, .agent-edge main p + h3,
.guide-near main ul + h3, .agent-near main ul + h3,
.guide-mid  main ul + h3, .agent-mid  main ul + h3,
.guide-far  main ul + h3, .agent-far  main ul + h3,
.guide-edge main ul + h3, .agent-edge main ul + h3 { margin-top: var(--space-8); }

/* =============================================================
   COHÉRENCE PAR ZONE — nav, bloc CTA, footer
   ============================================================= */

/* --- ZONE NEAR (bleu) --- */
.guide-near a.nav__link--cta,       .agent-near a.nav__link--cta       { color: #fff !important; }
.guide-near a.nav__link--cta:hover, .agent-near a.nav__link--cta:hover { color: #fff !important; }
.guide-near .section--brand *,      .agent-near .section--brand *      { color: #fff !important; }
.guide-near .section--brand a:hover,.agent-near .section--brand a:hover { color: rgba(255,255,255,0.8) !important; }

/* --- ZONE MID (rose) --- */
.guide-mid .nav__link:hover,      .agent-mid .nav__link:hover      { color: var(--color-brand-pink) !important; }
.guide-mid .nav__link--active,    .agent-mid .nav__link--active    { color: var(--color-brand-pink) !important; }
.guide-mid .nav__link::after,     .agent-mid .nav__link::after     { background: var(--color-brand-pink) !important; }
.guide-mid a.nav__link--cta,       .agent-mid a.nav__link--cta       { background: var(--color-brand-pink) !important; color: #fff !important; }
.guide-mid a.nav__link--cta:hover, .agent-mid a.nav__link--cta:hover { background: var(--color-brand-pink-dark) !important; color: #fff !important; }

.guide-mid .section--brand,
.agent-mid .section--brand {
  background: linear-gradient(135deg, var(--color-brand-pink) 0%, var(--color-brand-pink-dark) 100%) !important;
}

.guide-mid .section--brand *,      .agent-mid .section--brand *      { color: #fff !important; }
.guide-mid .section--brand a:hover,.agent-mid .section--brand a:hover { color: rgba(255,255,255,0.8) !important; }

.guide-mid .footer__col-title,    .agent-mid .footer__col-title    { color: var(--color-brand-pink) !important; }
.guide-mid .footer a:hover,       .agent-mid .footer a:hover       { color: var(--color-brand-pink) !important; }

/* --- ZONE FAR (violet) --- */
.guide-far .nav__link:hover,      .agent-far .nav__link:hover      { color: var(--color-brand-violet) !important; }
.guide-far .nav__link--active,    .agent-far .nav__link--active    { color: var(--color-brand-violet) !important; }
.guide-far .nav__link::after,     .agent-far .nav__link::after     { background: var(--color-brand-violet) !important; }
.guide-far a.nav__link--cta,       .agent-far a.nav__link--cta       { background: var(--color-brand-violet) !important; color: #fff !important; }
.guide-far a.nav__link--cta:hover, .agent-far a.nav__link--cta:hover { background: var(--color-brand-violet-dark) !important; color: #fff !important; }

.guide-far .section--brand,
.agent-far .section--brand {
  background: linear-gradient(135deg, var(--color-brand-violet) 0%, var(--color-brand-violet-dark) 100%) !important;
}

/* Fond foncé → tout le texte en blanc */
.guide-far .section--brand *,      .agent-far .section--brand *      { color: #fff !important; }
.guide-far .section--brand a:hover,.agent-far .section--brand a:hover { color: rgba(255,255,255,0.8) !important; }

.guide-far .footer__col-title,    .agent-far .footer__col-title    { color: var(--color-brand-violet) !important; }
.guide-far .footer a:hover,       .agent-far .footer a:hover       { color: var(--color-brand-violet) !important; }

/* --- ZONE EDGE (rouge) --- */
.guide-edge .nav__link:hover,      .agent-edge .nav__link:hover      { color: var(--color-brand-red) !important; }
.guide-edge .nav__link--active,    .agent-edge .nav__link--active    { color: var(--color-brand-red) !important; }
.guide-edge .nav__link::after,     .agent-edge .nav__link::after     { background: var(--color-brand-red) !important; }
.guide-edge a.nav__link--cta,       .agent-edge a.nav__link--cta       { background: var(--color-brand-red) !important; color: #fff !important; }
.guide-edge a.nav__link--cta:hover, .agent-edge a.nav__link--cta:hover { background: var(--color-brand-red-dark) !important; color: #fff !important; }

.guide-edge .section--brand,
.agent-edge .section--brand {
  background: linear-gradient(135deg, var(--color-brand-violet) 0%, var(--color-brand-red) 100%) !important;
}

.guide-edge .section--brand *,      .agent-edge .section--brand *      { color: #fff !important; }
.guide-edge .section--brand a:hover,.agent-edge .section--brand a:hover { color: rgba(255,255,255,0.8) !important; }

.guide-edge .footer__col-title,    .agent-edge .footer__col-title    { color: var(--color-brand-red) !important; }
.guide-edge .footer a:hover,       .agent-edge .footer a:hover       { color: var(--color-brand-red) !important; }

/* --- BOUTONS HERO : fond blanc, texte lisible (toutes zones) --- */
/* Écrase le color:#fff !important du sélecteur * ci-dessus grâce à une spécificité plus haute */
.agent-near .section--brand.hero .btn--accent,
.agent-mid  .section--brand.hero .btn--accent,
.agent-far  .section--brand.hero .btn--accent,
.agent-edge .section--brand.hero .btn--accent,
.guide-near .section--brand.hero .btn--accent,
.guide-mid  .section--brand.hero .btn--accent,
.guide-far  .section--brand.hero .btn--accent,
.guide-edge .section--brand.hero .btn--accent {
  background-color: #FFFFFF !important;
  color: var(--color-brand-blue) !important;
  border-color: #FFFFFF !important;
}

.agent-near .section--brand.hero .btn--ghost,
.agent-mid  .section--brand.hero .btn--ghost,
.agent-far  .section--brand.hero .btn--ghost,
.agent-edge .section--brand.hero .btn--ghost,
.guide-near .section--brand.hero .btn--ghost,
.guide-mid  .section--brand.hero .btn--ghost,
.guide-far  .section--brand.hero .btn--ghost,
.guide-edge .section--brand.hero .btn--ghost {
  background-color: #FFFFFF !important;
  color: #333333 !important;
  border-color: #FFFFFF !important;
}

/* =============================================================
   SOMMAIRE FUTURISTE — .toc-futur
   ============================================================= */

.toc-futur {
  position: relative;
  background: linear-gradient(160deg, #07021a 0%, #150b30 55%, #1e1040 100%);
  border: 1px solid rgba(160, 120, 255, 0.25);
  border-radius: 12px;
  padding: 2.5rem 2.75rem;
  margin-block: 3rem 3.5rem;
  overflow: hidden;
  text-align: left !important;
}

/* Grille holographique en arrière-plan */
.toc-futur::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(120, 80, 220, 0.07) 0px, transparent 1px, transparent 48px),
    repeating-linear-gradient(90deg, rgba(120, 80, 220, 0.07) 0px, transparent 1px, transparent 48px);
  pointer-events: none;
  z-index: 0;
}

/* Halo violet centré */
.toc-futur::after {
  content: '';
  position: absolute;
  top: -40%;
  left: 50%;
  width: 70%;
  height: 180%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(100, 60, 200, 0.18) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.toc-futur > * {
  position: relative;
  z-index: 1;
}

.toc-futur h2 {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #ffffff !important;
  margin-block-end: 1.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  text-align: left !important;
}

.toc-futur h2::before {
  content: '// ';
  color: rgba(255, 255, 255, 0.45);
}

.toc-futur ol {
  list-style: none;
  padding-inline-start: 0;
  margin: 0;
  counter-reset: toc-counter;
  display: grid;
  gap: 0.15rem;
}

.toc-futur ol li {
  counter-increment: toc-counter;
  margin: 0;
  text-align: left !important;
}

.toc-futur ol li::before {
  content: none;
}

.toc-futur ol li a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  text-decoration: none;
  color: #ffffff !important;
  font-size: 0.93rem;
  letter-spacing: 0.01em;
  line-height: 1.5;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    letter-spacing 0.18s ease,
    padding-left 0.18s ease;
}

.toc-futur ol li a::before {
  content: counter(toc-counter, decimal-leading-zero);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  flex-shrink: 0;
  min-width: 2rem;
  letter-spacing: 0.08em;
  transition: color 0.18s ease;
}

.toc-futur ol li a:hover {
  background-color: rgba(100, 60, 200, 0.15);
  color: rgba(230, 215, 255, 1) !important;
  padding-left: 1.1rem;
  letter-spacing: 0.025em;
}

.toc-futur ol li a:hover::before {
  color: rgba(255, 255, 255, 0.9);
}

.toc-futur ol li a:focus-visible {
  outline: 2px solid rgba(160, 120, 255, 0.7);
  outline-offset: 2px;
}

/* Trait décoratif gauche */
.toc-futur {
  border-left: 3px solid rgba(130, 80, 230, 0.5);
}

@media (max-width: 48rem) {
  .toc-futur {
    padding: 1.75rem 1.5rem;
  }
  .toc-futur ol li a {
    font-size: 0.88rem;
  }
}

/* =============================================================
   TOC-FUTUR — accents de couleur par zone
   (fond sombre commun, seul l'accent change)
   ============================================================= */

/* NEAR (bleu) */
.guide-near .toc-futur,
.agent-near .toc-futur {
  border-left-color: rgba(0, 107, 232, 0.5);
  border-color: rgba(0, 107, 232, 0.25);
}
.guide-near .toc-futur::before,
.agent-near .toc-futur::before {
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 107, 232, 0.07) 0px, transparent 1px, transparent 48px),
    repeating-linear-gradient(90deg, rgba(0, 107, 232, 0.07) 0px, transparent 1px, transparent 48px);
}
.guide-near .toc-futur::after,
.agent-near .toc-futur::after {
  background: radial-gradient(ellipse at center, rgba(0, 107, 232, 0.18) 0%, transparent 70%);
}
.guide-near .toc-futur h2,
.agent-near .toc-futur h2 {
  border-bottom-color: rgba(0, 107, 232, 0.2);
}
.guide-near .toc-futur ol li a:hover,
.agent-near .toc-futur ol li a:hover {
  background-color: rgba(0, 107, 232, 0.15);
}

/* MID (rose) */
.guide-mid .toc-futur,
.agent-mid .toc-futur {
  border-left-color: rgba(223, 74, 126, 0.5);
  border-color: rgba(223, 74, 126, 0.25);
}
.guide-mid .toc-futur::before,
.agent-mid .toc-futur::before {
  background-image:
    repeating-linear-gradient(0deg, rgba(223, 74, 126, 0.07) 0px, transparent 1px, transparent 48px),
    repeating-linear-gradient(90deg, rgba(223, 74, 126, 0.07) 0px, transparent 1px, transparent 48px);
}
.guide-mid .toc-futur::after,
.agent-mid .toc-futur::after {
  background: radial-gradient(ellipse at center, rgba(223, 74, 126, 0.18) 0%, transparent 70%);
}
.guide-mid .toc-futur h2,
.agent-mid .toc-futur h2 {
  border-bottom-color: rgba(223, 74, 126, 0.2);
}
.guide-mid .toc-futur ol li a:hover,
.agent-mid .toc-futur ol li a:hover {
  background-color: rgba(223, 74, 126, 0.15);
}

/* EDGE (rouge) */
.guide-edge .toc-futur,
.agent-edge .toc-futur {
  border-left-color: rgba(204, 11, 19, 0.5);
  border-color: rgba(204, 11, 19, 0.25);
}
.guide-edge .toc-futur::before,
.agent-edge .toc-futur::before {
  background-image:
    repeating-linear-gradient(0deg, rgba(204, 11, 19, 0.07) 0px, transparent 1px, transparent 48px),
    repeating-linear-gradient(90deg, rgba(204, 11, 19, 0.07) 0px, transparent 1px, transparent 48px);
}
.guide-edge .toc-futur::after,
.agent-edge .toc-futur::after {
  background: radial-gradient(ellipse at center, rgba(204, 11, 19, 0.18) 0%, transparent 70%);
}
.guide-edge .toc-futur h2,
.agent-edge .toc-futur h2 {
  border-bottom-color: rgba(204, 11, 19, 0.2);
}
.guide-edge .toc-futur ol li a:hover,
.agent-edge .toc-futur ol li a:hover {
  background-color: rgba(204, 11, 19, 0.15);
}

/* =============================================================
   PARAGRAPHES — 4 styles en rotation (.guide-far article)
   ============================================================= */

/* Style 1 (1, 5, 9 …) — Sobre avec accent violet gauche */
.guide-far main article > p:nth-of-type(4n+1),
.agent-far main article > p:nth-of-type(4n+1) {
  border-left: 3px solid rgba(90, 63, 160, 0.45) !important;
  padding-left: 1.25rem !important;
  background: transparent !important;
  border-radius: 0 4px 4px 0 !important;
  text-align: left !important;
  margin-inline: 0 !important;
  max-width: 100% !important;
}

/* Style 2 (2, 6, 10 …) — Carte verre violet teinté */
.guide-far main article > p:nth-of-type(4n+2),
.agent-far main article > p:nth-of-type(4n+2) {
  background: rgba(90, 63, 160, 0.06) !important;
  border: 1px solid rgba(90, 63, 160, 0.12) !important;
  border-radius: 8px !important;
  padding: 1rem 1.5rem !important;
  text-align: left !important;
  margin-inline: 0 !important;
  max-width: 100% !important;
}

/* Style 3 (3, 7, 11 …) — Italique avec bordure forte */
.guide-far main article > p:nth-of-type(4n+3),
.agent-far main article > p:nth-of-type(4n+3) {
  font-style: italic !important;
  border-left: 4px solid rgba(64, 43, 125, 0.7) !important;
  padding-left: 1.5rem !important;
  color: #4a3575 !important;
  background: transparent !important;
  text-align: left !important;
  margin-inline: 0 !important;
  max-width: 100% !important;
}

/* Style 4 (4, 8, 12 …) — Carte dégradé léger */
.guide-far main article > p:nth-of-type(4n+4),
.agent-far main article > p:nth-of-type(4n+4) {
  background: linear-gradient(135deg, rgba(90, 63, 160, 0.08) 0%, rgba(64, 43, 125, 0.04) 100%) !important;
  border: 1px solid rgba(90, 63, 160, 0.15) !important;
  border-radius: 8px !important;
  padding: 1rem 1.5rem !important;
  box-shadow: 0 1px 6px rgba(64, 43, 125, 0.06) !important;
  text-align: left !important;
  margin-inline: 0 !important;
  max-width: 100% !important;
}

/* =============================================================
   TEMPLATES B + C — Overrides text-align pour les blocs éditoriaux
   Les composants city-* doivent rester alignés à gauche
   ============================================================= */
.city-editorial,
.city-editorial *:not(.btn),
.city-editorial__aside,
.city-editorial__brief,
.city-editorial__brief li,
.city-editorial__brief-text,
.city-services-list,
.city-services-list__item,
.city-services-list__body,
.city-engagements,
.city-engagement,
.city-engagement__text,
.city-why-grid,
.city-why-item,
.city-why-item__content,
.city-why-item__content *,
.city-stats-band__item,
.city-services-split,
.city-services-split__intro,
.city-services-split__intro *,
.city-services-split__cards,
.city-service-row,
.city-service-row__body,
.city-service-row__body * {
  text-align: left !important;
}

/* Les valeurs dans le bandeau stats restent centrées */
.city-stats-band__item { text-align: center !important; }
.city-stats-band__value { text-align: center !important; }
.city-stats-band__label { text-align: center !important; }