/* ===================================================================
   Silex - design system « Cyan » v1.0
   Calé sur le rendu du site en ligne : clair, aéré, accent mérité.
   =================================================================== */

:root {
  --ink: #141416;
  --ink2: #0f0f12;
  --body: #5b5f67;
  --sec: #83878f;
  --line: #e9ecf1;
  --line2: #f1f3f7;
  --bg: #ffffff;
  --bg2: #f7fafc;
  --acc: #0b8fb2;
  --acc2: #3fb3d4;
  --acc-ink: #0a3a45;
  /* UX-U3-044 / AB#459 — l'aplat qui PORTE DU TEXTE BLANC. Ni `--acc2`
     (blanc = 2,44:1) ni `--acc` (blanc = 3,76:1) ne passent le seuil 4,5:1 de
     WCAG 1.4.3 pour du texte normal : le libellé des boutons fait 0,92 rem.
     Même teinte (192,6°), valeur abaissée jusqu'à 4,88:1 — mesuré, pas estimé.
     `--acc2` reste la couleur d'identité, mais seulement là où RIEN n'est
     écrit dessus (filets, pastilles, halos, dégradés). */
  --acc-btn: #097b99;
  --acc-btn-h: #076277;
  /* Famille ARDOISE du système de design (`tokens.json`, `color.ardoise` /
     `color.attention`) : ce qui est à reprendre, jamais en rouge. */
  --ardoise: #31506b;
  --tint: #eaf6fb;
  --tint2: #d6edf5;
  --r: 16px;
  --r-lg: 22px;
  --w: 1180px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}
body {
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
::selection {
  background: var(--tint);
  color: var(--acc-ink);
}

/* --- typo --- */
h1 {
  font-size: clamp(2.35rem, 4.2vw, 3.35rem);
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 1.1;
}
h2 {
  font-size: clamp(1.8rem, 3vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.18;
}
h3 {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.4;
}
p {
  color: var(--body);
}
.lead {
  font-size: 1.06rem;
  line-height: 1.65;
  color: var(--body);
}
.kick {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--acc);
}
.sm {
  font-size: 0.885rem;
  line-height: 1.6;
  color: var(--body);
}
.xs {
  font-size: 0.8rem;
  color: var(--sec);
}
.ink {
  color: var(--ink);
}

/* --- grille --- */
.w {
  max-width: var(--w);
  margin: 0 auto;
  padding-inline: 26px;
}
.s {
  padding-block: 92px;
  position: relative;
}
.s--alt {
  background: var(--bg2);
}
.hd {
  max-width: 620px;
  margin: 0 auto 52px;
  text-align: center;
}
.hd .kick {
  margin-bottom: 14px;
}
.hd h2 + p {
  margin-top: 16px;
}
.g3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.g2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.sp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

/* --- filigrane : très discret, comme en ligne --- */
.tex {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.045;
}

/* --- boutons --- */
.b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  border-radius: 9px;
  padding: 11px 20px;
  font-weight: 600;
  font-size: 0.92rem;
  transition: 0.18s;
  white-space: nowrap;
}
.b1 {
  color: #fff;
  /* blanc sur `--acc-btn` = 4,88:1 (AA texte normal). */
  background: var(--acc-btn);
}
.b1:hover {
  /* blanc sur `--acc-btn-h` = 6,95:1 — le survol ne descend jamais sous l'état
     de repos. */
  background: var(--acc-btn-h);
}
.b2 {
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
}
.b2:hover {
  border-color: var(--tint2);
  background: var(--tint);
}
.b3 {
  /* `--acc` sur blanc ne vaut que 3,76:1 — le brand book l'interdit d'ailleurs
     comme couleur de texte (`packages/design-system/src/tokens.ts`,
     `petroleSurBlanc`). `--acc-btn` sur blanc = 4,88:1. */
  color: var(--acc-btn);
  font-weight: 600;
  padding: 0;
}
.b3:hover {
  text-decoration: underline;
}
:focus-visible {
  outline: 2px solid var(--acc2);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --- carte --- */
.c {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px;
}
.c--tint {
  background: var(--tint);
  border-color: var(--tint2);
}
.ic {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--tint);
  color: var(--acc);
  display: grid;
  place-items: center;
  flex: none;
}
.ic svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--body);
}
.tag svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: var(--acc);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- nav --- */
.nv {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line2);
}
.nv__i {
  max-width: var(--w);
  margin: 0 auto;
  padding: 0 26px;
  height: 62px;
  display: flex;
  align-items: center;
  gap: 30px;
}
.lg {
  font-weight: 800;
  font-size: 1.22rem;
  letter-spacing: -0.04em;
}
.lg i {
  color: var(--acc);
  font-style: normal;
}
.nv__l {
  display: flex;
  gap: 24px;
  margin-left: auto;
  font-size: 0.885rem;
  font-weight: 500;
  color: var(--body);
}
.nv__l a:hover,
.nv__l a.on {
  color: var(--acc);
}
.nv__c {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 0.885rem;
}
.bg {
  display: none;
}
.bg svg {
  width: 24px;
  height: 24px;
  stroke: var(--ink);
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
}

/* --- héros --- */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #eff8fc 0%, #f7fcfd 46%, #fff 100%);
}
.hero__i {
  position: relative;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 56px;
  align-items: center;
  padding-block: 52px 68px;
}
.hero h1 {
  margin: 22px 0 20px;
}
.hero .lead {
  max-width: 44ch;
}
.mission {
  margin-top: 16px;
  font-style: italic;
  font-weight: 600;
  color: var(--acc-ink);
  font-size: 0.95rem;
  max-width: 44ch;
}
.cta-row {
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
  margin-top: 28px;
}
/* AB#621 — LA MENTION D'ESSAI, sous les boutons et non dessus.
   C'est une levée d'objection (« sans carte de crédit »), pas un argument de
   vente : elle se lit APRÈS la décision de cliquer, au moment où l'hésitation
   arrive. D'où le corps réduit et l'encre douce — visible, jamais criarde. */
.essai-note {
  margin-top: 12px;
  font-size: 0.84rem;
  color: var(--body);
  font-weight: 500;
}

.facts {
  display: flex;
  gap: 16px 20px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.fact {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--body);
}
.fact svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--acc);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* mot qui alterne */
.swap {
  color: var(--acc);
  display: inline-block;
  position: relative;
}
.swap span {
  display: inline-block;
  transition:
    opacity 0.34s ease,
    transform 0.34s ease;
}
.swap span.out {
  opacity: 0;
  transform: translateY(-0.22em);
}

/* --- scène héros : photo + fiches flottantes --- */
.scene {
  position: relative;
}
.scene__ph {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 22px 52px rgba(16, 40, 55, 0.13);
  aspect-ratio: 3/4;
  max-width: 356px;
  margin-left: auto;
}
.scene__ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fc {
  position: absolute;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(16, 40, 55, 0.12);
  padding: 13px 15px;
  z-index: 3;
}
.fc__t {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}
.fc__t b {
  font-size: 0.76rem;
  font-weight: 700;
}
.fc__t span {
  font-size: 0.66rem;
  /* `--acc` sur blanc = 3,76:1 : sous le seuil texte. `--acc-ink` = 12,32:1. */
  color: var(--acc-ink);
  font-weight: 600;
}
.fc__sub {
  font-size: 0.6rem;
  color: var(--body);
  margin: -5px 0 5px;
}
.chip {
  position: absolute;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: 0 10px 24px rgba(16, 40, 55, 0.1);
  padding: 8px 12px;
  z-index: 3;
}
.chip .kick {
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  color: var(--sec);
}
.chip b {
  font-size: 1.02rem;
  color: var(--acc);
  letter-spacing: -0.02em;
}

/* mini-lignes de fiche */
.ln {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  color: var(--body);
  padding: 3px 0;
}
.ln i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 0.55rem;
  font-style: normal;
  font-weight: 700;
}
.ln i.ok {
  background: var(--tint);
  color: var(--acc);
}
.ln i.no {
  background: #f2f3f6;
  color: #9aa0a6;
}
.ln i.wa {
  background: #fdf3e6;
  color: #b5761f;
}

/* --- démo : liste + panneau (modèle du site actuel) --- */
.demo {
  display: grid;
  grid-template-columns: 0.84fr 1.16fr;
  gap: 30px;
  align-items: start;
}
.dlist {
  display: grid;
  gap: 10px;
}
.di {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 13px;
  text-align: left;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 13px;
  padding: 15px 17px;
  transition: 0.18s;
  align-items: start;
}
.di:hover {
  border-color: var(--tint2);
}
.di.on {
  border-color: var(--acc2);
  background: var(--tint);
  box-shadow: 0 0 0 3px rgba(63, 179, 212, 0.1);
}
.di .ic {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #fff;
}
.di.on .ic {
  background: #fff;
  color: var(--acc);
}
.di h3 {
  font-size: 0.95rem;
}
.di p {
  font-size: 0.8rem;
  margin-top: 4px;
  line-height: 1.5;
}
.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pane {
  display: none;
  width: 100%;
}
.pane.on {
  display: block;
  animation: fi 0.38s ease;
}
@keyframes fi {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* mini-écran neutre à l'intérieur du panneau */
.mini {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.mini__t {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  border-bottom: 1px solid var(--line2);
  background: #fcfdfe;
}
.mini__t b {
  font-size: 0.74rem;
  font-weight: 700;
}
.mini__t .kick {
  font-size: 0.6rem;
  margin-left: auto;
  letter-spacing: 0.1em;
}
.mini__b {
  padding: 15px 16px;
  display: grid;
  gap: 12px;
}
.rl {
  background-image: repeating-linear-gradient(180deg, transparent 0 27px, #eff2f6 27px 28px);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 10px 14px;
}
.hw {
  font-family: 'Caveat', 'Bradley Hand', cursive;
  font-size: 22px;
  line-height: 28px;
  color: #14171c;
}
.crow {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--line2);
  align-items: start;
}
.crow:first-of-type {
  border-top: 0;
}
.crow > em {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.62rem;
  font-weight: 700;
  font-style: normal;
  margin-top: 1px;
}
.crow > em.ok {
  background: var(--tint);
  color: var(--acc);
}
.crow > em.no {
  background: #f2f3f6;
  color: #9aa0a6;
}
.crow > em.wa {
  background: #fdf3e6;
  color: #b5761f;
}
.crow p {
  font-size: 0.8rem;
  color: var(--ink);
}
.crow small {
  display: block;
  font-size: 0.73rem;
  color: var(--sec);
  border-left: 2px solid var(--tint2);
  padding-left: 9px;
  margin-top: 5px;
  line-height: 1.5;
}
mark {
  background: var(--tint);
  color: var(--acc-ink);
  border-radius: 4px;
  padding: 1px 5px;
}
.note {
  background: var(--tint);
  border-radius: 11px;
  padding: 11px 14px;
  font-size: 0.8rem;
  color: var(--acc-ink);
}
.seg {
  display: inline-flex;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 3px;
  gap: 3px;
}
.seg button {
  padding: 8px 18px;
  border-radius: 7px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--body);
  transition: 0.16s;
}
.seg button.on {
  background: var(--tint);
  color: var(--acc-ink);
}

/* --- boucle intégrée aux 3 temps --- */
.loop {
  position: relative;
}
.back {
  position: relative;
  margin-top: 26px;
  text-align: center;
}
.back::before {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  border-top: 1.6px dashed var(--tint2);
}
.back span {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  padding: 0 16px;
  font-size: 0.8rem;
  color: var(--body);
  font-weight: 500;
}
.back svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--acc);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px;
  position: relative;
}
.step__n {
  position: absolute;
  top: -13px;
  left: 26px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  /* Même défaut que `.b1` : chiffre blanc de 0,76 rem, donc seuil 4,5:1. */
  background: var(--acc-btn);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.76rem;
  font-weight: 700;
}
.gains {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 12px;
}

/* --- citation --- */
.quote {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 34px 40px;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.quote .qm {
  color: var(--acc2);
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 800;
}
.quote p {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
  margin-top: 10px;
  line-height: 1.5;
}

/* --- pied sombre (comme en ligne) --- */
.ft {
  background: var(--ink2);
  color: rgba(255, 255, 255, 0.58);
  padding-block: 58px 30px;
  font-size: 0.88rem;
}
.ft__g {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 36px;
}
.ft h4 {
  color: #fff;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.ft a {
  display: block;
  padding: 5px 0;
}
.ft a:hover {
  color: #fff;
}
.ft .lg {
  color: #fff;
  margin-bottom: 12px;
}
.ft p {
  color: rgba(255, 255, 255, 0.58);
}
.ft__b {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.8rem;
}

/* --- utils --- */
.mt6 {
  margin-top: 6px;
}
.mt10 {
  margin-top: 10px;
}
.mt14 {
  margin-top: 14px;
}
.mt20 {
  margin-top: 20px;
}
.mt28 {
  margin-top: 28px;
}
.mt40 {
  margin-top: 40px;
}
.ctr {
  text-align: center;
}
.rv {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.rv.in {
  opacity: 1;
  transform: none;
}
.ph {
  border-radius: var(--r-lg);
  box-shadow: 0 18px 44px rgba(16, 40, 55, 0.1);
}

@media (max-width: 960px) {
  .hero__i,
  .sp,
  .demo {
    grid-template-columns: 1fr;
    gap: 38px;
  }
  .hero__i {
    padding-block: 44px 60px;
  }
  .g3,
  .g2 {
    grid-template-columns: 1fr;
  }
  .scene__ph {
    margin-inline: auto;
    max-width: 300px;
  }
  .fc,
  .chip {
    position: static;
    box-shadow: none;
    margin-top: 12px;
    max-width: none;
  }
  .ft__g {
    grid-template-columns: 1fr 1fr;
  }
  .nv__l,
  .nv__c .b2 {
    display: none;
  }
  .bg {
    display: block;
    order: 3;
    margin-left: 12px;
  }
  .nv__c {
    order: 2;
    margin-left: auto;
  }
  .nv.open .nv__l {
    display: flex;
    position: absolute;
    top: 62px;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    padding: 14px 26px;
    border-bottom: 1px solid var(--line);
    gap: 0;
  }
  .nv.open .nv__l a {
    padding: 11px 0;
  }
  .back::before {
    display: none;
  }
}
@media (max-width: 640px) {
  .s {
    padding-block: 62px;
  }
  .w {
    padding-inline: 20px;
  }
  .ft__g {
    grid-template-columns: 1fr;
  }
  .quote {
    padding: 26px 22px;
  }
  .panel {
    padding: 14px;
    min-height: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html {
    scroll-behavior: auto;
  }
  .rv {
    opacity: 1;
    transform: none;
  }
}

.crow small em {
  font-style: italic;
}

/* =========== v4 : écrans réels, cadres d'appareil =========== */
.tab {
  background: #22252a;
  border-radius: 18px;
  padding: 9px;
  box-shadow: 0 20px 46px rgba(16, 40, 55, 0.18);
}
.tab img {
  border-radius: 10px;
  width: 100%;
  display: block;
}
.tab--sm {
  padding: 7px;
  border-radius: 14px;
  box-shadow: 0 14px 32px rgba(16, 40, 55, 0.16);
}
.tab--sm img {
  border-radius: 8px;
}
.phone {
  background: #22252a;
  border-radius: 28px;
  padding: 8px;
  box-shadow: 0 18px 42px rgba(16, 40, 55, 0.18);
  width: 100%;
  max-width: 216px;
}
.phone img {
  border-radius: 21px;
  width: 100%;
  display: block;
}
.phones {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}
.phones figure {
  text-align: center;
}
.phones figcaption {
  margin-top: 14px;
  font-size: 0.78rem;
  color: var(--sec);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* liste à puces du héros */
.bl {
  list-style: none;
  margin-top: 18px;
  display: grid;
  gap: 10px;
}
.bl li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 11px;
  align-items: start;
  font-size: 1rem;
  color: var(--ink);
  font-weight: 500;
}
.bl svg {
  width: 17px;
  height: 17px;
  margin-top: 5px;
  fill: none;
  stroke: var(--acc);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* panneau démo : écran réel encadré */
.shot {
  max-width: 100%;
}
.shot figcaption {
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--sec);
  text-align: center;
}

/* grille 3+2 « pourquoi choisir » */
.g32 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
}
.g32 > * {
  grid-column: span 2;
}
.g32 > *:nth-child(4),
.g32 > *:nth-child(5) {
  grid-column: span 3;
}

@media (max-width: 960px) {
  .g32 {
    grid-template-columns: 1fr;
  }
  .g32 > *,
  .g32 > *:nth-child(4),
  .g32 > *:nth-child(5) {
    grid-column: auto;
  }
}

.acw {
  color: var(--acc);
}

/* listes à coche (tarifs) */
.lst {
  list-style: none;
  margin: 20px 0 26px;
}
.chk {
  display: grid;
  grid-template-columns: 19px 1fr;
  gap: 10px;
  align-items: start;
  margin-top: 11px;
}
.chk svg {
  width: 16px;
  height: 16px;
  margin-top: 5px;
  fill: none;
  stroke: var(--acc);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.faq {
  border-top: 1px solid var(--line);
  max-width: 860px;
  margin-inline: auto;
}
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  padding: 19px 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  color: var(--acc);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1;
}
.faq details[open] summary::after {
  content: '\2013';
}
.faq p {
  padding-bottom: 19px;
  font-size: 0.92rem;
  max-width: 78ch;
}

/* ---------- utilitaires de marge manquants ---------- */
.mt16 {
  margin-top: 16px;
}
.mt22 {
  margin-top: 22px;
}
.mt26 {
  margin-top: 26px;
}
.mt30 {
  margin-top: 30px;
}
.mt44 {
  margin-top: 44px;
}

/* ---------- citation : paragraphe secondaire ---------- */
.quote p + p {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--body);
  margin-top: 20px;
}

/* ---------- tarifs ---------- */
.price {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
.pcard {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 30px;
  background: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
}
.pcard--pop {
  border: 1.5px solid var(--acc2);
  box-shadow: 0 16px 36px rgba(63, 179, 212, 0.18);
  background: linear-gradient(180deg, #f7fdfe, #fff 34%);
}
.pcard__tag {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  /* « Le plus choisi » : 0,72 rem blanc — même seuil, même correction. */
  background: var(--acc-btn);
  color: #fff;
  border-radius: 999px;
  padding: 5px 16px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}
.pcard__amt {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 14px 0 4px;
}
.pcard__amt sup {
  font-size: 1.15rem;
  font-weight: 700;
  vertical-align: super;
  margin-right: 2px;
}
.pcard .lst {
  flex: 1;
}
.pcard .b {
  width: 100%;
}

@media (max-width: 960px) {
  .price {
    grid-template-columns: 1fr;
    max-width: 430px;
    margin-inline: auto;
  }
}

/* Tarifs en TROIS colonnes — l'essai gratuit, les deux matières, une matière (AB#868,
   fondateur, 11 octobre 2026). Chaque carte a cinq rangées — en-tête, description, fonctions,
   crédits, boutons — et une sous-grille les aligne d'une carte à l'autre : les prix, les
   pastilles de crédits et les boutons tombent sur la même ligne. Une seule colonne sous 960 px. */
.price--3 .pcard {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  row-gap: 0;
}
.price--3 .pcard__h .pcard__amt {
  margin-top: 14px;
}
.price--3 .pcard > p.sm {
  margin-top: 16px;
}
.price--3 .pcard .lst {
  align-self: start;
}
.price--3 .cred {
  align-self: end;
}
.pcard__act {
  display: grid;
  gap: 8px;
  align-content: start;
}
.pcard__act .essai-note {
  margin-top: 2px;
  text-align: center;
}

/* ---------- héros de page interne ---------- */
.phero {
  position: relative;
  overflow: hidden;
  padding-block: 66px 52px;
  background: linear-gradient(180deg, #eff8fc 0%, #f7fcfd 55%, #fff 100%);
}
.phero h1 {
  font-size: clamp(2rem, 3.6vw, 2.85rem);
  margin: 16px 0 20px;
}
.phero .lead {
  max-width: 64ch;
}
@media (max-width: 640px) {
  .phero {
    padding-block: 44px 36px;
  }
}

/* ===================================================================
   Atelier graphique interactif
   =================================================================== */
.lab {
  display: grid;
  grid-template-columns: 1.22fr 0.78fr;
  gap: 26px;
  align-items: start;
}
.lab__stage {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px;
  position: relative;
}
.lab__stage svg {
  width: 100%;
  height: auto;
  display: block;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.lab__hint {
  position: absolute;
  left: 24px;
  top: 24px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 0.74rem;
  color: var(--body);
  font-weight: 600;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.lab__hint svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--acc);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lab__side {
  display: grid;
  gap: 14px;
}
.lab__card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px 22px;
}
.lab__card .kick {
  margin-bottom: 10px;
}
.lab__eq {
  font-size: 1.24rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--acc-ink);
  line-height: 1.35;
}
.lab__eq sup {
  font-size: 0.64em;
}
.lab__kv {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: baseline;
  padding: 7px 0;
  border-top: 1px solid var(--line2);
  font-size: 0.86rem;
}
.lab__kv:first-of-type {
  border-top: 0;
}
.lab__kv b {
  font-weight: 700;
  color: var(--ink);
}
.lab__kv b sup {
  font-size: 0.62em;
}
.lab__f {
  font-size: 0.8rem;
  color: var(--sec);
  margin-top: 4px;
  line-height: 1.5;
}
.lab__msg {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 15px;
  font-size: 0.84rem;
  color: var(--body);
  line-height: 1.55;
}
.lab__msg.ok {
  background: var(--tint);
  border-color: var(--tint2);
  color: var(--acc-ink);
}
.lab__msg strong {
  color: var(--ink);
}
.lab__msg.ok strong {
  color: var(--acc-ink);
}
.rng {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}
.rng label {
  font-size: 0.82rem;
  color: var(--body);
  min-width: 82px;
}
.rng output {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--acc);
  min-width: 34px;
  text-align: right;
}
.rng input[type='range'] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 3px;
  background: var(--tint2);
  outline: none;
}
.rng input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--acc2);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(16, 40, 55, 0.28);
  cursor: pointer;
}
.rng input[type='range']::-moz-range-thumb {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--acc2);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(16, 40, 55, 0.28);
  cursor: pointer;
}
.vt {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.vt th {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sec);
  text-align: left;
  padding: 0 0 6px;
  font-weight: 700;
}
.vt td {
  padding: 5px 0;
  border-top: 1px solid var(--line2);
  color: var(--ink);
}
.vt th:last-child,
.vt td:last-child {
  text-align: right;
}
.labtog {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 9px;
  padding: 9px 15px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink);
  transition: 0.16s;
}
.labtog:hover {
  border-color: var(--tint2);
  background: var(--tint);
}
.labtog.on {
  background: var(--tint);
  border-color: var(--acc2);
  color: var(--acc-ink);
}
@media (max-width: 960px) {
  .lab {
    grid-template-columns: 1fr;
  }
  .lab__hint {
    left: 20px;
    top: 20px;
    padding: 6px 11px;
    font-size: 0.72rem;
  }
}

/* ===================================================================
   v4.1 - bande cyan, imagettes du héros, glyphes décoratifs
   =================================================================== */

/* fine bande cyan au-dessus de certaines boîtes, pour le contraste */
.c--bar {
  position: relative;
  overflow: hidden;
}
.c--bar::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--acc) 0%, var(--acc2) 100%);
}

/* glyphes de l'alphabet Silex, agrandis, en décor discret */
.gly {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  fill: none;
  stroke: var(--acc);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.16;
}
.gly--f {
  stroke: #fff;
  opacity: 0.5;
}

/* imagettes flottantes du héros */
.mini {
  position: absolute;
  z-index: 3;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 16px 38px rgba(16, 40, 55, 0.16);
  background: #fff;
}
.mini img {
  width: 100%;
  display: block;
}
.mini--d {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 16px 40px rgba(10, 30, 42, 0.3);
}

/* -------------------------------------------------------------------------
   CARTE D'APERÇU DE L'ESPACE PARENT (héros) — UX-U3-045 / AB#504
   -------------------------------------------------------------------------
   Ce bloc remplace `.pg` / `.bar` / `.spark` / `.pcts` : une barre de largeur
   proportionnelle, une courbe de progression et un « 78 % » étaient le
   vocabulaire d'un produit que Silex n'est pas. INVARIANT PRODUIT (PP-3,
   `packages/shared/src/types/parent.ts` l.18-21) : jamais un niveau agrégé,
   jamais une moyenne, jamais un pourcentage de maîtrise. Les savoirs se
   comptent en TROIS PANIERS NOMMÉS.

   NE PAS RÉINTRODUIRE de règle de largeur proportionnelle ici : c'est
   exactement ce que `EchelleMaitrise` (4 crans discrets) rend impossible par
   construction dans l'application.

   Grammaire reprise de `apps/mobile/app/(parent)/accueil.tsx` :
   sous-titre · phrase-verdict · fait daté · sept pastilles de jours ·
   paniers dénombrés.
   ------------------------------------------------------------------------- */
.fc__v {
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink);
}
.fc__f {
  font-size: 0.66rem;
  line-height: 1.4;
  color: var(--body);
  margin-top: 4px;
}
/* Les sept jours de la semaine — `.week-dots` de la maquette v5, portée ici.
   Une pastille est faite ou ne l'est pas : deux états, aucun entre-deux. */
.wdots {
  display: flex;
  gap: 5px;
  margin-top: 8px;
}
.wd {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 0.55rem;
  /* `--sec` ne vaut que 3,60:1 sur blanc : `--body` = 6,41:1. */
  color: var(--body);
  flex: 1;
}
.wd i {
  width: 100%;
  max-width: 17px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 0.55rem;
  font-weight: 700;
  font-style: normal;
  color: transparent;
}
.wd--on i {
  background: var(--tint);
  border-color: var(--tint);
  color: var(--acc-ink);
}
.wd--today i {
  border-color: var(--acc);
}
/* Les trois paniers dénombrés — `LIBELLE_PANIER`
   (`packages/api/src/modules/parent/paniers.ts`) : « Acquis », « En cours »,
   « À revoir ». Des DÉNOMBREMENTS de savoirs, jamais une part d'un tout. */
.pans {
  display: flex;
  gap: 5px;
  margin-top: 9px;
}
.pan {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 5px 4px;
  text-align: center;
  font-size: 0.55rem;
  line-height: 1.3;
  color: var(--body);
}
.pan b {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--acc-ink);
}
/* « À revoir » prend la famille ARDOISE, jamais le rouge : un panier de
   travail n'est pas une alerte (PP-7, `src/features/parent/Paniers.tsx`). */
.pan--rev b {
  color: var(--ardoise);
}
.fc__s {
  font-size: 0.6rem;
  color: var(--body);
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--line2);
}
.fc__s b {
  font-weight: 600;
  color: var(--ink);
}

/* bouton « suivant » de la démonstration */
.nextb {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 8px 15px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--acc-ink);
  transition: 0.16s;
}
.nextb:hover {
  border-color: var(--acc2);
  background: var(--tint);
}
.nextb svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--acc);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dots {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-left: auto;
}
.dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line);
  display: block;
  transition: 0.2s;
}
.dots i.on {
  background: var(--acc2);
  width: 18px;
  border-radius: 3px;
}
.dnav {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}

/* ===================================================================
   Atelier d'écriture interactif
   =================================================================== */
.wr {
  display: grid;
  grid-template-columns: 1.22fr 0.78fr;
  gap: 26px;
  align-items: start;
}
.wr__stage {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 0;
  overflow: hidden;
}
.wr__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line2);
  background: var(--bg2);
}
.wr__bar b {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink);
}
.wr__bar .kick {
  font-size: 0.6rem;
  letter-spacing: 0.13em;
}
.wr__pg {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  color: var(--sec);
}
.wr__pg button {
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  display: grid;
  place-items: center;
  transition: 0.16s;
}
.wr__pg button:hover:not(:disabled) {
  border-color: var(--acc2);
  background: var(--tint);
}
.wr__pg button:disabled {
  opacity: 0.4;
  cursor: default;
}
.wr__pg svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--acc-ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wr__body {
  padding: 24px 26px;
  min-height: 352px;
}

/* le texte à lire */
.tx {
  font-size: 0.95rem;
  line-height: 1.78;
  color: var(--ink);
  max-width: 56ch;
}
.tx p + p {
  margin-top: 13px;
}
.tx mark {
  background: transparent;
  color: inherit;
  transition: 0.3s;
  border-radius: 3px;
  padding: 1px 2px;
}
.tx.hl mark {
  background: var(--tint2);
  box-shadow: 0 0 0 3px var(--tint2);
}

/* le plan du texte */
.plan {
  display: grid;
  gap: 2px;
  margin-top: 6px;
}
.plan div {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 9px;
  align-items: start;
  padding: 7px 8px;
  border-radius: 8px;
  font-size: 0.78rem;
  color: var(--sec);
  transition: 0.2s;
}
.plan div.on {
  background: var(--tint);
  color: var(--acc-ink);
}
.plan i {
  font-style: normal;
  font-weight: 700;
  font-size: 0.66rem;
  color: var(--acc);
  padding-top: 2px;
}
.plan b {
  font-weight: 600;
  color: inherit;
}

/* la question */
.qz {
  margin-top: 20px;
  border-top: 1px solid var(--line2);
  padding-top: 18px;
}
.qz > b {
  display: block;
  font-size: 0.9rem;
  color: var(--ink);
  margin-bottom: 11px;
}
.qz button {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 11px;
  padding: 11px 14px;
  font-size: 0.855rem;
  color: var(--body);
  margin-bottom: 8px;
  transition: 0.16s;
}
.qz button:hover {
  border-color: var(--tint2);
  background: var(--bg2);
}
.qz button.ok {
  border-color: var(--acc2);
  background: var(--tint);
  color: var(--acc-ink);
  font-weight: 600;
}
.qz button.ko {
  border-color: #ebd3d3;
  background: #fdf6f6;
  color: #8c4b4b;
}

/* la page d'écriture */
.cv {
  border: 1px solid var(--line2);
  border-radius: 12px;
  background: repeating-linear-gradient(180deg, #fff 0 37px, var(--line2) 37px 38px);
  padding: 14px 18px 18px;
}
.hw {
  font-family: Caveat, 'Segoe Script', 'Bradley Hand', cursive;
  font-size: 1.42rem;
  line-height: 38px;
  color: #26406b;
  letter-spacing: 0.01em;
}
.hw span {
  position: relative;
  transition: 0.25s;
}
.hw .er {
  background: linear-gradient(transparent 76%, #f3c9c9 76%);
}
.hw .er.show {
  background: linear-gradient(transparent 74%, #e88a8a 74%);
}
.hw .cur {
  border-right: 2px solid var(--acc2);
  animation: bl 1.05s step-end infinite;
  padding-right: 1px;
}
@keyframes bl {
  50% {
    border-color: transparent;
  }
}

/* les annotations de correction */
.an {
  display: grid;
  gap: 9px;
  margin-top: 4px;
}
.an__i {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 11px 13px;
  background: #fff;
  opacity: 0;
  transform: translateY(5px);
  transition: 0.34s;
}
.an__i.in {
  opacity: 1;
  transform: none;
}
.an__i em {
  font-style: normal;
  font-weight: 700;
  font-size: 0.78rem;
  color: #b5464f;
  background: #fdf1f1;
  border-radius: 6px;
  padding: 3px 8px;
  white-space: nowrap;
}
.an__i p {
  font-size: 0.79rem;
  line-height: 1.5;
  margin: 0;
}
.an__i p b {
  color: var(--ink);
  font-weight: 600;
}
.rac {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.rac span {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--acc-ink);
  background: var(--tint);
  border: 1px solid var(--tint2);
  border-radius: 999px;
  padding: 5px 11px;
}
.wr__side {
  display: grid;
  gap: 14px;
}
.wr__card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px 22px;
}
.wr__card .kick {
  margin-bottom: 10px;
}
.wr__note {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 15px;
  font-size: 0.84rem;
  color: var(--body);
  line-height: 1.55;
}
.wr__note strong {
  color: var(--ink);
}
.wr__note.ok {
  background: var(--tint);
  border-color: var(--tint2);
  color: var(--acc-ink);
}
.wr__note.ok strong {
  color: var(--acc-ink);
}
@media (max-width: 960px) {
  .wr {
    grid-template-columns: 1fr;
  }
  .wr__body {
    padding: 20px;
    min-height: 0;
  }
  .hw {
    font-size: 1.3rem;
  }
}

/* --- bascule mensuel / annuel et mention des crédits --- */
.bill {
  display: flex;
  justify-content: center;
  margin-bottom: 34px;
}
.bill .seg button {
  position: relative;
}
.save {
  display: inline-block;
  margin-left: 7px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--acc-ink);
  background: var(--tint2);
  border-radius: 999px;
  padding: 2px 7px;
  vertical-align: 1px;
}
.pcard__per {
  font-size: 0.8rem;
  color: var(--sec);
  margin-top: 3px;
}
.cred {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 12px;
  border: 1px solid var(--tint2);
  background: var(--tint);
  border-radius: 11px;
}
.cred svg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: var(--acc);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cred b {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--acc-ink);
}
.cred sup {
  font-size: 0.7em;
  color: var(--acc);
}
.foot-note {
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--sec);
  max-width: 64ch;
  margin-inline: auto;
}
.foot-note sup {
  color: var(--acc);
  font-weight: 700;
}

/* les glyphes décoratifs débordent sur petit écran : on les réserve au grand format */
@media (max-width: 860px) {
  .gly {
    display: none;
  }
}

/* --- placement des imagettes du héros — AB#621 ---------------------------
 *
 * Elles couvraient le visage de l'élève. Sur un portrait 3/4, le visage occupe
 * à peu près le tiers supérieur : c'est la zone qu'aucune imagette ne doit
 * mordre, parce que c'est elle qui porte le regard et la confiance.
 *
 * La photo étant collée à DROITE (`.scene__ph { margin-left: auto }`), toute la
 * colonne de gauche est libre. On s'en sert : les deux imagettes de gauche
 * descendent sous la ligne des yeux, et celle de droite — la seule qui chevauche
 * vraiment la photo — reste basse, sur le buste.
 *
 * Et on les ÉCHELONNE plutôt que de les aligner : trois tailles décroissantes
 * de haut en bas, pour que l'œil suive une diagonale au lieu de buter sur trois
 * blocs de même poids. La carte `sc-b`, qui porte du contenu réel, reste la plus
 * grande — c'est elle qu'on doit lire.
 */
.sc-a {
  left: -44px;
  top: 3%;
  width: 196px;
}
.sc-b {
  left: -18px;
  bottom: 6%;
  width: 244px;
  padding: 14px 15px;
}
.sc-c {
  right: -6px;
  bottom: 32%;
  width: 180px;
}
@media (max-width: 900px) {
  /* La colonne se resserre : les imagettes mordent alors vraiment la photo.
     On les rapetisse ET on les descend encore, pour que le visage reste net. */
  .sc-a {
    left: -18px;
    top: 38%;
    width: 168px;
  }
  .sc-b {
    left: -4px;
    bottom: 2%;
    width: 208px;
  }
  .sc-c {
    right: -12px;
    bottom: 26%;
    width: 156px;
  }
}
@media (max-width: 560px) {
  .scene__ph {
    max-width: 100%;
  }
  .sc-a {
    left: 0;
    top: 2%;
    width: 158px;
  }
  .sc-b {
    left: 0;
    bottom: 2%;
    width: 178px;
    padding: 11px 12px;
  }
  .sc-c {
    right: 0;
    bottom: 19%;
    width: 146px;
  }
}

/* ===================================================================
   FORMULAIRE DE CONTACT — repris du site précédent, réhabillé v4.
   -------------------------------------------------------------------
   Les règles d'origine référençaient `--card`, `--radius` et
   `--radius-lg`, qui n'existent PAS dans cette feuille : les recopier
   telles quelles aurait donné une carte sans fond ni arrondi. Elles sont
   donc retranscrites sur les jetons d'ici (`--line`, `--r-lg`, `--acc`).
   Le comportement, lui, est identique — même point de chute.
   =================================================================== */
.contact-card {
  position: relative;
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 22px 54px rgba(20, 30, 50, 0.1);
  padding: 34px;
  margin-top: 34px;
}
.contact-card .lab {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  margin: 16px 0 6px;
}
.contact-card .lab:first-of-type {
  margin-top: 0;
}
.contact-card input,
.contact-card select,
.contact-card textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.95rem;
  background: #fff;
  color: var(--ink);
}
.contact-card input:focus,
.contact-card select:focus,
.contact-card textarea:focus {
  outline: 2px solid var(--acc2);
  outline-offset: 2px;
  border-color: var(--acc);
}
.contact-card textarea {
  resize: vertical;
  min-height: 120px;
}
.contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.contact-card .b {
  width: 100%;
  justify-content: center;
  margin-top: 22px;
}
/* Pot de miel : hors écran, jamais atteignable au clavier. */
.contact-hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  opacity: 0;
  pointer-events: none;
}
.form-msg {
  margin-top: 14px;
  font-size: 0.87rem;
  border-radius: 10px;
  padding: 11px 13px;
  display: none;
}
.form-msg.on {
  display: block;
}
.form-msg.ok {
  background: rgba(21, 154, 99, 0.1);
  color: #159a63;
}
.form-msg.err {
  background: rgba(217, 60, 60, 0.1);
  color: #c0392b;
}
@media (max-width: 640px) {
  .contact-row {
    grid-template-columns: 1fr;
  }
}