/* NET WEB SERVICES – nws.fr
   Typographies : TeX Gyre Adventor (titres) et TeX Gyre Heros (texte), licence GUST (voir assets/fonts). */

@font-face { font-family: "Adventor"; src: url("../fonts/texgyreadventor-bold.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Adventor"; src: url("../fonts/texgyreadventor-regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Heros"; src: url("../fonts/texgyreheros-regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Heros"; src: url("../fonts/texgyreheros-bold.woff") format("woff"); font-weight: 700; font-display: swap; }

:root {
  --nuit: #0A1A4F;
  --lien: #1A3DFF;
  --azur: #7D96FF;
  --brume: #DDE5FF;
  --papier: #F6F8FF;
  --blanc: #FFFFFF;
  --doux: #3B4775;
  --doux-clair: #B9C5F2;

  --f-titre: "Adventor", "Century Gothic", "URW Gothic", sans-serif;
  --f-texte: "Heros", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-1998: "Times New Roman", Times, "Liberation Serif", serif;

  --t-xs: 0.875rem;
  --t-s: 1rem;
  --t-m: 1.125rem;
  --t-l: 1.3125rem;
  --t-xl: 1.5rem;
  --t-2xl: clamp(1.75rem, 1.2rem + 1.8vw, 2.25rem);
  --t-3xl: clamp(2.25rem, 1.4rem + 3vw, 3.375rem);
  --t-4xl: clamp(2.6rem, 1rem + 5.4vw, 6rem);

  --max: 1280px;
  --gut: clamp(16px, 4vw, 48px);
  --header-h: 72px;
  --ease: cubic-bezier(.7, 0, .2, 1);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  margin: 0;
  background: var(--papier);
  color: var(--nuit);
  font-family: var(--f-texte);
  font-size: var(--t-m);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--lien); }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure { margin: 0; }
::selection { background: var(--lien); color: var(--blanc); }
:focus-visible { outline: 3px solid var(--lien); outline-offset: 3px; border-radius: 2px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 2000; background: var(--nuit); color: var(--blanc); padding: 10px 16px; }
.skip:focus { left: 8px; }

/* ---------- Boutons et liens ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px;
  font-family: var(--f-titre); font-weight: 700; font-size: var(--t-s); letter-spacing: .01em;
  text-decoration: none; color: var(--blanc);
  background: var(--lien) linear-gradient(var(--nuit), var(--nuit)) no-repeat left / 0% 100%;
  border: 2px solid var(--lien); border-radius: 999px; cursor: pointer;
  transition: background-size .45s var(--ease), border-color .45s var(--ease), color .2s;
}
.btn:hover { background-size: 100% 100%; border-color: var(--nuit); }
.btn-small { min-height: 42px; padding: 0 18px; font-size: var(--t-xs); }
.btn-ghost { background: transparent linear-gradient(var(--lien), var(--lien)) no-repeat left / 0% 100%; color: var(--nuit); border-color: var(--nuit); }
.btn-ghost:hover { color: var(--blanc); border-color: var(--lien); }
.btn-light { background: var(--blanc) linear-gradient(var(--lien), var(--lien)) no-repeat left / 0% 100%; color: var(--nuit); border-color: var(--blanc); }
.btn-light:hover { color: var(--blanc); border-color: var(--lien); }

.link-btn { background: none; border: 0; padding: 0; cursor: pointer; color: var(--lien); text-decoration: underline; text-underline-offset: 3px; font-family: var(--f-texte); font-size: var(--t-xs); }
.link-btn:hover { text-decoration-thickness: 2px; }

/* Lien "hypertexte" : soulignement qui se dessine */
.link-strong {
  display: inline-block; font-family: var(--f-titre); font-weight: 700; color: var(--lien); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 100% 2px; padding-bottom: 3px;
  transition: background-size .35s var(--ease);
}
.link-strong:hover { background-size: 0% 2px; background-position: right bottom; }

/* ---------- En-tête ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h);
  display: flex; align-items: center;
  transition: background-color .3s, box-shadow .3s, transform .4s var(--ease);
}
.site-header.is-scrolled { background: rgba(246, 248, 255, .96); box-shadow: 0 1px 0 var(--brume); }
.header-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--nuit); }
.logo-svg { height: 30px; width: auto; overflow: visible; }
.logo-txt { font-family: var(--f-titre); font-size: var(--t-xs); letter-spacing: .02em; color: var(--doux); padding-top: 2px; }
.lg-n, .lg-s { fill: var(--nuit); }
.lg-w, .lg-u { fill: var(--lien); }
.lg-u { transform-box: fill-box; transform-origin: left center; transition: transform .5s var(--ease); }
.logo:hover .lg-u, .logo:focus-visible .lg-u { transform: translateX(-70.59%) scaleX(2.2772); }

.nav-list { display: flex; align-items: center; gap: 28px; }
.nav-list a:not(.btn) {
  font-family: var(--f-titre); font-size: var(--t-xs); font-weight: 700; color: var(--nuit); text-decoration: none;
  background: linear-gradient(var(--lien), var(--lien)) no-repeat left bottom / 0% 2px; padding: 4px 0;
  transition: background-size .35s var(--ease), color .2s;
}
.nav-list a:not(.btn):hover, .nav-list a.is-current { background-size: 100% 2px; color: var(--lien); }
.nav-toggle { display: none; }

/* ---------- Héros ---------- */
.hero { padding: calc(var(--header-h) + clamp(40px, 8vh, 96px)) 0 clamp(64px, 10vh, 120px); }
.hero-grid { --h1: clamp(2.5rem, 6.7vw, 5.6rem); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: clamp(28px, 3.5vw, 48px); }
.hero-title { grid-column: 1 / -1; grid-row: 1; font-family: var(--f-titre); font-weight: 700; font-size: var(--h1); line-height: 1; letter-spacing: -.035em; color: var(--nuit); }
.line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.line-in { display: block; }
.hero-sub { grid-column: 1 / 7; grid-row: 2; align-self: start; }
.hero-lead { max-width: 34em; font-size: var(--t-l); line-height: 1.5; color: var(--doux); }
.hero-actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 14px; }

/* Fenêtre rétro */
.hero-retro { position: relative; grid-column: 8 / -1; grid-row: 1 / span 2; align-self: start; margin-top: calc(var(--h1) * 1.12); }
.retro-window {
  background: #C0C0C0; padding: 3px;
  box-shadow: inset -1px -1px 0 #0A0A0A, inset 1px 1px 0 #FFFFFF, inset -2px -2px 0 #808080, inset 2px 2px 0 #DFDFDF, 18px 18px 0 var(--brume);
  transition: box-shadow .4s;
}
.retro-titlebar {
  display: flex; align-items: center; justify-content: space-between; height: 24px; padding: 0 4px 0 8px;
  background: linear-gradient(90deg, #000080, #1084D0); color: #FFFFFF;
  font-family: Tahoma, "Liberation Sans", Arial, sans-serif; font-size: 12px; font-weight: 700;
}
.retro-btns { display: flex; gap: 2px; }
.retro-btns i { width: 16px; height: 14px; background: #C0C0C0; box-shadow: inset -1px -1px 0 #0A0A0A, inset 1px 1px 0 #FFFFFF; }
.retro-viewport { position: relative; aspect-ratio: 4 / 3; margin-top: 3px; overflow: hidden; background: #C0C0C0; box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #FFFFFF; }
.retro-screen { position: absolute; left: 0; top: 0; width: 800px; height: 600px; transform-origin: 0 0; transform: scale(var(--s, .5)); }
.retro-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 30px; font-size: var(--t-xs); color: var(--doux); }

/* La page de 1998 (volontairement d'époque) */
.r98 { width: 800px; height: 600px; background: #C0C0C0; color: #000; font-family: var(--f-1998); font-size: 16px; line-height: 1.25; text-align: center; padding: 18px 40px 0; position: relative; overflow: hidden; }
.r98-marquee { overflow: hidden; white-space: nowrap; background: #000080; color: #FFFF00; font-family: "Courier New", Courier, monospace; font-weight: 700; font-size: 15px; padding: 3px 0; margin: 0 -40px 14px; }
.r98-marquee span { display: inline-block; padding-left: 100%; animation: r98-defile 16s linear infinite; }
@keyframes r98-defile { to { transform: translateX(-100%); } }
.r98-h1 { font-size: 34px; font-weight: 700; line-height: 1.15; margin: 6px 0 10px; color: #000080; font-family: var(--f-1998); letter-spacing: 0; }
.r98-hr { border: 0; border-top: 2px solid #808080; border-bottom: 2px solid #FFFFFF; margin: 10px 0 14px; }
.r98-nav { margin: 0 auto 16px; border: 2px outset #DFDFDF; border-collapse: separate; border-spacing: 2px; }
.r98-nav td { border: 1px inset #DFDFDF; padding: 4px 12px; color: #0000EE; font-size: 17px; }
.r98-nav u.vis { color: #551A8B; }
.r98-p { font-size: 18px; margin: 0 20px 16px; }
.r98-construction { margin: 0 auto 16px; width: 380px; padding: 6px; font-family: Arial, sans-serif; font-weight: 900; font-size: 18px; color: #000; text-transform: uppercase; background: repeating-linear-gradient(-45deg, #FFD800 0 18px, #111 18px 36px); }
.r98-construction { text-shadow: 0 0 6px #FFD800, 0 0 2px #FFD800; }
.r98-counter { font-size: 17px; margin-bottom: 12px; }
.r98-digits { display: inline-block; background: #000; color: #00FF00; font-family: "Courier New", Courier, monospace; font-weight: 700; padding: 1px 6px; letter-spacing: 2px; }
.r98-small { font-size: 13px; color: #333; }
.r98-small u { color: #0000EE; }
.r98-status { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; display: flex; align-items: center; gap: 12px; padding: 0 10px; background: #C0C0C0; border-top: 2px solid #FFFFFF; font-family: Tahoma, "Liberation Sans", Arial, sans-serif; font-size: 12px; text-align: left; }
.r98-status-txt { flex: 1; }
.r98-bar { width: 160px; height: 14px; box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #FFFFFF; padding: 2px; }
.r98-bar span { display: block; height: 100%; width: 100%; background: repeating-linear-gradient(90deg, #000080 0 8px, transparent 8px 10px); }

/* ---------- Intro (jouée une fois par session) ---------- */
.intro-backdrop { display: none; }
.retro-titlebar { transition: opacity .6s; }
.retro-window, .retro-viewport { transition: box-shadow .6s, background-color .6s; }
html.intro { overflow: hidden; }
html.intro .intro-backdrop { display: block; position: fixed; inset: 0; z-index: 900; background: #C0C0C0; }
html.intro .retro-window, html.intro .retro-viewport { background-color: transparent; box-shadow: none; }
html.intro .retro-viewport { overflow: visible; }
html.intro .retro-titlebar { opacity: 0; }
html.intro .retro-screen { z-index: 1000; }
html.intro-screen .retro-screen { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(var(--fit, 1)); transform-origin: 50% 50%; }
html.intro .r98-bar span { width: 0; animation: r98-charge 1.3s steps(14) .25s forwards; }
@keyframes r98-charge { to { width: 100%; } }
html.intro .line-in { transform: translateY(105%); }
html.intro .reveal-late, html.intro .retro-caption { opacity: 0; }
html.intro .site-header { transform: translateY(-100%); }

/* ---------- Titres de section ---------- */
section { position: relative; }
.section-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(32px, 5vw, 80px); align-items: end; margin-bottom: clamp(40px, 6vw, 72px); }
.h2 { font-family: var(--f-titre); font-weight: 700; font-size: var(--t-3xl); line-height: 1.05; letter-spacing: -.03em; max-width: 14em; }
.h2.draw { display: inline; background: linear-gradient(var(--lien), var(--lien)) no-repeat left 100% / 0% .09em; padding-bottom: .06em; transition: background-size 1.1s var(--ease); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.h2.draw.is-in { background-size: 100% .09em; }
.h2-light { color: var(--blanc); }
.h2-light.draw { background-image: linear-gradient(var(--azur), var(--azur)); }
.section-intro { color: var(--doux); max-width: 32em; }

/* ---------- Services ---------- */
.services { padding: clamp(80px, 12vw, 160px) 0; }
.svc-list { border-top: 2px solid var(--nuit); }
.svc { border-bottom: 1px solid var(--doux-clair); }
.svc-h { margin: 0; font-size: inherit; font-weight: inherit; }
.svc-btn {
  width: 100%; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) 40px; align-items: center; gap: 24px;
  padding: clamp(20px, 2.6vw, 34px) 12px; text-align: left; border: 0; cursor: pointer; color: var(--nuit);
  background: linear-gradient(var(--lien), var(--lien)) no-repeat left / 0% 100%;
  transition: background-size .5s var(--ease), color .25s;
}
.svc-name { font-family: var(--f-titre); font-weight: 700; font-size: var(--t-2xl); line-height: 1.1; letter-spacing: -.02em; transition: transform .5s var(--ease); }
.svc-sum { color: var(--doux); font-size: var(--t-m); transition: color .25s; }
.svc-plus { position: relative; width: 26px; height: 26px; justify-self: end; }
.svc-plus::before, .svc-plus::after { content: ""; position: absolute; left: 0; top: 12px; width: 26px; height: 2px; background: currentColor; transition: transform .4s var(--ease); }
.svc-plus::after { transform: rotate(90deg); }
.svc-btn:hover, .svc-btn:focus-visible, .svc.is-open .svc-btn { background-size: 100% 100%; color: var(--blanc); }
.svc-btn:hover .svc-sum, .svc-btn:focus-visible .svc-sum, .svc.is-open .svc-sum { color: var(--brume); }
.svc-btn:hover .svc-name, .svc.is-open .svc-name { transform: translateX(12px); }
.svc-btn:focus-visible { outline-offset: -3px; outline-color: var(--blanc); }
.svc.is-open .svc-plus::after { transform: rotate(0deg); }
.svc-panel { overflow: hidden; }
.svc-panel-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) 40px; gap: 24px; padding: 28px 12px 36px; }
.svc-points { grid-column: 2; }
.svc-points li { position: relative; padding: 6px 0 6px 22px; }
.svc-points li::before { content: ""; position: absolute; left: 0; top: .95em; width: 10px; height: 2px; background: var(--lien); }
.svc-panel .link-strong { grid-column: 2; justify-self: start; margin-top: 8px; }

/* ---------- Frise ---------- */
.frise { background: var(--nuit); color: var(--blanc); }
.frise-sticky { padding: clamp(80px, 10vw, 140px) 0 clamp(60px, 8vw, 110px); overflow: hidden; }
.frise-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: clamp(40px, 6vw, 80px); }
.frise-hint { display: none; font-size: var(--t-xs); color: var(--azur); white-space: nowrap; }
.frise-track { position: relative; display: flex; gap: clamp(24px, 4vw, 64px); padding: 0 var(--gut); max-width: var(--max); margin: 0 auto; flex-wrap: wrap; row-gap: 56px; }
.era { flex: 1 1 280px; max-width: 420px; }
.era-year {
  font-family: var(--f-titre); font-weight: 700; font-size: clamp(4rem, 2rem + 9vw, 10rem); line-height: .9; letter-spacing: -.05em;
  color: var(--blanc); -webkit-text-stroke: 2px var(--azur); transition: color .6s var(--ease);
}
.era-h { font-family: var(--f-titre); font-weight: 700; font-size: var(--t-xl); margin: 22px 0 10px; }
.era-p { color: var(--doux-clair); max-width: 22em; }
.frise-progress { display: none; }

/* Version épinglée (grand écran, animations autorisées) */
html.js .frise.is-pinned { height: var(--frise-h, 400vh); }
html.js .frise.is-pinned .frise-sticky { position: sticky; top: 0; height: 100vh; min-height: 560px; display: flex; flex-direction: column; justify-content: center; padding: var(--header-h) 0 40px; }
html.js .frise.is-pinned .frise-hint { display: block; }
html.js .frise.is-pinned .frise-track { flex-wrap: nowrap; max-width: none; margin: 0; padding: 0 calc(max(var(--gut), (100vw - var(--max)) / 2 + var(--gut))); will-change: transform; }
html.js .frise.is-pinned .era { flex: 0 0 min(440px, 70vw); max-width: none; }
html.js .frise.is-pinned .era-year { color: transparent; }
html.js .frise.is-pinned .era.is-active .era-year { color: var(--blanc); }
html.js .frise.is-pinned .frise-progress { display: block; height: 2px; background: rgba(125, 150, 255, .25); margin-top: clamp(32px, 5vh, 56px); }
.frise-progress span { display: block; height: 100%; width: 100%; background: var(--azur); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* ---------- Méthode ---------- */
.methode { background: var(--brume); padding: clamp(80px, 12vw, 160px) 0; }
.steps-wrap { --g: clamp(20px, 2.5vw, 40px); position: relative; }
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--g); position: relative; z-index: 1; }
.step-n {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  font-family: var(--f-titre); font-weight: 700; font-size: var(--t-xl);
  background: var(--papier); color: var(--nuit); border: 2px solid var(--nuit);
  transition: background-color .4s, color .4s, border-color .4s;
}
.step.is-on .step-n { background: var(--lien); color: var(--blanc); border-color: var(--lien); }
.step-h { font-family: var(--f-titre); font-weight: 700; font-size: var(--t-l); margin: 22px 0 8px; }
.step p { color: var(--doux); font-size: var(--t-s); }
.steps-line { position: absolute; z-index: 0; top: 27px; left: 28px; right: calc((100% - 4 * var(--g)) / 5 - 28px); height: 2px; background: var(--doux-clair); }
.steps-line span { display: block; height: 100%; background: var(--lien); transform-origin: left; transform: scaleX(var(--p, 1)); }

/* ---------- Promesse ---------- */
.promesse { background: var(--lien); color: var(--blanc); padding: clamp(80px, 11vw, 150px) 0; }
.promesse-in { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 32px clamp(32px, 5vw, 80px); align-items: end; }
.promesse-h { font-family: var(--f-titre); font-weight: 700; font-size: var(--t-3xl); line-height: 1.08; letter-spacing: -.03em; max-width: 15em; }
.promesse-p { color: var(--brume); }

/* ---------- Réalisations ---------- */
.realisations { padding: clamp(80px, 12vw, 160px) 0; }
.real-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 2.5vw, 40px); }
.real { border-top: 2px solid var(--nuit); }
.real-logo { display: flex; align-items: center; justify-content: center; height: 120px; margin-bottom: 22px; background: var(--blanc); }
.real-logo img { width: auto; height: auto; max-width: 72%; max-height: 60px; }
.real-logo img.is-wide { max-width: 62%; }
.real-logo img.is-tall { max-height: 84px; }
.real-kind { font-size: var(--t-xs); color: var(--doux); }
.real-h { font-family: var(--f-titre); font-weight: 700; font-size: var(--t-2xl); letter-spacing: -.02em; margin: 6px 0 12px; }
.real-p { color: var(--doux); }

/* ---------- Contact ---------- */
.contact { background: var(--nuit); color: var(--blanc); padding: clamp(80px, 12vw, 160px) 0; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); }
.contact-h { font-family: var(--f-titre); font-weight: 700; font-size: clamp(2.4rem, 1rem + 3.2vw, 4rem); line-height: 1.02; letter-spacing: -.035em; }
.contact-p { margin-top: 24px; color: var(--doux-clair); max-width: 26em; }
.contact-infos { margin-top: 40px; display: grid; gap: 14px; }
.contact-infos li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: baseline; }
.ci-k { font-size: var(--t-xs); color: var(--azur); }
.contact-infos a { color: var(--blanc); font-family: var(--f-titre); font-weight: 700; text-decoration: none; background: linear-gradient(var(--azur), var(--azur)) no-repeat left bottom / 100% 2px; padding-bottom: 2px; }
.contact-infos a:hover { background-size: 0% 2px; background-position: right bottom; }
.contact :focus-visible { outline-color: var(--azur); }

.form { display: grid; gap: 24px; }
.chips { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips legend { width: 100%; margin-bottom: 12px; font-size: var(--t-xs); color: var(--azur); }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-block; padding: 10px 16px; border: 2px solid rgba(125, 150, 255, .5); border-radius: 999px; font-family: var(--f-titre); font-weight: 700; font-size: var(--t-xs); cursor: pointer; transition: background-color .25s, border-color .25s, color .25s; }
.chip span:hover { border-color: var(--azur); }
.chip input:checked + span { background: var(--blanc); border-color: var(--blanc); color: var(--nuit); }
.chip input:focus-visible + span { outline: 3px solid var(--azur); outline-offset: 3px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.field { display: grid; gap: 6px; }
.field-full { grid-column: 1 / -1; }
.field span { font-size: var(--t-xs); color: var(--doux-clair); }
.field em { font-style: normal; color: var(--azur); }
.field input, .field textarea {
  width: 100%; font: inherit; color: var(--blanc); background: transparent;
  border: 0; border-bottom: 2px solid rgba(125, 150, 255, .45); border-radius: 0; padding: 10px 0;
  transition: border-color .25s;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--blanc); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-bottom-color: #FF8A8A; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-legal { font-size: var(--t-xs); color: var(--doux-clair); max-width: 40em; }
.form .btn-light { justify-self: start; }
.form-msg { min-height: 1.5em; font-family: var(--f-titre); font-weight: 700; }
.form-msg.is-ok { color: #9CFFC8; }
.form-msg.is-err { color: #FFB0B0; }

/* ---------- Pied de page ---------- */
.site-footer { background: var(--nuit); color: var(--doux-clair); border-top: 1px solid rgba(125, 150, 255, .25); padding: 40px 0; }
.footer-in { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; }
.logo-foot .logo-svg { height: 26px; }
.logo-foot .lg-n, .logo-foot .lg-s { fill: var(--blanc); }
.logo-foot .lg-w, .logo-foot .lg-u { fill: var(--azur); }
.footer-p { font-size: var(--t-xs); flex: 1; }
.footer-links { display: flex; flex-wrap: wrap; gap: 24px; font-size: var(--t-xs); }
.footer-links a { color: var(--blanc); text-decoration: none; }
.footer-links a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Tablette et mobile ---------- */
@media (max-width: 980px) {
  .section-head, .promesse-in, .contact-grid { grid-template-columns: 1fr; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-title, .hero-sub, .hero-retro { grid-column: 1; grid-row: auto; }
  .hero-retro { max-width: 520px; margin-top: 16px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .steps-line { display: none; }
  .real-list { grid-template-columns: 1fr 1fr; }
  .svc-btn, .svc-panel-in { grid-template-columns: minmax(0, 1fr) 32px; }
  .svc-sum { grid-column: 1; grid-row: 2; }
  .svc-plus { grid-column: 2; grid-row: 1 / span 2; }
  .svc-points, .svc-panel .link-strong { grid-column: 1; }
}
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer; padding: 8px 0; font-family: var(--f-titre); font-weight: 700; font-size: var(--t-xs); color: var(--nuit); position: relative; z-index: 2; }
  .nav-toggle-bars { position: relative; width: 22px; height: 2px; background: currentColor; transition: background-color .2s; }
  .nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor; transition: transform .35s var(--ease); }
  .nav-toggle-bars::before { top: -7px; }
  .nav-toggle-bars::after { top: 7px; }
  .nav-toggle[aria-expanded="true"] { color: var(--blanc); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-7px) rotate(-45deg); }
  .nav-list {
    position: fixed; inset: 0; z-index: 1; flex-direction: column; align-items: flex-start; justify-content: center; gap: 18px;
    padding: var(--header-h) var(--gut) 40px; background: var(--nuit);
    clip-path: circle(0% at calc(100% - 40px) 36px); visibility: hidden;
    transition: clip-path .6s var(--ease), visibility 0s .6s;
  }
  .nav-list.is-open { clip-path: circle(150% at calc(100% - 40px) 36px); visibility: visible; transition: clip-path .6s var(--ease); }
  .nav-list a:not(.btn) { font-size: var(--t-2xl); color: var(--blanc); }
  .nav-list a:not(.btn):hover { color: var(--azur); }
  .nav-cta { margin-top: 16px; }
  .logo-txt { display: none; }
  .site-header.menu-open .lg-n, .site-header.menu-open .lg-s { fill: var(--blanc); }
}
@media (max-width: 600px) {
  body { font-size: var(--t-s); }
  .hero-lead { font-size: var(--t-m); }
  .steps { grid-template-columns: 1fr; }
  .fields { grid-template-columns: 1fr; }
  .contact-infos li { grid-template-columns: 1fr; gap: 2px; }
  .retro-caption { margin-top: 26px; }
  .retro-window { box-shadow: inset -1px -1px 0 #0A0A0A, inset 1px 1px 0 #FFFFFF, inset -2px -2px 0 #808080, inset 2px 2px 0 #DFDFDF, 10px 10px 0 var(--brume); }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .r98-marquee span { padding-left: 0; }
}

/* =====================================================================
   Pages services
   ===================================================================== */
.crumbs { font-size: var(--t-xs); color: var(--doux); margin-bottom: clamp(20px, 3vw, 36px); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs li + li::before { content: "›"; margin-right: 8px; color: var(--doux-clair); }
.crumbs a { color: var(--doux); text-decoration: none; background: linear-gradient(var(--lien), var(--lien)) no-repeat left bottom / 0% 1px; transition: background-size .3s var(--ease), color .2s; }
.crumbs a:hover { color: var(--lien); background-size: 100% 1px; }
.crumbs [aria-current] { color: var(--nuit); }

.hero--service { padding-top: calc(var(--header-h) + clamp(28px, 5vh, 64px)); }
.hero--service .hero-sub { grid-column: 1 / 7; grid-row: 2; }
.hero--service .hero-visual { grid-column: 7 / -1; grid-row: 2; align-self: start; }
.hero-lead + .hero-actions { margin-top: 32px; }

/* Comparateur 1998 / aujourd'hui */
.compare { --pos: 50%; position: relative; aspect-ratio: 8 / 5; overflow: hidden; background: #C0C0C0; box-shadow: 18px 18px 0 var(--brume); user-select: none; touch-action: pan-y; }
.cmp-stage { position: absolute; left: 0; top: 0; width: 960px; height: 600px; transform-origin: 0 0; transform: scale(var(--cs, .5)); }
.cmp-new { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.cmp-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: var(--lien); pointer-events: none; }
.cmp-handle::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: var(--lien) no-repeat center / 24px 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E");
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .9);
}
.cmp-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.cmp-range:focus-visible + .cmp-handle::after { box-shadow: 0 0 0 4px var(--blanc), 0 0 0 7px var(--lien); }
.cmp-tag { position: absolute; bottom: 12px; padding: 4px 10px; font-family: var(--f-titre); font-weight: 700; font-size: 13px; pointer-events: none; }
.cmp-tag-old { left: 12px; background: #000080; color: #FFFF00; font-family: "Courier New", Courier, monospace; }
.cmp-tag-new { right: 12px; background: var(--nuit); color: var(--blanc); border-radius: 999px; }
.cmp-caption { margin-top: 30px; font-size: var(--t-xs); color: var(--doux); }

/* Mini-site de 1998 */
.m98 { position: absolute; inset: 0; background: #C0C0C0; color: #000; font-family: var(--f-1998); text-align: center; padding: 64px 70px 0; font-size: 19px; line-height: 1.25; }
.m98-h { font-size: 42px; font-weight: 700; color: #800000; line-height: 1.1; margin-bottom: 8px; }
.m98-new { display: inline-block; background: #FF0000; color: #FFFF00; font-family: Arial, sans-serif; font-weight: 900; font-size: 15px; padding: 2px 8px; transform: rotate(-8deg); animation: m98-clignote 1s steps(1) infinite; }
@keyframes m98-clignote { 50% { visibility: hidden; } }
.m98 table { margin: 18px auto; border: 3px outset #DFDFDF; border-collapse: separate; border-spacing: 4px; }
.m98 td { border: 2px inset #DFDFDF; padding: 10px 16px; width: 200px; vertical-align: top; font-size: 17px; text-align: left; }
.m98 u { color: #0000EE; }
.m98-img { display: block; width: 100%; height: 70px; margin-bottom: 8px; background: #008080; color: #FFF; font-family: Arial, sans-serif; font-size: 12px; display: grid; place-items: center; }
.m98-foot { font-size: 14px; color: #333; margin-top: 10px; }

/* Mini-site d'aujourd'hui : mêmes emplacements que la version 1998, pour comparer élément par élément */
.mnow { position: absolute; inset: 0; background: #FFFFFF; color: #1B2A41; font-family: var(--f-texte); text-align: center; padding: 64px 70px 0; font-size: 18px; line-height: 1.4; }
.mnow-top { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 18px 36px; font-size: 14px; color: #5A6478; border-bottom: 1px solid #EEF0F4; }
.mnow-top b { font-family: var(--f-titre); font-size: 16px; color: #1B2A41; }
.mnow-top span span { margin-left: 22px; }
.mnow-h { font-family: var(--f-titre); font-weight: 700; font-size: 40px; line-height: 1.05; letter-spacing: -.03em; margin: 14px 0 6px; }
.mnow-sub { color: #5A6478; font-size: 18px; }
.mnow-cards { display: flex; justify-content: center; gap: 14px; margin: 22px auto 22px; }
.mnow-card { width: 228px; border-radius: 14px; overflow: hidden; background: #FFF; box-shadow: 0 10px 28px rgba(27, 42, 65, .14); text-align: left; }
.mnow-img { position: relative; height: 96px; overflow: hidden; }
.mnow-img-1 { background: #E9DCC8; }
.mnow-img-1::after { content: ""; position: absolute; left: 30px; right: 30px; bottom: 0; height: 74px; background: #A8743F; clip-path: polygon(0 100%, 0 75%, 25% 75%, 25% 50%, 50% 50%, 50% 25%, 75% 25%, 75% 0, 100% 0, 100% 100%); }
.mnow-img-2 { background: #DDE7E1; }
.mnow-img-2::before { content: ""; position: absolute; left: 34px; right: 34px; bottom: 0; height: 46px; background: #2F6B4F; border-radius: 6px 6px 0 0; }
.mnow-img-2::after { content: ""; position: absolute; left: 34px; right: 34px; top: 16px; height: 18px; background: #2F6B4F; opacity: .55; border-radius: 4px; }
.mnow-img-3 { background: #E4E8F2; }
.mnow-img-3::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 22px, #CFD6E6 22px 24px), repeating-linear-gradient(90deg, transparent 0 30px, #CFD6E6 30px 32px); }
.mnow-img-3::after { content: ""; position: absolute; left: 50%; top: 22px; width: 34px; height: 34px; margin-left: -17px; background: #2F6B4F; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: inset 0 0 0 10px #2F6B4F, inset 0 0 0 17px #FFF; }
.mnow-card-t { padding: 12px 16px 14px; font-family: var(--f-titre); font-weight: 700; font-size: 16px; }
.mnow-btn { display: inline-block; padding: 13px 26px; border-radius: 999px; background: #2F6B4F; color: #FFF; font-family: var(--f-titre); font-weight: 700; font-size: 16px; }
.mnow-foot { margin-top: 14px; font-size: 14px; color: #5A6478; }

/* Ce qui est compris */
.compris { padding: clamp(80px, 11vw, 150px) 0; }
.incl { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 5vw, 80px); border-top: 2px solid var(--nuit); }
.incl-item { padding: 26px 0 28px 26px; border-bottom: 1px solid var(--doux-clair); position: relative; }
.incl-item::before { content: ""; position: absolute; left: 0; top: 40px; width: 12px; height: 2px; background: var(--lien); }
.incl-h { font-family: var(--f-titre); font-weight: 700; font-size: var(--t-l); line-height: 1.25; margin-bottom: 6px; }
.incl-item p { color: var(--doux); }

/* Types de sites */
.types { background: var(--brume); padding: clamp(80px, 11vw, 150px) 0; }
.type-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.type { border-top: 2px solid var(--nuit); padding-top: 22px; }
.type-h { font-family: var(--f-titre); font-weight: 700; font-size: var(--t-xl); letter-spacing: -.01em; margin-bottom: 10px; }
.type p { color: var(--doux); font-size: var(--t-s); }
.type .link-strong { margin-top: 14px; font-size: var(--t-s); }

/* Technologies */
.techno { padding: clamp(80px, 11vw, 150px) 0; }
.tech-list { border-top: 2px solid var(--nuit); }
.tech { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px clamp(32px, 5vw, 80px); padding: 28px 0; border-bottom: 1px solid var(--doux-clair); align-items: baseline; }
.tech-h { font-family: var(--f-titre); font-weight: 700; font-size: var(--t-2xl); letter-spacing: -.02em; }
.tech p { color: var(--doux); }
.tech-note { margin-top: 28px; font-family: var(--f-titre); font-weight: 700; font-size: var(--t-l); color: var(--lien); }

/* Méthode (version page service) */
.methode--compact { padding: clamp(70px, 9vw, 120px) 0; }

/* FAQ */
.faq { padding: clamp(80px, 11vw, 150px) 0; }
.faq-list { border-top: 2px solid var(--nuit); max-width: 960px; }
.faq-item { border-bottom: 1px solid var(--doux-clair); }
.faq-q { margin: 0; font-size: inherit; font-weight: inherit; }
.faq-btn {
  width: 100%; display: grid; grid-template-columns: 1fr 32px; gap: 24px; align-items: center; text-align: left;
  padding: 24px 0; border: 0; background: none; cursor: pointer; color: var(--nuit);
  font-family: var(--f-titre); font-weight: 700; font-size: var(--t-l); line-height: 1.3;
}
.faq-btn > span:first-child { background: linear-gradient(var(--lien), var(--lien)) no-repeat left bottom / 0% 2px; padding-bottom: 2px; transition: background-size .4s var(--ease), color .2s; }
.faq-btn:hover > span:first-child, .faq-item.is-open .faq-btn > span:first-child { background-size: 100% 2px; color: var(--lien); }
.faq-item.is-open .svc-plus::after { transform: rotate(0deg); }
.faq-panel { overflow: hidden; }
.faq-a { padding: 0 56px 28px 0; color: var(--doux); max-width: 46em; }
.faq-a a { color: var(--lien); }

/* Autres services */
.others { padding: 0 0 clamp(80px, 11vw, 150px); }
.others-list { border-top: 2px solid var(--nuit); }
.others-list a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 22px 12px; text-decoration: none; color: var(--nuit);
  border-bottom: 1px solid var(--doux-clair);
  background: linear-gradient(var(--lien), var(--lien)) no-repeat left / 0% 100%; transition: background-size .5s var(--ease), color .25s;
}
.others-list a:hover, .others-list a:focus-visible { background-size: 100% 100%; color: var(--blanc); }
.others-name { font-family: var(--f-titre); font-weight: 700; font-size: var(--t-2xl); letter-spacing: -.02em; }
.others-sum { color: var(--doux); font-size: var(--t-s); text-align: right; transition: color .25s; }
.others-list a:hover .others-sum, .others-list a:focus-visible .others-sum { color: var(--brume); }

@media (max-width: 980px) {
  .hero--service .hero-sub, .hero--service .hero-visual { grid-column: 1; grid-row: auto; }
  .hero--service .hero-visual { max-width: 620px; }
  .incl { grid-template-columns: 1fr; }
  .type-list { grid-template-columns: 1fr 1fr; }
  .tech { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 600px) {
  .type-list { grid-template-columns: 1fr; }
  .compare { box-shadow: 10px 10px 0 var(--brume); }
  .others-list a { flex-direction: column; gap: 4px; }
  .others-sum { text-align: left; }
  .faq-a { padding-right: 0; }
}
.contact + .others { padding-top: clamp(80px, 11vw, 150px); }
.svc-links { grid-column: 2; display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 8px; }
.svc-links .link-strong { margin-top: 0; }
@media (max-width: 980px) { .svc-links { grid-column: 1; } }

/* ---------- Scènes des comparateurs (pages services) ---------- */
/* 1998 */
.m98-hidden { color: #B6B6B6; font-size: 13px; line-height: 1.2; margin: 2px 40px 6px; }
.m98-input { display: inline-block; width: 150px; height: 22px; vertical-align: middle; background: #FFF; border: 2px inset #DFDFDF; }
.m98-btn { display: inline-block; padding: 1px 10px; vertical-align: middle; background: #C0C0C0; border: 2px outset #DFDFDF; font-family: Arial, sans-serif; font-size: 14px; }
.m98 td i { color: #333; }

/* Aujourd'hui : éléments communs */
.mnow-price { float: right; color: #2F6B4F; }
.mnow-btn-ghost { background: transparent; color: #2F6B4F; box-shadow: inset 0 0 0 2px #2F6B4F; }

/* E-commerce : pots de confiture */
.mnow-jar { background: #F6EFE6; }
.mnow-jar::before { content: ""; position: absolute; left: 50%; bottom: 10px; width: 52px; height: 58px; margin-left: -26px; border-radius: 10px 10px 14px 14px; background: var(--jam); }
.mnow-jar::after { content: ""; position: absolute; left: 50%; bottom: 66px; width: 44px; height: 12px; margin-left: -22px; border-radius: 4px; background: #C9A66B; }
.mnow-jar-3::before { box-shadow: -62px 0 0 #E8973A, 62px 0 0 #C8374B; }
.mnow-jar-3::after { box-shadow: -62px 0 0 #C9A66B, 62px 0 0 #C9A66B; }

/* Référencement : page de résultats générique */
.mnow-search { display: flex; align-items: center; gap: 12px; max-width: 620px; margin: 0 auto 22px; padding: 13px 22px; border-radius: 999px; background: #FFF; box-shadow: 0 2px 12px rgba(27, 42, 65, .16); text-align: left; font-size: 18px; color: #1B2A41; }
.mnow-search::before { content: ""; flex: none; width: 13px; height: 13px; border: 2px solid #5A6478; border-radius: 50%; }
.mnow-serp { display: grid; grid-template-columns: 1.55fr 1fr; gap: 22px; text-align: left; }
.mnow-result { padding: 14px 18px; margin-bottom: 10px; border-radius: 12px; }
.mnow-result.is-top { background: #F1F7F3; box-shadow: inset 3px 0 0 #2F6B4F; }
.mnow-url { font-size: 13px; color: #2F6B4F; }
.mnow-rt { font-family: var(--f-titre); font-weight: 700; font-size: 19px; line-height: 1.2; color: #1B3A8A; margin: 2px 0 4px; }
.mnow-stars { color: #D99A00; font-size: 15px; }
.mnow-stars span { color: #5A6478; font-size: 13px; }
.mnow-desc { font-size: 14px; color: #5A6478; line-height: 1.35; margin-top: 4px; }
.mnow-line { display: block; height: 9px; margin: 7px 0; border-radius: 5px; background: #E6E9EF; }
.mnow-map { border-radius: 14px; overflow: hidden; background: #FFF; box-shadow: 0 10px 28px rgba(27, 42, 65, .14); }
.mnow-map-img { position: relative; height: 150px; background: #E4E8F2; }
.mnow-map-img::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 26px, #CFD6E6 26px 28px), repeating-linear-gradient(90deg, transparent 0 34px, #CFD6E6 34px 36px); }
.mnow-map-img::after { content: ""; position: absolute; left: 50%; top: 46px; width: 36px; height: 36px; margin-left: -18px; background: #2F6B4F; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: inset 0 0 0 11px #2F6B4F, inset 0 0 0 18px #FFF; }
.mnow-map .mnow-card-t { padding-bottom: 2px; }
.mnow-map-p { padding: 0 16px 16px; font-size: 14px; color: #5A6478; }

/* IA : conversation */
.mnow-chat { display: grid; gap: 12px; max-width: 640px; margin: 4px auto 0; text-align: left; }
.mnow-msg { max-width: 80%; padding: 12px 16px; border-radius: 18px; font-size: 17px; line-height: 1.35; }
.mnow-msg.is-user { justify-self: end; background: #2F6B4F; color: #FFF; border-bottom-right-radius: 6px; }
.mnow-msg.is-bot { justify-self: start; background: #F1F3F6; color: #1B2A41; border-bottom-left-radius: 6px; }
.mnow-src { display: table; margin-top: 8px; padding: 3px 10px; border-radius: 999px; background: #FFF; box-shadow: inset 0 0 0 1px #D7DCE4; font-size: 12px; color: #5A6478; }
.mnow-actions { display: flex; gap: 10px; }
.mnow-chat + .mnow-foot { margin-top: 18px; }

/* Automatisations : enchaînement */
.mnow-flow { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 24px auto 24px; }
.mnow-step { width: 228px; padding: 16px 16px 14px; border-radius: 14px; background: #FFF; box-shadow: 0 10px 28px rgba(27, 42, 65, .14); text-align: left; }
.mnow-step .mnow-card-t { padding: 10px 0 2px; }
.mnow-check { position: relative; display: block; width: 26px; height: 26px; border-radius: 50%; background: #2F6B4F; }
.mnow-check::after { content: ""; position: absolute; left: 9px; top: 5px; width: 6px; height: 11px; border: solid #FFF; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.mnow-time { font-size: 13px; color: #5A6478; }
.mnow-arrow { position: relative; flex: none; width: 22px; height: 2px; background: #B9C3D1; }
.mnow-arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border: solid #B9C3D1; border-width: 0 2px 2px 0; width: 8px; height: 8px; transform: rotate(-45deg); }

/* Sur mesure : portail client */
.mnow-portal { display: grid; grid-template-columns: repeat(3, 228px); justify-content: center; gap: 14px; margin: 22px auto; text-align: left; }
.mnow-tile { padding: 16px; border-radius: 14px; background: #FFF; box-shadow: 0 10px 28px rgba(27, 42, 65, .14); }
.mnow-tile-k { font-size: 13px; color: #5A6478; }
.mnow-tile-v { font-family: var(--f-titre); font-weight: 700; font-size: 19px; margin: 4px 0 2px; }
.mnow-bar { display: block; height: 8px; margin-top: 12px; border-radius: 4px; background: #E6E9EF; overflow: hidden; }
.mnow-bar span { display: block; height: 100%; background: #2F6B4F; border-radius: 4px; }

/* Hébergement : état des services */
.mnow-dot { display: inline-block; width: 14px; height: 14px; margin-right: 12px; vertical-align: middle; border-radius: 50%; background: #2F9E61; box-shadow: 0 0 0 5px rgba(47, 158, 97, .18); }
.mnow-status { max-width: 640px; margin: 20px auto 0; border-radius: 14px; background: #FFF; box-shadow: 0 10px 28px rgba(27, 42, 65, .14); overflow: hidden; text-align: left; }
.mnow-row { display: flex; justify-content: space-between; gap: 20px; padding: 12px 22px; font-size: 16px; }
.mnow-row + .mnow-row { border-top: 1px solid #EEF0F4; }
.mnow-ok { font-family: var(--f-titre); font-weight: 700; color: #2F6B4F; }
.mnow-ok::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; vertical-align: middle; border-radius: 50%; background: #2F9E61; }

/* Lien de page courante dans le menu */
.nav-list a[aria-current]:not(.btn) { background-size: 100% 2px; color: var(--lien); }
@media (max-width: 860px) {
  .nav-list a[aria-current]:not(.btn), .nav-list a.is-current:not(.btn) { color: var(--azur); }
}

/* Scènes centrées verticalement dans le comparateur */
.m98 { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 70px 30px; }
.mnow { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 76px 70px 30px; }
.mnow-search, .mnow-serp, .mnow-chat, .mnow-status { width: 100%; }
.mnow-map { align-self: start; }
.m98-hidden { color: #A8A8A8; font-size: 14px; }
@media (max-width: 600px) {
  .cmp-tag { bottom: 8px; padding: 2px 8px; font-size: 11px; }
  .cmp-tag-old { left: 8px; }
  .cmp-tag-new { right: 8px; }
  .cmp-handle::after { width: 38px; height: 38px; margin: -19px 0 0 -19px; background-size: 20px 20px; }
}

/* ---------- Pages légales ---------- */
.legal { padding: calc(var(--header-h) + clamp(28px, 5vh, 64px)) 0 clamp(80px, 10vw, 140px); }
.legal-title { font-family: var(--f-titre); font-weight: 700; font-size: var(--t-3xl); line-height: 1.05; letter-spacing: -.03em; }
.legal-body { max-width: 46em; margin-top: clamp(28px, 4vw, 48px); border-top: 2px solid var(--nuit); }
.legal-body h2 { font-family: var(--f-titre); font-weight: 700; font-size: var(--t-xl); letter-spacing: -.01em; margin: 40px 0 12px; }
.legal-body p { color: var(--doux); margin-bottom: 12px; }
.legal-body strong { color: var(--nuit); }
.legal-body a { color: var(--lien); text-underline-offset: 3px; }
.legal-lead { margin-top: 28px; font-size: var(--t-l); color: var(--nuit) !important; }
.legal-date { margin-top: 40px; font-size: var(--t-xs); }

/* ---------- Intro sur mobile et tablette portrait : la page de 1998 en plein écran, lisible ---------- */
@media (max-width: 980px) {
  html.intro-screen .retro-screen { left: 0; top: 0; width: 100%; height: 100%; transform: none; transform-origin: 50% 50%; }
  html.intro-screen .r98 { width: 100%; height: 100%; padding: 36px 18px 40px; font-size: 16px; }
  html.intro-screen .r98-marquee { margin: 0 -18px 22px; font-size: 14px; }
  html.intro-screen .r98-h1 { font-size: clamp(24px, 7.4vw, 34px); }
  html.intro-screen .r98-nav { border-spacing: 3px; }
  html.intro-screen .r98-nav tr { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; }
  html.intro-screen .r98-nav td { display: block; padding: 4px 9px; font-size: 15px; }
  html.intro-screen .r98-p { font-size: 17px; margin: 0 0 18px; }
  html.intro-screen .r98-construction { width: auto; max-width: 340px; font-size: 16px; }
  html.intro-screen .r98-counter { font-size: 16px; }
  html.intro-screen .r98-small { font-size: 12px; }
  html.intro-screen .r98-bar { width: 96px; }
}

@media (max-width: 600px) { .real-list { grid-template-columns: 1fr; } }

/* =====================================================================
   Pages de contenu : agence locale, à propos, réalisations, ressources
   ===================================================================== */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Apparition au défilement */
html.js .rise { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: calc(var(--d, 0) * 90ms); }
html.js .rise.is-in { opacity: 1; transform: none; }

/* En-tête de page */
.hero--page { padding: calc(var(--header-h) + clamp(28px, 5vh, 64px)) 0 clamp(56px, 8vw, 110px); }
.page-eyebrow { font-family: var(--f-titre); font-weight: 700; font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--lien); margin-bottom: 14px; }
.page-title { font-family: var(--f-titre); font-weight: 700; font-size: clamp(2.5rem, 1.2rem + 4.6vw, 5rem); line-height: 1.02; letter-spacing: -.035em; max-width: 15em; }
.page-lead { margin-top: clamp(20px, 3vw, 32px); max-width: 38em; font-size: var(--t-l); line-height: 1.5; color: var(--doux); }
.hero--page .hero-actions { margin-top: 32px; }
.art-meta { margin-top: 22px; font-size: var(--t-xs); color: var(--doux); }

/* Listes de liens et sections */
.others--top { padding-top: clamp(80px, 11vw, 150px); }
.types--3 .type-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.types--white { background: transparent; }

/* Fiche "définition" (adresse, identité, faits) */
.zone-dl { margin-top: 36px; border-top: 2px solid var(--nuit); }
.zone-dl > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--doux-clair); }
.zone-dl dt { font-size: var(--t-xs); color: var(--doux); padding-top: 3px; }
.zone-dl dd { margin: 0; }
.zone-dl a { color: var(--lien); text-underline-offset: 3px; }
.zone-g { margin-top: 28px; }

/* Agence locale */
.zone-where { padding: clamp(40px, 5vw, 70px) 0 clamp(80px, 11vw, 150px); }
.zone-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.zone-card { background: var(--blanc); box-shadow: 18px 18px 0 var(--brume); }
.zone-plan { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #E9EDF8; }
.zone-plan::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 34px, #D6DDEE 34px 36px), repeating-linear-gradient(90deg, transparent 0 46px, #D6DDEE 46px 48px); }
.zone-plan::after { content: ""; position: absolute; inset: -20%; background: linear-gradient(64deg, transparent 49%, #FFFFFF 49% 51.5%, transparent 51.5%), linear-gradient(-18deg, transparent 57%, #FFFFFF 57% 59%, transparent 59%), linear-gradient(28deg, transparent 33%, rgba(125, 150, 255, .45) 33% 34%, transparent 34%); }
.zone-pulse { position: absolute; z-index: 1; left: 52%; top: 46%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: rgba(26, 61, 255, .35); animation: zone-pulse 2.4s var(--ease-out) infinite; }
.zone-pin { position: absolute; z-index: 2; left: 52%; top: 46%; width: 44px; height: 44px; margin: -50px 0 0 -22px; background: var(--lien); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: inset 0 0 0 13px var(--lien), inset 0 0 0 22px var(--blanc); }
.zone-card.is-in .zone-pin { animation: zone-pin .8s var(--ease-out) .35s backwards; }
@keyframes zone-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(6); opacity: 0; } }
@keyframes zone-pin { from { transform: translateY(-90px) rotate(-45deg); opacity: 0; } 60% { opacity: 1; } to { transform: rotate(-45deg); } }
.zone-card-t { padding: 20px 24px 2px; font-family: var(--f-titre); font-weight: 700; font-size: var(--t-xl); }
.zone-card-p { padding: 0 24px 22px; font-size: var(--t-xs); color: var(--doux); }
.zone-communes { background: var(--nuit); color: var(--blanc); padding: clamp(80px, 11vw, 150px) 0; }
.zone-communes .section-intro { color: var(--doux-clair); }
.commune-list { display: flex; flex-wrap: wrap; gap: 12px; }
.commune { padding: 11px 20px; border: 2px solid rgba(125, 150, 255, .5); border-radius: 999px; font-family: var(--f-titre); font-weight: 700; font-size: var(--t-s); }
.commune:first-child { background: var(--blanc); border-color: var(--blanc); color: var(--nuit); }

/* À propos */
.about-time { background: var(--nuit); color: var(--blanc); padding: clamp(80px, 11vw, 150px) 0; }
.mile-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.mile { border-top: 2px solid rgba(125, 150, 255, .4); padding-top: 22px; }
.mile-y { font-family: var(--f-titre); font-weight: 700; font-size: clamp(2.6rem, 1.4rem + 3.4vw, 4.6rem); line-height: .95; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 2px var(--azur); transition: color .9s var(--ease) .3s; }
.mile.is-in .mile-y { color: var(--blanc); }
.mile:last-child .mile-y { font-size: clamp(2rem, 1.2rem + 2.2vw, 3.2rem); }
.mile-p { margin-top: 16px; color: var(--doux-clair); }
.about-id { padding: 0 0 clamp(80px, 11vw, 150px); }
.about-note { background: var(--brume); padding: clamp(24px, 3vw, 40px); }
.about-note-h { font-family: var(--f-titre); font-weight: 700; font-size: var(--t-xl); line-height: 1.2; margin-bottom: 12px; }
.about-note p { color: var(--doux); }
.about-note a { color: var(--lien); text-underline-offset: 3px; }

/* Réalisations */
.realisations--page { padding-top: 0; }
.real { display: flex; flex-direction: column; }
.real-more { align-self: flex-start; margin-top: 18px; font-size: var(--t-s); }
.section-intro .link-strong { margin-left: 4px; }
.case { padding: clamp(24px, 3vw, 40px) 0 clamp(80px, 11vw, 150px); }
.case-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.case-facts { position: sticky; top: calc(var(--header-h) + 24px); }
.case-facts .real-logo { margin-bottom: 0; height: 150px; box-shadow: 14px 14px 0 var(--brume); }
.case-facts .real-logo img { max-height: 76px; }
.case-facts .real-logo img.is-tall { max-height: 110px; }
.case-facts .zone-dl { margin-top: 36px; }
.case-facts .zone-dl > div { grid-template-columns: 110px minmax(0, 1fr); }
.case-p { margin-top: 26px; max-width: 38em; font-size: var(--t-l); line-height: 1.5; color: var(--doux); }
.case-h2 { margin-top: clamp(48px, 6vw, 80px); }
.incl--1 { grid-template-columns: 1fr; margin-top: 30px; }
.promesse-p--l { font-size: var(--t-l); color: var(--blanc); }

/* Ressources */
.arts { padding: 0 0 clamp(80px, 11vw, 150px); }
.art-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.art-card a { display: flex; flex-direction: column; height: 100%; padding: clamp(24px, 3vw, 40px); background: var(--blanc); border-top: 2px solid var(--nuit); color: var(--nuit); text-decoration: none; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.art-card a:hover, .art-card a:focus-visible { transform: translate(-6px, -6px); box-shadow: 12px 12px 0 var(--brume); }
.art-card-meta { font-size: var(--t-xs); color: var(--doux); }
.art-card-h { margin: 14px 0 12px; font-family: var(--f-titre); font-weight: 700; font-size: var(--t-2xl); line-height: 1.12; letter-spacing: -.02em; }
.art-card-p { color: var(--doux); }
.art-card-more { align-self: flex-start; margin-top: auto; padding-top: 22px; font-family: var(--f-titre); font-weight: 700; color: var(--lien); }
.art-card-more::after { content: ""; display: block; height: 2px; margin-top: 3px; background: currentColor; transform-origin: left; transition: transform .35s var(--ease); }
.art-card a:hover .art-card-more::after { transform: scaleX(0); transform-origin: right; }
.article { padding: 0; }
.prose { max-width: 46em; border-top: 2px solid var(--nuit); padding-top: clamp(28px, 4vw, 48px); }
.prose p { color: var(--doux); margin-bottom: 18px; }
.prose .art-lead { font-size: var(--t-l); line-height: 1.5; color: var(--nuit); margin-bottom: 26px; }
.prose h2 { margin: 52px 0 14px; font-family: var(--f-titre); font-weight: 700; font-size: var(--t-2xl); line-height: 1.15; letter-spacing: -.02em; }
.prose h3 { margin: 30px 0 8px; font-family: var(--f-titre); font-weight: 700; font-size: var(--t-l); }
.prose ol, .prose ul { margin: 0 0 22px; counter-reset: n; }
.prose li { position: relative; padding: 7px 0 7px 32px; color: var(--doux); }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 12px; height: 2px; background: var(--lien); }
.prose ol li { counter-increment: n; }
.prose ol li::before { content: counter(n); position: absolute; left: 0; top: 7px; font-family: var(--f-titre); font-weight: 700; color: var(--lien); }
.prose strong { color: var(--nuit); }
.prose a { color: var(--lien); text-underline-offset: 3px; }
.prose code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; font-size: .86em; background: var(--brume); color: var(--nuit); padding: 1px 6px; border-radius: 4px; }
.prose pre { margin: 0 0 24px; padding: 20px 24px; background: var(--nuit); color: var(--brume); overflow-x: auto; font-size: 14px; line-height: 1.65; }
.prose pre code { background: none; padding: 0; color: inherit; font-size: inherit; white-space: pre; }

/* Pied de page */
.site-footer { padding: clamp(56px, 7vw, 88px) 0 32px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: 40px clamp(32px, 5vw, 80px); }
.foot-brand .footer-p { margin-top: 20px; max-width: 26em; }
.foot-addr { margin-top: 16px; font-size: var(--t-xs); line-height: 1.7; }
.foot-h { margin-bottom: 14px; font-family: var(--f-titre); font-weight: 700; font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--azur); }
.foot-col ul { display: grid; gap: 9px; font-size: var(--t-xs); }
.foot-addr a, .foot-col a { color: var(--blanc); text-decoration: none; }
.foot-addr a:hover, .foot-col a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin-top: clamp(40px, 5vw, 64px); padding-top: 24px; border-top: 1px solid rgba(125, 150, 255, .25); font-size: var(--t-xs); }

@media (max-width: 980px) {
  .zone-grid, .case-grid { grid-template-columns: 1fr; }
  .case-facts { position: static; max-width: 560px; }
  .types--3 .type-list { grid-template-columns: 1fr 1fr; }
  .mile-list { grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .types--3 .type-list, .art-list { grid-template-columns: 1fr; }
  .zone-dl > div, .case-facts .zone-dl > div { grid-template-columns: 1fr; gap: 2px; }
  .zone-card { box-shadow: 10px 10px 0 var(--brume); }
  .mile-list { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .prose pre { margin-left: calc(var(--gut) * -1); margin-right: calc(var(--gut) * -1); padding: 18px var(--gut); font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .rise { opacity: 1; transform: none; }
  .zone-pulse { animation: none; }
  .art-card a:hover, .art-card a:focus-visible { transform: none; }
}