/* ==========================================================================
   KANDORYX — Design system
   Palette inspirée du logo : bleu électrique / cyan / bleu profond / argent
   ========================================================================== */

:root{
  --bg:            #F6F8FB;
  --bg-alt:        #EEF2F8;
  --surface:       #FFFFFF;
  --ink:           #0B1220;
  --ink-soft:      #4A5568;
  --line:          #E3E8F0;

  --blue-deep:     #071A5E;
  --blue-deep-2:   #0A1F6B;
  --blue-mid:      #1B4CE0;
  --blue-elec:     #2F6BFF;
  --cyan:          #2FC8FF;
  --cyan-soft:     #7FE0FF;
  --silver:        #9BA2AD;
  --silver-light:  #E9ECF1;

  --grad-brand: linear-gradient(120deg, var(--blue-deep) 0%, var(--blue-mid) 45%, var(--cyan) 100%);
  --grad-brand-2: linear-gradient(135deg, var(--cyan) 0%, var(--blue-elec) 55%, var(--blue-deep) 100%);
  --grad-silver: linear-gradient(120deg, #fff 0%, var(--silver-light) 40%, var(--silver) 70%, #fff 100%);

  --shadow-sm: 0 2px 10px rgba(10, 24, 64, .06);
  --shadow-md: 0 10px 30px rgba(10, 24, 64, .10);
  --shadow-lg: 0 24px 60px rgba(7, 26, 94, .18);
  --shadow-glow: 0 0 0 1px rgba(47,200,255,.25), 0 20px 60px rgba(27,76,224,.25);

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;

  --ff-body: 'Manrope', system-ui, -apple-system, Segoe UI, sans-serif;
  --ff-head: 'Unbounded', 'Manrope', system-ui, sans-serif;

  --ease: cubic-bezier(.22,.9,.32,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: .25s;
  --dur: .6s;
  --dur-slow: 1s;

  --container: 1240px;
  --focus:     #0A1F6B; /* contour de focus : contraste ≥ 3:1 sur fond clair */
  color-scheme: light;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:        #070B14;
    --bg-alt:    #0B1220;
    --surface:   #0F1626;
    --ink:       #EEF2F8;
    --ink-soft:  #A7B0C0;
    --line:      #1D2536;
    --silver-light: #2A3245;
    --focus:     #2FC8FF;
  }
}
:root[data-theme="dark"]{
  --bg:        #070B14;
  --bg-alt:    #0B1220;
  --surface:   #0F1626;
  --ink:       #EEF2F8;
  --ink-soft:  #A7B0C0;
  --line:      #1D2536;
  --silver-light: #2A3245;
  --focus:     #2FC8FF;
}

/* ---------- Reset & base ---------- */
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0; background: var(--bg); color: var(--ink);
  font-family: var(--ff-body); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul,ol{ list-style:none; margin:0; padding:0; }
button{ font: inherit; background:none; border:0; cursor:pointer; color:inherit; }
input,select,textarea{ font: inherit; color: inherit; }
h1,h2,h3{ font-family: var(--ff-head); line-height:1.12; margin:0; letter-spacing:-.01em; }
p{ margin:0; }
.container{ max-width: var(--container); margin-inline:auto; padding-inline: 20px; }
@media(min-width:640px){ .container{ padding-inline: 32px; } }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link{ position:absolute; left:12px; top:-60px; background:var(--blue-deep); color:#fff; padding:10px 16px; border-radius:8px; z-index:999; transition: top .2s var(--ease); }
.skip-link:focus{ top:12px; }
:focus-visible{ outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
html.reduce-motion *,
html.reduce-motion *::before,
html.reduce-motion *::after{
  animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;
}

/* ---------- Loader ---------- */
.loader{
  position: fixed; inset:0; z-index: 9999; background: var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  transition: opacity .6s var(--ease), visibility .6s var(--ease);
}
.loader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.loader__mark{ width:76px; height:76px; }
.loader__mark .f{ fill-opacity:0; transform: translateY(14px); transform-origin:center; animation: facet-in .7s var(--ease-out) forwards; }
.loader__mark .f1{ fill:var(--silver); animation-delay:.05s; }
.loader__mark .f2{ fill:var(--cyan); animation-delay:.2s; }
.loader__mark .f3{ fill:var(--blue-mid); animation-delay:.35s; }
.loader__mark .f4{ fill:var(--blue-deep); animation-delay:.5s; }
@keyframes facet-in{ to{ fill-opacity:1; transform:translateY(0); } }
.loader__bar{ width:160px; height:3px; background:var(--line); border-radius:99px; overflow:hidden; }
.loader__bar span{ display:block; height:100%; width:40%; background: var(--grad-brand-2); animation: bar-sweep 1.1s ease-in-out infinite; }
@keyframes bar-sweep{ 0%{ transform:translateX(-120%);} 100%{ transform:translateX(360%);} }

/* Scroll progress */
.scroll-progress{ position:fixed; top:0; left:0; height:3px; width:0; background: var(--grad-brand-2); z-index: 1200; transition: width .1s linear; }

/* Custom cursor (desktop, fine pointer only) */
.cursor{ position:fixed; top:0; left:0; width:26px; height:26px; border-radius:50%; border:1.5px solid var(--cyan); pointer-events:none; z-index:1100; transform:translate(-50%,-50%); transition: width .2s var(--ease), height .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); mix-blend-mode: exclusion; display:none; opacity:0; }
@media (hover:hover) and (pointer:fine){ .cursor.is-ready{ display:block; } }
.cursor.is-ready{ opacity:1; }
.cursor.is-active{ width:44px; height:44px; background: rgba(47,200,255,.15); }

/* ---------- Nav ---------- */
.nav{ position: sticky; top:0; z-index:900; padding: 18px 0; transition: padding .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease); }
.nav::before{ content:""; position:absolute; inset:0; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); opacity:0; transition: opacity .3s var(--ease); z-index:-1; }
.nav.is-scrolled{ padding: 10px 0; box-shadow: var(--shadow-sm); }
.nav.is-scrolled::before{ opacity:1; }
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.nav__logo{ flex: 0 0 auto; display:inline-flex; align-items:center; background:#fff; border-radius: var(--radius-sm); padding: 6px 10px; box-shadow: var(--shadow-sm); transition: padding .3s var(--ease); }
/* max-width:none + width:auto : évite que le flex écrase le logo et déforme ses proportions */
.nav__logo img{ height:40px; width:auto; max-width:none; object-fit:contain; display:block; transition: height .3s var(--ease); }
@media (min-width:480px){ .nav__logo img{ height:52px; } }
@media (min-width:640px){ .nav__logo img{ height:66px; } }
.nav.is-scrolled .nav__logo{ padding: 4px 8px; }
.nav.is-scrolled .nav__logo img{ height:36px; }
@media (min-width:480px){ .nav.is-scrolled .nav__logo img{ height:44px; } }
@media (max-width:479px){ .nav__actions .btn--sm{ display:none; } }
@media (min-width:640px){ .nav.is-scrolled .nav__logo img{ height:50px; } }
.nav__links{ display:none; align-items:center; gap:30px; }
.nav__links a{ position:relative; font-weight:600; font-size:.94rem; color:var(--ink-soft); padding:6px 0; }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background: var(--grad-brand-2); transition: width .3s var(--ease); }
.nav__links a:hover, .nav__links a.is-active{ color:var(--ink); }
.nav__links a:hover::after, .nav__links a.is-active::after{ width:100%; }
.nav__actions{ display:flex; align-items:center; gap:14px; }
.motion-toggle{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line); color:var(--ink-soft); transition: all .2s var(--ease); }
.motion-toggle:hover{ color:var(--blue-elec); border-color: var(--blue-elec); }
.motion-toggle[aria-pressed="true"]{ background: var(--blue-elec); color:#fff; border-color: var(--blue-elec); }

@media (min-width:960px){ .nav__links{ display:flex; } }

.burger{ display:grid; place-items:center; gap:5px; width:38px; height:38px; }
.burger i{ display:block; width:20px; height:2px; background: currentColor; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.burger[aria-expanded="true"] i:first-child{ transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] i:last-child{ transform: translateY(-3.5px) rotate(-45deg); }
@media (min-width:960px){ .burger{ display:none; } }

.mobile-menu{ position:fixed; inset: 0 0 0 auto; width:min(320px,86vw); background: var(--surface); box-shadow: var(--shadow-lg); padding: 90px 28px 28px; display:flex; flex-direction:column; gap:22px; transform: translateX(100%); transition: transform .4s var(--ease); z-index: 890; }
.mobile-menu.is-open{ transform: translateX(0); }
.mobile-menu a{ font-weight:600; font-size:1.05rem; }
.mobile-menu .btn{ margin-top:8px; }

/* ---------- Buttons ---------- */
.btn{ --pad-y: 13px; --pad-x: 24px; position:relative; display:inline-flex; align-items:center; gap:10px; padding: var(--pad-y) var(--pad-x); border-radius: 99px; font-weight:700; font-size:.94rem; white-space:nowrap; isolation:isolate; overflow:hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.btn span{ position:relative; z-index:2; display:inline-flex; align-items:center; gap:8px; }
.btn:active{ transform: scale(.97); }
.btn--primary{ color:#fff; background: var(--grad-brand); box-shadow: var(--shadow-md); }
.btn--primary::before{ content:""; position:absolute; inset:0; background: var(--grad-brand-2); opacity:0; transition: opacity .35s var(--ease); z-index:1; }
.btn--primary:hover::before{ opacity:1; }
.btn--primary:hover{ box-shadow: var(--shadow-glow); transform: translateY(-2px); }
.btn--ghost{ color: var(--ink); background: transparent; border:1.5px solid var(--line); }
.btn--ghost:hover{ border-color: var(--blue-elec); color: var(--blue-elec); background: color-mix(in srgb, var(--blue-elec) 6%, transparent); }
.btn--lg{ --pad-y:16px; --pad-x:30px; font-size:1rem; }
.btn--wa{ display:inline-flex; align-items:center; gap:10px; }
.btn--wa[hidden]{ display:none; } /* sans cette règle, display:inline-flex l'emporte sur l'attribut hidden */
.btn--wa:hover{ border-color:#25D366; color:#128C7E; background: color-mix(in srgb, #25D366 9%, transparent); }
.quote__actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.quote__actions[hidden]{ display:none; }
.btn--sm{ --pad-y:9px; --pad-x:18px; font-size:.85rem; }
.btn--block{ width:100%; justify-content:center; }

/* Magnetic hover shift set by JS via transform on inline style */
.magnetic{ will-change: transform; }

/* ---------- Type helpers ---------- */
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color: var(--blue-elec); margin-bottom:14px; }
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background: var(--cyan); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cyan) 25%, transparent); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.35); } }
.eyebrow--light{ color: var(--cyan-soft); }
.h2{ font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight:600; }
.section{ padding: clamp(70px, 10vw, 130px) 0; position:relative; }
.section__head{ max-width:720px; margin-bottom: 48px; }
.section__head--row{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px; max-width:none; }

/* Reveal-on-scroll */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: var(--d, 0s); }
.reveal.is-visible{ opacity:1; transform:none; }

/* Split title reveal (chars/words wrapped by JS) */
.split .word{ display:inline-block; overflow:hidden; vertical-align:top; }
.split .word > span{ display:inline-block; transform: translateY(110%); transition: transform .7s var(--ease-out); transition-delay: calc(var(--i,0) * 45ms); }
.split.is-visible .word > span{ transform: translateY(0); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ position:relative; padding: 64px 0 40px; overflow: clip; }
.hero__lines{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero__lines span{ position:absolute; left:0; right:0; height:1px; background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent); }
.hero__lines span:nth-child(1){ top:18%; }
.hero__lines span:nth-child(2){ top:42%; }
.hero__lines span:nth-child(3){ top:66%; }
.hero__lines span:nth-child(4){ top:88%; }
.hero__glow{ position:absolute; top:-20%; right:-10%; width:60vw; height:60vw; max-width:700px; max-height:700px; background: radial-gradient(circle, color-mix(in srgb, var(--cyan) 22%, transparent) 0%, transparent 65%); filter: blur(10px); z-index:0; }

.hero__grid{ position:relative; z-index:1; display:grid; gap:56px; align-items:center; }
@media (min-width:960px){ .hero__grid{ grid-template-columns: 1.05fr .95fr; gap:40px; } }

.hero__title{ font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight:600; margin: 10px 0 22px; }
.hero__title em{ font-style:normal; background: var(--grad-brand-2); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero__lead{ max-width: 46ch; color: var(--ink-soft); font-size: 1.08rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.hero__tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:32px; }
.hero__tags li{ font-size:.8rem; font-weight:700; letter-spacing:.03em; padding:8px 14px; border-radius:99px; border:1px solid var(--line); color: var(--ink-soft); }

.hero__scroll{ position:relative; z-index:1; margin: 46px auto 0; width:26px; height:42px; border:2px solid var(--line); border-radius:99px; display:flex; justify-content:center; padding-top:8px; }
.hero__scroll span{ width:4px; height:8px; border-radius:99px; background: var(--blue-elec); animation: scroll-dot 1.6s ease-in-out infinite; }
@keyframes scroll-dot{ 0%{ opacity:1; transform:translateY(0);} 70%{ opacity:0; transform:translateY(14px);} 100%{opacity:0;} }

/* Hero visual stage */
.hero__visual{ position:relative; }
.stage{ position:relative; max-width: 460px; margin-inline:auto; aspect-ratio: 520/560; }
.stage__facets{ width:100%; height:100%; filter: drop-shadow(0 30px 50px rgba(7,26,94,.22)); }
.facet{ opacity:0; transform-origin:center; animation: facet-rise 1s var(--ease-out) forwards; animation-delay: calc(var(--i) * 110ms + .3s); }
@keyframes facet-rise{ from{ opacity:0; transform: translateY(30px) scale(.94);} to{ opacity:1; transform:none; } }
.facet-line{ stroke: rgba(255,255,255,.55); stroke-width:1.4; opacity:0; animation: line-in .8s var(--ease-out) forwards; animation-delay: 1.1s; }
.facet-line[style*="--i:1"]{ animation-delay: 1.25s; }
@keyframes line-in{ to{ opacity:1; } }
.shine{ animation: shine-sweep 3.6s ease-in-out infinite; animation-delay: 1.6s; }
@keyframes shine-sweep{ 0%,15%{ transform: translateX(0) skewX(-20deg);} 45%,100%{ transform: translateX(700px) skewX(-20deg);} }

.chip{ position:absolute; display:flex; flex-direction:column; align-items:center; gap:6px; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-md); padding:12px 16px; box-shadow: var(--shadow-md); font-size:.72rem; font-weight:700; color: var(--ink-soft); animation: float 5s ease-in-out infinite; opacity:0; animation: chip-in .8s var(--ease-out) forwards, float 5s ease-in-out infinite 1s; }
.chip--neon{ top:6%; left:-6%; animation-delay:1.4s; }
.chip--print{ bottom:16%; left:-10%; animation-delay:1.6s; }
.chip--screen{ top:12%; right:-10%; animation-delay:1.8s; }
.chip--rec{ bottom:2%; right:-4%; animation-delay:2s; }
@keyframes chip-in{ from{ opacity:0; transform: translateY(16px) scale(.9);} to{ opacity:1; transform:none; } }
@keyframes float{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-10px);} }

.chip .neon{ font-family: var(--ff-head); font-size:1.1rem; color: var(--cyan); text-shadow: 0 0 8px var(--cyan), 0 0 22px color-mix(in srgb, var(--cyan) 70%, transparent); animation: neon-flicker 3s ease-in-out infinite; }
@keyframes neon-flicker{ 0%,19%,21%,100%{ opacity:1;} 20%{ opacity:.35;} }

.chip .flyer{ position:relative; width:34px; height:26px; }
.chip .flyer b{ position:absolute; inset:0; background: var(--grad-silver); border-radius:3px; }
.chip .flyer i{ position:absolute; left:5px; right:5px; height:2px; background: var(--blue-elec); border-radius:2px; }
.chip .flyer i:nth-child(2){ top:7px; } .chip .flyer i:nth-child(3){ top:12px; width:60%; } .chip .flyer i:nth-child(4){ top:17px; width:40%; }

.chip .screen{ width:38px; height:26px; border-radius:4px; background: var(--blue-deep-2); display:flex; flex-direction:column; justify-content:center; gap:3px; padding: 0 6px; }
.chip .screen span{ height:2px; border-radius:2px; background: var(--cyan); animation: bar-grow 2.4s ease-in-out infinite; }
.chip .screen span:nth-child(2){ animation-delay:.2s; } .chip .screen span:nth-child(3){ animation-delay:.4s; }
@keyframes bar-grow{ 0%,100%{ width:30%;} 50%{ width:90%;} }

.chip .rec{ display:flex; align-items:center; gap:6px; font-family: var(--ff-head); font-size:.7rem; color:#E23; }
.chip .rec i{ width:8px; height:8px; border-radius:50%; background:#E23; animation: pulse 1.2s ease-in-out infinite; }

/* Ticker */
.ticker{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background: var(--bg-alt); overflow:hidden; padding: 16px 0; }
.ticker__track{ display:flex; gap:44px; width:max-content; animation: ticker 26s linear infinite; }
.ticker__track span{ font-family: var(--ff-head); font-size:.95rem; font-weight:500; color: var(--ink-soft); display:flex; align-items:center; gap:44px; white-space:nowrap; }
.ticker__track span::after{ content:"◆"; color: var(--cyan); font-size:.5rem; margin-left:44px; }
@keyframes ticker{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

/* ---------- About ---------- */
.about__grid{ display:grid; gap:36px; }
@media (min-width:840px){ .about__grid{ grid-template-columns: .9fr 1.1fr; gap:60px; } }
.about__body p{ color: var(--ink-soft); font-size:1.05rem; max-width:60ch; }
.stats{ display:flex; flex-wrap:wrap; gap:36px; margin-top:36px; }
.stat dt{ font-family: var(--ff-head); font-size:2.4rem; font-weight:600; background: var(--grad-brand-2); -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-flex; }
.stat dd{ color: var(--ink-soft); font-size:.9rem; margin-top:4px; }

/* ---------- Bento services ---------- */
.bento{ display:grid; gap:20px; grid-template-columns: 1fr; }
@media (min-width:760px){ .bento{ grid-template-columns: repeat(2,1fr); } }
@media (min-width:1180px){ .bento{ grid-template-columns: repeat(4,1fr); } }

.card{ position:relative; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; overflow:hidden; transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease); }
.card:hover{ box-shadow: var(--shadow-lg); border-color: transparent; }

.card__image {
  margin: -30px -30px 24px -30px;
  width: calc(100% + 60px);
  height: 200px;
  overflow: hidden;
  position: relative;
  background: var(--bg-alt); /* visible autour d’une image dézoomée (zoom < 100 %) */
}
.card--xl .card__image {
  height: 280px;
}
.card__image img {
  /* Cadre personnalisé (console) : taille/position posées en px par main.js (frameImage), qui
     l’emportent sur ces 100 % — voir la note en tête de frameImage/frameBackground dans main.js. */
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.card:hover .card__image img {
  transform: scale(1.05);
}
/* « Image entière » (console) : aucune partie coupée, fond neutre autour. */
.card__image--contain { background: var(--bg-alt); }
.card__image--contain img { object-fit: contain; object-position: 50% 50%; }
/* Affiche/composition carrée : recadrée en priorité sur son haut (logo, titre) plutôt qu’au centre,
   pour ne pas perdre l’identité de la marque ni laisser de bandes vides autour d’un format qui ne
   correspond pas à la largeur de la carte. */
.card__image--top img {
  object-position: 50% 12%;
}
.card--xl{ grid-column: span 1; }
@media (min-width:760px){ .card--xl{ grid-column: span 2; } }
.card__num{ position:absolute; top:20px; right:26px; font-family: var(--ff-head); font-size:2.6rem; font-weight:600; opacity:.08; }
.card__icon{ width:60px; height:60px; border-radius:16px; display:grid; place-items:center; background: var(--bg-alt); color: var(--blue-elec); margin-bottom:22px; transition: transform .4s var(--ease); }
.card:hover .card__icon{ transform: rotate(-6deg) scale(1.05); }
.card__icon svg{ width:30px; height:30px; }
.card__icon--sm{ width:48px; height:48px; }
/* Superposé au coin de la photo (dans son cadre, pour rester visible malgré overflow:hidden) :
   fond plein et ombre portée, net et lisible quelle que soit l’image en arrière-plan. */
.card__image .card__icon{
  position:absolute; left:16px; bottom:16px; z-index:2; margin-bottom:0;
  background: var(--surface); box-shadow: var(--shadow-md); border:1px solid var(--line);
}
.card--dark .card__image .card__icon{ color: var(--blue-deep); }
.card__icon--sm svg{ width:24px; height:24px; }
.card h3{ font-size:1.25rem; font-weight:600; margin-bottom:10px; }
.card p{ color: var(--ink-soft); font-size:.95rem; }
.badge{ display:inline-block; font-size:.74rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:6px 14px; border-radius:99px; margin-bottom:14px; line-height:1.2; }

.card--dark{ background: linear-gradient(160deg, var(--blue-deep) 0%, var(--blue-deep-2) 60%, #0d2a86 100%); color:#fff; border-color: transparent; }
.card--dark .card__icon{ background: rgba(255,255,255,.1); color: var(--cyan); }
.card--dark .badge{ background: rgba(47, 200, 255, 0.2); color: #FFFFFF; border: 1px solid rgba(47, 200, 255, 0.45); box-shadow: 0 0 14px rgba(47, 200, 255, 0.2); }
.card--dark p{ color: rgba(255,255,255,.72); }
.card--dark .card__num{ opacity:.12; }

.card--blue{ background: var(--surface); border-color: color-mix(in srgb, var(--blue-elec) 30%, var(--line)); }
.card--blue .badge,
.card:not(.card--dark) .badge{
  background: rgba(27, 76, 224, 0.08);
  color: var(--blue-deep);
  border: 1px solid rgba(27, 76, 224, 0.24);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .card--blue .badge,
  :root:not([data-theme="light"]) .card:not(.card--dark) .badge{
    background: rgba(47, 200, 255, 0.2);
    color: #FFFFFF;
    border-color: rgba(47, 200, 255, 0.45);
    box-shadow: 0 0 14px rgba(47, 200, 255, 0.2);
  }
}
:root[data-theme="dark"] .card--blue .badge,
:root[data-theme="dark"] .card:not(.card--dark) .badge{
  background: rgba(47, 200, 255, 0.2);
  color: #FFFFFF;
  border-color: rgba(47, 200, 255, 0.45);
  box-shadow: 0 0 14px rgba(47, 200, 255, 0.2);
}

.pills{ display:flex; flex-wrap:wrap; gap:8px; margin: 18px 0 22px; }
.pills li{ font-size:.78rem; font-weight:600; padding:6px 12px; border-radius:99px; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); }
.card--blue .pills li, .card:not(.card--dark) .pills li{ background: var(--bg-alt); border-color: var(--line); color: var(--ink-soft); }
.card--dark .pills li{ color:#fff; }

.card__link{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.9rem; }
.card__link span{ transition: transform .3s var(--ease); display:inline-block; }
.card__link:hover span{ transform: translateX(5px); }
.card--dark .card__link{ color: var(--cyan-soft); }
.card--blue .card__link, .card:not(.card--dark):not(.card--blue) .card__link{ color: var(--blue-elec); }

/* Spotlight cursor-follow effect */
.spot{ --mx:50%; --my:50%; }
.spot::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition: opacity .4s var(--ease); background: radial-gradient(320px circle at var(--mx) var(--my), color-mix(in srgb, var(--cyan) 16%, transparent), transparent 70%); }
.card:hover.spot::before{ opacity:1; }
.card--dark.spot::before{ background: radial-gradient(320px circle at var(--mx) var(--my), rgba(255,255,255,.14), transparent 70%); }

/* Tilt via JS-set custom properties */
.tilt{ transform: perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateZ(0); }

/* ---------- Work / gallery ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:34px; }
.filter{ padding:9px 18px; border-radius:99px; border:1px solid var(--line); font-size:.85rem; font-weight:600; color: var(--ink-soft); transition: all .25s var(--ease); }
.filter:hover{ border-color: var(--blue-elec); color: var(--blue-elec); }
.filter.is-active{ background: var(--grad-brand); border-color: transparent; color:#fff; }

.gallery{ display:grid; gap:20px; grid-template-columns: repeat(auto-fill, minmax(270px,1fr)); }
.gitem{ position:relative; border-radius: var(--radius-md); overflow:hidden; aspect-ratio: 4/5; background: var(--bg-alt); border:1px solid var(--line); transition: opacity .4s var(--ease), transform .5s var(--ease); }
.gitem.is-hidden{ display:none; }
.gitem__art{ position:absolute; inset:0; }
.gitem__overlay{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:22px; background: linear-gradient(180deg, transparent 40%, rgba(5,10,25,.86) 100%); color:#fff; opacity:0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.gitem:hover .gitem__overlay, .gitem:focus-within .gitem__overlay{ opacity:1; transform:none; }
/* Cadre personnalisé (console) : background-size posé en % par main.js (frameBackground) — voir la
   note en tête de frameImage/frameBackground dans main.js. */
.gitem:hover .gitem__art, .gitem:focus-within .gitem__art{ transform: scale(1.06); }
.gitem__art{ transition: transform .6s var(--ease); }
.gitem__cat{ font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color: var(--cyan-soft); font-weight:700; margin-bottom:6px; }
.gitem__title{ font-family: var(--ff-head); font-size:1.05rem; margin-bottom:10px; }
.gitem__link{ display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:700; color:#fff; width:fit-content; }
.gitem__link svg{ transition: transform .3s var(--ease); }
.gitem:hover .gitem__link svg{ transform: translateX(4px); }

/* ---------- Production audiovisuelle ---------- */
/* Bloc audiovisuel intégré à la section Services */
.reel .section__head p:not(.eyebrow){ color: var(--ink-soft); font-size:1.02rem; margin-top:14px; }
.reel .section__head h3{ font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight:600; }

.reel__grid{ display:grid; gap:20px; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); }
.vitem__btn{ position:relative; display:block; width:100%; text-align:left; border-radius: var(--radius-md); overflow:hidden; background: var(--surface); border:1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.vitem__btn:hover, .vitem__btn:focus-visible{ transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.vitem__poster{ position:relative; aspect-ratio: 16/10; overflow:hidden; background: var(--bg-alt); }
/* Cadre personnalisé (console) : background-size posé en % par main.js (frameBackground). */
.vitem__img{ position:absolute; inset:0; background-size:cover; background-position:center; }
.vitem__poster::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(5,10,25,0) 45%, rgba(5,10,25,.75) 100%); }
.vitem__play{ position:absolute; inset:0; display:grid; place-items:center; z-index:1; }
.vitem__play svg{ width:60px; height:60px; padding:18px; border-radius:50%; background: rgba(255,255,255,.16); backdrop-filter: blur(6px); color:#fff; transition: transform .3s var(--ease), background .3s var(--ease); }
.vitem__btn:hover .vitem__play svg, .vitem__btn:focus-visible .vitem__play svg{ transform: scale(1.1); background: var(--grad-brand-2); }
.vitem__meta{ display:flex; flex-direction:column; gap:4px; padding:16px 18px; }
.vitem__type{ font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700; color: var(--blue-elec); }
.vitem__title{ font-family: var(--ff-head); font-size:.98rem; color: var(--ink); }

.reel__lightbox{ position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; padding:20px; }
.reel__lightbox[hidden]{ display:none; }
.reel__lightbox-backdrop{ position:absolute; inset:0; background: rgba(5,10,25,.9); }
.reel__lightbox-inner{ position:relative; z-index:1; width:100%; max-width:960px; }
.reel__lightbox-inner video{ width:100%; max-height:80vh; border-radius: var(--radius-md); background:#000; box-shadow: var(--shadow-lg); display:block; }
.reel__lightbox-caption{ color:#fff; text-align:center; margin-top:14px; font-size:.92rem; }
.reel__close{ position:absolute; top:-46px; right:0; width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,.12); color:#fff; display:grid; place-items:center; transition: background .25s var(--ease); }
.reel__close:hover{ background: rgba(255,255,255,.24); }

/* ---------- Clients ---------- */
.clients{ padding-block: 70px; background: var(--bg-alt); }
.clients__title{ text-align:center; font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color: var(--ink-soft); margin-bottom:40px; }
.logos{ overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logos__track{ display:flex; align-items:center; gap:28px; width: max-content; animation: ticker 30s linear infinite; }
.logos__track--static{ animation:none; width:100%; justify-content:center; flex-wrap:wrap; -webkit-mask-image:none; mask-image:none; }
/* Fond blanc : les logos sont souvent des fichiers opaques (JPG) pensés pour un fond clair,
   ils se voyaient à peine sur le fond sombre de cette section. */
.logos__card{ display:flex; align-items:center; justify-content:center; background:#fff; border-radius: var(--radius-md); padding:16px 28px; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.logos__card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
.logos__track img{ height:44px; width:auto; max-width:180px; object-fit:contain; display:block; }
@media (min-width:640px){ .logos__track img{ height:52px; max-width:220px; } }
/* Logo ajusté dans la console : zone utile (marges vides retirées) + zoom. --r = largeur/hauteur de la zone,
   --z = zoom ; la largeur est plafonnée comme celle d’un logo ordinaire, la hauteur suit le rapport. */
.logos__crop{ --lh:44px; --lw:180px; position:relative; overflow:hidden; flex:none; width:min(calc(var(--lh) * var(--z, 1) * var(--wf, 1)), var(--lw)); aspect-ratio:var(--r); }
@media (min-width:640px){ .logos__crop{ --lh:52px; --lw:220px; } }
.logos__track .logos__crop img{ position:absolute; max-width:none; object-fit:fill; }
@media (max-width:640px){ .logos__track{ flex-wrap:wrap; justify-content:center; gap:20px; width:100%; animation:none; -webkit-mask-image:none; mask-image:none; } }
.logos__placeholder{ text-align:center; color: var(--ink-soft); font-size:.9rem; padding: 10px 0; }

/* ---------- Method ---------- */
.method{ background: linear-gradient(180deg, var(--blue-deep-2) 0%, var(--blue-deep) 100%); color:#fff; }
.method .h2{ color:#fff; }
/* Ancre .steps__rail (position:absolute) au bas réel de la grille, quelle que soit la hauteur des
   cartes — .method (.section) est déjà position:relative, un peu plus haut dans l’arbre. */
.steps-wrap{ position:relative; margin-top:20px; }
.steps{ position:relative; display:grid; gap:26px; grid-template-columns: 1fr; counter-reset: step; }
@media (min-width:860px){ .steps{ grid-template-columns: repeat(4,1fr); } }
.step{ position:relative; background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); padding:28px 24px; backdrop-filter: blur(6px); transition: transform .4s var(--ease), background .4s var(--ease); }
.step:hover{ transform: translateY(-6px); background: rgba(255,255,255,.09); }
.step__shape{ width:44px; height:44px; margin-bottom:18px; }
/* La facette « active » distingue chaque étape (cyan plein) des deux autres (gris discret,
   pas juste plus transparentes : sur fond sombre une différence d'opacité seule se voit à peine). */
.step__shape svg polygon.is-active{ fill: var(--cyan); filter: drop-shadow(0 0 6px rgba(47,200,255,.5)); }
.step__shape svg polygon.is-dim{ fill: rgba(255,255,255,.16); }
.step__n{ position:absolute; top:24px; right:24px; font-family: var(--ff-head); font-weight:700; color: rgba(255,255,255,.3); transition: color .3s var(--ease); }
.step:hover .step__n{ color: var(--cyan); }
.step h3{ font-size:1.1rem; margin-bottom:8px; }
.step p{ color: rgba(255,255,255,.7); font-size:.92rem; }
.steps__rail{ display:none; }
@media(min-width:860px){
  /* Ancré au bas réel de la grille (.steps est le parent positionné) plutôt qu’à une marge négative
     fixe : un titre qui passe sur deux lignes agrandit les cartes sans faire traverser le texte par
     le rail, quelle que soit la longueur du contenu. */
  .steps__rail{ display:block; position:absolute; left:0; right:0; bottom:13px; height:2px; background: rgba(255,255,255,.12); pointer-events:none; }
  .steps__rail span{ position:absolute; inset:0; width:0; background: var(--grad-brand-2); transition: width 1.2s var(--ease-out); }
  .steps__rail.is-visible span{ width:100%; }
}

/* ---------- News ---------- */
.news__grid{ display:grid; gap:24px; grid-template-columns: 1fr; }
@media (min-width:760px){ .news__grid{ grid-template-columns: repeat(3,1fr); } }
.post__media{ aspect-ratio: 16/10; border-radius: var(--radius-md); margin-bottom:18px; position:relative; overflow:hidden; }
.art{ background-size: cover; }
.art--1{ background: linear-gradient(135deg, var(--blue-deep) 0%, var(--cyan) 130%); }
.art--2{ background: linear-gradient(135deg, var(--blue-mid) 0%, var(--silver-light) 140%); }
.art--3{ background: linear-gradient(135deg, #0d2a86 0%, var(--cyan-soft) 140%); }
.post__meta{ font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color: var(--blue-elec); font-weight:700; margin-bottom:8px; }
.post h3{ font-size:1.08rem; font-weight:600; }
.post h3 a{ background-image: linear-gradient(var(--ink),var(--ink)); background-size:0 1px; background-position:0 100%; background-repeat:no-repeat; transition: background-size .35s var(--ease); }
.post h3 a:hover{ background-size:100% 1px; }

/* ---------- Quote / form ---------- */
.quote{ background: var(--bg-alt); }
.quote__grid{ display:grid; gap:44px; }
@media (min-width:960px){ .quote__grid{ grid-template-columns: .8fr 1.2fr; gap:60px; } }
.quote__intro p{ color: var(--ink-soft); max-width:44ch; margin: 16px 0 24px; }
.quote__points{ display:flex; flex-direction:column; gap:10px; margin-bottom:30px; }
.quote__points li{ position:relative; padding-left:26px; font-size:.92rem; color: var(--ink-soft); }
.quote__points li::before{ content:"✓"; position:absolute; left:0; color: var(--cyan); font-weight:700; }

.form{ background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px,4vw,40px); box-shadow: var(--shadow-md); display:flex; flex-direction:column; gap:18px; }
.form__row{ display:grid; gap:18px; grid-template-columns: 1fr; }
@media (min-width:600px){ .form__row{ grid-template-columns: 1fr 1fr; } }
.field{ position:relative; }
.field input, .field select, .field textarea{ width:100%; padding: 18px 16px 8px; border:1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
.field textarea{ resize: vertical; min-height:110px; }
.field label{ position:absolute; left:16px; top:16px; color: var(--ink-soft); font-size:.95rem; pointer-events:none; transition: all .2s var(--ease); background: transparent; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color: var(--blue-elec); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue-elec) 14%, transparent); }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label{ top:6px; font-size:.72rem; font-weight:700; color: var(--blue-elec); }
.field--select select{ padding-top:20px; appearance:none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%234A5568' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 16px center; }
.field--select label{ top:6px; font-size:.72rem; font-weight:700; color: var(--ink-soft); }
.field--select select:focus + label{ color: var(--blue-elec); }
.hp{ position:absolute; left:-9999px; top:-9999px; }

.drop{ display:flex; align-items:center; gap:14px; border:1.5px dashed var(--line); border-radius: var(--radius-sm); padding:18px; cursor:pointer; color: var(--ink-soft); transition: border-color .25s var(--ease), background .25s var(--ease); }
.drop:hover{ border-color: var(--blue-elec); background: color-mix(in srgb, var(--blue-elec) 5%, transparent); }
/* Champ fichier masqué visuellement mais resté focalisable au clavier. */
.drop input{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; clip:rect(0,0,0,0); }
.drop{ position:relative; }
.drop:focus-within{ outline: 2px solid var(--focus); outline-offset: 3px; }
.drop__text b{ display:block; font-size:.92rem; color: var(--ink); }
.drop__text small{ font-size:.78rem; }

.consent{ display:flex; align-items:flex-start; gap:10px; font-size:.85rem; color: var(--ink-soft); }
.consent input{ margin-top:3px; accent-color: var(--blue-elec); }

.form__status{ min-height:1.2em; font-size:.9rem; font-weight:600; }
.form__status.ok{ color: #137a47; }
.form__status.err{ color:#b8293f; }

/* ---------- Footer ---------- */
.footer{ position:relative; background: linear-gradient(180deg, var(--blue-deep) 0%, #050e38 100%); color: rgba(255,255,255,.85); overflow:hidden; padding-top: 80px; }
.footer__lines{ position:absolute; inset:0; background-image: repeating-linear-gradient(90deg, transparent, transparent 100px, rgba(255,255,255,.03) 101px); pointer-events:none; }
.footer__grid{ position:relative; z-index:1; display:grid; gap:44px; grid-template-columns: 1fr; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.12); }
@media (min-width:760px){ .footer__grid{ grid-template-columns: 1.4fr .8fr .8fr 1fr; } }
.footer__brand img{ height:48px; width:auto; max-width:100%; object-fit:contain; object-position:left center; margin-bottom:18px; filter: brightness(0) invert(1); }
.footer__brand p{ max-width:34ch; font-size:.92rem; color: rgba(255,255,255,.6); margin-bottom:22px; }
.socials{ display:flex; gap:12px; }
.socials a{ width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:grid; place-items:center; transition: all .25s var(--ease); }
.socials a[hidden]{ display:none; }
.socials a:hover{ background: var(--cyan); border-color: var(--cyan); transform: translateY(-3px); }
.socials svg{ width:16px; height:16px; fill: currentColor; }
.footer h3{ font-size:.82rem; text-transform:uppercase; letter-spacing:.1em; color: rgba(255,255,255,.5); margin-bottom:18px; }
.footer ul{ display:flex; flex-direction:column; gap:11px; font-size:.92rem; }
.footer a:hover{ color: var(--cyan-soft); }
address{ font-style:normal; }
.footer__bottom{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; padding:26px 20px; font-size:.82rem; color: rgba(255,255,255,.55); }
.footer__giant{ position:relative; z-index:0; text-align:center; font-family: var(--ff-head); font-weight:700; font-size: clamp(3rem, 14vw, 9rem); color: rgba(255,255,255,.04); letter-spacing:.02em; line-height:1; margin-top:-10px; user-select:none; }

/* ---------- Floating action button (mobile) ---------- */
.fab{ position:fixed; right:20px; bottom:20px; width:54px; height:54px; border-radius:50%; background: var(--grad-brand); color:#fff; display:grid; place-items:center; box-shadow: var(--shadow-lg); z-index:500; transition: transform .3s var(--ease); }
.fab:hover{ transform: scale(1.08); }
@media (min-width:960px){ .fab{ display:none; } }

/* ---------- Assistant du site ---------- */
/* Le bouton partage le coin bas-droit avec le .fab (mobile) : il se place au-dessus de lui. */
.chat{ position:fixed; right:20px; bottom:86px; z-index:600; display:flex; flex-direction:column-reverse; align-items:flex-end; gap:12px; }
@media (min-width:960px){ .chat{ bottom:20px; } }
.chat[hidden]{ display:none; }

.chat__toggle{ display:inline-flex; align-items:center; gap:9px; padding:12px 18px; border:0; border-radius:999px; cursor:pointer;
  background: var(--grad-brand); color:#fff; font-family: var(--ff-body); font-size:.9rem; font-weight:700;
  box-shadow: var(--shadow-lg); transition: transform .3s var(--ease); }
.chat__toggle:hover{ transform: translateY(-2px); }
.chat__toggle svg{ flex:none; }
@media (max-width:420px){ .chat__toggle span{ display:none; } .chat__toggle{ width:54px; height:54px; padding:0; justify-content:center; } }

.chat__panel{ display:flex; flex-direction:column; width:min(360px, calc(100vw - 40px)); height:min(480px, calc(100vh - 210px));
  background: var(--surface); color: var(--ink); border:1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); overflow:hidden; }
.chat__panel[hidden]{ display:none; }

.chat__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); background: var(--bg-alt); }
.chat__head strong{ display:block; font-size:.95rem; }
.chat__head span{ display:block; font-size:.74rem; color: var(--ink-soft); }
.chat__close{ flex:none; display:grid; place-items:center; width:32px; height:32px; border:0; border-radius:8px; cursor:pointer; background:transparent; color: var(--ink-soft); }
.chat__close:hover{ background: var(--silver-light); color: var(--ink); }

.chat__log{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; font-size:.9rem; line-height:1.55; }
.chat__msg{ max-width:85%; padding:10px 13px; border-radius:14px; white-space:pre-wrap; overflow-wrap:anywhere; }
.chat__msg--bot{ align-self:flex-start; background: var(--bg-alt); border:1px solid var(--line); border-bottom-left-radius:4px; }
.chat__msg--me{ align-self:flex-end; background: var(--grad-brand); color:#fff; border-bottom-right-radius:4px; }
.chat__msg--err{ align-self:flex-start; background: color-mix(in srgb, #b8293f 12%, transparent); border:1px solid color-mix(in srgb, #b8293f 35%, transparent); color: var(--ink); }
.chat__msg--typing{ display:flex; gap:5px; align-items:center; }
.chat__msg--typing i{ width:6px; height:6px; border-radius:50%; background: var(--ink-soft); animation: chatdot 1.2s var(--ease) infinite; }
.chat__msg--typing i:nth-child(2){ animation-delay:.2s; }
.chat__msg--typing i:nth-child(3){ animation-delay:.4s; }
@keyframes chatdot{ 0%,60%,100%{ opacity:.25; transform:translateY(0);} 30%{ opacity:1; transform:translateY(-3px);} }

.chat__form{ display:flex; align-items:flex-end; gap:8px; padding:12px; border-top:1px solid var(--line); }
.chat__form textarea{ flex:1; min-height:44px; max-height:120px; resize:none; padding:10px 12px; border:1px solid var(--line); border-radius:12px;
  background: var(--bg); color: var(--ink); font-family: var(--ff-body); font-size:.9rem; line-height:1.4; }
.chat__form textarea:focus-visible{ outline:2px solid var(--focus); outline-offset:1px; }
.chat__send{ flex:none; display:grid; place-items:center; width:40px; height:40px; border:0; border-radius:12px; cursor:pointer; background: var(--grad-brand); color:#fff; }
.chat__send:disabled{ opacity:.5; cursor:progress; }

.chat__chips{ display:flex; flex-wrap:wrap; gap:8px; align-self:flex-start; max-width:100%; }
.chat__chip{ padding:8px 13px; border:1.5px solid var(--line); border-radius:999px; background: var(--surface); color: var(--ink);
  font-family: var(--ff-body); font-size:.82rem; font-weight:700; cursor:pointer; transition: border-color .2s var(--ease), color .2s var(--ease); }
.chat__chip:hover{ border-color: var(--blue-elec); color: var(--blue-elec); }
.chat__chip:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

.chat__note{ margin:0; padding:0 14px 12px; font-size:.72rem; color: var(--ink-soft); }

/* Mouvement réduit : le panneau et les points d’attente ne s’animent plus. */
.reduce-motion .chat__toggle, .reduce-motion .chat__msg--typing i{ transition:none; animation:none; }

/* ---------- Mentions légales / confidentialité ---------- */
.legal{ border:0; padding:0; background:transparent; width:min(760px, calc(100vw - 32px)); max-height:min(86vh, 900px); color:var(--ink); }
.legal::backdrop{ background:rgba(5,10,25,.72); backdrop-filter: blur(4px); }
.legal__box{ position:relative; background:var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: clamp(24px, 4vw, 44px); max-height:min(86vh, 900px); overflow-y:auto; }
.legal__close{ position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background: var(--bg-alt); color: var(--ink); transition: background .2s var(--ease); }
.legal__close:hover{ background: color-mix(in srgb, var(--blue-elec) 14%, var(--bg-alt)); }
.legal__title{ font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0 48px 22px 0; }
.legal__body h3{ font-size:1.02rem; margin: 22px 0 8px; color: var(--blue-elec); }
.legal__body p{ color: var(--ink-soft); margin-bottom:10px; line-height:1.7; }
.form__status.err{ color:#b8293f; }