/* ============================================================
   STUDIO — feuille de style principale
   Thème sombre, mobile first.
   Sommaire :
   1. Variables     2. Base      3. Utilitaires
   4. Boutons       5. En-tête   6. Hero
   7. Sections      8. Cartes    9. Méthode
   10. Diagnostic   11. Réalisations  12. Contact
   13. Pied de page 14. Animations
   ============================================================ */

/* Polices hébergées sur le site : aucune requête vers un service externe */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2");}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/dm-sans-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/dm-sans-latin-500-normal.woff2") format("woff2");}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");}

/* ---------- 1. VARIABLES ---------- */
:root{
  /* Palette du brandboard */
  --noir:      #0A0A0B;
  --surface:   #141416;
  --surface-2: #1A1A1D;
  --line:      #26262B;
  --line-fort: #3A3A42;
  --texte:     #F2F1EC;
  --muted:     #8B8B93;
  --lime:      #C8FF3D;
  --violet:    #6E56FF;

  /* Typographie */
  --titre: "Bricolage Grotesque", system-ui, sans-serif;
  --corps: "DM Sans", system-ui, -apple-system, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, monospace;

  /* Formes et rythme */
  --radius: 12px;
  --radius-sm: 10px;
  --largeur: 1180px;
  --gouttiere: clamp(20px, 5vw, 40px);
  --section: clamp(72px, 11vw, 140px);
}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--noir);
  color:var(--texte);
  font-family:var(--corps);
  font-size:clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

a{ color:inherit; text-decoration:none; }
a:hover{ color:var(--lime); }

h1,h2,h3{
  font-family:var(--titre);
  font-weight:800;
  letter-spacing:-0.03em;
  line-height:1.02;
  margin:0;
}

p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

/* Accessibilité : focus toujours visible */
:focus-visible{
  outline:2px solid var(--lime);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--lime); color:var(--noir);
  padding:12px 18px; border-radius:0 0 var(--radius-sm) 0;
  font-weight:500;
}
.skip-link:focus{ left:0; }

/* ---------- 3. UTILITAIRES ---------- */
.container{
  width:100%;
  max-width:var(--largeur);
  margin-inline:auto;
  padding-inline:var(--gouttiere);
}
.container--narrow{ max-width:860px; }

.mono{
  font-family:var(--mono);
  font-size:0.8125rem;
  letter-spacing:0.02em;
}

.eyebrow{
  font-family:var(--mono);
  font-size:0.8125rem;
  color:var(--muted);
  letter-spacing:0.04em;
  margin-bottom:18px;
}
.eyebrow--lime{ color:var(--lime); }

/* ---------- 4. BOUTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding:14px 24px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  font-family:var(--corps);
  font-size:0.9875rem;
  font-weight:500;
  cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease,
             color .2s ease, transform .2s ease;
}
.btn--primary{ background:var(--lime); color:var(--noir); }
.btn--primary:hover{ background:#D4FF66; color:var(--noir); transform:translateY(-1px); }
.btn--ghost{ background:transparent; color:var(--texte); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--line-fort); color:var(--texte); background:var(--surface); }
.btn--sm{ padding:10px 18px; font-size:0.9rem; }
.btn--full{ width:100%; }
.btn:disabled{ opacity:.35; cursor:not-allowed; transform:none; }

/* ---------- 5. EN-TÊTE ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(10,10,11,.78);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.header__inner{
  display:flex; align-items:center; gap:20px;
  min-height:68px;
}
.logo{
  font-family:var(--titre);
  font-weight:800;
  font-size:1.125rem;
  letter-spacing:-0.03em;
  margin-right:auto;
}
.logo:hover{ color:var(--texte); }
.logo__dot{ color:var(--lime); }

.nav__list{ display:flex; gap:28px; }
.nav__list a{
  font-size:0.9375rem;
  color:var(--muted);
  transition:color .2s ease;
}
.nav__list a:hover{ color:var(--texte); }

.burger{
  display:none;
  width:42px; height:42px;
  background:transparent;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  cursor:pointer;
  padding:0;
  place-items:center;
}
.burger span{
  display:block; width:16px; height:1.5px;
  background:var(--texte); margin:3px auto;
  transition:transform .25s ease, opacity .25s ease;
}
.burger[aria-expanded="true"] span:first-child{ transform:translateY(4.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-4.5px) rotate(-45deg); }

@media (max-width: 880px){
  .nav{
    position:absolute; left:0; right:0; top:100%;
    background:var(--noir);
    border-bottom:1px solid var(--line);
    padding:8px var(--gouttiere) 24px;
    display:none;
  }
  .nav.is-open{ display:block; }
  .nav__list{ flex-direction:column; gap:0; }
  .nav__list a{
    display:block; padding:14px 0;
    border-bottom:1px solid var(--line);
    font-size:1rem;
  }
  .header__cta{ display:none; }
  .burger{ display:grid; }
}

/* ---------- 6. HERO ---------- */
.hero{
  position:relative;
  isolation:isolate;
  padding-top:clamp(64px, 11vw, 120px);
  padding-bottom:clamp(64px, 10vw, 110px);
  overflow:hidden;
}
/* Visuel de fond + voile sombre : le texte reste parfaitement lisible */
.hero__media{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero__media img{ width:100%; height:100%; object-fit:cover; opacity:.8; }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, var(--noir) 0%, rgba(10,10,11,.93) 40%, rgba(10,10,11,.5) 100%),
    linear-gradient(180deg, rgba(10,10,11,.55) 0%, transparent 26%, rgba(10,10,11,.85) 88%, var(--noir) 100%);
}
@media (max-width: 760px){
  .hero__media img{ opacity:.4; }
  .hero__media::after{
    background:linear-gradient(180deg, rgba(10,10,11,.7) 0%, rgba(10,10,11,.88) 55%, var(--noir) 100%);
  }
}
/* Lueur violette très discrète, conforme au brandboard */
.hero__glow{
  position:absolute; z-index:-1; top:-180px; right:-120px;
  width:620px; height:620px;
  background:radial-gradient(circle, rgba(110,86,255,.16), transparent 68%);
  filter:blur(40px);
  pointer-events:none;
}
.hero__title{
  font-size:clamp(2.7rem, 8.2vw, 5.4rem);
  max-width:18ch;
  margin-bottom:28px;
}
.hero__sub{
  color:var(--muted);
  font-size:clamp(1.0625rem, 0.98rem + 0.5vw, 1.25rem);
  max-width:48ch;
  margin-bottom:36px;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:56px; }

.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chips li{
  font-family:var(--mono);
  font-size:0.75rem;
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:100px;
  padding:7px 14px;
}

/* --- Hero dynamique --- */
.hero{ min-height:min(88vh, 860px); display:flex; flex-direction:column; justify-content:center; }
.hero__inner{ position:relative; }

/* Dérive très lente du visuel de fond (effet de respiration) */
.hero__media img{ animation:derive 28s ease-in-out infinite alternate; transform-origin:70% 40%; }
@keyframes derive{
  from{ transform:scale(1.04) translate3d(0,0,0); }
  to  { transform:scale(1.14) translate3d(-1.5%, -1%, 0); }
}

/* Lueur lime qui suit la souris (position pilotée par main.js) */
.hero__spot{
  position:absolute; z-index:-1; inset:0; pointer-events:none;
  background:radial-gradient(480px circle at var(--mx,72%) var(--my,38%),
             rgba(200,255,61,.07), transparent 62%);
  transition:background-position .2s;
}

/* Titre : chaque ligne glisse depuis un masque */
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.hero__title .line > span{
  display:block;
  transform:translateY(112%);
  animation:monte .95s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay:var(--d,0s);
}
@keyframes monte{ to{ transform:none; } }

/* Apparition douce des autres éléments */
.anim{
  opacity:0; transform:translateY(14px);
  animation:entre .8s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay:var(--d,0s);
}
@keyframes entre{ to{ opacity:1; transform:none; } }

/* Filet lime qui se trace sous le titre */
.hero__rule{ height:1px; width:min(220px, 40%); margin:0 0 28px; background:var(--line); overflow:hidden; }
.hero__rule i{
  display:block; height:100%; background:var(--lime);
  transform:scaleX(0); transform-origin:left;
  animation:trace 1.1s cubic-bezier(.2,.8,.2,1) .42s forwards;
}
@keyframes trace{ to{ transform:scaleX(1); } }

/* Indicateur de défilement */
.hero__scroll{
  position:absolute; left:var(--gouttiere); bottom:26px;
  display:none; align-items:center; gap:12px;
  color:var(--muted);
}
.hero__scroll:hover{ color:var(--lime); }
.hero__scroll i{ display:block; width:1px; height:34px; background:var(--line-fort); position:relative; overflow:hidden; }
.hero__scroll i::after{
  content:""; position:absolute; left:0; top:-40%; width:1px; height:40%;
  background:var(--lime); animation:coule 2s ease-in-out 1.4s infinite;
}
@keyframes coule{ to{ top:110%; } }
@media (min-width: 900px){
  .hero__scroll{ display:flex; left:max(var(--gouttiere), calc((100vw - var(--largeur)) / 2 + var(--gouttiere))); }
}

/* Pastille lime qui pulse dans l'étiquette */
.hero .eyebrow--lime::before{
  content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--lime); margin-right:10px; vertical-align:1px;
  animation:pouls 2.4s ease-out infinite;
}
@keyframes pouls{
  0%  { box-shadow:0 0 0 0 rgba(200,255,61,.5); }
  70% { box-shadow:0 0 0 9px rgba(200,255,61,0); }
  100%{ box-shadow:0 0 0 0 rgba(200,255,61,0); }
}

/* Respect de la préférence « réduire les animations » */
@media (prefers-reduced-motion: reduce){
  .hero__media img, .hero .eyebrow--lime::before, .hero__scroll i::after{ animation:none; }
  .hero__title .line > span, .page-head .line > span, .anim{ animation:none; transform:none; opacity:1; }
  .hero__rule i{ animation:none; transform:none; }
  .hero__spot{ display:none; }
}

/* ---------- PAGES INTÉRIEURES ---------- */
.page-head{
  position:relative; overflow:hidden;
  padding-top:clamp(64px, 10vw, 112px);
  padding-bottom:clamp(40px, 6vw, 72px);
}
.page-head::before{
  content:""; position:absolute; top:-200px; right:-140px; width:560px; height:560px;
  background:radial-gradient(circle, rgba(110,86,255,.13), transparent 68%);
  filter:blur(40px); pointer-events:none;
}
.page-head--compact{ padding-top:clamp(48px, 7vw, 84px); padding-bottom:clamp(8px, 2vw, 24px); }
.page-head__title{ font-size:clamp(2.2rem, 6vw, 4rem); max-width:20ch; margin-bottom:20px; }
.page-head--compact .page-head__title{ font-size:clamp(2rem, 5vw, 3.1rem); max-width:none; }
.page-head__sub{ color:var(--muted); font-size:clamp(1.0625rem, .98rem + .5vw, 1.2rem); max-width:52ch; }
.page-head .line{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.page-head .line > span{
  display:block; transform:translateY(112%);
  animation:monte .95s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:var(--d,0s);
}
.section--tight{ padding-block:clamp(48px, 7vw, 88px); }

/* Déroulé */
.timeline{ display:grid; gap:0; max-width:820px; }
.timeline__item{
  display:grid; grid-template-columns:64px 1fr; gap:18px;
  padding:30px 0; border-top:1px solid var(--line);
}
.timeline__item:last-child{ border-bottom:1px solid var(--line); }
.timeline__num{ font-family:var(--mono); font-size:.8125rem; color:var(--lime); padding-top:8px; }
.timeline__title{ font-size:clamp(1.4rem, 1.2rem + .8vw, 1.8rem); margin-bottom:10px; }
.timeline__text{ color:var(--muted); max-width:58ch; margin-bottom:12px; }
.timeline__out{ color:var(--texte); opacity:.8; }

/* Pour qui */
.split{ display:grid; gap:36px; }
@media (min-width: 900px){ .split{ grid-template-columns:1.1fr 1fr; align-items:center; gap:64px; } }
.tags{ display:flex; flex-wrap:wrap; gap:10px; }
.tags li{
  border:1px solid var(--line); border-radius:100px; padding:10px 18px;
  font-size:.9375rem; transition:border-color .2s ease, color .2s ease;
}
.tags li:hover{ border-color:var(--lime); color:var(--lime); }

/* Engagements */
.compare{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(290px, 1fr)); }
.compare__col{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px; }
.compare__title{ font-size:1.2rem; display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.compare__mark{
  display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  border:1px solid var(--line-fort); color:var(--muted); font-family:var(--mono); font-size:.9rem; flex-shrink:0;
}
.compare__mark--ok{ border-color:var(--lime); color:var(--lime); }
.compare__col li{ color:var(--muted); font-size:.9375rem; padding:10px 0; border-top:1px solid var(--line); }

/* FAQ */
.faq details{ border-top:1px solid var(--line); }
.faq details:last-child{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none; padding:22px 40px 22px 0; position:relative;
  font-family:var(--titre); font-weight:800; letter-spacing:-.02em; font-size:1.125rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%);
  font-family:var(--mono); font-weight:400; color:var(--lime); font-size:1.3rem; transition:transform .25s ease;
}
.faq details[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq summary:hover{ color:var(--lime); }
.faq details p{ color:var(--muted); padding:0 40px 24px 0; max-width:62ch; }
.faq details p a{ color:var(--lime); text-decoration:underline; text-underline-offset:3px; }

/* Appel à l'action */
.cta{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
  padding:clamp(32px, 6vw, 64px); text-align:center; position:relative; overflow:hidden;
}
.cta::before{
  content:""; position:absolute; top:-160px; left:50%; transform:translateX(-50%);
  width:480px; height:320px; background:radial-gradient(ellipse, rgba(110,86,255,.14), transparent 70%); pointer-events:none;
}
.cta > *{ position:relative; }
.cta__title{ font-size:clamp(1.8rem, 1.2rem + 2.4vw, 2.8rem); margin-bottom:12px; }
.cta__text{ color:var(--muted); margin-bottom:28px; }
.cta__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }

/* Pages légales */
.prose{ max-width:720px; }
.prose h2{ font-size:clamp(1.25rem, 1.1rem + .6vw, 1.55rem); margin:46px 0 14px; }
.prose p, .prose li{ color:var(--muted); font-size:.9875rem; }
.prose p{ margin-bottom:14px; }
.prose strong{ color:var(--texte); font-weight:500; }
.prose ul{ margin:0 0 16px; }
.prose li{ position:relative; padding:4px 0 4px 18px; }
.prose li::before{ content:""; position:absolute; left:0; top:15px; width:6px; height:1px; background:var(--lime); }
.prose a{ color:var(--texte); text-decoration:underline; text-underline-offset:3px; }
.prose a:hover{ color:var(--lime); }

.fiche{ margin:0 0 8px; border-top:1px solid var(--line); }
.fiche > div{ display:grid; grid-template-columns:minmax(120px, 210px) 1fr; gap:18px; padding:13px 0; border-bottom:1px solid var(--line); }
.fiche dt{ font-family:var(--mono); font-size:.75rem; color:var(--muted); padding-top:3px; }
.fiche dd{ margin:0; font-size:.9375rem; }
@media (max-width: 560px){ .fiche > div{ grid-template-columns:1fr; gap:4px; } }

/* Champs à compléter : très visibles pour ne rien oublier */
mark.todo{
  background:rgba(200,255,61,.12); color:var(--lime);
  border:1px dashed rgba(200,255,61,.45); border-radius:6px; padding:1px 7px;
  font-family:var(--mono); font-size:.8125rem;
}
.todo-banner{
  border:1px solid rgba(200,255,61,.4); background:rgba(200,255,61,.05);
  border-radius:var(--radius); padding:16px 20px; margin-bottom:40px;
  color:var(--texte); font-size:.9rem;
}
.todo-banner strong{ color:var(--lime); font-weight:500; }

.footer__nav a[aria-current="page"]{ color:var(--texte); }

/* ---------- 7. SECTIONS ---------- */
.section{ padding-block:var(--section); }
.section--alt{
  background:
    linear-gradient(var(--noir), #0C0C0E 12%, #0C0C0E 88%, var(--noir));
  border-block:1px solid var(--line);
}
.section__head{ max-width:62ch; margin-bottom:clamp(40px, 6vw, 64px); }
.section__title{
  font-size:clamp(1.9rem, 1.3rem + 2.6vw, 3rem);
  margin-bottom:18px;
}
.section__lead{ color:var(--muted); max-width:56ch; }

/* ---------- 8. CARTES ---------- */
.grid{ display:grid; gap:18px; }
.grid--4{ grid-template-columns:repeat(auto-fit, minmax(255px, 1fr)); }
.grid--3{ grid-template-columns:repeat(auto-fit, minmax(290px, 1fr)); }

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px 24px 28px;
  transition:border-color .25s ease, transform .25s ease, background-color .25s ease;
}
.card:hover{
  border-color:var(--line-fort);
  background:var(--surface-2);
  transform:translateY(-3px);
}
.card__num{
  font-family:var(--mono);
  font-size:0.8125rem;
  color:var(--lime);
  margin-bottom:22px;
}
.card__title{ font-size:1.3125rem; margin-bottom:10px; }
.card__text{ color:var(--muted); font-size:0.9375rem; margin-bottom:18px; }
.card__list{ border-top:1px solid var(--line); padding-top:16px; }
.card__list li{
  font-size:0.875rem;
  color:var(--muted);
  padding:5px 0 5px 16px;
  position:relative;
}
.card__list li::before{
  content:""; position:absolute; left:0; top:13px;
  width:5px; height:1px; background:var(--line-fort);
}
.card__tags{ color:var(--muted); margin-top:12px; }
.card--project img{ border-radius:var(--radius-sm); margin-bottom:18px; }

.note{
  display:flex; gap:12px;
  margin-top:28px;
  color:var(--muted);
  font-size:0.9375rem;
  max-width:70ch;
}
.note__mark{ color:var(--lime); flex-shrink:0; }

/* ---------- 9. MÉTHODE ---------- */
.band{
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  margin-bottom:clamp(34px, 5vw, 58px);
}
.band img{
  width:100%; display:block;
  aspect-ratio:21 / 9;
  object-fit:cover;
}
@media (max-width: 620px){ .band img{ aspect-ratio:16 / 9; } }

.steps{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit, minmax(270px, 1fr));
  counter-reset:etape;
}
.step{
  border-top:1px solid var(--line);
  padding-top:26px;
}
.step__num{
  font-family:var(--mono);
  font-size:0.8125rem;
  color:var(--lime);
  margin-bottom:20px;
}
.step__title{ font-size:1.5rem; margin-bottom:12px; }
.step__text{ color:var(--muted); font-size:0.9375rem; max-width:40ch; }

/* ---------- 10. DIAGNOSTIC ---------- */
.quiz{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(24px, 4vw, 38px);
}
.quiz__head{ display:flex; align-items:center; gap:16px; margin-bottom:28px; }
.quiz__step{ color:var(--muted); flex-shrink:0; }
.quiz__bar{
  flex:1; height:2px;
  background:var(--line);
  border-radius:2px; overflow:hidden;
}
.quiz__bar span{
  display:block; height:100%; width:25%;
  background:var(--lime);
  transition:width .35s ease;
}
.quiz__body fieldset{ border:0; margin:0; padding:0; min-width:0; }
.quiz__question{
  font-family:var(--titre);
  font-weight:800;
  font-size:clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  letter-spacing:-0.03em;
  line-height:1.15;
  margin:0 0 22px;
  padding:0;
  border:0;
}
.quiz__options{ display:grid; gap:10px; }
.opt{ position:relative; display:block; }
.opt input{
  position:absolute; opacity:0;
  width:100%; height:100%; top:0; left:0;
  margin:0; cursor:pointer;
}
.opt span{
  display:block;
  padding:15px 18px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  font-size:0.9375rem;
  color:var(--texte);
  transition:border-color .2s ease, background-color .2s ease;
}
.opt input:hover + span{ border-color:var(--line-fort); background:var(--surface-2); }
.opt input:focus-visible + span{ outline:2px solid var(--lime); outline-offset:2px; }
.opt input:checked + span{
  border-color:var(--lime);
  background:rgba(200,255,61,.07);
}
.quiz__actions{ display:flex; gap:10px; margin-top:26px; }
.quiz__actions .btn--primary{ margin-left:auto; }

.quiz__result-title{ font-size:clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); margin-bottom:24px; }
.pistes{ display:grid; gap:12px; margin-bottom:22px; }
.pistes li{
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:18px 20px;
  background:var(--noir);
}
.pistes h4{
  font-family:var(--titre); font-weight:800;
  letter-spacing:-0.02em;
  font-size:1.0625rem; margin:0 0 6px;
}
.pistes p{ color:var(--muted); font-size:0.9rem; }
.quiz__disclaimer{
  color:var(--muted);
  font-size:0.8125rem;
  border-left:1px solid var(--line);
  padding-left:14px;
  margin-bottom:24px;
}
.quiz__result-actions{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- 11. RÉALISATIONS ---------- */
.empty{
  border:1px dashed var(--line);
  border-radius:var(--radius);
  padding:clamp(40px, 7vw, 72px) 28px;
  text-align:center;
}
.empty__mark{ color:var(--lime); margin-bottom:18px; }
.empty__title{
  font-family:var(--titre); font-weight:800;
  letter-spacing:-0.03em;
  font-size:clamp(1.25rem, 1.1rem + .8vw, 1.6rem);
  margin-bottom:10px;
}
.empty__text{
  color:var(--muted);
  font-size:0.9375rem;
  max-width:46ch;
  margin:0 auto 26px;
}

/* ---------- 12. CONTACT ---------- */
.contact{
  display:grid; gap:clamp(36px, 6vw, 64px);
  grid-template-columns:1fr;
}
@media (min-width: 900px){
  .contact{ grid-template-columns:1fr 1fr; align-items:start; }
}

.coords{ margin:32px 0 24px; display:grid; gap:2px; }
.coords li{ border-top:1px solid var(--line); }
.coords li:last-child{ border-bottom:1px solid var(--line); }
.coords a, .coords span{
  display:flex; justify-content:space-between; gap:16px;
  padding:15px 0;
  font-size:0.9375rem;
}
.coords .label{
  font-family:var(--mono);
  font-size:0.75rem;
  color:var(--muted);
}
.contact__more{ color:var(--muted); font-size:0.9375rem; }
.contact__more a{ color:var(--lime); text-decoration:underline; text-underline-offset:3px; }

.form{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(22px, 4vw, 32px);
  display:grid; gap:18px;
}
.field{ display:grid; gap:7px; }
.field label{ font-size:0.875rem; }
.req{ color:var(--lime); }
.hint{
  font-family:var(--mono);
  font-size:0.6875rem;
  color:var(--muted);
}
.field input, .field textarea{
  width:100%;
  background:var(--noir);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--texte);
  font-family:var(--corps);
  font-size:0.9375rem;
  padding:13px 15px;
  transition:border-color .2s ease;
}
.field input::placeholder, .field textarea::placeholder{ color:#5E5E66; }
.field input:hover, .field textarea:hover{ border-color:var(--line-fort); }
.field textarea{ resize:vertical; min-height:130px; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"]{ border-color:#FF6B6B; }

.field--check{
  grid-template-columns:auto 1fr;
  align-items:start; gap:12px;
}
.field--check input{
  width:18px; height:18px; margin-top:3px;
  accent-color:var(--lime);
  padding:0;
}
.field--check label{ font-size:0.8125rem; color:var(--muted); line-height:1.5; }
.field--check label a{ color:var(--texte); text-decoration:underline; text-underline-offset:2px; }
.field--check .err{ grid-column:1 / -1; }

.err{ font-size:0.8125rem; color:#FF8A8A; }

/* Champ anti-spam, invisible pour les humains */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form__status{ font-size:0.875rem; color:var(--muted); min-height:1.2em; }
.form__status.is-ok{ color:var(--lime); }
.form__status.is-ko{ color:#FF8A8A; }

/* ---------- 13. PIED DE PAGE ---------- */
.site-footer{
  border-top:1px solid var(--line);
  padding-block:48px 40px;
}
.footer__inner{
  display:grid; gap:28px;
}
@media (min-width: 760px){
  .footer__inner{
    grid-template-columns:1fr auto;
    align-items:center;
  }
  .footer__copy{ grid-column:1 / -1; }
}
.footer__tag{ color:var(--muted); font-size:0.875rem; margin-top:8px; }
.footer__nav ul{ display:flex; flex-wrap:wrap; gap:22px; }
.footer__nav a{ font-size:0.875rem; color:var(--muted); }
.footer__nav a:hover{ color:var(--lime); }
.footer__copy{
  color:#5E5E66;
  padding-top:24px;
  border-top:1px solid var(--line);
}

/* ---------- 14. ANIMATIONS ---------- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .btn, .card{ transition:none; }
}


/* ============================================================
   15. FLUIDITÉ ET EFFETS
   ============================================================ */

/* Confort général */
:root{ color-scheme:dark; }
html{ scroll-padding-top:84px; scrollbar-color:var(--line-fort) var(--noir); scrollbar-width:thin; }
::selection{ background:var(--lime); color:var(--noir); }

/* Transition douce entre les pages (navigateurs compatibles, sans JavaScript) */
@view-transition{ navigation:auto; }
::view-transition-old(root), ::view-transition-new(root){ animation-duration:.28s; }

/* Contenu visible par défaut ; masqué seulement si le script est actif */
.reveal{ opacity:1; transform:none; transition:none; }
.js .reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
  transition-delay:calc(var(--i, 0) * 85ms);
}
.js .reveal.is-visible{ opacity:1; transform:none; }

/* Barre de progression de lecture */
.progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:300;
  background:var(--lime); transform:scaleX(0); transform-origin:left;
  pointer-events:none; will-change:transform;
}

/* En-tête : se range en descendant, revient en remontant */
.site-header{ transition:transform .35s cubic-bezier(.2,.8,.2,1), background-color .3s ease, border-color .3s ease; }
.site-header.is-hidden{ transform:translateY(-100%); }
.site-header.is-scrolled{ background:rgba(10,10,11,.9); }

/* Lien actif du menu */
.nav__list a{ position:relative; }
.nav__list a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background:var(--lime); transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.nav__list a.is-active{ color:var(--texte); }
.nav__list a.is-active::after, .nav__list a:hover::after{ transform:scaleX(1); }
@media (max-width: 880px){ .nav__list a::after{ display:none; } .nav__list a.is-active{ color:var(--lime); } }

/* Burger : barres bien centrées */
.burger{ align-content:center; gap:6px; }
.burger span{ margin:0; }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.75px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.75px) rotate(-45deg); }

/* Boutons : reflet au survol, flèche qui avance */
.btn{ position:relative; overflow:hidden; isolation:isolate; }
.btn--primary::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.btn--primary:hover::after{ transform:translateX(120%); }
.btn:active{ transform:translateY(0) scale(.98); }
.btn--primary:disabled{ background:var(--surface-2); color:var(--muted); border-color:var(--line); opacity:1; }
.btn--primary:disabled::after{ display:none; }

/* Cartes : halo qui suit le curseur + montée au survol */
.card:hover{
  background-image:radial-gradient(280px circle at var(--x, 50%) var(--y, 0%), rgba(200,255,61,.075), transparent 70%);
  background-repeat:no-repeat;
}
.card__num{ transition:letter-spacing .35s ease; }
.card:hover .card__num{ letter-spacing:.14em; }

/* Étapes : le filet lime se trace à l'apparition */
.step, .timeline__item{ position:relative; }
.step::before, .timeline__item::before{
  content:""; position:absolute; left:0; top:-1px; height:1px; width:100%;
  background:var(--lime); transform:scaleX(0); transform-origin:left;
  transition:transform 1.1s cubic-bezier(.2,.8,.2,1) .15s;
}
.step.is-visible::before, .timeline__item.is-visible::before,
.step:not(.reveal)::before, .timeline__item:not(.reveal)::before{ transform:scaleX(.18); }
.step:hover::before, .timeline__item:hover::before{ transform:scaleX(1); }

/* Bandeau défilant (texte seulement, décoratif) */
.marquee{
  border-block:1px solid var(--line); overflow:hidden; padding-block:18px;
  background:var(--noir);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track{ display:flex; width:max-content; animation:defile 42s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee span{
  font-family:var(--mono); font-size:.8125rem; color:var(--muted);
  white-space:nowrap; padding-inline:28px; display:inline-flex; align-items:center; gap:56px;
}
.marquee span::after{ content:""; width:5px; height:5px; border-radius:50%; background:var(--lime); opacity:.8; }
@keyframes defile{ to{ transform:translateX(-50%); } }

/* Image de la méthode : léger parallaxe, piloté par le script */
.band img{ transform:translate3d(0, var(--py, 0px), 0) scale(1.08); will-change:transform; }

/* Diagnostic : glissement entre les questions */
.quiz__body.is-in{ animation:question .45s cubic-bezier(.2,.8,.2,1); }
@keyframes question{ from{ opacity:0; transform:translateX(18px); } to{ opacity:1; transform:none; } }
.quiz__body.is-in-back{ animation:question-retour .45s cubic-bezier(.2,.8,.2,1); }
@keyframes question-retour{ from{ opacity:0; transform:translateX(-18px); } to{ opacity:1; transform:none; } }
.quiz__result:not([hidden]){ animation:question .6s cubic-bezier(.2,.8,.2,1); }
.quiz__result:not([hidden]) .pistes li{ animation:entre .6s cubic-bezier(.2,.8,.2,1) both; }
.quiz__result:not([hidden]) .pistes li:nth-child(1){ animation-delay:.1s; }
.quiz__result:not([hidden]) .pistes li:nth-child(2){ animation-delay:.2s; }
.quiz__result:not([hidden]) .pistes li:nth-child(3){ animation-delay:.3s; }
.quiz__result:not([hidden]) .pistes li:nth-child(4){ animation-delay:.4s; }
.opt span{ transition:border-color .2s ease, background-color .2s ease, transform .2s ease; }
.opt input:hover + span{ transform:translateX(3px); }
.opt input:checked + span{ transform:translateX(3px); }
.opt input:checked + span::after{
  content:"✓"; float:right; color:var(--lime); font-family:var(--mono);
  animation:entre .25s ease both;
}

/* Formulaire : halo de focus, message de succès */
.field input, .field textarea{ transition:border-color .2s ease, box-shadow .25s ease; }
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--lime); box-shadow:0 0 0 4px rgba(200,255,61,.1);
}
.form__status.is-ok, .form__status.is-ko{ animation:entre .4s ease both; }

/* Bouton fixe sur mobile : accès rapide au diagnostic */
.sticky-cta{
  position:fixed; left:50%; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:90;
  transform:translate(-50%, 160%); opacity:0; pointer-events:none;
  box-shadow:0 10px 34px rgba(0,0,0,.55), 0 0 0 1px rgba(10,10,11,.6);
  transition:transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
  white-space:nowrap;
}
.sticky-cta.is-on{ transform:translate(-50%, 0); opacity:1; pointer-events:auto; }
@media (min-width: 881px){ .sticky-cta{ display:none; } }

/* Corrections mobile */
@media (max-width: 760px){
  .hero{ min-height:0; }
  .hero .eyebrow{ font-size:.75rem; letter-spacing:0; }
  .hero__actions .btn{ flex:1 1 100%; }
  .section__head{ margin-bottom:34px; }
}
.card__list li::before{ top:50%; }

/* ---------- Mouvement réduit : tout reste lisible, rien ne bouge ---------- */
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
  .progress, .marquee__track, .sticky-cta{ transition:none; animation:none; }
  .marquee__track{ transform:none; flex-wrap:wrap; width:auto; }
  .band img{ transform:none; }
  .quiz__body.is-in, .quiz__body.is-in-back, .quiz__result:not([hidden]),
  .quiz__result:not([hidden]) .pistes li{ animation:none; }
  .site-header.is-hidden{ transform:none; }
  .btn--primary::after{ display:none; }
}

/* ============================================================
   16. IMAGES DES CARTES ET DES SECTIONS
   ============================================================ */
.card__media{
  margin:-26px -24px 24px; aspect-ratio:16 / 10; overflow:hidden;
  border-bottom:1px solid var(--line);
  border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  background:var(--noir);
}
.card__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.02); filter:saturate(.92) brightness(.95);
  transition:transform .9s cubic-bezier(.2,.8,.2,1), filter .5s ease;
}
.card:hover .card__media img{ transform:scale(1.08); filter:saturate(1.08) brightness(1.05); }

/* État vide des réalisations : panoramique discret */
.empty{ position:relative; overflow:hidden; isolation:isolate; }
.empty__bg{ position:absolute; inset:0; z-index:-1; }
.empty__bg img{ width:100%; height:100%; object-fit:cover; opacity:.55; }
.empty__bg::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at center, rgba(10,10,11,.55) 0%, rgba(10,10,11,.88) 75%);
}

/* Appel à l'action : fond panoramique */
.cta{ isolation:isolate; }
.cta::before{ z-index:-1; }
.cta__bg{ position:absolute; inset:0; z-index:-2; }
.cta__bg img{ width:100%; height:100%; object-fit:cover; opacity:.6; }
.cta__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,20,22,.7), rgba(10,10,11,.45) 45%, rgba(10,10,11,.85));
}

/* En-tête de la page « En savoir plus » : plaques en fond, très atténuées */
.page-head{ isolation:isolate; }
.page-head__bg{ position:absolute; inset:0; z-index:-2; }
.page-head__bg img{ width:100%; height:100%; object-fit:cover; opacity:.4; }
.page-head__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, var(--noir) 0%, rgba(10,10,11,.88) 45%, rgba(10,10,11,.4) 100%),
    linear-gradient(180deg, transparent 55%, var(--noir) 100%);
}
.page-head::before{ z-index:-1; }
.page-head--compact .page-head__bg{ display:none; }

@media (prefers-reduced-motion: reduce){
  .card__media img{ transition:none; transform:none; }
  .card:hover .card__media img{ transform:none; }
}

/* Correctifs : image bien calée dans son cadre, bandeau lisible sans animation */
.card__media picture{ display:block; width:100%; height:100%; }
.band picture{ display:block; }
@media (prefers-reduced-motion: reduce){
  .marquee__track{ justify-content:center; width:100%; }
  .marquee span:nth-child(n+5){ display:none; }
  .marquee span{ gap:28px; padding-inline:14px; }
  .marquee{ -webkit-mask-image:none; mask-image:none; }
}

/* Appel à l'action : texte à gauche, le trait de l'horizon reste à droite, sous le texte */
@media (min-width: 761px){
  .cta{ text-align:left; padding-right:clamp(32px, 40%, 520px); }
  .cta__actions{ justify-content:flex-start; }
  .cta__bg img{ object-position:right center; }
  .cta__bg::after{
    background:linear-gradient(90deg, rgba(14,14,16,.97) 0%, rgba(14,14,16,.82) 42%, rgba(10,10,11,.15) 100%);
  }
  .cta::before{ left:30%; }
}
@media (max-width: 760px){
  .cta__bg{ top:auto; height:46%; }
  .cta__bg img{ opacity:.5; }
  .cta__bg::after{ background:linear-gradient(180deg, rgba(20,20,22,1) 0%, rgba(10,10,11,.25) 100%); }
}

/* État vide des réalisations : le visuel s'efface derrière le texte */
.empty__bg img{ opacity:.32; object-position:center 62%; }
.empty__bg::after{
  background:radial-gradient(ellipse at center, rgba(10,10,11,.92) 0%, rgba(10,10,11,.7) 55%, rgba(10,10,11,.35) 100%);
}


/* ============================================================
   17. SIX PÔLES ET PAGE PRESTATIONS
   ============================================================ */
.grid--6{ grid-template-columns:1fr; }
@media (min-width:600px){ .grid--6{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width:960px){ .grid--6{ grid-template-columns:repeat(3, 1fr); } }
.card__more{
  display:inline-flex; align-items:center; gap:8px; margin-top:auto; padding-top:20px;
  font-family:var(--mono); font-size:.8125rem; color:var(--lime);
  text-decoration:none; border-bottom:1px solid transparent; align-self:flex-start;
  transition:gap .25s ease, border-color .25s ease;
}
.card__more:hover, .card__more:focus-visible{ gap:14px; border-color:var(--lime); }
.card{ display:flex; flex-direction:column; }
.note a{ color:var(--lime); text-decoration:underline; text-underline-offset:3px; }

.pole-nav{
  position:sticky; top:68px; z-index:20;
  background:rgba(10,10,11,.86); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-block:1px solid var(--line);
}
.pole-nav .container{ overflow-x:auto; scrollbar-width:none; }
.pole-nav .container::-webkit-scrollbar{ display:none; }
.pole-nav ul{ display:flex; gap:6px; padding-block:10px; width:max-content; min-width:100%; }
.pole-nav a{
  display:inline-flex; gap:8px; align-items:center; white-space:nowrap;
  padding:8px 14px; border:1px solid transparent; border-radius:999px;
  color:var(--muted); font-size:.875rem; text-decoration:none;
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.pole-nav a .mono{ color:var(--lime); font-size:.75rem; }
.pole-nav a:hover{ color:var(--texte); border-color:var(--line); }
.pole-nav a.is-active{ color:var(--texte); border-color:var(--lime); background:rgba(200,255,61,.06); }

.pole{ scroll-margin-top:130px; }
.pole__top{ display:grid; gap:28px; margin-bottom:clamp(28px, 5vw, 48px); align-items:center; }
@media (min-width:900px){ .pole__top{ grid-template-columns:1.1fr .9fr; gap:56px; } }
.pole__accroche{ font-size:clamp(1.1rem, 1rem + .5vw, 1.3rem); color:var(--texte); margin-bottom:14px; max-width:44ch; }
.pole__texte{ color:var(--muted); max-width:56ch; }
.pole__media{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface); aspect-ratio:16/10; }
.pole__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.pole__grid{ display:grid; gap:18px; }
@media (min-width:900px){ .pole__grid{ grid-template-columns:1.2fr 1fr 1fr; } }
.pole__group + .pole__group{ margin-top:18px; }
.pole__label{ font-size:.75rem; color:var(--lime); text-transform:uppercase; letter-spacing:.08em; font-weight:400; margin-bottom:8px; }
.pole__group li{ color:var(--muted); font-size:.9375rem; padding:7px 0 7px 18px; position:relative; border-top:1px solid var(--line); }
.pole__group li::before{ content:""; position:absolute; left:0; top:17px; width:6px; height:1px; background:var(--lime); }
.pole__pour{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:.9375rem; }
.pole__pour .mono{ display:block; font-size:.75rem; color:var(--lime); text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px; }
.card--limit .btn{ margin-top:22px; align-self:flex-start; }
@media (prefers-reduced-motion:reduce){ .pole-nav a, .card__more{ transition:none; } }

.pole-nav{ transition:top .35s cubic-bezier(.2,.8,.2,1); }
body:has(.site-header.is-hidden) .pole-nav{ top:0; }


/* ============================================================
   18. CYBERSÉCURITÉ ET IA EN TÊTE
   ============================================================ */
.grid--lead{ display:grid; gap:18px; grid-template-columns:1fr; margin-bottom:clamp(48px, 7vw, 84px); }
@media (min-width:760px){ .grid--lead{ grid-template-columns:repeat(2, 1fr); gap:22px; } }
.card--lead{ border-color:rgba(200,255,61,.22); }
.card--lead .card__title{ font-size:clamp(1.5rem, 1.2rem + 1vw, 1.9rem); }
.card--lead .card__text{ font-size:1.0625rem; }
.card--lead .card__num{ color:var(--lime); }
.card__list--cols{ display:grid; grid-template-columns:1fr; column-gap:22px; }
@media (min-width:1100px){ .card__list--cols{ grid-template-columns:1fr 1fr; } }
.subhead{ max-width:62ch; margin-bottom:clamp(24px, 4vw, 36px); }
.subhead__title{ font-size:clamp(1.4rem, 1.1rem + 1.2vw, 2rem); margin-bottom:8px; }
.subhead__lead{ color:var(--muted); }


/* ============================================================
   19. IMAGES SUPPLÉMENTAIRES
   ============================================================ */
.band--pano{ position:relative; margin-bottom:clamp(48px, 7vw, 84px); }
.band--pano img{ aspect-ratio:21 / 9; }
@media (max-width:620px){ .band--pano img{ aspect-ratio:4 / 3; object-position:62% 50%; } }
.band__label{
  position:absolute; left:clamp(16px, 3vw, 28px); bottom:clamp(14px, 2.5vw, 24px);
  display:flex; align-items:center; gap:12px; font-size:.75rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--texte);
  text-shadow:0 1px 12px rgba(0,0,0,.7);
}
.band__label i{ display:inline-block; width:44px; height:1px; background:var(--lime); }
.band--short img{ aspect-ratio:21 / 8; object-position:50% 60%; }
@media (max-width:620px){ .band--short img{ aspect-ratio:16 / 9; } }
.contact__visual{
  margin:28px 0 24px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:var(--surface);
}
.contact__visual img{ width:100%; display:block; aspect-ratio:16 / 10; object-fit:cover; }
@media (max-width:899px){ .contact__visual{ display:none; } }
.page-head__bg--pano img{ object-position:70% 50%; opacity:.55; }

/* Titres des pages intérieures : toujours lisibles si les animations sont réduites */
@media (prefers-reduced-motion: reduce){
  .page-head .line > span{ animation:none !important; transform:none !important; opacity:1 !important; }
}


/* ============================================================
   20. LOGO SERVERLAB
   ============================================================ */
.logo{ display:inline-flex; align-items:center; gap:11px; }
.logo__mark{ flex:none; fill:var(--texte); transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.logo__mark .m{ fill:var(--lime); }
.logo:hover .logo__mark{ transform:translateX(2px); }
@media (prefers-reduced-motion:reduce){ .logo__mark{ transition:none; } .logo:hover .logo__mark{ transform:none; } }