/* ==========================================================================
   TennisCourts : site.css
   Design system (peau claire), header global, footer sombre, réalisations.
   DA : blanc + anthracite #282828 + vert anis #C4DC00 (échantillonné sur le logo).
   L'anis est une couleur de SURFACE (fonds, badges, CTA avec texte anthracite) ;
   pour du TEXTE accentué sur fond clair on utilise --tc-anis-ink (contraste 4,5:1).
   ========================================================================== */

/* Fonts self-hosted (woff2 latin) : pas de requête Google Fonts */
@font-face{font-family:'Barlow';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/barlow-300.woff2') format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/barlow-400.woff2') format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/barlow-500.woff2') format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/barlow-600.woff2') format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/barlow-700.woff2') format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/barlow-condensed-500.woff2') format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/barlow-condensed-600.woff2') format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/barlow-condensed-700.woff2') format('woff2');}

:root {
  --tc-bg: #FFFFFF;
  --tc-bg-alt: #F6F7F1;
  --tc-bg-card: #FFFFFF;
  --tc-ink: #282828;
  --tc-anis: #C4DC00;
  --tc-anis-deep: #A9BE00;
  --tc-anis-ink: #6D7900;
  --tc-white: #FFFFFF;
  --tc-text: #3A3A3A;
  --tc-muted: #6E6E6E;
  --tc-muted-2: #8C8C8C;
  --tc-border: rgba(40, 40, 40, 0.12);
  --tc-border-strong: rgba(40, 40, 40, 0.22);
  --tc-border-anis: rgba(196, 220, 0, 0.55);
  --tc-header-h: 68px;
  --tc-font: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tc-display: "Barlow Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.tc-brand-name, .tc-footer-brand, .tc-single-title, .tc-footer-col h4 { font-family: var(--tc-display); }

/* --- Reset léger appliqué uniquement à notre périmètre --- */
.tc-body {
  margin: 0;
  background: var(--tc-bg);
  color: var(--tc-text);
  font-family: var(--tc-font);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.tc-body * { box-sizing: border-box; }
.tc-body img { max-width: 100%; height: auto; display: block; }
.tc-body a { color: inherit; text-decoration: none; }

.tc-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--tc-anis); color: var(--tc-ink);
  padding: 10px 18px; font-weight: 700;
}
.tc-skip-link:focus { left: 8px; top: 8px; }

/* ==========================================================================
   HEADER : barre claire translucide
   ========================================================================== */
.tc-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--tc-border);
}
.tc-header-inner {
  max-width: 1440px; margin: 0 auto; padding: 0 32px;
  height: var(--tc-header-h);
  display: flex; align-items: center; gap: 28px;
}

/* Brand */
.tc-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.tc-brand picture { display: flex; }
/* specificité (0,2,0) pour battre `.tc-body img` (0,1,1) qui force height:auto */
.tc-brand .tc-brand-logo { height: 20px; width: auto; display: block; }
.tc-mobile-nav-head .tc-brand-logo { height: 22px; width: auto; }
.tc-footer-brand .tc-footer-logo { height: 32px; width: auto; display: block; }

/* Nav */
.tc-nav { flex: 1; }
.tc-nav-menu {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 4px;
}
.tc-nav-menu li { margin: 0; }
.tc-nav-menu a {
  display: inline-block; padding: 8px 14px; white-space: nowrap;
  font-size: 0.92rem; font-weight: 600; color: var(--tc-ink);
  border-radius: 6px; transition: color 0.2s ease, background 0.2s ease;
}
.tc-nav-menu a:hover,
.tc-nav-menu .current-menu-item > a,
.tc-nav-menu .current_page_item > a { color: var(--tc-anis-ink); background: var(--tc-bg-alt); }

/* Header actions */
.tc-header-actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.tc-header-phone {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.88rem; font-weight: 600; color: var(--tc-text);
}
.tc-header-phone svg { width: 14px; height: 14px; color: var(--tc-anis-ink); }
.tc-header-phone:hover { color: var(--tc-ink); }
.tc-header-cta {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--tc-anis) !important; color: var(--tc-ink) !important;
  padding: 11px 22px; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.02em;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tc-header-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(169, 190, 0, 0.35); }
.tc-header-cta svg { width: 14px; height: 14px; }
.tc-header-cta--block { width: 100%; justify-content: center; padding: 14px; }

/* Burger (mobile only) */
.tc-burger {
  display: none; flex-direction: column; gap: 5px;
  width: 42px; height: 42px; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--tc-border-strong); border-radius: 12px; cursor: pointer;
  flex-shrink: 0;
}
.tc-burger span { width: 20px; height: 2px; background: var(--tc-ink); transition: transform 0.3s ease, opacity 0.3s ease; }
.tc-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.tc-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.tc-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer : panneau clair */
.tc-mobile-nav {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 150;
  width: min(360px, 86vw);
  background: var(--tc-bg); border-left: 1px solid var(--tc-border);
  padding: 24px; transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}
.tc-mobile-nav.is-open { transform: translateX(0); }
.tc-mobile-nav-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.tc-mobile-close { background: transparent; border: 0; color: var(--tc-ink); font-size: 2rem; line-height: 1; cursor: pointer; }
.tc-mobile-menu { list-style: none; margin: 0 0 28px; padding: 0; }
.tc-mobile-menu li { border-bottom: 1px solid var(--tc-border); }
.tc-mobile-menu a { display: block; padding: 16px 4px; font-size: 1.1rem; font-weight: 600; color: var(--tc-ink); }
.tc-mobile-menu a:hover, .tc-mobile-menu .current-menu-item > a { color: var(--tc-anis-ink); }
.tc-mobile-nav-actions { display: flex; flex-direction: column; gap: 14px; }
.tc-mobile-phone { font-size: 1.05rem; font-weight: 700; color: var(--tc-anis-ink); }
/* Drawer : forcer la nav en liste verticale même si le fallback sort .tc-nav-menu (horizontal) */
.tc-mobile-nav .tc-nav-menu { display: block; gap: 0; margin: 0 0 28px; }
.tc-mobile-nav .tc-nav-menu li { display: block; width: 100%; margin: 0; border-bottom: 1px solid var(--tc-border); }
.tc-mobile-nav .tc-nav-menu a { display: block; padding: 16px 4px; font-size: 1.15rem; font-weight: 600; color: var(--tc-ink); }
.tc-mobile-nav .tc-nav-menu a:hover { color: var(--tc-anis-ink); }
.tc-mobile-overlay { position: fixed; inset: 0; z-index: 140; background: rgba(20, 20, 20, 0.45); }

/* Seuil abaissé de 1420 a 1200 le 2026-09-03 : la barre allegee par le menu
   deroulant laisse 36 px de marge a 1200 px (mesure sur 12 largeurs). */
@media (max-width: 1200px) {
  .tc-header-phone { display: none; }
}
@media (max-width: 1240px) {
  .tc-nav-menu a { padding: 8px 9px; font-size: 0.86rem; }
  .tc-header-inner { gap: 18px; }
}
@media (max-width: 1140px) {
  .tc-header-inner { justify-content: space-between; }
  .tc-nav { display: none; }
  .tc-header-actions { display: none; }
  .tc-burger { display: flex; margin-left: auto; }
  .tc-nav { order: 3; }
}
@media (min-width: 1141px) {
  .tc-mobile-nav, .tc-mobile-overlay { display: none; }
}
@media (max-width: 560px) {
  .tc-header-inner { padding: 0 18px; gap: 14px; }
  .tc-brand .tc-brand-logo { height: 18px; }
}

/* ==========================================================================
   MAIN : wrapper de contenu
   ========================================================================== */
.tc-main { display: block; }

/* ==========================================================================
   RÉALISATIONS : grille bento (shortcode [chantiers_grid])
   Cartes photo : légende blanche sur voile sombre (lisible sur toute photo).
   ========================================================================== */
.tc-reals-grid {
  max-width: 1440px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 120px; gap: 12px;
}
.tc-real {
  position: relative; overflow: hidden;
  background: var(--tc-bg-alt); border: 1px solid var(--tc-border);
  background-size: cover; background-position: center;
  transition: transform 0.4s ease, border-color 0.4s ease;
  grid-column: span 4; grid-row: span 2;
}
.tc-real--lg { grid-column: span 6; grid-row: span 3; }
.tc-real:hover { transform: translateY(-4px); border-color: var(--tc-border-anis); }
.tc-real-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.75) 100%); }
/* Placeholders sans photo : palettes de surfaces tennis (terre battue, gazon, résine) */
.tc-real--placeholder { background: linear-gradient(160deg, #B85436 0%, #7C3218 100%); }
.tc-real--placeholder:nth-child(3n) { background: linear-gradient(160deg, #3F7D2C 0%, #24511B 100%); }
.tc-real--placeholder:nth-child(3n+1) { background: linear-gradient(160deg, #2F6F8F 0%, #1C4659 100%); }
.tc-real-cap { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; display: flex; flex-direction: column; gap: 4px; }
.tc-real-city { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--tc-anis); }
.tc-real-name { font-size: 1.2rem; font-weight: 700; color: var(--tc-white); letter-spacing: -0.01em; line-height: 1.15; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }
.tc-real-meta { font-size: 0.82rem; color: rgba(255, 255, 255, 0.9); }
.tc-reals-empty { text-align: center; color: var(--tc-muted); padding: 48px 0; }

@media (max-width: 780px) {
  .tc-reals-grid { grid-template-columns: 1fr; grid-auto-rows: 220px; padding: 0 18px; }
  .tc-real, .tc-real--lg { grid-column: 1 / -1; grid-row: span 1; }
}

/* ==========================================================================
   SINGLE CHANTIER : page claire
   ========================================================================== */
.tc-single-chantier { padding: 56px 0 96px; background: var(--tc-bg); }
.tc-single-inner { max-width: 880px; margin: 0 auto; padding: 0 24px; }
.tc-single-back { display: inline-block; margin-bottom: 32px; color: var(--tc-anis-ink); font-weight: 600; font-size: 0.9rem; }
.tc-single-back:hover { color: var(--tc-ink); }
.tc-single-eyebrow { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--tc-anis-ink); margin: 0 0 12px; }
.tc-single-title { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; letter-spacing: -0.03em; color: var(--tc-ink); margin: 0 0 24px; }
.tc-single-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 32px; padding: 20px 0; margin: 0 0 32px; border-top: 1px solid var(--tc-border); border-bottom: 1px solid var(--tc-border); }
.tc-single-meta li { display: flex; flex-direction: column; gap: 4px; font-size: 1.1rem; font-weight: 700; color: var(--tc-ink); }
.tc-single-meta li span { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--tc-muted); }
.tc-single-photo { margin: 0 0 32px; overflow: hidden; }
.tc-single-photo img { width: 100%; }
.tc-single-body { color: var(--tc-text); line-height: 1.75; font-size: 1.05rem; }
.tc-single-body p { margin: 0 0 18px; }
.tc-single-cta { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--tc-border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; }
.tc-single-cta p { font-size: 1.3rem; font-weight: 700; color: var(--tc-ink); margin: 0; }

/* Bouton primaire réutilisable */
.tc-btn-primary {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--tc-anis); color: var(--tc-ink);
  padding: 16px 28px; font-size: 0.95rem; font-weight: 700;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tc-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(169, 190, 0, 0.35); }

/* ==========================================================================
   FOOTER : anthracite (écho de la 4e de couverture de la plaquette),
   logo variante dark (COURTS en blanc), accents anis pleins (lisibles sur sombre).
   ========================================================================== */
.tc-footer { background: var(--tc-ink); padding: 64px 0 36px; border-top: 3px solid var(--tc-anis); }
.tc-footer-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.tc-footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1.1fr 1fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.tc-footer-brand { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; color: var(--tc-white); }
.tc-footer-tagline { font-size: 1rem; line-height: 1.55; color: #D9D9D9; max-width: 360px; margin: 10px 0 18px; }
.tc-footer-certifs { display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; color: #A9A9A9; }
.tc-footer-col h4 { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tc-anis); margin: 0 0 16px; font-weight: 700; }
.tc-footer-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tc-footer-menu li { margin: 0; }
.tc-footer-menu a { white-space: nowrap; }
.tc-footer-col a, .tc-footer-col p { font-size: 0.95rem; line-height: 1.7; color: #D9D9D9; margin: 0; }
.tc-footer-menu a:hover, .tc-footer-contact a:hover { color: var(--tc-anis); }
.tc-footer-contact p { margin-bottom: 6px; }
.tc-footer-hours { color: #A9A9A9; font-size: 0.88rem; margin-top: 10px; }
.tc-footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-top: 24px; font-size: 0.82rem; color: #A9A9A9; }
.tc-footer-legal a { color: #A9A9A9; transition: color 0.2s ease; }
.tc-footer-legal a:hover { color: var(--tc-anis); }
.tc-footer-credit { color: #A9A9A9; font-weight: 600; text-decoration: none; transition: color 0.2s ease; }
.tc-footer-credit:hover { color: var(--tc-anis); }

@media (max-width: 1000px) {
  .tc-footer-top { grid-template-columns: 1fr 1fr; gap: 32px 40px; }
}
@media (max-width: 780px) {
  .tc-footer-top { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .tc-footer-brand-col { grid-column: 1 / -1; }
  .tc-footer-inner { padding: 0 18px; }
  .tc-footer-brand .tc-footer-logo { height: 28px; }
}
@media (max-width: 380px) {
  .tc-footer-top { grid-template-columns: 1fr; }
}

/* ==========================================================================
   MODERNISATION (2026-09) : mouvement + finition.
   Reveals au scroll, header compact, Ken Burns, marquee références,
   compteurs, pills, ombres douces, slider avant/après.
   Les éléments ne sont masqués QUE si <html> porte .tc-js (inline head de
   functions.php) ; .tc-rv-safe révèle tout si site.js ne tourne pas.
   ========================================================================== */

/* --- Reveal au scroll --- */
.tc-js .tc-rv { opacity: 0; transform: translateY(26px); }
.tc-js .tc-rv-in {
  opacity: 1; transform: none;
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--rvd, 0s);
}
.tc-rv-safe .tc-rv { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .tc-js .tc-rv { opacity: 1; transform: none; transition: none; }
}

/* --- Header compact au scroll --- */
.tc-header { transition: background 0.3s ease, box-shadow 0.3s ease; }
.tc-header-inner { transition: height 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.tc-header.is-scrolled { background: rgba(255, 255, 255, 0.97); box-shadow: 0 8px 28px rgba(40, 40, 40, 0.09); }
.tc-header.is-scrolled .tc-header-inner { height: 54px; }

/* --- Pills (boutons du thème ; ceux des pages sont passés en 999px dans leur CSS) --- */
.tc-header-cta, .tc-btn-primary { border-radius: 999px; }

/* --- Ken Burns : zoom très lent du fond des héros (classe .tc-kb sur le conteneur) --- */
@keyframes tc-kb { from { transform: scale(1); } to { transform: scale(1.075); } }
.tc-kb img { animation: tc-kb 26s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; transform-origin: 50% 40%; }
@media (prefers-reduced-motion: reduce) { .tc-kb img { animation: none; } }

/* --- Marquee références (bande sous le héro de l'accueil) --- */
.tc-refs { background: var(--tc-bg); border-bottom: 1px solid var(--tc-border); padding: 20px 0; overflow: hidden; }
.tc-refs-track { display: flex; align-items: center; width: max-content; animation: tc-marquee 38s linear infinite; }
.tc-refs:hover .tc-refs-track { animation-play-state: paused; }
.tc-refs-group { display: flex; align-items: center; flex-shrink: 0; }
.tc-refs-item {
  display: inline-flex; align-items: center; white-space: nowrap; padding: 0 28px;
  font-family: var(--tc-display); font-size: 0.82rem; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 600; color: var(--tc-muted);
}
.tc-refs-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tc-anis); flex-shrink: 0; }
@keyframes tc-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .tc-refs-track { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; row-gap: 10px; }
  .tc-refs-group + .tc-refs-group { display: none; }
}

/* --- Compteurs stats : chiffres tabulaires (pas de tremblement pendant l'animation) --- */
.tc-hstat-num { font-variant-numeric: tabular-nums; }

/* --- Cartes réalisations (grille bento + single) : radius + ombre douce --- */
.tc-real {
  border-radius: 18px; border-color: rgba(40, 40, 40, 0.06);
  box-shadow: 0 2px 6px rgba(40, 40, 40, 0.05), 0 14px 34px rgba(40, 40, 40, 0.08);
}
.tc-real:hover { box-shadow: 0 22px 48px rgba(40, 40, 40, 0.16); }
.tc-single-photo { border-radius: 18px; }

/* --- Slider avant/après (drag au doigt/souris/clavier via l'input range invisible) --- */
.tc-ba-wrap { max-width: 920px; margin: 0 auto; }
.tc-ba {
  position: relative; overflow: hidden; border-radius: 18px; aspect-ratio: 4/3;
  background: var(--tc-bg-alt);
  box-shadow: 0 2px 6px rgba(40, 40, 40, 0.05), 0 18px 44px rgba(40, 40, 40, 0.12);
}
.tc-ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tc-ba-after { clip-path: inset(0 0 0 var(--ba, 50%)); }
.tc-ba-bar {
  position: absolute; top: 0; bottom: 0; left: var(--ba, 50%); width: 2px; margin-left: -1px;
  background: rgba(255, 255, 255, 0.95); box-shadow: 0 0 14px rgba(0, 0, 0, 0.35); pointer-events: none;
}
.tc-ba-knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%; background: var(--tc-anis);
  display: flex; align-items: center; justify-content: center; gap: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.30);
}
.tc-ba-knob::before, .tc-ba-knob::after { content: ""; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.tc-ba-knob::before { border-right: 7px solid var(--tc-ink); }
.tc-ba-knob::after { border-left: 7px solid var(--tc-ink); }
.tc-ba-tag {
  position: absolute; top: 16px; z-index: 2; padding: 7px 14px; border-radius: 999px;
  font-family: var(--tc-display); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; pointer-events: none;
}
.tc-ba-tag--avant { left: 16px; background: rgba(20, 22, 14, 0.55); color: #FFFFFF; }
.tc-ba-tag--apres { right: 16px; background: var(--tc-anis); color: var(--tc-ink); }
.tc-ba input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0;
  cursor: ew-resize; -webkit-appearance: none; appearance: none; touch-action: pan-y;
}
.tc-ba:focus-within { outline: 2px solid var(--tc-ink); outline-offset: 3px; }
.tc-ba-caption { margin-top: 14px; text-align: center; font-size: 0.9rem; color: var(--tc-muted); }

/* --- Lightbox réalisations --- */
.tc-lb-zoom { cursor: zoom-in; }
.tc-lb {
  position: fixed; inset: 0; z-index: 300; display: none;
  align-items: center; justify-content: center;
  background: rgba(16, 17, 12, 0.92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 4vh 72px;
}
.tc-lb.is-open { display: flex; }
.tc-lb figure { margin: 0; max-width: min(1200px, 100%); text-align: center; }
.tc-lb img {
  max-width: 100%; max-height: 82vh; width: auto; height: auto;
  border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); display: inline-block;
}
.tc-lb figcaption { margin-top: 14px; color: #E8E8E2; font-size: 0.95rem; }
.tc-lb-close, .tc-lb-prev, .tc-lb-next {
  position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.12); color: #FFFFFF; font-size: 1.7rem; line-height: 1;
  transition: background 0.2s ease, transform 0.2s ease;
}
.tc-lb-close:hover, .tc-lb-prev:hover, .tc-lb-next:hover { background: var(--tc-anis); color: var(--tc-ink); transform: scale(1.05); }
.tc-lb-close { top: 20px; right: 20px; }
.tc-lb-prev { left: 14px; top: 50%; margin-top: -24px; }
.tc-lb-next { right: 14px; top: 50%; margin-top: -24px; }
.tc-lb-close:focus-visible, .tc-lb-prev:focus-visible, .tc-lb-next:focus-visible { outline: 2px solid var(--tc-anis); outline-offset: 2px; }
@media (max-width: 700px) {
  .tc-lb { padding: 3vh 10px; }
  .tc-lb-prev { left: 6px; } .tc-lb-next { right: 6px; }
  .tc-lb img { max-height: 74vh; }
}

/* ==========================================================================
   ACCESSIBILITÉ : focus visible
   ========================================================================== */
.tc-body a:focus-visible,
.tc-body button:focus-visible { outline: 2px solid var(--tc-ink); outline-offset: 2px; }
/* Sur le footer sombre, un focus anthracite serait invisible */
.tc-footer a:focus-visible { outline-color: var(--tc-anis); }

/* ==========================================================================
   MENU « NOS SERVICES » : panneau déroulant à images (2026-09-03)
   Remplace les 4 entrées de métiers à plat dans la barre, et libère deux places
   pour le futur blog. Le panneau est un vrai bloc de liens HTML : aucun effet
   sur le maillage interne ni sur l'exploration par les moteurs.

   ⚠️ Les cartes sont des <a> DANS .tc-nav-menu : elles héritent sinon de
   `.tc-nav-menu a` (white-space:nowrap, display:inline-block, padding, hover),
   qui a une spécificité (0,1,1) supérieure à une simple classe. Tout est donc
   scopé en `.tc-nav-menu .tc-mega...` (0,2,0) et le nowrap est explicitement levé.
   ========================================================================== */
.tc-nav-menu .tc-has-mega { position: static; }

.tc-nav-menu .tc-mega-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; margin: 0; white-space: nowrap;
  font-family: inherit; font-size: 0.92rem; font-weight: 600; color: var(--tc-ink);
  background: transparent; border: 0; border-radius: 6px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  transition: color 0.2s ease, background 0.2s ease;
}
.tc-nav-menu .tc-mega-btn:hover,
.tc-nav-menu .tc-has-mega.is-open .tc-mega-btn,
.tc-nav-menu .tc-has-mega.current-menu-item .tc-mega-btn { color: var(--tc-anis-ink); background: var(--tc-bg-alt); }
.tc-mega-caret { width: 13px; height: 13px; transition: transform 0.28s cubic-bezier(.22,1,.36,1); }
.tc-nav-menu .tc-has-mega.is-open .tc-mega-caret { transform: rotate(180deg); }

.tc-nav-menu .tc-mega {
  position: absolute; top: calc(100% - 4px); left: 50%; z-index: 120;
  width: min(1000px, calc(100vw - 40px));
  background: var(--tc-white); border: 1px solid var(--tc-border);
  border-radius: 18px; box-shadow: 0 4px 12px rgba(40,40,40,0.06), 0 26px 60px rgba(40,40,40,0.16);
  padding: 20px 20px 0; overflow: hidden;
  opacity: 0; transform: translateX(-50%) translateY(-8px); pointer-events: none;
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(.22,1,.36,1);
}
.tc-nav-menu .tc-mega[hidden] { display: none; }
.tc-nav-menu .tc-has-mega.is-open .tc-mega { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }

/* Reset des styles de lien de nav hérités, sur tous les liens du panneau. */
.tc-nav-menu .tc-mega a {
  display: block; padding: 0; border-radius: 0; background: transparent;
  font-size: inherit; font-weight: inherit; color: inherit; white-space: normal;
}
.tc-nav-menu .tc-mega a:hover { background: transparent; color: inherit; }

.tc-mega-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tc-nav-menu .tc-mega-card {
  display: flex; flex-direction: column; gap: 11px;
  min-width: 0; /* sinon l'item de grille prend sa taille min-content et déborde */
  padding: 10px; border-radius: 14px; border: 1px solid transparent;
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.28s cubic-bezier(.22,1,.36,1);
}
.tc-nav-menu .tc-mega-card:hover, .tc-nav-menu .tc-mega-card:focus-visible {
  background: var(--tc-bg-alt); border-color: var(--tc-border-anis); transform: translateY(-2px);
}
.tc-mega-thumb { display: block; aspect-ratio: 16/10; border-radius: 10px; overflow: hidden; background: var(--tc-bg-alt); }
.tc-mega-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(.22,1,.36,1); }
.tc-nav-menu .tc-mega-card:hover .tc-mega-thumb img { transform: scale(1.06); }
.tc-mega-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tc-mega-txt strong { font-family: var(--tc-display); font-size: 1.12rem; font-weight: 700; color: var(--tc-ink); letter-spacing: 0.01em; line-height: 1.2; }
.tc-mega-txt > span { font-size: 0.83rem; line-height: 1.45; color: var(--tc-muted); white-space: normal; }

.tc-mega-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin: 18px -20px 0; padding: 14px 30px; background: var(--tc-bg-alt); border-top: 1px solid var(--tc-border);
}
.tc-mega-foot > span { font-size: 0.86rem; color: var(--tc-muted); }
.tc-nav-menu .tc-mega-foot > a {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.88rem; font-weight: 700; color: var(--tc-anis-ink); white-space: nowrap;
}
.tc-mega-foot > a svg { width: 15px; height: 15px; transition: transform 0.25s ease; }
.tc-nav-menu .tc-mega-foot > a:hover { color: var(--tc-anis-ink); }
.tc-mega-foot > a:hover svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .tc-nav-menu .tc-mega, .tc-mega-caret, .tc-nav-menu .tc-mega-card, .tc-mega-thumb img { transition: none; }
}

/* ==========================================================================
   DRAWER MOBILE enrichi (2026-09-03) : vignettes sur les 4 métiers (mêmes
   images que le panneau desktop), cibles tactiles à 48 px minimum, actions
   ancrées en pied de panneau, entrée en cascade.
   Pas d'accordéon sur les services : un tap de plus pour rien sur tactile.
   ========================================================================== */
.tc-mobile-nav { display: flex; flex-direction: column; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); }
.tc-mobile-nav-head { margin-bottom: 14px; }
/* Kadence applique sa couleur de bouton à tout <button> via global.min.css et
   l'emporte en pratique : même remède que .tc-faq-btn, on force explicitement.
   Sans quoi le bouton de fermeture sort en bleu de palette Kadence. */
.tc-mobile-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -8px;
  background: transparent !important; border: 1px solid var(--tc-border) !important;
  border-radius: 50% !important; box-shadow: none !important;
  color: var(--tc-ink) !important; font-size: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  transition: border-color .2s, background .2s;
}
.tc-mobile-close:hover, .tc-mobile-close:focus {
  background: var(--tc-bg-alt) !important; border-color: var(--tc-anis-deep) !important; color: var(--tc-ink) !important;
}
.tc-mobile-close svg { width: 18px; height: 18px; }

.tc-mobile-menu { flex: 0 0 auto; }
.tc-mobile-menu > li > a { display: flex; align-items: center; min-height: 52px; padding: 8px 4px; font-size: 1.12rem; font-weight: 600; }

.tc-mobile-group { padding: 2px 0 4px; }
.tc-mobile-grouphead {
  display: block; padding: 18px 4px 10px;
  font-family: var(--tc-display); font-size: .76rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--tc-muted);
}
.tc-mobile-sub { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tc-mobile-sub li { border-bottom: 0; }
.tc-mobile-sub > li > a {
  display: flex; align-items: center; gap: 13px; min-height: 60px; padding: 8px 10px 8px 8px;
  border: 1px solid var(--tc-border); border-radius: 14px; background: var(--tc-white);
  transition: border-color .2s, background .2s;
}
.tc-mobile-sub > li > a:active { border-color: var(--tc-anis-deep); background: var(--tc-bg-alt); }
.tc-msub-thumb { flex: 0 0 auto; width: 60px; height: 44px; border-radius: 9px; overflow: hidden; background: var(--tc-bg-alt); }
.tc-msub-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tc-msub-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tc-msub-txt strong { font-family: var(--tc-display); font-size: 1.06rem; font-weight: 700; color: var(--tc-ink); line-height: 1.2; }
.tc-msub-txt > span { font-size: .8rem; line-height: 1.35; color: var(--tc-muted); }

/* Actions ancrées en bas du panneau : remplit le vide et met le devis à portée de pouce */
.tc-mobile-nav-actions { margin-top: auto; padding-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.tc-mobile-phone {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 12px; border: 1px solid var(--tc-border-strong); border-radius: 999px;
  font-size: 1.02rem; font-weight: 700; color: var(--tc-ink);
}
.tc-mobile-phone svg { width: 16px; height: 16px; color: var(--tc-anis-ink); }
.tc-mobile-phone:hover { border-color: var(--tc-anis-deep); background: rgba(196,220,0,.08); }

/* Entrée en cascade des blocs du panneau */
.tc-mobile-nav.is-open .tc-mobile-menu > li,
.tc-mobile-nav.is-open .tc-mobile-nav-actions { animation: tcDrawerIn .38s cubic-bezier(.22,1,.36,1) backwards; }
.tc-mobile-nav.is-open .tc-mobile-menu > li:nth-child(1) { animation-delay: .05s; }
.tc-mobile-nav.is-open .tc-mobile-menu > li:nth-child(2) { animation-delay: .10s; }
.tc-mobile-nav.is-open .tc-mobile-menu > li:nth-child(3) { animation-delay: .15s; }
.tc-mobile-nav.is-open .tc-mobile-menu > li:nth-child(4) { animation-delay: .19s; }
.tc-mobile-nav.is-open .tc-mobile-menu > li:nth-child(5) { animation-delay: .23s; }
.tc-mobile-nav.is-open .tc-mobile-menu > li:nth-child(6) { animation-delay: .26s; }
.tc-mobile-nav.is-open .tc-mobile-nav-actions { animation-delay: .30s; }
@keyframes tcDrawerIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .tc-mobile-nav.is-open .tc-mobile-menu > li,
  .tc-mobile-nav.is-open .tc-mobile-nav-actions { animation: none; }
  .tc-mobile-nav { transition: none; }
}

/* ==========================================================================
   BLOG (2026-09-03) : liste d'articles, archives, article.
   Gabarits du thème (home/archive/index/single), donc markup entièrement maîtrisé :
   on ne passe pas par les conteneurs Kadence et leurs marges « boxed ».
   ========================================================================== */
.tc-blog { --u: clamp(56px, 7vw, 96px); }
.tc-blog .wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.tc-blog .tc-sec { padding: var(--u) 0; }
.tc-blog .tc-sec-alt { background: var(--tc-bg-alt); border-top: 1px solid var(--tc-border); border-bottom: 1px solid var(--tc-border); }
.tc-blog h1, .tc-blog h2, .tc-blog h3 { margin: 0; color: var(--tc-ink); font-family: var(--tc-display); font-weight: 700; line-height: 1.05; }
.tc-blog .eyebrow { font-family: var(--tc-display); font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; color: var(--tc-anis-ink); }
.tc-blog .tc-sec-head { max-width: 680px; margin: 0 0 40px; }
.tc-blog .tc-sec-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); letter-spacing: -0.02em; margin-top: 12px; }
.tc-blog .tc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--tc-anis); color: var(--tc-ink) !important; padding: 15px 26px; font-size: 0.94rem; font-weight: 700; border-radius: 999px; transition: transform .2s, box-shadow .2s; }
.tc-blog .tc-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(169,190,0,0.35); }
.tc-blog .tc-btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 10px; color: var(--tc-ink); padding: 15px 24px; font-size: 0.92rem; font-weight: 600; border: 1px solid var(--tc-border-strong); border-radius: 999px; transition: border-color .2s, background .2s; }
.tc-blog .tc-btn-ghost:hover { border-color: var(--tc-anis-deep); background: rgba(196,220,0,0.10); }

/* Bandeau de tête */
.tc-blog-hero { background: var(--tc-ink); padding: clamp(48px, 6vw, 84px) 0; border-bottom: 3px solid var(--tc-anis); }
.tc-blog-hero .eyebrow { color: var(--tc-anis); }
.tc-blog-hero h1 { margin-top: 14px; font-size: clamp(2.1rem, 5vw, 3.4rem); letter-spacing: -0.025em; text-transform: uppercase; color: var(--tc-white); }
.tc-blog-hero p { margin: 18px 0 0; max-width: 62ch; font-size: 1.05rem; line-height: 1.65; color: #DCDCD4; }

/* Grille d'articles */
.tc-posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tc-post-card { min-width: 0; background: var(--tc-white); border: 1px solid rgba(40,40,40,0.05); border-radius: 18px; overflow: hidden;
  box-shadow: 0 2px 6px rgba(40,40,40,0.04), 0 14px 34px rgba(40,40,40,0.07); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.tc-post-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(40,40,40,0.12); border-color: var(--tc-border-anis); }
.tc-post-card > a { display: flex; flex-direction: column; height: 100%; }
.tc-post-thumb { display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--tc-bg-alt); }
.tc-post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.22,1,.36,1); }
.tc-post-card:hover .tc-post-thumb img { transform: scale(1.05); }
/* Pas d'image mise en avant : aplat de la DA, jamais une photo empruntée ailleurs */
.tc-post-thumb.is-empty { background: linear-gradient(135deg, var(--tc-bg-alt) 0%, rgba(196,220,0,0.16) 100%); }
.tc-post-body { display: flex; flex-direction: column; gap: 9px; padding: 20px 22px 22px; flex: 1; }
.tc-post-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 0.76rem; color: var(--tc-muted); }
.tc-post-cat { font-family: var(--tc-display); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tc-anis-ink); }
.tc-post-title { font-size: 1.3rem; letter-spacing: -0.01em; }
.tc-post-excerpt { font-size: 0.93rem; line-height: 1.55; color: var(--tc-text); flex: 1; }
.tc-post-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-weight: 700; font-size: 0.88rem; color: var(--tc-anis-ink); }
.tc-post-link svg { width: 15px; height: 15px; transition: transform .25s; }
.tc-post-card:hover .tc-post-link svg { transform: translateX(4px); }
@media (max-width: 980px) { .tc-posts-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .tc-posts-grid { grid-template-columns: 1fr; } }

/* État vide */
.tc-blog-empty { max-width: 620px; margin: 0 auto; padding: clamp(28px, 5vw, 52px) 0; text-align: center; }
.tc-blog-empty h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); letter-spacing: -0.02em; }
.tc-blog-empty p { margin: 16px 0 28px; font-size: 1.02rem; line-height: 1.65; color: var(--tc-text); }
.tc-blog-empty-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Pagination */
.tc-blog .navigation.pagination { margin-top: 44px; }
.tc-blog .nav-links { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; align-items: center; }
.tc-blog .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 14px;
  border: 1px solid var(--tc-border); border-radius: 999px; font-weight: 600; font-size: 0.92rem; color: var(--tc-ink); transition: border-color .2s, background .2s; }
.tc-blog .page-numbers:hover { border-color: var(--tc-anis-deep); background: rgba(196,220,0,0.10); }
.tc-blog .page-numbers.current { background: var(--tc-anis); border-color: var(--tc-anis); color: var(--tc-ink); }
.tc-blog .page-numbers.dots { border-color: transparent; }

/* --- Article --- */
.tc-article-head { padding: clamp(36px, 5vw, 60px) 0 clamp(24px, 3vw, 34px); }
.tc-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.82rem; color: var(--tc-muted); }
.tc-crumbs a { color: var(--tc-muted); }
.tc-crumbs a:hover { color: var(--tc-anis-ink); }
.tc-article-title { max-width: 20ch; margin-top: 18px; font-size: clamp(2rem, 4.6vw, 3.2rem); letter-spacing: -0.025em; text-wrap: balance; }
.tc-article-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; font-size: 0.88rem; color: var(--tc-muted); }
.tc-article-cover { margin: 0 auto; max-width: 1280px; padding: 0 32px; }
.tc-article-cover img { width: 100%; height: auto; border-radius: 18px; }
.tc-article-cover figcaption { margin-top: 10px; font-size: 0.82rem; color: var(--tc-muted); }
.tc-article-body { max-width: 784px; margin: 0 auto; padding: clamp(34px, 5vw, 56px) 32px clamp(48px, 6vw, 72px); }
.tc-article-content { font-size: 1.06rem; line-height: 1.72; color: var(--tc-text); }
.tc-article-content > * + * { margin-top: 1.15em; }
.tc-article-content h2 { margin-top: 2.2em; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.02em; }
.tc-article-content h3 { margin-top: 1.8em; font-size: clamp(1.2rem, 2.2vw, 1.42rem); }
.tc-article-content a { color: var(--tc-anis-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.tc-article-content a:hover { text-decoration-thickness: 2px; }
.tc-article-content ul, .tc-article-content ol { padding-left: 1.3em; }
.tc-article-content li + li { margin-top: 0.5em; }
.tc-article-content img, .tc-article-content figure img { border-radius: 14px; }
.tc-article-content figure { margin: 2em 0; }
.tc-article-content figcaption { margin-top: 10px; font-size: 0.84rem; color: var(--tc-muted); }
.tc-article-content blockquote { margin: 2em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--tc-anis); font-size: 1.14rem; line-height: 1.6; color: var(--tc-ink); }
.tc-article-content blockquote p { margin: 0; }
.tc-article-content table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tc-article-content :is(th, td) { padding: 11px 12px; border-bottom: 1px solid var(--tc-border); text-align: left; }
.tc-article-content th { font-weight: 700; color: var(--tc-ink); }
/* Un tableau large défile dans son conteneur, jamais la page */
.tc-article-content .wp-block-table { overflow-x: auto; }
.tc-article-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--tc-border); }
.tc-article-tags a { display: inline-flex; padding: 7px 14px; border: 1px solid var(--tc-border); border-radius: 999px; font-size: 0.84rem; font-weight: 600; color: var(--tc-text); }
.tc-article-tags a:hover { border-color: var(--tc-anis-deep); color: var(--tc-anis-ink); }

/* Rappel devis en pied de blog et d'article */
.tc-blog-cta { background: var(--tc-ink); padding: clamp(52px, 6vw, 78px) 0; text-align: center; border-top: 3px solid var(--tc-anis); }
.tc-blog-cta h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -0.02em; color: var(--tc-white); }
.tc-blog-cta p { margin: 16px auto 28px; max-width: 52ch; color: #DCDCD4; font-size: 1.02rem; }
.tc-blog-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.tc-blog-cta .tc-btn-ghost { color: var(--tc-white); border-color: rgba(255,255,255,0.35); }
.tc-blog-cta .tc-btn-ghost:hover { border-color: var(--tc-anis); background: rgba(196,220,0,0.12); }

@media (max-width: 560px) {
  .tc-blog .wrap, .tc-article-cover { padding-left: 20px; padding-right: 20px; }
  .tc-article-body { padding-left: 20px; padding-right: 20px; }
  .tc-blog-empty-actions .tc-btn, .tc-blog-empty-actions .tc-btn-ghost,
  .tc-blog-cta-actions .tc-btn, .tc-blog-cta-actions .tc-btn-ghost { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .tc-post-card, .tc-post-thumb img, .tc-post-link svg { transition: none; }
}

/* ==========================================================================
   RÈGLE GLOBALE MOBILE (2026-09-03, arbitrage Tim) : la photo ne passe JAMAIS
   au-dessus du titre. Ordre imposé partout : sur-titre, titre, photo, texte.

   Méthode : `display:contents` sur le conteneur de texte (un <div> sans classe)
   fait de ses enfants des items directs du flex parent, ce qui permet d'insérer
   la photo ENTRE le titre et le corps sans toucher au DOM ni au rendu desktop.
   Portée : .tc-split (construction, rénovation, entretien, qui sommes-nous),
   .tc-surf-grid (les 8 blocs de la page surfaces), .tc2-exp (savoir-faire home).
   Spécificité .tc-body pour battre les styles inline des pages (0,1,0).
   ========================================================================== */
@media (max-width: 880px) {
  .tc-body .tc-split,
  .tc-body .tc-surf-grid { display: flex; flex-direction: column; gap: 0; }

  .tc-body .tc-split > div:not([class]),
  .tc-body .tc-surf-grid > div:not([class]) { display: contents; }

  /* Le corps par défaut passe en dernier, le sur-titre et le titre remontent. */
  .tc-body .tc-split > div:not([class]) > *,
  .tc-body .tc-surf-grid > div:not([class]) > * { order: 3; }
  .tc-body .tc-split > div:not([class]) > .eyebrow,
  .tc-body .tc-surf-grid > div:not([class]) > .eyebrow { order: 0; }
  .tc-body .tc-split > div:not([class]) > h2,
  .tc-body .tc-surf-grid > div:not([class]) > h2 { order: 1; margin-bottom: 0 !important; }

  .tc-body .tc-split > .tc-split-photo,
  .tc-body .tc-surf-grid > .tc-surf-photo { order: 2; margin: 20px 0 24px; }
  /* neutralise l'inversion desktop des blocs surfaces, qui n'a plus de sens en colonne */
  .tc-body .tc-surf-grid.rev > .tc-surf-photo { order: 2; }
}

/* Savoir-faire de l'accueil : même règle, seuil propre à ce bloc.
   `.tc2-exp-text` portait le padding horizontal : display:contents le supprime,
   il est donc rendu aux enfants pour garder l'alignement du texte. */
@media (max-width: 940px) {
  .tc-body .tc2-exp-grid { display: flex; flex-direction: column; gap: 0; }
  .tc-body .tc2-exp-text { display: contents; }
  .tc-body .tc2-exp-text > .tc-sec-head { order: 0; padding: 0 22px; margin-bottom: 0; }
  .tc-body .tc2-exp-grid > .tc2-exp-photo { order: 1; margin: 22px 0 26px; }
  .tc-body .tc2-exp-text > .tc2-exp-list { order: 2; padding: 0 22px; }
}

/* ==========================================================================
   FOOTER SIMPLIFIÉ EN MOBILE (2026-09-03, demande Tim)
   Le pied de page complet fait sens en desktop ; sur un téléphone il devenait
   un long empilement où les qualifications se coupaient en deux lignes.
   Rien n'est supprimé : la navigation passe en deux colonnes, les coordonnées
   deviennent des lignes tappables (≥ 48 px, ce qui règle aussi les cibles trop
   courtes relevées en recette), et les qualifications se replient en une ligne.
   ========================================================================== */
@media (max-width: 700px) {
  .tc-footer-tagline { font-size: .92rem; }
  .tc-footer-brand .tc-footer-logo { height: 24px; }
  /* le logo est un lien vers l'accueil : on lui donne une hauteur de cible correcte */
  .tc-footer-brand { display: inline-flex; align-items: center; min-height: 44px; }
  /* Le gap de la liste s'ajoutait au min-height des cibles : rangées de 44 px pile. */
  .tc-footer-nav-col .tc-footer-menu { gap: 0; }
  .tc-footer-top { gap: 22px 20px; padding-bottom: 30px; }
  .tc-footer-col h4 { margin-bottom: 8px; }
  .tc-footer-col a, .tc-footer-col p { font-size: .92rem; line-height: 1.55; }
  .tc-footer-contact p a { font-size: .9rem; }

  /* Navigation sur deux colonnes : 7 entrées tiennent en 4 rangées au lieu de 7 */
  .tc-footer-nav-col .tc-footer-menu { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .tc-footer-nav-col .tc-footer-menu a { display: flex; align-items: center; min-height: 44px; }

  /* Coordonnées : le téléphone et l'e-mail deviennent de vraies cibles */
  .tc-footer-contact p { margin: 0; }
  .tc-footer-contact p a { display: flex; align-items: center; min-height: 46px; }

  /* Qualifications repliées en une ligne continue plutôt qu'en colonne coupée */
  .tc-footer-certifs { display: block; }
  .tc-footer-certifs span { display: inline; font-size: .84rem; }
  .tc-footer-certifs span + span::before { content: " · "; opacity: .55; }

  /* Bas de page : crédit et liens légaux tappables, empilés proprement */
  .tc-footer-bottom { gap: 6px; }
  .tc-footer-bottom a { display: inline-flex; align-items: center; min-height: 40px; }
  .tc-footer-legal { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
}