/* ===========================================================
   Totem Business by Totem — Thème BLANC (surcouche)
   Ce fichier se charge APRÈS css/style.css et remplace
   les couleurs sombres par une identité claire et sobre.
   À ajouter sur CHAQUE page, juste après style.css :
   <link rel="stylesheet" href="css/theme-blanc.css">
   (depuis /pages/ : href="../css/theme-blanc.css")
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --tb-white:  #ffffff;
  --tb-paper:  #f3f6f9;
  --tb-ink:    #0f1c2e;
  --tb-steel:  #52637a;
  --tb-line:   #dde4ec;
  --tb-accent: #c1121f;
  --tb-accent-dark: #97101a;
  --tb-accent-soft: #fdecee;

  /* on écrase aussi les variables probables de style.css */
  --slate-900: #0f1c2e;
  --slate-800: #1b2c42;
  --slate-700: #2f435c;
  --slate-600: #42566e;
  --slate-500: #52637a;
  --slate-400: #7d8ca0;
  --slate-300: #b9c5d3;
  --slate-200: #dde4ec;
  --slate-100: #eef2f6;
  --slate-50:  #f7f9fb;
  --navy: #0f1c2e;
  --dark: #0f1c2e;
  --bg: #ffffff;
  --bg-alt: #f3f6f9;
  --gold: #c1121f;
  --primary: #c1121f;
  --accent: #c1121f;
  --text: #0f1c2e;
  --muted: #52637a;
  --border: #dde4ec;
}

/* ---------- Base ---------- */
html, body {
  background: var(--tb-white) !important;
  color: var(--tb-ink) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 { color: var(--tb-ink) !important; letter-spacing: -.02em; }
p, li, span, div, td, th { color: inherit; }
a { color: var(--tb-ink); }

section { background: var(--tb-white) !important; }
section.section-alt, .section-alt { background: var(--tb-paper) !important; }
.container { max-width: 1220px; margin: 0 auto; padding-left: 22px; padding-right: 22px; }

/* ---------- Bandeau défilant ---------- */
.ticker-bar {
  background: var(--tb-ink) !important;
  color: #fff !important;
  border-bottom: none !important;
}
.ticker-bar * { color: #eaeff5 !important; }

/* ---------- En-tête ---------- */
header.site {
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--tb-line) !important;
  box-shadow: 0 1px 0 rgba(15,28,46,.04);
  position: sticky; top: 0; z-index: 60;
}
header.site .brand-text .name { color: var(--tb-ink) !important; font-weight: 800; }
header.site .main-links a {
  color: var(--tb-steel) !important;
  font-weight: 500;
  text-decoration: none;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
header.site .main-links a:hover {
  color: var(--tb-ink) !important;
  border-bottom-color: var(--tb-accent);
}
header.site .brand-mark img,
footer.site .totem-logo-chip img { background: transparent !important; }
.mobile-drawer {
  background: #fff !important;
  border-top: 1px solid var(--tb-line) !important;
}
.mobile-drawer a { color: var(--tb-ink) !important; border-bottom: 1px solid var(--tb-line); }
.burger { color: var(--tb-ink) !important; background: transparent !important; border: 1px solid var(--tb-line) !important; border-radius: 8px; }

/* Convertisseur rapide + langues */
.quick-convert {
  background: var(--tb-paper) !important;
  border: 1px solid var(--tb-line) !important;
  border-radius: 10px;
  color: var(--tb-ink) !important;
}
.quick-convert input, .quick-convert select {
  background: #fff !important; color: var(--tb-ink) !important;
  border: 1px solid var(--tb-line) !important; border-radius: 7px;
}
.qc-live { color: var(--tb-accent) !important; font-weight: 700; }
.qc-dot { background: var(--tb-accent) !important; }
.qc-result { color: var(--tb-ink) !important; font-weight: 700; }
.lang-toggle { border: 1px solid var(--tb-line) !important; border-radius: 8px; overflow: hidden; }
.lang-toggle button { background: #fff !important; color: var(--tb-steel) !important; border: 0 !important; }
.lang-toggle button.active { background: var(--tb-ink) !important; color: #fff !important; }

/* ---------- Boutons ---------- */
.btn { border-radius: 9px !important; font-weight: 600 !important; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.btn-primary {
  background: var(--tb-accent) !important;
  border: 1px solid var(--tb-accent) !important;
  color: #fff !important;
}
.btn-primary:hover { background: var(--tb-accent-dark) !important; border-color: var(--tb-accent-dark) !important; }
.btn-outline {
  background: transparent !important;
  border: 1px solid var(--tb-line) !important;
  color: var(--tb-ink) !important;
}
.btn-outline:hover { border-color: var(--tb-ink) !important; background: var(--tb-paper) !important; }
.btn-ghost { background: transparent !important; color: var(--tb-accent) !important; border: 0 !important; padding-left: 0 !important; }
.btn:focus-visible { outline: 3px solid rgba(193,18,31,.35); outline-offset: 2px; }

/* ---------- HÉROS avec photo ---------- */
.hero {
  position: relative;
  background:
    linear-gradient(100deg, rgba(10,20,34,.90) 0%, rgba(10,20,34,.74) 46%, rgba(10,20,34,.38) 100%),
    url('https://images.unsplash.com/photo-1494412519320-aa613dfb7738?fm=jpg&q=80&w=2400&auto=format&fit=crop') center 48% / cover no-repeat
    #0f1c2e !important;
  color: #fff !important;
  padding: 92px 0 84px !important;
  border-bottom: 1px solid var(--tb-line);
}
.hero h1, .hero .lead, .hero p, .hero span, .hero b { color: #fff !important; }
.hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.5rem) !important; line-height: 1.06; font-weight: 800; max-width: 16ch; }
.hero .lead { color: #dbe4ef !important; max-width: 62ch; font-size: 1.04rem; line-height: 1.65; }
.hero .eyebrow-stamp {
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  color: #fff !important;
  border-radius: 999px; padding: 6px 14px; display: inline-block;
}
.hero .hero-stats b { color: #fff !important; }
.hero .hero-stats span { color: #b9c8da !important; }
.hero .hero-stats > div { border-left: 2px solid var(--tb-accent); padding-left: 12px; }
.hero .btn-outline { border-color: rgba(255,255,255,.55) !important; color: #fff !important; }
.hero .btn-outline:hover { background: rgba(255,255,255,.14) !important; }

.hero .manifest-card {
  background: rgba(255,255,255,.97) !important;
  border: 1px solid rgba(255,255,255,.6) !important;
  box-shadow: 0 24px 60px rgba(5,12,22,.42);
  border-radius: 14px; overflow: hidden;
}
.manifest-head { background: var(--tb-ink) !important; color: #fff !important; }
.manifest-head span, .manifest-head .stamp { color: #fff !important; }
.manifest-head .stamp { background: var(--tb-accent) !important; border-radius: 4px; padding: 2px 8px; }
.manifest-body { background: #fff !important; }
.manifest-row { border-bottom: 1px solid var(--tb-line) !important; }
.manifest-row span:first-child { color: var(--tb-steel) !important; }
.manifest-row span:last-child { color: var(--tb-ink) !important; font-weight: 600; }

.hero-credit {
  position: absolute; right: 14px; bottom: 10px;
  font-size: .68rem; color: rgba(255,255,255,.55) !important; letter-spacing: .02em;
}
.hero-credit a { color: rgba(255,255,255,.75) !important; text-decoration: underline; }

/* ---------- Titres de section ---------- */
.section-head h2 { font-size: clamp(1.5rem, 2.6vw, 2.15rem); }
.section-head p { color: var(--tb-steel) !important; max-width: 70ch; }
.eyebrow { color: var(--tb-accent) !important; font-weight: 700; }

/* ---------- Cartes génériques ---------- */
.objectif-card, .pack-card, .service-card, .aside-panel,
.domaines-grid > *, .annonces-grid > *, .showroom-strip > * {
  background: #fff !important;
  border: 1px solid var(--tb-line) !important;
  border-radius: 12px !important;
  color: var(--tb-ink) !important;
  box-shadow: 0 1px 2px rgba(15,28,46,.04);
}
.objectif-card p, .service-card p, .pack-card li, .aside-panel p { color: var(--tb-steel) !important; }
.objectif-card .num { color: var(--tb-accent) !important; opacity: .9; }
.service-card .icon {
  background: var(--tb-accent-soft) !important;
  color: var(--tb-accent) !important;
  border-radius: 10px; font-weight: 800;
}
.pack-card .price { color: var(--tb-ink) !important; }
.pack-card .units { color: var(--tb-accent) !important; }
.pack-card.featured {
  border: 2px solid var(--tb-accent) !important;
  box-shadow: 0 12px 34px rgba(193,18,31,.12) !important;
}
.pack-tag { background: var(--tb-accent) !important; color: #fff !important; border-radius: 999px; }
.paiement-chip {
  background: #fff !important; border: 1px solid var(--tb-line) !important;
  color: var(--tb-steel) !important; border-radius: 999px;
}

/* Champs de formulaire / filtres */
input, select, textarea {
  background: #fff !important;
  color: var(--tb-ink) !important;
  border: 1px solid var(--tb-line) !important;
  border-radius: 9px !important;
}
input::placeholder, textarea::placeholder { color: #94a3b4 !important; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(193,18,31,.35); outline-offset: 1px; }

.conv-result { color: var(--tb-ink) !important; }
.conv-note { color: var(--tb-steel) !important; }

/* ---------- Blocs photo ---------- */
.tb-figure {
  position: relative; overflow: hidden; border-radius: 14px;
  border: 1px solid var(--tb-line); background: var(--tb-paper);
}
.tb-figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tb-figure figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 18px 14px;
  background: linear-gradient(to top, rgba(10,20,34,.88), rgba(10,20,34,0));
  color: #fff !important; font-weight: 600; font-size: .95rem;
}
.tb-figure figcaption small { display: block; font-weight: 400; color: #cbd7e4 !important; margin-top: 2px; }

.tb-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.tb-gallery .tb-figure { aspect-ratio: 4 / 5; }
.tb-gallery .tb-figure:first-child { grid-column: span 2; aspect-ratio: 8 / 5; }

.tb-banner {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 28px; align-items: center;
}
.tb-banner .tb-figure { aspect-ratio: 16 / 10; }
.tb-banner h3 { font-size: 1.45rem; margin-bottom: 10px; }
.tb-banner p { color: var(--tb-steel) !important; line-height: 1.65; }
.tb-points { list-style: none; padding: 0; margin: 14px 0 0; }
.tb-points li {
  padding-left: 22px; position: relative; margin-bottom: 8px; color: var(--tb-steel) !important;
}
.tb-points li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; border-radius: 2px; background: var(--tb-accent);
}

@media (max-width: 900px) {
  .tb-gallery { grid-template-columns: repeat(2, 1fr); }
  .tb-gallery .tb-figure:first-child { grid-column: span 2; }
  .tb-banner { grid-template-columns: 1fr; }
  .hero { padding: 64px 0 56px !important; }
}

/* ---------- Pied de page ---------- */
footer.site { background: var(--tb-ink) !important; color: #cfd9e5 !important; border-top: 4px solid var(--tb-accent); }
footer.site h4 { color: #fff !important; font-size: .95rem; }
footer.site a { color: #b9c8da !important; text-decoration: none; }
footer.site a:hover { color: #fff !important; }
footer.site .footer-addr { color: #98a9bd !important; }
footer.site .footer-bottom { border-top: 1px solid rgba(255,255,255,.14) !important; color: #90a2b7 !important; }
footer.site .footer-bottom span { color: #90a2b7 !important; }

/* ---------- Fenêtres modales ---------- */
.modal-backdrop { background: rgba(10,20,34,.55) !important; }
.modal-box { background: #fff !important; border: 1px solid var(--tb-line) !important; border-radius: 14px; }
.modal-head { background: #fff !important; border-bottom: 1px solid var(--tb-line) !important; }
.modal-head h3 { color: var(--tb-ink) !important; }
.modal-close { color: var(--tb-steel) !important; background: transparent !important; border: 0 !important; }
.modal-body { background: #fff !important; }
.modal-body p, .modal-body article p { color: var(--tb-steel) !important; line-height: 1.7; }
.modal-body h5 { color: var(--tb-ink) !important; }

/* ---------- Toast ---------- */
.toast { background: var(--tb-ink) !important; color: #fff !important; border-radius: 10px !important; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- Horloges mondiales (style banque) ---------- */
.world-clocks{ display:flex; flex-direction:column; gap:22px; padding-top:4px; }
.world-clock-continent-title{
  font-size:.75rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--tb-steel); margin:0 0 10px; font-weight:700;
  border-bottom:1px solid var(--tb-line); padding-bottom:6px;
}
.world-clocks-row{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(78px, 1fr));
  gap:14px 8px;
}
.world-clock{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center;
}
.world-clock-face{
  position:relative;
  width:72px;
  height:72px;
  border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #ffffff 0%, #f4f1e8 55%, #e9e2cf 100%);
  border:3px solid var(--tb-gold, #b9975b);
  box-shadow:
    0 1px 3px rgba(20,30,45,.15),
    0 6px 16px rgba(20,30,45,.12),
    inset 0 0 0 1px rgba(255,255,255,.6);
}
.world-clock-flag{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-size:1.5rem;
  opacity:.55;
  z-index:1;
  line-height:1;
  filter:saturate(.85);
}
.world-clock-face::before{
  /* petit repère central doré, au-dessus du drapeau */
  content:"";
  position:absolute; top:50%; left:50%;
  width:6px; height:6px;
  background:var(--tb-gold, #b9975b);
  border-radius:50%;
  transform:translate(-50%,-50%);
  z-index:3;
}
.world-clock-tick{
  position:absolute;
  top:4px; left:50%;
  width:2px; height:5px;
  background:var(--tb-steel, #5c6b80);
  opacity:.5;
  transform-origin:1px 32px;
  z-index:2;
}
.world-clock-hand{
  position:absolute;
  left:50%; bottom:50%;
  transform-origin:50% 100%;
  border-radius:3px;
  z-index:2;
  background:var(--tb-ink, #142033);
}
.world-clock-hand.hour{ width:3px; height:18px; margin-left:-1.5px; }
.world-clock-hand.minute{ width:2px; height:27px; margin-left:-1px; background:var(--tb-steel,#33465f); }
.world-clock-hand.second{ width:1px; height:30px; margin-left:-.5px; background:var(--tb-gold, #b9975b); }
.world-clock-city{ font-weight:600; font-size:.72rem; color:var(--tb-ink); }
.world-clock-digital{ font-size:.68rem; color:var(--tb-steel); font-variant-numeric:tabular-nums; }

/* ---------- Cachet "Totem Consulting Solutions — Depuis 2019" ---------- */
.tb-stamp{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:64px; height:64px; border-radius:50%;
  border:2px dashed var(--tb-accent, #c1121f);
  color:var(--tb-accent, #c1121f);
  font-family:var(--font-mono);
  font-size:.5rem; font-weight:700; text-align:center; line-height:1.15;
  text-transform:uppercase; letter-spacing:.02em;
  transform:rotate(-8deg);
  opacity:.85;
  margin-left:10px;
  flex-shrink:0;
}
.tb-stamp-year{ font-size:.56rem; margin-top:2px; letter-spacing:.03em; }
@media (max-width:900px){ .tb-stamp{ display:none; } }

/* ---------- Widget compte connecté (barre du haut) ---------- */
.account-pill{
  display:flex; align-items:center; gap:8px;
  background:var(--tb-paper, #f3f6f9); border:1px solid var(--tb-line, #dde4ec);
  border-radius:20px; padding:6px 12px 6px 6px; font-size:.8rem; color:var(--tb-ink);
  text-decoration:none;
}
.account-pill .avatar{
  width:26px; height:26px; border-radius:50%; background:var(--tb-accent, #c1121f);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.75rem;
}
.account-pill .units{ font-weight:700; color:var(--tb-accent, #c1121f); }
.account-pill:hover{ border-color:var(--tb-accent, #c1121f); }


/* ==========================================================================
   En-tête : le logo garde toujours son ratio ; les éléments secondaires
   (tampon, nom, convertisseur rapide) s'effacent selon la largeur disponible
   pour que tout tienne sur UNE seule ligne, sans jamais comprimer le logo.
   ========================================================================== */
header.site .brand, header.site .brand-mark, header.site .nav-actions { flex-shrink: 0; }
header.site .brand-mark img { height: 54px; width: auto; max-width: none; flex: none; aspect-ratio: 2093 / 595; object-fit: contain; }
header.site .main-links { flex: none; white-space: nowrap; }
header.site .main-links a { white-space: nowrap; }

@media (max-width: 1849px) { header.site .tb-stamp { display: none !important; } }
@media (max-width: 1769px) { header.site .brand-text { display: none; } }
@media (max-width: 1614px) {
  header.site .brand-text { display: block; }
  header.site .quick-convert { display: none !important; }
}
@media (max-width: 1499px) { header.site .main-links { gap: 4px; } }
@media (max-width: 1459px) { header.site .brand-text { display: none; } }
@media (max-width: 1304px) {
  header.site .main-links { display: none; }
  header.site .burger { display: inline-flex; }
  header.site .brand-text { display: block; }
}
@media (max-width: 700px) { header.site .brand-text { display: none; } header.site .brand-mark img { height: 40px; } }
@media (max-width: 420px) { header.site .brand-mark img { height: 34px; } }
@media (max-width: 520px) { header.site .nav-actions .btn-primary { display: none; } }