/* =========================================================
   French Display — Style E
   Feuille de styles principale
   ========================================================= */

/* ---------- 1. Thèmes ---------- */
:root,
[data-theme="dark"] {
  --bg: #08090d;
  --grad-mid: #0b0f1a;
  --surface: #101218;
  --surface-2: #0c0e14;
  --footer-bg: #06070a;

  --text: #f4f5f8;
  --text-2: #e8eaf0;
  --text-3: #dfe3ec;
  --text-4: #c9cdd8;
  --muted: #9195a3;
  --muted-2: #8b91a3;
  --muted-3: #7d8395;
  --muted-4: #6b7183;
  --dot: #3a3f4d;

  --bd-1: rgba(255, 255, 255, .07);
  --bd-2: rgba(255, 255, 255, .09);
  --bd-3: rgba(255, 255, 255, .12);
  --bd-4: rgba(255, 255, 255, .17);
  --fill-1: rgba(255, 255, 255, .04);
  --fill-2: rgba(255, 255, 255, .05);
  --fill-3: rgba(255, 255, 255, .11);

  --btn-bg: #fff;
  --btn-fg: #08090d;
  --btn-hover: #dfe3ec;

  --accent: #1258ff;
  --accent-2: #6f9bff;
  --accent-2-hover: #9bb8ff;
  --accent-soft: rgba(111, 155, 255, .14);
  --accent-bd: rgba(111, 155, 255, .32);
  --accent-bd-strong: rgba(111, 155, 255, .45);

  --halo: rgba(18, 88, 255, .30);
  --halo-2: rgba(18, 88, 255, .16);
  --halo-3: rgba(18, 88, 255, .34);
  --halo-line: rgba(111, 155, 255, .55);

  --header-bg: rgba(8, 9, 13, .82);
  --shadow-lg: 0 40px 120px rgba(0, 0, 0, .6);
  --shadow-md: 0 30px 80px rgba(0, 0, 0, .5);

  --stat-a: #fff;
  --stat-b: #6f9bff;
  --grad-a: #8fb4ff;
  --grad-b: #1a4fd6;
  --bar-a: #6f9bff;
  --bar-b: #1258ff;
  --bar-ok-a: #4ade80;
  --bar-ok-b: #22c55e;

  --ok: #4ade80;
  --ok-soft: rgba(74, 222, 128, .15);
  --ok-bd: rgba(74, 222, 128, .35);
  --bad: #f87171;
  --bad-soft: rgba(239, 68, 68, .14);
  --star: #ffb020;

  --feat-bg: linear-gradient(180deg, #131a2e, #0e1119);
  --feat-bd: rgba(111, 155, 255, .55);
  --feat-shadow: 0 24px 70px rgba(18, 88, 255, .20);

  /* Textes posés sur photos : identiques dans les deux thèmes */
  --on-media: #ffffff;
  --on-media-dim: #a8adbb;
  --on-media-accent: #8fb0ff;
}

[data-theme="light"] {
  --bg: #ffffff;
  --grad-mid: #f3f7fd;
  --surface: #f7f9fc;
  --surface-2: #ffffff;
  --footer-bg: #f1f5fa;

  --text: #0b1220;
  --text-2: #101a2e;
  --text-3: #16203a;
  --text-4: #334155;
  --muted: #5b6478;
  --muted-2: #64748b;
  --muted-3: #748094;
  --muted-4: #8a94a6;
  --dot: #cbd5e1;

  --bd-1: rgba(11, 18, 32, .08);
  --bd-2: rgba(11, 18, 32, .12);
  --bd-3: rgba(11, 18, 32, .16);
  --bd-4: rgba(11, 18, 32, .20);
  --fill-1: rgba(11, 18, 32, .03);
  --fill-2: rgba(11, 18, 32, .05);
  --fill-3: rgba(11, 18, 32, .09);

  --btn-bg: #0b1220;
  --btn-fg: #ffffff;
  --btn-hover: #1e2942;

  --accent: #1258ff;
  --accent-2: #1250e0;
  --accent-2-hover: #0b3fd0;
  --accent-soft: rgba(18, 88, 255, .10);
  --accent-bd: rgba(18, 88, 255, .28);
  --accent-bd-strong: rgba(18, 88, 255, .45);

  --halo: rgba(18, 88, 255, .12);
  --halo-2: rgba(18, 88, 255, .08);
  --halo-3: rgba(18, 88, 255, .14);
  --halo-line: rgba(18, 88, 255, .35);

  --header-bg: rgba(255, 255, 255, .88);
  --shadow-lg: 0 30px 90px rgba(20, 45, 90, .15);
  --shadow-md: 0 20px 60px rgba(20, 45, 90, .10);

  --stat-a: #0b1220;
  --stat-b: #1258ff;
  --grad-a: #1258ff;
  --grad-b: #0a2f8f;
  --bar-a: #4d84ff;
  --bar-b: #1250e0;
  --bar-ok-a: #34d399;
  --bar-ok-b: #0f9d6b;

  --ok: #15803d;
  --ok-soft: rgba(21, 128, 61, .12);
  --ok-bd: rgba(21, 128, 61, .30);
  --bad: #dc2626;
  --bad-soft: rgba(220, 38, 38, .10);
  --star: #dd8c07;

  --feat-bg: linear-gradient(180deg, #f4f8ff, #ffffff);
  --feat-bd: rgba(18, 88, 255, .45);
  --feat-shadow: 0 24px 60px rgba(18, 88, 255, .14);
}

/* ---------- 2. Bases ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: Manrope, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background .25s ease, color .25s ease;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
/* L'attribut hidden doit l'emporter sur les display: flex/grid des composants. */
[hidden] { display: none !important; }
::selection { background: var(--accent); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

.container {
  width: min(1280px, calc(100% - 40px));
  margin-inline: auto;
}
.container-narrow { width: min(920px, calc(100% - 40px)); }
.container-cta { width: min(820px, calc(100% - 40px)); text-align: center; }

/* ---------- 3. Typographie ---------- */
.h2, .h3, .h4 { letter-spacing: -.04em; line-height: 1.02; font-weight: 800; }
.h2 { font-size: clamp(2.4rem, 4vw, 3.5rem); margin: 14px 0 18px; text-wrap: balance; }
.h3 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); margin: 14px 0 16px; line-height: 1.04; text-wrap: balance; }
.h4 { font-size: 1.18rem; font-weight: 700; letter-spacing: -.02em; margin: 14px 0 9px; }
.h2-final { font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1; letter-spacing: -.045em; margin: 16px 0 18px; }

.lead { color: var(--muted); font-size: 1.05rem; max-width: 520px; }
.lead-narrow { max-width: 400px; font-size: 1rem; }
.section-head-center .lead { max-width: 620px; margin-inline: auto; }

.eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-3);
}
.eyebrow-accent { color: var(--accent-2); }

.grad-text {
  background: linear-gradient(100deg, var(--grad-a), var(--grad-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.note {
  display: inline-flex;
  margin-top: 14px;
  padding: 7px 13px;
  border: 1px solid var(--bd-3);
  border-radius: 999px;
  background: var(--fill-1);
  color: var(--muted-2);
  font-size: .74rem;
  font-weight: 600;
}

/* ---------- 4. Sections ---------- */
.section { padding: 96px 0; }
.section.bordered { border-top: 1px solid var(--bd-1); }
.band { background: linear-gradient(180deg, var(--bg), var(--grad-mid) 55%, var(--bg)); }
.halo-right { background: radial-gradient(70% 60% at 80% 10%, var(--halo-2), transparent 60%); }

.section-head-center { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.section-head-split {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 44px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

/* ---------- 5. Boutons & pills ---------- */
.btn {
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 1rem;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary { color: var(--btn-fg); background: var(--btn-bg); }
.btn-primary:hover { background: var(--btn-hover); }
.btn-ghost { color: var(--text); border-color: var(--bd-4); background: var(--fill-2); }
.btn-ghost:hover { background: var(--fill-3); }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: .88rem; }
.btn-block { width: 100%; min-height: 46px; font-size: .88rem; margin-top: auto; }
.btn-mt { margin-top: 28px; }
.btn-self { align-self: flex-start; }

.btn-login { gap: 8px; }
.btn-login svg { flex: none; }
.menu-login { margin-top: 8px; border-radius: 12px; min-height: 46px; font-size: .94rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.btn-row-center { justify-content: center; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px 7px 11px;
  border: 1px solid var(--bd-3);
  border-radius: 999px;
  background: var(--fill-1);
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot-ok { background: #4ade80; }

.link-quiet { color: var(--text-4); font-size: .9rem; font-weight: 600; }
.link-quiet:hover { color: var(--text); }

.tick {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  display: grid;
  place-items: center;
  font-size: .7rem;
  font-weight: 800;
}
.tick-ok { border-radius: 50%; background: var(--ok-soft); color: var(--ok); }
.tick-bad { border-radius: 6px; background: var(--bad-soft); color: var(--bad); }

.list { list-style: none; display: grid; gap: 12px; margin-top: 26px; }
.list li { display: flex; gap: 11px; align-items: flex-start; color: var(--text-4); }

/* ---------- 6. Bandeau de contact + Header ---------- */
/* volontairement non collant : il défile, seule la navigation reste épinglée */
.topbar {
  background: var(--footer-bg);
  border-bottom: 1px solid var(--bd-1);
}
.topbar-row {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.topbar-contact { display: flex; align-items: center; gap: 22px; min-width: 0; }
.topbar-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
}
.topbar-link:hover { color: var(--text); }
.topbar-link svg { flex: none; color: var(--accent-2); }
.topbar-mail { overflow: hidden; text-overflow: ellipsis; }
.topbar-social { display: flex; align-items: center; gap: 14px; flex: none; }
.topbar-follow {
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-3);
}
.social-row { display: flex; align-items: center; gap: 8px; }
/* les glyphes portent les couleurs officielles des marques : pas de teinte héritée */
.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 1px solid var(--bd-2);
  background: var(--fill-1);
  transition: border-color .18s ease, background .18s ease;
}
.social-btn:hover { border-color: var(--bd-4); background: var(--fill-2); }


.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--header-bg);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--bd-1);
}
.header-row {
  min-height: 74px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.logo { display: inline-flex; align-items: center; gap: 11px; }
.logo-mark { flex: none; color: var(--text); }
.logo-text {
  display: grid;
  line-height: .9;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.03em;
}
.logo-text-alt { color: var(--accent-2); font-weight: 500; letter-spacing: .04em; }

.nav-desktop { display: flex; align-items: center; gap: 26px; margin-left: 14px; }
.nav-desktop a { color: var(--muted); font-size: .9rem; font-weight: 600; }
.nav-desktop a:hover { color: var(--text); }

.header-cta { display: flex; align-items: center; gap: 18px; margin-left: auto; }

.icon-btn {
  flex: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bd-3);
  border-radius: 12px;
  background: var(--fill-1);
  color: var(--text);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
#themeToggle { margin-left: auto; }
.menu-btn { display: none; margin-left: 8px; font-size: 19px; }

.mobile-menu {
  border-top: 1px solid var(--bd-1);
  background: var(--surface);
  padding: 10px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu > a:not(.btn) {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-2);
  padding: 13px 6px;
  border-bottom: 1px solid var(--bd-1);
}
.menu-theme {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  background: var(--fill-1);
  border: 1px solid var(--bd-3);
  padding: 13px;
  border-radius: 12px;
  margin-top: 12px;
  cursor: pointer;
}
.menu-quote { margin-top: 8px; border-radius: 12px; min-height: 48px; }

/* ---------- 7. Hero ---------- */
/* Premier écran : bandeau + navigation + hero jusqu'aux logos occupent la hauteur
   visible. La hauteur des deux barres est mesurée par script.js (--fd-chrome). */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(18px, 4vh, 42px) 0;
  min-height: calc(100svh - var(--fd-chrome, 118px));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-halo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(70% 55% at 50% -8%, var(--halo), transparent 62%);
}
.hero-line {
  position: absolute;
  left: 50%;
  top: -1px;
  width: min(1100px, 92%);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--halo-line), transparent);
}
.hero-inner { position: relative; text-align: center; }
.hero-title {
  margin: 0 auto;
  max-width: 960px;
  font-size: min(clamp(4rem, 7vw, 6.6rem), 15vh);
  font-weight: 800;
  line-height: .94;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.hero-sub {
  margin: clamp(12px, 3vh, 26px) auto 0;
  max-width: 620px;
  color: var(--muted);
  font-size: 1.16rem;
}
.hero-inner .btn-row { justify-content: center; margin-top: clamp(14px, 3.4vh, 32px); }

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: center;
  align-items: center;
  margin-top: clamp(14px, 3.4vh, 34px);
  color: var(--muted-3);
  font-family: "IBM Plex Mono", monospace;
  font-size: .74rem;
  letter-spacing: .04em;
}
.stars { color: var(--star); letter-spacing: 2px; }
.trust-flag { display: inline-flex; align-items: center; gap: 7px; }
.trust-flag svg { flex: none; border-radius: 2px; }
.trust-value { color: var(--text-4); }

/* ---------- Grille d'écrans : lueur de bord au passage du curseur ----------
   Adaptation du composant MagicBento (React Bits, MIT + Commons Clause),
   réécrite sans GSAP et sans particules — les cartes portent des photos,
   des particules les auraient encombrées. Liseré volontairement fin. */
.fd-bento {
  --bg-x: 50%;
  --bg-y: 50%;
  --bg-i: 0;
  --bg-r: 280px;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, border-color .35s ease;
}
.fd-bento::after {
  content: '';
  position: absolute;
  inset: 0;
  padding: 3px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  opacity: var(--bg-i);
  transition: opacity .3s ease;
  background: radial-gradient(var(--bg-r) circle at var(--bg-x) var(--bg-y),
    rgba(18, 88, 255, .95) 0%, rgba(91, 139, 255, .55) 32%, transparent 62%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.fd-bento.is-near { box-shadow: 0 18px 44px rgba(18, 88, 255, .16); }
@media (prefers-reduced-motion: reduce) {
  .fd-bento { transition: none !important; transform: none !important; }
}

/* ---------- Chatbot (voir script.js) ---------- */
.bot {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 950;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.bot-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 376px;
  height: min(72vh, 560px);
  border: 1px solid var(--bd-2);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 30px 80px rgba(8, 15, 30, .28);
}
.bot-panel[hidden] { display: none; }
.bot-head {
  position: relative;
  flex: none;
  padding: 22px 22px 26px;
  background: linear-gradient(160deg, var(--accent), #3f7bff);
  color: #fff;
}
.bot-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 9px;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.bot-head-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.bot-head-top svg { flex: none; }
.bot-head-top span {
  font-family: "IBM Plex Mono", monospace;
  font-size: .62rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}
.bot-title { font-size: 1.45rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.bot-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px; }
.bot-faq { display: grid; gap: 8px; }
.bot-q {
  border: 1px solid var(--bd-2);
  border-radius: 12px;
  background: var(--surface-2);
  overflow: hidden;
}
.bot-q > button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border: 0;
  background: none;
  text-align: left;
  color: var(--text);
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
}
.bot-q > button span:last-child { flex: none; color: var(--accent-2); font-size: 1.1rem; line-height: 1; }
.bot-a { padding: 0 15px 14px; color: var(--muted); font-size: .86rem; line-height: 1.6; }
.bot-a[hidden] { display: none; }
.bot-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding: 13px 15px;
  border: 1px solid var(--bd-2);
  border-radius: 12px;
  background: var(--surface-2);
  font-size: .88rem;
  font-weight: 700;
  color: var(--accent-2);
}
.bot-view[hidden] { display: none; }
#botViewMsg { display: flex; flex-direction: column; gap: 14px; }
.bot-bubble-row { display: flex; gap: 10px; }
.bot-avatar {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #5b8bff);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .8rem;
  font-weight: 800;
}
.bot-bubble {
  border: 1px solid var(--bd-2);
  border-radius: 14px;
  border-top-left-radius: 4px;
  background: var(--surface-2);
  padding: 12px 14px;
  color: var(--text-3);
  font-size: .9rem;
  line-height: 1.55;
}
.bot-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  border-radius: 12px;
  background: #25d366;
  color: #0b1220;
  font-size: .95rem;
  font-weight: 800;
}
.bot-mail {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border-radius: 12px;
  border: 1px solid var(--bd-3);
  background: var(--surface-2);
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
}
.bot-note { color: var(--muted-3); font-size: .76rem; text-align: center; }
.bot-tabs {
  flex: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--bd-2);
  background: var(--surface-2);
}
.bot-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 11px 8px 12px;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: .76rem;
  font-weight: 700;
  color: var(--muted-3);
}
.bot-tab.is-active { color: var(--accent-2); }
.bot-fab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #5b8bff);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(18, 88, 255, .42);
}
.bot-fab svg[hidden] { display: none; }

/* support 24/7 dans le bandeau */
.topbar-support {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--muted);
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
}
.topbar-support:hover { color: var(--text); }

/* Fold Text — dépliage du titre au défilement (voir fold-text.js) */
.fold-text { display: inline-block; }
.fold-text-seg {
  display: inline-block;
  perspective: 800px;
  transform-style: preserve-3d;
  vertical-align: baseline;
}
.fold-text-piece {
  position: relative;
  display: inline-block;
  line-height: inherit;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transform: rotateX(-92deg);
  opacity: 0;
  transform-origin: 50% 0%;
  transition:
    transform var(--ft-dur, .6s) cubic-bezier(.22, 1, .36, 1),
    opacity var(--ft-dur, .6s) cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--ft-delay, 0s);
}
.fold-text.is-open .fold-text-piece { transform: rotateX(0deg); opacity: 1; }
/* ombre de pliure, dissipée quand le panneau se remet à plat */
.fold-text-piece::after {
  content: '';
  position: absolute;
  inset: -.08em -.02em;
  pointer-events: none;
  border-radius: .08em;
  mix-blend-mode: multiply;
  opacity: .5;
  background: linear-gradient(180deg, rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .22) 42%, rgba(255, 255, 255, .26) 100%);
  transition: opacity var(--ft-dur, .6s) cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--ft-delay, 0s);
}
.fold-text.is-open .fold-text-piece::after { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .fold-text-piece { transform: none !important; opacity: 1 !important; transition: none !important; }
  .fold-text-piece::after { opacity: 0 !important; }
}

/* Drift Wall — fond animé du hero (voir drift-wall.js) */
.drift-wall {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* hauteur posée par drift-wall.js : le mur s'arrête avant la bande de logos */
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  perspective: 1150px;
  perspective-origin: 50% 45%;
  --dw-tile-w: 210px;
  --dw-tile-h: 132px;
  --dw-gap: 18px;
  --dw-dim: .42;
  --dw-overlay: #060a14;
  --dw-overlay-a: .42;
  --dw-tile-bg: #0b0b12;
  --dw-glow: rgba(18, 88, 255, .16);
  --dw-end: 130px;
  /* double masque : dissolution radiale au centre (lisibilité du titre)
     + fondu en haut et fondu de sortie sur les derniers --dw-end pixels */
  -webkit-mask-image:
    radial-gradient(ellipse 74% 78% at 50% 40%, #000 45%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 10%, #000 calc(100% - var(--dw-end)), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(ellipse 74% 78% at 50% 40%, #000 45%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 10%, #000 calc(100% - var(--dw-end)), transparent 100%);
  mask-composite: intersect;
}
[data-theme="light"] .drift-wall {
  --dw-dim: .3;
  --dw-overlay: #ffffff;
  --dw-overlay-a: .5;
  --dw-tile-bg: #e6ecf5;
  --dw-glow: transparent;
}
.drift-wall__plane {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  will-change: transform;
}
.drift-wall__col {
  position: relative;
  width: calc(var(--dw-tile-w) + var(--dw-gap));
  transform-style: preserve-3d;
}
.drift-wall__track { display: flex; flex-direction: column; will-change: transform; }
.drift-wall__tile {
  position: relative;
  display: block;
  width: 100%;
  height: calc(var(--dw-tile-h) + var(--dw-gap));
  flex: 0 0 auto;
}
.drift-wall__inner {
  position: absolute;
  inset: calc(var(--dw-gap) / 2);
  border-radius: 14px;
  overflow: hidden;
  background: var(--dw-tile-bg);
  opacity: var(--dw-dim);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .55);
}
.drift-wall__inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.9);
  user-select: none;
}
.drift-wall__overlay {
  position: absolute;
  inset: 0;
  background: var(--dw-overlay);
  opacity: var(--dw-overlay-a);
}
.drift-wall__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 50% at 50% 40%, var(--dw-glow), transparent 70%);
}
@media (prefers-reduced-motion: reduce) {
  .drift-wall__plane, .drift-wall__track { will-change: auto; }
}

/* Logos clients (sous la notation) */
.clients { margin-top: clamp(16px, 4vh, 38px); }
.clients-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted-2);
}
/* Bande de logos défilante (voir logo-loop.js) */
.logoloop {
  position: relative;
  margin-top: 16px;
  overflow: hidden;
  --ll-gap: 10px;
  --ll-plate-w: 116px;
  --ll-plate-h: 48px;
  --ll-logo-h: 28px;
  --ll-logo-w: 92px;
  --ll-fade-w: clamp(32px, 12%, 140px);
}
/* fondu par masque de transparence : le fond du hero est animé (Drift Wall),
   un dégradé de couleur opaque y laisserait une bande visible */
.logoloop--fade {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--ll-fade-w), #000 calc(100% - var(--ll-fade-w)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--ll-fade-w), #000 calc(100% - var(--ll-fade-w)), transparent 100%);
}
.logoloop__track {
  display: flex;
  width: max-content;
  will-change: transform;
  user-select: none;
}
.logoloop__list { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.logoloop__item { flex: 0 0 auto; margin-right: var(--ll-gap); line-height: 1; }
.logoloop__plate {
  display: grid;
  place-items: center;
  width: var(--ll-plate-w);
  height: var(--ll-plate-h);
  padding: 10px 12px;
  border-radius: 11px;
  background: #fff;
  border: 1px solid var(--bd-2);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .10);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
/* hauteur fixe + largeur plafonnée : rend les logos optiquement homogènes
   malgré des proportions très différentes (BVLGARI 10:1 vs Quick 0.8:1) */
.logoloop__plate img {
  height: var(--ll-logo-h);
  max-width: var(--ll-logo-w);
  width: auto;
  object-fit: contain;
  display: block;
  pointer-events: none;
}
.logoloop--scale-hover .logoloop__item:hover .logoloop__plate { transform: scale(1.07); }
@media (prefers-reduced-motion: reduce) {
  .logoloop__track { transform: translate3d(0, 0, 0) !important; }
  .logoloop__plate { transition: none !important; }
}

/* le visuel « en diffusion » vit désormais dans sa propre section, sous IADisplay */
.hero-visual-section { padding: 0 0 96px; }
.hero-visual-wrap {
  position: relative;
  width: min(1180px, calc(100% - 40px));
  margin: 64px auto 0;
}
.hero-visual {
  position: relative;
  border: 1px solid var(--bd-2);
  border-radius: 28px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.hero-visual video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.hero-visual-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 9, 13, .92) 4%, rgba(8, 9, 13, .20) 48%, transparent);
}
.hero-chips {
  position: absolute;
  left: 28px;
  bottom: 28px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chip {
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(12, 14, 20, .78);
  backdrop-filter: blur(8px);
  font-size: .78rem;
  font-weight: 600;
  color: var(--on-media);
}
.hero-live {
  position: absolute;
  right: 28px;
  top: 28px;
  min-width: 170px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  background: rgba(12, 14, 20, .82);
  backdrop-filter: blur(10px);
}
.hero-live-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "IBM Plex Mono", monospace;
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--on-media-dim);
}
.hero-live-value {
  margin-top: 8px;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--on-media);
}
.hero-live-meta { margin-top: 2px; color: var(--on-media-dim); font-size: .76rem; line-height: 1.35; }
.hero-live-site { color: var(--on-media); font-weight: 600; }

/* ---------- 8. Grilles ---------- */
.grid-two {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 62px;
  align-items: center;
}
.grid-two-sw { grid-template-columns: 0.9fr 1.1fr; }
.grid-two-contact { grid-template-columns: 0.85fr 1.15fr; align-items: start; }
.grid-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.card {
  border: 1px solid var(--bd-2);
  border-radius: 20px;
  background: var(--surface);
  padding: 28px 24px;
}
.card p { color: var(--muted); font-size: .94rem; }
.steps { margin-top: 44px; }
.step-n {
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--accent-2);
}

/* ---------- 9. Panneau « problème » ---------- */
.panel {
  border: 1px solid var(--bd-2);
  border-radius: 22px;
  background: var(--surface);
  padding: 26px;
  box-shadow: var(--shadow-md);
}
.panel-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: .66rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted-3);
  margin-bottom: 14px;
}
.stale-list { display: grid; gap: 9px; }
.stale-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--bd-1);
  border-radius: 12px;
  background: var(--surface-2);
}
.stale-ico {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--fill-2);
  display: grid;
  place-items: center;
  font-size: .95rem;
}
.stale-txt { flex: 1; min-width: 0; }
.stale-txt strong { display: block; font-size: .92rem; font-weight: 600; color: var(--text-2); }
.stale-txt small { display: block; font-size: .78rem; color: var(--muted-3); }
.badge-bad {
  flex: none;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--bad-soft);
  color: var(--bad);
  font-size: .7rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- 10. Cartes média (bento + galerie) ---------- */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gallery {
  display: grid;
  grid-template-columns: 1.1fr 0.95fr 0.95fr;
  grid-auto-rows: 270px;
  gap: 16px;
}

.media-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--bd-2);
  border-radius: 22px;
  min-height: 270px;
  transition: border-color .2s ease;
}
.media-card:hover { border-color: var(--accent-bd-strong); }
.media-card-wide { grid-column: span 2; }
.bento .media-card-wide { min-height: 340px; }
.media-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gallery .media-card > img { position: static; }
.media-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 9, 13, .95) 8%, rgba(8, 9, 13, .28) 58%, transparent);
}
.media-body { position: absolute; left: 22px; right: 22px; bottom: 20px; }
.media-card-wide .media-body { left: 26px; right: 26px; bottom: 24px; }
.media-eyebrow {
  font-family: "IBM Plex Mono", monospace;
  font-size: .66rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--on-media-accent);
}
.media-title {
  margin: 8px 0 6px;
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--on-media);
}
.media-title-lg {
  margin: 9px 0 7px;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--on-media);
}
.media-text { color: var(--on-media-dim); font-size: .88rem; max-width: 460px; }
.media-card-wide .media-text { font-size: .95rem; }

/* ---------- 11. Fenêtre applicative ---------- */
.app-window {
  border: 1px solid var(--bd-2);
  border-radius: 20px;
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow-lg);
}
.app-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--bd-1);
  background: var(--surface);
}
.app-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dot); }
.app-url {
  margin-left: 10px;
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem;
  color: var(--muted-4);
}
.app-body { padding: 18px; }
.app-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.app-stat {
  padding: 14px;
  border: 1px solid var(--bd-1);
  border-radius: 12px;
  background: var(--surface);
}
.app-stat span {
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-size: .6rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted-4);
}
.app-stat strong { display: block; margin-top: 5px; font-size: 1.3rem; font-weight: 800; letter-spacing: -.03em; }
.app-main { display: grid; grid-template-columns: 1.3fr .7fr; gap: 12px; }
.app-box {
  padding: 16px;
  border: 1px solid var(--bd-1);
  border-radius: 14px;
  background: var(--surface);
}
.app-box-title { font-size: .86rem; font-weight: 700; color: var(--text-2); }
.chart { height: 132px; display: flex; align-items: flex-end; gap: 7px; margin-top: 16px; }
.chart span {
  flex: 1;
  border-radius: 5px;
  background: linear-gradient(180deg, var(--bar-a), var(--bar-b));
}
.chart .bar-ok { background: linear-gradient(180deg, var(--bar-ok-a), var(--bar-ok-b)); }
.app-rows { display: grid; gap: 9px; margin-top: 14px; }
.app-row {
  height: 26px;
  border-radius: 7px;
  background: linear-gradient(90deg, var(--accent-bd-strong) var(--fill), var(--fill-2) var(--fill));
}
.app-row-ok { background: linear-gradient(90deg, var(--ok-bd) var(--fill), var(--fill-2) var(--fill)); }

/* ---------- 12. Chiffres ---------- */
.stats-band {
  padding: 78px 0;
  border-top: 1px solid var(--bd-1);
  border-bottom: 1px solid var(--bd-1);
}
.stats-band .grid-three { gap: 24px; }
.stat { text-align: center; }
.stat-value {
  font-size: clamp(3.4rem, 6vw, 5.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.05em;
  background: linear-gradient(160deg, var(--stat-a), var(--stat-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-label {
  margin-top: 12px;
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted-3);
}
.stat p { margin: 8px auto 0; max-width: 280px; color: var(--muted); font-size: .9rem; }

/* ---------- 13. Tarifs ---------- */
.pricing { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: stretch; }
.price-card {
  position: relative;
  padding: 26px 22px;
  border: 1px solid var(--bd-2);
  border-radius: 20px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
}
.price-card-featured {
  border-color: var(--feat-bd);
  background: var(--feat-bg);
  box-shadow: var(--feat-shadow);
}
.price-badge {
  position: absolute;
  top: -11px;
  left: 22px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
}
.price-type {
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.price-range { margin-top: 8px; font-size: 1.02rem; font-weight: 700; color: var(--text-2); }
.price-desc { min-height: 46px; margin-top: 6px; color: var(--muted-2); font-size: .86rem; }
.price-value { margin: 18px 0 3px; font-size: 2.3rem; font-weight: 800; letter-spacing: -.05em; }
.price-value-sm { font-size: 1.9rem; }
.price-value span { color: var(--muted-2); font-size: .8rem; font-weight: 600; letter-spacing: 0; }
.price-sub { color: var(--muted-4); font-size: .74rem; }
.price-list { list-style: none; display: grid; gap: 9px; margin: 20px 0 22px; flex: 1; }
.price-list li { display: flex; gap: 9px; color: var(--text-4); font-size: .86rem; }
.price-list .tick { margin-top: 2px; }

/* ---------- 14. Témoignages ---------- */
/* ---------- Bandeau d'avis défilant ----------
   La liste est rendue deux fois et la piste se décale d'exactement la moitié de
   sa largeur : la boucle est invisible. Le décalage de 8 px compense la
   demi-gouttière située au milieu de la piste doublée. */
@keyframes fd-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 8px)); }
}
.fd-marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 clamp(32px, 7%, 120px), #000 calc(100% - clamp(32px, 7%, 120px)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 clamp(32px, 7%, 120px), #000 calc(100% - clamp(32px, 7%, 120px)), transparent 100%);
}
.fd-marquee-track {
  display: flex;
  width: max-content;
  gap: 16px;
  animation: fd-marquee 64s linear infinite;
  will-change: transform;
}
.fd-marquee:hover .fd-marquee-track { animation-play-state: paused; }
.fd-marquee .quote { flex: 0 0 auto; width: 372px; }
@media (prefers-reduced-motion: reduce) {
  .fd-marquee-track { animation: none; }
}

.quote {
  border: 1px solid var(--bd-2);
  border-radius: 20px;
  background: var(--surface);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
}
.quote .stars { font-size: .9rem; }
.quote blockquote { margin: 14px 0 0; color: var(--text-3); font-size: 1rem; flex: 1; }
.quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.avatar {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: grid;
  place-items: center;
  font-size: .88rem;
  font-weight: 800;
  color: #fff;
}
.quote figcaption strong { display: block; font-size: .92rem; font-weight: 700; color: var(--text); }
.quote figcaption small { display: block; font-size: .8rem; color: var(--muted-3); }

/* ---------- 15. Panneau installation ---------- */
.split-panel {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  border: 1px solid var(--bd-2);
  border-radius: 26px;
  overflow: hidden;
  background: var(--surface);
}
.split-media { position: relative; min-height: 460px; }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 9, 13, .25), rgba(8, 9, 13, .75));
}
.split-body {
  padding: clamp(34px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ---------- 16. Contact ---------- */
.contact-info { display: grid; gap: 9px; margin-top: 26px; font-size: .95rem; color: var(--muted); }
.contact-info a { color: var(--accent-2); }
.contact-info a:hover { color: var(--accent-2-hover); }

.form-card {
  border: 1px solid var(--bd-2);
  border-radius: 22px;
  background: var(--surface);
  padding: 30px;
}
.form-card form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-card label {
  display: grid;
  gap: 7px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-4);
}
.form-card .full { grid-column: 1 / -1; }
.form-card input,
.form-card select,
.form-card textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--bd-3);
  border-radius: 11px;
  background: var(--surface-2);
  color: var(--text);
  font-weight: 400;
  outline: none;
}
.form-card textarea { min-height: 120px; resize: vertical; }
.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus { border-color: var(--accent-2); }
.form-status {
  padding: 12px 14px;
  border: 1px solid var(--ok-bd);
  border-radius: 11px;
  background: var(--ok-soft);
  color: var(--ok);
  font-size: .86rem;
  font-weight: 600;
}
.form-status[hidden] { display: none; }
.form-note { color: var(--muted-4); font-size: .76rem; }
.form-card .btn-block { min-height: 52px; font-size: 1rem; margin-top: 0; }

/* ---------- 17. FAQ ---------- */
.faq { display: grid; gap: 10px; }
.faq-item {
  border: 1px solid var(--bd-2);
  border-radius: 16px;
  background: var(--surface);
  overflow: hidden;
}
.faq-q {
  width: 100%;
  padding: 20px 22px;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
.faq-sign {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-2);
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  font-weight: 400;
}
.faq-a { padding: 0 22px 20px; color: var(--muted); }
.faq-a[hidden] { display: none; }

/* ---------- 18. CTA final ---------- */
.final-cta {
  position: relative;
  overflow: hidden;
  padding: 104px 0;
  border-top: 1px solid var(--bd-1);
}
.final-halo {
  position: absolute;
  inset: 0;
  background: radial-gradient(65% 85% at 50% 110%, var(--halo-3), transparent 62%);
}
.container-cta { position: relative; }
.container-cta .lead { max-width: 520px; margin-inline: auto; font-size: 1.08rem; }
.final-points {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: center;
  margin-top: 24px;
  color: var(--muted-3);
  font-size: .88rem;
}
.final-points span { display: flex; gap: 8px; align-items: center; }
.final-points .tick { margin-top: 0; }

/* ---------- 19. Footer ---------- */
.site-footer {
  padding: 56px 0 26px;
  border-top: 1px solid var(--bd-1);
  background: var(--footer-bg);
  color: var(--muted-3);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.75fr 0.75fr 0.95fr;
  gap: 34px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--bd-1);
}
.site-footer .logo { color: var(--text); }
.site-footer .logo-mark { color: var(--text); }
.footer-about { max-width: 330px; margin-top: 16px; font-size: .92rem; }
.footer-social { margin-top: 22px; gap: 9px; }
/* Badge French Tech, bas de la colonne Contact : pastille sombre en thème sombre,
   claire en thème clair — avec la variante de logo à texte foncé correspondante. */
.ft-badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  padding: 12px 18px;
  border-radius: 12px;
  background: #0b0f18;
  border: 1px solid rgba(255, 255, 255, .10);
}
.ft-badge-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: .62rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #8b93a5;
}
.ft-badge-sep { width: 1px; height: 30px; background: rgba(255, 255, 255, .14); flex: none; }
.ft-logo { width: auto; height: 52px; flex: none; }
.ft-logo-light { display: none; }
[data-theme="light"] .ft-badge {
  background: #ffffff;
  border-color: rgba(11, 18, 32, .12);
}
[data-theme="light"] .ft-badge-label { color: #64748b; }
[data-theme="light"] .ft-badge-sep { background: rgba(11, 18, 32, .14); }
[data-theme="light"] .ft-logo-light { display: block; }
[data-theme="light"] .ft-logo-dark { display: none; }

.footer-title {
  margin-bottom: 14px;
  color: var(--text);
  font-family: "IBM Plex Mono", monospace;
  font-size: .7rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.footer-links { display: grid; gap: 10px; font-size: .92rem; }
.footer-links a:hover { color: var(--text); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 20px;
  flex-wrap: wrap;
  font-size: .82rem;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-legal a:hover { color: var(--text); }

/* =========================================================
   20. Responsive
   ========================================================= */

/* ---- Tablette / petit portable : ≤ 1120px ---- */
@media (max-width: 1120px) {
  .nav-desktop,
  .header-cta { display: none; }
  .menu-btn { display: flex; }

  .grid-two,
  .grid-two-sw,
  .grid-two-contact { grid-template-columns: 1fr; gap: 44px; }

  .pricing { grid-template-columns: repeat(2, 1fr); }
  .split-panel { grid-template-columns: 1fr; }
  .split-media { min-height: 320px; }
}

/* ---- Tablette portrait / grand mobile : ≤ 900px ---- */
@media (max-width: 900px) {
  .topbar-follow { display: none; }
  .topbar-support { display: none; }

  .section { padding: 70px 0; }
  .hero { padding: clamp(16px, 3.5vh, 32px) 0; }
  .hero-title { font-size: min(clamp(3.2rem, 9vw, 4.4rem), 14vh); max-width: 100%; }
  .logoloop { --ll-plate-w: 104px; --ll-logo-w: 80px; }

  .h2 { font-size: clamp(2.1rem, 5.5vw, 2.8rem); }

  .grid-three,
  .bento { grid-template-columns: repeat(2, 1fr); }
  .fd-marquee .quote { width: 330px; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .media-card-wide { grid-column: auto; }
  .bento .media-card-wide { min-height: 270px; }
}

/* ---- Mobile : ≤ 680px ---- */
@media (max-width: 680px) {
  /* l'adresse e-mail sauterait sur deux lignes : on ne garde que l'icône */
  .topbar-row { min-height: 40px; padding: 7px 0; }
  .topbar-contact { gap: 14px; }
  .topbar-link { font-size: .78rem; }
  .topbar-mail { display: none; }
  /* le panneau occupe presque tout l'écran, ancré au-dessus de la bulle */
  .bot { right: 14px; bottom: 14px; }
  .bot-panel { width: calc(100vw - 28px); max-width: 380px; height: min(70vh, 520px); }
  .bot-fab { width: 54px; height: 54px; }
  .bot-title { font-size: 1.28rem; }
  /* la vidéo ne fait qu'environ 190 px de haut : les tags passent sous elle,
     hors du cadre et de son dégradé sombre */
  .hero-chips {
    position: static;
    padding: 12px 0 0;
    gap: 8px;
  }
  .hero-chips .chip {
    padding: 7px 12px;
    border-color: var(--bd-3);
    background: var(--fill-2);
    backdrop-filter: none;
    font-size: .74rem;
    color: var(--text-4);
  }
  .hero-live { right: 12px; top: 12px; padding: 9px 12px; min-width: 0; max-width: 60%; border-radius: 12px; }
  .hero-live-value { margin-top: 6px; font-size: 1.05rem; }
  .hero-live-meta { font-size: .68rem; line-height: 1.3; }

  .section { padding: 58px 0; }
  .stats-band { padding: 52px 0; }
  .final-cta { padding: 68px 0; }

  .hero { padding: clamp(14px, 3vh, 26px) 0; }
  .hero-title { font-size: min(clamp(2.7rem, 13vw, 3.6rem), 13vh); }
  .hero-sub { font-size: 1rem; }
  .trust-row { gap: 14px; }
  .clients { margin-top: clamp(14px, 3.4vh, 30px); }
  .logoloop { --ll-plate-w: 92px; --ll-plate-h: 40px; --ll-logo-h: 24px; --ll-logo-w: 72px; }
  .drift-wall { --dw-end: 90px; }
  /* le visuel « en diffusion » vit désormais dans sa propre section, sous IADisplay */
.hero-visual-section { padding: 0 0 96px; }
.hero-visual-wrap { margin-top: 42px; }
  .hero-visual { border-radius: 20px; }

  .h2 { font-size: clamp(1.9rem, 7.5vw, 2.3rem); }
  .h3 { font-size: clamp(1.7rem, 6.5vw, 2.1rem); }
  .h2-final { font-size: clamp(2.1rem, 8.5vw, 2.7rem); }
  .stat-value { font-size: clamp(3rem, 14vw, 4rem); }

  .grid-two,
  .grid-two-sw,
  .grid-two-contact { gap: 38px; }
  .grid-three,
  .bento,
  .gallery,
  .pricing { grid-template-columns: 1fr; }
  .stats-band .grid-three { gap: 38px; }
  .fd-marquee .quote { width: 290px; }
  .fd-marquee-track { animation-duration: 46s; }

  .bento .media-card-wide,
  .media-card { min-height: 250px; }

  .panel { padding: 20px; }
  .app-stats { grid-template-columns: repeat(2, 1fr); }
  .app-main { grid-template-columns: 1fr; }
  .app-box-campaigns { display: none; }

  .form-card { padding: 22px; }
  .form-card form { grid-template-columns: 1fr; }

  .split-media { min-height: 240px; }
  .split-body { padding: 30px 24px; }

  .footer-grid { grid-template-columns: 1fr; }
}

/* ---------- 21. Marques compatibles ---------- */
.brands-track { animation-duration: 42s; }
.brand-plate {
  flex: 0 0 auto;
  width: 204px;
  height: 96px;
  padding: 0 18px;
  border: 1px solid var(--bd-2);
  border-radius: 18px;
  background: var(--surface);
  display: grid;
  place-items: center;
}
.brand-plate img {
  max-width: 100%;
  max-height: 46px;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* Les lettrages larges (Samsung, Sony, Philips) ont besoin de plus de place
   que les marques carrées (LG, TCL) pour rester lisibles. */
.brand-plate img[alt="LG"] { max-height: 52px; }
.brand-plate img[alt="TCL"] { max-height: 40px; }
.brand-plate img[alt="Samsung"] { max-height: 30px; }
.brand-plate img[alt="Sony"] { max-height: 26px; }
.brand-plate img[alt="Philips"] { max-height: 30px; }
.brand-plate img[alt="iiyama"] { max-height: 34px; }
.brand-plate img[alt="SimplyTab"] { max-height: 58px; }
@media (max-width: 680px) {
  .brand-plate { width: 160px; height: 82px; }
  .brand-plate img { max-height: 38px; }
  .brand-plate img[alt="LG"] { max-height: 42px; }
  .brand-plate img[alt="TCL"] { max-height: 33px; }
  .brand-plate img[alt="Samsung"] { max-height: 24px; }
  .brand-plate img[alt="Sony"] { max-height: 21px; }
  .brand-plate img[alt="Philips"] { max-height: 24px; }
  .brand-plate img[alt="iiyama"] { max-height: 28px; }
  .brand-plate img[alt="SimplyTab"] { max-height: 46px; }
  .brands-track { animation-duration: 30s; }
}


/* =========================================================
   21. Style « 11 septembre » — positionnement intégrateur
   Sections ajoutées : hero réassurance, message clé, packs,
   parcours, ce qui est inclus, secteurs, configurateur.
   ========================================================= */

/* ---------- Hero ---------- */
.hero-text {
  margin: 18px auto 0;
  max-width: 660px;
  color: var(--muted-2);
  font-size: 1rem;
}
.hero-trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  justify-content: center;
  margin-top: 34px;
}
.hero-trust li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 9px 12px;
  border: 1px solid var(--bd-2);
  border-radius: 999px;
  background: var(--fill-1);
  color: var(--text-4);
  font-size: .88rem;
  font-weight: 600;
}
.hero-trust .tick { margin-top: 0; }

/* ---------- Message clé ---------- */
.key-line {
  margin-top: 26px;
  padding-left: 18px;
  border-left: 3px solid var(--accent-2);
  color: var(--text);
  font-size: 1.24rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.35;
}

.chain-panel {
  border: 1px solid var(--bd-2);
  border-radius: 22px;
  background: var(--surface);
  padding: 28px 26px;
  box-shadow: var(--shadow-md);
}
.chain {
  list-style: none;
  counter-reset: none;
  display: grid;
  gap: 2px;
  margin-top: 6px;
}
.chain li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--bd-1);
  color: var(--text-3);
  font-size: .95rem;
  font-weight: 500;
}
.chain li:last-child { border-bottom: 0; }
.chain-n {
  flex: none;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--accent-2);
}

/* ---------- Cartes solutions : actions ---------- */
.bento .media-card { min-height: 320px; }
.card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 16px;
}
.btn-xs {
  min-height: 38px;
  padding: 0 16px;
  font-size: .84rem;
}
.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--on-media);
  font-size: .86rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, .35);
}
.btn-text:hover { text-decoration-color: currentColor; }
/* Hors carte photo, le lien suit l'encre du thème. */
.sector-card .btn-text,
.more-inner .btn-text { color: var(--accent-2); text-decoration-color: currentColor; }

.situ-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(12, 14, 20, .78);
  backdrop-filter: blur(6px);
  color: var(--on-media);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ---------- Panneau « Découvrir » ---------- */
.more-panel {
  position: relative;
  margin-top: 20px;
  border: 1px solid var(--accent-bd);
  border-radius: 22px;
  background: var(--surface);
  padding: 34px 32px;
  box-shadow: var(--shadow-md);
}
.more-panel[hidden] { display: none; }
.more-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--bd-3);
  border-radius: 11px;
  background: var(--fill-1);
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
}
.more-title {
  max-width: 760px;
  margin: 12px 0 0;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 700;
  line-height: 1.2;
}
.more-list { max-width: 720px; }

/* ---------- Packs ---------- */
.packs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}
.pack-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 26px;
  border: 1px solid var(--bd-2);
  border-radius: 20px;
  background: var(--surface);
}
.pack-card-featured {
  border-color: var(--feat-bd);
  background: var(--feat-bg);
  box-shadow: var(--feat-shadow);
}
.pack-badge {
  position: absolute;
  top: -11px;
  left: 26px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
}
.pack-type {
  font-size: 1.24rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text);
}
.pack-desc {
  margin-top: 7px;
  min-height: 44px;
  color: var(--muted-2);
  font-size: .92rem;
}
.pack-price {
  margin-top: 16px;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -.04em;
}
.pack-list {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 22px 0 26px;
  flex: 1;
}
.pack-list li {
  display: flex;
  gap: 10px;
  color: var(--text-4);
  font-size: .9rem;
}
.pack-list .tick { margin-top: 2px; }
.packs-note {
  margin-top: 22px;
  text-align: center;
  color: var(--muted-3);
  font-size: .86rem;
}

/* ---------- Parcours en 6 étapes ---------- */
.journey {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.journey-step { position: relative; }

/* ---------- Ce qui est inclus ---------- */
.incl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.incl-card {
  padding: 28px 24px;
  border: 1px solid var(--bd-2);
  border-radius: 20px;
  background: var(--surface);
}
.incl-card p { color: var(--muted); font-size: .94rem; }
.incl-ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--accent-bd);
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent-2);
}
.incl-ico svg { width: 24px; height: 24px; }

/* ---------- IADisplay : liste de fonctions ---------- */
.feat-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
  margin-top: 26px;
}
.feat-grid li {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--text-4);
  font-size: .95rem;
}
.feat-grid .tick { margin-top: 0; }
.app-note {
  margin-top: 14px;
  color: var(--muted-4);
  font-size: .74rem;
  text-align: right;
}

/* ---------- Secteurs ---------- */
.sector-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.sector-card {
  padding: 24px 22px;
  border: 1px solid var(--bd-2);
  border-radius: 18px;
  background: var(--surface);
}
.sector-card p { margin-top: 7px; color: var(--muted); font-size: .9rem; }
.sector-title {
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
}
.sector-card-cta {
  border-color: var(--accent-bd);
  background: var(--accent-soft);
}
.sector-card-cta .btn-text { margin-top: 12px; }

/* ---------- Qui sommes-nous ---------- */
.about { text-align: center; }
.about .lead { margin-inline: auto; max-width: 680px; }
.about-brand {
  margin-top: 22px;
  color: var(--muted-3);
  font-family: 'IBM Plex Mono', monospace;
  font-size: .78rem;
  letter-spacing: .05em;
}

/* =========================================================
   22. Configurateur
   ========================================================= */
.cfg-wrap { max-width: 1040px; margin: 0 auto; }
.cfg-shell {
  border: 1px solid var(--bd-2);
  border-radius: 24px;
  background: var(--surface);
  padding: 30px 30px 26px;
  box-shadow: var(--shadow-md);
}

/* Progression */
.cfg-progress { margin-bottom: 26px; }
.cfg-bar {
  height: 4px;
  border-radius: 3px;
  background: var(--fill-3);
  overflow: hidden;
}
.cfg-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .3s ease;
}
.cfg-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 14px;
}
.cfg-dot {
  padding: 6px 12px;
  border: 1px solid var(--bd-2);
  border-radius: 999px;
  background: transparent;
  color: var(--muted-3);
  font-family: 'IBM Plex Mono', monospace;
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.cfg-dot:disabled { opacity: .45; cursor: default; }
.cfg-dot.is-done { color: var(--accent-2); border-color: var(--accent-bd); }
.cfg-dot.is-on {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

/* En-tête d'étape */
.cfg-step-head { margin-bottom: 20px; }
.cfg-step-n {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .7rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.cfg-step-title {
  margin: 10px 0 0;
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.14;
  color: var(--text);
}
.cfg-step-sub { margin-top: 9px; color: var(--muted); font-size: .98rem; }

/* Recommandation */
.cfg-note {
  margin-bottom: 22px;
  padding: 14px 16px;
  border: 1px solid var(--accent-bd);
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--text-4);
  font-size: .92rem;
  line-height: 1.55;
}
.cfg-note strong { color: var(--accent-2); }
.cfg-note-free { color: var(--muted-3); }
.cfg-note-info {
  margin: 18px 0 0;
  border-color: var(--bd-3);
  background: var(--fill-1);
}

/* Libellés de champ */
.cfg-field-label {
  margin: 24px 0 10px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--text-2);
}
.cfg-step-head + .cfg-field-label,
.cfg-note + .cfg-field-label { margin-top: 0; }
.cfg-field-hint {
  margin: -4px 0 12px;
  color: var(--muted-3);
  font-size: .82rem;
}
.cfg-hint-warn { color: var(--accent-2); }

/* Grille de choix */
.cfg-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.cfg-grid-3 { grid-template-columns: repeat(3, 1fr); }
.cfg-choice {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  min-height: 64px;
  padding: 16px 16px;
  border: 1.5px solid var(--bd-2);
  border-radius: 15px;
  background: var(--surface-2);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.cfg-choice:hover { border-color: var(--accent-bd-strong); }
.cfg-choice.is-on {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.cfg-choice-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--bd-2);
  border-radius: 11px;
  background: var(--fill-1);
  color: var(--accent-2);
}
.cfg-choice-ico svg { width: 21px; height: 21px; }
.cfg-choice-body { display: grid; gap: 3px; min-width: 0; }
.cfg-choice-label { font-size: .96rem; font-weight: 700; letter-spacing: -.01em; }
.cfg-choice-hint { color: var(--muted-2); font-size: .82rem; line-height: 1.45; }
.cfg-reco {
  position: absolute;
  top: -9px;
  right: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* Pastilles */
.cfg-pills { display: flex; flex-wrap: wrap; gap: 9px; }
.cfg-pill {
  min-width: 62px;
  min-height: 46px;
  padding: 0 16px;
  border: 1.5px solid var(--bd-2);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.cfg-pill:hover { border-color: var(--accent-bd-strong); }
.cfg-pill.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-2); }
.cfg-pill-wide { font-size: .86rem; font-weight: 600; }

/* Champs de saisie */
.cfg-row { display: grid; grid-template-columns: 180px 1fr; gap: 12px; }
.cfg-input { display: grid; gap: 7px; font-size: .82rem; font-weight: 700; color: var(--text-4); }
.cfg-input input,
.cfg-input textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--bd-3);
  border-radius: 11px;
  background: var(--surface-2);
  color: var(--text);
  font-weight: 400;
  outline: none;
}
.cfg-input textarea { min-height: 90px; resize: vertical; }
.cfg-input input:focus,
.cfg-input textarea:focus { border-color: var(--accent-2); }
.cfg-check {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--text-4);
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
}
.cfg-check input { width: 18px; height: 18px; accent-color: var(--accent); }

/* Récapitulatif */
.cfg-final { display: grid; grid-template-columns: .85fr 1.15fr; gap: 22px; }
.cfg-recap {
  align-self: start;
  padding: 24px 22px;
  border: 1px solid var(--accent-bd);
  border-radius: 18px;
  background: var(--accent-soft);
}
.cfg-recap-head {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .68rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 14px;
}
.cfg-recap-list { display: grid; grid-template-columns: auto 1fr; gap: 9px 14px; }
.cfg-recap-list dt {
  color: var(--muted-2);
  font-size: .8rem;
  white-space: nowrap;
}
.cfg-recap-list dd {
  margin: 0;
  color: var(--text-2);
  font-size: .88rem;
  font-weight: 600;
  text-align: right;
}
.cfg-recap-price {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--bd-2);
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -.04em;
}
.cfg-recap-price span {
  display: block;
  color: var(--muted-3);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: 0;
}
.cfg-recap-note {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--bd-2);
  color: var(--muted-2);
  font-size: .84rem;
  line-height: 1.55;
}

/* Formulaire final */
.cfg-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-content: start;
}
.cfg-input-full { grid-column: 1 / -1; }
.cfg-status {
  padding: 12px 14px;
  border-radius: 11px;
  font-size: .88rem;
  font-weight: 600;
}
.cfg-status[hidden] { display: none; }
.cfg-status-ok { border: 1px solid var(--ok-bd); background: var(--ok-soft); color: var(--ok); }
.cfg-status-err { border: 1px solid rgba(220, 38, 38, .4); background: var(--bad-soft); color: var(--bad); }
.cfg-form-note { color: var(--muted-4); font-size: .76rem; }
.cfg-form .btn-block { margin-top: 0; min-height: 52px; font-size: 1rem; }

/* Récapitulatif replié */
.cfg-mini {
  margin-top: 24px;
  padding: 14px 16px;
  border: 1px solid var(--bd-2);
  border-radius: 13px;
  background: var(--surface-2);
}
.cfg-mini summary {
  cursor: pointer;
  color: var(--text-4);
  font-size: .88rem;
  font-weight: 700;
}
.cfg-mini .cfg-recap-list { margin-top: 14px; }

/* Navigation */
.cfg-nav {
  display: flex;
  gap: 12px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--bd-1);
}
.cfg-next { margin-left: auto; }
.cfg-back:disabled { opacity: .4; cursor: default; }

/* =========================================================
   23. Responsive des sections ajoutées
   ========================================================= */

@media (max-width: 1120px) {
  .sector-grid { grid-template-columns: repeat(3, 1fr); }
  .cfg-final { grid-template-columns: 1fr; }
  .cfg-recap { order: 2; }
}

@media (max-width: 900px) {
  .packs,
  .journey,
  .incl-grid { grid-template-columns: repeat(2, 1fr); }
  .sector-grid { grid-template-columns: repeat(2, 1fr); }
  .bento .media-card { min-height: 300px; }
  .more-panel { padding: 28px 24px; }
  .cfg-shell { padding: 24px 22px 22px; }
  .cfg-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile : une question principale par écran, cibles tactiles larges. */
@media (max-width: 680px) {
  .hero-text { font-size: .95rem; }
  .hero-trust { gap: 9px; margin-top: 26px; }
  .hero-trust li { font-size: .82rem; padding: 8px 13px 8px 10px; }

  .key-line { font-size: 1.1rem; }
  .chain-panel { padding: 22px 20px; }

  .packs,
  .journey,
  .incl-grid,
  .sector-grid { grid-template-columns: 1fr; }

  .bento .media-card { min-height: 290px; }
  .card-actions { gap: 10px 14px; }

  .more-panel { padding: 24px 20px; border-radius: 18px; }
  .more-close { top: 12px; right: 12px; }

  .feat-grid { grid-template-columns: 1fr; }
  .app-note { text-align: left; }

  .cfg-wrap { width: 100%; }
  .cfg-shell {
    padding: 20px 16px 18px;
    border-radius: 18px;
  }
  /* Les libellés d'étapes prennent trop de place : la barre suffit. */
  .cfg-steps { display: none; }

  .cfg-grid,
  .cfg-grid-3 { grid-template-columns: 1fr; }
  .cfg-choice { min-height: 62px; padding: 14px; }
  .cfg-reco { right: 10px; }

  .cfg-pill { min-height: 50px; flex: 1 0 auto; }
  .cfg-pill-wide { flex-basis: 100%; }

  .cfg-row { grid-template-columns: 1fr; }
  .cfg-form { grid-template-columns: 1fr; }

  .cfg-recap-list { grid-template-columns: 1fr; gap: 2px 0; }
  .cfg-recap-list dd { text-align: left; margin-bottom: 8px; }

  .cfg-nav { position: sticky; bottom: 0; }
  .cfg-nav .btn { flex: 1; min-height: 50px; padding: 0 14px; }
  .cfg-next { margin-left: 0; }
}


/* =========================================================
   24. Corrections responsive vérifiées sur appareils réels
   Testé à 360, 390, 768, 1024 et 1440 px.
   ========================================================= */

/* Pied de page : 4 colonnes deviennent illisibles sous 1120 px.
   Plage bornée à la tablette : sous 680 px, la règle mobile
   (une seule colonne) doit rester gagnante. */
@media (min-width: 681px) and (max-width: 1120px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* Cibles tactiles : sur écran tactile, toute zone cliquable atteint 44 px.
   Ciblé sur le type de pointeur plutôt que sur la largeur, pour couvrir
   aussi les tablettes larges et les portables tactiles. */
@media (pointer: coarse) {
  .social-btn { width: 44px; height: 44px; }
  .btn-xs { min-height: 44px; padding: 0 18px; }
  .btn-text {
    min-height: 44px;
    padding: 10px 2px;
    align-items: center;
  }
  .topbar-support { min-height: 44px; }
  .topbar-link { min-height: 44px; align-items: center; }
  .cfg-dot { min-height: 44px; padding: 0 14px; }
  .faq-q { min-height: 56px; }
  .footer-links a { min-height: 40px; display: inline-flex; align-items: center; }
  .nav-desktop a,
  .mobile-menu > a:not(.btn) { min-height: 48px; display: flex; align-items: center; }
}

/* Même garantie sur les petites largeurs, y compris en simulation
   sur navigateur de bureau (outils de développement, aperçus). */
@media (max-width: 900px) {
  .social-btn { width: 44px; height: 44px; }
  .btn-xs { min-height: 44px; padding: 0 18px; }
  .btn-text { min-height: 44px; padding: 10px 2px; align-items: center; }
  .topbar-support,
  .topbar-link { min-height: 44px; align-items: center; }
  .cfg-dot { min-height: 44px; padding: 0 14px; }
  .faq-q { min-height: 56px; }
}


/* =========================================================
   25. Bandeau de consentement
   Refus aussi accessible que l'acceptation : même taille,
   même emplacement, aucun contraste trompeur.
   ========================================================= */
.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;
  transform: translateY(110%);
  transition: transform .32s cubic-bezier(.22, .61, .36, 1);
  background: var(--surface);
  border-top: 1px solid var(--bd-3);
  box-shadow: 0 -20px 60px rgba(0, 0, 0, .35);
}
.consent.is-on { transform: none; }
.consent-inner {
  width: min(1280px, calc(100% - 40px));
  margin-inline: auto;
  padding: 20px 0;
  display: flex;
  align-items: center;
  gap: 28px;
}
.consent-text strong {
  display: block;
  font-size: .98rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 5px;
}
.consent-text p {
  max-width: 720px;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.55;
}
.consent-text a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
.consent-actions {
  display: flex;
  gap: 10px;
  margin-left: auto;
  flex: none;
}
.consent-actions .btn { min-height: 46px; padding: 0 22px; font-size: .92rem; }

@media (max-width: 780px) {
  .consent-inner { flex-direction: column; align-items: stretch; gap: 16px; padding: 18px 0; }
  .consent-actions { margin-left: 0; }
  .consent-actions .btn { flex: 1; }
}

/* =========================================================
   26. Pages légales
   ========================================================= */
.legal-page { padding: 54px 0 80px; }
.legal-crumb {
  margin-bottom: 26px;
  color: var(--muted-3);
  font-family: 'IBM Plex Mono', monospace;
  font-size: .74rem;
  letter-spacing: .04em;
}
.legal-crumb a { color: var(--accent-2); }
.legal-page h1 { margin-bottom: 10px; }
.legal-page h2 {
  margin: 42px 0 12px;
  padding-top: 22px;
  border-top: 1px solid var(--bd-1);
}
.legal-h3 {
  margin: 24px 0 8px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-2);
}
.legal-page p,
.legal-page li { color: var(--muted); font-size: .98rem; line-height: 1.7; }
.legal-page p { margin-bottom: 12px; }
.legal-page a { color: var(--accent-2); }
.legal-updated {
  color: var(--muted-3);
  font-family: 'IBM Plex Mono', monospace;
  font-size: .78rem;
}
.legal-warn {
  margin: 24px 0 8px;
  padding: 16px 18px;
  border: 1px solid var(--accent-bd);
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--text-4);
  font-size: .92rem;
  line-height: 1.6;
}
.legal-warn strong { color: var(--accent-2); }

/* Champ restant à renseigner : visible sans être criard. */
.legal-todo {
  display: inline-block;
  padding: 2px 9px;
  border: 1px dashed var(--accent-bd-strong);
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent-2);
  font-size: .86rem;
  font-weight: 600;
}
.legal-dl {
  display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr;
  gap: 10px 22px;
  margin: 14px 0 18px;
}
.legal-dl dt { color: var(--text-4); font-size: .9rem; font-weight: 700; }
.legal-dl dd { margin: 0; color: var(--muted); font-size: .95rem; }
.legal-ul { margin: 8px 0 16px 20px; display: grid; gap: 6px; }
.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0 20px;
  font-size: .92rem;
}
.legal-table th,
.legal-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--bd-1);
  text-align: left;
  vertical-align: top;
}
.legal-table th {
  color: var(--text-2);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.legal-table td { color: var(--muted); }
.legal-table code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .84rem;
  color: var(--text-3);
}

@media (max-width: 680px) {
  .legal-dl { grid-template-columns: 1fr; gap: 3px 0; }
  .legal-dl dd { margin-bottom: 12px; }
  .legal-table { font-size: .86rem; }
  .legal-table th, .legal-table td { padding: 9px 8px; }
}

/* =========================================================
   27. Configurateur — tailles, schéma coté, échelle
   ========================================================= */
.cfg-sizes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 10px;
}
.cfg-size {
  display: grid;
  gap: 2px;
  padding: 14px 12px;
  min-height: 84px;
  border: 1.5px solid var(--bd-2);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.cfg-size:hover { border-color: var(--accent-bd-strong); }
.cfg-size.is-on { border-color: var(--accent); background: var(--accent-soft); }
.cfg-size-in {
  font-size: 1.34rem;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
}
/* La diagonale en centimètres est l'information la plus utile au client. */
.cfg-size-cm {
  color: var(--accent-2);
  font-size: .86rem;
  font-weight: 700;
}
.cfg-size-use {
  color: var(--muted-3);
  font-size: .72rem;
  line-height: 1.3;
}
.cfg-size-custom .cfg-size-in { color: var(--muted-3); }

.cfg-size-advice {
  margin-top: 14px;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.6;
}
.cfg-size-advice strong { color: var(--text-2); }

/* Schéma coté */
.cfg-schema {
  margin-top: 20px;
  padding: 20px 20px 16px;
  border: 1px solid var(--bd-2);
  border-radius: 16px;
  background: var(--surface-2);
}
.cfg-schema-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-bottom: 12px;
}
.cfg-schema-head strong { font-size: 1rem; font-weight: 700; color: var(--text); }
.cfg-schema-head span {
  color: var(--muted-2);
  font-family: 'IBM Plex Mono', monospace;
  font-size: .78rem;
}
.cfg-schema svg {
  width: 100%;
  max-width: 460px;
  height: auto;
  max-height: 250px;
  display: block;
  margin-inline: auto;
}
.cfg-schema-note {
  margin-top: 10px;
  color: var(--muted-4);
  font-size: .74rem;
  line-height: 1.5;
}
.dim-screen { fill: var(--accent-soft); stroke: var(--accent-2); stroke-width: 1.6; }
.dim-diag { stroke: var(--accent-2); stroke-width: 1.1; stroke-dasharray: 4 3; }
.dim-arrow { stroke: var(--muted-3); stroke-width: 1.1; }
.dim-floor { stroke: var(--bd-4); stroke-width: 1; stroke-dasharray: 3 4; }
.dim-human { fill: var(--fill-3); }
.dim-t {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  fill: var(--muted-2);
  text-anchor: middle;
}
.dim-t-accent { fill: var(--accent-2); font-weight: 700; }
.dim-t-mid { fill: var(--text-4); }
.dim-t-soft { fill: var(--muted-3); font-size: 9.5px; }

/* Comparaison des tailles */
.cfg-compare {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--bd-2);
  border-radius: 13px;
  background: var(--surface-2);
}
.cfg-compare summary {
  cursor: pointer;
  color: var(--text-4);
  font-size: .88rem;
  font-weight: 700;
}
.cfg-compare-row { display: grid; gap: 10px; margin-top: 16px; }
.cfg-compare-item { display: grid; gap: 5px; }
.cfg-compare-box {
  height: 22px;
  border: 1px solid var(--bd-3);
  border-radius: 4px;
  background: var(--fill-2);
}
.cfg-compare-item.is-on .cfg-compare-box {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.cfg-compare-label {
  color: var(--muted-2);
  font-family: 'IBM Plex Mono', monospace;
  font-size: .72rem;
}
.cfg-compare-item.is-on .cfg-compare-label { color: var(--accent-2); }
.cfg-compare-note { margin-top: 12px; color: var(--muted-4); font-size: .72rem; }

/* =========================================================
   28. Mise en situation (remplace le tableau de bord)
   ========================================================= */
.situ { margin: 0; }
.situ-scene {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--bd-2);
  border-radius: 22px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

/* Placeholder explicite : ratio et dimensions définitifs, pour que la
   photo commandée s'insère sans retoucher la mise en page. */
.situ-ph {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 6px;
  padding-top: 18px;
  background:
    repeating-linear-gradient(135deg, var(--fill-1) 0 14px, transparent 14px 28px),
    var(--surface-2);
  text-align: center;
  padding: 20px;
}
.situ-ph-label {
  color: var(--muted-2);
  font-family: 'IBM Plex Mono', monospace;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.situ-ph-spec { color: var(--muted-4); font-size: .76rem; }

.situ-screen {
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
  height: 66%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.situ-bezel {
  position: relative;
  flex: 1;
  aspect-ratio: 9 / 16;
  padding: 4px;
  border-radius: 8px;
  background: #0a0c12;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .10);
}
.situ-slides { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 4px; }
.situ-slide {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
  padding: 10px;
  text-align: center;
  opacity: 0;
}
.situ-kind {
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.situ-ph-mini {
  color: rgba(255, 255, 255, .62);
  font-family: 'IBM Plex Mono', monospace;
  font-size: .58rem;
  letter-spacing: .04em;
}
/* Aplats sobres aux couleurs de la marque : aucun faux contenu de marque. */
.situ-s1 { background: linear-gradient(155deg, #1258ff, #0b2f8a); opacity: 1; }
.situ-s2 { background: linear-gradient(155deg, #123b7a, #0a1830); }
.situ-s3 { background: linear-gradient(155deg, #2b4fa8, #12224a); }
.situ-s4 { background: linear-gradient(155deg, #0e1a38, #1258ff); }

/* Le contenu change tout seul : c'est la définition de l'affichage
   dynamique, autant la montrer. 4 vues, 4 s chacune. */
.situ-slide { animation: situCycle 16s infinite; }
.situ-s1 { animation-delay: 0s; }
.situ-s2 { animation-delay: 4s; }
.situ-s3 { animation-delay: 8s; }
.situ-s4 { animation-delay: 12s; }
@keyframes situCycle {
  0%, 23%  { opacity: 1; }
  27%, 96% { opacity: 0; }
  100%     { opacity: 1; }
}

.situ-tag {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(12, 14, 20, .82);
  backdrop-filter: blur(8px);
  color: var(--on-media);
  font-size: .78rem;
  font-weight: 600;
}
.situ-cap {
  margin-top: 12px;
  color: var(--muted-3);
  font-size: .78rem;
  line-height: 1.5;
}

@media (max-width: 680px) {
  .situ-screen { height: 60%; }
  .situ-tag { left: 12px; bottom: 12px; font-size: .72rem; padding: 8px 11px; }
}

/* Accessibilité : le contenu reste lisible sans animation.
   La première vue est déjà visible à l'état de base : il suffit de
   couper l'animation. */
@media (prefers-reduced-motion: reduce) {
  .situ-slide { animation: none; }
  .consent { transition: none; }
}


/* =========================================================
   29. Direction artistique — rythme et respiration
   Chaque grande section change de gabarit, de fond ou de
   largeur de conteneur. Un seul vocabulaire d'animation,
   piloté par motion.js.
   ========================================================= */

/* ---------- Largeurs de conteneur variables ---------- */
.container-wide  { width: min(1440px, calc(100% - 40px)); margin-inline: auto; }
.container-tight { width: min(760px,  calc(100% - 40px)); margin-inline: auto; }

/* ---------- Respiration ---------- */
.section { padding: 116px 0; }
.sec-head { max-width: 640px; margin-bottom: 56px; }
.sec-head-wide { max-width: 820px; }
.sec-head-split {
  max-width: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
  flex-wrap: wrap;
}
.lead-wide { max-width: 620px; }

/* Titres de section plus grands : la hiérarchie porte le premium. */
.h1-like {
  margin: 14px 0 20px;
  font-size: clamp(2.6rem, 4.6vw, 4.1rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.045em;
  text-wrap: balance;
}

/* ---------- Bandeaux sombres : alternance des fonds ----------
   Valeurs figées et non issues des variables de thème : la section
   reste sombre même en thème clair, comme dans la brochure. ---------- */
.sec-dark {
  position: relative;
  background: #08090d;
  color: #f4f5f8;
}
.sec-dark .h1-like,
.sec-dark .tl-title { color: #fff; }
.sec-dark .lead,
.sec-dark .tl-text { color: #9aa1b2; }
.sec-dark .eyebrow { color: #7d8395; }
.sec-dark .eyebrow-accent { color: #6f9bff; }
.sec-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(58% 46% at 78% 4%, rgba(18, 88, 255, .20), transparent 62%);
}
.sec-dark > * { position: relative; }

/* ---------- Zoom très léger (motion.js) ---------- */
[data-zoom] {
  transition: transform 1.6s cubic-bezier(.22, .61, .36, 1);
  transform: scale(1.02);
}
[data-zoom].is-zoomed { transform: scale(1.07); }



/* =========================================================
   39. Homepage v2 — direction photographique
   Principes : beaucoup de blanc, grands titres, paragraphes
   bornés, alternance photo / texte / air. Moins de cartes.
   Aucune animation de fond, aucune parallaxe, aucun carrousel
   automatique : le mouvement se limite à l'apparition au scroll
   et aux survols.
   ========================================================= */

/* ---------- Respiration générale ---------- */
.section { padding: 128px 0; }
.sec-head { max-width: 780px; margin-bottom: 60px; }
.sec-head-center { max-width: 860px; margin-inline: auto; text-align: center; }
.lead-center { margin-inline: auto; }
.lead { max-width: 620px; font-size: 1.08rem; line-height: 1.7; }
.lead-wide { max-width: 680px; }

.h1-like {
  margin: 16px 0 22px;
  font-size: clamp(2.5rem, 4.4vw, 3.9rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.042em;
  text-wrap: balance;
}
.h2-edito {
  margin: 14px 0 20px;
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.04em;
  text-wrap: balance;
}
/* Sur-titre : c'est lui qui porte « affichage dynamique professionnel »
   au-dessus du H1, pour le référencement comme pour la lecture. */
.hero-over {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-2);
}

/* =========================================================
   40. Emplacements photo
   Un fichier manquant ne casse pas la mise en page : le cadre
   garde son ratio et affiche le nom du fichier attendu.
   ========================================================= */
.ph {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--surface);
}
.ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ph-note { display: none; }
.ph.is-missing {
  background:
    repeating-linear-gradient(135deg, var(--fill-1) 0 13px, transparent 13px 26px),
    var(--surface);
  border: 1px dashed var(--bd-4);
}
.ph.is-missing img { opacity: 0; }
.ph.is-missing .ph-note {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 7px;
  padding: 18px;
  text-align: center;
}
.ph-l {
  color: var(--muted-2);
  font-family: 'IBM Plex Mono', monospace;
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.ph-file {
  padding: 4px 11px;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent-2);
  font-family: 'IBM Plex Mono', monospace;
  font-size: .74rem;
}
.ph-cover { height: 100%; }

/* =========================================================
   41. Hero — stable, deux colonnes
   ========================================================= */
.hero-v2 {
  padding: 72px 0 96px;
  border-bottom: 1px solid var(--bd-1);
}
.hero-v2-grid {
  width: min(1340px, calc(100% - 40px));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 47fr 53fr;
  gap: 60px;
  align-items: center;
}
.hero-v2-title {
  margin: 20px 0 0;
  font-size: clamp(2.6rem, 4.2vw, 4rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.hero-v2-sub {
  margin: 26px 0 0;
  max-width: 520px;
  color: var(--muted);
  font-size: 1.14rem;
  line-height: 1.65;
}
.hero-v2-strong {
  margin: 22px 0 0;
  padding-left: 18px;
  border-left: 3px solid var(--accent-2);
  color: var(--text);
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.4;
}
.hero-v2-copy .btn-row { margin-top: 32px; }

.hero-reassure {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--bd-1);
}
.hero-reassure li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text-4);
  font-size: .88rem;
  font-weight: 600;
}
.hero-reassure svg { width: 17px; height: 17px; flex: none; color: var(--accent-2); }

/* La photo porte le hero : grande, nette, sans cadre artificiel. */
.hero-v2-media .ph {
  aspect-ratio: 4 / 3;
  border-radius: 18px;
}
.ph-hero { box-shadow: var(--shadow-lg); }

/* AUCUNE animation d'entrée sur le hero — décision délibérée.

   Le hero porte le message principal : ni son texte ni sa photo ne
   doivent dépendre d'une animation pour être visibles. Une règle
   d'apparition laisse l'élément à opacity 0 tant que l'animation n'a
   pas progressé, et il existe de nombreux cas où elle ne progresse
   pas : onglet en arrière-plan au chargement, capture d'écran,
   impression, export PDF, navigateur ancien, économiseur de batterie.
   Le hero serait alors purement et simplement blanc.

   Le reste de la page utilise les apparitions au scroll de motion.js,
   qui sont pilotées en JavaScript et disposent de filets de sécurité :
   le premier écran n'y est jamais masqué. */

/* =========================================================
   42. Bénéfices — trois idées, pas de cartes
   ========================================================= */
.sec-bene { background: linear-gradient(180deg, var(--bg), var(--grad-mid) 60%, var(--bg)); }
.bene-row {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
}
.bene-ico {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid var(--accent-bd);
  border-radius: 15px;
  background: var(--accent-soft);
  color: var(--accent-2);
}
.bene-ico svg { width: 27px; height: 27px; }
.bene-t {
  margin: 20px 0 9px;
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--text);
}
.bene-d { color: var(--muted); font-size: 1rem; line-height: 1.65; max-width: 330px; }

/* =========================================================
   43. Des écrans pour tous vos espaces — les photos parlent
   ========================================================= */
.spaces {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.space .ph {
  aspect-ratio: 4 / 5;
  height: auto;
  border-radius: 16px;
}
.space-body { padding: 22px 2px 0; }
.space-t {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--text);
}
.space-d {
  margin: 8px 0 14px;
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.6;
}

/* Lien texte, sans bouton : allège une page déjà riche en CTA. */
.sol-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-2);
  font-family: inherit;
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
  transition: gap .18s ease;
}
.sol-link:hover { gap: 12px; color: var(--accent-2-hover); }
@media (pointer: coarse), (max-width: 680px) {
  .sol-link {
    min-height: 44px;
    align-items: center;
  }
}
.sol-link-lg { font-size: 1rem; margin-top: 6px; }

/* =========================================================
   44. Gamme de solutions — la photo porte la carte
   ========================================================= */
.sol-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.sol {
  display: flex;
  flex-direction: column;
}
.sol-media {
  aspect-ratio: 3 / 2;
  border-radius: 16px;
  overflow: hidden;
}
.sol-media .ph { height: 100%; border-radius: 16px; }
/* Zoom très léger au survol, seul mouvement de la section. */
.sol-media img { transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.sol:hover .sol-media img { transform: scale(1.04); }
.sol-body { padding: 20px 2px 0; }
.sol-kind {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-3);
}
.sol-t {
  margin: 9px 0 8px;
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.2;
  color: var(--text);
}
.sol-d {
  margin-bottom: 14px;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.6;
}

/* =========================================================
   45. Un seul partenaire — six composants, une solution
   ========================================================= */
.sec-partner { text-align: center; }
.bricks-wrap { margin-top: 8px; }
.bricks {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 14px;
}
.brick {
  display: grid;
  justify-items: center;
  gap: 12px;
  flex: 0 1 152px;
  padding: 26px 16px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
}
.brick-ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(18, 88, 255, .16);
  color: #6f9bff;
}
.brick-ico svg { width: 23px; height: 23px; }
.brick-t { font-size: .95rem; font-weight: 700; color: #fff; }
.bricks-sum {
  margin-top: 26px;
  color: #6f9bff;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.partner-cta { margin-top: 40px; }

/* =========================================================
   46. Trois étapes
   ========================================================= */
.steps3 {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  border-top: 1px solid var(--bd-2);
  padding-top: 34px;
}
.step3-n {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .8rem;
  letter-spacing: .1em;
  color: var(--accent-2);
}
.step3-t {
  margin: 14px 0 10px;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.2;
  color: var(--text);
}
.step3-d { color: var(--muted); font-size: 1rem; line-height: 1.65; }
.steps3-after {
  margin-top: 40px;
  color: var(--muted-2);
  font-size: .98rem;
}

/* =========================================================
   47. IADisplay — ordinateur → logiciel → écrans
   ========================================================= */
.sec-soft { background: linear-gradient(180deg, var(--bg), var(--grad-mid) 55%, var(--bg)); }
.soft-grid {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 48px;
  align-items: center;
}
.flow {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 22px;
  align-items: center;
  padding: 30px;
  border: 1px solid var(--bd-2);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.flow-pc {
  border: 1px solid var(--bd-2);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-2);
}
.flow-pc-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 13px;
  border-bottom: 1px solid var(--bd-1);
  background: var(--surface);
}
.flow-pc-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--dot); }
.flow-pc-bar em {
  margin-left: 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .64rem;
  font-style: normal;
  color: var(--muted-4);
}
.flow-pc-body { padding: 16px; display: grid; gap: 16px; }
.flow-lib-l {
  display: block;
  margin-bottom: 9px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-4);
}
.flow-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.flow-tile {
  padding: 11px 12px;
  border: 1.5px solid var(--bd-2);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-4);
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.flow-tile:hover { border-color: var(--accent-bd-strong); }
.flow-tile.is-on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-2);
}
.flow-bars { display: grid; gap: 7px; }
.flow-bars span {
  height: 18px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--accent-bd-strong) var(--w), var(--fill-2) var(--w));
}

/* La diffusion se lit de gauche à droite : trois points qui avancent. */
.flow-arrow { display: flex; flex-direction: column; gap: 7px; align-items: center; }
.flow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-2);
  opacity: .25;
  animation: flowPulse 2.4s infinite;
}
.flow-dot:nth-child(2) { animation-delay: .3s; }
.flow-dot:nth-child(3) { animation-delay: .6s; }
@keyframes flowPulse { 0%, 100% { opacity: .22; } 40% { opacity: 1; } }

.flow-screens { display: flex; gap: 14px; align-items: flex-end; }
.flow-screen {
  border: 1px solid var(--bd-3);
  border-radius: 8px;
  background: #0a0c12;
  padding: 4px;
}
.flow-screen-p { width: 84px; aspect-ratio: 9 / 16; }
.flow-screen-l { width: 132px; aspect-ratio: 16 / 9; }
.flow-view {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  display: grid;
  place-items: center;
  padding: 6px;
  text-align: center;
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  background: linear-gradient(155deg, #1258ff, #0b2f8a);
  transition: opacity .5s ease, background .5s ease;
}
.flow-cap {
  grid-column: 1 / -1;
  margin-top: 4px;
  color: var(--muted-3);
  font-size: .78rem;
}
.soft-side .feat-grid { grid-template-columns: 1fr; margin-top: 0; }

/* =========================================================
   48. Bandes éditoriales — grande photo / texte, en alternance
   ========================================================= */
.sec-edito { padding: 0; }
.edito { display: grid; }
.edito-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0;
}
.edito-row-alt .edito-media { order: 2; }
/* Photo sans cadre : l'image touche le bord de page. Le ratio pilote
   seul la hauteur — la forcer à 100 % entrerait en conflit avec lui. */
.edito-media { display: flex; }
.edito-media .ph { flex: 1; border-radius: 0; aspect-ratio: 4 / 3; height: auto; }
.edito-copy { padding: clamp(48px, 7vw, 104px) clamp(28px, 6vw, 92px); }
.edito-copy .lead { max-width: 480px; }

/* =========================================================
   49. Configurateur repositionné
   ========================================================= */
.config-free {
  margin-top: 16px;
  color: var(--muted-3);
  font-size: .86rem;
}

/* =========================================================
   50. Secteurs — six catégories, sans photo
   ========================================================= */
.sect-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--bd-1);
}
.sect {
  padding: 32px 30px 32px 0;
  border-bottom: 1px solid var(--bd-1);
  border-right: 1px solid var(--bd-1);
}
.sect:nth-child(3n) { border-right: 0; padding-right: 0; }
.sect:nth-child(3n + 2),
.sect:nth-child(3n + 3) { padding-left: 30px; }
.sect-t {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--text);
}
.sect-d { margin-top: 9px; color: var(--muted); font-size: .96rem; line-height: 1.6; }
.sect-all { margin-top: 36px; }
.sect-all a { color: var(--accent-2); font-size: 1rem; font-weight: 700; }

/* =========================================================
   51. Réalisations — grille éditoriale, formats variés
   ========================================================= */
.real-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 232px;
  gap: 18px;
}
.real {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}
.real-xl { grid-column: span 2; grid-row: span 2; }
.real-lg { grid-column: span 2; }
.real .ph { height: 100%; border-radius: 16px; }
.real .ph img { transition: transform .7s cubic-bezier(.22,.61,.36,1); }
.real:hover .ph img { transform: scale(1.05); }

/* Étiquette discrète, apparaissant au survol. Aucun pavé de texte
   posé sur la photo : l'image se suffit presque à elle-même. */
.real-tag {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: grid;
  gap: 2px;
  padding: 11px 15px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  background: rgba(10, 12, 18, .78);
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  transition: opacity .3s ease, transform .3s ease;
}
.real:hover .real-tag,
.real:focus-within .real-tag { opacity: 1; transform: none; }
.real-sector { color: #fff; font-size: .92rem; font-weight: 700; letter-spacing: -.02em; }
.real-spec {
  color: #a8adbb;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .68rem;
}
.real-note { margin-top: 26px; color: var(--muted-3); font-size: .82rem; }

/* =========================================================
   52. Marques — réassurance courte
   ========================================================= */
.sec-brands {
  padding: 60px 0;
  border-top: 1px solid var(--bd-1);
  text-align: center;
}
.brands-head { max-width: 620px; margin-inline: auto; }
.brands-head .lead { margin-inline: auto; }
.h3-brands {
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 12px;
}
.brands-row {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 26px 48px;
  margin-top: 30px;
}
.brands-row img {
  height: 26px;
  width: auto;
  max-width: 128px;
  object-fit: contain;
  opacity: .78;
  transition: opacity .2s ease;
}
.brands-row li:hover img { opacity: 1; }

/* =========================================================
   53. CTA final / contact
   ========================================================= */
.sec-final {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--bd-1);
  background: linear-gradient(180deg, var(--grad-mid), var(--bg));
}
.sec-final .final-halo {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 70% at 50% 0%, var(--halo-2), transparent 62%);
}
.sec-final > .container { position: relative; }
.final-head .btn-row { justify-content: center; }
.final-points {
  margin-top: 22px;
  color: var(--muted-3);
  font-size: .9rem;
}
.contact-grid {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 44px;
  margin-top: 56px;
  align-items: start;
}
.contact-big {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -.035em;
  color: var(--text) !important;
}
.contact-side .contact-info { margin-top: 0; gap: 11px; }

/* =========================================================
   54. Pied de page
   ========================================================= */
.footer-title-2 { margin-top: 26px; }
.footer-contact {
  display: grid;
  gap: 8px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--bd-1);
  font-size: .92rem;
}
.footer-contact a { color: var(--text-4); }
.footer-contact a:hover { color: var(--text); }
/* Mention institutionnelle discrète : French Display reste la marque
   commerciale mise en avant. */
.footer-parent { color: var(--muted-4); }

/* =========================================================
   55. Responsive
   ========================================================= */
@media (max-width: 1180px) {
  .hero-v2-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero-v2-media .ph { aspect-ratio: 16 / 10; }
  .soft-grid { grid-template-columns: 1fr; gap: 36px; }
  .soft-side .feat-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1000px) {
  .section { padding: 96px 0; }
  .sec-head { margin-bottom: 44px; }
  .bene-row { grid-template-columns: 1fr; gap: 34px; }
  .bene-d { max-width: 520px; }
  .spaces { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .sol-grid { grid-template-columns: repeat(2, 1fr); }
  .steps3 { grid-template-columns: 1fr; gap: 30px; }
  .sect-grid { grid-template-columns: repeat(2, 1fr); }
  .sect:nth-child(3n) { border-right: 1px solid var(--bd-1); padding-right: 30px; }
  .sect:nth-child(2n) { border-right: 0; padding-right: 0; padding-left: 30px; }
  .sect:nth-child(2n + 1) { padding-left: 0; }
  .edito-row { grid-template-columns: 1fr; }
  .edito-row-alt .edito-media { order: 0; }
  .edito-media .ph { aspect-ratio: 16 / 10; }
  .real-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 210px; }
  .real-xl { grid-column: span 2; grid-row: span 1; }
  .real-lg { grid-column: span 2; }
  /* Le schéma de diffusion s'empile : les écrans passent sous le poste. */
  .flow { grid-template-columns: 1fr; gap: 18px; }
  .flow-arrow { flex-direction: row; }
  .flow-screens { justify-content: center; }
}

@media (max-width: 680px) {
  .section { padding: 72px 0; }
  .sec-brands { padding: 60px 0; }

  /* Mobile : le message doit apparaître tout de suite, hero très court. */
  .hero-v2 { padding: 40px 0 60px; }
  .hero-v2-grid { gap: 32px; }
  .hero-v2-title { font-size: clamp(2.05rem, 9vw, 2.7rem); }
  .hero-v2-sub { margin-top: 18px; font-size: 1rem; }
  .hero-v2-strong { margin-top: 18px; font-size: 1.04rem; }
  .hero-v2-copy .btn-row { margin-top: 24px; }
  .hero-v2-copy .btn-row .btn { width: 100%; }
  .hero-reassure { gap: 8px 18px; margin-top: 22px; padding-top: 18px; }
  .hero-reassure li { font-size: .82rem; }
  .hero-v2-media .ph { aspect-ratio: 4 / 3; border-radius: 14px; }

  .h1-like { font-size: clamp(1.95rem, 8vw, 2.4rem); }
  .h2-edito { font-size: clamp(1.75rem, 7.5vw, 2.1rem); }
  .lead { font-size 1rem; }

  /* Les solutions défilent horizontalement : six cartes empilées
     feraient une section interminable sur téléphone. */
  .spaces,
  .sol-grid {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: -20px;
    padding: 2px 20px 8px;
  }
  .spaces::-webkit-scrollbar,
  .sol-grid::-webkit-scrollbar { display: none; }
  .space,
  .sol { flex: 0 0 76vw; scroll-snap-align: start; }
  .space-t { font-size: 1.16rem; }

  .brick { flex-basis: calc(50% - 7px); padding: 20px 12px; }
  .bricks-sum { font-size: 1rem; }

  .steps3 { padding-top: 26px; }
  .step3-t { font-size: 1.16rem; }

  .soft-side .feat-grid { grid-template-columns: 1fr; }
  .flow { padding: 18px; border-radius: 16px; }
  .flow-tiles { grid-template-columns: 1fr; }
  .flow-screen-l { width: 112px; }
  .flow-screen-p { width: 68px; }

  .edito-copy { padding: 34px 20px 44px; }

  .sect-grid { grid-template-columns: 1fr; }
  .sect,
  .sect:nth-child(2n),
  .sect:nth-child(2n + 1),
  .sect:nth-child(3n) { border-right: 0; padding: 26px 0; }

  .real-grid { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .real-xl, .real-lg { grid-column: auto; grid-row: auto; }
  /* Au doigt, il n'y a pas de survol : l'étiquette reste visible. */
  .real-tag { opacity: 1; transform: none; }

  .sec-brands { padding: 46px 0; }
  .brands-row { gap: 20px 30px; margin-top: 24px; }
  .brands-row img { height: 20px; }

  .contact-grid { margin-top: 34px; gap: 26px; }
  .contact-big { font-size: 1.45rem; }
}

/* =========================================================
   56. Accessibilité
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .flow-dot { animation: none; opacity: .6; }
  .sol-media img,
  .real .ph img { transition: none; }
  .sol:hover .sol-media img,
  .real:hover .ph img { transform: none; }
  .real-tag { opacity: 1; transform: none; }
}


/* =========================================================
   57. Raccourcis de projets types (tête du configurateur)
   Les packs ne sont plus une section commerciale autonome :
   ils préremplissent le configurateur.
   ========================================================= */
.sec-config { background: linear-gradient(180deg, var(--bg), var(--grad-mid) 58%, var(--bg)); }
.cfg-shortcuts { max-width: 1040px; margin: 0 auto 22px; }
.cfg-shortcuts-l {
  display: block;
  margin-bottom: 12px;
  color: var(--muted-3);
  font-family: 'IBM Plex Mono', monospace;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cfg-shortcuts .packs { grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cfg-shortcuts .pack-card { padding: 20px 20px 22px; border-radius: 16px; }
.cfg-shortcuts .pack-type { font-size: 1.04rem; }
.cfg-shortcuts .pack-desc { min-height: 0; margin-top: 5px; font-size: .86rem; }
/* Le détail de chaque pack est redondant ici : le configurateur le
   déroule ensuite. */
.cfg-shortcuts .pack-list { display: none; }
.cfg-shortcuts .pack-card .btn { margin-top: 16px; min-height: 40px; font-size: .84rem; }
.cfg-shortcuts .pack-badge { font-size: .62rem; padding: 4px 10px; }

@media (max-width: 1000px) {
  .cfg-shortcuts .packs { grid-template-columns: 1fr; }
}

/* Logo La French Tech : discret, dans le bas de page.
   Le mot-repère du fichier fourni est blanc, une variante à texte
   bleu nuit est donc affichée sur fond clair (bascule en CSS). */
.ft-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--bd-1);
}
.ft-line img { height: 34px; width: auto; }
.ft-line-l {
  color: var(--muted-4);
  font-family: 'IBM Plex Mono', monospace;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
[data-theme="light"] .ft-logo-dark,
[data-theme="dark"] .ft-logo-light { display: none; }


/* =========================================================
   58. Impression
   Rien ne doit dépendre d'une animation ou d'un survol : les
   étiquettes de réalisation et les apparitions sont forcées.
   ========================================================= */
@media print {
  [data-reveal] { animation: none !important; opacity: 1 !important; transform: none !important; }
  .real-tag { opacity: 1 !important; transform: none !important; }
  .topbar, .site-header, .consent, .bot { display: none !important; }
  .section { padding: 28px 0; break-inside: avoid; }
}


/* =========================================================
   58. Solutions — grille de 5 cartes sans case vide
   3 cartes en première ligne, 2 plus larges en seconde.
   ========================================================= */
.sol-grid-5 { grid-template-columns: repeat(6, 1fr); }
.sol-grid-5 .sol { grid-column: span 2; }
.sol-grid-5 .sol:nth-child(n + 4) { grid-column: span 3; }
/* Cartes larges : ratio 16:9 pour garder une hauteur proche de la
   première ligne. Les trois premières gardent leur 3:2. */
.sol-grid-5 .sol:nth-child(n + 4) .sol-media { aspect-ratio: 16 / 9; }

@media (max-width: 1000px) {
  .sol-grid-5 { grid-template-columns: repeat(2, 1fr); }
  .sol-grid-5 .sol,
  .sol-grid-5 .sol:nth-child(n + 4) { grid-column: span 1; }
  .sol-grid-5 .sol:nth-child(n + 4) .sol-media { aspect-ratio: 3 / 2; }
  .sol-grid-5 .sol:last-child { grid-column: span 2; }
  .sol-grid-5 .sol:last-child .sol-media { aspect-ratio: 21 / 9; }
}
@media (max-width: 680px) {
  .sol-grid-5 .sol:last-child .sol-media { aspect-ratio: 3 / 2; }
}

/* =========================================================
   59. Logiciel French Display — texte / ordinateur
   ========================================================= */
.sw-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 64px;
  align-items: center;
}
.sw-copy .lead { max-width: 540px; }
.sw-feats {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 28px;
  margin: 34px 0 34px;
}
.sw-feat { display: flex; gap: 13px; align-items: flex-start; }
.sw-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--accent-bd);
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent-2);
}
.sw-ico svg { width: 20px; height: 20px; }
.sw-feat strong {
  display: block;
  color: var(--text);
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: -.015em;
}
.sw-feat em {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: .88rem;
  font-style: normal;
  line-height: 1.5;
}

/* Ordinateur */
.sw-visual { margin: 0; }
.lap { filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .28)); }
.lap-screen {
  padding: 10px;
  border-radius: 16px 16px 4px 4px;
  background: #0b0d13;
  border: 1px solid rgba(255, 255, 255, .08);
}
.lap-screen { margin: 0 5%; }
.lap-base {
  height: 14px;
  margin: 0;
  border-radius: 2px 2px 12px 12px;
  background: linear-gradient(180deg, #c9ced8, #9aa1ae);
  position: relative;
}
.lap-base::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 16%;
  height: 5px;
  transform: translateX(-50%);
  border-radius: 0 0 6px 6px;
  background: #858c99;
}

/* Interface reconstituée — tons fixes, lisible dans les deux thèmes */
.app2 {
  display: grid;
  grid-template-columns: 118px 1fr;
  aspect-ratio: 16 / 10;
  border-radius: 7px;
  overflow: hidden;
  background: #f5f7fb;
  color: #0b1220;
  font-size: 11px;
}
.app2-side {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 10px;
  background: #0f1a33;
}
.app2-brand {
  width: 26px;
  height: 18px;
  margin: 0 0 14px 4px;
  border: 2.5px solid #fff;
  border-radius: 4px;
  position: relative;
}
.app2-brand::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 3px;
  border-left: 7px solid #6f9bff;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.app2-nav {
  padding: 7px 9px;
  border-radius: 7px;
  color: #aeb8cf;
  font-weight: 600;
  font-size: 10.5px;
}
.app2-nav.is-on { background: rgba(111, 155, 255, .18); color: #fff; }
.app2-main { padding: 14px 16px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.app2-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.app2-h { font-size: 13px; font-weight: 800; letter-spacing: -.02em; }
.app2-actions { display: flex; gap: 7px; }
.app2-btn {
  padding: 6px 10px;
  border: 1px solid #d5dbe6;
  border-radius: 7px;
  background: #fff;
  color: #1e2942;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.app2-btn-pri { background: #1258ff; border-color: #1258ff; color: #fff; }
.app2-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; flex: 1; }
.app-tile {
  display: flex;
  flex-direction: column;
  border: 1px solid #e1e6ef;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.app-thumb {
  flex: 1;
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 6px;
  color: #fff;
  font-weight: 800;
  font-size: 10.5px;
  text-align: center;
  letter-spacing: -.01em;
}
.app-thumb.t1 { background: linear-gradient(150deg, #1258ff, #0b2f8a); }
.app-thumb.t2 { background: linear-gradient(150deg, #f7b733, #7b3fa0); }
.app-thumb.t3 { background: linear-gradient(150deg, #2b4fa8, #12224a); }
.app-thumb.t4 { background: linear-gradient(150deg, #e2574c, #8e2a3a); }
.app-thumb.t5 { background: linear-gradient(150deg, #0e1a38, #1258ff); }
.app-thumb.t6 { background: linear-gradient(150deg, #2f7d6d, #173d40); }
.app-meta { padding: 5px 7px 6px; display: grid; gap: 1px; }
.app-meta b { font-size: 9.5px; font-weight: 700; }
.app-meta i { font-style: normal; font-size: 8.5px; color: #7a849a; }
.app-meta i.is-canva { color: #1250e0; font-weight: 600; }

/* Diffusion : discrète, sous l'ordinateur */
.sw-diff {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 26px;
  color: var(--muted-2);
  font-size: .82rem;
  font-weight: 600;
}
.sw-diff-l { display: inline-flex; align-items: center; gap: 7px; }
.sw-diff-screens { display: inline-flex; align-items: flex-end; gap: 6px; }
.sw-diff-screens i {
  display: block;
  border: 1.5px solid var(--accent-2);
  border-radius: 3px;
  background: var(--accent-soft);
}
.sw-diff-screens i.p { width: 12px; height: 20px; }
.sw-diff-screens i.l { width: 26px; height: 16px; }
.sw-cap { margin-top: 10px; text-align: center; color: var(--muted-4); font-size: .74rem; }

@media (max-width: 1120px) {
  .sw-grid { grid-template-columns: 1fr; gap: 48px; }
  .sw-visual { max-width: 720px; width: 100%; margin-inline: auto; }
}
@media (max-width: 680px) {
  .sw-feats { grid-template-columns: 1fr; gap: 18px; margin: 28px 0; }
  .sw-copy .btn-row .btn { width: 100%; }
  .lap-screen { padding: 6px; border-radius: 11px 11px 3px 3px; }
  .lap-base { height: 9px; }
  .app2 { grid-template-columns: 1fr; aspect-ratio: auto; }
  .app2-side { display: none; }
  .app2-main { padding: 11px; gap: 10px; }
  .app2-actions { width: 100%; }
  .app2-btn { flex: 1; text-align: center; }
  .app2-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .app-thumb { min-height: 58px; }
  .sw-diff { flex-wrap: wrap; gap: 10px 14px; }
}

/* Titre du logiciel sur deux phrases : taille légèrement réduite
   pour tenir en trois lignes dans la colonne. */
.sw-copy .h1-like { font-size: clamp(2.1rem, 3.5vw, 3.2rem); }

.cfg-reassure { margin-top: 14px; color: var(--muted-2); font-size: .92rem; }
.sec-head .cfg-reassure + .btn-row { margin-top: 22px; }


/* =========================================================
   29. Release candidate — rythme, contraste, profondeur
   ========================================================= */
:root, [data-theme="dark"] {
  --sec-tint: #0c1222;        /* bleu nuit très sombre */
  --sec-gray: #0b0d13;
  --sec-soft-shadow: 0 1px 2px rgba(0,0,0,.25), 0 14px 34px -16px rgba(0,0,0,.55);
}
[data-theme="light"] {
  --sec-tint: #eef3fc;        /* bleu très pâle */
  --sec-gray: #f5f6f9;        /* gris très clair */
  --sec-soft-shadow: 0 1px 2px rgba(16,24,40,.05), 0 14px 34px -16px rgba(16,24,40,.16);
}

/* Espacements : ~20 % de moins sur les sections intermédiaires.
   Le hero, les grandes sections visuelles et le contact gardent de l'ampleur. */
.section { padding: clamp(56px, 7vw, 96px) 0; }
.sec-spaces, .sec-soft { padding: clamp(68px, 8.5vw, 112px) 0; }
.sec-final { padding: clamp(80px, 10vw, 128px) 0; }
.sec-brands { padding: clamp(40px, 5vw, 56px) 0; }
.sec-head { margin-bottom: clamp(28px, 3.6vw, 44px); }

/* Alternance des fonds : chaque section se distingue de la précédente. */
.sec-bene     { background: var(--bg); }
.sec-spaces   { background: var(--sec-tint); }
.sec-sol      { background: var(--bg); }
.sec-steps    { background: var(--sec-gray); border-top: 1px solid var(--bd-1); border-bottom: 1px solid var(--bd-1); }
.sec-soft     { background: radial-gradient(90% 70% at 85% 20%, var(--accent-soft), transparent 60%), var(--sec-tint); }
.sec-config   { background: var(--bg); }
.sec-brands   { background: var(--sec-gray); }
.sec-faq      { background: var(--bg); }

/* Univers : plus large que la grille, cadrage immersif. */
.sec-spaces .container { width: min(1440px, calc(100% - 24px)); }
.space, .sol, .step3, .faq-item { box-shadow: var(--sec-soft-shadow); }
.space img { transition: transform 1.2s cubic-bezier(.22,.61,.36,1); }
.space:hover img { transform: scale(1.035); }

/* Hero : mouvement lent dans le visuel, textes en cascade. */
.ph-hero img { animation: heroDrift 22s ease-in-out infinite alternate; transform-origin: 60% 40%; }
@keyframes heroDrift { from { transform: scale(1); } to { transform: scale(1.05) translate(-1%, -.5%); } }
.hero-v2-copy > * { animation: heroIn .7s cubic-bezier(.22,.61,.36,1) both; }
.hero-v2-copy > :nth-child(2) { animation-delay: .06s; }
.hero-v2-copy > :nth-child(3) { animation-delay: .14s; }
.hero-v2-copy > :nth-child(4) { animation-delay: .2s; }
.hero-v2-copy > :nth-child(5) { animation-delay: .26s; }
.hero-v2-copy > :nth-child(6) { animation-delay: .32s; }
@keyframes heroIn { from { opacity: .01; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Accessibilité : focus toujours visible au clavier. */
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 6px; }
[aria-invalid="true"] { border-color: var(--bad) !important; }

/* ---------- Formulaire ---------- */
.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status.is-ok  { border: 1px solid var(--ok-bd); background: var(--ok-soft); color: var(--ok); }
.form-status.is-err { border: 1px solid rgba(220,38,38,.4); background: var(--bad-soft); color: var(--bad); }
.form-note a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
.form-note { line-height: 1.55; }

/* ---------- Consentement : catégories ---------- */
.consent-cats { display: grid; gap: 8px; margin-top: 12px; max-width: 620px; }
.consent-cats[hidden] { display: none; }
.consent-cat { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--bd-2); border-radius: 11px; cursor: pointer; }
.consent-cat input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.consent-cat b { display: block; font-size: .88rem; color: var(--text); }
.consent-cat small { color: var(--muted-2); font-size: .8rem; }
.consent-actions { flex-wrap: wrap; justify-content: flex-end; }
.consent-actions [hidden] { display: none; }

/* =========================================================
   30. Logiciel : PC → médias → écran
   Toute la scène est dimensionnée en unités de conteneur :
   elle se redimensionne d'un bloc, sans recalcul JavaScript.
   ========================================================= */
.flow { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; }
.sw-grid > .flow { align-self: center; }
.flow-stage {
  position: relative; aspect-ratio: 16 / 10.5; container-type: inline-size; overflow: hidden;
  border-radius: 22px; box-shadow: var(--shadow-lg);
  background: radial-gradient(110% 80% at 50% 110%, rgba(18,88,255,.38), transparent 60%), linear-gradient(180deg, #0f1934, #080d1c);
}
.flow-lap { position: absolute; left: 4cqw; bottom: 11cqw; width: 45cqw; }
.flow-lap-screen {
  aspect-ratio: 16 / 10; display: grid; grid-template-columns: 17% 1fr; overflow: hidden;
  border: .9cqw solid #1a2236; border-radius: 1.4cqw 1.4cqw 0 0; background: #f4f6fb;
}
.flow-side { background: #0e1a38; display: grid; align-content: start; gap: 1.4cqw; padding: 2cqw 1.2cqw; }
.flow-side i { display: block; height: 1cqw; border-radius: 1cqw; background: rgba(255,255,255,.28); }
.flow-side i:first-child { background: #6f9bff; }
.flow-main { display: grid; grid-template-rows: auto 1fr; gap: 1.4cqw; padding: 1.6cqw; }
.flow-top { display: flex; justify-content: space-between; align-items: center; }
.flow-top b { font-size: 1.5cqw; color: #0b1220; font-weight: 800; }
.flow-top em { font-style: normal; font-size: 1.2cqw; font-weight: 700; color: #fff; background: #1258ff; padding: .5cqw 1.2cqw; border-radius: 1cqw; }
.flow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1cqw; }
.flow-grid i { border-radius: .8cqw; background: linear-gradient(150deg, #c9d6f5, #e4ebfa); }
.flow-grid i:nth-child(2) { background: linear-gradient(150deg, #ffd9a8, #ffe9cf); }
.flow-grid i:nth-child(4) { background: linear-gradient(150deg, #bfe9dc, #dff5ee); }
.flow-grid i:nth-child(6) { background: linear-gradient(150deg, #d9ccff, #ece6ff); }
.flow-grid .is-send { background: linear-gradient(150deg, #1258ff, #4d84ff); animation: sendPulse 2s ease-in-out infinite; }
@keyframes sendPulse { 50% { box-shadow: 0 0 0 .7cqw rgba(18,88,255,.25); } }
.flow-lap-base { height: 1.7cqw; margin: 0 -3.5cqw; border-radius: 0 0 1.8cqw 1.8cqw; background: linear-gradient(#cfd5e1, #8f98ab); }

.flow-disp { position: absolute; right: 4cqw; bottom: 8cqw; width: 40cqw; }
.flow-bezel { position: relative; aspect-ratio: 16 / 9; padding: .7cqw; border-radius: 1cqw; background: #05070d; box-shadow: 0 2cqw 5cqw rgba(0,0,0,.55), 0 0 0 .15cqw rgba(255,255,255,.12); overflow: hidden; }
.flow-slide {
  position: absolute; inset: .7cqw; border-radius: .5cqw; display: grid; align-content: center; justify-items: start;
  gap: .6cqw; padding: 3cqw; color: #fff; animation: flowSlides 16s infinite;
}
.flow-slide small { font-size: 1.4cqw; opacity: .8; font-weight: 600; }
.flow-slide b { font-size: 3.2cqw; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.fs1 { background: linear-gradient(135deg, #1258ff, #0b2f8a); }
.fs2 { background: linear-gradient(135deg, #c2410c, #7c2d12); animation-delay: 4s; }
.fs3 { background: linear-gradient(135deg, #047857, #064e3b); animation-delay: 8s; }
.fs4 { background: linear-gradient(135deg, #5b21b6, #2e1065); animation-delay: 12s; }
@keyframes flowSlides { 0%, 23% { opacity: 1; } 27%, 96% { opacity: 0; } 100% { opacity: 1; } }
.fs2, .fs3, .fs4 { opacity: 0; }
.flow-stand { width: 4cqw; height: 5cqw; margin: 0 auto; background: linear-gradient(90deg, #111827, #262f44); }
.flow-foot { width: 15cqw; height: 1cqw; margin: 0 auto; border-radius: 1cqw; background: #1b2233; }

.flow-beam {
  position: absolute; left: 44cqw; right: 40cqw; top: 36cqw; height: 0;
  border-top: .2cqw dashed rgba(111,155,255,.35);
}
.flow-lane { position: absolute; left: 34cqw; right: 22cqw; top: 13cqw; height: 22cqw; container-type: inline-size; }
.flow-card {
  position: absolute; left: 0; top: 50%; display: flex; align-items: center; gap: 2.2cqw;
  padding: 2.2cqw 3.2cqw 2.2cqw 2.4cqw; border-radius: 3cqw; white-space: nowrap;
  background: rgba(255,255,255,.97); color: #0b1220; box-shadow: 0 3cqw 7cqw rgba(0,0,0,.4);
  opacity: 0; animation: flowMove 9s cubic-bezier(.45,.05,.35,1) infinite; animation-delay: calc(var(--i) * -1.5s);
  will-change: transform, opacity;
}
.flow-ico { width: 6cqw; height: 6cqw; border-radius: 1.6cqw; background: var(--c); flex: none; }
.flow-txt { display: grid; line-height: 1.15; }
.flow-txt b { font-size: 3.2cqw; font-weight: 800; }
.flow-txt small { font-size: 2.8cqw; color: #5b6478; }
@keyframes flowMove {
  0%   { opacity: 0; transform: translate(0, calc(-50% + var(--y))) scale(.55); }
  12%  { opacity: 1; transform: translate(12cqw, calc(-50% + var(--y) - 6cqw)) scale(1); }
  55%  { opacity: 1; transform: translate(calc(55cqw - 50%), calc(-50% + var(--y) - 10cqw)) scale(1); }
  86%  { opacity: 1; transform: translate(calc(100cqw - 100%), calc(-50% + var(--y) * .4)) scale(.85); }
  100% { opacity: 0; transform: translate(calc(100cqw - 100%), -50%) scale(.45); }
}
.flow-cap { margin-top: 12px; color: var(--muted-3); font-size: .8rem; line-height: 1.5; }

/* Widgets disponibles */
.widgets { margin-top: clamp(40px, 5vw, 64px); }
.widgets-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 18px; }
.widgets-t { font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.widgets-d { color: var(--muted); font-size: .95rem; }
.widgets-row { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.widget {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center;
  padding: 18px; border: 1px solid var(--bd-2); border-radius: 16px; background: var(--surface); box-shadow: var(--sec-soft-shadow);
  transition: transform .25s ease, border-color .25s ease;
}
.widget:hover { transform: translateY(-2px); border-color: var(--accent-bd-strong); }
.widget-ico {
  grid-row: 1 / 3; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px;
  color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent);
}
.widget-ico svg { width: 24px; height: 24px; }
.widget b { font-size: 1rem; color: var(--text); }
.widget small { color: var(--muted-2); font-size: .84rem; }

@media (max-width: 1000px) { .widgets-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .flow-stage { aspect-ratio: 4 / 3.4; }
  .flow-lap { width: 46cqw; left: 3cqw; bottom: 30cqw; }
  .flow-disp { width: 44cqw; right: 3cqw; bottom: 8cqw; }
  .flow-lane { left: 20cqw; right: 16cqw; top: 8cqw; height: 34cqw; }
  .flow-beam { display: none; }
  .flow-card:nth-child(n+5) { display: none; }
  .flow-card { animation-duration: 8s; animation-delay: calc(var(--i) * -2s); }
  .flow-txt small { display: none; }
  .flow-txt b { font-size: 5.6cqw; }
  .flow-ico { width: 7cqw; height: 7cqw; }
  .widgets-row { grid-template-columns: 1fr; }
}

/* Mouvement réduit : la scène reste explicite, figée. */
@media (prefers-reduced-motion: reduce) {
  .ph-hero img, .hero-v2-copy > *, .flow-grid .is-send, .flow-slide { animation: none; }
  .flow-card { animation: none; opacity: 1; transform: translate(calc(var(--i) * 20cqw), calc(-50% + var(--y))); }
  .flow-card:nth-child(n+4) { display: none; }
  .space img, .widget { transition: none; }
}

/* ---------- Page 404 ---------- */
.nf { min-height: 72vh; display: grid; place-items: center; padding: 64px 0; text-align: center; }
.nf-screen { width: min(420px, 80vw); margin: 0 auto 34px; }
.nf-bezel { aspect-ratio: 16 / 9; border-radius: 12px; padding: 8px; background: #05070d; box-shadow: var(--shadow-lg); }
.nf-in {
  height: 100%; border-radius: 6px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #1258ff, #0b2f8a); font-size: clamp(3rem, 12vw, 5.5rem); font-weight: 800; letter-spacing: -.05em;
  animation: nfFlicker 5s ease-in-out infinite;
}
@keyframes nfFlicker { 0%, 90%, 100% { opacity: 1; } 92% { opacity: .55; } 94% { opacity: 1; } 96% { opacity: .7; } }
.nf-stand { width: 14%; height: 22px; margin: 0 auto; background: #1b2233; }
.nf-foot { width: 40%; height: 8px; margin: 0 auto; border-radius: 6px; background: #1b2233; }
.nf h1 { margin: 0 0 12px; }
.nf .lead { margin: 0 auto; max-width: 520px; }
.nf .btn-row { justify-content: center; }
@media (prefers-reduced-motion: reduce) { .nf-in { animation: none; } }

/* Le bouton thème est masqué : c'est le menu qui doit prendre la place à droite. */
@media (max-width: 1120px) { .menu-btn { margin-left: auto; } }

/* Pages légales : sous-titres */
.legal-page h3 { margin: 24px 0 8px; font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; color: var(--text-2); }
.legal-page .legal-ul li strong { color: var(--text-3); }
.legal-sub { margin: 6px 0 0; color: var(--accent-2); font-weight: 600; }

/* =========================================================
   50. Pages secteurs + grille « Secteurs » de l'accueil
   ========================================================= */
.sect-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.sect-card {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 24px 52px 24px 24px;
  border: 1px solid var(--bd-2);
  border-radius: 16px;
  background: var(--fill-1);
  color: var(--text);
  transition: border-color .2s, background .2s, transform .2s;
}
.sect-card:hover { border-color: var(--accent-bd, var(--bd-4)); background: var(--accent-soft); transform: translateY(-2px); }
.sect-t { font-size: 1.1rem; font-weight: 700; letter-spacing: -.02em; }
.sect-d { color: var(--muted); font-size: .93rem; line-height: 1.5; }
.sect-go { position: absolute; top: 22px; right: 22px; color: var(--accent-2); font-size: 1.1rem; }

.sp-crumb { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; color: var(--muted-3); font-size: .85rem; }
.sp-crumb a { color: var(--muted); }
.sp-crumb a:hover { color: var(--accent-2); }
.sp-crumb [aria-current] { color: var(--text-4); }

.sp-page .section { padding: clamp(72px, 9vw, 112px) 0; }
.sp-page .hero-v2-title { font-size: clamp(2.2rem, 3.6vw, 3.4rem); }

.sp-uses, .sp-sols { list-style: none; display: grid; gap: 16px; }
.sp-uses { grid-template-columns: repeat(3, 1fr); }
.sp-sols { grid-template-columns: repeat(2, 1fr); }
.sp-use, .sp-sol {
  padding: 26px;
  border: 1px solid var(--bd-2);
  border-radius: 16px;
  background: var(--fill-1);
}
.sp-sol { border-left: 3px solid var(--accent-2); }
.sp-use-t, .sp-sol-t { margin: 0 0 8px; font-size: 1.12rem; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.sp-use-d, .sp-sol-d { color: var(--muted); line-height: 1.6; }

.sp-prose h2 {
  margin: 56px 0 18px;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.sp-prose h2:first-child { margin-top: 0; }
.sp-prose p { margin: 0 0 18px; color: var(--text-4); font-size: 1.08rem; line-height: 1.8; }


.sol-more { display: inline-block; margin-top: 10px; color: var(--muted); font-size: .9rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--bd-4); }
.sol-more:hover { color: var(--accent-2); }
.sp-sec + .sp-sec.sec-sectors { padding-top: 0; }

/* Menus déroulants de la navigation */
.nav-dd { position: relative; }
.nav-dd-btn { display: inline-flex; align-items: center; gap: 6px; }
.nav-dd-btn svg { transition: transform .2s; }
.nav-dd:hover .nav-dd-btn svg, .nav-dd:focus-within .nav-dd-btn svg { transform: rotate(180deg); }
.nav-dd-menu {
  position: absolute; top: 100%; left: -18px; z-index: 60;
  display: none; min-width: 260px; margin-top: 12px; padding: 10px;
  border: 1px solid var(--bd-3); border-radius: 14px;
  background: var(--surface); box-shadow: var(--shadow-lg);
}
.nav-dd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu { display: grid; }
.nav-desktop .nav-dd-menu a { padding: 9px 12px; border-radius: 9px; color: var(--text-2); font-size: .9rem; white-space: nowrap; }
.nav-desktop .nav-dd-menu a:hover { background: var(--accent-soft); color: var(--text); }
.nav-desktop .nav-dd-menu .nav-dd-all { margin-top: 4px; border-top: 1px solid var(--bd-1); border-radius: 0 0 9px 9px; color: var(--accent-2); }
.mm-sub { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; padding: 4px 0 10px 14px; border-bottom: 1px solid var(--bd-1); }
.mm-sub a { padding: 9px 4px; color: var(--muted); font-size: 14.5px; font-weight: 600; }
.mm-sub a:hover { color: var(--text); }

@media (max-width: 1120px) {
  .sect-grid { grid-template-columns: repeat(2, 1fr); }
  .sp-uses { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .sect-grid, .sp-uses, .sp-sols { grid-template-columns: 1fr; }
  .sp-use, .sp-sol { padding: 22px; }
}