/* Homepage, direction V2 monochrome (29 septembre 2026). Structure validée sur
   le canevas Claude Design « Maquette site TMS », page V2. */

/* L'accueil reste en noir et blanc, seul le logo TMS garde son rouge */
.home .ph { filter: grayscale(1) contrast(1.05); }

/* ===== Hero : l'esprit de la couverture de la présentation TMS ===== */
.hero {
  position: relative; min-height: max(640px, 100dvh); overflow: hidden;
  background: #111111; color: #FFFFFF;
}
.hero-slides { position: absolute; inset: 0; }
.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* Diaporama noir et blanc (1er octobre 2026) : photos déjà converties en N&B
     dans les fichiers (shared/img/hero/). Fondu enchaîné par opacité seule,
     sans zoom (le zoom continu a été retiré le 29 septembre 2026 à la demande de TMS). */
  opacity: 0; transition: opacity 1.8s ease;
}
.hero-bg.is-on { opacity: 1; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  /* Assombrit la gauche et le bas, où se trouve le texte, quelle que soit la photo */
  background:
    linear-gradient(0deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 55%),
    linear-gradient(90deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .2) 60%, rgba(0, 0, 0, .05) 100%);
}
.hero-in {
  position: relative; z-index: 1; min-height: inherit;
  display: flex; flex-direction: column;
  padding: calc(52px + clamp(28px, 4vw, 56px)) clamp(20px, 5.5vw, 80px) clamp(28px, 3.4vw, 48px);
}
/* Logo TMS au-dessus du slogan (19 octobre 2026) : seule touche de couleur sur
   les photos N&B ; ombre légère pour le détacher des zones claires */
.hero-logo { display: block; height: clamp(46px, 5.4vw, 84px); width: auto; margin-bottom: clamp(1.4rem, 2.4vw, 2.2rem); filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .45)); }
.hero-txt { margin-top: auto; margin-bottom: clamp(40px, 5vw, 72px); }
.hero h1 {
  color: #FFFFFF; font-weight: 500;
  font-size: clamp(2.8rem, 6vw, 5.4rem); line-height: 1; letter-spacing: -.035em;
  margin-bottom: 1.6rem;
}
/* Reveal typographique par lignes, CSS pur, activé par la classe .js */
.hero h1 .line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.hero h1 .line > span { display: block; }
.js .hero h1 .line > span { animation: line-up .9s var(--ease-out) both; }
.js .hero h1 .line:nth-child(2) > span { animation-delay: .09s; }
.js .hero .lead, .js .hero-cta { animation: fade-up .8s var(--ease-out) both .4s; }
@keyframes line-up { from { transform: translateY(112%); } to { transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

.hero .lead {
  max-width: 34ch; color: rgba(255, 255, 255, .9);
  font-size: clamp(1.15rem, 1.7vw, 1.5rem); font-weight: 300; line-height: 1.35;
  margin-bottom: 2.2rem;
}
.hero-cta { display: flex; gap: .9rem; flex-wrap: wrap; }

/* ===== Partenariats officiels : quatre tuiles ===== */
.partner-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.partner-card {
  background: var(--tile); border-radius: var(--r-tile); padding: 12px;
  display: flex; flex-direction: column;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.partner-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 0, 0, .08); }
.partner-card .plate {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 4 / 3; overflow: hidden; border-radius: 20px; background: #1D1D1F;
}
.partner-card .plate-shot {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* Photos produit en couleur (demande TMS du 29 septembre 2026), assombries pour le contraste du logo */
  filter: brightness(.62) saturate(1.05); transform: scale(1.02);
  transition: transform .7s var(--ease-out);
}
.partner-card:hover .plate-shot { transform: scale(1.07); }
.partner-card .plate-logo {
  position: relative; z-index: 1;
  max-height: clamp(46px, 5vw, 70px); width: auto; max-width: 70%; object-fit: contain;
}
/* MTG et Bosch Rexroth sont des logos en pavé, plus compacts : on les agrandit */
.partner-card .plate-logo[alt="MTG"], .partner-card .plate-logo[alt="Bosch Rexroth"] { max-height: clamp(62px, 6.6vw, 92px); }
.partner-card .pc-txt { padding: 1.3rem 1rem 1rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.partner-card .pc-txt b { font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; }
.partner-card .pc-txt p { color: var(--txt-2); font-size: .94rem; flex: 1; }
.partner-card .more { font-weight: 500; font-size: .94rem; }

/* ===== Secteurs : tuiles 2 x 2, texte en haut, photo en bas ===== */
.sector-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sector { background: var(--bg-2); border-radius: var(--r-tile); overflow: hidden; display: flex; flex-direction: column; }
.sector-info { padding: clamp(32px, 3.4vw, 48px) clamp(28px, 3.4vw, 48px) clamp(24px, 2.6vw, 36px); }
.sector-info h3 { font-size: clamp(1.9rem, 2.8vw, 2.5rem); margin-bottom: .8rem; letter-spacing: -.025em; }
.sector-info p { color: var(--txt-2); margin-bottom: 1rem; }
.sector-info .makes { font-size: .88rem; margin-bottom: 0; }
.sector-info .makes b { color: var(--txt); font-weight: 500; }
.sector-visual { height: clamp(220px, 22vw, 320px); margin-top: auto; overflow: hidden; }
.sector-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.sector:hover .sector-visual img { transform: scale(1.04); }

/* ===== Products : deux cartes, bande des marques, grande photo ===== */
.grades { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grade { background: var(--tile); border-radius: var(--r-tile); padding: clamp(32px, 3.4vw, 48px); }
.grade h3 { font-size: clamp(1.9rem, 2.8vw, 2.5rem); margin-bottom: .8rem; letter-spacing: -.025em; }
.grade p { color: var(--txt-2); }
#products .served { margin: clamp(2.4rem, 4vw, 3.6rem) 0; }
.wide-photo { height: clamp(300px, 36vw, 520px); border-radius: var(--r-tile); overflow: hidden; }
.wide-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }

/* ===== TMS Worldwide ===== */
.stats-lg { margin-bottom: clamp(3rem, 5vw, 4rem); }

/* ===== Bande « Countries we serve », sur le modèle LaCAR (29 septembre 2026) =====
   Fond sombre : photo de pit en noir et blanc (déjà traitée dans le fichier) et
   lumière douce qui glisse lentement. Menu des pays à gauche, carte plus petite
   à droite. Couleurs fixes, identiques en thème clair et sombre. */
.world-band {
  position: relative; overflow: hidden; isolation: isolate;
  margin-inline: calc(-1 * var(--pad));
  padding: clamp(56px, 7vw, 96px) var(--pad);
  background: #141416; color: #F5F5F7;
}
.band-bg {
  position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%;
  object-fit: cover; opacity: .5;
}
/* Assombrit le côté du menu pour la lisibilité, laisse respirer la photo à droite */
.world-band::after {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(90deg, rgba(20, 20, 22, .92) 0%, rgba(20, 20, 22, .72) 45%, rgba(20, 20, 22, .45) 100%);
}
/* Lumière : un halo flou déplacé uniquement par transform (animation GPU, sans
   filtre ni mélange recalculés à chaque image) */
.band-light {
  position: absolute; z-index: -1; left: -30%; top: -60%; width: 90%; height: 220%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05) 55%, transparent 100%);
  transform: translate3d(0, 0, 0) rotate(18deg);
  animation: band-light 16s ease-in-out infinite alternate;
  will-change: transform; pointer-events: none;
}
@keyframes band-light {
  from { transform: translate3d(0, 0, 0) rotate(18deg); }
  to { transform: translate3d(95%, 8%, 0) rotate(18deg); }
}

/* Carte agrandie : plus de la moitié de la bande, jusqu'au bord droit de l'écran */
/* Menu : largeur minimale garantie (onglets sur une ligne) ; la carte prend tout le reste */
.world { display: grid; grid-template-columns: minmax(480px, .7fr) minmax(0, 1.6fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
.world-map { position: relative; margin-right: calc(-1 * var(--pad) + 12px); }
.wmap { width: 100%; height: auto; display: block; }
/* Pays non servis en pointillés, marchés servis en gris clair uni, frontières très
   discrètes (29 septembre 2026). Motif défini dans le SVG (build/svg-map.js). */
.wmap .m-land path { fill: url(#m-dots); stroke: none; transition: opacity .25s var(--ease-out); }
.wmap .m-land path.m-on { fill: #DCDCE0; stroke: rgba(20, 20, 22, .22); stroke-width: .25; stroke-linejoin: round; }
.wmap .m-land path:hover { opacity: .7; }
.wmap .m-land path.m-on:hover { opacity: 1; fill: #FFFFFF; }
/* Bureaux TMS : petits points rouges */
.wmap .m-pin { cursor: default; }
.wmap .m-core { fill: #E0242A; }

/* Nom du pays ou du bureau au survol (js/map.js) */
.map-tip {
  position: absolute; z-index: 2; pointer-events: none;
  transform: translate(12px, -130%);
  padding: .3rem .7rem; font-size: .8rem; font-weight: 500; white-space: nowrap;
  background: #F5F5F7; color: #1D1D1F; border-radius: var(--r-pill);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  opacity: 0; transition: opacity .15s var(--ease-out);
}
.map-tip.on { opacity: 1; }
.map-tip.is-active { font-weight: 600; }

.geo-card { display: flex; flex-direction: column; gap: 1.4rem; }
.world-band .mono-label { color: rgba(245, 245, 247, .6); }

/* Onglets texte soulignés, façon LaCAR, animés au survol */
.geo-tabs { display: none; gap: clamp(1rem, 1.9vw, 2rem); border-bottom: 1px solid rgba(255, 255, 255, .22); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.geo-tabs::-webkit-scrollbar { display: none; }
.geo-tabs button {
  position: relative; flex: none; font: inherit; font-family: var(--font-mono);
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  padding: .7rem 0; border: 0; background: none; color: rgba(245, 245, 247, .55); cursor: pointer;
  transition: color .25s var(--ease-out);
}
.geo-tabs button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: #F5F5F7; transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.geo-tabs button:hover { color: #F5F5F7; }
.geo-tabs button:hover::after { transform: scaleX(.4); }
.geo-tabs button[aria-selected="true"] { color: #F5F5F7; }
.geo-tabs button[aria-selected="true"]::after { transform: scaleX(1); }

/* Écrans moyens : onglets resserrés pour tenir sur une ligne à côté de la grande carte */
@media (max-width: 1400px) {
  .geo-tabs { gap: .95rem; }
  .geo-tabs button { letter-spacing: .1em; font-size: .74rem; }
  .world { grid-template-columns: minmax(420px, .7fr) minmax(0, 1.6fr); }
}
@media (max-width: 1200px) {
  .world { grid-template-columns: minmax(400px, 1fr) minmax(0, 1.2fr); }
}

/* Liste des pays : deux colonnes, repère en forme d'épingle, même taille de texte */
.geo-markets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem 1.6rem; font-size: .94rem; }
.geo-markets li { display: flex; align-items: center; gap: .7rem; color: #F5F5F7; }
.geo-markets li::before {
  content: ""; flex: none; width: 9px; height: 9px; border-radius: 50% 50% 50% 0;
  border: 1.5px solid rgba(245, 245, 247, .7); transform: rotate(-45deg);
}
.geo-panel-h { font-weight: 600; margin-bottom: .6rem; }
.geo-panel + .geo-panel { margin-top: .6rem; }
/* Sans JavaScript, tous les continents restent visibles, chacun avec son titre */
.tabs-live .geo-tabs { display: flex; }
.tabs-live .geo-panel-h { display: none; }
.tabs-live .geo-panel + .geo-panel { margin-top: 0; }
/* Onglets actifs : tous les panneaux dans la même case, seul le choisi est visible.
   La hauteur de la bande reste celle du plus long, quel que soit le continent. */
.tabs-live .geo-panels { display: grid; }
.tabs-live .geo-panel { grid-area: 1 / 1; }
.tabs-live .geo-panel[hidden] { display: block; visibility: hidden; }
/* Apparition en cascade des pays au changement d'onglet */
.tabs-live .geo-panel:not([hidden]) li { animation: li-in .45s var(--ease-out) both; }
.tabs-live .geo-panel:not([hidden]) li:nth-child(n) { animation-delay: calc(var(--i, 0) * 25ms); }
@keyframes li-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.world-legend { display: flex; gap: 1.6rem; flex-wrap: wrap; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, .16); font-size: .8rem; color: rgba(245, 245, 247, .65); }
.world-legend span { display: inline-flex; align-items: center; gap: .5rem; }
.world-legend i { width: 10px; height: 10px; display: inline-block; }
.world-legend .lg-active { background: #DCDCE0; border-radius: 3px; }
.world-legend .lg-office { background: radial-gradient(circle, #E0242A 0 35%, rgba(215, 16, 22, .45) 60%, rgba(215, 16, 22, 0) 100%); border-radius: 50%; width: 14px; height: 14px; }

.offices { margin-top: clamp(40px, 5vw, 64px); background: var(--bg-2); border-radius: var(--r-tile); padding: clamp(28px, 3vw, 40px) clamp(24px, 3vw, 44px); }
.offices .mono-label { margin-bottom: 1.4rem; }
/* Remplissage par colonnes (8 octobre 2026) : TMS UK sous TMS BELGIUM, puis
   les autres bureaux par ordre alphabétique, de haut en bas */
.geo-offices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); grid-auto-flow: column; gap: 1rem 1.8rem; font-size: .94rem; }
.geo-offices a, .geo-offices .c-nolink { display: block; }
.geo-offices .c-name { display: block; font-weight: 600; }
.geo-offices .c-role { display: block; color: var(--txt-2); }
.geo-offices a:hover .c-name { text-decoration: underline; }

/* ===== Integrated Logistics Solutions ===== */
.logistics { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.logi-visual { border-radius: var(--r-tile); overflow: hidden; min-height: 520px; }
.logi-visual img { width: 100%; height: 100%; object-fit: cover; }
.logi-card { background: var(--tile); border-radius: var(--r-tile); padding: clamp(36px, 4.4vw, 64px) clamp(28px, 3.8vw, 56px); display: flex; flex-direction: column; justify-content: center; }
.logi-card h2 { font-size: clamp(2.1rem, 3.6vw, 3.25rem); margin-bottom: 1.1rem; }
.logi-card > p { color: var(--txt-2); font-size: 1.12rem; margin-bottom: 2.2rem; }
.certs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.certs li a { display: block; background: var(--bg-2); border-radius: 16px; padding: 1.05rem 1.2rem; transition: background .25s var(--ease-out); }
.certs li a:hover { background: var(--line-soft); }
.certs b { display: block; font-weight: 600; }
.certs span { color: var(--txt-2); font-size: .85rem; }

/* ===== Notre histoire : aperçu centré ===== */
.hist-teaser { text-align: center; padding-block: clamp(100px, 11vw, 150px); }
.hist-teaser .mono-label { margin-bottom: 1.4rem; }
.hist-teaser h2 { font-size: clamp(2.6rem, 5.2vw, 4.5rem); letter-spacing: -.035em; margin-bottom: 1.1rem; }
.hist-teaser p { color: var(--txt-2); max-width: 760px; margin: 0 auto 2.2rem; font-size: clamp(1.08rem, 1.5vw, 1.32rem); }

/* ===== Équipe (teaser) ===== */
.team-strip { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 20px; height: clamp(260px, 30vw, 440px); }
.team-strip figure { border-radius: var(--r-tile); overflow: hidden; margin: 0; }
/* Photos de l'équipe en couleur sur l'accueil (demande TMS du 29 septembre 2026) */
.home .team-strip img.ph { filter: none; }
.team-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.team-strip figure:hover img { transform: scale(1.03); }

/* ===== FAQ ===== */
.faq-list { max-width: 980px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 1.5rem 3rem 1.5rem .2rem;
  font-weight: 500; font-size: clamp(1.1rem, 1.5vw, 1.32rem); letter-spacing: -.01em;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  font-size: 1.7rem; font-weight: 300; line-height: 1; transition: transform .3s var(--ease-out);
}
.faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-list .faq-a { padding: 0 .2rem 1.7rem; color: var(--txt-2); max-width: 72ch; }

/* ===== News : trois tuiles ===== */
.news { padding-top: 0; }
.news h2 { font-size: clamp(1.9rem, 2.8vw, 2.5rem); margin-bottom: 2.2rem; letter-spacing: -.025em; }
.news-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.news-item {
  background: var(--bg-2); border-radius: 24px; padding: 32px; min-height: 220px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.4rem;
  transition: background .25s var(--ease-out);
}
.news-item:hover { background: var(--line-soft); }
.news-item time { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--txt-2); }
.news-item h3 { font-family: var(--font-body); font-size: 1.3rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.3; }
.news-item p { color: var(--txt-2); font-size: .94rem; line-height: 1.55; }
.news-item .more { font-weight: 500; font-size: .94rem; margin-top: auto; }
a.news-item { color: inherit; text-decoration: none; }
a.news-item:hover .more { text-decoration: underline; }

/* ===== Contact : une grande carte ===== */
.contact-card { background: var(--tile); border-radius: var(--r-tile); padding: clamp(32px, 5vw, 72px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.4rem, 5vw, 72px); }
.contact-intro { display: flex; flex-direction: column; }
.contact h2 { font-size: clamp(2.3rem, 4.4vw, 3.75rem); margin-bottom: 1.1rem; }
.contact .sub { color: var(--txt-2); max-width: 40ch; font-size: 1.12rem; }
.callback {
  margin-top: auto; padding: 1.7rem; background: var(--bg-2); border-radius: 20px;
  display: flex; gap: 1.2rem; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.callback p { font-weight: 600; line-height: 1.35; max-width: 26ch; }
.callback small { display: block; color: var(--txt-2); font-weight: 400; font-size: .9rem; margin-top: .2rem; }

/* ===== Responsive homepage ===== */
@media (max-width: 1100px) {
  .partner-grid { grid-template-columns: 1fr 1fr; }
  .geo-offices { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-flow: row; }
}
@media (max-width: 960px) {
  .sector-grid, .grades, .logistics, .contact-card, .news-list { grid-template-columns: 1fr; }
  .logi-visual { min-height: 0; aspect-ratio: 4 / 3; }
  .callback { margin-top: 2rem; }
  /* La carte repasse sous le menu des pays, en flux normal */
  .world { grid-template-columns: 1fr; }
  .world-map { margin-right: 0; }
  /* Onglets sur une seule ligne, défilement horizontal au doigt */
  .tabs-live .geo-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .geo-tabs::-webkit-scrollbar { display: none; }
  .geo-tabs button { flex: none; }
  .team-strip { grid-template-columns: 1fr 1fr; height: auto; }
  .team-strip figure { aspect-ratio: 4 / 3; }
  .team-strip figure:first-child { grid-column: span 2; aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  .partner-grid { grid-template-columns: 1fr; }
  .geo-offices, .certs { grid-template-columns: 1fr; }
  .geo-offices { grid-auto-flow: row; }
}
/* Très grands écrans : la bande des pays suit la largeur du contenu, en tuile arrondie */
@media (min-width: 1560px) { .world-band { border-radius: var(--r-tile); } }