/* Solys — le site. Rien de commun avec l'application : sa propre grille, sa propre
   palette, son propre rythme. Seule la marque est partagée : le bleu et le glyphe d'onde. */

:root {
  --bleu: #2b54e6;
  --bleu-fonce: #0a1a5c;
  --bleu-nuit: #050d33;
  --bleu-clair: #eaf0ff;
  --encre: #0c1330;
  --encre-2: #47507a;
  --encre-3: #7b83a8;
  --papier: #ffffff;
  --papier-2: #f6f7fb;
  --bord: #e6e9f5;
  --vert: #d6f24b;              /* l'accent vif des références, utilisé une fois par écran */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 34px; --r-pill: 999px;
  --large: 1180px;
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --t: 260ms cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); color: var(--encre); background: var(--papier);
  -webkit-font-smoothing: antialiased; font-size: 17px; line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.contenu { width: min(100% - 40px, var(--large)); margin-inline: auto; }

/* ------------------------------------------------------------- navigation */
.nav {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 50;
  width: min(100% - 32px, 980px);
  display: flex; align-items: center; gap: 8px;
  padding: 8px 8px 8px 14px; border-radius: var(--r-pill);
  background: rgba(8, 18, 60, .55); border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(14px) saturate(140%);
  transition: background var(--t), border-color var(--t);
}
.nav.pose { background: rgba(255, 255, 255, .82); border-color: var(--bord); box-shadow: 0 10px 30px rgba(12, 19, 48, .10); }
.nav-marque { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -.01em; color: #fff; }
.nav.pose .nav-marque, .nav.pose .nav-lien { color: var(--encre); }
.marque-tuile {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px;
  border-radius: 9px; background: var(--bleu); color: #fff;
}
.marque-tuile svg { width: 16px; height: 16px; }
.nav.pose .marque-tuile { background: var(--bleu); }
.nav-liens { display: flex; align-items: center; gap: 4px; margin-left: 18px; }
.nav-lien {
  padding: 8px 12px; border-radius: var(--r-pill); font-size: 14.5px; color: rgba(255, 255, 255, .86);
  transition: background var(--t), color var(--t);
}
.nav-lien:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.nav.pose .nav-lien:hover { background: var(--papier-2); }
.nav-fin { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 20px; border: 0; border-radius: var(--r-pill);
  font: inherit; font-size: 15px; font-weight: 550; cursor: pointer; white-space: nowrap;
  transition: transform var(--t), background var(--t), box-shadow var(--t);
}
.btn:hover { transform: translateY(-1px); }
.btn-clair { background: #fff; color: var(--encre); box-shadow: 0 8px 24px rgba(5, 13, 51, .22); }
.btn-bleu { background: var(--bleu); color: #fff; box-shadow: 0 10px 28px rgba(43, 84, 230, .32); }
.btn-bleu:hover { background: #2245c9; }
.btn-fantome { background: rgba(255, 255, 255, .10); color: #fff; border: 1px solid rgba(255, 255, 255, .22); }
.btn-fantome:hover { background: rgba(255, 255, 255, .18); }
.btn-sm { height: 36px; padding: 0 16px; font-size: 14px; }
.btn-lg { height: 52px; padding: 0 28px; font-size: 16.5px; }

/* ------------------------------------------------------------------- héros */
.heros {
  position: relative; padding: 168px 0 0; text-align: center; color: #fff; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 120%, rgba(255, 255, 255, .95) 0%, rgba(233, 240, 255, .6) 34%, rgba(43, 84, 230, 0) 62%),
    linear-gradient(180deg, var(--bleu-nuit) 0%, var(--bleu-fonce) 34%, var(--bleu) 72%, #7fa0ff 100%);
}
/* Un voile d'étoiles : la texture des références, sans image. */
.heros::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .55) 1px, transparent 1.2px);
  background-size: 34px 34px; opacity: .18; mask-image: radial-gradient(70% 55% at 50% 12%, #000 0%, transparent 72%);
}
.heros > * { position: relative; }
.heros h1 {
  margin: 0 auto 22px; max-width: 15ch; font-size: clamp(42px, 6.4vw, 78px); line-height: 1.02;
  letter-spacing: -.035em; font-weight: 600;
}
.heros h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.heros p.accroche {
  margin: 0 auto; max-width: 56ch; font-size: clamp(17px, 1.6vw, 20px); color: rgba(255, 255, 255, .78);
}
.heros .actions { display: flex; gap: 12px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }
.heros .mention { margin-top: 16px; font-size: 13.5px; color: rgba(255, 255, 255, .62); }

/* Les cartes du produit, inclinées, qui sortent du dégradé. */
.vitrine { position: relative; margin-top: 64px; padding-bottom: 90px; perspective: 1400px; }
.vitrine-rangee {
  display: flex; align-items: flex-end; justify-content: center; gap: 22px;
  transform: rotateX(9deg); transform-style: preserve-3d;
}
.carte {
  width: 300px; text-align: left; background: #fff; color: var(--encre);
  border-radius: var(--r-lg); box-shadow: 0 30px 70px rgba(5, 13, 51, .34);
  padding: 18px; transition: transform var(--t);
}
.carte:hover { transform: translateY(-8px); }
.carte.gauche { transform: rotate(-4deg) translateY(26px); }
.carte.droite { transform: rotate(4deg) translateY(26px); }
.carte.centre { width: 340px; z-index: 2; }
.carte-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.carte-tete h4 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.copier {
  height: 28px; padding: 0 12px; white-space: nowrap; border-radius: var(--r-pill); border: 0;
  background: var(--bleu); color: #fff; font: inherit; font-size: 12.5px; font-weight: 550;
}
.copier.fait { background: #e8f6ec; color: #15743c; }
.carte p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--encre-2); }
.carte p + p { margin-top: 7px; }
.carte .etiq { color: var(--encre); font-weight: 600; }
.carte-mini { font-size: 12.5px; color: var(--encre-3); margin-top: 12px; display: flex; gap: 6px; align-items: center; }

/* ---------------------------------------------------------------- sections */
section { padding: 96px 0; }
.titre-section {
  margin: 0 auto 14px; max-width: 20ch; text-align: center;
  font-size: clamp(30px, 3.6vw, 46px); line-height: 1.06; letter-spacing: -.03em; font-weight: 600;
}
.titre-section em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.sous-titre { margin: 0 auto 52px; max-width: 58ch; text-align: center; color: var(--encre-2); }
.oeil {
  display: block; text-align: center; margin-bottom: 18px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--bleu);
}

.chiffres { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.chiffre { padding: 30px 26px; border-radius: var(--r-lg); background: var(--papier-2); border: 1px solid var(--bord); }
.chiffre b { display: block; font-size: 44px; line-height: 1; letter-spacing: -.04em; margin-bottom: 10px; }
.chiffre span { color: var(--encre-2); font-size: 15px; }
.chiffre.sombre { background: var(--encre); color: #fff; border-color: transparent; }
.chiffre.sombre span { color: rgba(255, 255, 255, .72); }
.chiffre.vive { background: var(--vert); border-color: transparent; }

.etapes { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.etape { padding: 28px 26px 30px; border-radius: var(--r-lg); border: 1px solid var(--bord); background: #fff; }
.etape .num {
  display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 16px;
  border-radius: 11px; background: var(--bleu-clair); color: var(--bleu); font-weight: 650; font-size: 15px;
}
.etape h3 { margin: 0 0 8px; font-size: 19px; letter-spacing: -.015em; }
.etape p { margin: 0; color: var(--encre-2); font-size: 15.5px; }

.logiciels { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.logiciel {
  padding: 11px 18px; border-radius: var(--r-pill); border: 1px solid var(--bord);
  background: #fff; font-size: 15px; font-weight: 550;
}
.logiciel span { color: var(--encre-3); font-weight: 400; }

.garanties { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 44px; }
.garantie { padding: 24px; border-radius: var(--r-md); background: var(--papier-2); border: 1px solid var(--bord); }
.garantie h4 { margin: 0 0 6px; font-size: 16px; }
.garantie p { margin: 0; font-size: 14.5px; color: var(--encre-2); }

/* ------------------------------------------------------------ liste d'attente */
.liste { background: var(--papier-2); border-top: 1px solid var(--bord); }
.liste-carte {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 0;
  border-radius: var(--r-xl); overflow: hidden; background: #fff;
  border: 1px solid var(--bord); box-shadow: 0 30px 70px rgba(12, 19, 48, .10);
}
.liste-gauche {
  padding: 46px 42px; color: #fff;
  background: radial-gradient(120% 120% at 0% 0%, #4f74ff 0%, var(--bleu) 45%, var(--bleu-fonce) 100%);
}
.liste-gauche h2 { margin: 0 0 10px; font-size: clamp(32px, 3.8vw, 46px); line-height: 1.04; letter-spacing: -.03em; font-weight: 600; }
.liste-gauche h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.liste-gauche p { margin: 0 0 26px; color: rgba(255, 255, 255, .8); font-size: 15.5px; }
.champ { display: block; margin-bottom: 12px; }
.champ input, .champ select {
  width: 100%; height: 48px; padding: 0 16px; font: inherit; font-size: 15.5px;
  border-radius: var(--r-sm); border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .12); color: #fff;
}
.champ input::placeholder { color: rgba(255, 255, 255, .6); }
.champ select option { color: var(--encre); }
.champ input:focus, .champ select:focus { outline: 2px solid #fff; outline-offset: 1px; background: rgba(255, 255, 255, .2); }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.liste form .btn { width: 100%; margin-top: 6px; }
.liste-note { margin-top: 14px; font-size: 13px; color: rgba(255, 255, 255, .66); }
.liste-droite { display: flex; flex-direction: column; justify-content: center; padding: 46px 42px; font-family: var(--serif); font-size: 19px; line-height: 1.55; color: var(--encre); }
.liste-droite .a { color: var(--encre-3); margin-bottom: 26px; }
.liste-droite p { margin: 0 0 18px; }
.liste-droite .signature { font-size: 16px; color: var(--encre-3); font-style: italic; }
.message { margin-top: 16px; padding: 12px 14px; border-radius: var(--r-sm); font-size: 14.5px; }
.message.ok { background: rgba(214, 242, 75, .2); color: #fff; border: 1px solid rgba(214, 242, 75, .5); }
.message.erreur { background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .3); }
.message.hidden { display: none; }

/* ------------------------------------------------------------------- pied */
footer { padding: 54px 0 70px; border-top: 1px solid var(--bord); color: var(--encre-3); font-size: 14.5px; }
.pied { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.pied-marque { display: flex; align-items: center; gap: 10px; color: var(--encre); font-weight: 600; }
.pied-marque .marque-tuile { width: 26px; height: 26px; border-radius: 8px; }
.pied a:hover { color: var(--encre); }

/* -------------------------------------------------------------- apparition */
.apparait { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--t), transform .7s var(--t); }
.apparait.vu { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .apparait { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

@media (max-width: 900px) {
  .nav-liens { display: none; }
  .heros { padding-top: 116px; }
  .vitrine-rangee { flex-direction: column; align-items: center; transform: none; }
  .carte, .carte.centre { width: min(100%, 360px); }
  .carte.gauche, .carte.droite { transform: none; }
  .liste-carte { grid-template-columns: 1fr; }
  .liste-droite { border-top: 1px solid var(--bord); }
  section { padding: 72px 0; }
}
@media (max-width: 620px) {
  /* La barre ne tient pas deux boutons : le CTA est juste en dessous, dans le héros. */
  .nav { padding: 6px 8px 6px 12px; }
  .nav-fin .btn-fantome { display: none; }   /* « Se connecter » reste dans le pied de page */
  .nav-fin .btn-clair { padding: 0 14px; font-size: 13.5px; }
  .annonce { max-width: 92%; text-align: center; font-size: 13px; line-height: 1.35; }
  .heros h1 { font-size: clamp(34px, 9vw, 46px); }
  .liste-gauche, .liste-droite { padding: 32px 24px; }
  .deux { grid-template-columns: 1fr; }
  .pied { justify-content: center; text-align: center; }
}

/* ===================================================================== modal
   « Testez gratuitement » ouvre ceci, et rien d'autre ne bouge sur la page.
   Le visiteur doit comprendre en une phrase que Solys n'est pas encore ouvert. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.btn-plein { width: 100%; }

.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; }
/* Sans cette ligne, `display: grid` écrase l'attribut `hidden` : le modal reste
   invisible mais couvre l'écran et avale tous les clics, jusque dans l'entête.
   Vu en production le 24/09 — la page semblait morte. */
.modal[hidden] { display: none; }
.modal-fond {
  position: absolute; inset: 0; background: rgba(5, 13, 51, .55);
  backdrop-filter: blur(6px); opacity: 0; transition: opacity 220ms var(--t);
}
.modal.ouvert .modal-fond { opacity: 1; }
.modal-boite {
  /* Une carte de papier, avec le panneau d'offre posé dedans : c'est la forme
     qu'on garde de la référence, transposée au bleu de Solys. */
  position: relative; width: min(100%, 880px); max-height: 92vh; overflow: auto;
  display: grid; grid-template-columns: 1.02fr .98fr;
  padding: 14px; background: #f7f4ee; border-radius: 30px;
  border: 1.5px dashed rgba(63, 59, 51, .22);   /* le liseré perforé de la référence */
  box-shadow: 0 40px 90px rgba(5, 13, 51, .38);
  opacity: 0; transform: translateY(14px) scale(.97);
  transition: opacity 220ms var(--t), transform 220ms var(--t);
}
.modal.ouvert .modal-boite { opacity: 1; transform: none; }

.modal-offre {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  min-height: 430px; padding: 34px 32px 32px; border-radius: 20px; color: #fff;
  background: linear-gradient(168deg, #e6ebff 0%, #a8baff 30%, #5f7dff 62%, var(--bleu) 100%);
}
/* Le disque en bas à droite, comme le soleil de la référence. */
.modal-offre::after {
  content: ""; position: absolute; right: -60px; bottom: -130px; width: 340px; height: 340px;
  border-radius: 50%; background: rgba(255, 255, 255, .16); pointer-events: none;
}
.modal-offre > * { position: relative; z-index: 1; }
.modal-vue { display: flex; flex-direction: column; flex: 1; }
.modal-vue[hidden] { display: none; }
.modal-titre {
  margin: 0 0 8px; font-family: var(--serif); font-weight: 400; letter-spacing: -.01em;
  font-size: clamp(34px, 4vw, 46px); line-height: 1.02; color: #10225f;
}
.modal-fine { margin: 0; font-size: 14px; color: rgba(16, 34, 95, .72); }
.modal-bas { margin-top: auto; padding-top: 28px; }
.modal-texte { margin: 0 0 16px; font-size: 16.5px; line-height: 1.45; color: #fff; }
.modal-champ {
  width: 100%; height: 50px; padding: 0 18px; margin-bottom: 10px; font: inherit; font-size: 16px;
  border: 1px solid rgba(255, 255, 255, .45); border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .18); color: #fff;
}
.modal-champ::placeholder { color: rgba(255, 255, 255, .75); }
.modal-champ:focus { outline: 0; background: rgba(255, 255, 255, .28); border-color: #fff; }
.modal-action {
  width: 100%; height: 50px; border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: #fff; color: var(--encre); font: inherit; font-size: 15.5px; font-weight: 600;
  transition: transform var(--t), box-shadow var(--t);
}
.modal-action:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(5, 13, 51, .22); }
.modal-action:disabled { opacity: .75; cursor: default; transform: none; }
.modal-erreur {
  margin: 0 0 10px; padding: 9px 14px; border-radius: var(--r-pill); font-size: 13.5px;
  background: rgba(255, 255, 255, .92); color: #a2352a;
}

.modal-lettre {
  display: flex; flex-direction: column; justify-content: center; gap: 0;
  padding: 44px 38px 44px 42px; font-family: var(--serif); font-size: 17.5px; line-height: 1.5;
  color: #3f3b33;
}
.modal-lettre p { margin: 0 0 18px; }
.modal-a { color: #8b8478; }
.modal-signature { margin: 8px 0 0; font-style: italic; color: #8b8478; font-size: 15.5px; }

.modal-x {
  position: absolute; top: 20px; right: 20px; z-index: 2; display: grid; place-items: center;
  width: 32px; height: 32px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .72); color: #3f3b33; transition: background var(--t);
}
.modal-x:hover { background: #fff; }
.modal-x svg { width: 16px; height: 16px; }

@media (max-width: 760px) {
  .modal { padding: 12px; }
  .modal-boite { grid-template-columns: 1fr; padding: 10px; border-radius: 24px; }
  .modal-offre { min-height: 0; padding: 28px 24px 24px; }
  .modal-lettre { padding: 26px 22px 22px; font-size: 16px; }
  .modal-lettre p { margin-bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .modal-fond, .modal-boite { transition: none; }
}

/* ================================================== la vision, sur la page
   Une règle tient tout ce bloc : ce qui n'existe pas encore doit se voir. */
.vitrine-titre {
  margin: 0 0 22px; font-size: 13.5px; letter-spacing: .02em; color: rgba(255, 255, 255, .7);
}
.note-source { margin: 26px auto 0; max-width: 62ch; text-align: center; font-size: 14px; color: var(--encre-3); }

.capture {
  margin: 0 0 42px; padding: 14px; border-radius: var(--r-xl);
  background: var(--papier-2); border: 1px solid var(--bord);
}
.capture img { width: 100%; border-radius: var(--r-lg); }
.capture figcaption { margin-top: 12px; text-align: center; font-size: 13.5px; color: var(--encre-3); }

/* Le flux : ce qui est dit à gauche, ce qui en découle à droite. */
.flux { display: grid; grid-template-columns: 1fr auto 1.1fr; gap: 26px; align-items: stretch; }
.flux-dit {
  display: flex; flex-direction: column; justify-content: center; padding: 30px 28px; border-radius: var(--r-lg); color: #fff;
  background: linear-gradient(160deg, #4f74ff 0%, var(--bleu) 55%, var(--bleu-fonce) 100%);
}
.flux-etiq {
  display: block; margin-bottom: 12px; font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .7);
}
.flux-dit p { margin: 0; font-family: var(--serif); font-size: 19px; line-height: 1.45; }
.flux-fleche { display: grid; place-items: center; color: #b9c0d8; }
.flux-fleche svg { width: 30px; height: 30px; }
.flux-sorties { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.flux-sorties li {
  display: flex; flex-direction: column; gap: 2px; padding: 13px 16px;
  border-radius: var(--r-md); background: #fff; border: 1px solid var(--bord);
}
.flux-sorties b { font-size: 15.5px; font-weight: 600; }
.flux-sorties span { font-size: 14px; color: var(--encre-2); }
/* Ce qui n'existe pas encore : trait pointillé, comme un brouillon. */
.flux-sorties .a-venir { border-style: dashed; background: transparent; }
.flux-sorties .a-venir b { color: var(--encre-2); }
.flux-sorties .a-venir b::after {
  content: "à venir"; margin-left: 8px; padding: 2px 8px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  background: var(--bleu-clair); color: var(--bleu);
}
.pastille-venir {
  display: inline-block; width: 22px; height: 8px; margin-right: 6px; vertical-align: 1px;
  border: 1px dashed var(--border-strong, #c9cfe4); border-radius: var(--r-pill);
}

.connecteurs { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.connecteurs .colonne { padding: 26px 24px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--bord); }
.connecteurs h4 {
  margin: 0 0 14px; font-size: 12.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--bleu);
}
.connecteurs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.connecteurs li { font-size: 15.5px; font-weight: 550; }
.connecteurs li span { color: var(--encre-3); font-weight: 400; }

/* La feuille de route : une colonne, avec le fait en couleur et la suite en gris. */
.route { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: etape; }
.route li {
  position: relative; padding: 24px 26px 24px 30px; border-radius: var(--r-lg);
  background: var(--papier-2); border: 1px solid var(--bord);
}
.route li::before {
  content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px;
  border-radius: var(--r-pill); background: var(--border-strong, #d7d4cd);
}
.route li.fait { background: #fff; border-color: var(--brand-border, #ccd6fb); }
.route li.fait::before { background: var(--bleu); }
.route .jalon {
  display: inline-block; margin-bottom: 8px; font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--encre-3);
}
.route li.fait .jalon { color: var(--bleu); }
.route h3 { margin: 0 0 6px; font-size: 19px; letter-spacing: -.015em; }
.route p { margin: 0; color: var(--encre-2); font-size: 15.5px; }

@media (max-width: 900px) {
  .flux { grid-template-columns: 1fr; }
  .flux-fleche { justify-self: center; transform: rotate(90deg); }
}