/* =========================================================================
   2.13 — MONO 2027 / HAIRLINE
   Couche de direction artistique : encre & papier, filets de 1 px, grille
   éditoriale. Inspirée des interfaces techniques (artcraft, HUD, presse).
   Chargée APRÈS craft-2027.css, ref-ia-test.css et les styles de page :
   elle ne touche qu'à la forme, jamais au comportement.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. SOCLE
   ------------------------------------------------------------------------- */
:root{
  --paper:#f2f1ee;
  --paper-2:#e9e8e4;
  --card:#faf9f7;
  --card-2:#f4f3ef;
  --ink:#101014;
  --ink-2:#3c3c42;
  --muted:#66666d;
  --brand:#101014;
  --brand-ink:#000;
  --brand-soft:#e7e6e1;
  --line:#10101429;
  --line-soft:#10101414;
  --line-strong:#10101466;
  --dark:#101014;
  --dark-2:#18181c;
  --dline:#2e2e34;
  --radius:0;
  --radius-lg:0;
  /* Hauteurs de la barre de navigation et de la bande défilante qui la suit.
     Une seule source de vérité : les marges hautes des pages s'en déduisent. */
  --nav-h:56px;
  --tick-h:56px;
  --rail-top:calc(var(--nav-h) + var(--tick-h) + 24px);
  /* Flèche longue des liens d'action : trait de 1 px et pointe fine, dessinés
     en SVG puis découpés en masque pour suivre `currentColor`. */
  --arrow-long:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 10'%3E%3Cpath d='M0 5h32' stroke='%23000' stroke-width='1'/%3E%3Cpath d='M27.6 1.4 32.4 5l-4.8 3.6' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
  --shadow:none;
  --shadow-lg:none;
  --shadow-brand:none;
  --grain:none;
  --accent:#101014;
}

body{
  background:var(--paper);
  color:var(--ink);
  font-size:15px;
  letter-spacing:-.004em;
}
/* Le grain chaud laisse place à une trame technique quasi invisible. */
body::before{
  display:none!important;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right,var(--line-soft) 1px,transparent 1px),
    linear-gradient(to bottom,var(--line-soft) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,transparent 42%);
  mask-image:linear-gradient(to bottom,#000 0,transparent 42%);
  opacity:.55;
}
.layout,.subpage,.footer,.tl-main{position:relative;z-index:1}
::selection{background:var(--ink);color:var(--paper)}

html{scrollbar-color:var(--ink) var(--paper-2)}
html{scroll-padding-top:calc(var(--nav-h) + var(--tick-h) + 16px)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--paper-2)}
::-webkit-scrollbar-thumb{background:var(--ink);border:2px solid var(--paper-2);border-radius:0}
::-webkit-scrollbar-thumb:hover{background:#000}

a{text-underline-offset:4px}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.035em}

/* -------------------------------------------------------------------------
   2. EN-TÊTE — barre segmentée, filets verticaux
   ------------------------------------------------------------------------- */
.topbar{
  height:56px;
  padding:0;
  gap:0;
  background:rgba(242,241,238,.92);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px);
}
.brand{
  height:100%;
  gap:10px;
  padding:0 18px;
  border-right:1px solid var(--line);
}
.brand img{width:26px;height:26px}
.brand b{font-size:21px;font-weight:600;letter-spacing:-.06em;line-height:1}
.brand b span{color:var(--ink)}
/* -------------------------------------------------------------------------
   2ter. MARQUE — le point noir seul, le mot « 2.13 » à la demande
   Le point est découpé en masque : il prend donc la couleur du texte et
   s'inverse automatiquement sur la timeline sombre.
   ------------------------------------------------------------------------- */
.brand{
  display:inline-flex;
  align-items:center;
  gap:0;
  text-decoration:none;
}
.brand-mark{
  display:block;
  flex:none;
  width:23px;
  height:23px;
  background:currentColor;
  -webkit-mask:url("../images/point-noir.svg") center/contain no-repeat;
  mask:url("../images/point-noir.svg") center/contain no-repeat;
  transition:transform .45s cubic-bezier(.4,0,.2,1);
}
.brand .brand-word{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  font-size:26px;
  font-weight:600;
  letter-spacing:-.055em;
  line-height:1;
  opacity:1;
  transition:max-width .42s cubic-bezier(.4,0,.2,1),opacity .28s ease,margin-left .42s cubic-bezier(.4,0,.2,1);
}
/* En-tête : le mot est replié au repos. Il sort du flux, donc la case du
   logotype garde une largeur fixe et le point reste centré au pixel — que le
   mot soit caché, déployé par le survol ou rappelé par le minuteur. */
.topbar .brand{
  position:relative;
  justify-content:center;
  gap:0;
  /* Le filet passe en ombre intérieure : une bordure de 1 px décalerait le
     centrage du point d'un demi-pixel. */
  border-right:0;
  box-shadow:inset -1px 0 0 var(--line);
}
.topbar .brand .brand-word{
  position:absolute;
  left:100%;
  top:50%;
  z-index:2;
  max-width:0;
  opacity:0;
  margin-left:11px;
  transform:translateY(-50%);
}
.topbar .brand:hover .brand-word,
.topbar .brand:focus-visible .brand-word,
.topbar .brand.is-named .brand-word{
  max-width:3ch;
  opacity:1;
}
.topbar .brand:hover .brand-mark,
.topbar .brand:focus-visible .brand-mark,
.topbar .brand.is-named .brand-mark{transform:scale(1.12)}
.topbar .brand:focus-visible{outline:none}
.topbar .brand:focus-visible .brand-mark{box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--ink)}
@media(prefers-reduced-motion:reduce){
  .brand-mark,.topbar .brand-word{transition:none}
  .topbar .brand:hover .brand-mark,
  .topbar .brand:focus-visible .brand-mark,
  .topbar .brand.is-named .brand-mark{transform:none}
}
/* Pied de page : le mot reste affiché, le point sert de puce de marque. */
.foot-brand .brand{gap:11px;padding:0;border:0;height:auto}
.foot-brand .brand .brand-word{max-width:none;opacity:1;margin-left:0;font-size:22px}
.foot-brand .brand-mark{width:19px;height:19px}
.brand-tag{
  font:500 7.5px/1 var(--mono);
  letter-spacing:.16em;
  color:var(--muted);
  border:1px solid var(--line);
  padding:4px 6px;
  background:transparent;
}
.brand-tag b{font:500 7.5px/1 var(--mono);color:var(--ink)}
.topbar-status{
  margin-left:18px;
  font:500 10.5px var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.topbar-status em{font:inherit;color:var(--muted)}
.topbar-right{
  height:100%;
  margin-left:auto;
  align-items:stretch;
  gap:0;
}
.quicknav{
  height:100%;
  align-items:stretch;
  gap:0;
  font:inherit;
}
.quicknav a{
  display:flex;
  align-items:center;
  padding:0 14px;
  border-left:1px solid var(--line);
  font:500 9.5px/1 var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  text-decoration:none;
  transition:background .15s ease,color .15s ease;
}
.quicknav a:hover{
  background:var(--ink);
  color:var(--paper);
  text-decoration:none;
}
/* « Démarrer » se comporte comme les autres liens de la barre : pas de pavé
   noir par défaut, juste le mot suivi d'une flèche fine. La couleur suit
   `inherit` pour rester lisible sur la timeline sombre.
   Les `!important` neutralisent les règles génériques de `.btn-primary`. */
.topbar-right .btn-primary{
  height:100%;
  margin:0;
  padding:0 16px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  border:0!important;
  border-left:1px solid var(--line)!important;
  background:transparent!important;
  color:inherit!important;
  font:500 9.5px/1 var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  box-shadow:none!important;
  transform:none!important;
  transition:background .15s ease,color .15s ease;
}
.topbar-right .btn-primary::after{
  content:"";
  display:block;
  flex:none;
  width:34px;
  height:10px;
  background:currentColor;
  -webkit-mask:var(--arrow-long) 0 50%/100% 100% no-repeat;
  mask:var(--arrow-long) 0 50%/100% 100% no-repeat;
  transform:translateX(0);
  transition:transform .24s cubic-bezier(.4,0,.2,1);
}
/* Repli pour les moteurs sans masque CSS : la flèche typographique reste lisible. */
@supports not ((mask-image:none) or (-webkit-mask-image:none)){
  .topbar-right .btn-primary::after{
    content:"\2192";
    width:auto;
    height:auto;
    background:none;
    font:400 13px/1 var(--mono);
  }
}
.topbar-right .btn-primary:hover,
.topbar-right .btn-primary:focus-visible{
  background:var(--ink)!important;
  color:var(--paper)!important;
  border:0!important;
  border-left:1px solid var(--ink)!important;
  box-shadow:none!important;
  transform:none!important;
}
.topbar-right .btn-primary:hover::after,
.topbar-right .btn-primary:focus-visible::after{transform:translateX(3px)}
.topbar-right .btn-primary:focus-visible{outline:none}
.menu{
  width:56px;
  height:100%;
  border:0;
  border-left:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  font-size:16px;
}
.menu:hover{background:var(--ink);color:var(--paper)}

/* -------------------------------------------------------------------------
   2bis. BANDE DÉFILANTE (sous la navigation, pleine largeur)
   Élément signature : gros mots en capitales, relance en serif italique,
   séparateurs en filet vertical. Fixée sous la barre pour rester visible.
   ------------------------------------------------------------------------- */
.mega-ticker{
  position:fixed;
  top:var(--nav-h);
  left:0;
  right:0;
  z-index:59;
  display:flex;
  align-items:center;
  height:var(--tick-h);
  overflow:hidden;
  background:var(--ink);
  color:var(--paper);
  border-bottom:1px solid var(--ink);
}
.mega-ticker-track{
  display:flex;
  width:max-content;
  animation:mega-tick 52s linear infinite;
}
.mega-ticker-track span{
  display:inline-flex;
  align-items:baseline;
  padding-right:0;
  white-space:nowrap;
}
.mega-ticker b{
  font:600 clamp(19px,2.1vw,31px)/1 var(--display);
  letter-spacing:-.045em;
  text-transform:uppercase;
}
.mega-ticker em{
  margin-left:.34em;
  font:italic 400 clamp(18px,1.95vw,29px)/1 Georgia,'Times New Roman',serif;
  letter-spacing:-.02em;
  color:#a7a7ad;
}
.mega-ticker i{
  flex:none;
  display:inline-block;
  width:1px;
  height:.58em;
  margin:0 clamp(20px,2.2vw,38px);
  background:currentColor;
  opacity:.32;
  align-self:center;
}
.mega-ticker:hover .mega-ticker-track{animation-play-state:paused}
/* Toute la bande ouvre une fenêtre : le curseur doit l'annoncer partout,
   y compris sur la relance en italique et les filets de séparation. */
.mega-ticker b[data-fx],
.mega-ticker b[data-fx] + em,
.mega-ticker i{cursor:pointer}
.tick-fx{cursor:default}
@keyframes mega-tick{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .mega-ticker-track{animation:none}
}

/* -------------------------------------------------------------------------
   3. GRILLE / RAIL
   ------------------------------------------------------------------------- */
.layout{
  grid-template-columns:220px minmax(0,1fr);
  gap:20px;
  width:min(calc(100% - 48px),1560px);
  padding:var(--rail-top) 0 32px;
}
.content{gap:20px}
.sidebar{
  top:var(--rail-top);
  height:calc(100vh - var(--rail-top) - 24px);
  gap:0;
  padding:0;
  border:1px solid var(--line);
  background:transparent;
}
.rail-label{
  padding:14px 14px 10px;
  font:500 9px var(--mono);
  letter-spacing:.22em;
  color:var(--muted);
  border-bottom:1px solid var(--line);
}
.rail-nav{gap:0}
.rail-nav a{
  padding:11px 14px;
  border:0;
  border-bottom:1px solid var(--line-soft);
  font:500 12px var(--font);
  color:var(--ink-2);
  transition:background .15s ease,color .15s ease;
}
.rail-nav svg{width:15px;height:15px;stroke-width:1.2;opacity:.5}
.rail-nav a:hover{
  background:var(--card);
  color:var(--ink);
  border-color:var(--line-soft);
}
.rail-nav a.active{
  background:var(--ink);
  color:var(--paper);
  font-weight:500;
}
.rail-nav a.active svg{stroke:var(--paper)}
.rail-contact{
  margin:0;
  padding:14px;
  border:0;
  border-top:1px solid var(--line);
  background:transparent;
  font:500 10px var(--mono);
  letter-spacing:.06em;
  color:var(--muted);
}
.rail-contact:hover{color:var(--ink);border-color:var(--line)}

/* -------------------------------------------------------------------------
   4. PANNEAUX & TYPOGRAPHIE ÉDITORIALE
   ------------------------------------------------------------------------- */
.panel{
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:none;
}
.eyebrow{
  gap:8px;
  padding:6px 10px;
  border:1px solid var(--line-strong);
  background:transparent;
  font:500 9px var(--mono);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}
.eyebrow .dot{width:5px;height:5px;background:var(--ink)}
.tag,
.tag.light,
.page-hero .tag{
  padding:5px 9px;
  border:1px solid var(--line-strong);
  background:transparent;
  color:var(--muted);
  font:500 9px var(--mono);
  letter-spacing:.18em;
}
.section-head{padding:0 2px;margin-bottom:18px}
.section-head.plain{padding:32px 38px 0}
.section-head h2,
.section-head h2 .hl,
.ai-copy h2 .hl,
.monitor h2 .hl,
.traffic h2 .hl,
h2 .hl,
.prose-lead .hl{color:var(--ink)}
.section-head h2{font-size:clamp(24px,2.3vw,32px);font-weight:600;letter-spacing:-.045em}
.section-head p{max-width:38ch;color:var(--muted);font-size:13px;line-height:1.6}

/* -------------------------------------------------------------------------
   5. HÉROS
   ------------------------------------------------------------------------- */
.hero{
  grid-template-columns:1.12fr .88fr;
  background:var(--card);
  border:1px solid var(--line);
  overflow:hidden;
}
.hero-copy{padding:54px 48px 50px}
.hero h1{
  margin:26px 0 22px;
  font-size:clamp(38px,4.6vw,66px);
  font-weight:600;
  letter-spacing:-.055em;
  line-height:.99;
}
.hero h1 .hl{
  color:var(--ink);
  font-family:Georgia,'Times New Roman',serif;
  font-style:italic;
  font-weight:400;
  letter-spacing:-.035em;
  text-decoration:none;
}
.hero-copy>p{
  max-width:48ch;
  font-size:15.5px;
  line-height:1.65;
  color:var(--ink-2);
}
.hero-actions{gap:10px;margin-top:30px}
.hero-kpis{
  gap:0;
  background:transparent;
  border-left:1px solid var(--line);
}
.kpi{
  padding:28px 24px;
  border-top:1px solid var(--line);
  border-right:1px solid var(--line);
  background:var(--card);
}
.kpi:nth-child(-n+2){border-top:0}
.kpi:nth-child(2n){border-right:0}
.kpi::after{display:none}
.kpi-label{
  font:500 9px var(--mono);
  letter-spacing:.18em;
  color:var(--muted);
}
.kpi b{
  font-size:clamp(30px,2.8vw,44px);
  font-weight:600;
  letter-spacing:-.05em;
}
/* Valeur textuelle (mot) : même rang visuel, mais calibrée pour tenir dans la case. */
.kpi b.is-text{font-size:clamp(17px,1.55vw,23px);letter-spacing:-.02em;line-height:1.15}
.kpi-trend{
  font:500 10px var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.kpi-trend.up{color:var(--ink)}
.kpi-trend .dot{width:5px;height:5px;background:var(--ink)}

/* -------------------------------------------------------------------------
   6. BANDE DÉFILANTE
   ------------------------------------------------------------------------- */
.ticker{
  background:transparent;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
/* La petite bande de l'accueil (sous le héros) part vers la droite, à contresens
   de la grande bande : deux vitesses, deux directions, aucune impression de
   duplication. Le track contient deux copies du texte, d'où le -50 %. */
.ticker-track{animation:ticker-reverse 34s linear infinite}
@keyframes ticker-reverse{
  from{transform:translateX(-50%)}
  to{transform:translateX(0)}
}
.ticker:hover .ticker-track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  .ticker-track{animation:none}
}
.ticker-track span{
  padding:10px 0;
  padding-right:22px;
  font:500 9.5px var(--mono);
  letter-spacing:.24em;
}
.ticker-track b{color:var(--muted);font-weight:500}

/* -------------------------------------------------------------------------
   7. BOUTONS, PUCES, FORMULAIRES
   ------------------------------------------------------------------------- */
.btn-primary,
.more,
.wp-link,
.ref-more-toggle,
.game-actions a,
.btn-call,
.cf-next,
.cf-back,
.brief-send,
.sw-update-btn{
  padding:12px 18px;
  border:1px solid var(--ink)!important;
  background:var(--ink);
  color:var(--paper);
  box-shadow:none!important;
  font:500 10px/1.1 var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  transform:none;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.btn-primary:hover,
.more:hover,
.wp-link:hover,
.ref-more-toggle:hover,
.game-actions a:hover,
.btn-call:hover,
.cf-next:hover:not(:disabled),
.cf-back:hover,
.brief-send:hover:not(:disabled),
.sw-update-btn:hover{
  background:transparent!important;
  color:var(--ink)!important;
  border-color:var(--ink)!important;
  box-shadow:none!important;
  transform:none!important;
}
.btn-primary.big{padding:16px 24px;font-size:10.5px}
.btn-ghost{
  padding:12px 18px;
  border:1px solid var(--line-strong);
  background:transparent;
  color:var(--ink);
  box-shadow:none;
  font:500 10px/1.1 var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.btn-ghost:hover{
  background:var(--ink)!important;
  color:var(--paper)!important;
  border-color:var(--ink)!important;
  box-shadow:none!important;
  transform:none;
}
.btn-ghost.big{padding:16px 24px;font-size:10.5px}
.link-arrow,
a.link-arrow,
button.link-arrow,
.pricing-list a,
.page-hero p a,
.prose p a,
.team-card p a,
dialog a,
.cf-privacy a{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
}
.link-arrow{font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.link-arrow:hover{color:var(--muted)}

/* Formulaires : filet unique, fond papier, focus encre */
.iat-form,
.cf-field input,
.cf-field textarea,
.chat-search,
.chat-input,
.brief-field input,
.brief-field textarea,
.audit-input-row input,
#iat-url{
  border-radius:0;
  box-shadow:none;
}
.iat-form{
  border:1px solid var(--line-strong);
  background:var(--card);
}
.iat-form input{
  background:transparent;
  font:500 14px var(--font);
  color:var(--ink);
}
.iat-go{
  border:0!important;
  border-left:1px solid var(--line-strong)!important;
  background:var(--ink);
  color:var(--paper);
  font:500 10px/1 var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.iat-go:hover{background:#000!important;color:var(--paper)!important}
.iat-form.err{border-color:var(--red)}
.cf-field input,
.cf-field textarea,
.brief-field input,
.brief-field textarea,
.chat-search,
.chat-input{
  border:1px solid var(--line-strong);
  background:var(--card);
  color:var(--ink);
}
.cf-field input:focus,
.cf-field textarea:focus,
.brief-field input:focus,
.brief-field textarea:focus,
.chat-input input:focus,
.chat-search:focus-within{
  outline:none;
  border-color:var(--ink);
  box-shadow:0 0 0 1px var(--ink);
}

/* Commutateur du testeur IA */
.iat-switch{
  gap:0;
  padding:0;
  border:1px solid var(--line-strong);
  background:transparent;
}
.iat-switch-btn{
  padding:10px 16px;
  border:0;
  border-right:1px solid var(--line);
  border-radius:0;
  font:500 9.5px var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.iat-switch-btn:last-child{border-right:0}
.iat-switch-btn:hover{background:var(--card-2);color:var(--ink)}
.iat-switch-btn.is-on{background:var(--ink);color:var(--paper)}
.iat-switch-btn:focus-visible{outline:1px solid var(--ink);outline-offset:2px}

/* -------------------------------------------------------------------------
   8. MODULES DE SERVICES
   ------------------------------------------------------------------------- */
.modules{gap:12px}
.module{
  padding:24px 22px;
  border:1px solid var(--line);
  background:var(--card);
  box-shadow:none;
  transition:border-color .15s ease,background .15s ease;
}
.module:hover{
  transform:none;
  box-shadow:none;
  border-color:var(--line-strong);
  background:var(--paper);
}
.module-top{margin-bottom:18px}
.module-ico{border:1px solid var(--line-strong)!important}
.module-status{
  padding:4px 8px;
  border:1px solid var(--line);
  background:transparent;
  font:500 8.5px var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.ico-stack svg{stroke-width:1.2}
.module h3{font-size:18px;font-weight:600;letter-spacing:-.02em}
.module>p{color:var(--muted);font-size:12.5px;line-height:1.6}
.module-metric{
  padding-top:14px;
  border-top:1px solid var(--line);
  font:500 9.5px var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.module-metric b{font-size:18px;font-weight:600;letter-spacing:-.03em}
.module-toggle{
  width:26px;
  height:26px;
  border:1px solid var(--line-strong);
  background:transparent;
  font:500 13px var(--mono);
}
.module-toggle:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.module-toggle[aria-expanded="true"]{background:transparent;border-color:var(--ink);color:var(--ink)}
.module-details li:before{color:var(--ink)}

/* -------------------------------------------------------------------------
   9. CARTES, GRILLES, TABLEAUX
   ------------------------------------------------------------------------- */
.featured>a,
.app-grid>a,
.seo-card,
.ai-capabilities article,
.team-card,
.pricing-card,
.news-table,
.wp-badge,
.craft-sig,
.iat,
.monitor,
.game-showcase,
.traffic,
.entity,
.agency-intro--lead,
.ref-more-toggle,
.audit-item{
  border-width:1px!important;
  border-color:var(--line)!important;
  box-shadow:none!important;
}
.featured>a,
.app-grid>a,
.seo-card,
.ai-capabilities article,
.team-card,
.pricing-card{
  background:var(--card);
  transition:border-color .15s ease,background .15s ease;
}
.featured>a:hover,
.app-grid>a:hover,
.app-grid>a:focus-visible,
.seo-card:hover,
.ai-capabilities article:hover,
.pricing-card:hover{
  transform:none!important;
  box-shadow:none!important;
  border-color:var(--line-strong)!important;
  background:var(--paper);
}
.featured>a.feat-accent{
  background:var(--ink)!important;
  border-color:var(--ink)!important;
  color:var(--paper);
}
.feat-tag,
.feat-go,
.app-grid small,
.team-role,
.pricing-code,
.news-row-date{
  font:500 9px var(--mono);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.feat-go{
  margin-top:16px;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:2px;
}
.feat-accent .feat-go{color:var(--paper)}
.featured h3,
.featured>a.feat-accent h3,
.app-grid b,
.seo-card b,
.ai-capabilities b,
.team-card h4,
.pricing-card h2{
  font-weight:600;
  letter-spacing:-.03em;
}
.app-grid small{font-size:9.5px;letter-spacing:.08em;text-transform:none;color:var(--muted)}
.app-grid b{font-size:13.5px}
.app-grid img{opacity:0}
.seo-card b{font-size:21px;color:var(--ink)}
.ai-icon{
  width:36px;
  height:36px;
  border:1px solid var(--line-strong);
  color:var(--ink);
  font-weight:500;
}
.ai-workflow{border-top:1px solid var(--line)}
.ai-media{border-left:1px solid var(--line)}
.monitor-intro{padding:44px}
#network-section{
  background-image:
    linear-gradient(var(--line-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:44px 44px,44px 44px;
}
.game-stage,.game-frame{background:var(--ink)}

/* Trafic */
.traffic-copy{padding:44px}
.traffic-total b{color:var(--ink);font-weight:600}
.traffic-chart{
  border-left:1px solid var(--line);
  background:var(--card-2);
}
.traffic-grid path{stroke:var(--line)}
.traffic-line{stroke:var(--ink);stroke-width:2}
.traffic-end{stroke:var(--ink);fill:var(--card);filter:none}
.traffic-sites a,
.traffic-sites span{
  padding:6px 9px;
  border:1px solid var(--line);
  background:transparent;
  font:500 9.5px var(--mono);
  letter-spacing:.06em;
  color:var(--ink-2);
}
.traffic-sites a:hover{border-color:var(--ink);color:var(--ink)}
.traffic-sites i{width:5px;height:5px;background:var(--ink)}

/* Références / actualités */
.ref-table{padding:22px 38px 0}
.ref-row{
  padding:14px 0;
  border-bottom:1px solid var(--line);
  font-size:13.5px;
}
.ref-head{
  border-bottom:1px solid var(--line-strong);
  font:500 9px var(--mono);
  letter-spacing:.16em;
}
.ref-row b{font-weight:600}
.ref-live{width:6px;height:6px;background:var(--ink)}
.ref-preview{border:1px solid var(--ink)!important;box-shadow:none!important}
a.ref-row:not(.news-row):hover{background:var(--card-2)}
.news-table{padding:0 28px;background:var(--card)}
.news-row{
  padding:16px 0;
  border-bottom:1px solid var(--line);
}
.news-row:last-child{border-bottom:0}
.news-table a.news-row:hover{background:var(--card-2);padding:16px 0;border-bottom-color:var(--line)}
.news-row-title{font-weight:600;letter-spacing:-.01em}
.news-row-desc{color:var(--muted);font-size:13px}

/* -------------------------------------------------------------------------
   10. ENTITÉ, CTA, PIED DE PAGE
   ------------------------------------------------------------------------- */
.entity>div:first-child{padding:44px}
.entity h2{font-weight:600}
.entity-stats{
  gap:1px;
  background:var(--line);
  border-left:1px solid var(--line);
}
.entity-stats div{background:var(--card)}
.entity-stats b{font-weight:600}
.entity-stats small{font:500 10px var(--mono);letter-spacing:.06em}

.cta{
  padding:52px 48px;
  border:1px solid var(--ink);
  background:var(--ink);
  color:var(--paper);
}
.cta .eyebrow{
  border:1px solid var(--dline);
  color:#a7a7ad;
  font:500 9px var(--mono);
  letter-spacing:.18em;
}
.cta h2{font-weight:600;letter-spacing:-.045em}
.cta p{color:#a7a7ad}
.cta .btn-primary{
  background:var(--paper)!important;
  border-color:var(--paper)!important;
  color:var(--ink)!important;
  box-shadow:none!important;
}
.cta .btn-primary:hover{
  background:transparent!important;
  border-color:var(--paper)!important;
  color:var(--paper)!important;
}
.cta-mail{
  color:var(--paper);
  border-bottom:1px solid var(--dline);
  font:500 12px var(--mono);
  letter-spacing:.06em;
}
.cta-mail:hover{border-color:var(--paper)}

.footer{padding:40px 0 56px}
.foot-grid{
  gap:48px;
  padding-top:26px;
  border-top:1px solid var(--line);
}
.foot-brand p{color:var(--muted);font-size:13px;line-height:1.7}
.foot-status{
  font:500 10px var(--mono);
  letter-spacing:.08em;
  color:var(--muted);
}
.foot-col{gap:10px;font-size:13px}
.foot-col span{
  margin-bottom:4px;
  font:500 9px var(--mono);
  letter-spacing:.2em;
  color:var(--muted);
}
.foot-col a,
.foot-col button{color:var(--ink-2);font-size:13px}
.foot-col a:hover,
.foot-col button:hover{color:var(--ink);text-decoration-color:var(--ink)}
.foot-cities{font:500 10px var(--mono);letter-spacing:.06em;color:var(--muted)!important}
.foot-partner,
.monitor-partner{font:500 10px var(--mono);letter-spacing:.06em;color:var(--muted)}

/* -------------------------------------------------------------------------
   11. SOUS-PAGES
   ------------------------------------------------------------------------- */
.subpage{
  width:min(calc(100% - 48px),1200px);
  padding:calc(var(--nav-h) + var(--tick-h) + 28px) 0 40px;
  gap:20px;
}
.page-hero{
  padding:18px 0 28px;
  margin-bottom:8px;
  border-bottom:1px solid var(--line);
  text-align:left;
}
.page-hero .tag{margin-left:0;margin-right:0}
.page-hero h1{
  margin:14px 0 0;
  max-width:22ch;
  font-size:clamp(34px,4.4vw,58px);
  font-weight:600;
  letter-spacing:-.055em;
  line-height:1.01;
}
.page-hero h1 .hl{
  color:var(--ink);
  font-family:Georgia,'Times New Roman',serif;
  font-style:italic;
  font-weight:400;
  letter-spacing:-.035em;
}
.page-hero p{
  margin:16px 0 0;
  max-width:66ch;
  font-size:14.5px;
  line-height:1.65;
  color:var(--ink-2);
}
.contact-hero h1 .hl,
.contact-hero p a{color:var(--ink)}

/* Tarifs */
.pricing-card{padding:26px}
.pricing-card h2{font-size:25px}
.pricing-summary{color:var(--muted)}
.price{border-bottom:1px solid var(--line)}
.price b{font-weight:600}
.price span{font:500 9px var(--mono);letter-spacing:.14em}
.pricing-list li{padding-left:20px;color:var(--ink-2);font-size:12.5px}
.pricing-list li:before{
  top:7px;
  width:6px;
  height:6px;
  background:transparent;
  border:1px solid var(--ink);
}
.pricing-card:hover .pricing-list li:before{background:var(--ink)!important;border-color:var(--ink)!important}
.maintenance{
  padding:12px;
  border:1px solid var(--line);
  background:transparent;
}
.maintenance b{font:500 9.5px var(--mono);letter-spacing:.12em}
.pricing-option{
  padding:10px 12px;
  border:1px dashed var(--line-strong);
  background:transparent;
}
.pricing-option--link{border-style:solid}
.cf-legal-stack .pricing-note{border-width:1px!important;border-color:var(--line)!important;box-shadow:none!important}
.cf-legal-stack{border-width:1px!important;border-color:var(--line)!important;box-shadow:none!important}
.pricing-option:hover{border-color:var(--ink);background:var(--card-2)}
.pricing-option input:checked + .po-check{background:var(--ink);border-color:var(--ink)}
.pricing-option .po-price{font:500 11px var(--mono);color:var(--ink)}
.pricing-card.pricing-dark{
  background:var(--ink)!important;
  border-color:var(--ink)!important;
  color:var(--paper);
}
.pricing-dark .pricing-code{color:#a7a7ad}
.pricing-dark .pricing-summary,
.pricing-dark .pricing-list li,
.pricing-dark .maintenance span{color:#a7a7ad}
.pricing-dark .price{border-color:var(--dline)}
.pricing-dark .pricing-list li:before{background:transparent;border-color:var(--paper)}
.pricing-dark .maintenance{border-color:var(--dline);background:transparent}
.pricing-dark .maintenance b{color:var(--paper)}
.pricing-dark-link{
  border:1px solid var(--line-strong);
  color:var(--paper);
  font:500 10px var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.pricing-dark-link:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.pricing-nav button{
  border:1px solid var(--line-strong);
  background:var(--card);
  color:var(--ink);
  border-radius:0;
}
.pricing-nav button:hover:not(:disabled){background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* Agence / prose */
.prose h3{font-weight:600}
.prose li:before{
  top:8px;
  width:6px;
  height:6px;
  background:transparent;
  border:1px solid var(--ink);
}
.team-role{color:var(--muted)}
.profile-links a{
  padding:7px 10px;
  border:1px solid var(--line-strong);
  color:var(--ink);
  font:500 9px var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.profile-links a:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.agency-focus>div{border:1px solid var(--line);background:transparent}
.agency-focus b{font-weight:600}
.agency-stats{gap:1px;background:var(--line);border-top:1px solid var(--line)}
.agency-stats>div{background:var(--card)}
.agency-stats b{color:var(--ink);font-weight:600}
.agency-section-head h2,
.agency-intro h2{font-weight:600;letter-spacing:-.045em}

/* Signature */
.craft-sig{background:var(--card)}
.sig-grid{gap:1px;background:var(--line)}
.sig-grid>div{background:var(--card)}
.sig-grid b{font-weight:600}
.sig-grid span{font:500 10px var(--mono);letter-spacing:.04em;color:var(--muted)}
.sig-grid sup,
.sig-addr b,
.sig-since b,
.sig-wp b,
.sig-mono.hl{color:var(--ink)!important}
.sig-mono{font:500 10px var(--mono)!important;color:var(--ink-2)!important}

/* -------------------------------------------------------------------------
   12. TESTEUR IA / DIALOGUES / SCORE
   ------------------------------------------------------------------------- */
.iat{padding:48px 30px}
.iat h3{font-weight:600;letter-spacing:-.035em}
.iat-score,
.iat-offer,
.iat-console,
.iat-gate-in,
.iat-gate-off{
  border-width:1px!important;
  border-color:var(--line)!important;
  box-shadow:none!important;
}
.iat-score{background:var(--card-2)}
.iat-score-num{font-weight:600;color:var(--ink)}
.iat-progress,
.iat-bar{height:4px;background:var(--line)}
.iat-progress span,
.iat-bar span{background:var(--ink)}
.iat-console{
  background:var(--ink);
  color:#d9d8d3;
  border-color:var(--ink)!important;
  font:500 10.5px/1.8 var(--mono);
}
.iat-line.ok{color:#d9d8d3}
.iat-line.bad{color:#ff9a8f}
.iat-line.hi{color:#fff;font-weight:500}
.iat-checks,
.iat-chk,
.iat-fixes li,
.iat-fixes li:first-child{border-color:var(--line)}
.iat-chk.is-active{background:var(--card-2)}
.iat-chk-ico{border-color:var(--line-strong);color:var(--muted)}
.iat-chk.is-active .iat-chk-ico{border-color:var(--ink);color:var(--ink)}
.iat-chk.is-ok .iat-chk-ico{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.iat-chk.is-warn .iat-chk-ico,
.iat-chk.is-ko .iat-chk-ico{border-color:var(--ink);color:var(--muted)}
.iat-offer{background:var(--card-2)}
.iat-price{color:var(--ink);font-weight:600}
.iat-offer li:before{color:var(--ink)}
.iat-cta,
.iat-cta--ghost{
  border:1px solid var(--ink);
  background:var(--ink);
  color:var(--paper);
  font:500 10px var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  box-shadow:none;
}
.iat-cta:hover,
.iat-cta--ghost:hover{background:transparent;color:var(--ink)}
.iat-cta--ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}

dialog{
  padding:36px;
  border:1px solid var(--line-strong);
  background:var(--card);
  box-shadow:none;
}
dialog::backdrop{background:rgba(16,16,20,.62);backdrop-filter:blur(3px)}
dialog .close{
  width:34px;
  height:34px;
  border:1px solid var(--line-strong);
  background:var(--card);
  border-radius:0;
}
dialog .close:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
dialog h2{font-weight:600;letter-spacing:-.04em}
dialog p,
dialog ul{color:var(--ink-2)}

/* -------------------------------------------------------------------------
   13. FORMULAIRE PROJET (demarrer.html)
   ------------------------------------------------------------------------- */
.contact-shell .contact-stepper{gap:1px;background:var(--line);border:1px solid var(--line)}
.step-dot{
  padding:14px 16px;
  border:0;
  background:var(--card);
  font:500 10px var(--mono);
  letter-spacing:.08em;
  color:var(--muted);
}
.step-dot .num{
  width:28px;
  height:28px;
  border:1px solid var(--line-strong);
  background:transparent;
  font:500 12px var(--mono);
  color:var(--ink);
}
.step-dot.active{
  border:0;
  background:var(--ink);
  color:var(--paper);
  box-shadow:none;
}
.step-dot.active .num{border-color:var(--paper);background:transparent;color:var(--paper)}
.step-dot.done{border:0;color:var(--ink)}
.step-dot.done .num{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.contact-form{
  border:1px solid var(--line-strong);
  background:var(--card);
  box-shadow:none;
}
.cf-step-head{border-bottom:1px solid var(--line)}
.cf-step-head h2{font-weight:600;letter-spacing:-.04em}
.cf-choice{
  border:1px solid var(--line);
  background:var(--card);
}
.cf-choice:hover{border-color:var(--line-strong)}
.cf-choice.selected{
  border-color:var(--ink);
  background:var(--card-2);
  box-shadow:none;
}
.cf-choice.selected .cc-tick{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.cf-choice .cc-tick{border:1px solid var(--line-strong);background:var(--card)}
.cf-choice .cc-name{font-weight:600}
.cf-choice .cc-price{color:var(--ink);font-weight:600}
.cf-choice .cc-code{font:500 9px var(--mono);letter-spacing:.16em}
.cf-choice--ia.selected{box-shadow:none}
.cf-choice--ia .cc-badge{background:var(--ink);color:var(--paper)}
.cf-plan-bar{
  border:1px solid var(--line-strong)!important;
  background:var(--card-2);
  box-shadow:none;
}
.cf-pill{
  padding:10px 16px;
  border:1px solid var(--line-strong);
  background:var(--card);
  font:500 11px var(--font);
}
.cf-pill:hover{border-color:var(--ink);color:var(--ink)}
.cf-pill.selected{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.cc-option{border:1px dashed var(--line-strong);background:transparent}
.cc-option:hover{border-color:var(--ink)}
.cc-option input:checked + .co-check{background:var(--ink);border-color:var(--ink)}
.cc-option .co-price{color:var(--ink);font-weight:500}
.cf-q .cf-q-label{font:500 9px var(--mono);letter-spacing:.16em;color:var(--muted)}
.cf-field label{font:500 9px var(--mono);letter-spacing:.14em;color:var(--muted)}
.cf-drop{border:1px dashed var(--line-strong);background:transparent}
.cf-drop:hover,.cf-drop.dragover{border-color:var(--ink);background:var(--card-2)}
.cf-nav{border-top:1px solid var(--line)}
.cf-recap{border:1px solid var(--line);background:var(--card-2)}
.cf-recap-row{border-bottom:1px solid var(--line)}
.cf-success{border:1px solid var(--line);background:var(--card)}
.big-check{border:1px solid var(--ink);background:transparent;color:var(--ink)}
.cf-next:disabled{opacity:.35;cursor:not-allowed}

/* -------------------------------------------------------------------------
   14. FLOTTANTS, CHAT, NAV MOBILE, COOKIES
   ------------------------------------------------------------------------- */
.float-stack{border:1px solid var(--line-strong);background:var(--paper)}
.float-stack .wa-float{background:transparent;color:var(--ink)}
.float-stack .wa-float:first-child{border-right:1px solid var(--line)!important}
.float-stack .wa-float:hover{background:var(--card-2)}
.btn-call .live-dot{background:var(--paper)}
.live-dot{background:var(--ink);width:6px;height:6px;animation:none}
.live-dot.pulse{box-shadow:none;animation:blink 2.4s infinite}
.chat-panel{
  border:1px solid var(--line-strong);
  background:var(--card);
  box-shadow:none;
}
.chat-head{border-bottom:1px solid var(--line);background:var(--card)}
.chat-avatar{border:1px solid var(--line);background:var(--card-2)}
.bubble{border:1px solid var(--line);background:var(--card-2)}
.msg.user .bubble{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.msg.bot .bubble{background:var(--card);border-color:var(--line)}
.chat-suggestions button,
.result-card{border:1px solid var(--line);background:var(--card)}
.chat-suggestions button:hover,
.result-card:hover{border-color:var(--ink);background:var(--paper)}
.chat-input{border-top:1px solid var(--line);background:var(--card)}
.chat-input button{background:var(--ink);color:var(--paper);border:1px solid var(--ink)}
.chat-input button:hover{background:transparent;color:var(--ink)}
.chat-call{border:1px solid var(--line-strong);color:var(--ink)}
.chat-call:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chat-brief{border-top:1px solid var(--line);background:var(--card)}
.brief-drop{border:1px dashed var(--line-strong);background:transparent}
.brief-drop:hover,.brief-drop.dragover{border-color:var(--ink);background:var(--card-2)}
.brief-send{background:var(--ink);color:var(--paper);border:1px solid var(--ink)}

.mobile-nav.open{
  inset:calc(var(--nav-h) + var(--tick-h)) 0 0;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.mobile-nav a{
  border-bottom:1px solid var(--line);
  font:500 12px var(--font);
  color:var(--ink-2);
}
.mobile-nav-primary a.active{background:var(--ink);color:var(--paper)}
.mobile-nav-secondary{border-top:1px solid var(--line-strong)}
.mobile-nav-secondary a{border:1px solid var(--line-strong);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.mobile-nav .mn-cta{background:var(--ink);border:1px solid var(--ink);color:var(--paper);font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase}

.cookie-consent{
  border:1px solid var(--ink);
  border-bottom:0;
  background:var(--ink);
  box-shadow:none;
}
.cookie-consent h2{font-weight:600}
.cookie-consent p{color:#a7a7ad}
.cookie-consent .cookie-button{border:1px solid var(--dline);color:var(--paper);font:500 10px var(--mono);letter-spacing:.08em}
.cookie-consent .cookie-button.cookie-accept{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.cookie-consent .cookie-button.cookie-accept:hover{background:transparent;color:var(--paper);border-color:var(--paper)}
.cookie-option{border:1px solid var(--line);background:var(--card-2)}
.cookie-option input{border:1px solid var(--line-strong);background:var(--card)}
.cookie-option input:checked{border-color:var(--ink);background:var(--ink)}
.sw-update-bubble{border:1px solid var(--line-strong);background:var(--ink);box-shadow:none}
.sw-update-ico{background:var(--paper);color:var(--ink)}

/* Curseur : petit repère encre, plus discret */
.cursor-tri{width:13px;height:15px}
.cursor-tri::before{background:var(--ink)}
.cursor-tri.is-hover::before{background:var(--ink)}

/* -------------------------------------------------------------------------
   15. TIMELINE (compléments à timeline.css)
   ------------------------------------------------------------------------- */
.tl-body .topbar{height:56px}
.tl-body .topbar .brand{border-right:0;box-shadow:inset -1px 0 0 var(--dline)}
.tl-body .quicknav a{border-left:1px solid var(--dline)}
.tl-body .btn-primary{background:var(--paper);color:var(--ink);border-color:var(--paper)!important}
.tl-body .btn-primary:hover{background:transparent;color:var(--paper);border-color:var(--paper)!important}
/* Sur la page sombre, « Démarrer » reste un simple lien de barre : le survol
   s'éclaire d'un voile clair au lieu d'un aplat encre invisible. */
.tl-body .topbar-right .btn-primary{
  background:transparent!important;
  color:var(--paper)!important;
  border-left-color:var(--dline)!important;
}
.tl-body .topbar-right .btn-primary:hover,
.tl-body .topbar-right .btn-primary:focus-visible{
  background:rgba(242,241,238,.1)!important;
  color:var(--paper)!important;
  border-left-color:var(--dline)!important;
}
.tl-body .live-dot{background:var(--paper)}
/* La bande passe en papier sur la page sombre : même contraste, encre inversée. */
.tl-body .mega-ticker{
  background:var(--paper);
  color:var(--ink);
  border-bottom-color:var(--paper);
}
.tl-body .mega-ticker em{color:#55555c}
.tl-body .mega-ticker i{opacity:.4}
.tl-main{padding-top:calc(var(--nav-h) + var(--tick-h) + 24px)}

/* -------------------------------------------------------------------------
   16. RESPONSIVE
   ------------------------------------------------------------------------- */
@media(max-width:1180px){
  .layout{grid-template-columns:1fr;padding-top:var(--rail-top)}
  .sidebar{display:none}
  .float-stack{
    background:rgba(242,241,238,.96)!important;
    border-top:1px solid var(--line-strong)!important;
  }
  .float-stack .wa-float{background:transparent!important}
}
@media(max-width:900px){
  :root{--tick-h:50px}
  .topbar{height:56px}
  .quicknav{display:none}
  .menu{display:grid;place-items:center}
  .topbar-right .btn-primary{display:none}
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero-kpis{border-left:0;border-top:1px solid var(--line)}
  .kpi{border-right:1px solid var(--line)}
  .kpi:nth-child(2n){border-right:0}
  .monitor-intro,
  .game-showcase .monitor-intro{border-top:1px solid var(--line)}
  .ai-media{border-left:0;border-top:1px solid var(--line)}
  .entity-stats{border-left:0;border-top:1px solid var(--line)}
  .subpage{padding-top:calc(var(--nav-h) + var(--tick-h) + 24px)}
}
@media(max-width:640px){
  :root{--tick-h:44px}
  .layout,
  .subpage,
  .footer{width:calc(100% - 28px)}
  .brand{padding:0 14px}
  .brand b{font-size:19px}
  .brand .brand-word{font-size:22px}
  .brand-mark{width:20px;height:20px}
  .brand-tag{display:none}
  .topbar{padding:0}
  .menu{width:50px}
  .hero-copy{padding:30px 22px}
  .hero h1{font-size:36px}
  .hero-actions{display:flex;flex-direction:column}
  .hero-actions a{width:100%;text-align:center}
  .hero-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi{padding:22px 18px}
  .kpi:nth-child(2n){border-right:0}
  .hero-kpis .kpi:nth-child(-n+2){border-top:0}
  .section-head{padding:0}
  .section-head.plain{padding:26px 22px 0}
  .panel{border-left:0;border-right:0}
  .modules,
  .app-grid,
  .featured,
  .team{grid-template-columns:1fr}
  .cta{padding:34px 22px}
  .footer{padding-bottom:78px}
  .foot-grid{gap:28px}
  .page-hero h1{font-size:34px}
  .subpage{padding-top:calc(var(--nav-h) + var(--tick-h) + 20px)}
  .contact-form .cf-step{padding:28px 20px}
  .step-dot{padding:11px 10px;font-size:9px}
  .step-dot .num{width:24px;height:24px;font-size:10px}
  .iat{padding:38px 20px}
  .iat-switch{width:100%}
  .iat-switch-btn{flex:1 1 0;justify-content:center;padding:10px 8px;font-size:8.5px;letter-spacing:.08em}
  .iat-form{flex-direction:column}
  .iat-go{border-left:0!important;border-top:1px solid var(--line-strong)!important;justify-content:center}
  .chat-panel{left:12px;bottom:calc(76px + env(safe-area-inset-bottom,0px));width:calc(100vw - 24px)}
  .tl-body .menu{border-left:1px solid var(--dline)}
}

/* -------------------------------------------------------------------------
   17. BANDE DÉFILANTE — SCÈNES PLEIN ÉCRAN AU SURVOL
   Le voile naît sur la barre (clip-path), s'ouvre à tout l'écran, joue une
   animation typographique et vectorielle, puis se replie sur la barre.
   Couleurs : la barre elle-même, donc encre sur les pages claires et papier
   sur la timeline sombre.
   ------------------------------------------------------------------------- */
.tick-fx{
  --fx-bg:var(--ink);
  --fx-fg:var(--paper);
  --fx-dim:#a7a7ad;
  --fx-line:rgba(242,241,238,.2);
  position:fixed;
  inset:0;
  z-index:200;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:clamp(12px,2.2vw,28px);
  padding:clamp(16px,2.8vw,38px);
  background:var(--fx-bg);
  color:var(--fx-fg);
  overflow:hidden;
  pointer-events:none;
  visibility:hidden;
  clip-path:inset(var(--fx-top,56px) 0 var(--fx-bottom,calc(100vh - 128px)) 0);
  transition:clip-path .44s cubic-bezier(.76,0,.24,1);
}
/* Un mot sur deux s'ouvre en papier : le même filet, simplement retourné. */
.tick-fx.is-light{
  --fx-bg:var(--paper);
  --fx-fg:var(--ink);
  --fx-dim:#6b6b71;
  --fx-line:rgba(16,16,20,.16);
}
.tick-fx.is-active{visibility:visible;will-change:clip-path}
.tick-fx.is-open{clip-path:inset(0 0 0 0);pointer-events:auto}

/* --- en-tête / pied de scène ------------------------------------------- */
.tick-fx-meta,
.tick-fx-foot{
  display:flex;
  align-items:center;
  gap:14px;
  font:500 9px/1 var(--mono);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--fx-dim);
  opacity:0;
  transition:opacity .3s ease .12s;
}
.tick-fx.is-playing .tick-fx-meta,
.tick-fx.is-playing .tick-fx-foot{opacity:1}
.tick-fx-meta b{color:var(--fx-fg);font-weight:500}

.tick-fx-progress{
  flex:1;
  height:1px;
  background:var(--fx-line);
  overflow:hidden;
}
.tick-fx-progress span{
  display:block;
  height:100%;
  width:0;
  background:var(--fx-fg);
}
.tick-fx.is-playing .tick-fx-progress span{animation:fx-progress 1.6s linear both}
@keyframes fx-progress{to{width:100%}}

/* --- centre : scène + mot ---------------------------------------------- */
.tick-fx-center{position:relative;display:grid;place-items:center;min-height:0}
.tick-fx-stage{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  opacity:.72;
}
.fx-svg{position:absolute;inset:0;width:100%;height:100%}
.fx-svg--square{inset:auto;width:min(78vmin,660px);height:min(78vmin,660px)}
.tick-fx svg *{
  fill:none;
  stroke:currentColor;
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}
.tick-fx svg .fx-bar{fill:currentColor;stroke:none}

.tick-fx-word{position:relative;z-index:2;text-align:center;padding:0 3vw}
.tick-fx-word .w-main{
  display:block;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(32px,8.2vw,128px);
  line-height:.86;
  letter-spacing:-.06em;
  text-transform:uppercase;
  clip-path:inset(0 0 110% 0);
  transform:translateY(9%);
}
.tick-fx.is-playing .tick-fx-word .w-main{animation:fx-word-in .62s cubic-bezier(.2,.8,.2,1) both}
.tick-fx-word .w-note{
  display:block;
  margin-top:.28em;
  font-family:Georgia,'Times New Roman',serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(14px,1.5vw,23px);
  line-height:1.1;
  letter-spacing:-.01em;
  color:var(--fx-dim);
  clip-path:inset(0 0 110% 0);
}
.tick-fx.is-playing .tick-fx-word .w-note{animation:fx-word-in .6s cubic-bezier(.2,.8,.2,1) .16s both}
@keyframes fx-word-in{to{clip-path:inset(0 0 -14% 0);transform:none}}

/* --- 01 grille de construction ----------------------------------------- */
.fx-v,.fx-h{transform-box:fill-box;animation-duration:.62s;animation-timing-function:cubic-bezier(.2,.8,.2,1);animation-fill-mode:both;animation-delay:var(--d,0ms)}
.fx-v{transform-origin:50% 0;transform:scaleY(0);animation-name:fx-grow-y}
.fx-h{transform-origin:0 50%;transform:scaleX(0);animation-name:fx-grow-x}
@keyframes fx-grow-y{to{transform:scaleY(1)}}
@keyframes fx-grow-x{to{transform:scaleX(1)}}
.fx-rect{
  stroke-dasharray:100;
  stroke-dashoffset:100;
  animation:fx-draw 1s ease .34s both;
}
@keyframes fx-draw{to{stroke-dashoffset:0}}
.fx-cross{
  transform-box:view-box;
  transform-origin:50% 50%;
  animation:fx-cross-in .9s cubic-bezier(.2,.8,.2,1) .3s both;
}
@keyframes fx-cross-in{
  from{opacity:0;transform:rotate(-28deg) scale(.86)}
  to{opacity:1;transform:none}
}

/* --- 02 rafales --------------------------------------------------------- */
.fx-streak{
  opacity:0;
  animation:fx-streak 1.15s cubic-bezier(.33,0,.2,1) both;
  animation-delay:var(--d,0ms);
}
@keyframes fx-streak{
  0%{transform:translateX(0);opacity:0}
  14%{opacity:var(--o,.7)}
  82%{opacity:var(--o,.7)}
  100%{transform:translateX(168px);opacity:0}
}

/* --- 03 pluie ----------------------------------------------------------- */
.fx-drop{
  opacity:0;
  animation:fx-drop var(--t,800ms) linear both;
  animation-delay:var(--d,0ms);
}
@keyframes fx-drop{
  0%{transform:translateY(-10px);opacity:0}
  18%{opacity:var(--o,.45)}
  100%{transform:translateY(112px);opacity:0}
}
.fx-scan{animation:fx-scan 1.5s cubic-bezier(.4,0,.4,1) .1s both}
@keyframes fx-scan{
  0%{transform:translateY(0);opacity:0}
  18%{opacity:.8}
  100%{transform:translateY(100px);opacity:0}
}

/* --- 04 ondes ----------------------------------------------------------- */
.fx-ring{animation:fx-ring-in .8s ease both}
.fx-ring--soft{opacity:.5}
@keyframes fx-ring-in{from{opacity:0}to{opacity:1}}
.fx-ripple{
  transform-box:fill-box;
  transform-origin:center;
  opacity:0;
  animation:fx-ripple 1.1s ease-out both;
  animation-delay:var(--d,0ms);
}
@keyframes fx-ripple{
  0%{transform:scale(.25);opacity:0}
  28%{opacity:.95}
  100%{transform:scale(3.3);opacity:0}
}

/* --- 05 radar ----------------------------------------------------------- */
.fx-sweep{
  transform-box:view-box;
  transform-origin:50% 50%;
  animation:fx-spin 1.5s cubic-bezier(.35,0,.65,1) both;
}
@keyframes fx-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.fx-axis{stroke-dasharray:2 4;animation:fx-fade-in .7s ease .15s both}
.fx-echo{
  transform-box:fill-box;
  transform-origin:center;
  animation:fx-echo 1.5s ease-in-out both;
}
@keyframes fx-echo{
  0%,52%{opacity:0;transform:scale(.3)}
  66%{opacity:1;transform:scale(1)}
  100%{opacity:.25;transform:scale(1)}
}
@keyframes fx-fade-in{from{opacity:0}to{opacity:1}}

/* --- 06 couture --------------------------------------------------------- */
.fx-hatch{
  stroke-dasharray:100;
  stroke-dashoffset:100;
  animation:fx-draw .5s ease both;
  animation-delay:var(--d,0ms);
}

/* --- 07 croissance ------------------------------------------------------ */
.fx-bar{
  transform-box:fill-box;
  transform-origin:50% 100%;
  animation:fx-bar-rise .6s cubic-bezier(.2,.8,.2,1) both;
  animation-delay:var(--d,0ms);
}
@keyframes fx-bar-rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.fx-ground{opacity:.45;stroke-dasharray:3 4;animation:fx-fade-in .6s ease .1s both}

/* --- timeline sombre : le voile prend la couleur de sa barre (papier) --- */
.tl-body .tick-fx{
  --fx-bg:var(--paper);
  --fx-fg:var(--ink);
  --fx-dim:#55555c;
  --fx-line:rgba(16,16,20,.18);
}
.tl-body .tick-fx.is-light{
  --fx-bg:var(--ink);
  --fx-fg:var(--paper);
  --fx-dim:#a7a7ad;
  --fx-line:rgba(242,241,238,.2);
}

@media(max-width:1024px){
  .tick-fx{display:none}
}
@media(prefers-reduced-motion:reduce){
  .tick-fx{display:none}
}
/* --- mini-jeux : même cadre, la scène devient un plateau jouable -------- */
.tick-fx.is-game{cursor:pointer}
.tick-fx.is-game .tick-fx-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(10px,1.4vw,18px);
}
.tick-fx.is-game .tick-fx-stage{
  position:relative;
  inset:auto;
  width:min(56vmin,520px);
  height:min(56vmin,520px);
  opacity:1;
  overflow:visible;
  border:1px solid var(--fx-line);
}
.tick-fx.is-game .tick-fx-stage canvas{display:block;width:100%;height:100%}
.tick-fx.is-game .tick-fx-word{padding:0}
.tick-fx.is-game .tick-fx-word .w-main{
  font-family:var(--mono);
  font-weight:500;
  font-size:clamp(10px,1vw,13px);
  line-height:1;
  letter-spacing:.22em;
  text-transform:uppercase;
  clip-path:none;
  transform:none;
  animation:none;
}
/* L'aide aux commandes est une notice, pas un sous-titre : mono, capitales,
   et elle s'efface une fois le geste compris. */
.tick-fx.is-game .tick-fx-word .w-note{
  margin-top:.9em;
  font-family:var(--mono);
  font-style:normal;
  font-weight:500;
  font-size:clamp(9px,.78vw,11px);
  line-height:1.2;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fx-dim);
  clip-path:none;
  animation:fx-hint-out .7s ease 5s both;
}
@keyframes fx-hint-out{to{opacity:0}}
.tick-fx.is-game .tick-fx-progress span{animation:none;width:100%;opacity:.35}
/* --- bandeau de jeu : tout le texte hors du cadre de jeu ---------------- */
/* Une seule ligne de chrome en haut : le numéro à gauche, l'état du jeu à
   droite. Aucun rappel du titre, donc aucun risque de superposition. */
.tick-fx-state{
  margin-left:auto;
  color:var(--fx-fg);
  font-variant-numeric:tabular-nums;
}
.tick-fx.is-game .tick-fx-word .w-note{color:var(--fx-dim)}