/* ============================================================
   POLICES — hébergées ici, aucune requête vers un tiers
   Satoshi (Indian Type Foundry, licence gratuite) en variable :
   un seul fichier de 42 Ko couvre les graisses 300 à 900.
   ============================================================ */
@font-face{
  font-family: "Bricolage Grotesque";
  src: url("../fonts/BricolageGrotesque-Variable.woff2") format("woff2-variations"),
       url("../fonts/BricolageGrotesque-Variable.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Variable.woff2") format("woff2-variations"),
       url("../fonts/Satoshi-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   RESET
   ============================================================ */
html{
  /* la page court bord à bord, le contenu évite les barres système du téléphone */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
img, svg, video, canvas{ max-width: 100%; }
img, video{ height: auto; }
button, input, select, textarea{ font: inherit; color: inherit; }
[hidden]{ display: none !important; }

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  color-scheme: dark;

  --bg:        #0B0916;
  --bg-2:      #100D1E;
  --surface:   #171232;
  --surface-2: #1E1840;
  --line:      #2C2450;
  --line-soft: #201A3C;

  --text:      #F3EFE9;
  --muted:     #A098C0;
  --faint:     #8B83AE;   /* 5,59:1 sur --bg — AA pour le petit texte */

  --accent:      #FFC857;
  --accent-ink:  #FFC857;
  --accent-deep: #C98A00;
  --violet:      #8B78F8;
  --chroma-a:    #FF5A6E;
  --chroma-b:    #4FD8E8;

  --glow: 255,200,87;

  --font-display: "Bricolage Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Satoshi", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* rôle « libellé » : Satoshi en majuscules, graisse fine, très
     espacée. C'est l'interlettrage qui fait le travail, pas la chasse. */
  --font-mono: "Satoshi", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --gutter: clamp(20px, 5vw, 72px);
  --maxw: 1240px;
  --r: 14px;
}

:root[data-theme="light"]{
  color-scheme: light;
  --bg:        #EFECF6;
  --bg-2:      #E6E2F2;
  --surface:   #FFFFFF;
  --surface-2: #F5F2FB;
  --line:      #D3CCE6;
  --line-soft: #E2DCEF;

  --text:      #16112E;
  --muted:     #57507A;
  --faint:     #665E84;   /* 4,72:1 sur le plus sombre des fonds clairs — AA */

  --accent:      #FFC857;
  --accent-ink:  #8A5D00;
  --accent-deep: #FFB020;
  --violet:      #5B3FD6;
  --chroma-a:    #E0243F;
  --chroma-b:    #0090A6;

  --glow: 91,63,214;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 0;
}

p{ margin: 0; }
a{ color: inherit; }

::selection{ background: var(--accent); color: #12102A; }

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

/* ============================================================
   PRIMITIVES
   ============================================================ */
.wrap{
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow{
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--faint);
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before{
  content:"";
  width: 26px; height: 1px;
  background: var(--accent-ink);
  flex: none;
}

section{ position: relative; }

.section-pad{ padding-block: clamp(76px, 11vw, 150px); }

/* Repos visible : on part de 0.55 d'opacité, jamais de 0 */
/* --- MISE AU POINT ---------------------------------------------------
   L'élément arrive flou, ses couches rouge et cyan écartées, puis se
   resserre jusqu'au net — un objectif qui fait son point.
   On part de .55 d'opacité, jamais de 0 : au repos la page reste
   lisible, même si le JavaScript ne se charge pas.                   */
.rise{
  opacity: .55;
  transform: translateY(16px) scale(1.012);
  filter: blur(7px);
  transition:
    opacity .85s cubic-bezier(.16,.84,.26,1),
    transform .85s cubic-bezier(.16,.84,.26,1),
    filter .85s cubic-bezier(.16,.84,.26,1);
}
.rise.in{
  opacity: 1;
  transform: none;
  filter: blur(0);
}
.rise:nth-child(2){ transition-delay: .07s; }
.rise:nth-child(3){ transition-delay: .14s; }
.rise:nth-child(4){ transition-delay: .21s; }

/* Les titres gagnent l'écart chromatique pendant la convergence :
   rouge et cyan se séparent au flou, se recollent au net.            */
.rise h2, .rise h3{
  text-shadow:
    -6px 0 0 color-mix(in srgb, var(--chroma-a) 55%, transparent),
     6px 0 0 color-mix(in srgb, var(--chroma-b) 55%, transparent);
  transition: text-shadow .85s cubic-bezier(.16,.84,.26,1);
}
.rise.in h2, .rise.in h3{
  text-shadow: 0 0 0 transparent, 0 0 0 transparent;
}

@media (prefers-reduced-motion: reduce){
  .rise{ opacity:1 !important; transform:none !important; filter:none !important; transition:none; }
  .rise h2, .rise h3{ text-shadow:none !important; transition:none; }
}

/* ============================================================
   CURSEUR
   ============================================================ */
.cursor{
  position: fixed;
  top:0; left:0;
  width: 26px; height: 26px;
  border: 1px solid var(--accent-ink);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate3d(-100px,-100px,0);
  transition: width .25s, height .25s, background .25s, border-color .25s;
  mix-blend-mode: normal;
}
.cursor.big{
  width: 62px; height: 62px;
  background: rgba(var(--glow), .14);
  border-color: transparent;
}
.cursor-dot{
  position: fixed;
  top:0; left:0;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent-ink);
  pointer-events: none;
  z-index: 9999;
  transform: translate3d(-100px,-100px,0);
}
@media (hover: none), (prefers-reduced-motion: reduce){
  .cursor, .cursor-dot{ display: none; }
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 200;
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom: 1px solid var(--line-soft);
}
.nav-in{
  display: flex;
  align-items: center;
  gap: 18px;
  height: 66px;
}
.brand{
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-right: auto;
  white-space: nowrap;
}
/* Le monogramme : deux lames, en SVG, pour suivre la couleur
   du thème plutôt qu'une image figée.                          */
.brand .mark{
  width: 19px; height: 19px;
  flex: none;
  fill: currentColor;
  overflow: visible;
}
.brand .mark path:first-child{
  fill: var(--accent);
  filter: drop-shadow(0 0 0 rgba(var(--glow), 0));
  transition: filter .4s;
}
.brand:hover .mark path:first-child{
  filter: drop-shadow(0 0 6px rgba(var(--glow), .8));
}
.brand-dot{
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(var(--glow), .6);
  animation: pulse 2.6s infinite;
  flex: none;
}
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(var(--glow), .55); }
  70%{ box-shadow: 0 0 0 9px rgba(var(--glow), 0); }
  100%{ box-shadow: 0 0 0 0 rgba(var(--glow), 0); }
}
@media (prefers-reduced-motion: reduce){ .brand-dot{ animation: none; } }

.nav-links{ display: flex; gap: 26px; }
.nav-links a{
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  position: relative;
  padding-block: 4px;
  transition: color .25s;
}
.nav-links a::after{
  content:"";
  position: absolute;
  left:0; bottom:0;
  height: 1px; width: 0;
  background: var(--accent-ink);
  transition: width .3s cubic-bezier(.2,.7,.2,1);
}
.nav-links a:hover{ color: var(--text); }
.nav-links a:hover::after{ width: 100%; }

/* --- DIAPHRAGME ------------------------------------------------------
   Le menu mobile est une ouverture d'objectif : deux lames se croisent,
   l'anneau s'illumine.                                                */
.burger{
  display: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  position: relative;
  cursor: pointer;
  flex: none;
  transition: border-color .3s, box-shadow .35s, background .3s;
}
.burger::before{
  content:"";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 1px solid transparent;
  transition: border-color .35s, transform .45s cubic-bezier(.2,.7,.2,1);
}
.burger[aria-expanded="true"]{
  border-color: var(--accent);
  box-shadow: 0 0 14px -2px rgba(var(--glow), .75);
}
.burger[aria-expanded="true"]::before{
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  transform: scale(.62);
}
.burger i{
  position: absolute;
  left: 50%; top: 50%;
  width: 15px; height: 1.5px;
  margin-left: -7.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .42s cubic-bezier(.2,.7,.2,1), background .3s;
}
.burger i:first-child{ transform: translateY(-4px); }
.burger i:last-child{  transform: translateY(3px); }
.burger[aria-expanded="true"] i{ background: var(--accent-ink); }
.burger[aria-expanded="true"] i:first-child{ transform: rotate(45deg); }
.burger[aria-expanded="true"] i:last-child{  transform: rotate(-45deg); }

/* Le panneau : chaque lien fait sa propre mise au point, en cascade */
.nav-panel{
  display: none;
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  /* fond plein : un backdrop-filter imbriqué dans celui du header
     ne s'applique pas, le contenu de la page transparaissait.      */
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 24px 40px -28px rgba(0,0,0,.9);
  padding: 10px var(--gutter) 22px;
}
.nav-panel a{
  display: block;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.02em;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(10px);
}
.nav-panel a:last-child{ border-bottom: 0; }
.nav[data-open="true"] .nav-panel{ display: block; }
.nav[data-open="true"] .nav-panel a{
  animation: focus-in .55s cubic-bezier(.16,.84,.26,1) calc(var(--i, 0) * 65ms) both;
}
@keyframes focus-in{
  from{ opacity: 0; filter: blur(8px); transform: translateY(10px); }
  to{   opacity: 1; filter: blur(0);   transform: none; }
}

@media (max-width: 820px){
  .nav-links{ display: none; }
  .burger{ display: block; }
}
@media (prefers-reduced-motion: reduce){
  .nav-panel a{ animation: none !important; opacity: 1; filter: none; transform: none; }
  .burger, .burger::before, .burger i{ transition: none; }
}

.theme-btn{
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
  transition: border-color .25s, background .25s;
}
.theme-btn:hover{ border-color: var(--accent-ink); }
.theme-btn svg{ width: 17px; height: 17px; }
.theme-btn .ico-sun{ display: none; }
:root[data-theme="light"] .theme-btn .ico-sun{ display: block; }
:root[data-theme="light"] .theme-btn .ico-moon{ display: none; }

/* ============================================================
   BOUTONS
   ============================================================ */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  will-change: transform;
  transition: border-color .3s, color .3s;
}
.btn span{ position: relative; z-index: 1; }
.btn::before{
  content:"";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.btn:hover::before{ transform: translateY(0); }
.btn:hover{ color: #12102A; border-color: var(--accent); }

.btn-solid{
  background: var(--accent);
  border-color: var(--accent);
  color: #12102A;
}
.btn-solid::before{ background: var(--text); }
.btn-solid:hover{ color: var(--bg); border-color: var(--text); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position: relative;
  padding-block: clamp(56px, 9vw, 104px) clamp(40px, 6vw, 72px);
  overflow: hidden;
}
#field{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: .9;
}
.hero-in{ position: relative; z-index: 1; }

.hero h1{
  font-size: clamp(44px, 9.2vw, 122px);
  margin-block: 22px 0;
  max-width: 14ch;
}
.hero h1 .ln{ display: block; overflow: hidden; }
.hero h1 .ln > span{
  display: block;
  transform: translateY(0);
  animation: lineUp .9s cubic-bezier(.2,.75,.2,1) backwards;
}
.hero h1 .ln:nth-child(1) > span{ animation-delay: .05s; }
.hero h1 .ln:nth-child(2) > span{ animation-delay: .14s; }
.hero h1 .ln:nth-child(3) > span{ animation-delay: .23s; }
@keyframes lineUp{ from{ transform: translateY(105%); } to{ transform: translateY(0); } }
@media (prefers-reduced-motion: reduce){
  .hero h1 .ln > span{ animation: none; }
}

.chroma{
  position: relative;
  display: inline-block;
  color: var(--accent-ink);
}
.chroma::before,
.chroma::after{
  content: attr(data-t);
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.chroma::before{ color: var(--chroma-a); transform: translate(var(--cx, -2px), 0); mix-blend-mode: screen; }
.chroma::after{  color: var(--chroma-b); transform: translate(calc(-1 * var(--cx, -2px)), 0); mix-blend-mode: screen; }
:root[data-theme="light"] .chroma::before,
:root[data-theme="light"] .chroma::after{ mix-blend-mode: multiply; opacity: .55; }

.hero-lead{
  margin-top: 28px;
  max-width: 54ch;
  font-size: clamp(16px, 1.55vw, 19px);
  color: var(--muted);
}
.hero-lead strong{ color: var(--text); font-weight: 500; }

.hero-cta{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* Bandeau de télémétrie */
.readout{
  margin-top: clamp(44px, 7vw, 76px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: blur(8px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.readout div{
  padding: 16px 20px;
  border-right: 1px solid var(--line-soft);
}
.readout div:last-child{ border-right: 0; }
.readout dt{
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0;
}
.readout dd{
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.readout dd em{ font-style: normal; color: var(--accent-ink); }
@media (max-width: 760px){
  .readout{ grid-template-columns: repeat(2, 1fr); }
  .readout div:nth-child(2){ border-right: 0; }
  .readout div:nth-child(1), .readout div:nth-child(2){ border-bottom: 1px solid var(--line-soft); }
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{
  border-block: 1px solid var(--line-soft);
  background: var(--bg-2);
  padding-block: 18px;
  overflow: hidden;
  white-space: nowrap;
  will-change: transform;
}
.marquee-track{
  display: inline-flex;
  gap: 40px;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  will-change: transform;
}
.marquee-track b{ color: var(--accent-ink); font-weight: 400; }

/* ============================================================
   GRILLES / CARTES
   ============================================================ */
.head{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(36px, 5vw, 60px);
}
.head h2{
  font-size: clamp(30px, 4.6vw, 56px);
  max-width: 18ch;
  margin-top: 16px;
}
.head p{ color: var(--muted); max-width: 42ch; }

.services{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  overflow: hidden;
}
.svc{
  background: var(--bg);
  padding: 30px 26px 34px;
  position: relative;
  transition: background .4s;
}
.svc:hover{ background: var(--surface); }
.svc .num{
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  color: var(--faint);
  letter-spacing: .1em;
}
.svc h3{
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin-block: 14px 12px;
}
.svc p{ color: var(--muted); font-size: 14.5px; }
.svc .bar{
  position: absolute;
  left: 0; top: 0;
  height: 2px; width: 0;
  background: var(--accent);
  transition: width .5s cubic-bezier(.2,.7,.2,1);
}
.svc:hover .bar{ width: 100%; }

/* ============================================================
   LABO
   ============================================================ */
.labo{ background: var(--bg-2); border-block: 1px solid var(--line-soft); }

.lab-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px;
}
.lab{
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.lab-stage{
  height: 190px;
  display: grid;
  place-items: center;
  position: relative;
  background:
    radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--violet) 12%, transparent), transparent 62%),
    var(--surface-2);
  overflow: hidden;
  padding: 16px;
}
.lab-foot{
  padding: 16px 18px 20px;
  border-top: 1px solid var(--line-soft);
}
.lab-foot h3{
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.lab-foot p{ color: var(--muted); font-size: 13.5px; margin-top: 6px; }
.lab-tag{
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-ink);
  display: block;
  margin-bottom: 9px;
}
.lab-canvas{ width: 100%; height: 100%; display: block; }

/* démo : texte cinétique */
.scramble{
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(15px, 2.6vw, 20px);
  letter-spacing: .04em;
  color: var(--text);
  cursor: default;
  text-align: center;
  user-select: none;
}
/* démo : bouton magnétique */
.mag-zone{ display: grid; place-items: center; width: 100%; height: 100%; }
/* démo : aberration */
.ab-demo{ text-align: center; width: 100%; }
.ab-word{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 6vw, 46px);
  letter-spacing: -0.03em;
}
.ab-demo input[type="range"]{
  width: min(210px, 80%);
  margin-top: 18px;
  accent-color: var(--accent);
}
.ab-demo label{
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 10px;
}

/* ============================================================
   RÉFÉRENCE
   ============================================================ */
.case{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
@media (max-width: 880px){ .case{ grid-template-columns: 1fr; } }

.case h3{
  font-size: clamp(26px, 3.6vw, 42px);
  margin-block: 16px 18px;
}
.case p{ color: var(--muted); max-width: 46ch; }
.case ul{
  list-style: none;
  padding: 0;
  margin: 26px 0 30px;
  display: grid;
  gap: 10px;
}
.case li{
  display: flex;
  gap: 12px;
  font-size: 14.5px;
  color: var(--muted);
  align-items: baseline;
}
.case li::before{
  content:"";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  transform: translateY(-2px);
}

.mock{
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 30px 80px -40px rgba(0,0,0,.7);
}
.mock-bar{
  height: 34px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: 6px;
  padding-inline: 13px;
  background: var(--surface-2);
}
.mock-bar i{ width: 8px; height: 8px; border-radius: 50%; background: var(--line); display: block; }
.mock-bar span{
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  color: var(--faint);
  margin-left: 10px;
}
.mock-canvas{ display: block; width: 100%; height: auto; aspect-ratio: 16/11; }

/* ============================================================
   MÉTHODE
   ============================================================ */
/* --- LE FAISCEAU -----------------------------------------------------
   Un rayon descend le long des trois étapes ; chaque nœud fait un
   flare quand il le traverse.                                        */
.steps{
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border-block: 1px solid var(--line-soft);
  position: relative;
}
/* la gaine : le trajet complet, éteint */
.steps::before{
  content:"";
  position: absolute;
  left: max(var(--gutter), calc(50% - var(--maxw)/2 + var(--gutter)));
  top: 0; bottom: 0;
  width: 1px;
  background: var(--line);
  opacity: .55;
}
/* le rayon : se remplit de haut en bas quand la section entre */
.steps::after{
  content:"";
  position: absolute;
  left: max(var(--gutter), calc(50% - var(--maxw)/2 + var(--gutter)));
  top: 0;
  width: 1px;
  height: 0;
  background: linear-gradient(to bottom,
    transparent,
    var(--accent) 12%,
    var(--accent) 88%,
    color-mix(in srgb, var(--accent) 0%, transparent));
  box-shadow: 0 0 10px 1px rgba(var(--glow), .55);
  transition: height 1.5s cubic-bezier(.3,.6,.2,1);
}
.steps.live::after{ height: 100%; }

/* chaque nœud : éteint, puis flare quand le rayon arrive.
   Le point est centré sur le faisceau (bord gauche de la colonne),
   et le libellé est décalé pour lui laisser la place.               */
.step .k{ position: relative; padding-left: 24px; }
.step .k::before{
  content:"";
  position: absolute;
  left: -4.5px;
  top: 11px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line);
  transition: none;
}
.steps.live .step .k::before{
  animation: flare .7s ease-out calc(var(--i, 0) * 480ms + 220ms) forwards;
}
@keyframes flare{
  0%{   background: var(--bg);   border-color: var(--line); box-shadow: none; }
  35%{  background: #FFF6E0;     border-color: var(--accent);
        box-shadow: 0 0 16px 5px rgba(var(--glow), .85); }
  100%{ background: var(--accent); border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(var(--glow), .16); }
}

@media (max-width: 760px){
  .step .k{ padding-left: 20px; }
}
@media (prefers-reduced-motion: reduce){
  .steps::after{ transition: none; height: 100%; }
  .steps .step .k::before{ animation: none; background: var(--accent); border-color: var(--accent); }
}
.step{
  background: var(--bg);
  display: grid;
  grid-template-columns: 90px 1fr 1fr;
  gap: clamp(16px, 3vw, 44px);
  padding-block: 30px;
  align-items: start;
  transition: background .35s;
}
.step:hover{ background: var(--bg-2); }
.step .k{
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  color: var(--accent-ink);
  letter-spacing: .1em;
  padding-top: 5px;
}
.step h3{ font-size: clamp(19px, 2.2vw, 25px); font-weight: 600; letter-spacing: -0.015em; }
.step p{ color: var(--muted); font-size: 14.5px; }
@media (max-width: 760px){
  .step{ grid-template-columns: 54px 1fr; }
  .step p{ grid-column: 2; }
}

/* ============================================================
   CONTACT / FOOTER
   ============================================================ */
.contact{ text-align: center; position: relative; overflow: hidden; }
.contact h2{
  font-size: clamp(36px, 8vw, 96px);
  max-width: 16ch;
  margin-inline: auto;
}
.contact p{ color: var(--muted); max-width: 46ch; margin: 24px auto 0; }
.mail{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
  padding: 12px 12px 12px 22px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--surface);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(12px, 2.6vw, 15px);
}
.mail code{ font-family: inherit; color: var(--text); user-select: all; text-transform: none; letter-spacing: .02em; }
.copy{
  border: 0;
  border-radius: 100px;
  padding: 8px 15px;
  background: var(--accent);
  color: #12102A;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s;
  flex: none;
}
.copy:hover{ background: var(--accent-deep); }

footer{
  border-top: 1px solid var(--line-soft);
  padding-block: clamp(46px, 6vw, 68px) clamp(34px, 4vw, 46px);
  background: var(--bg-2);
}
.foot-in{
  display: grid;
  grid-template-columns: minmax(240px, 1.1fr) 2fr;
  gap: clamp(34px, 5vw, 70px);
  align-items: start;
}

.foot-marque .brand{ margin-right: 0; margin-bottom: 16px; }
.foot-marque p{
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  max-width: 34ch;
}
.foot-legal{
  margin-top: 18px !important;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint) !important;
}

/* Trois groupes : les prestations, le site, les obligations.
   Les pages de contenu ne se mélangent pas aux mentions légales. */
.foot-groupes{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 30px 26px;
}
.foot-groupe{ display: grid; align-content: start; gap: 11px; }
.foot-titre{
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--faint);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
}
.foot-groupe a{
  font-size: 14.5px;
  color: var(--muted);
  text-decoration: none;
  transition: color .25s, transform .25s;
  width: fit-content;
}
.foot-groupe a:hover{ color: var(--accent-ink); transform: translateX(3px); }

@media (max-width: 760px){
  .foot-in{ grid-template-columns: 1fr; }
  .foot-groupes{ grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}

/* barre de progression */
.progress{
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: var(--accent);
  z-index: 300;
}


/* ============================================================
   CLIENTS
   Les logos sont posés sur une plaque claire : ce sont des
   fichiers en couleur, ils ne tiendraient pas sur fond sombre.
   ============================================================ */
.clients-band{
  padding-block: clamp(40px, 6vw, 68px);
  border-bottom: 1px solid var(--line-soft);
}
.clients{
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.clients li{
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 26px;
  height: 74px;
  display: grid;
  place-items: center;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .4s;
}
.clients li:hover{
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 16px 30px -18px rgba(var(--glow), .7);
}
.clients img{
  height: 26px;
  width: auto;
  display: block;
}
.clients a{ display: block; line-height: 0; }

/* ============================================================
   FAQ
   Un <details> natif : accessible au clavier, ouvrable sans
   JavaScript. L'attribut name= referme les autres tout seul.
   ============================================================ */
.faq{ background: var(--bg-2); border-top: 1px solid var(--line-soft); }

.qa-list{
  border-top: 1px solid var(--line);
  max-width: 82ch;
}
.qa{ border-bottom: 1px solid var(--line); }
.qa summary{
  list-style: none;
  cursor: pointer;
  padding: 24px 44px 24px 0;
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(17px, 2.1vw, 21px);
  font-weight: 600;
  letter-spacing: -0.015em;
  transition: color .3s;
}
.qa summary::-webkit-details-marker{ display: none; }
.qa summary:hover{ color: var(--accent-ink); }

/* le diaphragme, en miniature : deux lames qui se croisent */
.qa summary::before,
.qa summary::after{
  content:"";
  position: absolute;
  right: 6px; top: 50%;
  width: 13px; height: 1.5px;
  background: var(--accent-ink);
  border-radius: 2px;
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.qa summary::before{ transform: translateY(-50%); }
.qa summary::after{  transform: translateY(-50%) rotate(90deg); }
.qa[open] summary::before{ transform: translateY(-50%) rotate(180deg); }
.qa[open] summary::after{  transform: translateY(-50%) rotate(180deg); }

.qa-body{
  padding-bottom: 26px;
  display: grid;
  gap: 14px;
  max-width: 62ch;
}
.qa-body p{ color: var(--muted); font-size: 15px; }
/* la réponse fait sa mise au point en s'ouvrant */
.qa[open] .qa-body{
  animation: focus-in .5s cubic-bezier(.16,.84,.26,1) both;
}
@media (prefers-reduced-motion: reduce){
  .qa[open] .qa-body{ animation: none; }
  .qa summary::before, .qa summary::after{ transition: none; }
}

/* ============================================================
   AVIS
   Trois vrais avis Google. L'étoile s'allume en cascade quand
   la carte fait sa mise au point : le même geste que le
   faisceau des étapes, en plus court.
   ============================================================ */
.avis-band{ border-top: 1px solid var(--line-soft); }

.avis-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 18px;
}
.avis{
  margin: 0;
  padding: 26px 24px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color .4s, transform .4s cubic-bezier(.2,.7,.2,1);
}
.avis:hover{ border-color: var(--accent); transform: translateY(-3px); }

.stars{ display: flex; gap: 3px; }
.stars svg{
  width: 15px; height: 15px;
  fill: var(--accent);
  opacity: .25;
}
.avis.in .stars svg{ animation: star-on .4s ease-out calc(var(--s, 0) * 90ms + 180ms) forwards; }
.stars svg:nth-child(1){ --s: 0; }
.stars svg:nth-child(2){ --s: 1; }
.stars svg:nth-child(3){ --s: 2; }
.stars svg:nth-child(4){ --s: 3; }
.stars svg:nth-child(5){ --s: 4; }
@keyframes star-on{
  0%{   opacity: .25; filter: none; }
  45%{  opacity: 1;   filter: drop-shadow(0 0 6px rgba(var(--glow), .9)); }
  100%{ opacity: 1;   filter: none; }
}

.avis blockquote{
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text);
  flex: 1;
}
.avis blockquote::before{ content: "« "; color: var(--accent-ink); }
.avis blockquote::after{  content: " »"; color: var(--accent-ink); }

.avis figcaption{
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--text);
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.avis figcaption span{
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--faint);
}

@media (prefers-reduced-motion: reduce){
  .stars svg{ opacity: 1; }
  .avis.in .stars svg{ animation: none; }
}

/* ============================================================
   OBTURATEUR
   L'iris est un simple disque dont l'ombre portée remplit tout
   le cadre : en agrandissant le disque, on perce le noir.
   ============================================================ */
.shutter{
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  user-select: none;
}
.shutter-light{
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%,
    rgba(var(--glow), .85), rgba(var(--glow), .18) 42%, transparent 70%);
  opacity: .12;
  transition: opacity .7s cubic-bezier(.2,.7,.2,1);
}
.shutter.open .shutter-light{ opacity: 1; }

.shutter-blades{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.shutter-blades::after{
  content: "";
  width: 0; height: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 420px var(--surface-2);
  transition: width .75s cubic-bezier(.3,.8,.25,1), height .75s cubic-bezier(.3,.8,.25,1);
}
.shutter.open .shutter-blades::after{ width: 132px; height: 132px; }

/* les lames : six secteurs, comme un vrai diaphragme */
.shutter-blades::before{
  content: "";
  position: absolute;
  width: 148px; height: 148px;
  border-radius: 50%;
  background: conic-gradient(from 10deg,
    transparent 0 55deg, color-mix(in srgb, var(--accent) 40%, transparent) 55deg 60deg,
    transparent 60deg 115deg, color-mix(in srgb, var(--accent) 40%, transparent) 115deg 120deg,
    transparent 120deg 175deg, color-mix(in srgb, var(--accent) 40%, transparent) 175deg 180deg,
    transparent 180deg 235deg, color-mix(in srgb, var(--accent) 40%, transparent) 235deg 240deg,
    transparent 240deg 295deg, color-mix(in srgb, var(--accent) 40%, transparent) 295deg 300deg,
    transparent 300deg 355deg, color-mix(in srgb, var(--accent) 40%, transparent) 355deg 360deg);
  opacity: 0;
  transform: rotate(-22deg);
  transition: opacity .6s, transform .75s cubic-bezier(.3,.8,.25,1);
}
.shutter.open .shutter-blades::before{ opacity: .85; transform: rotate(0deg); }

.shutter-hint{
  position: relative;
  z-index: 2;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--faint);
  transition: color .4s, opacity .4s;
}
.shutter.open .shutter-hint{ color: #2A1E00; opacity: .8; }
.shutter:focus-visible{ outline: 2px solid var(--accent-ink); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce){
  .shutter-blades::after, .shutter-blades::before, .shutter-light{ transition: none; }
}

/* ============================================================
   LA QUESTION
   « Oui » ne bouge pas. « Non » est en aimantation inversée :
   il fuit le curseur et ne peut jamais être atteint.
   ============================================================ */
/* Ce n'est pas une section de plus : c'est une rupture.
   Le fond descend plus bas que ses voisines, un projecteur tombe
   d'en haut, et tout le reste de la bande s'assombrit sur les
   bords. Le sujet est mis sous la lampe.                        */
.ask-band{
  position: relative;
  background: #060510;
  padding-block: clamp(96px, 15vw, 190px);
  overflow: hidden;
  isolation: isolate;
}
:root[data-theme="light"] .ask-band{ background: #1A1533; }

/* le faisceau */
.ask-band::before{
  content: "";
  position: absolute;
  top: -42%;
  left: 50%;
  width: min(900px, 130%);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle,
    rgba(var(--glow), .30) 0%,
    rgba(var(--glow), .10) 32%,
    transparent 62%);
  z-index: -1;
  animation: respire 7s ease-in-out infinite;
}
/* les bords se referment : on ne voit que ce qui est éclairé */
.ask-band::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, #060510, transparent 16%, transparent 84%, #060510),
    linear-gradient(to bottom, #060510, transparent 22%, transparent 78%, #060510);
  z-index: -1;
  pointer-events: none;
}
:root[data-theme="light"] .ask-band::after{
  background:
    linear-gradient(to right, #1A1533, transparent 16%, transparent 84%, #1A1533),
    linear-gradient(to bottom, #1A1533, transparent 22%, transparent 78%, #1A1533);
}
@keyframes respire{
  0%, 100%{ opacity: .78; transform: translateX(-50%) scale(1); }
  50%{      opacity: 1;   transform: translateX(-50%) scale(1.07); }
}

.ask{ text-align: center; }

/* dans la lumière, le texte est toujours clair — même en thème clair,
   puisque la bande garde son fond sombre.                         */
.ask-band .ask-q{
  font-size: clamp(34px, 7.6vw, 86px);
  color: #F3EFE9;
  max-width: 15ch;
  margin-inline: auto;
}
.ask-band .eyebrow{ justify-content: center; color: rgba(243,239,233,.5); }
.ask-band .eyebrow::before{ background: var(--accent); }
.ask-band .ask-btns{ margin-top: 38px; gap: 16px; }
.ask-band .btn{
  padding: 17px 34px;
  font-size: 13px;
  letter-spacing: .14em;
}
.ask-band .btn:not(.btn-solid){
  border-color: rgba(243,239,233,.28);
  color: #F3EFE9;
}
/* la bande reste sombre dans les deux thèmes : tout ce qu'elle
   contient part donc du texte clair, enveloppes comprises.     */
.ask-band, .ask-band .ask-slot{ color: #F3EFE9; }
.ask-band .ask-note{ color: var(--accent); }

@media (prefers-reduced-motion: reduce){
  .ask-band::before{ animation: none; }
}
.ask-q{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 4.4vw, 44px);
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.ask-btns{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  min-height: 52px;
}
.ask-slot{ display: inline-block; }
.ask-no{ will-change: transform, left, top; }
.ask-no.loose{
  position: fixed;
  margin: 0;
  z-index: 400;
  transition: left .22s cubic-bezier(.2,.9,.3,1), top .22s cubic-bezier(.2,.9,.3,1);
}
.ask-note{
  margin-top: 18px !important;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
@media (prefers-reduced-motion: reduce){
  .ask-no.loose{ transition: none; }
}

/* ============================================================
   ÉCRAN D'ENTRÉE — LE DIAPHRAGME
   Le voile est un calque plein écran dans lequel on perce un
   trou, au moyen d'un masque radial dont seul le rayon s'anime.
   Un seul calque à redessiner : c'est ce qui le garde fluide.
   ============================================================ */
@property --hole{
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

.gate{
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: var(--bg);
  --hole: 0px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent var(--hole), #000 calc(var(--hole) + 1px));
          mask-image: radial-gradient(circle at 50% 50%, transparent var(--hole), #000 calc(var(--hole) + 1px));
  /* l'opacité sert de filet : si le navigateur ne sait pas
     interpoler --hole, le voile s'efface quand même proprement. */
  transition: --hole 1.15s cubic-bezier(.62,.02,.3,1),
              opacity .4s ease .9s;
}

/* les lames, au centre : le diaphragme au repos */
.gate-blades{
  grid-area: 1 / 1;
  position: relative;
  width: 132px; height: 132px;
  transition: transform 1.1s cubic-bezier(.62,.02,.3,1), opacity .55s ease;
}
.gate-ring{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  box-shadow: 0 0 26px -4px rgba(var(--glow), .55),
              inset 0 0 22px -6px rgba(var(--glow), .5);
  transition: box-shadow .4s;
}
/* six lames en triangle, refermées vers le centre */
.gate-blade{
  position: absolute;
  top: 50%; left: 50%;
  width: 50%; height: 50%;
  background: linear-gradient(200deg,
    color-mix(in srgb, var(--accent) 30%, transparent),
    color-mix(in srgb, var(--accent) 8%, transparent));
  border-top: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  transform-origin: 0 0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  transition: transform 1.05s cubic-bezier(.62,.02,.3,1), opacity .7s ease;
}
.gate-blade:nth-child(2){ transform: rotate(0deg); }
.gate-blade:nth-child(3){ transform: rotate(60deg); }
.gate-blade:nth-child(4){ transform: rotate(120deg); }
.gate-blade:nth-child(5){ transform: rotate(180deg); }
.gate-blade:nth-child(6){ transform: rotate(240deg); }
.gate-blade:nth-child(7){ transform: rotate(300deg); }

/* au survol, l'ouverture se fend : elle annonce qu'elle s'actionne */
.gate:hover, .gate:focus-visible{ --hole: 15px; }
.gate:hover .gate-ring,
.gate:focus-visible .gate-ring{
  box-shadow: 0 0 40px -2px rgba(var(--glow), .85),
              inset 0 0 26px -4px rgba(var(--glow), .7);
}
.gate:hover .gate-blades{ transform: rotate(-11deg); }

/* le libellé, sous le diaphragme, parfaitement lisible */
.gate-label{
  grid-area: 1 / 1;
  transform: translateY(152px);
  display: grid;
  justify-items: center;
  gap: 11px;
  text-align: center;
  transition: opacity .45s ease, transform .6s ease;
}
.gate-mark{ width: 26px; height: 26px; overflow: visible; }
.gate-mark path:first-child{ fill: var(--accent); }
.gate-mark path:last-child{  fill: var(--violet); }
.gate-name{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(19px, 3.4vw, 26px);
  letter-spacing: -0.03em;
  color: var(--text);
}
.gate-hint{
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

/* --- l'ouverture --- */
.gate.open{
  --hole: 145vmax;
  opacity: 0;
  pointer-events: none;
}
.gate.open .gate-blades{ transform: rotate(78deg) scale(2.8); opacity: 0; }
.gate.open .gate-blade{ opacity: 0; }
.gate.open .gate-label{ opacity: 0; transform: translateY(176px); }

/* pendant le voile : pas de défilement, et le titre attend son tour */
body.gated{ overflow: hidden; }
body.gated .hero h1 .ln > span{ animation-play-state: paused; }

@media (max-width: 480px){
  .gate-blades{ width: 108px; height: 108px; }
  .gate-label{ transform: translateY(112px); }
  .gate.open .gate-label{ transform: translateY(134px); }
}

@media (prefers-reduced-motion: reduce){
  .gate, .gate-blades, .gate-blade, .gate-label{ transition: none; }
}

/* ============================================================
   GRILLE TARIFAIRE (dans la FAQ)
   Trois lignes plutôt qu'un « à partir de » : le client se situe
   lui-même, et ceux qui sont hors budget ne perdent pas d'appel.
   ============================================================ */
.tarifs{
  margin: 0;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.tarifs > div{
  background: var(--bg-2);
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 18px;
  align-items: baseline;
  transition: background .35s;
}
.tarifs > div:hover{ background: var(--surface); }
.tarifs dt{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.015em;
  color: var(--text);
}
.tarifs dd{ margin: 0; }
.tarifs .tarif{
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .04em;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.tarifs .detail{
  grid-column: 1 / -1;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}
@media (max-width: 420px){
  .tarifs > div{ grid-template-columns: 1fr; }
  .tarifs .tarif{ text-align: left; }
}

/* la maintenance n'est pas un prix de projet : elle se détache */
.tarifs .recurrent{
  background: var(--surface-2);
  border-top: 1px solid var(--accent-ink);
}
.tarifs .recurrent:hover{ background: var(--surface); }
.tarifs .recurrent dt span{
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
  margin-left: 8px;
}
.tarifs .recurrent .tarif em{
  font-style: normal;
  color: var(--faint);
  font-size: 12px;
}

/* --- la place libre ---
   Une plaque vide au bout de la rangée : elle dit qu'il en reste
   une, et elle mène au contact. Elle est ajourée, pour qu'on la
   lise comme une place à prendre et non comme une référence.   */
.clients .client-vide{
  background: transparent;
  border: 1px dashed var(--line);
  padding: 0;
}
.clients .client-vide:hover{
  border-style: solid;
  border-color: var(--accent);
  box-shadow: none;
}
.clients .client-vide a{
  display: flex;
  align-items: center;
  gap: 11px;
  height: 100%;
  padding: 0 26px;
  line-height: 1;
  text-decoration: none;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
  transition: color .3s;
}
.clients .client-vide:hover a{ color: var(--accent-ink); }
.client-vide-mark{
  width: 15px; height: 15px;
  flex: none;
  position: relative;
}
.client-vide-mark::before,
.client-vide-mark::after{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: currentColor;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.client-vide-mark::before{ width: 15px; height: 1.5px; }
.client-vide-mark::after{ width: 1.5px; height: 15px; }
.clients .client-vide:hover .client-vide-mark::before{ transform: translate(-50%,-50%) rotate(90deg); }
.clients .client-vide:hover .client-vide-mark::after{ transform: translate(-50%,-50%) rotate(90deg); }

/* le logo Toner est un SVG large et court : il lui faut sa propre hauteur */
.clients img[src$=".svg"]{ height: 19px; }

/* Lien d'évitement : invisible jusqu'à ce qu'on l'atteigne au clavier,
   il épargne à qui navigue sans souris de traverser toute la barre. */
.skip{
  position: fixed;
  top: 0; left: 0;
  z-index: 1100;
  padding: 12px 20px;
  background: var(--accent);
  color: #12102A;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0 0 8px 0;
  transform: translateY(-110%);
  transition: transform .2s ease;
}
.skip:focus{ transform: translateY(0); }

/* ============================================================
   PAGES INTÉRIEURES
   Colonne unique, mesure courte : ces textes se lisent
   rarement, mais quand on les lit c'est qu'on cherche une
   information précise. Priorité au repérage.
   ============================================================ */
.page{
  padding-block: clamp(48px, 8vw, 96px) clamp(64px, 10vw, 120px);
}
.page .wrap{ max-width: 76ch; }

.fil{
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
  display: flex;
  gap: 9px;
  margin-bottom: 22px;
}
.fil a{ text-decoration: none; transition: color .25s; }
.fil a:hover{ color: var(--accent-ink); }

.page h1{
  font-size: clamp(32px, 6vw, 58px);
  margin-bottom: 8px;
}
.page h2{
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: clamp(38px, 5vw, 56px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.page p{
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.65;
  margin-top: 14px;
}
.page p strong{ color: var(--text); font-weight: 500; }
/* Les liens dans le corps du texte sont ambre et soulignés…       */
.page p a,
.page li a,
.page dd a{ color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }

/* …mais surtout pas les boutons : cette règle était plus spécifique
   que .btn et repeignait le texte du bouton plein en ambre, sur un
   fond ambre. Le libellé devenait invisible.                        */
.page a.btn{ color: var(--text); text-decoration: none; }
.page a.btn:hover{ color: #12102A; }
.page a.btn-solid{ color: #12102A; }
.page a.btn-solid:hover{ color: var(--bg); }

.legal-chapeau{
  font-size: 17px !important;
  color: var(--text) !important;
  margin-top: 22px !important;
  padding: 20px 22px;
  border-left: 2px solid var(--accent);
  background: var(--bg-2);
  border-radius: 0 8px 8px 0;
}

.legal-puces{
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.legal-puces li{
  display: flex;
  gap: 12px;
  align-items: baseline;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}
.legal-puces li::before{
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  transform: translateY(-2px);
}

.legal-liste{
  margin: 18px 0 0;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.legal-liste > div{
  background: var(--bg-2);
  padding: 13px 18px;
  display: grid;
  grid-template-columns: minmax(150px, 34%) 1fr;
  gap: 4px 20px;
  align-items: baseline;
}
.legal-liste dt{
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}
.legal-liste dd{ margin: 0; font-size: 15px; color: var(--text); }
@media (max-width: 560px){
  .legal-liste > div{ grid-template-columns: 1fr; }
}

.legal-maj{
  margin-top: clamp(44px, 6vw, 68px) !important;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint) !important;
}


/* ============================================================
   PAGE 404
   Le diaphragme, mais fermé pour de bon : il n'y a rien
   à révéler derrière.
   ============================================================ */
.err{
  min-height: 74vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: clamp(56px, 10vw, 110px);
}
.err .wrap{ max-width: 62ch; }

.err-iris{
  position: relative;
  width: 116px; height: 116px;
  margin: 0 auto clamp(30px, 5vw, 46px);
  opacity: .8;
}
.err-ring{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  box-shadow: inset 0 0 26px -8px rgba(var(--glow), .35);
}
.err-blade{
  position: absolute;
  top: 50%; left: 50%;
  width: 50%; height: 50%;
  background: linear-gradient(200deg,
    color-mix(in srgb, var(--faint) 26%, transparent),
    color-mix(in srgb, var(--faint) 7%, transparent));
  border-top: 1px solid color-mix(in srgb, var(--faint) 40%, transparent);
  transform-origin: 0 0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.err-blade:nth-child(2){ transform: rotate(0deg); }
.err-blade:nth-child(3){ transform: rotate(60deg); }
.err-blade:nth-child(4){ transform: rotate(120deg); }
.err-blade:nth-child(5){ transform: rotate(180deg); }
.err-blade:nth-child(6){ transform: rotate(240deg); }
.err-blade:nth-child(7){ transform: rotate(300deg); }

.err .eyebrow{ justify-content: center; }
.err h1{
  font-size: clamp(30px, 6.4vw, 60px);
  margin-top: 16px;
}
.err-texte{
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
  margin: 22px auto 0;
  max-width: 46ch;
}
.err-liens{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 34px;
}

/* ============================================================
   EN-TÊTE DES PAGES SECONDAIRES
   Le même champ magnétique que l'accueil, derrière le titre :
   ces pages ne sont pas des annexes, ce sont des pages du site.
   ============================================================ */
.page-hero{
  position: relative;
  overflow: hidden;
  padding-block: clamp(44px, 7vw, 82px) clamp(30px, 4vw, 48px);
  border-bottom: 1px solid var(--line-soft);
}
.page-hero #field{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  opacity: .75;
}
.page-hero-in{ position: relative; z-index: 1; }
.page-hero .fil{ margin-bottom: 20px; }
.page-hero .eyebrow{ margin-bottom: 14px; }
.page-hero h1{ font-size: clamp(32px, 6.4vw, 62px); }

.page-corps{
  max-width: 76ch;
  padding-block: clamp(34px, 5vw, 56px) clamp(64px, 9vw, 110px);
}
.page .page-corps section:first-of-type h2{ border-top: 0; padding-top: 0; margin-top: 0; }

/* la 404 reçoit le champ en pleine page */
.err{ position: relative; overflow: hidden; }
.err #field{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  opacity: .7;
}
.err-in{ position: relative; z-index: 1; }

/* --- blocs propres aux pages de service --- */
.etapes{
  counter-reset: etape;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.etapes li{
  counter-increment: etape;
  position: relative;
  padding-left: 44px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}
.etapes li::before{
  content: counter(etape, decimal-leading-zero);
  position: absolute;
  left: 0; top: 1px;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--accent-ink);
}
.etapes li strong{ color: var(--text); font-weight: 500; }

.page code{
  font-family: var(--font-mono);
  font-size: .92em;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--text);
}

.cta{
  margin-top: clamp(48px, 7vw, 76px);
  padding: clamp(28px, 4vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(var(--glow), .10), transparent 62%),
    var(--bg-2);
}
.cta h2{ border-top: 0 !important; padding-top: 0 !important; margin-top: 0 !important; }
.cta-liens{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* lien contextuel en pied de carte de prestation */
.svc-lien{
  display: inline-block;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.svc-lien:hover{ border-bottom-color: var(--accent-ink); }

/* ============================================================
   BANDEAU DE CONSENTEMENT
   Les deux boutons ont exactement le même poids visuel et la même
   taille de cible : la CNIL impose que refuser soit aussi simple
   qu'accepter. Un « Refuser » discret serait un consentement
   arraché, donc invalide.
   ============================================================ */
.consent{
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 900;
  padding: 18px var(--gutter) calc(18px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -20px 40px -30px rgba(0,0,0,.8);
  transform: translateY(105%);
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.consent.visible{ transform: translateY(0); }

.consent-in{
  max-width: var(--maxw);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
}
.consent-texte{
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 68ch;
}
.consent-texte strong{ color: var(--text); font-weight: 500; }
.consent-texte a{
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.consent-boutons{
  display: flex;
  gap: 10px;
  flex: none;
}
.consent-boutons .btn{
  padding: 13px 26px;
  font-size: 12px;
  min-width: 128px;
  justify-content: center;
}

@media (max-width: 620px){
  .consent-in{ flex-direction: column; align-items: stretch; }
  .consent-boutons{ display: grid; grid-template-columns: 1fr 1fr; }
  .consent-boutons .btn{ min-width: 0; }
}
@media (prefers-reduced-motion: reduce){
  .consent{ transition: none; }
}

/* le bouton de révocation, dans la politique de confidentialité */
.consent-revoquer{ margin-top: 22px !important; }