/* ===================================================================
   Silex · couche v3 (proposition) — se charge après silex.css et
   silex-couleurs.css. Héros sur une colonne (3 variantes), prix au
   format québécois, barre d'action mobile, blogue, pages légales.
   =================================================================== */

:root {
  --ambre: #f4b740; /* accent chaud proposé : UN usage, l'essai gratuit */
  --ambre-ink: #5a3d00;
}

/* ---------- Navigation : action principale unique ---------- */
.nv__c .b1 {
  box-shadow: 0 6px 16px rgba(9, 123, 153, 0.25);
}

/* ---------- Héros une colonne ---------- */
.hx {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hx__i {
  position: relative;
  z-index: 2;
  max-width: 980px;
  margin: 0 auto;
  padding: 76px 26px 0;
  text-align: center;
}
.hx .tag {
  margin-inline: auto;
}
.hx h1 {
  font-size: clamp(2.35rem, 5.4vw, 4.1rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  font-weight: 800;
  margin: 22px auto 0;
  max-width: 19ch;
  text-wrap: balance;
}
.hx .lead {
  font-size: clamp(1.05rem, 1.7vw, 1.22rem);
  max-width: 50ch;
  margin: 22px auto 0;
  line-height: 1.6;
}
.hx .bl {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  margin-top: 22px;
}
.hx .bl li {
  grid-template-columns: 18px auto;
  font-size: 0.95rem;
}
.hx .cta-row {
  justify-content: center;
  margin-top: 30px;
}
.hx .b {
  padding: 14px 26px;
  font-size: 1rem;
  border-radius: 11px;
}
.hx .essai-note {
  margin-top: 14px;
}
.hx .facts {
  justify-content: center;
  margin-top: 22px;
}
.essai {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ambre);
  color: var(--ambre-ink);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 5px 12px;
  border-radius: 999px;
}

/* Variante A — démo animée de l'application */
.hx--a {
  background:
    radial-gradient(900px 480px at 50% -10%, #d9eff7 0%, transparent 70%),
    linear-gradient(180deg, #eef8fc 0%, #fff 78%);
}
.stage {
  position: relative;
  max-width: 900px;
  margin: 54px auto 0;
  padding: 0 26px 70px;
}
.stage .tab {
  position: relative;
  z-index: 2;
}
.reel {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  background: #f4f7fa;
}
.reel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity 0.7s ease;
  border-radius: 0;
}
.reel img.on {
  opacity: 1;
}
.reelbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.subj {
  display: inline-flex;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
}
.subj span {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--body);
  transition: 0.3s;
}
.subj span.on {
  background: var(--acc-ink);
  color: #fff;
}
.stepl {
  font-size: 0.86rem;
  color: var(--acc-ink);
  font-weight: 600;
  min-width: 21ch;
  text-align: left;
}
.stepl b {
  color: var(--acc-btn);
}
.float {
  position: absolute;
  z-index: 3;
  box-shadow: 0 18px 44px rgba(10, 58, 69, 0.18);
}
.float--l {
  left: -26px;
  top: 18%;
  width: 210px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #fff;
}
.float--l img {
  width: 100%;
  display: block;
}
.float--r {
  right: -30px;
  bottom: 16%;
  width: 250px;
}
@media (max-width: 1060px) {
  .float--l {
    left: 0;
  }
  .float--r {
    right: 0;
  }
}
@media (max-width: 760px) {
  .float {
    display: none;
  }
  .stage {
    padding-inline: 16px;
  }
}

/* Variante B — ardoise nuit, glyphes en mouvement */
.hx--b {
  background: radial-gradient(900px 520px at 50% 0%, #0f5162 0%, var(--nuit) 62%);
  color: #fff;
}
.hx--b h1,
.hx--b .bl li {
  color: #fff;
}
.hx--b .lead,
.hx--b .essai-note,
.hx--b .fact {
  color: var(--craie2);
}
.hx--b .acw {
  color: var(--acc2);
}
.hx--b .bl svg,
.hx--b .fact svg {
  stroke: var(--acc2);
}
.hx--b .tag {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--craie2);
}
.hx--b .b1 {
  background: var(--acc2);
  color: #0f0f12;
}
.hx--b .b2 {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}
.glyphs {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.duo {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 980px;
  margin: 56px auto 0;
  padding: 0 26px 0;
}
.duo figure {
  margin: 0;
}
.duo .tab {
  background: #09232b;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}
.duo figure:first-child .tab {
  transform: rotate(-2.5deg) translateY(14px);
}
.duo figure:last-child .tab {
  transform: rotate(2.5deg) translateY(14px);
}
.duo figcaption {
  margin-top: 26px;
  color: var(--craie2);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}
.duo figcaption b {
  color: #fff;
}
.hx--b .duo-wrap {
  padding-bottom: 80px;
}
@media (max-width: 760px) {
  .duo {
    grid-template-columns: 1fr;
  }
  .duo figure .tab {
    transform: none !important;
  }
}

/* Variante C — photo en fond, voile sarcelle */
.hx--c {
  color: #fff;
  background: var(--nuit);
}
.hx--c .bgph {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hx--c .bgph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  filter: grayscale(1) contrast(1.1) brightness(1.25);
  opacity: 0.9;
}
.hx--c .bgph::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(10, 58, 69, 0.55) 0%,
      rgba(10, 58, 69, 0.78) 55%,
      rgba(10, 58, 69, 0.96) 100%
    ),
    linear-gradient(90deg, rgba(63, 179, 212, 0.28), rgba(10, 58, 69, 0) 60%);
  mix-blend-mode: normal;
}
.hx--c h1,
.hx--c .bl li {
  color: #fff;
}
.hx--c .lead,
.hx--c .essai-note,
.hx--c .fact {
  color: #d3e6eb;
}
.hx--c .acw {
  color: var(--acc2);
}
.hx--c .bl svg,
.hx--c .fact svg {
  stroke: var(--acc2);
}
.hx--c .tag {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #e6f2f5;
}
.hx--c .b1 {
  background: var(--acc2);
  color: #0f0f12;
}
.hx--c .b2 {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}
.hx--c .hx__i {
  padding-bottom: 96px;
  padding-top: 110px;
}
.proof {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0 26px 70px;
  margin-top: -40px;
}
.proof .mini {
  position: static;
  width: 220px;
}

/* Sélecteur de variantes (maquette seulement) */
.vsel {
  position: fixed;
  left: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  display: flex;
  gap: 4px;
  align-items: center;
  background: #0f0f12;
  color: #fff;
  border-radius: 999px;
  padding: 5px 6px 5px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.vsel button {
  color: #cfe6ec;
  padding: 6px 11px;
  border-radius: 999px;
  font-weight: 700;
}
.vsel button.on {
  background: var(--acc2);
  color: #0f0f12;
}
@media (max-width: 640px) {
  .vsel {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------- Section « Ce qui bloque » : photo recadrée ---------- */
.ph--34 {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 30%;
}

/* ---------- Tarifs : total annuel et format québécois ---------- */
.pcard__amt sup.cur {
  font-size: 1.15rem;
  font-weight: 700;
  vertical-align: super;
  margin-left: 4px;
  margin-right: 0;
}
.pcard__tot {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--acc-ink);
  margin-top: 2px;
  min-height: 1.3em;
}
.eleve14 {
  margin-top: 18px;
  font-size: 0.88rem;
  color: var(--body);
}
.eleve14 a {
  color: var(--acc-btn);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Barre d'action mobile ---------- */
.mbar {
  display: none;
}
@media (max-width: 640px) {
  .mbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px rgba(10, 58, 69, 0.1);
    transform: translateY(110%);
    transition: transform 0.3s ease;
  }
  .mbar.show {
    transform: none;
  }
  .mbar small {
    font-size: 0.78rem;
    color: var(--body);
    line-height: 1.3;
  }
  .mbar small b {
    display: block;
    color: var(--ink);
    font-size: 0.86rem;
  }
  .ft {
    padding-bottom: 96px;
  }
}

/* ---------- Blogue ---------- */
.chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 26px;
}
.chips button {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--body);
}
.chips button.on {
  background: var(--acc-ink);
  border-color: var(--acc-ink);
  color: #fff;
}
.posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.post {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: 0.2s;
}
.post:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(10, 58, 69, 0.1);
}
.post__ph {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--tint);
}
.post__ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.post__b {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.post__c {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acc-btn);
}
.post h3 {
  font-size: 1.08rem;
  line-height: 1.35;
}
.post p {
  font-size: 0.88rem;
}
.post__m {
  margin-top: auto;
  padding-top: 10px;
  font-size: 0.78rem;
  color: var(--sec);
  display: flex;
  justify-content: space-between;
}
.post--soon {
  opacity: 0.72;
}
.post--feat {
  grid-column: span 3;
  flex-direction: row;
}
.post--feat .post__ph {
  aspect-ratio: auto;
  flex: 1.2;
  min-height: 320px;
}
.post--feat .post__b {
  flex: 1;
  padding: 34px;
  justify-content: center;
}
.post--feat h3 {
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
@media (max-width: 960px) {
  .posts {
    grid-template-columns: 1fr;
  }
  .post--feat {
    grid-column: auto;
    flex-direction: column;
  }
  .post--feat .post__ph {
    min-height: 0;
    aspect-ratio: 16/9;
  }
}

/* Article */
.art {
  max-width: 740px;
  margin: 0 auto;
}
.art__h {
  text-align: center;
}
.art__h h1 {
  font-size: clamp(2rem, 4.2vw, 2.9rem);
  margin: 14px auto 16px;
  max-width: 22ch;
}
.art__meta {
  font-size: 0.86rem;
  color: var(--sec);
}
.art__cover {
  margin: 36px auto 0;
  max-width: 980px;
}
.art__cover img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top;
  border-radius: var(--r-lg);
}
.prose {
  font-size: 1.06rem;
  line-height: 1.75;
  color: #2a2e35;
}
.prose > * + * {
  margin-top: 18px;
}
.prose p {
  color: #2a2e35;
}
.prose h2 {
  font-size: 1.6rem;
  margin-top: 46px;
}
.prose h3 {
  font-size: 1.12rem;
  margin-top: 28px;
}
.prose ul,
.prose ol {
  padding-left: 22px;
}
.prose li + li {
  margin-top: 6px;
}
.prose a {
  color: var(--acc-btn);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose blockquote {
  border-left: 3px solid var(--acc2);
  padding: 6px 0 6px 20px;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--acc-ink);
}
.artcta {
  margin-top: 48px;
  border-radius: var(--r-lg);
  padding: 30px 32px;
  background: var(--nuit);
  color: #fff;
}
.artcta h2 {
  color: #fff;
  font-size: 1.45rem;
  margin: 0;
}
.artcta p {
  color: var(--craie2);
  margin-top: 10px;
}
.artcta .b1 {
  background: var(--acc2);
  color: #0f0f12;
  margin-top: 18px;
}

/* Page légale */
.legal h2 {
  font-size: 1.3rem;
  margin-top: 36px;
}
.legal p {
  margin-top: 10px;
}
.todo {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ambre-ink);
  background: #fdf1d6;
  border-radius: 6px;
  padding: 3px 9px;
}

/* ===================================================================
   v4 — HÉROS EN FILIGRANE : vidéo ou photo en fond, couche de couleur
   uniforme au-dessus, texte par-dessus (demande du fondateur, 30 sept.)
   =================================================================== */
.hv {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: min(86vh, 760px);
  display: flex;
  align-items: center;
}
.hv .hx__i {
  padding: 88px 26px 96px;
}
.hv__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hv__bg video,
.hv__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hv__ph {
  object-position: center 30%;
}
.hv--photo .hv__vid {
  display: none;
}
.hv--photo .hv__ph {
  display: block !important;
}
.hv__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Couche « nuit » : sarcelle nuit à 86 %, texte blanc */
.hv > .hx__i {
  width: 100%;
}
.hv--nuit .hv__bg {
  filter: grayscale(1) contrast(1.1);
}
.hv--photo.hv--nuit .hv__bg {
  filter: grayscale(1) contrast(1.1);
}
.hv--nuit .hv__veil {
  background: rgba(10, 58, 69, 0.88);
}
.hv--photo.hv--nuit .hv__veil {
  background: rgba(10, 58, 69, 0.8);
}
.hv--nuit h1,
.hv--nuit .bl li {
  color: #fff;
}
.hv--nuit .lead,
.hv--nuit .essai-note,
.hv--nuit .fact {
  color: var(--craie2);
}
.hv--nuit .acw {
  color: var(--acc2);
}
.hv--nuit .bl svg,
.hv--nuit .fact svg,
.hv--nuit .tag svg {
  stroke: var(--acc2);
}
.hv--nuit .tag {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #dcebef;
}
.hv--nuit .b1 {
  background: var(--acc2);
  color: #0f0f12;
}
.hv--nuit .b1:hover {
  background: #6fd0ea;
}
.hv--nuit .b2 {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.34);
}
.hv--nuit .b2:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Couche « claire » : blanc à 88 %, texte encre */
.hv--claire .hv__bg {
  filter: grayscale(1);
}
.hv--photo.hv--claire .hv__bg {
  filter: grayscale(1);
}
.hv--claire .hv__veil {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.93) 0%, rgba(234, 246, 251, 0.93) 100%);
}

/* Bouton pause : toute animation de plus de 5 s doit pouvoir s'arrêter (WCAG 2.2.2) */
.hv__pause {
  position: absolute;
  z-index: 3;
  right: 20px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 999px;
}
.hv--nuit .hv__pause {
  color: #dcebef;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.hv--claire .hv__pause {
  color: var(--acc-ink);
  background: #fff;
  border: 1px solid var(--line);
}
.hv--photo .hv__pause {
  display: none;
}
.i-pause {
  width: 10px;
  height: 10px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
.hv__pause[aria-pressed='true'] .i-pause {
  border: 0;
  width: 0;
  height: 0;
  border-left: 9px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
@media (prefers-reduced-motion: reduce) {
  .hv__vid {
    display: none;
  }
  .hv--video .hv__ph {
    display: block !important;
  }
}

.vsel span {
  color: #9fb7bf;
  font-weight: 600;
  margin: 0 2px 0 6px;
}
.vsel .sep {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 6px;
}

/* ===================================================================
   v4 — critères « Lisibilité » et « Hiérarchie » : échelle plus contrastée
   =================================================================== */
body {
  font-size: 17px;
}
.sm {
  font-size: 0.93rem;
}
.xs {
  font-size: 0.84rem;
}
.lead {
  font-size: 1.12rem;
}
h2 {
  font-size: clamp(1.9rem, 3.3vw, 2.45rem);
}
.kick {
  font-size: 0.76rem;
}
.di p,
.fc__f,
.an__i p {
  font-size: 0.86rem;
}
@media (max-width: 640px) {
  .hv {
    min-height: 0;
  }
  .hv .hx__i {
    padding: 64px 18px 84px;
  }
}

/* ===================================================================
   v5 — HÉROS ÉPURÉ : 4 éléments seulement (sur-titre, titre sur deux
   lignes, une phrase, une action). Les faits passent dans un bandeau.
   =================================================================== */
.hz {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: clamp(540px, 78vh, 700px);
  text-align: center;
}
.hz__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hz__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  display: block;
}
.hz__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hz__i {
  position: relative;
  z-index: 2;
  max-width: 860px;
  padding: 72px 26px 80px;
}
.hz__k {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hz h1 {
  /* DEUX LIGNES, PAS TROIS — demande du fondateur, 30 septembre 2026.
     « Cap sur la réussite en français et en mathématique. » fait 50 caractères
     là où « Réussir en… » en faisait 38. À 5rem (80 px) elles n'y tenaient pas :
     mesuré 3 lignes à 1024, 1280 et 1512 px.
     Le plafond passe donc à 4rem et la pente de 6.4vw à 5vw, et `max-width`
     cesse de brider : la largeur utile du héros (808 px) est la vraie borne.
     Vérifié par `tools/site/mesurer-heros.mjs`, qui compte les lignes RENDUES
     dans Chrome à cinq largeurs — un calcul à la main ne donne qu'un ordre de
     grandeur. */
  font-size: clamp(2.4rem, 4.6vw, 3.7rem);
  line-height: 1.06;
  letter-spacing: -0.04em;
  font-weight: 800;
  margin: 18px auto 0;
  max-width: 24ch;
  text-wrap: balance;
}
.hz__sub {
  font-size: clamp(1.08rem, 1.8vw, 1.3rem);
  line-height: 1.5;
  margin: 20px auto 0;
  max-width: 36ch;
}
.hz__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 34px;
}
.hz__cta .b1 {
  padding: 16px 30px;
  font-size: 1.02rem;
  border-radius: 12px;
}
.hz__lk {
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
.hz__note {
  margin-top: 16px;
  font-size: 0.86rem;
}

/* A — Nuit : photo en gris sous sarcelle nuit */
.hz--a .hz__bg img {
  filter: grayscale(1) contrast(1.08);
}
.hz--a .hz__veil {
  background: linear-gradient(180deg, rgba(10, 58, 69, 0.8) 0%, rgba(10, 58, 69, 0.88) 100%);
}
.hz--a,
.hz--c {
  color: #fff;
}
.hz--a h1,
.hz--c h1 {
  color: #fff;
}
.hz--a .acw,
.hz--c .acw {
  color: var(--acc2);
}
.hz--a .hz__k,
.hz--c .hz__k {
  color: var(--acc2);
}
.hz--a .hz__sub,
.hz--c .hz__sub {
  color: #d5e7ec;
}
.hz--a .hz__note,
.hz--c .hz__note {
  color: #a9c6cf;
}
.hz--a .hz__lk,
.hz--c .hz__lk {
  color: #fff;
}
.hz--a .b1,
.hz--c .b1 {
  background: var(--acc2);
  color: #0f0f12;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.hz--a .b1:hover,
.hz--c .b1:hover {
  background: #6fd0ea;
}

/* B — Claire : la photo reste visible sur les bords, un halo blanc porte le texte */
.hz--b .hz__bg img {
  filter: saturate(0.55) brightness(1.06);
}
.hz--b .hz__veil {
  background:
    radial-gradient(
      ellipse 56% 62% at 50% 50%,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.9) 55%,
      rgba(255, 255, 255, 0.55) 100%
    ),
    linear-gradient(180deg, rgba(234, 246, 251, 0.35), rgba(234, 246, 251, 0.6));
}
.hz--b .hz__k {
  color: var(--acc-btn-h);
}
.hz--b h1 {
  color: var(--ink);
}
.hz--b .hz__sub {
  color: #3d434c;
}
.hz--b .hz__note {
  color: var(--body);
}
.hz--b .hz__lk {
  color: var(--acc-ink);
}
.hz--b .b1 {
  box-shadow: 0 10px 26px rgba(9, 123, 153, 0.28);
}

/* C — Slogan : même nuit, titre émotionnel, la description passe en sous-titre */
.hz--c .hz__bg img {
  filter: grayscale(1) contrast(1.08);
  object-position: 50% 30%;
}
.hz--c .hz__veil {
  background: radial-gradient(
    ellipse 80% 70% at 50% 45%,
    rgba(10, 58, 69, 0.78),
    rgba(10, 58, 69, 0.94)
  );
}
.hz--c h1 {
  max-width: 12ch;
}
.hz--c .hz__sub {
  max-width: 42ch;
}

/* Bandeau de confiance : les faits, en une ligne sous le héros */
.trust {
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.trust__i {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 34px;
  padding-block: 18px;
}
.trust .fact {
  font-size: 0.86rem;
  color: var(--body);
}

@media (max-width: 640px) {
  .hz {
    min-height: 0;
  }
  .hz__i {
    padding: 56px 18px 64px;
  }
  .hz__cta {
    flex-direction: column;
    gap: 16px;
  }
  .hz__cta .b1 {
    width: 100%;
  }
  .hz--b .hz__veil {
    background: rgba(255, 255, 255, 0.86);
  }
  .trust__i {
    justify-content: flex-start;
    gap: 10px 18px;
  }
}
.hz[hidden],
[data-hero][hidden] {
  display: none !important;
}
.hz--a h1,
.hz--b h1 {
  max-width: 20ch;
}

/* ===================================================================
   v6 — « Ce qui bloque » : la phrase du parent, puis la réponse de Silex
   =================================================================== */
.blk2__g {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 56px;
  align-items: center;
}
.blk2__ph img {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  margin-inline: auto;
}
.pbs {
  list-style: none;
  margin-top: 28px;
  display: grid;
  gap: 14px;
}
.pb {
  display: grid;
  grid-template-columns: 1fr 34px 1fr;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: #fff;
}
.pb__q {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: start;
  padding: 18px 16px 18px 18px;
}
.pb__q .ic {
  background: #f2f4f7;
  color: var(--sec);
}
.pb__t {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sec);
}
.pb__q p {
  margin-top: 4px;
  font-size: 1rem;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.4;
}
.pb__ar {
  display: grid;
  place-items: center;
  color: var(--acc);
}
.pb__ar svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pb__a {
  background: var(--tint);
  padding: 18px 20px;
  border-left: 3px solid var(--acc2);
}
.pb__s {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--acc-btn-h);
}
.pb__a p {
  margin-top: 4px;
  font-size: 0.96rem;
  color: var(--acc-ink);
  line-height: 1.45;
}
@media (max-width: 960px) {
  .blk2__g {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .blk2__ph {
    display: none;
  }
}
@media (max-width: 640px) {
  .pb {
    grid-template-columns: 1fr;
  }
  .pb__ar {
    display: none;
  }
  .pb__a {
    border-left: 0;
    border-top: 3px solid var(--acc2);
  }
}

/* ===================================================================
   v6 — À propos : l'entreprise, sa mission, son écosystème, ses valeurs
   =================================================================== */
.ab-hero {
  text-align: center;
}
.ab-hero h1 {
  max-width: 20ch;
  margin: 16px auto 0;
}
.ab-hero .lead {
  max-width: 56ch;
  margin: 20px auto 0;
}
.mv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.mv .c h3 {
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-top: 10px;
}
.mv .c .kick {
  color: var(--acc-btn);
}
.eco2 {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 18px 220px;
  max-width: 900px;
  margin: 0 auto;
}
.eco2__hub {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 168px;
  height: 168px;
  border-radius: 50%;
  background: var(--acc2);
  color: #0f0f12;
  display: grid;
  place-items: center;
  text-align: center;
  z-index: 2;
  box-shadow:
    0 0 0 14px rgba(63, 179, 212, 0.16),
    0 0 0 30px rgba(63, 179, 212, 0.07);
}
.eco2__hub b {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  display: block;
}
.eco2__hub span {
  font-size: 0.78rem;
  font-weight: 600;
}
.eco2__n {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r);
  padding: 20px 22px;
}
.eco2__n h3 {
  color: #fff;
  font-size: 1.1rem;
}
.eco2__n p {
  color: var(--craie2);
  font-size: 0.93rem;
  margin-top: 4px;
}
.eco2__n:nth-child(odd) {
  text-align: right;
}
.eco2 svg.links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
@media (max-width: 760px) {
  .eco2 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .eco2__hub {
    position: static;
    transform: none;
    margin: 0 auto 10px;
    order: -1;
    width: 130px;
    height: 130px;
  }
  .eco2__n:nth-child(odd) {
    text-align: left;
  }
  .eco2 svg.links {
    display: none;
  }
  .mv {
    grid-template-columns: 1fr;
  }
}
.founder {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.founder blockquote {
  font-size: clamp(1.25rem, 2.3vw, 1.6rem);
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-top: 18px;
}
.founder .sig {
  margin-top: 26px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.founder .sig b {
  font-size: 1rem;
}
.founder .sig small {
  display: block;
  font-size: 0.84rem;
  color: var(--sec);
}
.li {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: #0a66c2;
  color: #fff;
}
.li svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.li:hover {
  background: #004182;
}

/* ---- v7 : Ce qui bloque (problème seul), phrase-pivot, plateforme ---- */
.blk3__g {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 56px;
  align-items: center;
}
.blk3__ph img {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  margin-inline: auto;
}
.prs {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.pr {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.pr:last-child {
  border-bottom: 1px solid var(--line);
}
.pr .ic {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: #f2f4f7;
  color: var(--sec);
  display: grid;
  place-items: center;
}
.pr .ic svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pr h3 {
  font-size: 1.12rem;
  letter-spacing: -0.01em;
}
.pr p {
  color: var(--sec);
  margin-top: 4px;
  font-size: 0.98rem;
  line-height: 1.55;
}
.pivot {
  margin: 72px auto 0;
  max-width: 900px;
  text-align: center;
  padding-top: 44px;
  position: relative;
}
.pivot::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 48px;
  height: 3px;
  border-radius: 2px;
  background: var(--acc2);
  transform: translateX(-50%);
}
.pivot p {
  text-wrap: balance;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.pivot span {
  color: var(--acc-btn);
}
.pls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.pl {
  padding: 26px 26px 6px 0;
}
.pl + .pl {
  padding-left: 26px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}
.pl h3 {
  color: #fff;
  font-size: 1.15rem;
}
.pl span {
  display: block;
  color: var(--acc2);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 6px;
}
.pl p {
  color: var(--craie2);
  margin-top: 10px;
}
.lkd {
  color: var(--acc2);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(63, 179, 212, 0.4);
  padding-bottom: 2px;
}
.lkd:hover {
  border-bottom-color: var(--acc2);
}
@media (max-width: 760px) {
  .blk3__g {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .blk3__ph {
    display: none;
  }
  .pivot {
    margin-top: 48px;
    padding-top: 32px;
  }
  .pls {
    grid-template-columns: 1fr;
  }
  .pl,
  .pl + .pl {
    padding: 20px 0;
    border-left: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  }
}
@media (max-width: 760px) {
  .hd h2 br,
  .blk3 h2 br {
    display: none;
  }
}

/* Blogue servi par Wix Blog : image insérée dans le corps d'un article. */
.prose .art__img {
  margin: 28px 0;
}
.prose .art__img img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  display: block;
}
.prose .art__img figcaption {
  font-size: 0.85rem;
  color: var(--mu, #5b6b70);
  margin-top: 8px;
}
.posts__vide {
  text-align: center;
  color: var(--mu, #5b6b70);
  padding: 40px 0;
}

/* ---- v8 : « Une seule plateforme », boucle circulaire ----
   Géométrie de référence : 642 × 330 (viewBox du SVG). Les libellés sont
   placés en % de ce cadre pour suivre l'échelle du dessin. */
.eco {
  position: relative;
  max-width: 820px;
  margin: 40px auto 0;
  aspect-ratio: 642 / 330;
}
.eco__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.eco__n {
  position: absolute;
}
.eco__n--el {
  left: 63.1%;
  top: 5.8%;
  width: 36.9%;
}
.eco__n--pro {
  left: 71.9%;
  top: 58.5%;
  width: 28.1%;
}
.eco__n--par {
  right: 71.9%;
  top: 58.5%;
  width: 28.1%;
  text-align: right;
}
.eco__k {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acc2);
}
.eco__n h3 {
  color: #fff;
  font-size: 1.08rem;
  margin-top: 4px;
}
.eco__n p:not(.eco__k) {
  color: var(--craie2);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-top: 4px;
  text-wrap: balance;
}
@media (max-width: 760px) {
  .eco {
    aspect-ratio: auto;
    margin-top: 28px;
    overflow: hidden;
  }
  .eco__svg {
    position: relative;
    display: block;
    width: 180%;
    height: auto;
    max-width: none;
    margin-left: -40%;
  }
  .eco__n,
  .eco__n--par {
    position: static;
    width: auto;
    text-align: left;
    padding: 16px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }
  .eco__n--el {
    margin-top: 18px;
  }
}

/* Version E : un seul « Essayer gratuitement » persistant sur mobile. Quand la barre du bas est
   affichée (.mbar.show, posée par silex-v3.js après 520 px), le bouton du menu s'efface. La place est
   gardée, pour que l'en-tête ne bouge pas. Sans :has() (navigateurs anciens), les deux restent. */
@media (max-width: 640px) {
  .nv__c .b1 {
    transition:
      opacity 0.25s ease,
      visibility 0.25s;
  }
  body:has(.mbar.show) .nv__c .b1 {
    opacity: 0;
    visibility: hidden;
  }
}

/* Version E : échelle typographique mobile. Les titres de section étaient presque aussi gros que le
   titre de page (30 px contre 32), sur trois ou quatre lignes, et les chapeaux à 17-18 px. On rétablit la
   hiérarchie : titre de page ≈ 30 px, titre de section ≈ 25 px, chapeau 16 px. Les tailles suivent la
   largeur sous 390 px (iPhone SE : 27 et 22 px). */
@media (max-width: 640px) {
  h1,
  .phero h1,
  .hx h1,
  .hz h1,
  .art__h h1 {
    font-size: clamp(1.7rem, 7.7vw, 1.9rem);
    line-height: 1.1;
    letter-spacing: -0.035em;
  }
  h2 {
    font-size: clamp(1.4rem, 6.4vw, 1.56rem);
    line-height: 1.16;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }
  .lead,
  .hx .lead,
  .hd > p {
    font-size: 1rem;
    line-height: 1.55;
  }
  .mv .c h3,
  .post--feat h3 {
    font-size: 1.18rem;
  }
  .prose h2 {
    font-size: 1.35rem;
  }
  .artcta h2 {
    font-size: 1.3rem;
  }
  .legal h2 {
    font-size: 1.2rem;
  }
}

/* Recette mobile de la version E4 (11 octobre 2026) — trois défauts mesurés au navigateur.
   1. À 360 px, l'en-tête dépassait de 2 px : le bouton du menu sortait de l'écran et toute la
      page défilait de côté (scrollWidth 362 contre clientWidth 360, sur les sept pages).
   2. Le bouton du menu ne faisait que 24 × 32 px : trop petit pour un pouce.
   3. Les champs du formulaire étaient à 15,2 px : sous 16 px, Safari sur iPhone agrandit la page
      dès qu'on touche un champ. */
@media (max-width: 960px) {
  .bg {
    padding: 8px;
    margin-right: -8px;
  }
}
@media (max-width: 640px) {
  #contact-form input,
  #contact-form select,
  #contact-form textarea {
    font-size: 16px;
  }
}
@media (max-width: 380px) {
  .nv__i {
    padding: 0 16px;
    gap: 12px;
  }
  .bg {
    margin-left: 2px;
  }
  .nv__c .b1 {
    padding-inline: 14px;
  }
  .mbar {
    gap: 8px;
    padding-inline: 14px;
  }
  .mbar .b {
    padding-inline: 14px;
  }
}

/* Recette mobile E4, seconde passe (11 octobre 2026). Rien ne change au-dessus de 960 px.
   a. « Se connecter » revient dans le menu ouvert (il n'était plus nulle part sous 960 px).
   b. Les cartes de tarifs restaient invisibles au premier écran d'un téléphone : l'apparition
      au défilement exige 10 % de la grille à l'écran, et la grille empilée fait 3 000 px.
   c. Les deux rangées du formulaire se touchaient (« Téléphone » collé au champ « Courriel »).
   d. Atelier de lecture : flèches de 16 × 24 px, en-tête serré.
   e. Étape 4 de la démonstration : le sous-titre sort de l'image (voir silex-e.js).
   f. Barre d'essai : « Essai gratuit de 7 jours » tient sur une ligne.
   g. Fin d'article : le bouton n'est pas un lien souligné. */
.nv__cx,
.xccs {
  display: none;
}
@media (max-width: 960px) {
  .prose .artcta a.b {
    text-decoration: none;
  }
  .nv.open .nv__l .nv__cx {
    display: block;
    margin-top: 6px;
    padding-top: 15px;
    border-top: 1px solid var(--line);
    font-weight: 600;
    color: var(--ink);
  }
  .price.rv {
    opacity: 1;
    transform: none;
  }
  .contact-row + .contact-row {
    margin-top: 16px;
  }
  .wr__pg button {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
  .wr__pg svg {
    width: 16px;
    height: 16px;
  }
}
@media (max-width: 640px) {
  .xccs {
    display: block;
    margin: 10px 0 0;
    min-height: 2.7em;
    font-size: 0.86rem;
    line-height: 1.35;
    font-weight: 600;
    text-align: center;
    color: var(--ink);
    white-space: pre-line;
  }
  .xccs[hidden] {
    display: none;
  }
  .wr__bar {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .wr__bar .kick {
    flex-basis: 100%;
  }
}
@media (max-width: 400px) {
  .mbar small b {
    font-size: 0.8rem;
    white-space: nowrap;
  }
  .mbar small {
    font-size: 0.74rem;
  }
}