/* Direction V2 « monochrome », validée par TMS le 29 septembre 2026 sur le
   canevas Claude Design : fond blanc et gris clair, texte quasi noir, photos en
   noir et blanc, typographie Geist (proche de la présentation TMS), boutons en
   pilule et grandes tuiles arrondies, dans l'esprit d'apple.com.
   Remplace la piste V2 « Synthèse » (Outfit + DM Sans, rouge TMS en accent).

   Rayons : tuiles 28 px, photos et cartes 20 à 24 px, champs 12 px, boutons en
   pilule. Aucune dépendance JS externe. */

/* Geist et Geist Mono, polices variables, licence SIL OFL (shared/fonts/OFL-geist.txt) */
@font-face { font-family: "Geist"; src: url("../../shared/fonts/geist-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../../shared/fonts/geist-mono-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --font-display: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", monospace;
  --h-weight: 600;
  --h-tracking: -.03em;
  --h-leading: 1.05;
  --r-tile: 28px;
  --r-card: 22px;
  --r-field: 12px;
  --r-pill: 980px;
}

/* ============================================================
   Thème jour / nuit.
   Défaut : suit prefers-color-scheme. Bascule manuelle : data-theme
   sur <html>, posé avant le premier paint par le script inline du head.
   ============================================================ */

:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

:root {
  --bg: #FFFFFF;
  --bg-2: #F5F5F7;
  --tile: #FFFFFF;           /* tuile posée sur fond gris */
  --txt: #1D1D1F;
  --txt-2: #6E6E73;
  --txt-3: #86868B;
  --line: #D2D2D7;
  --line-soft: #E8E8ED;
  --field-bg: #FFFFFF;
  --field-border: #D2D2D7;
  --nav-bg: rgba(255, 255, 255, .82);
  --btn-bg: #1D1D1F;
  --btn-txt: #FFFFFF;
  --seg-bg: #E8E8ED;
  --seg-on: #FFFFFF;
  --accent-text: #1D1D1F;
  --hover-tint: rgba(0, 0, 0, .04);
  /* Logo TMS dans son rouge d'origine (charte), dans les deux thèmes */
  --logo-filter: none;
  /* Photos en couleur sur les sous-pages ; l'accueil reste en noir et blanc (home.css) */
  --img-filter: none;
  --tms-dot: var(--tms-red);
  --img-filter-product: none;   /* images produit des pages de marque : couleur conservée */
  --map-land: #E2E2E7;
  --map-on: #1D1D1F;
  --map-border: #FFFFFF;
  --map-pin: #FFFFFF;
  --red: #1D1D1F;               /* ancien accent rouge, neutralisé en V2 */
  --red-deep: #000000;
  --pad: clamp(20px, 4vw, 58px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B0B0C;
    --bg-2: #161617;
    --tile: #1D1D1F;
    --txt: #F5F5F7;
    --txt-2: #A1A1A6;
    --txt-3: #86868B;
    --line: #3A3A3C;
    --line-soft: #2C2C2E;
    --field-bg: #1D1D1F;
    --field-border: #424245;
    --nav-bg: rgba(11, 11, 12, .8);
    --btn-bg: #F5F5F7;
    --btn-txt: #1D1D1F;
    --seg-bg: #2C2C2E;
    --seg-on: #48484A;
    --accent-text: #F5F5F7;
    --hover-tint: rgba(255, 255, 255, .05);
    --logo-filter: none;
    --img-filter: saturate(.92) brightness(.9);
    --img-filter-product: saturate(.92) brightness(.9);
    --map-land: #2C2C2E;
    --map-on: #F5F5F7;
    --map-border: #0B0B0C;
    --map-pin: #0B0B0C;
    --red: #F5F5F7;
    --red-deep: #FFFFFF;
  }
}

:root[data-theme="dark"] {
  --bg: #0B0B0C;
  --bg-2: #161617;
  --tile: #1D1D1F;
  --txt: #F5F5F7;
  --txt-2: #A1A1A6;
  --txt-3: #86868B;
  --line: #3A3A3C;
  --line-soft: #2C2C2E;
  --field-bg: #1D1D1F;
  --field-border: #424245;
  --nav-bg: rgba(11, 11, 12, .8);
  --btn-bg: #F5F5F7;
  --btn-txt: #1D1D1F;
  --seg-bg: #2C2C2E;
  --seg-on: #48484A;
  --accent-text: #F5F5F7;
  --hover-tint: rgba(255, 255, 255, .05);
  --logo-filter: none;
  --img-filter: saturate(.92) brightness(.9);
  --img-filter-product: saturate(.92) brightness(.9);
  --map-land: #2C2C2E;
  --map-on: #F5F5F7;
  --map-border: #0B0B0C;
  --map-pin: #0B0B0C;
  --red: #F5F5F7;
  --red-deep: #FFFFFF;
}

/* ============================================================
   Base
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--txt);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background .35s var(--ease-out), color .35s var(--ease-out);
}

::selection { background: var(--txt); color: var(--bg); }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: var(--h-weight);
  line-height: var(--h-leading);
  letter-spacing: var(--h-tracking);
  color: var(--txt);
}

/* Titres équilibrés : pas de mot orphelin sur la dernière ligne */
h1, h2, h3 { text-wrap: balance; }

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* Photos métier : couleur sur les sous-pages, noir et blanc sur l'accueil (home.css) */
.ph { filter: var(--img-filter); transition: filter .35s var(--ease-out); }

/* Petite signature en police à chasse fixe, comme sur la présentation TMS */
.mono-label {
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--txt-2);
}

/* Lien d'évitement clavier */
.skip {
  position: absolute; left: var(--pad); top: -60px; z-index: 90;
  background: var(--btn-bg); color: var(--btn-txt); padding: .7rem 1.1rem; border-radius: var(--r-pill);
  transition: top .2s var(--ease-out);
}
.skip:focus { top: 12px; }

/* Texture de la V1, désactivée en V2 */
.grain { display: none; }

/* ============================================================
   Menu : barre fine et translucide, façon apple.com
   ============================================================ */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  height: 52px; padding-inline: var(--pad);
  background: var(--nav-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line-soft);
}
.nav .logo img { height: 22px; width: auto; filter: var(--logo-filter); }
.nav-links { display: flex; gap: clamp(1rem, 2.4vw, 2.2rem); font-size: .8rem; }
.nav-links a { color: var(--txt); opacity: .85; transition: opacity .2s var(--ease-out); }
.nav-links a:hover { opacity: 1; }
.nav-links a[aria-current="page"] { opacity: 1; font-weight: 600; }
.nav-right { display: flex; align-items: center; gap: .8rem; }

.lang { display: flex; gap: .1rem; font-size: .75rem; }
.lang a { padding: .3rem .4rem; color: var(--txt-2); }
.lang a[aria-current] { color: var(--txt); }

/* Bascule jour / nuit : disque soleil / croissant en CSS pur */
.theme-btn {
  width: 32px; height: 32px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 50%; cursor: pointer;
  transition: background .25s var(--ease-out);
}
.theme-btn:hover { background: var(--hover-tint); }
.theme-btn .disc {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--txt);
  box-shadow: inset 4px -3px 0 0 var(--txt);
  transition: box-shadow .3s var(--ease-out), background .3s var(--ease-out);
}
:root[data-theme="dark"] .theme-btn .disc { background: var(--txt); box-shadow: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .disc { background: var(--txt); box-shadow: none; }
}

/* ============================================================
   Boutons en pilule
   ============================================================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-body); font-weight: 500; font-size: 1rem; letter-spacing: -.01em;
  padding: .85rem 1.55rem; border: 1px solid transparent; border-radius: var(--r-pill); cursor: pointer;
  white-space: nowrap;
  transition: transform .2s var(--ease-out), background .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out), opacity .25s var(--ease-out);
}
/* Animation au survol : légère élévation (29 septembre 2026) */
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .14); }
.btn:active { transform: scale(.97); box-shadow: none; }
/* Action principale : noir plein (blanc plein en thème sombre) */
.btn-dark, .btn-red { background: var(--btn-bg); color: var(--btn-txt); }
.btn-dark:hover, .btn-red:hover { opacity: .85; }
/* Action secondaire : contour */
.btn-outline, .btn-ghost { border-color: var(--txt); color: var(--txt); background: transparent; }
.btn-outline:hover, .btn-ghost:hover { background: var(--txt); color: var(--bg); }
/* Sur photo sombre (hero) */
.btn-light { background: #FFFFFF; color: #1D1D1F; }
.btn-light:hover { opacity: .88; }
.btn-outline-light { border-color: rgba(255, 255, 255, .72); color: #FFFFFF; }
.btn-outline-light:hover { background: #FFFFFF; color: #1D1D1F; }
.btn .arr { transition: transform .25s var(--ease-out); }
.btn:hover .arr { transform: translateX(3px); }
.nav .btn { padding: .42rem .95rem; font-size: .8rem; }

/* ============================================================
   Sections génériques : titres centrés, fonds blanc / gris alternés
   ============================================================ */

.sec { padding: clamp(84px, 9vw, 130px) var(--pad); }
.sec-alt { background: var(--bg-2); }
.sec-head { max-width: 860px; margin: 0 auto clamp(2.8rem, 5vw, 4rem); text-align: center; }
.sec-head h2 { font-size: clamp(2.3rem, 4.4vw, 3.75rem); margin-bottom: 1.1rem; }
.sec-head p { color: var(--txt-2); font-size: clamp(1.08rem, 1.5vw, 1.32rem); line-height: 1.45; }
.sec-head .btn { margin-top: 1.8rem; }

/* ============================================================
   Chiffres clés : grands chiffres centrés
   ============================================================ */

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; text-align: center; }
/* Chiffres à chasse fixe : la largeur ne bouge pas pendant le comptage (js/counters.js) */
.stat .num { font-family: var(--font-display); font-weight: 600; font-size: clamp(3rem, 5.6vw, 5rem); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.stat .lbl { color: var(--txt-2); font-size: 1.05rem; margin-top: .7rem; }
@media (max-width: 960px) {
  .stats { grid-template-columns: 1fr 1fr; gap: 2.6rem 1.2rem; }
}

/* ============================================================
   Formulaire
   ============================================================ */

.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.form label { display: block; font-size: .8rem; font-weight: 500; margin: 1rem 0 .4rem; }
.form input, .form select, .form textarea {
  width: 100%; background: var(--field-bg); border: 1px solid var(--field-border); color: var(--txt);
  border-radius: var(--r-field); padding: .9rem 1rem; font: inherit; font-size: 1.05rem;
  transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--txt); box-shadow: 0 0 0 3px var(--hover-tint), 0 0 0 1px var(--txt); }
.form .hint { font-size: .8rem; color: var(--txt-2); margin-top: .5rem; }
.form button { margin-top: 1.6rem; }
.form .field-error { display: none; color: var(--txt); font-weight: 500; font-size: .84rem; margin-top: .4rem; }
.form .invalid + .field-error, .form .invalid ~ .field-error { display: block; }
.form input.invalid, .form select.invalid { border-color: var(--txt); border-width: 2px; }
.form .form-ok { display: none; border-radius: var(--r-field); background: var(--bg-2); padding: 1rem 1.2rem; margin-top: 1.4rem; font-weight: 500; }
.form.sent .form-ok { display: block; }

/* Consigne affichée quand le visiteur demande un rappel */
.form .callback-notice { display: none; background: var(--bg-2); border-radius: var(--r-field); padding: .8rem 1rem; margin-top: .9rem; color: var(--txt-2); font-size: .9rem; }
.form.callback-mode .callback-notice { display: block; }
.form.callback-mode input[type="tel"] { border-color: var(--txt); }

/* ============================================================
   Bande défilante des constructeurs (texte seul, jamais de logo)
   ============================================================ */

.served {
  overflow: hidden; padding-block: .6rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee { display: flex; align-items: center; width: max-content; animation: slide 60s linear infinite; }
.marquee:hover { animation-play-state: paused; }
.mq-group { display: flex; align-items: center; }
.marquee span {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.3rem, 2.2vw, 1.9rem); letter-spacing: .06em;
  color: var(--txt); white-space: nowrap;
  /* Pas de séparateur entre les marques, seulement de l'espace (29 septembre 2026) */
  padding-right: clamp(3rem, 5.4vw, 5rem);
}
@keyframes slide { to { transform: translateX(-50%); } }

/* Mention légale marques */
.tm-note { color: var(--txt-3); font-size: .75rem; text-align: center; margin-top: 2.4rem; }

/* ============================================================
   Pied de page, façon apple.com
   ============================================================ */

/* body > footer : ne pas toucher aux <footer> internes (signature du message du board) */
body > footer { background: var(--bg-2); border-top: 1px solid var(--line); padding: 2.4rem var(--pad) 2rem; font-size: .75rem; color: var(--txt-2); }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(5, 1fr); gap: 2rem; margin-bottom: 2rem; }
.foot-grid .logo img { height: 22px; width: auto; margin-bottom: 1rem; filter: var(--logo-filter); }
.foot-grid p { color: var(--txt-2); max-width: 30ch; line-height: 1.5; }
.foot-grid .h4 { font-size: .75rem; font-weight: 600; color: var(--txt); margin-bottom: .6rem; max-width: none; }
.foot-grid a { display: block; padding: .28rem 0; color: var(--txt-2); }
.foot-grid a:hover { color: var(--txt); text-decoration: underline; }
/* Lien LinkedIn avec son logo (19 octobre 2026) */
.foot-grid .foot-li { display: inline-flex; align-items: center; gap: .5rem; }
.foot-li img { width: 18px; height: 18px; border-radius: 3px; }
/* Lien vers les conditions générales de vente */
.foot-bottom a { color: inherit; }
.foot-bottom a:hover { color: var(--txt); text-decoration: underline; }
.foot-bottom { border-top: 1px solid var(--line); padding-top: 1.1rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ============================================================
   Reveals (progressive enhancement, activés par JS)
   ============================================================ */

.js .rv { opacity: 0; transform: translateY(24px); }

/* ============================================================
   Menu mobile
   ============================================================ */

.menu-btn { display: none; width: 40px; height: 40px; background: none; border: 0; cursor: pointer; padding: 13px 10px; flex-direction: column; justify-content: space-between; }
.menu-btn span { display: block; height: 1.5px; background: var(--txt); transition: transform .25s var(--ease-out); }
.nav-open .menu-btn span:first-child { transform: translateY(6px) rotate(45deg); }
.nav-open .menu-btn span:last-child { transform: translateY(-6px) rotate(-45deg); }
.nav-open { overflow: hidden; }

@media (max-width: 960px) {
  .nav-links { display: none; }
  .menu-btn { display: flex; }
  .lang { display: none; }

  /* Menu ouvert : la barre devient elle-même le panneau plein écran, en un seul
     calque (voir l'historique V1 : pas de position fixed ancrée par le bas).
     backdrop-filter est neutralisé : il enfermerait les enfants dans la barre. */
  .nav-open .nav {
    position: fixed; inset: 0; height: 100dvh;
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-rows: 52px auto auto auto;
    align-content: start;
    padding: 0 var(--pad) calc(1.6rem + env(safe-area-inset-bottom, 0px));
    background: var(--bg);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border-bottom: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav-open .nav-right { display: contents; }
  .nav-open .logo { grid-column: 1; grid-row: 1; align-self: center; }
  .nav-open .theme-btn { grid-column: 2; grid-row: 1; align-self: center; }
  .nav-open .menu-btn { grid-column: 3; grid-row: 1; align-self: center; margin-left: .6rem; }

  .nav-open .nav-links {
    display: flex; flex-direction: column; gap: 0;
    grid-column: 1 / -1; grid-row: 3;
    font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em;
    padding-top: 1rem;
  }
  .nav-open .nav-links a { padding-block: .55rem; opacity: 1; }

  .nav-open .nav .btn {
    display: inline-flex; justify-content: center;
    grid-column: 1 / -1; grid-row: 4;
    margin-top: 1.8rem; padding: .9rem 1.4rem; font-size: 1rem;
  }
  .nav-open .lang {
    display: grid; grid-template-columns: repeat(4, 1fr);
    grid-column: 1 / -1; grid-row: 2; gap: .4rem; padding: 1rem 0;
  }

  .form .row { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .nav .btn { display: none; }
}

/* ============================================================
   Reduced motion + focus
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* La bande des marques continue de défiler à la demande de TMS, plus
     lentement, et s'arrête au survol */
  .marquee { animation: slide 120s linear infinite !important; }
  .js .rv { opacity: 1; transform: none; }
  /* Mouvement réduit : pas d'apparition au défilement ni d'animation d'entrée du
     hero. Les petits effets de survol et la bande des marques restent actifs,
     à la demande de TMS (29 septembre 2026). */
  .js .hero h1 .line > span, .js .hero .lead, .js .hero-cta { animation: none !important; }
}

a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--txt); outline-offset: 3px;
}

/* ============================================================
   Grands écrans (30 septembre 2026) : le contenu s'arrête à 1440 px de large et
   reste centré, les fonds de section gardent toute la largeur. Sans cela, sur un
   écran 16/9 ou plus large, les photos étaient agrandies au-delà de leur
   résolution (jusqu'à 2,5 fois) et paraissaient floues et « étirées ».
   ============================================================ */
:root { --content-max: 1440px; --pad-wide: max(var(--pad), calc((100vw - var(--content-max)) / 2)); }
.sec, .page-hero, .team-hero-photo, .other-brands, body > footer { padding-left: var(--pad-wide); padding-right: var(--pad-wide); }