/* ============================================================================
   FICHES PROJET (projets/<slug>/) — NOUVELLE DA BLEUE
   ----------------------------------------------------------------------------
   Chargé APRÈS styles.css / responsive.css / zones.css / hero2.css.
   Même moteur que blog2.css : on NE réécrit PAS les 100 règles .case-* de
   styles.css. Les études de cas utilisent partout les tokens de thème
   (--accent, --text, --bg, --font-*), il suffit donc de REMAPPER ces tokens
   vers la DA bleue, puis de repeindre à la main la quinzaine de règles qui
   codaient une couleur DA1 en dur (terracotta #c2613f, lime, noir #0a0a0a).

   Ce que ça change :
     · plus de terracotta/lime  → bleu #274b8f (marque) + jaune #ffc531 (action)
     · plus de Cormorant / Space Grotesk / Instrument Serif → Plus Jakarta Sans
     · UNE seule couleur d'action par page (décision du 23/07/2026) : le jaune.
       Le bleu redevient couleur de marque et de structure.

   ⚠️ Scopé body.tvl-da2[data-page="case"] : n'affecte QUE les fiches projet.
   Le sélecteur d'attribut est indispensable — les tokens remappés ci-dessous
   sont les tokens GLOBAUX du site, les poser sur body.tvl-da2 tout court
   repeindrait les 405 autres pages.
   ============================================================================ */

/* 1. REMAP DES TOKENS DE THÈME ---------------------------------------------
   On vise la racine ET .case-section--light : la fiche alterne sections
   « normales » et « claires », les deux doivent rendre en DA claire. */
body.tvl-da2[data-page="case"],
body.tvl-da2[data-page="case"] .case-section--light,
body.tvl-da2[data-page="case"] .case-hero {
  --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 terracotta */
  --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;
}
body.tvl-da2[data-page="case"] { background: var(--da2-card); color: var(--text); }

/* 2. HERO -------------------------------------------------------------------
   Le hero a deux variantes dans styles.css (une sombre historique, une crème
   qui l'écrase plus bas dans le fichier). C'est la crème qui rend : on la
   repeint en blanc DA, on neutralise le voile sombre du ::before, et le
   terracotta #c2613f du mot accentué passe au bleu. */
body.tvl-da2[data-page="case"] .case-hero { background: #ffffff; }
body.tvl-da2[data-page="case"] .case-hero::after { background: rgba(30, 35, 48, .07); }
body.tvl-da2[data-page="case"] .case-hero__back { color: var(--da2-muted); font-weight: 600; }
body.tvl-da2[data-page="case"] .case-hero__back:hover { color: var(--da2-blue); }
body.tvl-da2[data-page="case"] .case-kicker { color: var(--da2-muted); letter-spacing: .04em; }
/* L'italique venait du serif Cormorant ; en Jakarta il faut l'enlever, sinon
   le mot est simplement penché et fait faute de frappe. */
body.tvl-da2[data-page="case"] .case-title { letter-spacing: -.025em; }
body.tvl-da2[data-page="case"] .case-title em { color: var(--da2-blue); font-style: normal; }
body.tvl-da2[data-page="case"] .case-lede { color: var(--da2-ink-2); }
body.tvl-da2[data-page="case"] .case-demo-note { color: var(--da2-muted); }

/* Bouton principal du hero : JAUNE, comme la pilule de la barre de menu et le
   CTA du hero d'accueil. Une page = une seule couleur d'action. */
body.tvl-da2[data-page="case"] .case-hero__link {
  background: var(--da2-yellow);
  border: 1.5px solid var(--da2-yellow);
  color: var(--da2-yellow-ink);
  border-radius: 100px;
  font-family: var(--da2-font);
  font-weight: 700;
  letter-spacing: .2px;
  text-transform: none;
}
body.tvl-da2[data-page="case"] .case-hero__link:hover { background: #ffcf52; border-color: #ffcf52; }
body.tvl-da2[data-page="case"] .case-hero__link--ghost {
  background: transparent;
  border: 1.5px solid rgba(30, 35, 48, .16);
  color: var(--da2-ink);
}
body.tvl-da2[data-page="case"] .case-hero__link--ghost:hover { background: #f1f3f7; border-color: rgba(30, 35, 48, .28); }

/* Résumé projet (Métier / Localisation / Objectif / Livrable). */
body.tvl-da2[data-page="case"] .case-stat span { color: var(--da2-muted); letter-spacing: .04em; }
body.tvl-da2[data-page="case"] .case-stat strong { color: var(--da2-ink); }

/* 3. SECTIONS ÉDITORIALES ---------------------------------------------------
   Alternance crème / blanc, comme le reste du site en DA2. */
body.tvl-da2[data-page="case"] .case-section { background: var(--da2-card); }
body.tvl-da2[data-page="case"] .case-section--light { background: #ffffff; }
body.tvl-da2[data-page="case"] .case-label { color: var(--da2-blue); font-weight: 700; letter-spacing: .04em; }
/* Titres de section : −30 % (03/08/2026, demande Valentin — « trop gros »).
   Mesuré avant : 72px à 1440 (clamp 5vw) et 36px à 390. On garde exactement le
   même comportement fluide, ramené de 5vw à 3,5vw et les bornes de 36/72 à
   25/50 → 50px et 25px, soit −30 % aux deux extrémités et partout entre. */
body.tvl-da2[data-page="case"] .case-body h2 {
  font-size: clamp(25px, 3.5vw, 50px);
  letter-spacing: -.02em;
}
body.tvl-da2[data-page="case"] .case-body h2 em { color: var(--da2-blue); font-style: normal; }
/* Le surlignage des sections claires devient JAUNE : en bleu, le texte passait
   dessus en bleu sur bleu. Le jaune fait surligneur et reste dans la palette. */
body.tvl-da2[data-page="case"] .case-section--light .case-body h2 em {
  background: linear-gradient(180deg, transparent 62%, var(--da2-yellow) 62%, var(--da2-yellow) 92%, transparent 92%);
  color: var(--da2-ink);
}

/* Cartes : carte blanche à ombre douce DA, au lieu du cadre sec DA1. */
body.tvl-da2[data-page="case"] .case-card {
  background: #ffffff;
  border-color: var(--da2-hairline);
  border-radius: 18px;
  box-shadow: 0 1px 3px rgba(18, 22, 31, .04), 0 14px 34px -26px rgba(18, 22, 31, .45);
}
body.tvl-da2[data-page="case"] .case-section--light .case-card { background: var(--da2-card); }
body.tvl-da2[data-page="case"] .case-card__num,
body.tvl-da2[data-page="case"] .case-card__tag { color: var(--da2-blue); font-weight: 700; }
body.tvl-da2[data-page="case"] .case-card h3 { color: var(--da2-ink); letter-spacing: -.01em; }
body.tvl-da2[data-page="case"] .case-card li::before { color: var(--da2-blue); }
/* Chiffres-repères (+ émotion, + local, + demandes, + premium) : −30 %
   (03/08/2026). Mesuré avant : 54px à 1440 (clamp 3,75vw) et 28px à 390.

   ⚠️ « + mot » NE DOIT JAMAIS se couper (demande Valentin) — d'où le nowrap.
   Mais un nowrap seul fait déborder le texte de sa case : relevé sur les 27
   fiches, le pire cas est « + mémorisation » (forno-errante), qui à 1024px
   demande 2,1 fois la largeur de sa case (118px). Une taille fixe assez petite
   pour lui rendrait tous les autres illisibles.

   On dimensionne donc la police par rapport à la CASE et non à l'écran :
   container-type: inline-size fait de chaque .case-metric un conteneur, et
   1cqi = 1 % de sa largeur. 14,5cqi est la valeur relevée qui fait tenir le
   pire cas à toutes les largeurs (25,9px dans 173px à 1440, 17,7px dans 118px
   à 1024), avec une marge de sécurité pour les accents. Le min() garde le −30 %
   comme plafond : la police ne dépasse jamais la taille voulue, elle ne fait
   que redescendre quand la case se resserre.
   Les colonnes de la grille étant égales, toutes les cases d'une même rangée
   gardent la même taille de texte — pas d'effet d'escalier. */
body.tvl-da2[data-page="case"] .case-metric { container-type: inline-size; }
body.tvl-da2[data-page="case"] .case-metric strong {
  color: var(--da2-blue);
  font-size: min(clamp(19.6px, 2.625vw, 37.8px), 14.5cqi);
  white-space: nowrap;
}
body.tvl-da2[data-page="case"] .case-ba span { color: var(--da2-blue); }
body.tvl-da2[data-page="case"] .case-shot__caption { color: var(--da2-muted); }

/* 4. BANDEAU CTA DE FIN -----------------------------------------------------
   DA1 : bandeau plein accent avec texte noir. En bleu, le noir devient
   illisible → texte blanc, et le bouton reprend le jaune d'action. */
body.tvl-da2[data-page="case"] .case-cta { background: var(--da2-blue); color: #ffffff; }
/* Titre du bandeau : −40 % (03/08/2026, demande Valentin). Il était à
   clamp(46px, 8vw, 124px), soit 115px à 1440 — plus gros que le H1 de la page
   (86px) et plus du double des titres de section une fois ceux-ci à −30 %. */
body.tvl-da2[data-page="case"] .case-cta h2 {
  color: #ffffff;
  font-size: clamp(27.6px, 4.8vw, 74.4px);
  letter-spacing: -.02em;
}
body.tvl-da2[data-page="case"] .case-cta h2 em { color: var(--da2-yellow); font-style: normal; }
body.tvl-da2[data-page="case"] .case-cta p { color: rgba(255, 255, 255, .78); }
body.tvl-da2[data-page="case"] .case-btn {
  background: var(--da2-yellow);
  border: 1.5px solid var(--da2-yellow);
  color: var(--da2-yellow-ink);
  border-radius: 100px;
  font-family: var(--da2-font);
  font-weight: 700;
  letter-spacing: .2px;
  text-transform: none;
}
body.tvl-da2[data-page="case"] .case-btn:hover { background: #ffcf52; border-color: #ffcf52; }
body.tvl-da2[data-page="case"] .case-btn--ghost {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, .45);
  color: #ffffff;
}
body.tvl-da2[data-page="case"] .case-btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .7); }

/* 5. PROJET SUIVANT ---------------------------------------------------------
   Bande sombre assumée, mais en encre DA (#1e2330) plutôt qu'en noir #0a0a0a. */
body.tvl-da2[data-page="case"] .next-project { background: var(--da2-ink); }
body.tvl-da2[data-page="case"] .next-project__label { color: rgba(255, 255, 255, .55); letter-spacing: .04em; }
body.tvl-da2[data-page="case"] .next-project__name { color: #ffffff; letter-spacing: -.02em; }
body.tvl-da2[data-page="case"] .next-project__link:hover .next-project__name { color: var(--da2-yellow); }

/* 6. BARRE D'ACTION MOBILE (.mcta) ------------------------------------------
   Elle vit dans responsive.css et code ses couleurs en dur : bouton Devis en
   lime #c2f24e, bouton Appeler en noir #0b0d0a. Les tokens ne l'atteignent
   donc pas — on la repeint ici, sinon le lime réapparaît en bas de l'écran
   sur mobile alors que toute la page est passée au jaune.
   WhatsApp garde son vert #25d366 : c'est une couleur de marque tierce, pas
   une couleur d'action du site. */
body.tvl-da2[data-page="case"] .mcta__btn--devis {
  background: var(--da2-yellow);
  color: var(--da2-yellow-ink);
}
body.tvl-da2[data-page="case"] .mcta__btn--call { background: var(--da2-ink); color: #fff; }
body.tvl-da2[data-page="case"] .mcta__hours {
  color: var(--da2-muted);
  font-family: var(--da2-font);
  letter-spacing: .08em;
}

/* 7. FOCUS VISIBLE cohérent DA */
body.tvl-da2[data-page="case"] a:focus-visible,
body.tvl-da2[data-page="case"] button:focus-visible {
  outline: 2px solid var(--da2-blue);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── Galerie de captures des fiches projet (.case-gallery) ──────────────────
   Ajoutée le 20/08/2026 (audit) : la classe n'avait AUCUNE règle nulle part —
   les <figure> se rendaient en style navigateur par défaut, en rupture de DA. */
body.tvl-da2[data-page="case"] .case-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin: 22px 0 8px;
}
body.tvl-da2[data-page="case"] .case-gallery figure { margin: 0; }
body.tvl-da2[data-page="case"] .case-gallery img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid rgba(39, 75, 143, 0.14);
}
body.tvl-da2[data-page="case"] .case-gallery figcaption {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--da2-muted, #7c8598);
}