/* UnixDev — feuille de style commune
   Univers : « La correspondance ». Les quatre services sont quatre lignes d'un réseau
   schématique (angles de 45°, stations en pastilles) qui se rejoignent à une seule
   correspondance : l'anneau du logo.
     orange → IA et connecteurs MCP      marine → CRM et ERP web
     bleu   → Python full-stack          gris   → Serveurs Linux
   Police auto-hébergée (OFL) : Overpass, grotesque issue de la signalétique routière. */

@font-face {
  font-family: "Overpass";
  src: url("../fonts/Overpass-var.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

/* ---------- Jetons ---------- */
:root {
  color-scheme: light dark;

  --paper: #ffffff;
  --ground: #f4f7fa;       /* zones calmes du plan */
  --ink: #293b4e;          /* marine de la marque */
  --ink-strong: #1b2938;
  --muted: #546377;
  --link: #2a67b2;
  --rule: #d5dde6;
  --focus: #e58325;

  /* Lignes (couleurs du logo) et texte lisible posé dessus */
  --l-ia: #e58325;    --on-ia: #1b2938;
  --l-web: #293b4e;   --on-web: #ffffff;
  --l-py: #2a67b2;    --on-py: #ffffff;
  --l-linux: #7f7f7f; --on-linux: #111111;
  --l-off: #dfe5ec;

  --station: #ffffff;
  --sign: #293b4e;         /* panneaux : fond */
  --on-sign: #ffffff;
  --sign-hover: #2a67b2;

  --line-w: 12px;
  --font: "Overpass", "Helvetica Neue", Arial, sans-serif;

  --measure: 40rem;
  --page: 76rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --space: clamp(4rem, 9vw, 7.5rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f1720;
    --ground: #141e29;
    --ink: #e4ebf2;
    --ink-strong: #ffffff;
    --muted: #a6b4c4;
    --link: #8bb4ea;
    --rule: #2a3949;

    --l-web: #c4d1e0;   --on-web: #0f1720;
    --l-py: #5592dd;    --on-py: #0f1720;
    --l-linux: #9a9a9a; --on-linux: #0f1720;
    --l-off: #2a3949;

    --station: #0f1720;
    --sign: #e4ebf2;
    --on-sign: #0f1720;
    --sign-hover: #8bb4ea;
  }
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-kerning: normal;
}
@media (min-width: 48rem) { body { font-size: 1.125rem; } }

h1, h2, h3 {
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
  margin: 0 0 0.55em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.5rem); }
h2 { font-size: clamp(1.85rem, 1.35rem + 1.9vw, 2.9rem); }
h3 { font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.01em; }

p, ul, ol, dl { margin: 0 0 1em; }
p, dd, li { text-wrap: pretty; }

a { color: var(--link); text-underline-offset: 0.2em; text-decoration-thickness: 1.5px; }
a:hover { text-decoration-thickness: 3px; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--l-py); color: var(--on-py); }

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

.facts dd, .cartouche p, .years, .since { font-variant-numeric: tabular-nums; }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 10;
  background: var(--sign); color: var(--on-sign);
  padding: 0.5rem 1rem; border-radius: 6px; font-weight: 700;
}
.skip:focus { top: 1rem; }

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }
.prose { max-width: var(--measure); }
.lead { font-size: 1.18em; line-height: 1.5; }
.muted { color: var(--muted); }
.years { color: var(--muted); font-size: 0.92em; font-weight: 600; margin: 0.3rem 0 0; }

/* ---------- En-tête ---------- */
.site-header { border-bottom: 2px solid var(--ink); background: var(--paper); }
.site-header .wrap {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-top: 1rem; padding-bottom: 1rem;
}
.brand { color: var(--ink); display: inline-block; }
.brand svg { height: 2.75rem; width: auto; }

.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.6rem; }
.nav a {
  color: var(--ink); text-decoration: none; font-weight: 600;
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0;
}
.nav a::before {
  /* station : vide au repos, pleine sur la page courante */
  content: ""; width: 0.7rem; height: 0.7rem; border-radius: 50%;
  border: 2.5px solid var(--muted); background: var(--station);
  transition: border-color 0.2s;
}
.nav a:hover::before { border-color: var(--ink); }
.nav a[aria-current="page"]::before { border-color: var(--ink); background: var(--l-ia); }
.nav .lang a::before { content: none; }
.nav .lang a {
  background: var(--sign); color: var(--on-sign);
  border-radius: 6px; padding: 0.3rem 0.6rem; font-size: 0.85em; letter-spacing: 0.04em;
}
.nav .lang a:hover { background: var(--sign-hover); }

@media (max-width: 40rem) {
  .site-header .wrap { padding-top: 0.75rem; padding-bottom: 0.6rem; }
  .brand svg { height: 2.1rem; }
  .nav { width: 100%; }
  .nav ul { gap: 0.25rem 0.85rem; font-size: 0.95rem; }
  .nav a:not([aria-current])::before { content: none; }
  .nav .lang { position: absolute; top: calc(0.75rem + 1.05rem); right: var(--gutter); transform: translateY(-50%); }
  .nav .lang a { padding: 0.4rem 0.75rem; }
}

/* ---------- Sections ---------- */
main { display: block; }
.section { padding: var(--space) 0; }
.section + .section { border-top: 1px solid var(--rule); }
.page-head { padding: var(--space) 0 calc(var(--space) * 0.55); }
.page-head p { color: var(--muted); }
.page-head h1 { max-width: 14em; }

/* ---------- Panneaux (boutons) ---------- */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2.25rem; }
.button, .sign {
  display: inline-flex; align-items: center; gap: 0.8rem;
  background: var(--sign); color: var(--on-sign);
  text-decoration: none; font-weight: 800; font-size: 1.05rem;
  padding: 0.85rem 1.35rem 0.8rem; border-radius: 8px;
  box-shadow: 0 2px 6px rgb(15 23 32 / 0.18);
  transition: background 0.2s, transform 0.2s;
}
.button:hover, .sign:hover { background: var(--sign-hover); color: var(--on-sign); transform: translateY(-1px); }
/* Les quatre pastilles sur une petite plaque claire, pour que la marine reste visible sur le panneau marine. */
.sign .dots { display: inline-flex; gap: 3px; padding: 3px; border-radius: 999px; background: var(--on-sign); }
.sign .dots i { width: 0.7rem; height: 0.7rem; border-radius: 50%; }
.sign .dots i:nth-child(1) { background: var(--l-ia); }
.sign .dots i:nth-child(2) { background: var(--l-web); }
.sign .dots i:nth-child(3) { background: var(--l-py); }
.sign .dots i:nth-child(4) { background: var(--l-linux); }
.alt { color: var(--ink); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.alt:hover { text-decoration: underline; }

/* ---------- Accueil : le plan du réseau ---------- */
.hero { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 4.5rem); background: var(--paper); overflow: hidden; }
.hero .wrap { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 64rem) {
  .hero .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; }
}
.hero h1 { max-width: 12em; font-size: clamp(2.4rem, 1.3rem + 2.9vw, 3.85rem); }
.hero .lead { max-width: 32rem; color: var(--muted); }

.reseau { margin: 0; }
.reseau svg { width: 100%; height: auto; }
.plan.narrow { display: none; }
@media (max-width: 40rem) {
  .plan.wide { display: none; }
  .plan.narrow { display: block; }
}
.plan .trace { fill: none; stroke-width: var(--line-w); stroke-linecap: round; stroke-linejoin: round; }
.plan .stn { fill: var(--station); stroke: var(--ink); stroke-width: 3.5; }
.plan .lbl { fill: var(--ink); font: 700 17px var(--font); }
.plan .pill-t { font: 800 15px var(--font); }
.plan .lbl.sm { font-size: 14px; }
.plan .lbl.xs { font-size: 13px; }
.plan .lbl.denied { fill: var(--muted); text-decoration: line-through; }
.plan .xfer-name.sm { font-size: 22px; }
.plan .xfer-name.sm2 { font-size: 16px; }
.plan .ext { fill: var(--station); stroke: var(--ink); stroke-width: 2.5; }
.plan .ext-t { fill: var(--ink); font: 700 13px var(--font); }
.plan .xfer { fill: var(--station); stroke: var(--ink); stroke-width: 4; }
.plan .xfer-t { fill: var(--ink-strong); font: 800 14px var(--font); }
.plan .term { stroke: var(--ink); stroke-width: 4; }
.t-ia .term { fill: var(--l-ia); } .t-web .term { fill: var(--l-web); } .t-py .term { fill: var(--l-py); } .t-linux .term { fill: var(--l-linux); }
.plan .trace.thin { stroke-width: 6; }
.plan .closed-track { fill: none; stroke: var(--l-off); stroke-width: 8; stroke-dasharray: 2 10; stroke-linecap: round; }
.plan .closed { fill: var(--station); stroke: var(--muted); stroke-width: 3; }
.map-fig { width: 100%; height: auto; }
.map-fig.narrow .pill-t { font-size: 13px; }
.plan .xfer-name { fill: var(--ink-strong); font: 800 27px var(--font); letter-spacing: -0.01em; }
.plan .xfer-sub { fill: var(--muted); font: 600 14px var(--font); }
.plan .ring-bg { fill: var(--station); }
.plan .u { fill: var(--ink); }

.t-ia .trace, .t-ia .pill { stroke: var(--l-ia); } .t-ia .pill { fill: var(--l-ia); } .t-ia .pill-t { fill: var(--on-ia); }
.t-web .trace, .t-web .pill { stroke: var(--l-web); } .t-web .pill { fill: var(--l-web); } .t-web .pill-t { fill: var(--on-web); }
.t-py .trace, .t-py .pill { stroke: var(--l-py); } .t-py .pill { fill: var(--l-py); } .t-py .pill-t { fill: var(--on-py); }
.t-linux .trace, .t-linux .pill { stroke: var(--l-linux); } .t-linux .pill { fill: var(--l-linux); } .t-linux .pill-t { fill: var(--on-linux); }

.arc { fill: none; }
.arc-ia { stroke: var(--l-ia); }
.arc-web { stroke: var(--l-web); }
.arc-py { stroke: var(--l-py); }
.arc-linux { stroke: var(--l-linux); }
.u, .word { fill: currentColor; }
.dot { fill: var(--l-ia); }

/* Interaction signature : choisir une ligne dans la légende l'allume sur le plan. */
.reseau .t, .reseau .arc { transition: opacity 0.25s ease-out; }
.reseau:has(.legende a:hover, .legende a:focus-visible) .t,
.reseau:has(.legende a:hover, .legende a:focus-visible) .arc { opacity: 0.15; }
.reseau:has(.legende .l-ia a:hover, .legende .l-ia a:focus-visible) :is(.t-ia, .arc-ia),
.reseau:has(.legende .l-web a:hover, .legende .l-web a:focus-visible) :is(.t-web, .arc-web),
.reseau:has(.legende .l-py a:hover, .legende .l-py a:focus-visible) :is(.t-py, .arc-py),
.reseau:has(.legende .l-linux a:hover, .legende .l-linux a:focus-visible) :is(.t-linux, .arc-linux) { opacity: 1; }

.legende {
  list-style: none; margin: 1.25rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.4rem 1.5rem;
}
.legende a {
  display: flex; align-items: center; gap: 0.7rem;
  color: var(--ink); text-decoration: none; font-weight: 700; padding: 0.35rem 0;
}
.legende a:hover .nom { text-decoration: underline; }
.legende small { display: block; color: var(--muted); font-weight: 400; font-size: 0.85rem; }
.legende .seg { flex: none; width: 2.6rem; height: var(--line-w); border-radius: 6px; background: var(--seg); }

/* Une seule animation sur le site : les lignes se tracent jusqu'à la correspondance. */
@media (prefers-reduced-motion: no-preference) {
  .reseau .trace { stroke-dasharray: 1; animation: draw 1.1s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .reseau .t-web .trace { animation-delay: 0.12s; }
  .reseau .t-py .trace { animation-delay: 0.24s; }
  .reseau .t-linux .trace { animation-delay: 0.36s; }
}
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ---------- Plans de ligne (accueil) ---------- */
.l-ia { --seg: var(--l-ia); --on: var(--on-ia); }
.l-web { --seg: var(--l-web); --on: var(--on-web); }
.l-py { --seg: var(--l-py); --on: var(--on-py); }
.l-linux { --seg: var(--l-linux); --on: var(--on-linux); }
.bar-ia { --bar: var(--l-ia); --on: var(--on-ia); }
.bar-web { --bar: var(--l-web); --on: var(--on-web); }
.bar-py { --bar: var(--l-py); --on: var(--on-py); }
.bar-linux { --bar: var(--l-linux); --on: var(--on-linux); }

.lignes { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 3.25rem; }
.ligne { display: grid; gap: 1rem 3rem; }
@media (min-width: 60rem) { .ligne { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; } }
.ligne h3 { margin: 0 0 0.35rem; }
.ligne h3 a {
  display: inline-block; text-decoration: none;
  background: var(--seg); color: var(--on);
  padding: 0.3rem 0.85rem 0.2rem; border-radius: 999px;
}
.ligne h3 a:hover { text-decoration: underline; }
.ligne .years { margin: 0 0 0.6rem; }
.ligne p { margin: 0; }

.stations { list-style: none; margin: 0; padding: 0; position: relative; display: flex; }
.stations::before {
  content: ""; position: absolute; left: 0.6rem; right: 0.6rem; top: 0.6rem;
  height: var(--line-w); margin-top: calc(var(--line-w) / -2); border-radius: 6px; background: var(--seg);
}
.stations li { position: relative; flex: 1 1 0; padding: 2rem 0.75rem 0 0; font-weight: 700; font-size: 0.95rem; line-height: 1.3; }
.stations li::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: var(--station); border: 3.5px solid var(--ink);
}
.stations .terminus { flex: 1.6 1 0; color: var(--ink-strong); }
.stations .terminus::before { width: 1.6rem; height: 1.6rem; top: -0.2rem; border-width: 5px; background: var(--seg); }
@media (max-width: 40rem) {
  .stations { flex-direction: column; gap: 0.9rem; padding-left: 0.1rem; }
  .stations::before { left: 0.6rem; right: auto; top: 0.6rem; bottom: 0.6rem; height: auto; width: var(--line-w); margin: 0 0 0 calc(var(--line-w) / -2); }
  .stations li { padding: 0 0 0 2rem; }
  .stations .terminus::before { top: -0.15rem; left: -0.2rem; }
}

/* ---------- Clients : stations de correspondance ---------- */
/* Station de correspondance : les lignes servies, réunies dans une capsule. */
.roundels { display: inline-flex; gap: 3px; flex: none; align-self: start; padding: 3px; border: 2.5px solid var(--ink); border-radius: 999px; background: var(--station); }
.roundels i { width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--l-off); }
.roundels i:not([class]) { display: none; }  /* seules les lignes servies */
.roundels i.on-ia { background: var(--l-ia); }
.roundels i.on-web { background: var(--l-web); }
.roundels i.on-py { background: var(--l-py); }
.roundels i.on-linux { background: var(--l-linux); }

.clients { list-style: none; margin: 2.25rem 0 0; padding: 0; display: grid; }
@media (min-width: 48rem) { .clients { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }
.clients li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem 1rem; align-items: start; padding: 1.3rem 0; border-top: 1px solid var(--rule); }
.clients .roundels { grid-row: span 2; padding-top: 0.2rem; flex-direction: column; }
.clients strong { display: block; font-weight: 800; font-size: 1.15rem; color: var(--ink-strong); }
.clients span { color: var(--muted); }

/* ---------- Page Services ---------- */
.service { display: grid; gap: 2rem 4rem; padding: var(--space) 0; border-top: 1px solid var(--rule); scroll-margin-top: 1rem; }
@media (min-width: 60rem) { .service { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.service-side { display: grid; gap: 2rem; align-content: start; }
.service-title h2 {
  display: inline-block; margin-bottom: 0.5rem;
  background: var(--bar); color: var(--on);
  padding: 0.35rem 1rem 0.2rem; border-radius: 999px;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem);
}
.service-title .years { margin: 0; }

/* Le parcours d'un service, dessiné comme une ligne : départ, station, terminus. */
.steps { margin: 0; max-width: var(--measure); position: relative; padding-left: 2.6rem; }
.steps::before {
  content: ""; position: absolute; left: 0.6rem; top: 0.7rem; bottom: 1.4rem;
  width: var(--line-w); margin-left: calc(var(--line-w) / -2); border-radius: 6px; background: var(--bar);
}
.steps dt { position: relative; font-weight: 800; font-size: 1.15rem; color: var(--ink-strong); margin: 0 0 0.3rem; }
.steps dt::before {
  content: ""; position: absolute; left: -2.6rem; top: 0.15rem;
  width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--station); border: 3.5px solid var(--ink);
}
.steps dt:last-of-type::before { width: 1.6rem; height: 1.6rem; left: -2.8rem; top: -0.05rem; border-width: 5px; background: var(--bar); }
.steps dd { margin: 0 0 1.75rem; }
.steps dd:last-of-type { margin-bottom: 0; font-weight: 600; }

.tags { list-style: none; margin: 1.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; font-size: 0.9rem; }
.tags li { border: 2px solid var(--ink); border-radius: 6px; padding: 0.15rem 0.6rem 0.05rem; font-weight: 700; }
.service .see { margin: 1.5rem 0 0; }

/* ---------- Réalisations ---------- */
.cases { list-style: none; margin: 0; padding: 0; }
.case { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 2.5rem; padding: 3rem 0; border-top: 1px solid var(--rule); }
.case:last-child { border-bottom: 1px solid var(--rule); }
.case > .roundels { margin-bottom: 1rem; justify-self: start; align-items: center; }
@media (min-width: 48rem) {
  .case { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .case > .roundels { flex-direction: column; margin: 0.4rem 0 0; }
  .case > .roundels i { width: 1.35rem; height: 1.35rem; }
}
.case h2 { margin-bottom: 0.25rem; }
.case .since { color: var(--muted); margin: 0 0 1rem; font-weight: 600; }
.case-body { max-width: var(--measure); }
.case-body .work { padding-left: 1.2rem; }
.case-body .work li { margin-bottom: 0.4rem; }
.case-fig { grid-column: 1 / -1; margin-top: 1.75rem; }
@media (min-width: 48rem) { .case-fig { grid-column: 2; } }
@media (min-width: 64rem) {
  .case { grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 24rem); }
  .case-fig { grid-column: 3; margin-top: 0; align-self: center; }
  #electro-experts .case-fig { grid-column: 2 / -1; margin-top: 2rem; }
}

.legend { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.88rem; }
.legend li { background: var(--bar); color: var(--on); font-weight: 700; border-radius: 999px; padding: 0.15rem 0.7rem 0.05rem; }

/* ---------- Contact ---------- */
.closing { background: var(--ground); }
.closing p { max-width: var(--measure); }
.closing-grid { display: grid; gap: 2rem 4rem; align-items: center; }
@media (min-width: 60rem) { .closing-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.closing-map { max-width: 21rem; width: 100%; justify-self: center; }
@media (max-width: 40rem) { .closing-map { display: none; } }
.hero + .section { padding-top: clamp(2.5rem, 5vw, 4rem); }
.contact-grid { display: grid; gap: 2.5rem 4rem; }
@media (min-width: 48rem) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-grid h2 { font-size: 1.35rem; margin-bottom: 0.5rem; }
.big-link { font-weight: 800; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); overflow-wrap: anywhere; }
address { font-style: normal; }
.mt { margin-top: 2rem; }


/* ---------- À propos et contact : bandes alternées ---------- */
.ap-head .wrap { display: grid; gap: 2rem 4rem; align-items: end; }
@media (min-width: 60rem) { .ap-head .wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.ap-head .lead { max-width: 34rem; }
.ap-reach { border-left: var(--line-w) solid var(--l-ia); padding-left: 1.5rem; }
.ap-reach p { margin: 0; color: var(--ink); }
.ap-reach .actions { margin-top: 1.25rem; }

.band { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.band-ground { background: var(--ground); }
.band-sign { background: var(--sign); color: var(--on-sign); }
.band-sign h2, .band-sign h3, .band-sign h4 { color: var(--on-sign); }
.band h2 { font-size: clamp(1.6rem, 1.25rem + 1.4vw, 2.3rem); margin: 0; }
.band-grid { display: grid; gap: 1.25rem 4rem; }
@media (min-width: 60rem) { .band-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.band-cols p, .band-text { margin: 0 0 1rem; max-width: var(--measure); }
@media (min-width: 72rem) {
  .band-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; }
  .band-cols p { margin: 0; }
}
#contact .band-grid { align-items: start; }
#contact h2 { margin-bottom: 0.75rem; }
#contact h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
#contact p { margin-top: 0; }
#contact .plaque { background: var(--paper); }

/* La frise : les six étapes sur une même ligne, comme les stations d'un parcours. */
.frieze-h { margin: clamp(2.5rem, 5vw, 3.5rem) 0 1.75rem; font-size: 1.2rem; }
.frieze { list-style: none; margin: 0; padding: 0; counter-reset: etape; display: grid; gap: 0; }
.frieze li { counter-increment: etape; position: relative; padding: 0 0 1.75rem 3rem; }
.frieze li::before {
  content: ""; position: absolute; left: 0.85rem; top: 0.4rem; bottom: -0.4rem;
  width: var(--line-w); margin-left: calc(var(--line-w) / -2); background: var(--l-ia);
}
.frieze li::after {
  content: counter(etape); position: absolute; left: 0; top: 0;
  width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--on-sign); color: var(--sign); border: 4px solid var(--l-ia);
  font-weight: 800; font-size: 0.85rem; line-height: 1;
}
.frieze h4 { margin: 0 0 0.3rem; font-size: 1.1rem; line-height: 1.3; }
.frieze p { margin: 0; font-size: 0.95rem; line-height: 1.5; }
.frieze-loop { margin: 0; padding-left: 3rem; font-weight: 700; }
@media (min-width: 60rem) {
  .frieze { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 1.5rem; }
  .frieze li { padding: 3rem 0 0; }
  .frieze li::before { left: 0; right: -1.5rem; top: 0.85rem; bottom: auto; height: var(--line-w); width: auto; margin: -6px 0 0; }
  .frieze li:last-child::before { right: 0; border-radius: 0 6px 6px 0; }
  .frieze li:first-child::before { border-radius: 6px 0 0 6px; }
  .frieze-loop { padding: 1.75rem 0 0; }
}

/* ---------- Plaque d'information (fiche de l'entreprise) ---------- */
.plaque { max-width: 44rem; border: 2px solid var(--ink); border-radius: 10px; overflow: hidden; }
.plaque h2 { margin: 0; padding: 0.85rem 1.25rem 0.7rem; background: var(--sign); color: var(--on-sign); font-size: 1.35rem; letter-spacing: 0; }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); margin: 0; }
.facts dt, .facts dd { padding: 0.7rem 1.25rem; border-top: 1px solid var(--rule); }
.facts dt:first-of-type, .facts dt:first-of-type + dd { border-top: 0; }
.facts dt { color: var(--muted); font-weight: 600; }
.facts dd { margin: 0; font-weight: 700; color: var(--ink-strong); }
@media (max-width: 30rem) {
  .facts { grid-template-columns: 1fr; }
  .facts dd { border-top: 0; padding-top: 0; }
}

/* ---------- Politique ---------- */
.policy { max-width: var(--measure); padding-bottom: var(--space); }
.policy h2 { font-size: 1.5rem; margin-top: 2.5rem; }
.policy ul { padding-left: 1.2rem; }

/* ---------- Pied de page : plaque de station ---------- */
.site-footer {
  --arc-web-foot: #c4d1e0;
  background: #1b2938; color: #e4ebf2;
  padding: 3rem 0 2.5rem;
}
.site-footer a { color: #b7d2f2; }
.site-footer .arc-web { stroke: var(--arc-web-foot); }
.cartouche { border: 2px solid #4a5d72; border-radius: 10px; display: grid; font-size: 0.95rem; line-height: 1.5; }
.cartouche > div { padding: 1rem 1.25rem; border-top: 1px solid #4a5d72; }
.cartouche > div:first-child { border-top: 0; }
.cartouche .label { display: block; color: #a6b4c4; font-size: 0.85em; font-weight: 600; margin-bottom: 0.2rem; }
.cartouche p { margin: 0; }
.cartouche .mark { display: flex; align-items: center; gap: 1rem; }
.cartouche .mark svg { width: 3rem; height: 3rem; flex: none; color: #ffffff; }
.cartouche .legal { font-weight: 800; color: #ffffff; }
.cartouche .meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; color: #a6b4c4; }
.cartouche .meta ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
@media (min-width: 48rem) {
  .cartouche { grid-template-columns: 1.1fr 1.2fr 1fr; }
  .cartouche > div { border-top: 0; border-left: 1px solid #4a5d72; }
  .cartouche > div:first-child { border-left: 0; }
  .cartouche > .meta { grid-column: 1 / -1; border-left: 0; border-top: 1px solid #4a5d72; }
}

/* ---------- Page 404 / choix de langue ---------- */
.center-page { min-height: 80vh; display: grid; place-content: center; gap: 1.5rem; padding: 3rem var(--gutter); }
.center-page .brand svg { height: 3rem; }
.lang-choice { display: flex; flex-wrap: wrap; gap: 1rem; }

@media print {
  .site-header .nav, .skip, .actions { display: none; }
  body { background: #fff; color: #000; }
  .site-footer { background: none; color: #000; }
}

/* ---------- Illustrations (SVG en ligne, couleurs par jetons) ---------- */
.fig { margin: 0; }
.fig figcaption { color: var(--muted); font-size: 0.88rem; margin-top: 0.75rem; }
.ill { width: 100%; height: auto; }
.service-side .fig { max-width: 26rem; }
.fig.wide { max-width: 48rem; }
.example .fig { margin-top: 2.5rem; }
.ill.narrow { display: none; }
@media (max-width: 40rem) {
  .ill.wide { display: none; }
  .ill.narrow { display: block; }
}

.ill text { font-family: var(--font); font-size: 13px; font-weight: 600; fill: var(--muted); }
.ill .strong { fill: var(--ink-strong); font-weight: 800; }
.ill .big { font-size: 16px; }
.ill .tiny { font-size: 12px; }
.ill .on { fill: var(--on-web); font-weight: 800; }
.ill .denied { text-decoration: line-through; }
.ill .box { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.ill .soft { fill: var(--ground); }
.ill .bar { fill: var(--l-off); }
.ill .ln { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ill .faint { stroke: var(--rule); }
.ill .dash { stroke-dasharray: 5 5; }
.ill .acc-ia { stroke: var(--l-ia); stroke-width: 4; }
.ill .acc-web { stroke: var(--l-web); stroke-width: 4; }
.ill .acc-py { stroke: var(--l-py); stroke-width: 4; }
.ill .acc-linux { stroke: var(--l-linux); stroke-width: 4; }
.ill .f-ia { fill: var(--l-ia); }
.ill .f-web { fill: var(--l-web); }
.ill .f-py { fill: var(--l-py); }
.ill .f-linux { fill: var(--l-linux); }
.ill .ok { stroke: var(--l-py); stroke-width: 2.75; }
.ill .no { stroke: var(--muted); stroke-width: 2; }
.ill .street { fill: none; stroke: var(--paper); stroke-width: 7; stroke-linecap: round; }
.ill .route { fill: none; stroke: var(--l-py); stroke-width: 6; stroke-linecap: round; }
.ill .pin-hole { fill: var(--station); }
.ill .stn { fill: var(--station); stroke: var(--ink); stroke-width: 4; }

/* ---------- Durées (À propos) : longueurs de ligne ---------- */
.w20 { width: 72%; }
.w10 { width: 36%; }
.w6 { width: 21.6%; }