/* ============================================================================
   PAGES MÉTIER / VILLE / MÉTIER×VILLE — NOUVELLE DA BLEUE (index2.html only)
   ----------------------------------------------------------------------------
   Équivalent de blog2.css pour les ~355 pages creation-site-internet-* et
   site-internet-*. Chargé en DERNIER, après :
     styles.css → responsive.css → zones.css → hero2.css → home-demos.css
   On NE réécrit PAS zones.css : les éditos (.zone__*) consomment les tokens de
   thème (--bg, --text, --accent, --font-*) → on les REMAPPE vers la DA bleue,
   comme blog2.css l'a fait pour le blog. S'y ajoutent les overrides pour les
   couleurs codées EN DUR de zones.css (pensées pour fond noir) et deux
   composants propres aux pages (FAQ « flat », mention déontologie).
   Scopé body.tvl-da2 : n'affecte que les clones index2.html migrés.
   Tokens --da2-* définis par hero2.css (body.tvl-da2).
   ============================================================================ */

/* 1. REMAP DES TOKENS DE THÈME ---------------------------------------------
   Niveau racine (zones édito « sombres » + tout composant hors section light)
   ET .section--light (sections claires du bloc conversion legacy résiduel). */
body.tvl-da2,
body.tvl-da2 .section--light {
  --bg: #f9f8f3;
  --bg-2: #ffffff;
  --bg-3: #f0efe9;
  --text: #1e2330;
  --text-2: #4a5160;
  --text-muted: #7c8598;
  --text-muted-2: #9aa1b0;
  --accent: #274b8f;                 /* bleu de marque, remplace le lime */
  --line: rgba(30, 35, 48, .10);
  --line-2: rgba(30, 35, 48, .16);
  --font-serif:   "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans:    "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Les zones édito claires restent BLANCHES (alternance crème/blanc du bas de
   page) : zones.css re-scope ses tokens sur .zone__section--light (0,1,0),
   on le re-scope au-dessus (0,2,0) avec la palette DA2. */
body.tvl-da2 .zone__section--light {
  --bg: #ffffff;
  --bg-2: #f9f8f3;
  --bg-3: #f0efe9;
  --text: #1e2330;
  --text-2: #4a5160;
  --text-muted: #7c8598;
  --text-muted-2: #9aa1b0;
  --accent: #274b8f;
  --line: rgba(30, 35, 48, .10);
  --line-2: rgba(30, 35, 48, .16);
}

/* Fond de page clair (le body du site est noir par défaut dans styles.css). */
body.tvl-da2[data-page="home"] { background: var(--da2-card, #f9f8f3); color: var(--text); }

/* 2. MAILLAGE BAS DE PAGE — couleurs EN DUR de zones.css pensées pour fond
   noir (rgba blancs) : illisibles sur la DA claire sans ces overrides. ----- */
body.tvl-da2 .zone__nearby-label { color: var(--text-muted); }
body.tvl-da2 .zone__nearby a {
  color: var(--text-2);
  border-bottom-color: rgba(30, 35, 48, .18);
}
body.tvl-da2 .zone__nearby a:hover {
  color: var(--da2-blue, #274b8f);
  border-color: var(--da2-blue, #274b8f);
}

/* 3. CTA ÉDITO (.zone__cta) — le bouton prenait background:var(--accent) avec
   texte noir : sur bleu ce serait illisible, et la couleur d'action du site
   est le JAUNE (décision 2026-07-23). Surligneur du titre en jaune aussi. --- */
body.tvl-da2 .zone__section-body a.zone__cta-btn,
body.tvl-da2 .zone__cta-btn {
  background: var(--da2-yellow, #ffc531);
  color: #3a2a00;
  font-weight: 700;
}
body.tvl-da2 .zone__cta-btn:hover {
  box-shadow: 0 12px 32px -12px rgba(255, 197, 49, .55);
}
body.tvl-da2 .zone__section--light .zone__cta-title em {
  background: linear-gradient(180deg, transparent 62%, var(--da2-yellow, #ffc531) 62%, var(--da2-yellow, #ffc531) 92%, transparent 92%);
}

/* 4. FAQ MOBILE REGROUPÉE (.tvl-faq--pages) — revue Valentin 30/07 : les
   intitulés de groupe reviennent (le mode « flat » de la Phase 1 est retiré).
   Les 355 pages ont TOUTES la même structure (vérifié sur les sources le
   30/07) : 3 questions locales (positions 1-3) puis les 7 de l'accueil dans
   un ordre constant. Ordre DOM (= desktop = JSON-LD, ne bouge pas) :
     1-3 locales · 4 délai · 5 abonnement · 6 Google · 7 photos · 8 évoluer ·
     9 Facebook · 10 pas le temps.
   Les `order` mobiles d'index2 (hero2.css @880px) sont calés sur SES
   questions : on les redéfinit TOUS ici (détails 1-10 + 4 groupes + carte de
   fin), à spécificité supérieure. _migrate_da2.js pose la classe et injecte
   les 4 <p class="tvl-faq__group"> ; _verify_da2.js verrouille l'ordre des
   questions 4-10 (l'hypothèse de ce bloc). */
@media (max-width: 880px) {
  body.tvl-da2 .tvl-faq--pages .tvl-faq__group[data-faq-group="1"] { order: 1; }  /* Votre projet */
  body.tvl-da2 .tvl-faq--pages .tvl-faq__list > details:nth-of-type(1) { order: 2; }
  body.tvl-da2 .tvl-faq--pages .tvl-faq__list > details:nth-of-type(2) { order: 3; }
  body.tvl-da2 .tvl-faq--pages .tvl-faq__list > details:nth-of-type(3) { order: 4; }
  /* 11/09/2026, lot 7 : la landing agence-web-nantes porte 3 questions de plus,
     rangees dans « Votre projet ». Regles inertes sur les 556 autres pages,
     qui n'ont que 10 <details>. */
  body.tvl-da2 .tvl-faq--pages .tvl-faq__list > details:nth-of-type(11) { order: 5; }
  body.tvl-da2 .tvl-faq--pages .tvl-faq__list > details:nth-of-type(12) { order: 6; }
  body.tvl-da2 .tvl-faq--pages .tvl-faq__list > details:nth-of-type(13) { order: 7; }
  body.tvl-da2 .tvl-faq--pages .tvl-faq__group[data-faq-group="2"] { order: 8; }  /* Délais et mise en ligne */
  body.tvl-da2 .tvl-faq--pages .tvl-faq__list > details:nth-of-type(4) { order: 9; }   /* délai */
  body.tvl-da2 .tvl-faq--pages .tvl-faq__list > details:nth-of-type(6) { order: 10; }   /* Google */
  body.tvl-da2 .tvl-faq--pages .tvl-faq__group[data-faq-group="3"] { order: 11; }  /* Abonnement et facturation */
  body.tvl-da2 .tvl-faq--pages .tvl-faq__list > details:nth-of-type(5) { order: 12; }   /* abonnement */
  body.tvl-da2 .tvl-faq--pages .tvl-faq__group[data-faq-group="4"] { order: 13; } /* Contenu et suivi */
  body.tvl-da2 .tvl-faq--pages .tvl-faq__list > details:nth-of-type(7) { order: 14; }  /* photos */
  body.tvl-da2 .tvl-faq--pages .tvl-faq__list > details:nth-of-type(8) { order: 15; }  /* évoluer */
  body.tvl-da2 .tvl-faq--pages .tvl-faq__list > details:nth-of-type(10) { order: 16; } /* pas le temps */
  body.tvl-da2 .tvl-faq--pages .tvl-faq__list > details:nth-of-type(9) { order: 17; }  /* Facebook */
  body.tvl-da2 .tvl-faq--pages .tvl-faq__list > .tvl-faq__more { order: 18; }
}

/* 5. MENTION DÉONTOLOGIE (ostéopathe, avocat + leurs déclinaisons ville) —
   classe UNIFIÉE posée sous le comparateur du hero par la migration
   (remplace .tvl-hero__fiction / .tvl-hero__fictif de l'ancienne DA). ------- */
body.tvl-da2 .tvl-hero2__fictif {
  margin: 10px 0 0;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--da2-muted, #7c8598);
  font-family: var(--da2-font, system-ui, sans-serif);
  font-style: italic;
}

/* 6. Focus visible cohérent DA sur les éditos. ------------------------------ */
body.tvl-da2 .zone a:focus-visible {
  outline: 2px solid var(--da2-blue, #274b8f);
  outline-offset: 3px;
  border-radius: 6px;
}

/* 7. Surligneurs des éditos (review adversariale 30/07) ---------------------
   zones.css peint un surligneur var(--accent) derrière les em des h2 et les
   liens au survol : avec l'accent remappé BLEU NUIT, texte encre sur bande
   bleue = illisible (contraste ~1,9:1). Surligneur JAUNE pour les titres,
   teinte bleue claire pour les liens. */
body.tvl-da2 .zone__section--light .zone__section-body h2 em {
  background: linear-gradient(180deg, transparent 62%, var(--da2-yellow, #ffc531) 62%, var(--da2-yellow, #ffc531) 92%, transparent 92%);
}
body.tvl-da2 .zone__section--light .zone__section-body a:hover {
  background: var(--da2-blue-tint, #eef2f9);
}

/* 8. Pages déonto (ostéopathe/avocat) : la section Avis étant retirée, la FAQ
   suit directement « Ce que vous évitez » (deux fonds blancs). Quand elles
   sont adjacentes : FAQ sur fond gris clair, cartes accordéon blanches. ----- */
body.tvl-da2 .tvl-avoid2 + .tvl-faq { background: #f6f7f9; }
body.tvl-da2 .tvl-avoid2 + .tvl-faq .tvl-faq__item { background: #ffffff; border-color: #e6e9f0; }

/* Contraste AA de la mention déonto (12,5px) : encre 2 plutôt que muted. */
body.tvl-da2 .tvl-hero2__fictif { color: var(--da2-ink-2, #4a5160); }

/* Fond de page : sans restreindre à [data-page="home"] (mentions/hubs futurs) —
   pages2.css est chargé après hero2.css, il gagne sur le navy body.tvl-da2. */
body.tvl-da2 { background: var(--da2-card, #f9f8f3); }

/* 9. RÉSERVE MOBILE DE LA BARRE D'APPEL — le <style> head (gabarit index2)
   pose `body{padding-bottom:86px+safe-area}` ≤900px pour que la pilule fixe
   ne recouvre jamais le footer. Sur index2 le body est navy : la réserve est
   invisible. Ici le body est CRÈME → bande claire sous le footer navy (revue
   Valentin 30/07, « zone blanche » après le footer d'Angers — gabarit, pas la
   page). La réserve passe DANS le footer : même dégagement, fond navy continu. */
@media (max-width: 900px) {
  body.tvl-da2 { padding-bottom: 0; }
  body.tvl-da2 .tvl-footer { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
}

/* 12. ACCESSIBILITÉ — libellé du maillage de bas de zone. --------------------
   `--text-muted` (#7c8598) sur le crème #f9f8f3 des sections de zone donne un
   contraste de 3,49:1, sous le seuil WCAG AA de 4,5:1 pour du texte de 15px.
   Mesuré au navigateur le 19/08/2026 sur les pages métier×ville. On assombrit
   le seul libellé concerné plutôt que le jeton global, qui sert ailleurs sur
   des fonds différents : #646d80 donne 4,89:1 sur crème et 5,19:1 sur blanc,
   dans la même famille de bleu-gris. Les puces (--text-2) étaient déjà à 7,5:1. */
body.tvl-da2 .zone__nearby-label { color: #646d80; }

/* 13. ACCESSIBILITÉ — taille des cibles du maillage de bas de zone. ---------
   Les puces .zone__nearby sont des liens texte de 22px de haut (line-height
   21px + filet 1px), soit 2px sous le minimum de 24x24 px demandé par le
   critère WCAG 2.2 « Target Size (Minimum) » (2.5.8, niveau AA). Mesuré au
   navigateur le 19/08/2026 à 375px sur les pages métier x ville.
   On agrandit la zone cliquable par un calque en ::after au lieu d ajouter du
   padding : la mise en page ne bouge pas d un pixel, et l interligne de 8px de
   la grille (gap .5rem) absorbe le débord d 1px de part et d autre, donc deux
   puces de lignes voisines ne se chevauchent jamais. */
body.tvl-da2 .zone__nearby a { position: relative; }
body.tvl-da2 .zone__nearby a::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 24px; transform: translateY(-50%);
}

/* 14. ACCESSIBILITÉ — contraste du numéro de zone (« 01 · Constat »). -------
   Même cause que la section 12, autre élément : .zone__section-label hérite de
   --text-muted (#7c8598) et tombe à 3,49:1 sur le crème #f9f8f3, pour du texte
   de 11px — très en dessous des 4,5:1 attendus en AA. Mesuré au navigateur le
   19/08/2026 sur Angers, Blois et Nantes : le défaut est site-wide, pas propre
   à un lot. On reprend exactement la teinte retenue en section 12 (#646d80,
   4,89:1 sur crème et 5,19:1 sur blanc) pour ne pas introduire un 2e gris. */
body.tvl-da2 .zone__section-label { color: #646d80; }