/* ==================================================================
   Thème du site — les couleurs proviennent des réglages de l'admin
   et sont injectées dans :root par le gabarit (voir partials/head).
   ================================================================== */

:root {
  --primary: #1449c4;
  --primary-dark: #0f3aa0;
  --accent: #3b82f6;
  --accent-soft: #93c5fd;
  --dark: #040c1a;

  --fg: #0b1526;
  --muted: #5a6b85;
  --border: #dbe3f0;
  --secondary: #eef3fb;
  --card: #f8fafc;
  --white: #ffffff;

  --radius: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(4, 12, 26, 0.06);
  --shadow: 0 4px 16px rgba(4, 12, 26, 0.07);
  --shadow-lg: 0 18px 40px -12px rgba(4, 12, 26, 0.18);
  --shadow-xl: 0 30px 60px -20px rgba(4, 12, 26, 0.28);

  --max: 1280px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

/* L'attribut `hidden` doit toujours gagner : sans cette règle, un `display:
   flex` posé plus bas (témoin « écrit… », raccourcis du chat, pastille de
   notification) le neutralise et l'élément reste visible en permanence. */
[hidden] { display: none !important; }

/* Filet de sécurité : aucune image ne peut être plus large que son conteneur,
   où qu'elle soit posée (contenu riche, page libre, futur gabarit). */
img, svg, video, iframe { max-width: 100%; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  color: var(--fg);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; }

::selection { background: var(--primary); color: #fff; }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.ic { width: 1.25rem; height: 1.25rem; flex: none; }
.ic-sm { width: 1rem; height: 1rem; flex: none; }
.ic-xs { width: .875rem; height: .875rem; flex: none; }
.ic-lg { width: 1.75rem; height: 1.75rem; flex: none; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--primary); color: #fff; padding: .75rem 1.25rem;
  border-radius: 0 0 var(--radius) 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ==================================================================
   Mise en page générique
   ================================================================== */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 768px) { .wrap { padding-inline: 2rem; } }

.section { padding-block: 5rem; }
@media (min-width: 1024px) { .section { padding-block: 7.5rem; } }

.section--tight { padding-block: 3.5rem; }
.section--alt { background: #f6f9fd; }
.section--card { background: var(--card); }
.section--edged { border-block: 1px solid var(--border); }
.section--dark { background: var(--dark); color: #fff; }

.center { text-align: center; }
.stack-3 > * + * { margin-top: .75rem; }
.mt-2 { margin-top: .5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-14 { margin-top: 3.5rem; }

/* --- En-têtes de section --- */

.sec-head { max-width: 52rem; margin-bottom: 3.5rem; }
.sec-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: .75rem;
}
.eyebrow--light { color: var(--accent-soft); }

h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -.02em; font-weight: 800; }

.h1 { font-size: clamp(2.2rem, 5.2vw, 3.75rem); font-weight: 800; line-height: 1.08; }
.h2 { font-size: clamp(1.85rem, 3.6vw, 3rem); }
.h3 { font-size: clamp(1.35rem, 2.2vw, 1.85rem); }
.h4 { font-size: 1.125rem; font-weight: 700; }

.accent { color: var(--primary); }
.grad {
  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead { font-size: 1.075rem; color: var(--muted); line-height: 1.7; }
@media (min-width: 768px) { .lead { font-size: 1.15rem; } }
.lead--light { color: rgba(255, 255, 255, .62); }

.muted { color: var(--muted); }
.small { font-size: .85rem; }

/* --- Grilles --- */

.grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
.grid-tight { gap: 1rem; }

.grid-4, .grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 640px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ==================================================================
   Boutons
   ================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 2.75rem;
  padding-inline: 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: .925rem;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s, color .18s, border-color .18s, transform .18s, box-shadow .18s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--primary) 65%, transparent);
}
.btn--primary:hover { background: var(--primary-dark); }

.btn--outline { background: transparent; border-color: var(--border); color: var(--fg); }
.btn--outline:hover { background: var(--secondary); border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); }

.btn--glass {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .22);
  color: #fff;
  backdrop-filter: blur(6px);
}
.btn--glass:hover { background: rgba(255, 255, 255, .14); }

.btn--white { background: #fff; color: var(--dark); }
.btn--white:hover { background: #e9eefb; }

.btn--lg { height: 3.15rem; padding-inline: 2rem; font-size: 1rem; }
.btn--sm { height: 2.25rem; padding-inline: 1.1rem; font-size: .85rem; }
.btn--block { width: 100%; }

/* Petit écran : un libellé plus large que l'écran va à la ligne au lieu de
   pousser toute la page vers la droite. La hauteur suit le contenu. */
@media (max-width: 599px) {
  .btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
    height: auto;
    min-height: 2.75rem;
    padding-block: .5rem;
  }
  .btn--lg { padding-inline: 1.25rem; min-height: 3.15rem; }
  .btn--sm { min-height: 2.25rem; }
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .9rem;
  font-weight: 650;
  color: var(--primary);
  transition: gap .18s;
}
.link-arrow:hover { gap: .7rem; }

/* ==================================================================
   En-tête
   ================================================================== */

.topbar {
  background: var(--primary);
  color: #fff;
  font-size: .75rem;
  padding-block: .4rem;
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.topbar-group { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.topbar-item { display: inline-flex; align-items: center; gap: .375rem; }
.topbar a:hover { color: rgba(255, 255, 255, .78); }
.topbar-sep { color: rgba(255, 255, 255, .35); }
@media (max-width: 1023px) { .topbar { display: none; } }

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  transition: box-shadow .25s;
}
.site-header.is-stuck { box-shadow: 0 8px 26px -14px rgba(4, 12, 26, .35); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  height: 4.25rem;
}

/* Logo — position, alignement et tailles pilotés depuis l'admin
   (variables --logo-* posées en style inline par partials/logo.ejs). */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--logo-gap, .6rem);
  /* Dans l'en-tête, le logo est le seul élément qui accepte de rétrécir :
     les boutons de droite, eux, doivent rester entiers et cliquables. */
  flex: 0 1 auto;
  min-width: 0;
}
.logo-img { height: var(--logo-h, 2.75rem); width: auto; object-fit: contain; }
.logo-mark {
  width: 2.35rem; height: 2.35rem;
  display: grid; place-items: center;
  border-radius: .7rem;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff; font-weight: 800; font-size: .95rem; letter-spacing: -.03em;
}

/* Position du bloc texte par rapport au logo */
.logo--right  { flex-direction: row; }
.logo--left   { flex-direction: row-reverse; }
.logo--bottom { flex-direction: column; }
.logo--top    { flex-direction: column-reverse; }

/* Position du sous-titre par rapport au titre */
.logo-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.logo-text--below  { flex-direction: column; }
.logo-text--above  { flex-direction: column-reverse; }
.logo-text--inline { flex-direction: row; align-items: baseline; gap: .4rem; flex-wrap: wrap; }

/* Alignement du texte */
.logo--align-start  .logo-text { align-items: flex-start; text-align: start; }
.logo--align-center .logo-text { align-items: center; text-align: center; }
.logo--align-end    .logo-text { align-items: flex-end; text-align: end; }
.logo--align-center.logo--bottom,
.logo--align-center.logo--top { align-items: center; }
.logo--align-end.logo--bottom,
.logo--align-end.logo--top { align-items: flex-end; }

.logo-name { font-weight: 800; font-size: var(--logo-title, 1.15rem); letter-spacing: -.03em; }
.logo-sub { font-size: var(--logo-sub, .62rem); font-weight: 600; color: var(--muted); }
.logo-sub.is-caps { letter-spacing: .1em; text-transform: uppercase; }

/* Sélecteur de langue */
.lang { position: relative; flex: none; }
.lang-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  background: none; border: 1px solid var(--border); cursor: pointer;
  border-radius: 999px; padding: .38rem .6rem;
  font-size: .8rem; font-weight: 650; color: var(--fg);
  transition: border-color .18s, color .18s;
}
.lang-btn:hover, .lang-btn[aria-expanded="true"] { border-color: var(--primary); color: var(--primary); }
.lang-flag { font-size: 1rem; line-height: 1; }
.lang-code { letter-spacing: .04em; }
.lang-drop {
  position: absolute;
  top: calc(100% + .4rem);
  inset-inline-end: 0;
  min-width: 12rem;
  max-height: 60vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: .4rem;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s, transform .18s, visibility .18s;
  z-index: 60;
}
.lang.is-open .lang-drop { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-drop a {
  display: flex; align-items: center; gap: .55rem;
  padding: .5rem .65rem;
  border-radius: var(--radius);
  font-size: .875rem; color: var(--fg);
}
.lang-drop a:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.lang-drop a.is-active { color: var(--primary); font-weight: 700; }
.lang-drop a .ic-xs { margin-inline-start: auto; }

.m-langs { display: flex; flex-wrap: wrap; gap: .5rem; padding: 1rem 0; border-top: 1px solid var(--border); }
.m-langs a {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .7rem; border: 1px solid var(--border); border-radius: 999px;
  font-size: .8rem; font-weight: 600;
}
.m-langs a.is-active { border-color: var(--primary); color: var(--primary); }

/* Bandeau injecté par Google Traduction */
.goog-te-banner-frame, .skiptranslate iframe { display: none !important; }
body { top: 0 !important; }

.nav-links { display: none; align-items: center; gap: 1.4rem; }
@media (min-width: 1100px) { .nav-links { display: flex; } }

.nav-item { position: relative; }
.nav-trigger {
  display: inline-flex; align-items: center; gap: .3rem;
  background: none; border: 0; cursor: pointer;
  padding: .5rem 0;
  font-size: .9rem; font-weight: 650;
  color: color-mix(in srgb, var(--fg) 72%, transparent);
  transition: color .18s;
}
.nav-item:hover .nav-trigger,
.nav-trigger[aria-expanded="true"] { color: var(--primary); }
.nav-trigger .ic-xs { transition: transform .2s; }
.nav-item:hover .nav-trigger .ic-xs { transform: rotate(180deg); }

.nav-drop {
  position: absolute;
  top: 100%;
  left: -.75rem;
  margin-top: .35rem;
  min-width: 19rem;
  max-height: 70vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: .55rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .16s, transform .16s, visibility .16s;
}
.nav-item:hover .nav-drop,
.nav-item:focus-within .nav-drop { opacity: 1; visibility: visible; transform: translateY(0); }

.nav-drop a {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .7rem;
  border-radius: var(--radius);
  transition: background .16s;
}
.nav-drop a:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.nav-drop .icon-chip {
  width: 1.8rem; height: 1.8rem; flex: none;
  display: grid; place-items: center;
  border-radius: .5rem;
  background: color-mix(in srgb, var(--primary) 11%, transparent);
  color: var(--primary);
}
.nav-drop .icon-chip .ic { width: .9rem; height: .9rem; }
.nav-drop b { display: block; font-size: .875rem; font-weight: 650; }
.nav-drop span { display: block; font-size: .75rem; color: var(--muted); }

.nav-actions { display: flex; align-items: center; gap: .6rem; flex: none; }
.nav-burger {
  display: inline-grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  background: none; border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer;
}
@media (min-width: 1100px) { .nav-burger { display: none; } }
@media (max-width: 1099px) { .nav-actions .btn--primary { display: none; } }

/* --- Téléphones : l'en-tête tient dans la largeur, sans défilement latéral ---
   Le sélecteur de langue est déjà proposé en entier dans le menu déroulant, et
   le sous-titre du logo est décoratif : on les met de côté pour laisser la
   place au nom, à la recherche et au menu. */
@media (max-width: 599px) {
  .nav { gap: .6rem; }
  .site-header .lang { display: none; }
  .site-header .logo-sub { display: none; }
  .site-header .logo-text { overflow: hidden; }
  .site-header .logo-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .site-header .logo-img { max-height: 2.4rem; }
}

/* --- Menu mobile --- */

.mobile-menu {
  display: none;
  border-top: 1px solid var(--border);
  background: #fff;
  max-height: 78vh;
  overflow-y: auto;
  padding: 1rem 1.25rem 1.75rem;
}
.mobile-menu.is-open { display: block; }
@media (min-width: 1100px) { .mobile-menu { display: none !important; } }

.m-group + .m-group { border-top: 1px solid var(--border); }
.m-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: .85rem .25rem; background: none; border: 0; cursor: pointer;
  font-size: .95rem; font-weight: 700;
}
.m-toggle .ic-sm { transition: transform .2s; }
.m-toggle[aria-expanded="true"] .ic-sm { transform: rotate(180deg); }
.m-panel { display: none; padding: 0 0 .75rem .75rem; }
.m-panel.is-open { display: block; }
.m-panel a { display: block; padding: .5rem .5rem; border-radius: var(--radius); font-size: .9rem; color: var(--muted); }
.m-panel a:hover { background: var(--secondary); color: var(--fg); }
.m-contact { margin-top: 1rem; display: grid; gap: .5rem; font-size: .85rem; color: var(--muted); }

/* ==================================================================
   Héro
   ================================================================== */

.hero {
  position: relative;
  background: var(--dark);
  color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: min(94vh, 900px);
}

.hero-bg { position: absolute; inset: 0; overflow: hidden; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .18; }
.hero-glow-1,
.hero-glow-2,
.hero-tint-1,
.hero-tint-2,
.hero-grid { position: absolute; inset: 0; pointer-events: none; }

.hero-tint-1 {
  background: radial-gradient(ellipse at top left,
    color-mix(in srgb, var(--primary) 42%, transparent) 0%, transparent 60%);
}
.hero-tint-2 {
  background: radial-gradient(ellipse at bottom right,
    color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 60%);
}
.hero-grid {
  opacity: .045;
  background-image:
    linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 1px);
  background-size: 60px 60px;
}
.hero-line {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 55%, transparent), transparent);
}
.hero-glow-1,
.hero-glow-2 {
  inset: auto;
  border-radius: 50%;
  filter: blur(80px);
}
.hero-glow-1 {
  top: 20%; right: 18%;
  width: 24rem; height: 24rem;
  background: color-mix(in srgb, var(--primary) 26%, transparent);
  animation: pulse-slow 8s ease-in-out infinite;
}
.hero-glow-2 {
  bottom: 18%; left: 16%;
  width: 17rem; height: 17rem;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  animation: pulse-slow 6s ease-in-out infinite reverse;
}
@keyframes pulse-slow {
  0%, 100% { transform: scale(1); opacity: .4; }
  50% { transform: scale(1.18); opacity: .62; }
}

.hero-body {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  padding-block: 5.5rem 4rem;
}
.hero-inner { max-width: 60rem; }

.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .38rem 1rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 2rem;
}
.hero-dot {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--accent);
  animation: blink 2s ease-in-out infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.hero h1 { margin-bottom: 1.5rem; }
.hero-sub { max-width: 46rem; margin-bottom: 1.75rem; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
.chip {
  font-size: .8rem; font-weight: 650;
  padding: .35rem 1rem;
  border-radius: var(--radius-pill);
  color: var(--accent-soft);
  background: color-mix(in srgb, var(--accent) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}

.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 3.25rem; }
/* Sur un petit téléphone, un libellé long (« View Enterprise Solutions ») est
   plus large que l'écran : les boutons passent l'un sous l'autre, pleine
   largeur, et le texte peut aller à la ligne. */
@media (max-width: 599px) {
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn {
    width: 100%;
    height: auto;
    min-height: 2.75rem;
    padding-block: .55rem;
    white-space: normal;
    text-align: center;
  }
}

.hero-stats { display: flex; flex-wrap: wrap; gap: 2.25rem; margin-bottom: 1.75rem; }
.hero-stat b { display: block; font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 800; }
.hero-stat span {
  display: block; font-size: .68rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255, 255, 255, .48);
}

.hero-strip {
  position: relative; z-index: 2;
  border-top: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(10px);
  padding-block: 1.1rem;
}
.hero-strip .wrap {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: .5rem 1.25rem; text-align: center;
}
.hero-strip span { font-size: .72rem; font-weight: 650; color: rgba(255, 255, 255, .5); }
.hero-strip .dot { color: rgba(255, 255, 255, .25); }

/* ==================================================================
   Cartes
   ================================================================== */

.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.card--hover:hover {
  border-color: color-mix(in srgb, var(--primary) 32%, transparent);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.card--flat { box-shadow: none; }
.card__title { font-size: 1.075rem; font-weight: 700; margin-bottom: .75rem; }
.card__text { font-size: .9rem; color: var(--muted); line-height: 1.65; flex: 1; }
.card__foot { margin-top: 1.25rem; }

.icon-box {
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
  margin-bottom: 1.25rem;
  transition: transform .25s;
}
.card--hover:hover .icon-box { transform: scale(1.1); }
.icon-box--lg { width: 3.5rem; height: 3.5rem; }
.icon-box--solid { background: var(--primary); color: #fff; }

.tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.25rem; }
.tag {
  font-size: .72rem; font-weight: 600;
  padding: .25rem .625rem;
  border-radius: .4rem;
  background: var(--secondary);
  color: var(--muted);
}
.tag--primary {
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 16%, transparent);
}

/* --- Statistiques + badges --- */

.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.25rem 1rem;
  text-align: center;
  transition: border-color .2s, box-shadow .2s;
}
.stat-card:hover { border-color: color-mix(in srgb, var(--primary) 30%, transparent); box-shadow: var(--shadow); }
.stat-card b { display: block; font-size: 1.7rem; font-weight: 800; color: var(--primary); line-height: 1.2; }
.stat-card strong { display: block; font-size: .75rem; font-weight: 700; margin-top: .25rem; }
.stat-card span { display: block; font-size: .72rem; color: var(--muted); line-height: 1.5; margin-top: .25rem; }

.badge-card {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .9rem;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--primary) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
  transition: background .2s;
}
.badge-card:hover { background: color-mix(in srgb, var(--primary) 9%, transparent); }
.badge-card .icon-chip {
  width: 2rem; height: 2rem; flex: none;
  display: grid; place-items: center;
  border-radius: .5rem;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
}
.badge-card .icon-chip .ic { width: 1rem; height: 1rem; }
.badge-card b { display: block; font-size: .78rem; font-weight: 700; }
.badge-card span { display: block; font-size: .74rem; color: var(--muted); margin-top: .1rem; }

.note-box {
  margin-top: 3.5rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem;
  padding: 2rem;
  border-radius: var(--radius-xl);
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--primary) 4%, transparent),
    color-mix(in srgb, var(--primary) 9%, transparent),
    color-mix(in srgb, var(--primary) 4%, transparent));
}
.note-box .icon-box { margin-bottom: 0; }
.note-box__body { flex: 1 1 22rem; }
.note-box__body h3 { font-size: 1.075rem; margin-bottom: .35rem; }
.note-box__body p { font-size: .875rem; color: var(--muted); line-height: 1.65; }
.note-box__tags { display: flex; flex-direction: column; gap: .5rem; }
.pill-check {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .74rem; font-weight: 650;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border-radius: var(--radius-pill);
  padding: .28rem .8rem;
}

/* --- Cartes services (accent par service) --- */

.service-card .icon-box {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--acc, var(--primary)) 22%, transparent),
    color-mix(in srgb, var(--acc, var(--primary)) 5%, transparent));
  color: var(--acc, var(--primary));
}

/* --- Tuiles industries --- */

.tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: .9rem;
  padding: 1.6rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: #fff;
  height: 100%;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.tile:hover {
  border-color: color-mix(in srgb, var(--primary) 32%, transparent);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.tile .icon-box { margin-bottom: 0; }
.tile:hover .icon-box { transform: scale(1.1); }
.tile b { font-size: .875rem; font-weight: 700; }
.tile:hover b { color: var(--primary); }

/* --- Sélecteur de besoin --- */

.finder-tabs { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 2rem; }
@media (min-width: 1024px) { .finder-tabs { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
.finder-tab {
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
  padding: 1.5rem 1rem; text-align: center;
  background: #fff; cursor: pointer;
  border: 2px solid var(--border);
  border-radius: var(--radius-xl);
  transition: all .25s;
}
.finder-tab:hover { border-color: color-mix(in srgb, var(--primary) 32%, transparent); box-shadow: var(--shadow); }
.finder-tab[aria-selected="true"] {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 5%, transparent);
  box-shadow: var(--shadow-lg);
  transform: scale(1.03);
}
.finder-tab .icon-box { margin-bottom: 0; }
.finder-tab[aria-selected="true"] .icon-box { background: var(--primary); color: #fff; }
.finder-tab b { font-size: .85rem; font-weight: 700; line-height: 1.3; }

.finder-panel {
  display: none;
  position: relative;
  background: #fff;
  border: 2px solid color-mix(in srgb, var(--primary) 20%, transparent);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 2rem;
}
.finder-panel.is-active { display: block; animation: fade-up .3s ease both; }
.finder-panel h3 { font-size: 1.5rem; margin-bottom: .75rem; }
.finder-links { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.5rem 0 1.75rem; }
.finder-links a {
  font-size: .85rem; font-weight: 650; color: var(--primary);
  background: color-mix(in srgb, var(--primary) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 15%, transparent);
  border-radius: var(--radius);
  padding: .5rem 1rem;
  transition: background .18s, border-color .18s;
}
.finder-links a:hover {
  background: color-mix(in srgb, var(--primary) 11%, transparent);
  border-color: color-mix(in srgb, var(--primary) 32%, transparent);
}

/* --- Schéma d'architecture --- */

.flowchart {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2rem;
}
.flowchart__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1rem;
}
.flow-node { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 10rem; }
.flow-node .icon-box { width: 3.5rem; height: 3.5rem; margin-bottom: .75rem; }
.flow-node b { font-size: .85rem; font-weight: 700; }
.flow-node span { font-size: .74rem; color: var(--muted); margin-top: .15rem; }
.flow-link { width: 2rem; height: 1px; background: color-mix(in srgb, var(--primary) 35%, transparent); flex: none; }
@media (max-width: 860px) { .flow-link { display: none; } }

/* --- Produits --- */

.product-card { padding: 0; overflow: hidden; }
.product-card__media {
  display: grid; place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.product-card__media img {
  width: 100%; height: 100%; object-fit: contain;
  transition: transform .6s;
}
.card--hover:hover .product-card__media img { transform: scale(1.06); }
.product-card__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.product-card__cat {
  font-size: .68rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--primary); margin-bottom: .5rem;
}
.product-actions { display: flex; gap: .6rem; margin-top: 1.5rem; }
.product-actions .btn { flex: 1; }

.spec-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.spec-table tr + tr { border-top: 1px solid var(--border); }
.spec-table th {
  text-align: left; font-weight: 650; color: var(--muted);
  padding: .75rem 1rem .75rem 0; width: 42%; vertical-align: top;
}
.spec-table td { padding: .75rem 0; font-weight: 600; }

.kpi-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.kpi {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  padding: 1rem 1.15rem;
}
.kpi span { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.kpi b { display: block; font-size: 1.05rem; font-weight: 750; margin-top: .3rem; color: var(--primary); }

/* --- Filtres --- */

.filters { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 2.5rem; }
.filter-pill {
  font-size: .82rem; font-weight: 650;
  padding: .45rem 1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: #fff; color: var(--muted);
  transition: all .18s;
}
.filter-pill:hover { border-color: color-mix(in srgb, var(--primary) 35%, transparent); color: var(--fg); }
.filter-pill.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }

.searchbar { display: flex; gap: .5rem; margin-left: auto; }
.searchbar input {
  height: 2.4rem; width: min(16rem, 60vw);
  padding: 0 .9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
}
.searchbar input:focus { outline: none; border-color: var(--primary); }

/* --- Articles --- */

.post-card { padding: 0; overflow: hidden; }
.post-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--card); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.card--hover:hover .post-card__media img { transform: scale(1.05); }
.post-card__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.post-meta {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  font-size: .72rem; color: var(--muted); margin-bottom: .75rem;
}
.post-meta .tag--primary { font-size: .68rem; }

.pagination { display: flex; justify-content: center; gap: .4rem; margin-top: 3rem; flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  padding-inline: .7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .875rem; font-weight: 650;
}
.pagination a:hover { border-color: var(--primary); color: var(--primary); }
.pagination .is-current { background: var(--primary); border-color: var(--primary); color: #fff; }

/* --- Accordéon FAQ --- */

.accordion { display: grid; gap: .75rem; }
.acc-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #fff;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.acc-item[open] { border-color: color-mix(in srgb, var(--primary) 30%, transparent); box-shadow: var(--shadow); }
.acc-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.35rem;
  cursor: pointer;
  font-weight: 650; font-size: .95rem;
  list-style: none;
}
.acc-item summary::-webkit-details-marker { display: none; }
.acc-item summary .ic-sm { color: var(--primary); transition: transform .22s; flex: none; }
.acc-item[open] summary .ic-sm { transform: rotate(180deg); }
.acc-item .acc-body { padding: 0 1.35rem 1.3rem; font-size: .9rem; color: var(--muted); line-height: 1.7; }

/* --- Cas clients --- */

.case-card { display: flex; flex-direction: column; gap: 1rem; }
.case-card .icon-box { margin-bottom: 0; }
.case-sector {
  font-size: .68rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--primary);
}
.case-region {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .74rem; color: var(--muted); margin-top: auto; padding-top: 1rem;
}

/* ==================================================================
   Bandeaux CTA
   ================================================================== */

.cta-dark {
  position: relative;
  background: var(--dark);
  color: #fff;
  overflow: hidden;
  padding-block: 5.5rem;
}
.cta-dark .hero-tint-1,
.cta-dark .hero-grid { position: absolute; inset: 0; }
.cta-dark .wrap { position: relative; z-index: 2; text-align: center; }
.cta-dark h2 { margin-bottom: 1.25rem; }
.cta-dark .lead { max-width: 42rem; margin-inline: auto; color: rgba(255, 255, 255, .6); }
.cta-buttons { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; margin-top: 2.25rem; }

.cta-soft {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--primary) 6%, transparent),
    color-mix(in srgb, var(--accent) 5%, transparent));
  border: 1px solid color-mix(in srgb, var(--primary) 16%, transparent);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  text-align: center;
}

/* ==================================================================
   En-tête de page interne
   ================================================================== */

.page-hero {
  position: relative;
  background: var(--dark);
  color: #fff;
  overflow: hidden;
  padding-block: 6.5rem 3.5rem;
}
.page-hero .hero-tint-1,
.page-hero .hero-grid { position: absolute; inset: 0; }
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero h1 { max-width: 46rem; margin-bottom: 1rem; }
.page-hero .lead { max-width: 46rem; color: rgba(255, 255, 255, .6); }

.breadcrumb {
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
  font-size: .78rem; color: rgba(255, 255, 255, .45);
  margin-bottom: 1.25rem;
}
.breadcrumb a:hover { color: #fff; }

/* ==================================================================
   Contenu riche
   ================================================================== */

.prose { font-size: 1rem; line-height: 1.75; color: #26354b; }
.prose > * + * { margin-top: 1.1rem; }
.prose h2 { font-size: 1.6rem; margin-top: 2.5rem; }
.prose h3 { font-size: 1.25rem; margin-top: 2rem; }
.prose h4 { font-size: 1.05rem; margin-top: 1.5rem; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.35rem; display: grid; gap: .5rem; }
.prose li { line-height: 1.7; }
.prose ul li::marker { color: var(--primary); }
.prose ol li::marker { color: var(--primary); font-weight: 700; }
.prose strong { font-weight: 700; color: var(--fg); }
.prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.prose code {
  background: var(--secondary); padding: .12em .4em;
  border-radius: .3rem; font-size: .9em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.prose blockquote {
  border-left: 3px solid var(--primary);
  padding-left: 1.15rem; color: var(--muted); font-style: italic;
}
.prose img { border-radius: var(--radius-lg); }
.prose hr { border: 0; border-top: 1px solid var(--border); margin-block: 2rem; }

/* ==================================================================
   Formulaires
   ================================================================== */

.form-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 2rem;
}
.form-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .8rem; font-weight: 700; }
.field .req { color: #dc2626; }
.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  padding: .7rem .9rem;
  font-size: .925rem;
  transition: border-color .18s, box-shadow .18s;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}
.field small { font-size: .75rem; color: var(--muted); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.check {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .82rem; color: var(--muted); line-height: 1.55;
}
.check input { width: 1rem; height: 1rem; margin-top: .2rem; accent-color: var(--primary); flex: none; }

.alert {
  border-radius: var(--radius-lg);
  padding: 1rem 1.15rem;
  font-size: .9rem;
  margin-bottom: 1.5rem;
  border: 1px solid;
}
.alert--ok { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.alert--err { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.alert ul { padding-left: 1.1rem; margin-top: .35rem; }

.contact-info { display: grid; gap: 1rem; }
.contact-row {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
}
.contact-row .icon-chip {
  width: 2.4rem; height: 2.4rem; flex: none;
  display: grid; place-items: center;
  border-radius: .6rem;
  background: color-mix(in srgb, var(--primary) 11%, transparent);
  color: var(--primary);
}
.contact-row b { display: block; font-size: .8rem; font-weight: 700; }
.contact-row span, .contact-row a { display: block; font-size: .875rem; color: var(--muted); margin-top: .15rem; }
.contact-row a:hover { color: var(--primary); }

/* ==================================================================
   Pied de page
   ================================================================== */

.site-footer { background: var(--dark); color: #fff; }
.footer-top { padding-block: 4rem; }
.footer-grid {
  display: grid; gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.footer-brand { grid-column: span 2; min-width: 240px; }
@media (max-width: 700px) { .footer-brand { grid-column: auto; } }
.footer-brand .logo-name { color: #fff; }
.footer-brand .logo-sub { color: rgba(255, 255, 255, .4); }
.footer-about { font-size: .875rem; color: rgba(255, 255, 255, .5); line-height: 1.7; margin: 1.25rem 0 1.5rem; max-width: 22rem; }
.footer-contact { display: grid; gap: .75rem; margin-bottom: 1.5rem; }
.footer-contact div { display: flex; align-items: flex-start; gap: .6rem; font-size: .875rem; color: rgba(255, 255, 255, .5); }
.footer-contact .ic-sm { color: rgba(255, 255, 255, .3); margin-top: .15rem; }
.footer-contact a:hover { color: #fff; }

.socials { display: flex; gap: .6rem; }
.socials a {
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border-radius: .55rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .5);
  transition: all .2s;
}
.socials a:hover { color: #fff; background: color-mix(in srgb, var(--primary) 35%, transparent); }
.socials a.wa:hover { background: rgba(37, 211, 102, .3); }

.footer-col h4 {
  font-size: .68rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255, 255, 255, .3);
  margin-bottom: 1.25rem;
}
.footer-col a { display: block; font-size: .85rem; color: rgba(255, 255, 255, .5); padding-block: .3rem; }
.footer-col a:hover { color: #fff; }
.footer-flags { margin-top: 2rem; display: grid; gap: .5rem; }
.footer-flags div { display: flex; align-items: center; gap: .5rem; font-size: .72rem; color: rgba(255, 255, 255, .3); }

.footer-disclaimer { border-top: 1px solid rgba(255, 255, 255, .05); padding-block: 1.5rem; }
.footer-disclaimer p {
  font-size: .69rem; line-height: 1.65;
  color: rgba(255, 255, 255, .25);
  text-align: center; max-width: 60rem; margin-inline: auto;
}
.footer-disclaimer strong { color: rgba(255, 255, 255, .35); }

.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding-block: 1.25rem; }
.footer-bottom .wrap {
  display: flex; flex-wrap: wrap; gap: .75rem 1rem;
  align-items: center; justify-content: space-between;
}
.footer-bottom p { font-size: .74rem; color: rgba(255, 255, 255, .3); }
.footer-legal { display: flex; flex-wrap: wrap; gap: .5rem .85rem; font-size: .74rem; color: rgba(255, 255, 255, .25); }
.footer-legal a:hover { color: rgba(255, 255, 255, .6); }

/* ==================================================================
   Bulle WhatsApp
   ================================================================== */

.wa-widget { position: relative; display: flex; flex-direction: column; align-items: inherit; }
.wa-card {
  /* Hors du flux : replié, il ne réserve aucune hauteur — sinon la bulle
     serait poussée vers le haut de l'écran. */
  position: absolute;
  bottom: calc(100% + .75rem);
  width: 18rem;
  max-width: calc(100vw - 2.5rem);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  display: none;
  animation: fade-up .25s ease both;
}
.wa-card.is-open { display: block; }
.wa-card__head { background: #25d366; color: #fff; padding: .9rem 1rem; display: flex; align-items: center; gap: .7rem; }
.wa-card__head b { font-size: .875rem; display: block; }
.wa-card__head span { font-size: .72rem; opacity: .85; }
.wa-card__body { padding: 1rem; font-size: .85rem; color: var(--muted); line-height: 1.6; }
.wa-card__body .btn { margin-top: .9rem; background: #25d366; color: #fff; width: 100%; }
.wa-card__body .btn:hover { background: #1eb855; }
.wa-fab {
  width: 3.4rem; height: 3.4rem;
  border: 0; border-radius: 50%;
  background: #25d366; color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: 0 12px 28px -8px rgba(37, 211, 102, .6);
  transition: transform .2s;
}
.wa-fab:hover { transform: scale(1.07); }
.wa-fab .ic { width: 1.6rem; height: 1.6rem; }

/* ==================================================================
   Animations d'apparition
   ================================================================== */

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ==================================================================
   Divers
   ================================================================== */

.empty-state {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: var(--radius-xl);
}

.two-col { display: grid; gap: 3rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) { .two-col { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 4rem; } }
.sidebar { display: grid; gap: 1.5rem; align-content: start; }
@media (min-width: 980px) { .sidebar { position: sticky; top: 6rem; } }

.side-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  padding: 1.5rem;
}
.side-card h4 { font-size: .95rem; margin-bottom: 1rem; }
.side-card a { display: block; font-size: .875rem; color: var(--muted); padding-block: .35rem; }
.side-card a:hover { color: var(--primary); }

/* ==================================================================
   Sens d'écriture de droite à gauche (arabe)
   La plupart des blocs utilisent flex/grid et se retournent seuls ;
   seules les positions absolues et les flèches ont besoin d'aide.
   ================================================================== */

[dir="rtl"] .nav-drop { left: auto; right: -.75rem; }
[dir="rtl"] .skip-link { left: auto; right: -9999px; }
[dir="rtl"] .skip-link:focus { right: 0; }
[dir="rtl"] .hp { left: auto; right: -9999px; }
[dir="rtl"] .wa-widget { right: auto; left: 1.25rem; align-items: flex-start; }
[dir="rtl"] .spec-table th { text-align: right; }

/* Flèches « suivant » : elles doivent pointer vers le sens de lecture */
[dir="rtl"] .link-arrow svg,
[dir="rtl"] .btn svg.ic-xs,
[dir="rtl"] .btn svg.ic-sm { transform: scaleX(-1); }
[dir="rtl"] .nav-trigger .ic-xs,
[dir="rtl"] .lang-btn .ic-xs,
[dir="rtl"] .acc-item summary svg,
[dir="rtl"] .m-toggle svg { transform: none; }
[dir="rtl"] .nav-item:hover .nav-trigger .ic-xs { transform: rotate(180deg); }
[dir="rtl"] .pagination a,
[dir="rtl"] .pagination span { direction: ltr; }

/* Le contenu latin (références produit, specs) reste lisible */
[dir="rtl"] .spec-table td,
[dir="rtl"] .kpi b { unicode-bidi: plaintext; }

/* ==================================================================
   En-tête de section avec lien à droite
   ================================================================== */

.sec-head--split {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: none;
}
@media (min-width: 640px) {
  .sec-head--split { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .sec-head--split .link-arrow { white-space: nowrap; padding-bottom: .35rem; }
}

/* ==================================================================
   Scénarios de déploiement (page d'accueil)
   ================================================================== */

.scenario-card { display: flex; flex-direction: column; gap: 1.1rem; padding: 1.75rem; }
.scenario-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.scenario-tags { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.tag--soft {
  background: var(--secondary);
  color: var(--muted);
  border-radius: var(--radius-pill);
  padding: .2rem .7rem;
  font-size: .7rem;
  font-weight: 700;
  border: 0;
}
.scenario-card__title { font-size: 1.02rem; font-weight: 800; line-height: 1.4; }
.scenario-outcome {
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: .875rem; font-weight: 550; line-height: 1.55;
  color: #16a34a;
  margin-top: auto;
}
.scenario-outcome svg { flex: none; margin-top: .15rem; }

.icon-box--tint-1 { background: color-mix(in srgb, #3b82f6 12%, transparent); color: #2563eb; }
.icon-box--tint-2 { background: color-mix(in srgb, #8b5cf6 12%, transparent); color: #7c3aed; }
.icon-box--tint-3 { background: color-mix(in srgb, #10b981 12%, transparent); color: #059669; }
.icon-box--tint-4 { background: color-mix(in srgb, #f97316 14%, transparent); color: #ea580c; }

/* ==================================================================
   Section « Nos solutions » (bloc de liens)
   ================================================================== */

.hub-section .sec-head { max-width: 56rem; }
.hub-intro { font-size: 1rem; line-height: 1.8; }

.hub-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s, border-color .25s;
  display: flex; flex-direction: column; gap: 1rem;
}
.hub-card:hover { box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--primary) 22%, var(--border)); }
.hub-card__head { display: flex; align-items: flex-start; gap: 1rem; }
.hub-card__head h3 { font-size: 1.075rem; font-weight: 800; line-height: 1.35; }
.hub-card__text { font-size: .9rem; line-height: 1.75; color: var(--muted); }
.hub-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; }
.hub-links a {
  font-size: .74rem; font-weight: 700;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, transparent);
  border-radius: var(--radius);
  padding: .4rem .75rem;
  transition: background .18s;
}
.hub-links a:hover { background: color-mix(in srgb, var(--primary) 13%, transparent); }
.hub-foot {
  margin-top: 3rem; text-align: center;
  font-size: .9rem; color: var(--muted); line-height: 1.9;
}
.hub-foot a { color: var(--primary); font-weight: 700; }
.hub-foot a:hover { text-decoration: underline; }

/* ==================================================================
   Recherche
   ================================================================== */

.site-search { position: relative; flex: none; }
.search-trigger {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--secondary); border: 1px solid var(--border); cursor: pointer;
  border-radius: var(--radius); padding: .4rem .6rem;
  font-size: .8rem; color: var(--muted);
  transition: border-color .18s, color .18s;
}
.search-trigger:hover { border-color: var(--primary); color: var(--primary); }
.search-trigger__text { display: none; }
.search-trigger kbd {
  display: none;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .68rem; line-height: 1;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 4px; padding: .15rem .3rem;
}
@media (min-width: 1280px) {
  .search-trigger__text, .search-trigger kbd { display: block; }
}

.search-panel {
  position: absolute;
  top: calc(100% + .5rem);
  inset-inline-end: 0;
  width: 30rem;
  max-width: calc(100vw - 2rem);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  z-index: 70;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s, transform .18s, visibility .18s;
}
.site-search.is-open .search-panel { opacity: 1; visibility: visible; transform: translateY(0); }

.search-panel__bar {
  display: flex; align-items: center; gap: .6rem;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
}
.search-panel__bar input {
  flex: 1; min-width: 0;
  border: 0; outline: none; background: none;
  font-size: .9rem; color: var(--fg);
}
.search-panel__bar input::-webkit-search-cancel-button { display: none; }
.search-clear { background: none; border: 0; cursor: pointer; color: var(--muted); display: flex; }
.search-clear:hover { color: var(--fg); }
.search-esc {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .65rem;
  border: 1px solid var(--border); border-radius: 4px; padding: .15rem .3rem; color: var(--muted);
}

.search-results { max-height: 26rem; overflow-y: auto; padding: .4rem; }
.search-hint { text-align: center; font-size: .8rem; color: var(--muted); padding: 2rem 1rem; }
.search-group-label {
  font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); padding: .7rem .75rem .3rem;
}
.search-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .55rem .75rem; border-radius: var(--radius);
}
.search-row:hover { background: var(--secondary); }
.search-row__thumb {
  width: 2.25rem; height: 2.25rem; flex: none;
  border-radius: .5rem; background: var(--card);
  display: grid; place-items: center; overflow: hidden;
  border: 1px solid var(--border);
}
.search-row__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.search-row__thumb--icon { color: var(--primary); }
.search-row__thumb--icon::after {
  content: ""; width: .55rem; height: .55rem; border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 45%, transparent);
}
.search-row__body { min-width: 0; display: flex; flex-direction: column; }
.search-row__body b { font-size: .875rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-row__body span { font-size: .74rem; color: var(--muted); }
.search-all {
  display: block; text-align: center;
  font-size: .8rem; font-weight: 700; color: var(--primary);
  padding: .8rem; margin-top: .3rem;
  border-top: 1px solid var(--border);
}
.search-spinner {
  width: 1.4rem; height: 1.4rem; margin: 2.5rem auto;
  border: 2px solid color-mix(in srgb, var(--primary) 20%, transparent);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.m-search {
  display: flex; align-items: center; gap: .5rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: .6rem .75rem; margin-bottom: 1rem; color: var(--muted);
}
.m-search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: .9rem; }

/* --- Page de résultats --- */
.searchbar--page { margin-left: 0; margin-bottom: 2.5rem; }
.searchbar--page input { flex: 1; }
.search-group { margin-bottom: 3rem; }
.search-group__title { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.pill-count {
  font-size: .7rem; font-weight: 700; color: var(--muted);
  background: var(--secondary); border-radius: var(--radius-pill); padding: .1rem .55rem;
}
.search-list { display: grid; gap: .5rem; }
.search-item {
  display: flex; align-items: center; gap: 1rem;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: .9rem 1.1rem; background: var(--white);
  transition: border-color .18s, box-shadow .18s;
}
.search-item:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); box-shadow: var(--shadow-sm); }
.search-item__thumb {
  width: 3rem; height: 3rem; flex: none; border-radius: .6rem;
  background: var(--card); border: 1px solid var(--border);
  display: grid; place-items: center; overflow: hidden; color: var(--primary);
}
.search-item__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.search-item__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; }
.search-item__body b { font-size: .95rem; }
.search-item__sub { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.search-item__excerpt { font-size: .82rem; color: var(--muted); }
.search-item > svg { color: var(--muted); flex: none; }

/* ==================================================================
   Bulles flottantes : WhatsApp + chat
   ================================================================== */

.floaters {
  position: fixed; bottom: 1.25rem; z-index: 90;
  display: flex; flex-direction: column; gap: .75rem;
}
.floaters--right { right: 1.25rem; align-items: flex-end; }
.floaters--left { left: 1.25rem; align-items: flex-start; }

/* Les panneaux s'alignent sur le bord de la bulle du côté où il y a la place.
   (Après un déplacement, le script ajuste ce côté au pixel.) */
.floaters--right .wa-card, .floaters--right .chat-panel { inset-inline-end: 0; }
.floaters--left .wa-card, .floaters--left .chat-panel { inset-inline-start: 0; }

/* Cible tactile confortable : 2 rem au doigt, un peu plus sur téléphone. */
.wa-close {
  background: none; border: 0; cursor: pointer; color: rgba(255,255,255,.7);
  margin-inline-start: auto;
  width: 2rem; height: 2rem; padding: 0;
  display: grid; place-items: center;
  border-radius: 8px;
}
.wa-close:hover { color: #fff; background: rgba(255, 255, 255, .16); }

/* --- Fenêtre de chat --- */
.chat-widget { position: relative; display: flex; flex-direction: column; align-items: inherit; }

.chat-panel {
  /* Hors du flux, comme la carte WhatsApp : la pile des bulles reste collée
     au coin de l'écran, panneaux ouverts ou fermés. */
  position: absolute;
  bottom: calc(100% + .75rem);
  width: 21.5rem;
  max-width: calc(100vw - 2.5rem);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.98);
  transition: opacity .2s, transform .2s, visibility .2s;
  transform-origin: bottom right;
}
.chat-widget.is-open .chat-panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

.chat-panel__head {
  display: flex; align-items: center; gap: .7rem;
  padding: .9rem 1rem;
  background: var(--dark); color: #fff;
}
.chat-avatar {
  width: 2rem; height: 2rem; flex: none; border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 75%, transparent);
  display: grid; place-items: center;
}
.chat-panel__id { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.chat-panel__id b { font-size: .875rem; }
.chat-panel__id span { font-size: .7rem; color: rgba(255,255,255,.55); }
.chat-close {
  background: none; border: 0; cursor: pointer; color: rgba(255,255,255,.65);
  margin-inline-start: auto;
  width: 2rem; height: 2rem; padding: 0;
  display: grid; place-items: center;
  border-radius: 8px;
}
.chat-close:hover { color: #fff; }

/* Réduire + fermer, côte à côte dans l'en-tête */
.chat-panel__actions { margin-inline-start: auto; display: flex; align-items: center; gap: .15rem; }
.chat-panel__actions .chat-close { margin-inline-start: 0; }
.chat-panel__actions .chat-close:hover { background: rgba(255, 255, 255, .14); }

/* Au doigt, on visse un peu plus grand. */
@media (max-width: 599px) {
  .chat-close, .wa-close { width: 2.35rem; height: 2.35rem; }
}

.chat-body {
  height: 20rem; overflow-y: auto;
  padding: 1rem; display: flex; flex-direction: column; gap: .85rem;
  background: var(--card);
}
.chat-msg { display: flex; flex-direction: column; gap: .2rem; max-width: 88%; }
.chat-msg__who { font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.chat-msg__bubble {
  font-size: .85rem; line-height: 1.6;
  padding: .6rem .85rem;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--border);
  word-wrap: break-word;
}
.chat-msg--visitor { align-self: flex-end; align-items: flex-end; }
.chat-msg--visitor .chat-msg__bubble { background: var(--primary); border-color: var(--primary); color: #fff; }
.chat-msg--system { align-self: center; max-width: 100%; }
.chat-msg--system .chat-msg__bubble {
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  border-color: color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--primary); font-size: .8rem; text-align: center;
}
/* Réponse rédigée par l'assistant IA : même place que le robot, teinte propre. */
.chat-msg--ai .chat-msg__bubble {
  background: color-mix(in srgb, var(--accent, var(--primary)) 6%, var(--white));
  border-color: color-mix(in srgb, var(--accent, var(--primary)) 22%, transparent);
}

.chat-loading { display: flex; gap: .3rem; justify-content: center; padding: 2rem 0; }
.chat-loading span {
  width: .45rem; height: .45rem; border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 45%, transparent);
  animation: chat-bounce 1.2s infinite;
}
.chat-loading span:nth-child(2) { animation-delay: .15s; }
.chat-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes chat-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }

.chat-quick {
  display: flex; flex-wrap: wrap; gap: .35rem;
  padding: .7rem 1rem; border-top: 1px solid var(--border); background: var(--white);
  max-height: 8rem; overflow-y: auto;
}
.chat-quick button {
  font-size: .74rem; font-weight: 600; text-align: start;
  color: var(--primary); cursor: pointer;
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 16%, transparent);
  border-radius: var(--radius-pill);
  padding: .32rem .7rem;
}
.chat-quick button:hover { background: color-mix(in srgb, var(--primary) 14%, transparent); }

.chat-form { display: flex; align-items: center; gap: .5rem; padding: .7rem; border-top: 1px solid var(--border); }
.chat-form input {
  flex: 1; min-width: 0;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: .55rem .9rem; font-size: .85rem; outline: none;
}
.chat-form input:focus { border-color: var(--primary); }
.chat-form button {
  width: 2.25rem; height: 2.25rem; flex: none;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--primary); color: #fff;
  display: grid; place-items: center;
}
.chat-form button:hover { background: var(--primary-dark); }

.chat-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .5rem .85rem .7rem;
  border-top: 1px solid var(--border);
}
.chat-foot button {
  display: inline-flex; align-items: center; gap: .3rem;
  background: none; border: 0; cursor: pointer;
  font-size: .74rem; font-weight: 650; color: var(--primary);
}
.chat-foot button:hover { text-decoration: underline; }
.chat-powered { font-size: .66rem; color: var(--muted); }

.chat-fab {
  width: 3.5rem; height: 3.5rem; flex: none;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--primary); color: #fff;
  display: grid; place-items: center; position: relative;
  box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--primary) 80%, transparent);
  transition: transform .2s, background .2s;
}
.chat-fab:hover { transform: scale(1.07); background: var(--primary-dark); }
.chat-fab .ic { width: 1.55rem; height: 1.55rem; }
.chat-fab__dot {
  position: absolute; top: .35rem; right: .35rem;
  width: .7rem; height: .7rem; border-radius: 50%;
  background: #ef4444; border: 2px solid #fff;
}

/* ==================================================================
   Cadrage des images importées (réglable depuis l'admin)
   ================================================================== */

/* Un seul comportement pour tous les cadres d'image du site : l'image
   s'inscrit dans le cadre, centrée, sans déformation et sans débordement,
   quelles que soient ses proportions d'origine (portrait, carré, panoramique).
   La piste `minmax(0, 1fr)` est indispensable : sans elle, une image plus
   haute que large agrandit la ligne de la grille, dépasse du cadre et se
   fait rogner — c'était le cas des photos importées, les illustrations
   livrées étant déjà en 4/3. */
.imgbox,
.product-card__media,
.post-card__media,
.search-item__thumb {
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  overflow: hidden;
}
.imgbox > img,
.product-card__media > img,
.post-card__media > img,
.search-item__thumb > img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-position: center;
}

.product-card__media {
  aspect-ratio: var(--img-ratio, 4 / 3);
  background: var(--img-bg, var(--card));
  padding: var(--img-pad, 1.5rem);
}
.product-card__media img { object-fit: var(--img-fit, contain); }

/* Une illustration vectorielle n'est jamais recadrée ni agrandie au-delà de
   son cadre : le réglage « remplie » ne concerne que les photos importées. */
.product-card__media.is-illustration {
  padding: var(--img-pad-illu, 1.5rem);
}
.product-card__media.is-illustration img { object-fit: contain; }

/* Couverture d'article : le cadre est rempli (style magazine). */
.post-card__media > img { object-fit: cover; }
.post-cover {
  aspect-ratio: 16 / 9;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  margin-bottom: 2.5rem;
}
.post-cover > img { object-fit: cover; }
.prose img {
  max-width: 100%; height: auto;
  border-radius: var(--radius-lg);
  margin-block: 1.5rem;
}

[dir="rtl"] .floaters--right { right: auto; left: 1.25rem; align-items: flex-start; }
[dir="rtl"] .floaters--left { left: auto; right: 1.25rem; align-items: flex-end; }
[dir="rtl"] .chat-panel { transform-origin: bottom left; }
[dir="rtl"] .scenario-tags { justify-content: flex-start; }

/* ==================================================================
   Formulaire de contact : liste de pays cherchable, indicatifs
   ================================================================== */

.form-note {
  display: flex; align-items: center; gap: .45rem;
  font-size: .82rem; font-weight: 600; color: var(--primary);
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  border-radius: var(--radius);
  padding: .55rem .8rem;
  margin-bottom: 1.5rem;
}

.combo { position: relative; }
.combo-native { display: none; }
/* Sans JavaScript, le <select> reste la seule interface. */
.combo:not(.has-js) .combo-native { display: block; width: 100%; }

.combo-input { width: 100%; }
.combo-list {
  position: absolute;
  top: calc(100% + .25rem);
  inset-inline: 0;
  max-height: 15rem;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: .25rem;
  z-index: 40;
  display: none;
}
.combo.is-open .combo-list { display: block; }
.combo-option {
  display: block; width: 100%; text-align: start;
  background: none; border: 0; cursor: pointer;
  padding: .45rem .6rem;
  border-radius: calc(var(--radius) * .7);
  font-size: .875rem; color: var(--fg);
}
.combo-option:hover, .combo-option.is-active { background: var(--secondary); }
.combo-option.is-selected { color: var(--primary); font-weight: 650; }
.combo-empty { padding: .8rem .6rem; font-size: .82rem; color: var(--muted); text-align: center; }

.phone-row { display: flex; gap: .5rem; }
.phone-row select { flex: 0 0 9.5rem; min-width: 0; }
.phone-row input { flex: 1; min-width: 0; }

.contact-note { display: block; font-size: .76rem; color: var(--muted); margin-top: .15rem; }

.contact-map {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--card);
}
.contact-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ==================================================================
   Chat : présence de l'agent et saisie en cours
   ================================================================== */

.chat-avatar { position: relative; }
.chat-dot {
  position: absolute; inset-block-end: -1px; inset-inline-end: -1px;
  width: .6rem; height: .6rem; border-radius: 50%;
  background: #94a3b8;
  border: 2px solid var(--dark);
}
.chat-dot.is-online { background: #22c55e; }

.chat-typing {
  display: flex; align-items: center; gap: .25rem;
  padding: .35rem 1rem .6rem;
  background: var(--card);
}
.chat-typing span {
  width: .4rem; height: .4rem; border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 55%, transparent);
  animation: chat-bounce 1.2s infinite;
}
.chat-typing span:nth-child(2) { animation-delay: .15s; }
.chat-typing span:nth-child(3) { animation-delay: .3s; }

/* --- Bulles déplaçables, chacune de son côté ---
   Une bulle déposée quitte la pile : elle passe en position fixe à ses
   propres coordonnées, l'autre reste sagement dans le coin d'origine. */
.floaters [data-floater].is-placed { position: fixed; right: auto; bottom: auto; z-index: 91; }
[data-floater].is-dragging { transition: none; user-select: none; z-index: 92; }
[data-floater].is-dragging .chat-panel,
[data-floater].is-dragging .wa-card { pointer-events: none; }
/* Bulle remontée en haut de l'écran : le panneau s'ouvre en dessous. */
[data-floater].is-flipped .chat-panel,
[data-floater].is-flipped .wa-card { bottom: auto; top: calc(100% + .75rem); }
[data-floater].is-flipped .chat-panel { transform-origin: top right; }
[dir="rtl"] [data-floater].is-flipped .chat-panel { transform-origin: top left; }
.floaters[data-draggable="1"] .chat-fab,
.floaters[data-draggable="1"] .wa-fab { cursor: grab; touch-action: none; }
[data-floater].is-dragging .chat-fab,
[data-floater].is-dragging .wa-fab { cursor: grabbing; }

@media (prefers-reduced-motion: reduce) {
  .chat-typing span, .chat-loading span { animation: none; }
}