/* =========================================================
   SOLURIS PRO — Design System
   Palette de marque : bleu marine #1b2559 · orange #ee7b23
   ========================================================= */

:root {
  /* Brand */
  --navy-900: #10152f;
  --navy-800: #161d4d;
  --navy-700: #1b2559;
  --navy-600: #232c63;
  --navy-500: #2b3577;
  --navy-400: #3a4488;
  --orange-600: #d96b12;
  --orange-500: #ee7b23;
  --orange-400: #f39a3e;
  --orange-300: #ffb347;

  /* Neutrals */
  --ink: #12162b;
  --body: #3a3f52;
  --muted: #6b7186;
  --line: #e6e8f0;
  --bg: #ffffff;
  --bg-soft: #f6f7fb;
  --bg-softer: #eef1f8;
  --white: #ffffff;
  --surface: #ffffff;      /* cartes, panneaux, menus, dialogues, boutons clairs */
  --chip-ink: var(--navy-700);  /* texte sur puces claires (bascule en mode sombre) */
  --header-bg: rgba(255,255,255,.9);
  --header-line: var(--line);

  /* Accents */
  --grad-brand: linear-gradient(120deg, var(--navy-700), var(--navy-500));
  --grad-orange: linear-gradient(120deg, var(--orange-400), var(--orange-500));
  --grad-hero: radial-gradient(1200px 600px at 80% -10%, rgba(238,123,35,.18), transparent 60%),
               radial-gradient(900px 500px at 0% 20%, rgba(43,53,119,.55), transparent 55%),
               linear-gradient(160deg, var(--navy-900), var(--navy-700) 60%, var(--navy-600));

  /* Typography */
  --font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --h-font: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;

  /* Shape & motion */
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 28px;
  --shadow-sm: 0 2px 10px rgba(20,26,60,.06);
  --shadow: 0 18px 50px -20px rgba(20,26,60,.28);
  --shadow-lg: 0 40px 90px -35px rgba(20,26,60,.45);
  --ease: cubic-bezier(.22,.61,.36,1);
  --container: 1200px;
  color-scheme: light;
}

/* ---------- Thème sombre (jour / nuit) ----------
   Le site est déjà bâti sur des variables sémantiques : basculer ces valeurs suffit
   pour la majeure partie. Les hero/footer/sections .bg-navy sont sombres dans les deux
   thèmes. On ajuste ensuite les quelques éléments où une couleur « navy » servait de
   texte sur une puce claire (invisible sinon sur fond sombre). */
:root[data-theme="dark"] {
  --ink: #eef1f8;
  --body: #b7c0d6;
  --muted: #8892a8;
  --line: #29344c;
  --bg: #0d1424;
  --bg-soft: #131c30;
  --bg-softer: #1a2440;
  --surface: #161f36;
  --chip-ink: #c7cfe6;
  --header-bg: rgba(13,20,36,.85);
  --header-line: #24304a;
  --shadow-sm: 0 2px 10px rgba(0,0,0,.3);
  --shadow: 0 18px 50px -20px rgba(0,0,0,.55);
  --shadow-lg: 0 40px 90px -35px rgba(0,0,0,.7);
  color-scheme: dark;
}
/* En mode sombre, l'en-tête « scrollé » devient une barre sombre : son texte et le
   burger, qui viraient au navy sur fond clair, doivent redevenir clairs. */
:root[data-theme="dark"] .scrolled .brand-txt b,
:root[data-theme="dark"] .nav-links a:hover,
:root[data-theme="dark"] .nav-links a.active,
:root[data-theme="dark"] .scrolled .nav-links a:hover,
:root[data-theme="dark"] .scrolled .nav-links a.active { color: var(--ink); }
:root[data-theme="dark"] .scrolled .nav-toggle span,
:root[data-theme="dark"] .scrolled .nav-toggle span::before,
:root[data-theme="dark"] .scrolled .nav-toggle span::after { background: var(--ink); }
:root[data-theme="dark"] .btn-light { color: var(--ink); }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* ---------- Densité d'affichage sur ordinateur ----------
   Le site était perçu comme trop grand à 100 %. On applique un facteur 0,8 —
   l'équivalent d'un zoom navigateur à 80 %, mais côté site.
   `zoom` et non `font-size` : la feuille est majoritairement en px (≈600 valeurs
   contre 90 en rem), or seul `zoom` met tout à l'échelle (textes ET espacements).
   Seuil à 1025 px pour couvrir tous les écrans d'ordinateur (1280 et 1366 inclus)
   tout en laissant mobiles et tablettes à leur taille normale — les media queries
   s'évaluent sur la largeur réelle de la fenêtre, pas sur l'espace zoomé. */
@media (min-width: 1025px) { html { zoom: 0.8; } }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--body);
  background: var(--bg);
  line-height: 1.65;
  font-size: 17px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--h-font); color: var(--ink); line-height: 1.12; margin: 0; font-weight: 800; letter-spacing: -.02em; }
p { margin: 0; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
:focus-visible { outline: 3px solid var(--orange-400); outline-offset: 3px; border-radius: 6px; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
section { position: relative; }
.section-pad { padding: clamp(64px, 9vw, 130px) 0; }
.bg-soft { background: var(--bg-soft); }
.bg-navy { background: var(--navy-800); color: #d6dbf2; }

/* ---------- Kickers & headings ---------- */
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange-600);
  padding: 7px 14px; border-radius: 100px;
  background: rgba(238,123,35,.1);
  border: 1px solid rgba(238,123,35,.2);
}
.bg-navy .kicker { color: var(--orange-400); background: rgba(238,123,35,.14); }
.section-head { max-width: 720px; margin-bottom: 54px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(1.9rem, 4vw, 3rem); margin: 20px 0 16px; }
.section-head p { font-size: 1.1rem; color: var(--muted); }
.bg-navy .section-head h2 { color: #fff; }
.bg-navy .section-head p { color: #aab2d8; }
.text-grad { background: var(--grad-orange); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 700; font-size: .98rem; letter-spacing: .01em;
  padding: 15px 26px; border-radius: 100px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--grad-orange); color: #fff; box-shadow: 0 12px 26px -10px rgba(238,123,35,.7); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 20px 34px -12px rgba(238,123,35,.75); }
.btn-dark { background: var(--navy-700); color: #fff; }
.btn-dark:hover { transform: translateY(-3px); background: var(--navy-600); box-shadow: var(--shadow); }
.btn-ghost { border: 1.6px solid var(--line); color: var(--ink); background: var(--surface); }
.btn-ghost:hover { transform: translateY(-3px); border-color: var(--navy-400); box-shadow: var(--shadow-sm); }
.btn-light { background: var(--surface); color: var(--navy-800); }
.btn-light:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.btn-outline-light { border: 1.6px solid rgba(255,255,255,.35); color: #fff; }
.btn-outline-light:hover { background: rgba(255,255,255,.1); transform: translateY(-3px); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background .35s var(--ease), box-shadow .35s, padding .35s;
  padding: 16px 0;
}
.site-header.scrolled {
  background: var(--header-bg);
  backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 1px 0 var(--header-line), 0 12px 30px -22px rgba(0,0,0,.35);
  padding: 10px 0;
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 44px; height: 44px; }
.brand-txt { display: flex; flex-direction: column; line-height: 1; }
.brand-txt b { font-family: var(--h-font); font-size: 1.22rem; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.brand-txt span { font-size: .62rem; letter-spacing: .42em; color: var(--orange-400); font-weight: 700; margin-top: 3px; }
.scrolled .brand-txt b { color: var(--navy-800); }
.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links a {
  font-size: .96rem; font-weight: 600; color: rgba(255,255,255,.86);
  padding: 9px 14px; border-radius: 100px; transition: color .25s, background .25s;
}
.nav-links a:hover, .nav-links a.active { color: #fff; background: rgba(255,255,255,.12); }
.scrolled .nav-links a { color: var(--body); }
.scrolled .nav-links a:hover, .scrolled .nav-links a.active { color: var(--navy-800); background: var(--bg-softer); }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-cta-mobile { display: none; }

/* Bascule jour / nuit : soleil affiché en clair, lune en sombre (l'icône montre le
   thème actif). Même traitement que le sélecteur de langue selon l'état de l'en-tête. */
.theme-toggle {
  width: 40px; height: 40px; border-radius: 100px; display: inline-grid; place-items: center;
  color: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.2);
  transition: background .25s, color .25s, border-color .25s;
}
.theme-toggle:hover { background: rgba(255,255,255,.12); }
.theme-toggle svg { width: 19px; height: 19px; }
.scrolled .theme-toggle { color: var(--body); border-color: var(--line); }
.scrolled .theme-toggle:hover { background: var(--bg-softer); }
.theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: block; }

/* ---------- Menu déroulant Solutions IA ---------- */
.nav-drop { position: relative; }
.nav-drop > a { display: inline-flex; align-items: center; }
.drop-caret { display: inline-block; width: 13px; height: 13px; margin-left: 5px; transition: transform .3s var(--ease); }
.nav-drop.open .drop-caret { transform: rotate(180deg); }
.drop-menu {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(-8px);
  width: min(440px, 92vw); background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-lg); padding: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s; z-index: 130;
}
.nav-drop.open .drop-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); transition-delay: 0s;
}
.nav-links a.drop-item {
  display: block; padding: 11px 14px; border-radius: 11px;
  background: transparent; color: var(--ink); font-weight: 600; transition: background .2s, color .2s;
}
.nav-links a.drop-item:hover { background: var(--bg-soft); color: var(--orange-600); }
.drop-item b { font-size: .92rem; font-weight: 600; color: inherit; }
.scrolled .nav-links a.drop-item { color: var(--ink); }
.scrolled .nav-links a.drop-item:hover { color: var(--orange-600); }

/* ---------- Fiche solution (modale) ---------- */
.sol-modal {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(16,21,47,.55); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s linear .3s;
}
.sol-modal.open { opacity: 1; visibility: visible; transition-delay: 0s; }
.sol-dialog {
  --sol-pad: clamp(26px, 4vw, 42px);
  position: relative; background: var(--surface); border-radius: 22px; width: 100%; max-width: 560px;
  padding: var(--sol-pad); box-shadow: var(--shadow-lg); max-height: 90vh; overflow: auto;
  transform: translateY(22px) scale(.97); transition: transform .32s var(--ease);
}
/* `display` déclaré ici l'emporterait sur l'attribut hidden : sans cette règle,
   le bloc émoji resterait visible sous l'illustration (et l'image vide s'afficherait
   pour les solutions qui n'en ont pas). */
.sol-illu[hidden], .sol-emoji[hidden] { display: none !important; }

/* Illustration de la solution, quand elle en possède une */
.sol-illu {
  display: block; width: 100%;
  /* Ratio naturel de l'image, aucun recadrage : les bannières (Docs/RH/Legal en 3:2,
     Visa en 5:4) s'affichent en entier. On ne fixe donc PAS d'aspect-ratio ni
     object-fit:cover, qui rognaient les côtés. height:auto neutralise aussi
     l'attribut height de la balise (sinon il figerait la hauteur). */
  height: auto; margin: 0 0 22px;
  border-radius: 14px;
  background: var(--bg-soft); border: 1px solid var(--line);
  /* Révélée seulement quand la bonne image est décodée (voir solutions.js) :
     évite d'afficher l'illustration de la fiche précédente pendant le chargement. */
  min-height: 120px; opacity: 0;
}
/* Bascule sans transition, volontairement : une transition posée sur le seul état
   visible restait bloquée au changement de fiche et l'image ne réapparaissait plus.
   L'important est de ne jamais montrer l'illustration précédente — pas le fondu. */
.sol-illu.ready { opacity: 1; }
.sol-modal.open .sol-dialog { transform: none; }
.sol-close {
  position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: var(--bg-softer); color: var(--muted); transition: background .2s, color .2s;
}
.sol-close:hover { background: var(--line); color: var(--ink); }
.sol-emoji {
  width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; font-size: 2rem; line-height: 1;
  background: linear-gradient(160deg, var(--navy-600), var(--navy-800)); box-shadow: var(--shadow-sm); margin-bottom: 18px;
}
.sol-dialog h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: 12px; }
.sol-dialog .sol-desc { font-size: 1.05rem; color: var(--body); margin-bottom: 20px; }
.sol-benes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.sol-benes span { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 600; color: var(--chip-ink); background: var(--bg-soft); border: 1px solid var(--line); padding: 7px 13px; border-radius: 100px; }
.sol-benes span::before { content: "✓"; color: var(--orange-600); font-weight: 800; }
.sol-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.ai-card { cursor: pointer; }
.ai-card .ai-more { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; font-size: .82rem; font-weight: 700; color: var(--orange-400); opacity: 0; transform: translateX(-4px); transition: opacity .3s, transform .3s; }
.ai-card:hover .ai-more { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .drop-menu {
    position: static; transform: none; width: 100%; box-shadow: none; border: 0; background: transparent;
    grid-template-columns: 1fr; padding: 0; gap: 0; opacity: 1; visibility: hidden; height: 0; overflow: hidden;
    transition: none;
  }
  /* même spécificité que la règle desktop, sinon le translateX(-50%) décale le sous-menu */
  .nav-drop.open .drop-menu {
    position: static; transform: none; visibility: visible; height: auto; padding: 4px 0 6px 8px;
  }
  .nav-links a.drop-item { padding: 11px 14px; }
  .nav-drop { width: 100%; }
}

/* ---------- Sélecteur de langue ---------- */
.lang { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 100px; font-weight: 600; font-size: .9rem; color: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.2); transition: background .25s, color .25s, border-color .25s; }
.lang-btn:hover { background: rgba(255,255,255,.12); }
.lang-btn svg { width: 16px; height: 16px; }
.lang-btn .globe { width: 17px; height: 17px; opacity: .85; }
.lang-btn .chev { transition: transform .3s var(--ease); }
.lang.open .lang-btn .chev { transform: rotate(180deg); }
.scrolled .lang-btn { color: var(--body); border-color: var(--line); }
.scrolled .lang-btn:hover { background: var(--bg-softer); }
.lang-menu { position: absolute; right: 0; top: calc(100% + 10px); min-width: 190px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px; opacity: 0; transform: translateY(-8px) scale(.98); pointer-events: none; transition: opacity .22s var(--ease), transform .22s var(--ease); z-index: 130; }
.lang.open .lang-menu { opacity: 1; transform: none; pointer-events: auto; }
.lang-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 10px; font-size: .92rem; font-weight: 600; color: var(--ink); text-align: left; transition: background .2s; }
.lang-menu button:hover { background: var(--bg-soft); }
.lang-menu button.active { background: rgba(238,123,35,.1); color: var(--orange-600); }
.lang-menu button .lc { flex: 0 0 auto; min-width: 30px; padding: 3px 0; text-align: center; border-radius: 6px; background: var(--bg-soft); border: 1px solid var(--line); font-size: .72rem; font-weight: 800; letter-spacing: .04em; color: var(--chip-ink); }
.lang-menu button.active .lc { background: rgba(238,123,35,.14); border-color: rgba(238,123,35,.3); color: var(--orange-600); }
.lang-menu button .tick { margin-left: auto; opacity: 0; }
.lang-menu button.active .tick { opacity: 1; }
@media (max-width: 860px) { .lang { order: -1; } .lang-menu { right: auto; left: 0; } }
.nav-toggle { display: none; width: 46px; height: 46px; border-radius: 12px; align-items: center; justify-content: center; }
.nav-toggle span { position: relative; width: 22px; height: 2px; background: var(--surface); border-radius: 2px; transition: .3s; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--surface); border-radius: 2px; transition: .3s; }
.nav-toggle span::before { top: -7px; } .nav-toggle span::after { top: 7px; }
.scrolled .nav-toggle span, .scrolled .nav-toggle span::before, .scrolled .nav-toggle span::after { background: var(--navy-800); }

/* ---------- Hero ---------- */
.hero { background: var(--grad-hero); color: #fff; padding: 160px 0 clamp(80px,10vw,130px); overflow: hidden; }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 54px 54px; mask-image: radial-gradient(circle at 70% 30%, #000, transparent 75%); opacity: .5;
}
.hero .container { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero-badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 100px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); font-size: .85rem; font-weight: 600; color: #dfe4fb; margin-bottom: 26px; }
.hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange-400); box-shadow: 0 0 0 4px rgba(238,123,35,.25); }
.hero h1 { font-size: clamp(2.3rem, 5vw, 4rem); color: #fff; margin-bottom: 22px; }
.hero h1 em { font-style: normal; }
.hero-lede { font-size: 1.18rem; color: #b9c0e6; max-width: 560px; margin-bottom: 34px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 40px; }
/* Grille à 3 colonnes égales (et non flex-wrap) : les libellés traduits sont plus
   longs (« Support & maintenance » → « Support & maintenance », « Sur-mesure » →
   « Tailor-made »…). En flex, ils faisaient passer une stat à la ligne et décalaient
   tout le bloc au changement de langue ; en grille, le texte passe à la ligne DANS
   sa colonne et la mise en page reste identique dans les 5 langues. */
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 24px; align-items: start; }
.hero-stats .stat b { display: block; font-family: var(--h-font); font-size: 1.9rem; font-weight: 800; color: #fff; }
.hero-stats .stat span { font-size: .86rem; color: #9aa3d0; }

/* Hero visual card */
.hero-visual { position: relative; }
/* Mascotte : derrière le tableau. La partie haute (tête + bras) dépasse en net,
   la partie basse est dépolie par le backdrop-filter du verre. */
.hero-mascot {
  position: absolute; z-index: 0; left: 50%; top: -35%;
  width: 78%; height: auto; transform: translateX(-50%);
  pointer-events: none; user-select: none;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.28));
}
.hero-card {
  position: relative; z-index: 1;
  background: linear-gradient(160deg, rgba(255,255,255,.13), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-lg);
  padding: 26px; backdrop-filter: blur(8px); box-shadow: var(--shadow-lg);
}
@media (prefers-reduced-motion: reduce) { .hero-mascot { animation: none; } }
/* Sur mobile/tablette, le hero passe en une colonne : la mascotte se superposait
   aux statistiques et les rendait illisibles. On la réserve au grand écran. */
@media (max-width: 1024px) { .hero-mascot { display: none; } }

/* Mascottes décoratives de section (idée après les services, contact) */
.sec-mascot-row { display: flex; justify-content: center; margin-top: 18px; }
.sec-mascot { width: 210px; height: auto; display: block; }
.sec-mascot.sm-contact { width: 150px; }
@media (max-width: 560px) { .sec-mascot { width: 160px; } .sec-mascot.sm-contact { width: 120px; } }
.hero-card .hc-top { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.hero-card .hc-top i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.28); }
.hero-card .hc-top i:nth-child(1) { background: var(--orange-400); }
.hero-tile { display: flex; align-items: center; gap: 14px; padding: 15px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.09); margin-bottom: 12px; transition: transform .3s var(--ease), background .3s; }
.hero-tile:hover { transform: translateX(6px); background: rgba(255,255,255,.12); }
.hero-tile .ht-ico { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--grad-orange); color: #fff; }
.hero-tile .ht-ico svg { width: 22px; height: 22px; }
.hero-tile b { color: #fff; font-size: .98rem; display: block; }
.hero-tile span { font-size: .82rem; color: #a7afd8; }
.hero-float { position: absolute; z-index: 3; background: var(--surface); color: var(--ink); border-radius: 16px; padding: 14px 18px; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 12px; }
.hero-float.f1 { top: -26px; right: 12px; }
/* Décalé vers le bas depuis le passage à 4 services : la carte s'est allongée et le
   badge recouvrait le texte de la dernière tuille (« Claude, ChatGPT, HeyGen »).
   Il ne chevauche plus que le bord inférieur de la carte, comme prévu au design. */
.hero-float.f2 { bottom: -46px; left: -34px; }
.hero-float .hf-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(238,123,35,.14); color: var(--orange-600); }
.hero-float b { font-size: .95rem; } .hero-float span { display: block; font-size: .78rem; color: var(--muted); }
/* ---------- Marquee / trust ---------- */
.trust { border-block: 1px solid var(--line); padding: 26px 0; background: var(--surface); }
.trust .container { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; justify-content: center; }
.trust span { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.trust .pills { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.trust .pill { padding: 9px 18px; border-radius: 100px; background: var(--bg-soft); border: 1px solid var(--line); font-weight: 700; color: var(--chip-ink); font-size: .92rem; }

/* ---------- Services ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.svc-card {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; transition: transform .4s var(--ease), box-shadow .4s, border-color .4s; overflow: hidden;
}
.svc-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--grad-orange); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.svc-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); border-color: transparent; }
.svc-card:hover::before { transform: scaleX(1); }
.svc-ico { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(160deg, var(--navy-600), var(--navy-800)); color: #fff; margin-bottom: 20px; transition: transform .4s var(--ease); }
.svc-card:hover .svc-ico { transform: rotate(-6deg) scale(1.06); }
.svc-ico svg { width: 28px; height: 28px; }
.svc-card h3 { font-size: 1.22rem; margin-bottom: 10px; }
.svc-card p { font-size: .98rem; color: var(--muted); margin-bottom: 16px; }
.svc-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.svc-tags li { font-size: .78rem; font-weight: 600; color: var(--chip-ink); background: var(--bg-softer); padding: 5px 11px; border-radius: 8px; }
.svc-num { position: absolute; top: 22px; right: 26px; font-family: var(--h-font); font-weight: 800; font-size: 2.4rem; color: var(--bg-softer); line-height: 1; z-index: 0; }

/* ---------- Services : carrousel (fondu + glissement + flou) ---------- */
.svc-carousel { position: relative; max-width: 880px; margin: 0 auto; min-height: 300px; }
.svc-carousel .svc-card {
  position: absolute; inset: 0; margin: 0; padding: clamp(28px, 4vw, 46px);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-44px); filter: blur(14px);
  transition: opacity .75s var(--ease), transform .75s var(--ease), filter .75s var(--ease), visibility 0s linear .75s;
}
.svc-carousel .svc-card.active { pointer-events: auto; }
.svc-carousel .svc-card::before { height: 5px; transform: scaleX(1); }
.svc-carousel .svc-card:hover { transform: translateX(-44px); box-shadow: var(--shadow); } /* neutralise le hover translate de base à l'état inactif */
.svc-carousel .svc-card.active {
  position: relative; opacity: 1; visibility: visible; transform: none; filter: none; box-shadow: var(--shadow);
  transition: opacity .75s var(--ease), transform .75s var(--ease), filter .75s var(--ease);
}
.svc-carousel .svc-card.active:hover { transform: translateY(-4px); }
.svc-carousel .svc-card.leaving {
  position: absolute; opacity: 0; visibility: visible; transform: translateX(44px); filter: blur(14px);
  transition: opacity .75s var(--ease), transform .75s var(--ease), filter .75s var(--ease);
}
.svc-carousel .svc-num { font-size: 4.2rem; top: 18px; right: 30px; }
.svc-carousel .svc-ico { width: 70px; height: 70px; }
.svc-carousel .svc-ico svg { width: 34px; height: 34px; }
.svc-carousel .svc-card h3 { font-size: clamp(1.4rem, 3vw, 2rem); }
.svc-carousel .svc-card p { font-size: 1.08rem; max-width: 620px; }
.svc-dots { display: flex; justify-content: center; gap: 10px; margin-top: 28px; }
.svc-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--line); border: 0; cursor: pointer; transition: transform .3s var(--ease), background .3s; padding: 0; }
.svc-dot:hover { background: var(--navy-400); }
.svc-dot.active { background: var(--grad-orange); width: 30px; border-radius: 100px; }
@media (prefers-reduced-motion: reduce) {
  .svc-carousel .svc-card { transition: opacity .2s linear; }
}
@media (max-width: 560px) { .svc-carousel { min-height: 340px; } .svc-carousel .svc-num { font-size: 3rem; } }

/* ---------- Values ---------- */
.values-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 10px; }
.value-card { text-align: center; padding: 30px 18px; border-radius: var(--radius); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); transition: transform .35s var(--ease), background .35s; }
.value-card:hover { transform: translateY(-6px); background: rgba(255,255,255,.08); }
.value-card .vc-ico { width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 14px; display: grid; place-items: center; background: var(--grad-orange); color: #fff; }
.value-card h3 { color: #fff; font-size: 1.05rem; margin-bottom: 6px; }
.value-card p { font-size: .84rem; color: #9aa3d0; }

/* ---------- Approach / feature split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.feature-list { margin-top: 26px; display: grid; gap: 18px; }
.feature-item { display: flex; gap: 16px; }
.feature-item .fi-ico { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(238,123,35,.12); color: var(--orange-600); }
.feature-item h3 { font-size: 1.08rem; margin-bottom: 4px; }
.feature-item p { font-size: .96rem; color: var(--muted); }
.media-frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--grad-brand); aspect-ratio: 4/3.4; }
.media-frame .mf-inner { position: absolute; inset: 0; padding: 34px; display: flex; flex-direction: column; justify-content: space-between; }
.mf-badge { align-self: flex-start; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2); color: #fff; padding: 8px 15px; border-radius: 100px; font-size: .82rem; font-weight: 600; }
.mf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mf-cell { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 16px; color: #fff; }
.mf-cell b { font-size: 1.6rem; display: block; font-family: var(--h-font); }
.mf-cell span { font-size: .82rem; color: #c3caf0; }
.mf-orb { position: absolute; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(238,123,35,.6), transparent 70%); top: -60px; right: -60px; filter: blur(6px); }
/* Variante vidéo : le cadre épouse le format 16:9 de la vidéo */
.media-frame--video { aspect-ratio: 16 / 9; background: #0e1430; }
.mf-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; background: #0e1430; }

/* ---------- Process ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; }
.step { position: relative; padding: 30px 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s; }
.step:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.step .step-n { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-family: var(--h-font); font-weight: 800; color: #fff; background: var(--grad-brand); margin-bottom: 18px; }
.step h3 { font-size: 1.1rem; margin-bottom: 8px; }
.step p { font-size: .94rem; color: var(--muted); }
.step:not(:last-child)::after { content: ""; position: absolute; top: 52px; right: -13px; width: 26px; height: 2px; background: repeating-linear-gradient(90deg, var(--orange-400) 0 6px, transparent 6px 12px); }

/* ---------- Sectors ---------- */
.sectors { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.sector { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); text-align: center; transition: transform .3s var(--ease), border-color .3s, background .3s; }
.sector:hover { transform: translateY(-5px); border-color: var(--orange-400); background: var(--bg-soft); }
.sector .s-ico { width: 44px; height: 44px; color: var(--chip-ink); }
.sector span { font-size: .86rem; font-weight: 600; color: var(--ink); }

/* ---------- Stats band ---------- */
.stats-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat-big b { font-family: var(--h-font); font-size: clamp(2.4rem,5vw,3.4rem); font-weight: 800; color: #fff; display: block; letter-spacing: -.03em; }
.stat-big .plus { color: var(--orange-400); }
.stat-big span { color: #a7afd8; font-size: .96rem; }

/* ---------- Testimonials ---------- */
.tst-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tst { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-sm); }
.tst .stars { color: var(--orange-500); letter-spacing: 3px; margin-bottom: 14px; }
.tst p { font-size: 1rem; color: var(--body); margin-bottom: 20px; }
.tst .who { display: flex; align-items: center; gap: 12px; }
.tst .who .av { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--grad-brand); font-family: var(--h-font); }
.tst .who b { font-size: .96rem; color: var(--ink); display: block; }
.tst .who span { font-size: .82rem; color: var(--muted); }

/* ---------- Témoignages défilants (marquee) ---------- */
.marquee { position: relative; overflow: hidden; padding: 6px 0; }
.marquee + .marquee { margin-top: 22px; }
.marquee::before, .marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 12%; z-index: 3; pointer-events: none; }
.marquee::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.marquee-track { display: flex; gap: 22px; width: max-content; animation: marquee-left 60s linear infinite; }
.marquee.reverse .marquee-track { animation-name: marquee-right; animation-duration: 68s; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.tst-mq { flex: 0 0 380px; width: 380px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s; }
.tst-mq:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.tst-mq .stars { color: var(--orange-500); letter-spacing: 2px; margin-bottom: 10px; font-size: .92rem; }
.tst-mq p { font-size: .96rem; color: var(--body); margin-bottom: 16px; min-height: 72px; }
.tst-mq .who { display: flex; align-items: center; gap: 12px; }
.tst-mq .who .av { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--grad-brand); font-family: var(--h-font); font-size: .9rem; }
.tst-mq .who b { font-size: .92rem; color: var(--ink); display: block; }
.tst-mq .who span { font-size: .8rem; color: var(--muted); }
.tst-mq .tag-ia { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700; color: var(--orange-600); background: rgba(238,123,35,.1); border: 1px solid rgba(238,123,35,.2); padding: 3px 9px; border-radius: 100px; margin-bottom: 12px; }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none !important; flex-wrap: wrap; } }
@media (max-width: 680px) { .tst-mq { flex-basis: 300px; width: 300px; } }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--grad-hero); padding: clamp(40px,6vw,70px); text-align: center; color: #fff; }
.cta-band h2 { color: #fff; font-size: clamp(1.8rem,4vw,2.7rem); margin-bottom: 16px; }
.cta-band p { color: #c3caf0; max-width: 560px; margin: 0 auto 30px; font-size: 1.1rem; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-band .orb { position: absolute; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(238,123,35,.35), transparent 70%); }
.cta-band .orb.o1 { top: -120px; left: -80px; } .cta-band .orb.o2 { bottom: -140px; right: -60px; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 46px; align-items: start; }
.contact-info { display: grid; gap: 16px; }
.ci-item { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); transition: transform .3s var(--ease), box-shadow .3s; }
.ci-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.ci-item .ci-ico { flex: none; width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; background: var(--grad-orange); color: #fff; }
.ci-item b { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 3px; }
.ci-item a, .ci-item p { color: var(--ink); font-weight: 600; font-size: 1.02rem; }
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px,4vw,40px); box-shadow: var(--shadow); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .88rem; font-weight: 700; color: var(--ink); margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; border: 1.5px solid var(--line); border-radius: 12px;
  font-family: inherit; font-size: .98rem; color: var(--ink); background: var(--bg-soft); transition: border-color .25s, box-shadow .25s, background .25s;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--orange-500); background: var(--surface); box-shadow: 0 0 0 4px rgba(238,123,35,.12); }
.form-note { font-size: .84rem; color: var(--muted); margin-top: 6px; }
.form-success { display: none; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.3); color: #15803d; font-weight: 600; margin-bottom: 18px; }
.form-success.show { display: flex; }

/* ---------- Suite IA (produits) ---------- */
.ai-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ai-card {
  position: relative; display: flex; gap: 16px; align-items: flex-start;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius); padding: 22px 22px 22px 20px; overflow: hidden;
  transition: transform .35s var(--ease), background .35s, border-color .35s, box-shadow .35s;
}
.ai-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--grad-orange); transform: scaleY(0); transform-origin: top; transition: transform .4s var(--ease); }
.ai-card:hover { transform: translateY(-6px); background: rgba(255,255,255,.08); border-color: transparent; box-shadow: var(--shadow-lg); }
.ai-card:hover::before { transform: scaleY(1); }
.ai-emoji {
  flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  font-size: 1.55rem; line-height: 1; background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.14); transition: transform .4s var(--ease);
}
.ai-card:hover .ai-emoji { transform: rotate(-6deg) scale(1.08); }
.ai-card h3 { color: #fff; font-size: 1.08rem; margin-bottom: 5px; letter-spacing: -.01em; }
.ai-card p { font-size: .9rem; color: #9aa3d0; line-height: 1.55; }
.ai-cta { display: flex; justify-content: center; margin-top: 44px; }
@media (max-width: 1024px) { .ai-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .ai-grid { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 14px; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; transition: box-shadow .3s, border-color .3s; }
.faq-item.open { box-shadow: var(--shadow); border-color: transparent; }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; text-align: left; font-family: var(--h-font); font-weight: 700; font-size: 1.06rem; color: var(--ink); }
.faq-q .chev { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--bg-softer); transition: transform .35s var(--ease), background .3s; }
.faq-item.open .faq-q .chev { transform: rotate(180deg); background: var(--grad-orange); color: #fff; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.faq-a p { padding: 0 24px 24px; color: var(--muted); font-size: .98rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-900); color: #aab2d8; padding: 70px 0 26px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-brand .brand-txt b { color: #fff; }
.footer-brand p { margin: 18px 0; font-size: .95rem; max-width: 320px; color: #8f98c4; }
.social { display: flex; gap: 10px; }
.social a { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: rgba(255,255,255,.07); color: #cfd6f5; transition: background .3s, transform .3s, color .3s; }
.social a:hover { background: var(--grad-orange); color: #fff; transform: translateY(-3px); }
.footer-col h3 { color: #fff; font-size: 1rem; margin-bottom: 18px; font-family: var(--h-font); font-weight: 700; }
.footer-col a { display: block; padding: 6px 0; font-size: .94rem; color: #8f98c4; transition: color .25s, padding-left .25s; }
.footer-col a:hover { color: var(--orange-400); padding-left: 5px; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; font-size: .94rem; padding: 7px 0; color: #a7afd8; }
.footer-contact svg { flex: none; width: 18px; height: 18px; color: var(--orange-400); margin-top: 3px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 24px; font-size: .88rem; color: #7c85b3; }
.footer-bottom a:hover { color: var(--orange-400); }

/* ---------- Page hero (subpages) ---------- */
.page-hero { background: var(--grad-hero); color: #fff; padding: 150px 0 70px; text-align: center; overflow: hidden; }
.page-hero h1 { color: #fff; font-size: clamp(2rem,4.5vw,3.2rem); margin-bottom: 14px; }
.page-hero p { color: #b9c0e6; max-width: 620px; margin: 0 auto; font-size: 1.12rem; }
.crumbs { display: inline-flex; gap: 8px; align-items: center; font-size: .88rem; color: #9aa3d0; margin-bottom: 22px; }
.crumbs a:hover { color: var(--orange-400); }
.crumbs .sep { opacity: .5; }

/* ---------- Reveal animations ---------- */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .08s; }
[data-reveal][data-delay="2"] { transition-delay: .16s; }
[data-reveal][data-delay="3"] { transition-delay: .24s; }
[data-reveal][data-delay="4"] { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } .float-anim { animation: none !important; } }

.float-anim { animation: floaty 5.5s ease-in-out infinite; }
.float-anim.d { animation-delay: -2.7s; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* Back to top */
.to-top { position: fixed; left: 22px; bottom: 22px; z-index: 90; width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; background: var(--grad-orange); color: #fff; box-shadow: var(--shadow); opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none; transition: .35s var(--ease); }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { transform: translateY(-3px); }

/* ========== Chatbot Iris ========== */
.iris-launcher {
  position: fixed; right: 22px; bottom: 22px; z-index: 120;
  display: flex; align-items: center; gap: 10px; padding: 10px 18px 10px 10px;
  border-radius: 100px; background: var(--grad-brand); color: #fff;
  box-shadow: 0 16px 40px -12px rgba(20,26,60,.6); cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s;
}
.iris-launcher:hover { transform: translateY(-3px); box-shadow: 0 22px 50px -14px rgba(20,26,60,.7); }
.iris-launcher.hidden { opacity: 0; transform: scale(.6) translateY(20px); pointer-events: none; }
.iris-ava { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-orange); box-shadow: 0 0 0 3px rgba(255,255,255,.18); position: relative; }
.iris-ava svg { width: 24px; height: 24px; color: #fff; }
.iris-launcher .il-txt { line-height: 1.1; }
.iris-launcher .il-txt b { font-size: .95rem; display: block; }
.iris-launcher .il-txt span { font-size: .74rem; color: #c3caf0; display: flex; align-items: center; gap: 5px; }
.iris-launcher .il-txt span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.25); }
.iris-pulse { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(238,123,35,.5); animation: iris-pulse 2.4s ease-out infinite; }
@keyframes iris-pulse { 0% { box-shadow: 0 0 0 0 rgba(238,123,35,.5); } 70% { box-shadow: 0 0 0 14px rgba(238,123,35,0); } 100% { box-shadow: 0 0 0 0 rgba(238,123,35,0); } }

.iris-panel {
  position: fixed; right: 22px; bottom: 22px; z-index: 121;
  width: min(390px, calc(100vw - 32px)); height: min(600px, calc(100vh - 44px));
  background: var(--surface); border-radius: 22px; box-shadow: 0 40px 90px -30px rgba(20,26,60,.55);
  display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line);
  opacity: 0; transform: translateY(24px) scale(.96); pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.iris-panel.open { opacity: 1; transform: none; pointer-events: auto; }
.iris-head { background: var(--grad-hero); color: #fff; padding: 18px 18px; display: flex; align-items: center; gap: 12px; }
.iris-head .iris-ava { width: 46px; height: 46px; }
.iris-head b { font-size: 1.05rem; display: block; }
.iris-head span { font-size: .78rem; color: #c3caf0; display: flex; align-items: center; gap: 6px; }
.iris-head span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.25); }
.iris-head .iris-close { margin-left: auto; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.12); transition: background .25s; }
.iris-head .iris-close:hover { background: rgba(255,255,255,.22); }
.iris-body { flex: 1; overflow-y: auto; padding: 18px; background: var(--bg-soft); display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; }
.iris-msg { max-width: 82%; padding: 11px 15px; border-radius: 16px; font-size: .92rem; line-height: 1.5; white-space: pre-line; animation: iris-in .35s var(--ease); }
.iris-msg a { color: var(--orange-600); font-weight: 700; text-decoration: underline; }
.iris-msg.bot { align-self: flex-start; background: var(--surface); color: var(--body); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.iris-msg.user { align-self: flex-end; background: var(--grad-brand); color: #fff; border-bottom-right-radius: 5px; }
@keyframes iris-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.iris-typing { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; border-bottom-left-radius: 5px; padding: 13px 16px; display: flex; gap: 5px; }
.iris-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: iris-bounce 1.2s infinite; }
.iris-typing i:nth-child(2) { animation-delay: .2s; } .iris-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes iris-bounce { 0%,60%,100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }
.iris-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 12px; background: var(--bg-soft); }
.iris-chip { font-size: .82rem; font-weight: 600; color: var(--chip-ink); background: var(--surface); border: 1px solid var(--line); padding: 8px 13px; border-radius: 100px; cursor: pointer; transition: border-color .25s, color .25s, background .25s; }
.iris-chip:hover { border-color: var(--orange-400); color: var(--orange-600); background: rgba(238,123,35,.06); }
.iris-input { display: flex; align-items: center; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: var(--surface); }
.iris-input input { flex: 1; border: 1.5px solid var(--line); border-radius: 100px; padding: 11px 16px; font-family: inherit; font-size: .92rem; color: var(--ink); background: var(--bg-soft); }
.iris-input input:focus { outline: none; border-color: var(--orange-500); background: var(--surface); box-shadow: 0 0 0 4px rgba(238,123,35,.12); }
.iris-input button { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-orange); color: #fff; transition: transform .25s; }
.iris-input button:hover { transform: scale(1.08); }
.iris-input button svg { width: 20px; height: 20px; }
@media (max-width: 480px) { .iris-launcher .il-txt { display: none; } .iris-launcher { padding: 10px; } }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero .container, .split, .contact-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 520px; }
  .svc-grid, .tst-grid { grid-template-columns: repeat(2, 1fr); }
  .values-grid { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step:not(:last-child)::after { display: none; }
  .sectors { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stats-band { grid-template-columns: repeat(2, 1fr); gap: 34px; }
}
@media (max-width: 860px) {
  .nav-links { position: fixed; inset: 0 0 0 auto; width: min(82vw, 340px); flex-direction: column; align-items: stretch; gap: 6px;
    background: var(--surface); padding: 96px 22px 30px; box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform .4s var(--ease); z-index: 105;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .nav-links.open { transform: none; }
  .nav-links a { color: var(--body); padding: 13px 16px; font-size: 1.05rem; }
  .nav-links a:hover, .nav-links a.active { color: var(--navy-800); background: var(--bg-softer); }
  .nav-toggle { display: flex; z-index: 106; }
  .nav-toggle.open span { background: transparent; }
  .nav-toggle.open span::before { top: 0; transform: rotate(45deg); background: var(--navy-800); }
  .nav-toggle.open span::after { top: 0; transform: rotate(-45deg); background: var(--navy-800); }
  .nav-cta .btn-desktop { display: none; }
  /* CTA « Devis gratuit » repris dans le panneau mobile */
  .nav-cta-mobile { display: flex !important; justify-content: center; margin-top: 18px; }
  .nav-links a.nav-cta-mobile { color: #fff; background: var(--grad-orange); border-radius: 100px; font-weight: 700; padding: 14px 24px; }
  .nav-links a.nav-cta-mobile:hover { color: #fff; background: var(--grad-orange); }
  .stats-band, .stat-big + .stat-big { }
}
/* Petits écrans : en-tête compact (évite tout débordement horizontal) */
@media (max-width: 520px) {
  .container { padding: 0 16px; }
  .nav { gap: 10px; }
  .brand { gap: 9px; }
  .brand img { width: 38px; height: 38px; }
  .brand-txt b { font-size: 1.05rem; }
  .nav-cta { gap: 8px; }
  .lang-btn { padding: 7px 10px; gap: 5px; }
  .lang-btn .lang-code { display: none; }
  .nav-toggle { width: 42px; height: 42px; }
}

@media (max-width: 680px) {
  body { font-size: 16px; }
  .svc-grid, .tst-grid, .values-grid, .steps, .stats-band, .form-row, .sectors { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr 1fr; }
  .sectors { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-float { display: none; }
  .hero-stats { gap: 22px; }
  .stats-band { gap: 34px; }
}