/* anis emyweb — feuille de styles principale */

:root {
  --ink: #0B1020;
  --ink-2: #1C2233;
  --muted: #3A4258;
  --muted-dark: #C7CBD8;
  --grad: linear-gradient(90deg, #E5007E, #FF2D8F, #FF6A00, #FFB000);
  --grad-diag-pink: linear-gradient(135deg, #E5007E, #FF2D8F);
  --grad-diag-orange: linear-gradient(135deg, #FF6A00, #FFB000);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Manrope, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: #D6006E; text-decoration: none; }
a:hover { color: #FF6A00; }

.page { width: 100%; overflow-x: hidden; }

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ---------- Boutons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-radius: 999px;
  font-weight: 700;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.btn-grad {
  color: #fff;
  background: var(--grad);
  background-size: 200% 100%;
  box-shadow: 0 14px 34px rgba(229, 0, 126, 0.3);
}
.btn-grad:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 20px 44px rgba(229, 0, 126, 0.38);
}

.btn-sm { padding: 13px 24px; font-size: 15px; gap: 10px; box-shadow: 0 8px 22px rgba(229, 0, 126, 0.28); }
.btn-sm:hover { box-shadow: 0 14px 30px rgba(229, 0, 126, 0.34); }
.btn-md { padding: 17px 30px; font-size: 16px; }
.btn-lg { padding: 18px 32px; font-size: 17px; }

.btn-dark { padding: 15px 28px; font-size: 15px; background: var(--ink); color: #fff; }
.btn-dark:hover { color: #fff; transform: translateY(-2px); }

.btn-white { padding: 15px 28px; font-size: 15px; background: #fff; color: var(--ink); }
.btn-white:hover { color: var(--ink); transform: translateY(-2px); }

.btn-outline { border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; }
.btn-outline:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }


/* ---------- Carte 03 : réseaux sociaux ---------- */

/* Les maquettes avant / après sont dessinées en CSS plutôt qu'importées :
   rien à produire ni à charger, et le rendu reste net à toute densité. */
.social-phones {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.4vw, 22px);
  padding: clamp(18px, 2.4vw, 34px);
}

.social-phone {
  flex: 0 1 clamp(112px, 14vw, 200px);
  border-radius: 24px;
  background: var(--ink);
  padding: 7px;
  box-shadow: 0 22px 46px rgba(11, 16, 32, 0.24);
}
.social-phone.is-before { transform: rotate(-5deg) translateY(14px); opacity: .92; }
.social-phone.is-after { transform: rotate(3deg); }

.social-screen { border-radius: 18px; background: #fff; overflow: hidden; padding: 10px 8px; }

.s-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.s-avatar { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 999px; }
.is-before .s-avatar { background: #D6D9E3; }
.is-after .s-avatar { background: var(--grad-diag-pink); }

.s-lines { flex: 1; min-width: 0; }
.s-lines i { display: block; height: 5px; border-radius: 3px; background: #E4E6ED; margin: 4px 0; }
.is-after .s-lines i:first-child { background: var(--ink); width: 68%; }

.s-hl { display: flex; gap: 6px; margin: 9px 0; }
.s-hl i { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 999px; }
.is-before .s-hl i { background: #F2F3F7; border: 1px dashed #D6D9E3; }
.is-after .s-hl i { border: 2px solid #fff; box-shadow: 0 0 0 2px #E5007E; }
.is-after .s-hl i:nth-child(odd) { background: var(--grad-diag-pink); }
.is-after .s-hl i:nth-child(even) { background: var(--grad-diag-orange); }

.s-feed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.s-feed i { aspect-ratio: 4 / 5; border-radius: 3px; }
.is-before .s-feed i { background: #D6D9E3; }
.is-before .s-feed i:nth-child(3n + 2) { background: #C7CBD8; }
.is-after .s-feed i:nth-child(6n + 1),
.is-after .s-feed i:nth-child(6n + 5) { background: var(--grad-diag-pink); }
.is-after .s-feed i:nth-child(6n + 2),
.is-after .s-feed i:nth-child(6n + 6) { background: var(--ink); }
.is-after .s-feed i:nth-child(6n + 3),
.is-after .s-feed i:nth-child(6n + 4) { background: var(--grad-diag-orange); }

@media (prefers-reduced-motion: reduce) {
  .social-phone { transform: none; }
}

/* ---------- Marque ---------- */

.brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.logo { width: 46px; height: 46px; object-fit: contain; border-radius: 10px; }
.logo-sm { width: 40px; height: 40px; }

.wordmark { font-size: 26px; letter-spacing: -0.02em; color: var(--ink); }
.wordmark:hover { color: var(--ink); }
.wordmark strong { font-weight: 800; }
.wordmark span { font-weight: 400; color: var(--ink-2); }
.wordmark-sm { font-size: 22px; }

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

#site-header {
  /* Sorti du flux : le héros et son visuel démarrent réellement au pixel 0
     derrière la navigation, sans bande autonome. */
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}
/* Le verre n'apparaît qu'après le départ du haut de page : il protège la
   lisibilité sur les sections claires sans casser la composition Hero. */
#site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.76);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(11, 16, 32, 0.06);
  box-shadow: 0 6px 24px rgba(11, 16, 32, 0.08);
}

.header-inner {
  max-width: 1340px;
  margin: 0 auto;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  flex-wrap: nowrap;
  transition: padding .25s ease;
}
#site-header.is-scrolled .header-inner { padding: 8px 28px; }

#main-nav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
  gap: clamp(16px, 2.2vw, 34px);
  white-space: nowrap;
}
#main-nav a { font-size: 15px; font-weight: 500; color: var(--muted); white-space: nowrap; }
#main-nav a:hover { color: var(--ink); }
#main-nav a.is-active {
  font-weight: 700;
  color: var(--ink);
  padding-bottom: 4px;
  border-bottom: 2px solid #FF2D8F;
}

.header-cta { flex: 0 0 auto; }
.cta-short { display: none; }

#burger {
  display: none;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(11, 16, 32, 0.12);
  background: #fff;
  color: var(--ink);
  font-size: 18px;
  cursor: pointer;
}

#mobile-menu {
  border-top: 1px solid rgba(11, 16, 32, 0.06);
  padding: 14px 28px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fff;
}
#mobile-menu[hidden] { display: none; }
#mobile-menu a { font-size: 16px; color: var(--muted); }
#mobile-menu a.is-active { font-weight: 700; color: var(--ink); }

/* L'entrée de réservation se distingue des liens de navigation. */
#mobile-menu a.mobile-menu-cta {
  margin-top: 6px;
  padding: 13px 20px;
  border-radius: 999px;
  background: var(--grad);
  color: #fff;
  font-weight: 700;
  text-align: center;
}

/* ---------- Héros ---------- */

.hero { position: relative; background: #fff; overflow: hidden; }

.hero-art {
  position: absolute;
  inset: 0;
  width: 100%;
}
.hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Canvas étendu à partir du visuel original : même échelle/placement du sujet,
     sans vide ni colonne colorée ajoutée à droite. */
  object-position: 47% 50%;
}

.hero-scrim-x,
.hero-scrim-y { pointer-events: none; position: absolute; inset: 0; }
.hero-scrim-x {
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.96) 22%, rgba(255, 255, 255, 0.7) 38%, rgba(255, 255, 255, 0.16) 54%, rgba(255, 255, 255, 0) 68%);
}
.hero-scrim-y {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, 0) 76%, rgba(255, 255, 255, 0.4) 100%);
}

.hero-grid {
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 470px), 1fr));
  align-items: center;
}

.hero-copy { /* Dégage le contenu sous l'en-tête superposé, sans décaler le fond. */
  padding: 146px 28px 72px;
  position: relative;
  z-index: 3;
}

.eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 22px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.eyebrow-dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, #E5007E, #FF8A00);
}

.hero-copy h1 {
  margin: 0;
  font-size: clamp(38px, 4.6vw, 70px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 800;
  text-wrap: balance;
}

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* `background-image` et non `background` : la forme courte réinitialiserait
   le `background-clip: text` hérité de .grad-text. */
.grad-text-warm { background-image: linear-gradient(90deg, #FF2D8F, #FF6A00, #FFC300); }

.lede {
  margin: 26px 0 0;
  max-width: 520px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}

.hero-actions { margin: 34px 0 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* Le bouton blanc se détache mal du visuel clair du héros : on lui donne un
   léger relief plutôt qu'un contour, pour rester dans le style des autres. */
.hero-actions .btn-white { box-shadow: 0 8px 22px rgba(11, 16, 32, 0.12); }
.hero-actions .btn-white:hover { box-shadow: 0 14px 30px rgba(11, 16, 32, 0.18); }

/* Ligne de réassurance sous les actions du héros. */
.hero-note {
  margin: 16px 0 0;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--muted);
}

.hero-note-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 9px;
  border-radius: 999px;
  background: #16A34A;
  vertical-align: middle;
}

.stats { margin: 48px 0 0; display: flex; gap: 0; flex-wrap: wrap; }
.stat { padding-right: 34px; }
.stat dd { margin: 0; font-size: 32px; font-weight: 800; letter-spacing: -0.02em; }
.stat dt { font-size: 14px; color: var(--muted); margin-top: 4px; }
.stat-pink { padding: 0 34px 0 0; }
.stat-orange { padding: 0 0 0 34px; border-left: 2px solid #FF8A00; }
.stat dt span { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }

.hero-side { position: relative; min-height: 520px; }

.hero-script {
  position: absolute;
  top: 6%;
  left: 12%;
  z-index: 2;
  text-align: right;
  transform: rotate(-8deg);
  transform-origin: 0 50%;
}

.script { font-family: Caveat, "Segoe Script", cursive; font-weight: 700; color: var(--ink); }
.hero-script .script { display: block; font-size: clamp(28px, 2.8vw, 44px); white-space: nowrap; }

.underline-grad {
  display: block;
  height: 4px;
  border-radius: 4px;
  margin-top: 2px;
  background: linear-gradient(90deg, #E5007E, #FF6A00, #FFC300);
}

.hero-list {
  position: absolute;
  top: 50%;
  right: 3%;
  margin: 0;
  padding: 0 14px 0 16px;
  list-style: none;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hero-list::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 0;
  bottom: 2px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, #FF2D8F, #FF6A00, #FFC300);
}
.hero-list li {
  font-size: 17px;
  font-weight: 900;
  line-height: 1.2;
  color: #000;
  -webkit-text-stroke: 0;
  text-shadow: none;
}

.hero-tagline {
  position: absolute;
  bottom: -9%;
  right: 4%;
  margin: 0;
  padding-right: 14px;
  text-align: right;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1.5;
  color: #000;
  -webkit-text-stroke: 0;
  text-shadow: none;
}
.hero-tagline::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 0;
  bottom: 2px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, #FF2D8F, #FF6A00, #FFC300);
}

/* ---------- Cartes services ---------- */

#services {
  max-width: 1340px;
  margin: 0 auto;
  /* Resserre la transition Hero → Services sans modifier les cartes. */
  padding: 44px 28px 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}

.card {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: clamp(26px, 3vw, 40px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  transition: transform .3s ease, box-shadow .3s ease;
}

.card-light {
  background: #F7F7F9;
  border: 1px solid rgba(11, 16, 32, 0.06);
  box-shadow: 0 1px 2px rgba(11, 16, 32, 0.05), 0 18px 44px rgba(11, 16, 32, 0.07);
}
.card-light:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(11, 16, 32, 0.06), 0 28px 60px rgba(11, 16, 32, 0.11);
}

.card-dark {
  background: #080C18;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 2px rgba(11, 16, 32, 0.2), 0 18px 44px rgba(11, 16, 32, 0.28);
}
.card-dark:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(11, 16, 32, 0.24), 0 28px 60px rgba(11, 16, 32, 0.36);
}

.card-body { position: relative; z-index: 2; }

.card-num { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.card-kicker { margin: 6px 0 18px; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; color: var(--muted); }
.card-dark .card-kicker { color: var(--muted-dark); }

.card h2 {
  margin: 0;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 800;
}

.card-text { margin: 16px 0 0; font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 420px; text-wrap: pretty; }
.card-dark .card-text { color: var(--muted-dark); max-width: 400px; }

.checks { margin: 22px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.checks li { display: flex; align-items: center; gap: 11px; font-size: 15px; color: var(--ink-2); }
.card-dark .checks li { color: #fff; }

.check {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.check-pink { background: var(--grad-diag-pink); }
.check-orange { background: var(--grad-diag-orange); }

.card .btn-dark,
.card .btn-white { margin-top: 28px; }

/* Les deux cartes partagent le même cadre visuel : une boîte 6/5 arrondie.
   Un visuel cadré reste lisible à toutes les largeurs, là où un débordement
   pleine carte forcerait un recadrage `cover` beaucoup trop agressif. */
.card-visual { position: relative; align-self: center; }

.device-frame,
.robot-frame,
.social-phones { width: 100%; aspect-ratio: 6 / 5; }

.device-frame img,
.robot-frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }


/* La signature manuscrite est placée au-dessus du visuel plutôt qu'en
   surimpression : les icônes claires de l'image la rendaient illisible. */
.card-script { margin: 0 0 14px auto; width: max-content; max-width: 100%; text-align: right; }
.card-script .script {
  display: block;
  font-size: 26px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.05;
  white-space: nowrap;
}
.card-dark .card-script .script { color: #fff; }
.card-script .underline-grad { margin-top: 4px; }

.float-slow { animation: floaty 6s ease-in-out infinite; }
.float-slower { animation: floaty 8s ease-in-out infinite; }

/* ---------- Process projet ---------- */

#apropos {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 1.1fr .95fr .95fr;
  gap: 44px;
  max-width: none;
  margin: 0;
  padding: 76px clamp(54px, 4.25vw, 68px) 86px;
  overflow: hidden;
  background: #fff;
}
.process-line {
  position: absolute;
  z-index: -1;
  top: 117px;
  left: clamp(100px, 8vw, 128px);
  right: clamp(100px, 8vw, 128px);
  height: 3px;
  background-image: radial-gradient(circle, #E5007E 1.25px, transparent 1.65px);
  background-size: 10px 3px;
  opacity: .78;
}
.process-step { min-width: 0; }
.process-orb {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin: 0 0 28px;
  color: #0B1020;
  border: 1px solid rgba(229, 0, 126, .10);
  border-radius: 50%;
  background: #fffaf8;
  box-shadow: 0 10px 22px rgba(229, 0, 126, .14), 0 0 38px rgba(229, 0, 126, .12);
}
.process-orb svg { width: 42px; height: 42px; }
.process-index { margin: 0 0 7px; color: #E5007E; font-size: 14px; line-height: 1; font-weight: 800; }
#apropos .process-step h3 { margin: 0 0 14px; color: #0B1020; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.12; font-weight: 800; letter-spacing: -0.035em; }
#apropos .process-step p { margin: 0; max-width: 280px; color: #5B6170; font-size: 15px; line-height: 1.35; }

@media (max-width: 860px) {
  #apropos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 54px 28px; padding: 58px 28px; }
  .process-line { display: none; }
  .process-orb { margin-bottom: 22px; }
}
@media (max-width: 520px) {
  #apropos { grid-template-columns: 1fr; gap: 42px; padding: 46px 22px; }
  #apropos .process-step p { max-width: 330px; }
}

/* ---------- Section transformation ---------- */

#contact { position: relative; background: #05070F; color: #fff; overflow: hidden; }

/* Une seule bannière cinématique : les deux visuels se fondent dans le même noir. */
.transform-grid {
  position: relative;
  width: 100%;
  min-height: clamp(330px, 28vw, 390px);
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 88%, rgba(229, 0, 126, .12), transparent 42%), #05070F;
}

.dino-panel { position: absolute; inset-block: 0; z-index: 1; pointer-events: none; }
.dino-panel-left { left: 0; width: 28%; }
.dino-panel-right { right: 0; width: 40%; }
.dino-art { position: absolute; inset: 0; }
.dino-art img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.dino-panel-left .dino-art { -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 58%, transparent 100%); mask-image: linear-gradient(90deg, #000 0%, #000 58%, transparent 100%); }
.dino-panel-right .dino-art {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%);
}
/* Cadrage spécifique au T-Rex : la tête reste entière, le bas peut sortir. */
.dino-panel-right .dino-art img {
  object-fit: contain;
  object-position: right bottom;
  transform: translateX(-12px) scale(1.24);
  transform-origin: right bottom;
}
/* Le libellé Demain est posé dans le noir, avec une flèche vers la tête. */
.dino-content-right .script-right {
  position: absolute;
  top: 24px;
  left: 50px;
  margin: 0;
  transform: none;
  text-align: left;
}
.dino-arrow {
  position: absolute;
  z-index: 3;
  overflow: visible;
  color: #fff;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dino-arrow-left { top: 76px; left: 58px; width: 155px; height: 124px; }
.dino-arrow-right { top: 57px; left: 190px; width: 180px; height: 70px; }
.dino-panel-left .script-light::after,
.dino-panel-right .script-right::after { content: none; }
.dino-scrim { display: none; }

.dino-content { position: absolute; z-index: 2; padding: 24px; width: 100%; height: 100%; }
.dino-panel-left .dino-content { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; }
.dino-content-right { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; }

.script-light { margin: 0; font-family: Caveat, "Segoe Script", cursive; font-size: 21px; line-height: 1.05; color: #fff; font-weight: 600; }
.script-light::after { content: "  ↘"; display: block; margin-top: 4px; font-size: 26px; }
.script-right { text-align: right; }
.script-right::after { content: "↙"; }

.pills { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.pills li {
  font-size: 11px;
  line-height: 1.1;
  font-weight: 600;
  color: #fff;
  background: rgba(5, 7, 15, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 5px 10px;
  white-space: nowrap;
}
.pills-right { margin: auto 0 0; align-items: flex-end; }
.pills-right li { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; }
.pills-right .check { width: 17px; height: 17px; font-size: 10px; }

.transform-copy {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 28%;
  width: 37%;
  padding: 0 16px;
  text-align: center;
  transform: translateY(-50%);
}
/* La révélation ne doit pas annuler le centrage de la composition. */
.transform-copy.reveal-init { transform: translateY(calc(-50% + 22px)); }
.transform-copy.reveal-in { transform: translateY(-50%); }
.transform-copy h2 {
  margin: 0;
  font-size: clamp(27px, 3vw, 40px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: #fff;
}
.transform-copy > p { margin: 10px auto 0; max-width: 330px; font-size: 14px; line-height: 1.35; color: #D6D9E3; }
.transform-actions { margin-top: 18px; display: flex; justify-content: center; gap: 10px; flex-wrap: nowrap; }
.transform-actions .btn { min-height: 42px; padding: 11px 18px; font-size: 13px; white-space: nowrap; }
.transform-actions .btn-grad { box-shadow: 0 10px 24px rgba(229, 0, 126, 0.28); }

/* ---------- Pied de page ---------- */

footer { background: #fff; }

.footer-inner {
  max-width: 1340px;
  margin: 0 auto;
  padding: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
}

.footer-inner nav { display: flex; gap: 28px; flex-wrap: wrap; }
.footer-inner nav a { font-size: 14px; color: var(--muted); }
.footer-inner nav a:hover { color: var(--ink); }

.socials { display: flex; gap: 12px; }
.social {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease;
}
.social:hover { transform: translateY(-2px); }

.whatsapp-float {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 20;
  width: 82px;
  height: 82px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 14px 32px rgba(8, 12, 24, 0.32);
}
.whatsapp-float .whatsapp-logo { width: 42px; height: 42px; display: block; }
.whatsapp-float:hover { transform: translateY(-3px) scale(1.04); }

/* ---------- Formulaire projet ---------- */
.project-form-section {
  max-width: 1340px;
  margin: 0 auto;
  padding: 32px 28px;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 68px);
  align-items: start;
}
.project-form-intro h2 { margin: 10px 0 16px; font-size: clamp(34px, 4vw, 56px); line-height: 1.02; letter-spacing: -0.035em; }
.project-form-intro > p:last-child { max-width: 420px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.55; }
.project-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: grid; gap: 8px; }
.form-field-wide, .form-actions { grid-column: 1 / -1; }
.form-field label { color: var(--ink); font-size: 14px; font-weight: 750; }
.form-field input, .form-field textarea {
  width: 100%;
  border: 1px solid rgba(11, 16, 32, .2);
  border-radius: 12px;
  padding: 14px 15px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  resize: vertical;
}
.form-field input:focus, .form-field textarea:focus { outline: 3px solid rgba(229, 0, 126, .18); border-color: #E5007E; }
.form-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.form-status { margin: 0; color: var(--muted); font-size: 13px; }


/* ---------- Révélation au défilement ---------- */

.reveal-init { opacity: 0; transform: translateY(22px); }
.reveal-in { opacity: 1; transform: none; }
[data-reveal] { transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1); }

/* ---------- Points de rupture ---------- */

/* Le seul ajustement mobile du Bloc 02 : texte puis portrait entier, sans
   appliquer le comportement `cover` au visuel fourni. */
@media (max-width: 699px) {
  .card-dark .robot-frame { aspect-ratio: 630 / 1280; }
  .card-dark .robot-frame img { object-fit: contain; background: #080C18; }
}

/* Entre 700 et 1099 px les cartes sont seules sur leur rangée : elles ont la
   place de poser le visuel à droite du texte. Au-delà, les trois passent côte
   à côte et repassent en composition empilée (voir plus bas). */
@media (min-width: 700px) and (max-width: 1099px) {
  .card-light,
  .card-dark {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    align-items: center;
    gap: clamp(12px, 1.6vw, 18px);
  }

  /* Le visuel est une véritable colonne de carte, pas une vignette posée
     sous le texte : il occupe toute la zone droite, du haut au bas. */
  .card {
    grid-template-columns: 1fr;
    padding-right: calc(48% + clamp(18px, 2vw, 30px));
  }

  .card-visual {
    position: absolute;
    inset: 0 0 0 auto;
    width: 48%;
    height: 100%;
    min-width: 0;
    margin: 0;
  }

  .device-frame,
  .robot-frame,
  .social-phones {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }

  .device-frame img,
  .robot-frame img {
    border-radius: 0;
    object-fit: cover;
    object-position: center;
  }


  /* BLOC 01 : l'original portrait est conservé sans recadrage. Sa proportion
     (630×1280) correspond à la colonne de la maquette ; seule une éventuelle
     fine marge de fond de carte peut apparaître selon la hauteur responsive. */
  .card-light { padding-right: calc(50% + clamp(18px, 2vw, 30px)); }
  .card-light .card-visual { width: 50%; }
  .card-light .device-frame img { object-fit: contain; }

  /* BLOC 02 : même grille 50/50 que Bloc 01. Le portrait reste intact ;
     un fondu côté texte supprime la cassure sans retoucher l'asset. */
  .card-dark { padding-right: calc(50% + clamp(18px, 2vw, 30px)); }
  /* Même départ vertical que le contenu du Bloc 01 ; la carte ne recentre
     plus le texte plus bas que son homologue clair. */
  .card-dark .card-body { align-self: start; }
  .card-dark .card-visual { width: 50%; }
  .card-dark .robot-frame img { object-fit: contain; }
  .card-social { padding-right: calc(38% + clamp(18px, 2vw, 30px)); }
  .card-social .card-visual { width: 38%; }
  .card-social .card-text { max-width: 560px; }

  .card-dark .card-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, #080C18 0%, rgba(8, 12, 24, .88) 10%, rgba(8, 12, 24, .42) 24%, rgba(8, 12, 24, 0) 46%);
  }
  .card-script {
    position: absolute;
    top: 24px;
    right: 22px;
    z-index: 2;
    margin: 0;
    max-width: calc(100% - 44px);
    transform: rotate(-4deg);
    transform-origin: 100% 0;
  }
  .card-script .script {
    font-size: clamp(20px, 1.65vw, 26px);
    line-height: 1.02;
  }
  .card-script .underline-grad { width: 82%; margin-left: auto; }
  .card-dark .btn-white { white-space: nowrap; }

  .card h2 { font-size: clamp(24px, 2vw, 30px); }
  .card-text { margin-top: 14px; font-size: 13px; line-height: 1.5; }
  .checks { margin-top: 18px; gap: 8px; }
  .checks li { gap: 8px; font-size: 13px; }
  .check { width: 20px; height: 20px; font-size: 11px; }
  .card .btn-dark,
  .card .btn-white { margin-top: 20px; }
}

@media (min-width: 1100px) {
  /* La bannière transformation gère ses trois zones par calques absolus. */

  /* Les trois prestations sur une seule rangée. Chaque carte ne fait plus
     qu'environ 410 px : le texte et le visuel s'y empilent, comme sur mobile. */
  #services { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Colonne flexible pour que les trois cartes aient la même hauteur et que
     leurs visuels s'alignent en bas, malgré des listes de longueurs différentes.
     Le corps occupe l'espace restant et pousse son bouton vers le bas : les
     trois boutons tombent alors sur la même ligne. */
  .card { display: flex; flex-direction: column; }
  .card-body { display: flex; flex-direction: column; flex: 1; }
  .card-body .btn { align-self: flex-start; }
  .card-visual { width: 100%; }

  /* Visuel en portrait doux : les sources des cartes 01 et 02 sont des
     portraits 630×1280, qu'un cadre 6/5 rognerait jusqu'à les rendre illisibles. */
  .device-frame,
  .robot-frame { aspect-ratio: 3 / 4; }
  .device-frame img,
  .robot-frame img { object-fit: cover; object-position: center; }

  /* Même cadre que les deux autres visuels : c'est ce qui aligne les trois
     annotations manuscrites et les trois bas de carte. Les maquettes se
     décalent verticalement pour occuper la hauteur plutôt que flotter au centre. */
  .social-phones { aspect-ratio: 3 / 4; padding: 0; gap: 12px; }
  .social-phone { flex: 0 1 clamp(130px, 14.5vw, 196px); }
  .social-phone.is-before { transform: rotate(-5deg) translateY(42px); }
  .social-phone.is-after { transform: rotate(3deg) translateY(-30px); }

  /* Même échelle typographique compacte que la composition intermédiaire. */
  .card h2 { font-size: clamp(24px, 1.9vw, 29px); }
  .card-text { margin-top: 14px; font-size: 13.5px; line-height: 1.5; }
  .checks { margin-top: 18px; gap: 8px; }
  .checks li { gap: 8px; font-size: 13.5px; }
  .check { width: 20px; height: 20px; font-size: 11px; }
  /* `auto` et non une marge fixe : le bouton est poussé au bas du corps de
     carte, ce qui aligne les trois boutons sur une même ligne malgré des
     textes de longueurs différentes. La marge basse de la liste garantit
     l'espace minimal quand le texte remplit déjà la carte. */
  .card .btn-dark,
  .card .btn-white { margin-top: auto; }
  .card .checks { margin-bottom: 20px; }

  .card-script .script { font-size: clamp(19px, 1.5vw, 23px); }
}

/* Compression additionnelle de 20 % sur desktop : le Hero conserve tous ses
   éléments, avec une hiérarchie proportionnellement compactée. */
@media (min-width: 940px) {
  .hero-copy { padding: 92px 28px 16px; }
  .hero-copy h1 { font-size: clamp(36px, 3.7vw, 60px); }
  .lede { margin-top: 14px; font-size: 15px; line-height: 1.45; }
  .hero-actions { margin-top: 16px; }
  .stats { margin-top: 16px; }
  /* La colonne visuelle est désormais plus proche du haut : on garde ses
     deux annotations à l'intérieur du Hero et hors du header. */
  .hero-script { top: 12%; }
  .hero-tagline { bottom: 3%; }
}

@media (max-width: 1099px) {
  #main-nav { display: none; }
  #burger { display: flex; align-items: center; justify-content: center; }
}

/* Le visuel héros est une bannière 2.4:1 : en pleine largeur il passe en fond,
   en dessous il reprend sa bande naturelle (un recadrage vertical sortirait
   la tortue du champ). */
@media (max-width: 939px) {
  .hero-art { position: relative; inset: auto; aspect-ratio: 2.4; }
  /* Le portrait mobile reprend le visuel entier : la réduction desktop vise
     uniquement l'équilibre des trois colonnes, pas un recadrage mobile. */
  .hero-art img {
    transform: none;
    transform-origin: center;
    object-position: center;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hero-scrim-x,
  .hero-scrim-y,
  .hero-side { display: none; }
}

@media (max-width: 700px) {
  #contact .transform-grid { min-height: 620px; }
  #contact .dino-panel-left { width: 56%; height: 250px; inset-block: 0 auto; }
  #contact .dino-panel-right { width: 76%; height: 340px; inset-block: auto 0; }
  #contact .dino-content { padding: 16px; }
  #contact .script-light { font-size: 18px; }
  #contact .script-light::after { font-size: 22px; }
  #contact .pills { gap: 4px; }
  #contact .pills li { font-size: 10px; padding: 4px 8px; }
  #contact .transform-copy { left: 6%; width: 88%; padding: 0 8px; }
  #contact .transform-copy h2 { font-size: clamp(27px, 8vw, 34px); }
  #contact .transform-copy > p { font-size: 13px; }
  #contact .transform-actions { gap: 6px; }
  #contact .transform-actions .btn { min-height: 39px; padding: 9px 11px; font-size: 11px; gap: 6px; }
}

@media (max-width: 619px) {
  .cta-long { display: none; }
  .cta-short { display: inline; }
  .header-inner { padding: 12px 18px; gap: 10px; }
  .logo { width: 38px; height: 38px; }
  .wordmark { font-size: 20px; }
  .btn-sm { padding: 11px 16px; font-size: 14px; gap: 6px; }
  .hero-copy { padding: 44px 18px 56px; }
  .eyebrow { display: block; font-size: 12px; letter-spacing: 0.1em; }
  .eyebrow-dot { display: inline-block; vertical-align: middle; margin-right: 8px; }
  .hero-actions { gap: 10px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-note { font-size: 13.5px; }
  #services { padding: 48px 18px 0; }
  .card { padding: 28px; }
  #apropos { padding: 56px 18px; }
  .footer-inner { padding: 24px 18px; }
  .project-form-section { padding: 32px 18px; grid-template-columns: 1fr; gap: 28px; }
  .project-form { grid-template-columns: 1fr; }
  .form-field-wide, .form-actions { grid-column: auto; }
  .whatsapp-float { right: 18px; bottom: 18px; width: 68px; height: 68px; }
  .whatsapp-float .whatsapp-logo { width: 34px; height: 34px; }
  .stat, .stat-pink, .stat-orange { padding-right: 22px; }
  .stat-pink { padding-left: 0; }
  .stat-orange { padding-left: 22px; }
}

/* Sous 480 px, le bouton d'en-tête ne tient plus à côté de la marque et du
   menu : l'appel à l'action du héros prend le relais juste en dessous. */
@media (max-width: 479px) {
  .header-cta { display: none; }
  .card { padding: 24px 20px; }
  .card-dark .card-visual-fill { min-height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .float-slow, .float-slower { animation: none; }
  [data-reveal] { transition: none; }
  .reveal-init { opacity: 1; transform: none; }
}