/* ==========================================================================
   AXELINK Maroc : feuille de style principale
   Palette : encre bleu-nuit + ambre. Type : Archivo (axe de largeur) + IBM Plex Mono.
   Motif structurel : le « rail » : la ligne qui relie les étapes d'un processus.
   ========================================================================== */

:root {
  --ink:        #0E3750;
  --ink-2:      #14415D;
  --ink-3:      #194764;
  --line:       #2B546E;
  --line-soft:  #123D58;
  --paper:      #D0DCE4;
  --paper-dim:  #ADBFCA;
  --muted:      #97ADBA;
  --slate:      #99ACB8;
  --amber:      #F08820;
  --blue:       #5EA7D4;
  --blue-lite:  #A2C9E2;
  --blue-glow:  rgba(24, 120, 184, .14);
  --amber-lo:   #935210;
  --amber-glow: rgba(240, 136, 32, .26);
  /* En thème clair, l'orange de marque (#F08820) n'a que 2,4:1 sur le fond :
     illisible en texte. On garde l'orange EXACT pour les aplats, et on utilise
     cette version dense, de MÊME TEINTE (30°), dès qu'il s'agit de texte. */
  --amber-ink:  #F2963B;
  /* couleur du texte POSÉ SUR un aplat orange (boutons pleins) */
  --on-amber:   #0A1A24;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --shell: 1240px;
  --gut: clamp(20px, 4vw, 56px);
  --rail: 12px;

  --r: 12px;
  --r-sm: 8px;
  /* ombres douces et bleutées : l'élévation remplace les bordures sèches */
  --sh-1: 0 1px 2px rgba(0, 12, 16, .28), 0 8px 24px rgba(0, 12, 16, .30);
  --sh-2: 0 4px 10px rgba(0, 12, 16, .36), 0 20px 50px rgba(0, 12, 16, .42);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--amber); color: var(--on-amber);
  padding: 12px 18px; font: 600 13px/1 var(--mono);
}
.skip:focus { left: 12px; top: 12px; }

/* --------------------------------------------------------------- typographie */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-variation-settings: "wdth" 112;
  line-height: 1.06;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}

.h-xl {
  font-size: clamp(2.3rem, 5.9vw, 4.3rem);
  font-weight: 640;
  font-variation-settings: "wdth" 118;
  letter-spacing: -.035em;
}
.h-lg { font-size: clamp(1.9rem, 3.8vw, 2.9rem); font-weight: 640; letter-spacing: -.022em; }
.h-md { font-size: clamp(1.35rem, 2.2vw, 1.7rem); font-weight: 650; letter-spacing: -.015em; }
.h-sm { font-size: 1.06rem; font-weight: 650; letter-spacing: -.005em; line-height: 1.3; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  color: var(--paper-dim);
  line-height: 1.6;
  max-width: 62ch;
}

.dim { color: var(--muted); }
.amber { color: var(--amber-ink); }

/* eyebrow : un nœud + une ligne. Le rail, en miniature. */
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font: 600 15px/1.4 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber-ink);
  margin: 0 0 22px;
}
.eyebrow::before {
  content: ""; width: 7px; height: 7px; flex: none;
  background: var(--amber); border-radius: 50%;
  box-shadow: 0 0 0 3px var(--amber-glow);
}
.eyebrow::after {
  content: ""; height: 1px; flex: 1; max-width: 60px;
  background: linear-gradient(90deg, var(--amber-lo), transparent);
}

/* ------------------------------------------------------------------ ossature */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.section { padding-block: clamp(64px, 9vw, 116px); }
.section--tight { padding-block: clamp(48px, 6vw, 76px); }
.section--edge { border-top: 0; }
/* Plus d'alternance de fond entre sections : l'accueil en changeait six fois,
   ce qui découpait la page en bandes horizontales. Le fond est uniforme,
   l'espacement fait la séparation. */
.section--raised { background: none; border-block: 0; }

.split {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }

/* Les grilles ne forment plus un bloc quadrillé collé (l'ancien « faux tableau »
   à gap:1px sur fond gris, qui empilait des barres pleine largeur). Chaque
   cellule est une carte autonome, séparée par du vide : c'est l'élévation qui
   crée le rythme, plus les lignes. */
.grid { display: grid; gap: clamp(14px, 1.4vw, 20px); background: none; border: 0; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------- navbar */

.nav {
  position: sticky; top: 0; z-index: 60;
  /* La barre prend EXACTEMENT la couleur de fond de la page : elle ne forme
     plus une bande distincte, elle se fond dedans. Comme c'est la variable de
     fond qui est utilisée, elle suivra automatiquement si la page change de
     couleur, sans qu'on ait à la retoucher. */
  background: var(--ink);
  transition: box-shadow .28s var(--ease);
}
/* Rien ne la sépare du contenu tant qu'on est en haut. L'ombre n'apparaît
   qu'au défilement, au moment où du contenu passe réellement dessous. */
.nav.is-stuck {
  box-shadow: 0 1px 0 rgba(0, 12, 16, .30), 0 12px 30px rgba(0, 12, 16, .34);
}
.nav__in {
  display: flex; align-items: center; gap: 28px;
  height: 68px;
}
.nav__links { display: flex; align-items: center; gap: 1px; margin-left: auto; }
.nav__link {
  position: relative;
  padding: 9px 10px;
  font-size: .875rem;
  color: var(--paper-dim);
  border-radius: var(--r);
  transition: color .18s var(--ease), background .18s var(--ease);
  white-space: nowrap;
}
.nav__link:hover { color: var(--paper); background: var(--ink-3); }
.nav__link[aria-current="page"] { color: var(--paper); }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px;
  height: 1.5px; background: var(--amber);
}

.brand { display: flex; align-items: center; flex: none; }
.brand__logo {
  height: 40px;
  aspect-ratio: 180 / 58;
  background: url(../img/logo.png) center/contain no-repeat;
  transition: opacity .18s var(--ease);
}
.brand:hover .brand__logo { opacity: .82; }
.foot .brand__logo { height: 46px; }
@media (max-width: 480px) { .brand__logo { height: 32px; } }

/* menu déroulant */
.drop { position: relative; }
.drop__btn {
  display: flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: .875rem; color: var(--paper-dim);
  padding: 9px 12px; border-radius: var(--r);
  transition: color .18s var(--ease), background .18s var(--ease);
}
.drop__btn:hover { color: var(--paper); background: var(--ink-3); }
.drop__btn { padding: 9px 10px; }
.drop__btn svg { transition: transform .2s var(--ease); }
.drop__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.drop__menu {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 208px; padding: 6px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 16px 40px rgba(0, 12, 16, .44);
  display: none;
}
.drop__menu[data-open] { display: block; }
.drop__menu a {
  display: block; padding: 9px 11px;
  font-size: .86rem; color: var(--paper-dim);
  border-radius: var(--r-sm);
}
.drop__menu a:hover { background: var(--ink-3); color: var(--paper); }

/* burger */
.burger {
  display: none; margin-left: auto;
  width: 40px; height: 40px; padding: 0;
  background: none; border: 1px solid var(--line);
  border-radius: var(--r); cursor: pointer;
}
.burger span {
  display: block; width: 16px; height: 1.5px; margin: 3.5px auto;
  background: var(--paper);
  transition: transform .22s var(--ease), opacity .22s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.sheet {
  position: fixed; inset: 68px 0 0; z-index: 55;
  background: var(--ink);
  padding: 24px var(--gut) 40px;
  overflow-y: auto;
  display: none;
}
.sheet[data-open] { display: block; }
.sheet a {
  display: block;
  padding: 15px 0;
  font-family: var(--display);
  font-variation-settings: "wdth" 108;
  font-size: 1.35rem; font-weight: 600;
}
.sheet .sheet__sub { font-size: .95rem; font-weight: 400; color: var(--muted); padding-left: 16px; }

/* Trois libellés courts au lieu de quatre longs : le méga-menu tient bien plus bas. */
@media (max-width: 880px) {
  .nav__links { display: none; }
  .burger { display: block; }
}

/* -------------------------------------------------------------------- boutons */

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 20px;
  font: 600 .875rem/1 var(--body);
  border: 1px solid transparent;
  border-radius: var(--r);
  cursor: pointer;
  transition: transform .16s var(--ease), background .16s var(--ease), border-color .16s var(--ease);
  white-space: nowrap;
}
.btn svg { flex: none; transition: transform .2s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.btn--solid { background: var(--amber); color: var(--on-amber); }
.btn--solid:hover { background: #FF9F3E; }

.btn--ghost { border-color: var(--line); color: var(--paper); }
.btn--ghost:hover { border-color: var(--slate); background: var(--ink-2); }

.btn--text { padding: 0; color: var(--amber-ink); font-weight: 600; font-size: .875rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* ---------------------------------------------------------------------- héros */

.hero { position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0;
  /* Plus de halos dégradés ici : étalés sur toute la hauteur avec une opacité
     de 13 %, ils se découpaient en paliers de couleur (banding) qui formaient
     des lignes horizontales en travers de la page. Invisible sur fond sombre,
     criant sur fond clair. Le fond est maintenant parfaitement uni. */
  background: none;
  pointer-events: none;
}
.hero__in { position: relative; padding-block: clamp(64px, 9vw, 108px) clamp(48px, 6vw, 72px); }
.hero__title { max-width: 17ch; }
.hero__lede { margin-top: 22px; font-size: clamp(1.05rem, 1.7vw, 1.28rem); color: var(--paper-dim); max-width: 54ch; }

/* ------------------------------------------- SIGNATURE : le rail de processus */

.railbox {
  margin-top: clamp(40px, 6vw, 64px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--ink-2);
}
.railbox__head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 14px 16px 10px;
}
.railbox__label {
  font: 500 10px/1 var(--mono);
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--muted);
  margin-right: auto; padding-right: 12px;
}
.tab {
  padding: 7px 13px;
  background: none; border: 1px solid transparent; border-radius: 100px;
  font: 500 .8rem/1 var(--body); color: var(--muted);
  cursor: pointer;
  transition: color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.tab:hover { color: var(--paper); }
.tab[aria-selected="true"] {
  color: var(--amber-ink);
  border-color: var(--amber-lo);
  background: rgba(240, 136, 32, .09);
}

.railbox__body { padding: clamp(26px, 4vw, 42px) clamp(16px, 3vw, 32px) clamp(22px, 3vw, 32px); }

.rail { position: relative; display: grid; gap: 0; }
.rail__track {
  position: absolute; top: 11px; left: 6%; right: 6%;
  height: 1.5px; background: var(--line);
  overflow: hidden;
}
.rail__pulse {
  position: absolute; top: 0; left: 0; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--amber-lo), var(--amber));
  transition: width .5s linear;
}
.rail__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.step { text-align: center; padding-inline: 4px; }
.step__node {
  width: 22px; height: 22px; margin: 0 auto 14px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--ink);
  display: grid; place-items: center;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}
.step__node::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--slate);
  transition: background .35s var(--ease), transform .35s var(--ease);
}
.step__name {
  font-size: .84rem; font-weight: 600; line-height: 1.25;
  color: var(--paper-dim);
  transition: color .35s var(--ease);
}
.step__state {
  margin-top: 6px;
  font: 500 9.5px/1.3 var(--mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--slate);
  transition: color .35s var(--ease);
}
.step__state .s-auto { display: none; }
.step.is-auto .step__state .s-man { display: none; }
.step.is-auto .step__state .s-auto { display: inline; }

.step.is-auto .step__node {
  border-color: var(--amber-ink);
  background: rgba(240, 136, 32, .1);
  box-shadow: 0 0 0 4px var(--amber-glow);
}
.step.is-auto .step__node::after { background: var(--amber); transform: scale(1.15); }
.step.is-auto .step__name { color: var(--paper); }
.step.is-auto .step__state { color: var(--amber-ink); }

.railbox__foot {
  margin-top: clamp(24px, 3vw, 34px);
  padding-top: 20px;
  font-size: .875rem; color: var(--muted);
  max-width: 70ch;
}

@media (max-width: 720px) {
  .rail__track { display: none; }
  .rail__steps { grid-template-columns: 1fr; gap: 0; }
  .step {
    display: grid; grid-template-columns: 22px 1fr; align-items: center;
    gap: 14px; text-align: left;
    padding: 11px 0;
    border-left: 1.5px solid var(--line);
    margin-left: 10px; padding-left: 20px;
    position: relative;
  }
  .step__node { margin: 0; position: absolute; left: -11px; }
  .step > div { grid-column: 2; }
  .step__state { margin-top: 3px; }
}

/* --------------------------------------------------------------------- cartes */

.card {
  background: var(--ink-2);
  padding: clamp(22px, 2.6vw, 32px);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
  transition: box-shadow .28s var(--ease), transform .28s var(--ease);
}
.card:hover { box-shadow: var(--sh-2); transform: translateY(-5px); }
.card__idx {
  font: 500 10px/1 var(--mono);
  letter-spacing: .14em;
  color: var(--amber-ink);
  margin-bottom: 16px;
  display: block;
}
.card h3 { margin-bottom: 10px; }
.card p { font-size: .9rem; color: var(--muted); line-height: 1.62; }
.card__more { margin-top: 18px; display: inline-flex; }

.card--link:hover { background: var(--ink-3); }

/* liste à puces maison */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ticks li {
  position: relative; padding-left: 22px;
  font-size: .92rem; color: var(--paper-dim); line-height: 1.55;
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 9px; height: 1.5px; background: var(--amber);
}
.ticks strong { color: var(--paper); font-weight: 650; }

/* ------------------------------------------------------------------ chiffres */

.stat {
  background: var(--ink-2);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
  padding: clamp(24px, 3vw, 36px);
}
.stat__n {
  font-family: var(--display);
  font-variation-settings: "wdth" 120;
  font-weight: 700;
  font-size: clamp(2.6rem, 5vw, 3.5rem);
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--amber-ink);
}
.stat__l {
  margin-top: 12px;
  font: 500 10.5px/1.4 var(--mono);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------- rail vertical long */

.vrail { display: grid; gap: 0; }
.vrail__item {
  position: relative;
  padding: clamp(22px, 3vw, 30px) 0 clamp(22px, 3vw, 30px) clamp(30px, 4vw, 48px);
  border-left: 1px solid var(--line);
}
.vrail__item:last-child { border-left-color: transparent; }
.vrail__item::before {
  content: ""; position: absolute; left: -4.5px; top: clamp(28px, 3.4vw, 36px);
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink); border: 1.5px solid var(--slate);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.vrail__item:hover::before { border-color: var(--amber-ink); box-shadow: 0 0 0 4px var(--amber-glow); }
.vrail__item:last-child::after {
  content: ""; position: absolute; left: -.5px; top: 0; height: clamp(28px, 3.4vw, 36px);
  border-left: 1px solid var(--line);
}
.vrail__k {
  font: 500 10px/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber-ink); display: block; margin-bottom: 9px;
}
.vrail__item p { margin-top: 10px; font-size: .92rem; color: var(--muted); max-width: 76ch; }

/* --------------------------------------------------------------------- pills */

.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font: 500 .8rem/1 var(--mono);
  color: var(--paper-dim);
  background: var(--ink-2);
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.pill:hover { border-color: var(--amber-lo); color: var(--amber-ink); }

/* ------------------------------------------------------------------ callout */

.callout {
  border: 1px solid var(--line);
  border-left: 2px solid var(--amber);
  border-radius: var(--r);
  background: var(--ink-2);
  padding: clamp(22px, 3vw, 30px);
}
.callout .h-sm { margin-bottom: 8px; }
.callout p { font-size: .9rem; color: var(--muted); }

/* état vide : une invitation, pas une excuse */
.empty {
  border: 1px dashed var(--line);
  border-radius: var(--r);
  padding: clamp(32px, 5vw, 56px);
  text-align: center;
  background:
    repeating-linear-gradient(45deg, transparent, transparent 9px, rgba(255,255,255,.030) 9px, rgba(255,255,255,.030) 18px);
}
.empty .h-md { margin-bottom: 10px; }
.empty p { font-size: .9rem; color: var(--muted); max-width: 46ch; margin-inline: auto; }

/* ------------------------------------------------------------------ bandeau CTA */

.cta { position: relative; border-top: 0; background: none; }
/* le halo suit la carte, il ne déborde plus sur toute la largeur */
.cta__in::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(38% 62% at 50% 112%, rgba(240, 136, 32, .22), transparent 70%);
}
.cta__in {
  position: relative; text-align: center;
  padding: clamp(56px, 8vw, 92px) clamp(24px, 4vw, 56px);
  background: var(--ink-2);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
  overflow: hidden;
}
.cta__in > * { position: relative; }
.cta__in .h-lg { max-width: 20ch; margin-inline: auto; }
.cta__in .lede { margin: 18px auto 0; text-align: center; }
.cta .btn-row { justify-content: center; }

/* ------------------------------------------------------------------ formulaire */

.form { display: grid; gap: 16px; }
.field { display: grid; gap: 7px; }
.field label {
  font: 500 10.5px/1 var(--mono);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.field label .req { color: var(--amber-ink); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 12px 14px;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--paper);
  font: 400 .95rem/1.5 var(--body);
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--slate); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--amber-ink); background: var(--ink-2);
}
.field textarea { resize: vertical; min-height: 132px; }
.field__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .field__row { grid-template-columns: 1fr; } }
.form__note { font-size: .78rem; color: var(--muted); }

/* --------------------------------------------------------------------- footer */

.foot { border-top: 0; background: var(--ink); }
.foot__in {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  padding-block: clamp(48px, 6vw, 68px) 30px;
}
@media (max-width: 820px) { .foot__in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot__in { grid-template-columns: 1fr; } }

.foot h4 {
  font: 500 10px/1 var(--mono);
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot ul a { font-size: .88rem; color: var(--paper-dim); transition: color .18s var(--ease); }
.foot ul a:hover { color: var(--amber-ink); }
.foot address { font-style: normal; font-size: .88rem; color: var(--muted); line-height: 1.75; margin-top: 16px; }
.foot address a:hover { color: var(--amber-ink); }
.foot__claim {
  margin-top: 20px;
  font-family: var(--display);
  font-variation-settings: "wdth" 108;
  font-size: 1.02rem; font-weight: 600;
  color: var(--paper);
  max-width: 22ch;
  line-height: 1.3;
}
.foot__bar {
  display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center;
  padding-block: 22px;
  font: 400 11px/1.6 var(--mono);
  color: var(--slate);
  letter-spacing: .04em;
}
.foot__bar span:first-child { margin-right: auto; }

/* ------------------------------------------------------------- révélation scroll */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}


/* =============================================== composants des pages expertise */

/* icônes : même langage que le rail : nœuds, lignes, 1,5 px */
.ico { color: var(--amber-ink); display: block; margin-bottom: 18px; }
.card:hover .ico { color: var(--amber-ink); }

/* listes longues : deux colonnes, sans casser un item en deux */
.cols { columns: 2; column-gap: clamp(24px, 4vw, 56px); }
.cols li { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; }
@media (max-width: 720px) { .cols { columns: 1; } }

/* badges technos : bleu de la marque. Le substrat, pas l'action. */
.pill--tech {
  border-color: rgba(24, 120, 184, .38);
  color: var(--blue-lite);
  font-size: .78rem;
}
.pill--tech:hover { border-color: var(--blue); color: #B9DAF3; background: var(--blue-glow); }

.techs { display: grid; gap: 26px; }
.techs__g h3 {
  font: 500 10px/1 var(--mono);
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 12px;
}

/* carte d'expertise sur l'accueil : toute la carte cliquable, accent au survol */
.card--xp { display: block; }
.card--xp .h-md { margin-bottom: 10px; }
.card--xp:hover { border-color: var(--amber-ink); }


/* ==================================================== mur de logos clients */
/* Chaque case prend la couleur de fond du logo qu'elle porte : les tuiles
   rouges (RAM, Palmeraie) deviennent un parti pris, pas un accident. */
.lw {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  overflow: hidden;
}
@media (max-width: 1080px) { .lw { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .lw { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.lw__c {
  position: relative;
  aspect-ratio: 12 / 5;
  overflow: hidden;
}
/* La boîte de l'image = la case moins ses marges, et object-fit s'occupe du reste.
   Plus fiable que max-height:100% dans une grille, où le pourcentage ne mord pas. */
.lw__c img {
  position: absolute;
  top: 14px; left: 20px;
  width: calc(100% - 40px);
  height: calc(100% - 28px);
  object-fit: contain;
  display: block;
  /* correction optique par logo : chacun est mis à l'échelle pour que la
     quantité d'encre affichée soit comparable. Sans ça, un logo tout en
     longueur s'affiche en filet à côté d'un logo carré. */
  transform: scale(var(--s, 1));
}
.lw__more {
  display: grid;
  place-items: center;
}
.lw__c::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 0 var(--amber);
  transition: box-shadow .25s var(--ease);
}
.lw__c:hover::after { box-shadow: inset 0 0 0 2px var(--amber); }

/* 22 logos : la case finale s'étire sur ce qui reste de la rangée.
   5 col -> 22%5=2, il reste 3 ; 4 col -> il reste 2 ; 2 col -> rangée pleine. */
.lw__more {
  background: var(--ink-2);
  text-align: center;
  padding: 14px;
  transition: background .25s var(--ease);
  /* 25 logos : 5 col -> la rangée est pleine, elle prend une bande entière ;
     4 col -> il reste 3 ; 2 col -> il reste 1, donc une case normale.
     aspect-ratio est neutralisé car .lw__more porte aussi .lw__c. */
  grid-column: span 5;
  aspect-ratio: auto;
  min-height: 72px;
}
@media (max-width: 1080px) { .lw__more { grid-column: span 3; } }
@media (max-width: 720px)  { .lw__more { grid-column: span 1; aspect-ratio: 12 / 5; } }
.lw__more span {
  font: 500 10.5px/1.6 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .25s var(--ease);
}
.lw__more:hover { background: var(--ink-3); }
.lw__more:hover span { color: var(--amber-ink); }


/* ================================================== cartes partenaires */
.pcard__logo {
  position: relative;
  width: 168px;
  aspect-ratio: 3 / 1;
  background: #F6FAFF;
  border-radius: var(--r);
  margin-bottom: 22px;
  overflow: hidden;
}
.pcard__logo img {
  position: absolute;
  top: 9px; left: 14px;
  width: calc(100% - 28px);
  height: calc(100% - 18px);
  object-fit: contain;
  transform: scale(var(--s, 1));
}


/* ============================================== pilier : carte pleine largeur */
.card--wide { grid-column: 1 / -1; }
.card--wide .ico { margin-bottom: 16px; }
.card--wide .pcard__logo { width: 196px; }
.card--wide .h-md { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.card--wide p { font-size: .98rem; color: var(--paper-dim); max-width: 82ch; }

/* ====================================================== méga-menu au survol */
.mega { position: static; }
.mega__btn {
  display: flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: .875rem; color: var(--paper-dim);
  padding: 9px 12px; border-radius: var(--r);
  transition: color .18s var(--ease), background .18s var(--ease);
}
.mega__btn svg { transition: transform .2s var(--ease); }
.mega:hover .mega__btn, .mega:focus-within .mega__btn { color: var(--paper); background: var(--ink-3); }
.mega:hover .mega__btn svg, .mega:focus-within .mega__btn svg { transform: rotate(180deg); }

/* Le panneau se positionne sur .nav (sticky = bloc conteneur), pas sur le bouton :
   il occupe donc toute la largeur de la barre. */
.mega__panel {
  position: absolute; left: 0; right: 0; top: 100%;
  z-index: 70;
  background: var(--ink-2);
  border-top: 0;
  border-bottom: 0;
  box-shadow: 0 24px 60px rgba(0, 12, 16, .46);
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.mega:hover .mega__panel, .mega:focus-within .mega__panel {
  opacity: 1; visibility: visible; transform: none;
}
.mega__in {
  display: grid;
  gap: clamp(24px, 3vw, 52px);
  padding-block: clamp(30px, 3.4vw, 42px) clamp(32px, 3.6vw, 46px);
}
.mega__in--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mega__in--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.mega__head {
  display: block;
  font-family: var(--display);
  font-variation-settings: "wdth" 108;
  font-weight: 700; font-size: 1.02rem;
  letter-spacing: -.015em;
  color: var(--paper);
  padding-bottom: 6px; margin-bottom: 16px;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
a.mega__head:hover { color: var(--amber-ink); border-bottom-color: var(--amber-lo); }
.mega__col a:not(.mega__head) {
  display: block; padding: 6px 0;
  font-size: .855rem; line-height: 1.4; color: var(--muted);
  transition: color .16s var(--ease), transform .16s var(--ease);
}
.mega__col a:not(.mega__head):hover { color: var(--paper); transform: translateX(3px); }

.mega__cta {
  border: 1px solid var(--line);
  border-left: 2px solid var(--amber);
  border-radius: var(--r);
  background: var(--ink);
  padding: 22px;
  align-self: start;
}
.mega__cta p {
  font-family: var(--display);
  font-variation-settings: "wdth" 106;
  font-size: 1.02rem; font-weight: 600; line-height: 1.3;
  color: var(--paper); margin-bottom: 16px;
}


/* ======================================================= L'EFFET D'INFÉRENCE
   Il ne décore pas : il signale qu'un calcul est en cours, et il s'arrête quand
   le calcul s'arrête. L'anneau tourne pendant que le rail traite les étapes ;
   la réponse arrive ensuite, en flux, comme un modèle qui répond.
   ========================================================================= */

@property --ang {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.glow { position: relative; }
.glow::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--ang),
              transparent 0 58%, var(--blue) 72%, var(--amber) 88%, transparent 97%);
  /* on ne garde que la bordure : le masque évide l'intérieur */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .55s var(--ease);
  pointer-events: none;
  z-index: 3;
}
.glow.is-thinking::before {
  opacity: 1;
  animation: infer 2.8s linear infinite;
}
@keyframes infer { to { --ang: 360deg; } }

/* la trace laissée par le calcul, une fois terminé */
.glow::after {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 0 0 var(--amber-glow);
  transition: box-shadow .7s var(--ease);
  pointer-events: none;
}
.glow.is-settled::after { box-shadow: 0 0 44px -6px var(--amber-glow); }

/* la réponse qui se déroule */
.railbox__foot.is-streaming::after {
  content: "";
  display: inline-block;
  width: 7px; height: .92em;
  margin-left: 4px;
  background: var(--amber);
  vertical-align: -2px;
  animation: caret .9s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

.railbox__label { transition: color .4s var(--ease); }
.railbox.is-thinking .railbox__label { color: var(--amber-ink); }

@media (prefers-reduced-motion: reduce) {
  .glow::before, .glow::after { display: none; }
  .railbox__foot.is-streaming::after { display: none; }
}


/* Un seul témoin « vivant » par page : le nœud du surtitre du héros respire.
   Les autres surtitres restent fixes : quarante points qui pulsent, c'est du bruit. */
.hero .eyebrow::before { animation: nodePulse 2.8s ease-in-out infinite; }
@keyframes nodePulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--amber-glow); }
  50%      { box-shadow: 0 0 0 9px rgba(240, 136, 32, .07); }
}
@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow::before { animation: none; }
}


/* ==================================== L'INFÉRENCE AU CHANGEMENT DE PAGE
   Aucun délai n'est ajouté : le contenu est déjà dans le DOM. On habille le
   temps de bascule qui existe (~450 ms), on n'en invente pas.
   Trois gestes, dans cet ordre : la barre calcule, le surtitre se génère,
   le héros se résout du flou vers le net.
   ==================================================================== */

/* 1. la barre de la nav : un flux qui traverse, pas un remplissage plat */
.progress.is-infer {
  background: linear-gradient(90deg,
              var(--amber-lo) 0%, var(--blue) 28%, var(--amber) 56%, var(--blue) 84%, var(--amber-lo) 100%);
  background-size: 220% 100%;
  animation: flux .9s linear infinite;
  box-shadow: 0 0 16px var(--amber-glow);
}
@keyframes flux { to { background-position: -220% 0; } }

/* 2. le surtitre se génère, caractère par caractère */
.eb-t { display: inline-block; }
.eb-t.is-typing::after {
  content: "";
  display: inline-block;
  width: 6px; height: .85em;
  margin-left: 3px;
  background: var(--amber);
  vertical-align: -1px;
  animation: caret .8s steps(1) infinite;
}

/* 3. le héros se résout : flou -> net. Le geste d'un modèle de diffusion.
   Le flou ne porte que sur le bloc du héros : l'appliquer à toute la route
   ferait ramer le rendu pour rien.
   Sélecteur sans .route : vaut aussi pour la version multipage, où l'animation
   se joue au chargement. Dans le fichier unique, une route qui repasse de
   display:none à display:block relance l'animation toute seule. */
.hero__in { animation: resolve .58s var(--ease) both; }
@keyframes resolve {
  0%   { opacity: 0; filter: blur(12px); transform: translateY(9px); }
  30%  { opacity: 1; }
  100% { opacity: 1; filter: blur(0); transform: none; }
}

/* le héros ne pilote plus ses enfants en cascade pendant la résolution :
   sinon les deux animations se battent sur l'opacité */
.hero .eyebrow, .hero__lede, .railbox { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .hero__in { animation: none; }
  .progress.is-infer { animation: none; }
  .eb-t.is-typing::after { display: none; }
}


/* ═══════════════════════════════════════════ blocs solution (pages métier)
   Titre à gauche, contenu à droite : la solution se lit comme une fiche,
   pas comme une carte de plus dans une grille. */
.sols { display: grid; }
.sol {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  padding-block: clamp(22px, 3vw, 34px);
}
.sol__head .ico { color: var(--amber-ink); }
.sol__head .h-md { margin-top: 4px; }
.sol__body .lede { font-size: 1rem; }
@media (max-width: 900px) { .sol { grid-template-columns: 1fr; gap: 18px; } }


/* ═════════════════════════════════════════ ANCRES : la barre est collante
   Sans ça, scrollIntoView aligne la cible sur le haut du viewport, donc sous
   les 69 px de la barre : on atterrit sous le titre qu'on visait.
   scroll-margin-top vaut aussi pour les ancres natives du multipage, que le
   JS ne pilote pas.
   ===================================================================== */
:root { --navh: 69px; }

section[id], .card[id], .vrail__item[id], .sol[id], [id].route {
  scroll-margin-top: calc(var(--navh) + 28px);
}


/* ═══════════════════════════════════════════════════════════════════════
   TÉLÉPHONE — confort de lecture et de manipulation
   Le site tenait déjà dans l'écran, mais « tenir » ne suffit pas : le texte
   descendait à 10 px, les liens faisaient 16 px de haut (la norme tactile
   est 44 px), et les champs à 15,2 px déclenchaient le zoom automatique
   d'iOS à chaque fois qu'on touchait le formulaire.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {

  /* --- 1. les champs ne font plus zoomer l'écran ------------------------
     Sous 16 px, iOS agrandit la page dès qu'on touche un champ, et ne la
     remet jamais droite. 16 px est le seuil exact à ne pas franchir. */
  .form input, .form select, .form textarea,
  input, select, textarea {
    font-size: 16px !important;
    padding-block: 13px;
  }

  /* --- 2. plus rien sous 12 px ------------------------------------------
     Les libellés techniques (10-11 px) sont lisibles sur un écran de bureau
     à 60 cm, pas sur un téléphone tenu à bout de bras. */
  .eyebrow, .card__idx, .railbox__label, .stat__l,
  .step__state, .vrail__k, .form label {
    font-size: 12px;
    letter-spacing: .08em;
  }
  .pill { font-size: 13px; padding: 7px 13px; }
  .form__note { font-size: 13px; }

  /* --- 3. des zones tactiles atteignables --------------------------------
     44 px est la recommandation d'Apple, 48 celle de Google. Les liens de
     listes passaient à 16 px de haut : impossible à viser au pouce. */
  .foot a, .sheet__link, .mega__panel a, .drop__menu a {
    display: inline-block;
    padding-block: 11px;
    min-height: 44px;
    line-height: 22px;
  }
  .tab { min-height: 40px; padding-inline: 15px; }
  .btn { min-height: 48px; padding-block: 13px; }

  /* --- 4. le héros respire ---------------------------------------------- */
  .hero__in { padding-block: 40px 44px; }
  .h-xl { font-size: clamp(2rem, 8.4vw, 2.5rem); line-height: 1.08; }
  .hero__lede { font-size: 1.02rem; }

  /* --- 5. rythme vertical resserré : moins de défilement pour rien ------- */
  .section { padding-block: clamp(40px, 9vw, 56px); }
  .section--tight { padding-block: clamp(32px, 7vw, 44px); }
  .card { padding: 22px 20px; }
  .grid { gap: 14px; }

  /* --- 6. un peu plus d'air sur les côtés -------------------------------- */
  .shell { padding-inline: 22px; }

  /* --- 7. les boutons prennent la largeur : cible franche, geste sûr ----- */
  .btn-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .btn-row .btn { width: 100%; justify-content: center; }

  /* --- 8. le mur de logos : 3 colonnes, sinon les logos sont illisibles -- */
  .lw { grid-template-columns: repeat(3, 1fr) !important; }
  .lw__c { aspect-ratio: 3 / 2; }

  /* --- 9. le rail du héros : lecture verticale ---------------------------
     Cinq étapes côte à côte sur 340 px, ce sont cinq colonnes de 60 px :
     illisible. En colonne, chaque étape retrouve sa place. */
  .rail { grid-auto-flow: row; gap: 18px; }
  .rail__track, .rail__pulse { display: none; }
  .step { display: flex; align-items: center; gap: 12px; text-align: left; }
  .step__dot { flex: 0 0 auto; }

  /* --- 10. les derniers détails de lisibilité ---------------------------- */
  .lw__more, .lw__more span { font-size: 12px !important; line-height: 1.5; }
  /* les libellés de la carte contact portent une taille en dur dans le HTML */
  .contact-card [style*="font-size:11px"],
  .contact-card [style*="font-size: 11px"] { font-size: 12px !important; }
  /* le numéro de téléphone : une vraie cible tactile */
  a[href^="tel:"] {
    display: inline-block; min-height: 44px; line-height: 44px;
    font-size: 1.05rem;
  }
  /* le logo et le lien d'évitement atteignent la taille tactile */
  .brand { min-height: 44px; display: inline-flex; align-items: center; }
  .skip { min-height: 44px; line-height: 44px; }

  /* --- 11. le pied de page en une seule colonne -------------------------- */
  .foot__in { grid-template-columns: 1fr; gap: 30px; }
  .foot__bar { flex-direction: column; gap: 10px; text-align: center; }
}

/* très petits écrans (iPhone SE et assimilés) */
@media (max-width: 400px) {
  .shell { padding-inline: 18px; }
  .h-xl { font-size: clamp(1.85rem, 8.6vw, 2.2rem); }
  .lw { grid-template-columns: repeat(2, 1fr) !important; }
}


/* ═══════════════════════════════════════════════════════════════════════
   TOUT APPAREIL TACTILE, quelle que soit la taille de l'écran
   `pointer: coarse` désigne les appareils pilotés au doigt : téléphones,
   mais aussi tablettes, qui ont un grand écran et méritent malgré tout des
   cibles atteignables et des champs qui ne déclenchent pas le zoom.
   ═══════════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px !important; }
  /* le bouton du menu atteint la taille tactile recommandée */
  .burger { min-width: 44px; min-height: 44px; }
  /* la mention du mur de logos porte sa taille en dur dans le HTML */
  .lw__more, .lw__more * { font-size: 12px !important; line-height: 1.5; }
  .btn { min-height: 46px; }
  .foot a, .sheet__link, .drop__menu a, .mega__panel a {
    display: inline-block; min-height: 44px; padding-block: 10px; line-height: 24px;
  }
  a[href^="tel:"], a[href^="mailto:"] { min-height: 44px; display: inline-block; line-height: 44px; }
  .brand { min-height: 44px; display: inline-flex; align-items: center; }
  .tab { min-height: 40px; }
  .eyebrow, .card__idx, .railbox__label, .stat__l,
  .step__state, .vrail__k, .form label, .lw__more { font-size: 12px; }
}