/* Vitrine Clinix : design clair et produit (DECISIONS_DESIGN.md). Aucune bibliothèque, aucune ressource tierce. */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --brand: #005394;
  --brand-600: #0b66ad;
  --brand-700: #00467d;
  --brand-800: #003864;
  --brand-100: #d8e8f5;
  --brand-50: #eef5fc;
  --ink: #0e1c2f;
  --text: #3a4759;
  --muted: #5b6879;
  --line: #e2e8f0;
  --line-strong: #cdd7e2;
  --surface: #ffffff;
  --surface-alt: #f3f7fb;
  /* Fond des cartes : elles se détachent par leur fond, sans bordure (modèle Tebra). */
  --card: #fff;
  --navy: #0a1f35;
  /* Troisième couleur (2026-10-13) : ce qui est mis en avant, une carte par groupe, badges, décors. Jamais un
     bouton, un lien ni du texte courant ; le texte posé dessus est foncé (contraste 6,8:1). */
  --accent: #f5892e;
  --accent-soft: #fdead8;
  --whatsapp: #127a45;
  --whatsapp-700: #0e6639;
  --success: #126c34;
  --danger: #b42318;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --shadow-sm: 0 1px 2px rgb(14 40 70 / 0.06);
  --shadow: 0 1px 2px rgb(14 40 70 / 0.05), 0 14px 34px -14px rgb(14 40 70 / 0.2);
  --shadow-lg: 0 2px 4px rgb(14 40 70 / 0.04), 0 30px 60px -22px rgb(14 40 70 / 0.32);
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --container: 1200px;
  --gutter: 16px;
  --header-h: 68px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* Rythme vertical (2026-10-16) : une seule marge de section ; entre deux blocs de contenu, deux marges (112 px sur
     ordinateur, 72 px sur téléphone). Les bandes colorées ont un peu plus d'air à l'intérieur. */
  --section-pad: clamp(2.25rem, 1.5rem + 2.2vw, 3.5rem);
  --band-pad: clamp(3rem, 2rem + 3vw, 4.75rem);
  /* Échelle de texte (2026-10-16) : neuf rôles, pas de taille hors de cette liste en dehors des fragments qui
     imitent l'interface du logiciel. */
  --fs-display: clamp(2.1rem, 1.3rem + 2.4vw, 3.25rem);
  --fs-title: clamp(1.75rem, 1.3rem + 1.9vw, 2.6rem);
  --fs-subtitle: clamp(1.4rem, 1.2rem + 0.8vw, 1.85rem);
  --fs-card: 1.25rem;
  --fs-lead: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.9rem;
  --fs-label: 0.8rem;
  --fs-eyebrow: 0.9rem;
}

@media (min-width: 640px) {
  :root {
    --gutter: 24px;
  }
}

/* Couleurs de fond (2026-10-16, validées sur l'accueil puis étendues à tout le site) : la page en vert d'eau très pâle,
   tiré du cyan du logo (#0090d4) et poussé vers le vert ; les cartes et panneaux en bleu pâle plus dense que l'ancien
   (#f3f7fb), pour se détacher du vert (l'abricot, essayé le même jour, n'a pas été retenu : « je préfère le bleu »).
   Les sections n'ont plus de fond à elles : plus de bandes alternées. Seul le ruban de l'accueil (.trust) garde son
   fond blanc, sans bordure. Une couleur par rôle, quelle que soit la section (2026-10-16) : questions, étapes, termes
   et cases en blanc sur le vert d'eau ; offres (formules, options, canaux) et grands panneaux (diapositives, scène du
   parcours) en bleu pâle ; sur un fond blanc, le bleu pâle. Le vert reste le fond de la page, jamais celui d'un bloc. */
:root {
  --tint: #f0f9f7;
  --surface-alt: #dfeaf8;
}

body .hero,
body .page-hero,
body .section-alt {
  background: transparent;
}

/* La barre de navigation prend la couleur de la page ; au défilement, l'ombre seule la sépare (pas de filet). */
body .site-header {
  background: var(--tint);
}

body .site-header.is-scrolled {
  border-bottom-color: transparent;
}

@media (min-width: 1024px) {
  :root {
    --gutter: 32px;
    --header-h: 76px;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  padding-bottom: 76px;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--tint);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

img,
video {
  height: auto;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h2 {
  font-size: var(--fs-title);
  font-weight: 750;
}

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid #5aa3dd;
  outline-offset: 2px;
  border-radius: 6px;
}

.sprite {
  position: absolute;
  overflow: hidden;
}

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  top: 1rem;
}

/* --- Boutons et liens ------------------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 46px;
  padding: 0.7rem 1.35rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.975rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 0.2s var(--ease),
    border-color 0.2s var(--ease),
    color 0.2s var(--ease),
    transform 0.2s var(--ease);
}

.btn:active {
  transform: translateY(1px) scale(0.99);
}

.btn-sm {
  min-height: 40px;
  padding: 0.5rem 1.05rem;
  font-size: 0.9rem;
}

.btn-lg {
  min-height: 52px;
  padding: 0.85rem 1.6rem;
  font-size: 1rem;
}

.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 8px 18px -10px rgb(0 83 148 / 0.7);
}

.btn-primary:hover {
  background: var(--brand-700);
}

.btn-secondary {
  border-color: var(--line-strong);
  background: #fff;
  color: var(--ink);
}

.btn-secondary:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.btn-ghost {
  padding-inline: 0.4rem 0.8rem;
  background: transparent;
  color: var(--ink);
}

.btn-ghost:hover {
  color: var(--brand);
}

.btn-ghost .icon {
  width: 2.1rem;
  height: 2.1rem;
  padding: 0.55rem;
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--brand);
}

.btn-light {
  background: #fff;
  color: var(--brand-800);
}

.btn-light:hover {
  background: var(--brand-50);
}

.btn-whatsapp {
  background: var(--whatsapp);
  color: #fff;
}

.btn-whatsapp:hover {
  background: var(--whatsapp-700);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--brand);
  font-weight: 650;
  text-decoration: none;
}

.link-arrow .icon {
  width: 1.1em;
  height: 1.1em;
  transition: transform 0.2s var(--ease);
}

.link-arrow:hover .icon {
  transform: translateX(3px);
}

.icon-btn {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
}

.icon-btn:hover {
  background: var(--surface-alt);
}

.icon-btn-light {
  border-color: rgb(255 255 255 / 0.22);
  background: rgb(255 255 255 / 0.1);
  color: #fff;
}

.icon-btn-light:hover {
  background: rgb(255 255 255 / 0.2);
}

/* --- Titres de section ------------------------------------------------------------------------------------ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  color: var(--brand);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

/* Signature de la vitrine : la ligne de pouls du logo Clinix, en orange, devant chaque pastille. */
.eyebrow::before {
  content: '';
  flex: none;
  width: 1.75rem;
  height: 0.9rem;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 16'%3E%3Cpath d='M1 8h8l2.5-5.5 4 11 3-8 2 2.5H31' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 16'%3E%3Cpath d='M1 8h8l2.5-5.5 4 11 3-8 2 2.5H31' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center / contain;
}

.section {
  padding-block: var(--section-pad);
}

.section-alt {
  background: var(--surface-alt);
}

.section-head {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem);
}

.section-head-center {
  margin-inline: auto;
  text-align: center;
}

.section-intro {
  max-width: 40rem;
  margin-top: 1rem;
  color: var(--muted);
  font-size: var(--fs-lead);
}

.section-head-center .section-intro {
  margin-inline: auto;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.check-list .icon {
  width: 1.3rem;
  height: 1.3rem;
  margin-top: 0.15rem;
  padding: 3px;
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--brand);
  stroke-width: 2.4;
}

/* --- En-tête et grand menu -------------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid transparent;
  background: #fff;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 8px 24px -20px rgb(14 40 70 / 0.45);
}

.header-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: opacity 0.15s;
}

.brand:hover {
  opacity: 0.92;
}

.brand img {
  width: 114px;
  height: auto;
}

@media (min-width: 1024px) {
  .brand img {
    width: 124px;
  }
}

.menu-toggle {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  transition:
    background-color 0.15s,
    border-color 0.15s;
}

.menu-toggle:hover {
  background: var(--surface-alt);
  border-color: var(--line-strong);
}

.menu-toggle .icon {
  width: 22px;
  height: 22px;
}

.menu-toggle .icon-close,
.menu-toggle[aria-expanded='true'] .icon-open {
  display: none;
}

.menu-toggle[aria-expanded='true'] .icon-close {
  display: block;
}

.main-nav {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 39;
  display: none;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0.5rem var(--gutter) 2rem;
  border-top: 1px solid var(--line);
  background: #fff;
  overflow-y: auto;
}

.main-nav.is-open {
  display: flex;
}

body.menu-open {
  overflow: hidden;
}

.nav-list {
  display: flex;
  flex-direction: column;
}

.nav-item {
  border-bottom: 1px solid var(--line);
}

.nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
  width: 100%;
  padding: 1rem 0.25rem;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 650;
  text-align: left;
  text-decoration: none;
}

.icon-chevron {
  width: 1.05em;
  height: 1.05em;
  transition: transform 0.2s var(--ease);
}

.nav-link[aria-expanded='true'] .icon-chevron {
  transform: rotate(180deg);
}

/* Page en cours : lien en bleu, avec un trait sous le libellé sur ordinateur. */
.nav-link[aria-current='page'],
.nav-link.is-current {
  color: var(--brand);
}

.mega {
  padding-bottom: 1rem;
}

.mega-title {
  display: none;
}

.mega-grid {
  display: grid;
  gap: 0.15rem;
}

.mega-link {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  text-decoration: none;
  transition:
    background-color 0.18s var(--ease),
    transform 0.18s var(--ease);
}

.mega-link:hover {
  background: var(--surface-alt);
  transform: translateX(2px);
}

.mega-link .icon {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0.5rem;
  border-radius: 8px;
  background: var(--brand-50);
  color: var(--brand);
  transition:
    background-color 0.18s var(--ease),
    color 0.18s var(--ease);
}

.mega-link:hover .icon {
  background: var(--brand);
  color: #fff;
}

.mega-link b {
  display: block;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.3;
  transition: color 0.18s var(--ease);
}

.mega-link:hover b {
  color: var(--brand);
}

.mega-link small {
  display: block;
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.4;
}

.mega-all {
  margin: 0.5rem 0.6rem 0;
  font-size: var(--fs-small);
}

.nav-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
}

.nav-actions .btn {
  width: 100%;
  min-height: 50px;
}

.lang-switch {
  display: inline-flex;
  align-self: flex-start;
  gap: 0.2rem;
  padding: 0.22rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
}

.lang-switch a,
.lang-switch span {
  display: inline-grid;
  place-items: center;
  min-width: 2.4rem;
  height: 2rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition:
    background-color 0.15s,
    color 0.15s;
}

.lang-switch a:hover {
  background: var(--surface-alt);
  color: var(--brand);
}

.lang-switch [aria-current='true'] {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 2px 6px -1px rgb(0 83 148 / 0.4);
}

.lang-switch span[aria-disabled] {
  opacity: 0.4;
}

@media (min-width: 1024px) {
  /* Le flou fait de l'en-tête le cadre des éléments fixes : réservé à l'ordinateur, où le menu n'est pas fixe. */
  .site-header {
    background: rgb(255 255 255 / 0.94);
    backdrop-filter: saturate(160%) blur(12px);
  }

  .menu-toggle {
    display: none;
  }

  .main-nav {
    position: static;
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding: 0;
    border: 0;
    background: none;
    overflow: visible;
  }

  .nav-list {
    flex-direction: row;
    gap: 0.1rem;
    margin-inline: auto;
  }

  .nav-item {
    position: relative;
    border: 0;
  }

  .nav-link {
    width: auto;
    padding: 0.55rem 0.8rem;
    border-radius: 999px;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 600;
  }

  .nav-link:hover,
  .nav-link[aria-expanded='true'] {
    background: var(--surface-alt);
    color: var(--ink);
  }

  .nav-link[aria-current='page'],
  .nav-link.is-current {
    position: relative;
    color: var(--brand);
  }

  .nav-link[aria-current='page']::after,
  .nav-link.is-current::after {
    content: '';
    position: absolute;
    right: 0.8rem;
    bottom: 0.15rem;
    left: 0.8rem;
    height: 2px;
    border-radius: 2px;
    background: var(--brand);
  }

  .mega {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    width: min(720px, 90vw);
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow-lg);
    transform: translateX(-34%);
  }

  .mega:not([hidden]) {
    animation: mega-in 0.22s var(--ease);
  }

  .mega::before {
    content: '';
    position: absolute;
    inset: -16px 0 auto;
    height: 16px;
  }

  .mega-narrow {
    width: min(440px, 90vw);
  }

  .mega-inner {
    padding: 1.1rem;
  }

  .mega-title {
    display: block;
    margin: 0.2rem 0.6rem 0.6rem;
    color: var(--muted);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .mega-grid {
    grid-template-columns: 1fr 1fr;
  }

  .mega-narrow .mega-grid {
    grid-template-columns: 1fr;
  }

  .mega-all {
    display: flex;
    margin-top: 0.75rem;
    padding: 0.9rem 0.6rem 0.2rem;
    border-top: 1px solid var(--line);
  }

  .nav-actions {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
  }

  .nav-actions .btn {
    width: auto;
    min-height: 40px;
  }

  .lang-switch a,
  .lang-switch span {
    min-width: 2.1rem;
    height: 1.8rem;
  }
}

@keyframes mega-in {
  from {
    opacity: 0;
    transform: translate(-34%, -6px);
  }

  to {
    opacity: 1;
    transform: translate(-34%, 0);
  }
}

/* --- Haut de l'accueil : titre centré, puis trois tuiles (indicateurs, accueil, dossier du patient) ---------- */
.hero {
  padding-block: clamp(1.25rem, 0.75rem + 1.6vw, 2.25rem) var(--section-pad);
  background: var(--surface-alt);
}

.hero-head {
  max-width: calc(58rem + 2 * var(--gutter));
  text-align: center;
}

.hero h1 {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.025em;
}

.accent-text {
  color: var(--brand);
}

/* Preuve sous les cartes du haut : une ligne, bouclier vert (le signe de confiance). */
.hero-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 1.5rem;
  color: var(--text);
  font-size: var(--fs-small);
  font-weight: 500;
  text-align: center;
}

.hero-proof .icon {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  color: var(--success);
  stroke-width: 2.2;
}

.hero-text {
  max-width: 40rem;
  margin: 1rem auto 0;
  font-size: var(--fs-lead);
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.btn-outline {
  border-color: var(--ink);
  background: transparent;
  color: var(--ink);
}

.btn-outline:hover {
  background: var(--ink);
  color: #fff;
}

.hero-tiles {
  display: grid;
  gap: 1rem;
  margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem);
}

.tile {
  position: relative;
  min-height: 22rem;
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
}

.tile-stats,
.tile-product {
  background: var(--navy);
}

/* Tuile des indicateurs : trois cartes d'interface, illustratives. */
.tile-stats {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 0.7rem;
  padding: 1rem;
}

.ui-card {
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 26px -14px rgb(0 0 0 / 0.55);
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.35;
}

.ui-title {
  margin-bottom: 0.55rem;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 700;
}

.ring-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.ring {
  position: relative;
  flex: none;
  width: 4.6rem;
  height: 4.6rem;
}

.ring svg {
  width: 100%;
  height: 100%;
}

.ring circle {
  fill: none;
  stroke-width: 9;
}

.ring-track {
  stroke: var(--brand-100);
}

.ring-value {
  stroke: var(--brand);
  stroke-linecap: round;
}

.ring span {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}

.ring b {
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ring small {
  color: var(--muted);
  font-size: 0.62rem;
}

.ring-legend {
  display: grid;
  gap: 0.3rem;
}

.ring-legend li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--brand-100);
}

.dot-on {
  background: var(--brand);
}

.ui-queue ul {
  display: grid;
  gap: 0.45rem;
}

.ui-queue li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--brand-600);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
}

.queue-name {
  flex: 1;
  overflow: hidden;
  color: var(--ink);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status {
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
}

.status-on {
  background: #e3f4ea;
  color: var(--success);
}

.cash-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0.5rem;
}

.cash-row small {
  display: block;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cash-row b {
  color: var(--ink);
  font-size: 0.98rem;
  font-variant-numeric: tabular-nums;
}

.cash-note {
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

/* Tuile de l'accueil : capture réelle assombrie et une phrase factuelle. */
.tile-story {
  background: var(--navy);
}

.tile-story img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0 0;
}

.tile-story::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(10 31 53 / 0.1) 0%, rgb(10 31 53 / 0.55) 42%, rgb(10 31 53 / 0.94) 100%);
}

.tile-story figcaption {
  position: absolute;
  right: 1.4rem;
  bottom: 1.4rem;
  left: 1.4rem;
  z-index: 1;
  color: #d3e2ef;
  font-size: var(--fs-small);
}

.tile-quote {
  margin-bottom: 0.6rem;
  color: #fff;
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.45rem);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* Tuile du produit : le dossier du patient, débordant à droite. */
.tile-shot {
  position: absolute;
  top: 2.25rem;
  left: 10%;
  width: 125%;
  overflow: hidden;
  border-radius: 12px 0 0;
  background: #fff;
  box-shadow: 0 24px 50px -20px rgb(0 0 0 / 0.6);
}

.tile-shot img {
  width: 100%;
  aspect-ratio: 1120 / 700;
  object-fit: cover;
  object-position: top left;
}

@media (max-width: 767px) {
  .tile-product {
    order: -1;
  }
}

@media (min-width: 768px) {
  .hero-tiles {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  }

  .tile {
    min-height: 25rem;
  }
}

@media (min-width: 1024px) {
  .hero-tiles {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.4fr) minmax(0, 2.45fr);
  }

  .tile {
    min-height: 26.5rem;
  }

  .tile-stats {
    display: flex;
  }
}

/* --- Captures --------------------------------------------------------------------------------------------- */
.shot {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  text-align: left;
}

button.shot {
  cursor: zoom-in;
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}

button.shot:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.shot-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 0.85rem;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.shot-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d5dde7;
}

.shot-bar b {
  margin-left: 0.6rem;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shot img {
  width: 100%;
  aspect-ratio: 1120 / 700;
  object-fit: cover;
  object-position: top left;
}

.shot-zoom {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: rgb(14 28 47 / 0.75);
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s;
}

button.shot:hover .shot-zoom,
button.shot:focus-visible .shot-zoom {
  opacity: 1;
}

.shot-soon {
  background: var(--surface-alt);
}

.shot-soon-body {
  display: grid;
  align-content: center;
  gap: 0.85rem;
  aspect-ratio: 1120 / 700;
  padding: 2rem clamp(1.5rem, 5%, 3rem);
}

.shot-soon-body b {
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
}

.skeleton {
  display: block;
  height: 0.7rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #e6edf4, #f4f7fa, #e6edf4);
  background-size: 200% 100%;
  animation: shimmer 2.4s linear infinite;
}

.w40 {
  width: 40%;
}

.w60 {
  width: 60%;
}

.w75 {
  width: 75%;
}

.w90 {
  width: 90%;
}

@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}

.captures-note {
  margin-top: 1.5rem;
  color: var(--muted);
  font-size: var(--fs-small);
}

/* --- Bandeau des fonctionnalités (liens vers la page Fonctionnalités) ------------------------------------------ */
/* Ruban sous le haut de l'accueil : sans bordure (demande du 2026-10-16), il se détache par son fond blanc. */
.trust {
  background: #fff;
}

.trust-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 0.5rem;
  padding-block: 1rem;
}

.trust-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color 0.2s var(--ease),
    color 0.2s var(--ease);
}

.trust-list a:hover {
  background: var(--brand-50);
  color: var(--brand);
}

.trust-list .icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--brand);
}

@media (min-width: 1100px) {
  .trust-list {
    flex-wrap: nowrap;
    justify-content: space-between;
  }
}

/* --- Fonctionnalités de l'accueil : pastilles et carrousel, sur le modèle de Tebra --------------------------- */
.pill-tabs {
  position: relative;
  display: flex;
  gap: 0.6rem;
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  padding-bottom: 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.pill-tabs::-webkit-scrollbar {
  display: none;
}

.pill-tab {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.15rem;
  border: 1px solid transparent;
  border-radius: 14px;
  background: var(--surface-alt);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  transition:
    background-color 0.2s var(--ease),
    border-color 0.2s var(--ease);
}

.pill-tab .icon {
  width: 1.45rem;
  height: 1.45rem;
  color: var(--brand);
}

.pill-tab:hover {
  color: var(--brand);
}

/* Pastille choisie : le bleu Clinix de la colonne « Avec Clinix » du comparatif, icône orange comme ses coches. */
.pill-tab[aria-pressed='true'] {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

.pill-tab[aria-pressed='true'] .icon {
  color: var(--accent);
}

@media (min-width: 1024px) {
  .pill-tabs {
    flex-wrap: wrap;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
}

/* La première diapositive commence au bord gauche du texte ; la suivante dépasse à droite. */
.carousel {
  --start: max(var(--gutter), calc((100% - var(--container)) / 2));
  position: relative;
  display: flex;
  gap: 1.25rem;
  margin-top: 2rem;
  padding-inline: var(--start);
  overflow-x: auto;
  scroll-padding-inline: var(--start);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.carousel::-webkit-scrollbar {
  display: none;
}

.slide {
  display: grid;
  flex: 0 0 calc(100% - 3rem);
  align-items: center;
  gap: 2rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: 28px;
  background: var(--surface-alt);
  scroll-snap-align: start;
  transition: opacity 0.3s var(--ease);
}

.slide:not(.is-active) {
  opacity: 0.5;
  cursor: pointer;
}

.slide-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--brand-800);
  font-size: var(--fs-eyebrow);
  font-weight: 650;
}

.slide-label .icon {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--brand);
}

.slide-copy h3 {
  margin-top: 1rem;
  font-size: var(--fs-subtitle);
  font-weight: 700;
}

.slide-copy > p:not(.slide-label) {
  margin-top: 0.85rem;
  color: var(--text);
  font-size: var(--fs-lead);
}

.slide-copy .check-list {
  display: grid;
  gap: 0.8rem;
  margin-top: 1.5rem;
}

.slide-copy .btn {
  margin-top: 2rem;
}

.check-solid .icon {
  background: var(--brand);
  color: #fff;
}

.slide-media {
  padding: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
  border-radius: 20px;
  background: #fff;
}

.slide-media .shot {
  box-shadow: none;
}

@media (min-width: 960px) {
  .slide {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 3rem;
  }
}

/* --- Avant / Avec Clinix ---------------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}

.compare {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--card);
}

.compare-head {
  display: none;
}

.compare-row {
  display: grid;
  gap: 0.6rem;
  padding: 1.25rem;
  border-top: 1px solid var(--line);
}

.compare-row:first-child {
  border-top: 0;
}

.compare-label {
  color: var(--ink);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.compare-paper,
.compare-clinix {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.compare-paper {
  color: var(--muted);
}

.compare-paper .icon {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.2rem;
  color: #a9b5c3;
}

.compare-clinix {
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
}

.compare-clinix .icon {
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  margin-top: 0.1rem;
  padding: 3px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  stroke-width: 2.6;
}

@media (min-width: 800px) {
  .compare-head,
  .compare-row {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr) minmax(0, 1fr);
  }

  .compare-head {
    font-size: var(--fs-label);
    font-weight: 700;
  }

  .compare-head span {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--line);
  }

  .compare-paper-label {
    color: var(--muted);
  }

  .compare-head .compare-clinix-label {
    border-bottom-color: rgb(255 255 255 / 0.16);
    background: var(--brand);
    color: #fff;
  }

  .compare-row {
    gap: 0;
    padding: 0;
    border-top: 0;
  }

  .compare-row > * {
    padding: 1.15rem 1.5rem;
    border-top: 1px solid var(--line);
  }

  .compare-row:first-child > * {
    border-top: 0;
  }

  .compare-label {
    display: flex;
    align-items: center;
  }

  .compare-clinix {
    border-radius: 0;
    border-top-color: rgb(255 255 255 / 0.16);
  }
}

/* --- Vos dossiers restent à vous -------------------------------------------------------------------------- */
.master {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: #b9c8d8;
}

/* Le croissant du C du logo Clinix, très pâle, en fond de la bande. */
.master::before {
  content: '';
  position: absolute;
  bottom: -12rem;
  left: -10rem;
  width: 28rem;
  height: 28rem;
  border-radius: 50%;
  box-shadow: inset 3.75rem 0 0 rgb(255 255 255 / 0.035);
  pointer-events: none;
}

.master > .container {
  position: relative;
}

.master .eyebrow {
  color: #cfe2f3;
}

.master h2 {
  color: #fff;
}

.master .section-intro {
  color: #b9c8d8;
}

.master-layout {
  display: grid;
  gap: 2.5rem;
}

/* Une garantie par ligne, séparées par un trait fin : titre court, une ligne de texte. */
.master-list {
  display: grid;
  border-top: 1px solid rgb(255 255 255 / 0.1);
}

.master-list li {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid rgb(255 255 255 / 0.1);
}

/* Sur le bleu nuit, une icône est toujours orange sur un fond blanc à 10 % (comme les coches de la formule avec lits). */
.master-list .tile-icon {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  margin-top: 0.15rem;
  background: rgb(255 255 255 / 0.1);
  color: var(--accent);
}

.master-list li > div {
  display: grid;
  gap: 0.2rem;
}

.master-list h3 {
  color: #fff;
  font-size: var(--fs-card);
  font-weight: 700;
}

.master-list p {
  color: #9fb3c8;
  font-size: var(--fs-body);
}

@media (min-width: 720px) {
  .master-list li {
    align-items: center;
  }

  .master-list .tile-icon {
    margin-top: 0;
  }

  .master-list li > div {
    grid-template-columns: 16.5rem minmax(0, 1fr);
    align-items: center;
    gap: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .master-layout {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    align-items: center;
    gap: 4rem;
  }
}

/* --- Texte et capture côte à côte ------------------------------------------------------------------------- */
.split {
  display: grid;
  align-items: center;
  gap: 2.5rem;
}

@media (min-width: 960px) {
  .split {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 4rem;
  }
}

/* --- Pensé pour Haïti ------------------------------------------------------------------------------------- */
.bento {
  display: grid;
  gap: 1rem;
}

.bento-tile {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.6rem;
  border-radius: var(--radius-lg);
  background: var(--card);
}

.bento-tile h3 {
  margin-top: 0.4rem;
  font-size: var(--fs-card);
  font-weight: 700;
}

.bento-tile p {
  color: var(--muted);
  font-size: var(--fs-body);
}

.tile-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 12px;
  background: var(--brand-50);
  color: var(--brand);
}

.tile-icon .icon {
  width: 1.4rem;
  height: 1.4rem;
}

.bento-lead {
  position: relative;
  justify-content: flex-end;
  min-height: 19rem;
  padding: 2rem;
  overflow: hidden;
  background: var(--accent);
}

.bento-lead .tile-icon {
  position: absolute;
  top: 2rem;
  left: 2rem;
  background: rgb(255 255 255 / 0.4);
  color: var(--ink);
}

.bento-lead h3 {
  color: var(--ink);
  font-size: var(--fs-subtitle);
}

.bento-lead p {
  max-width: 30rem;
  color: rgb(14 28 47 / 0.85);
  font-size: var(--fs-lead);
}

.bento-lead .link-arrow {
  margin-top: 0.75rem;
  color: var(--ink);
}

.bento-lead::after {
  content: '';
  position: absolute;
  top: -90px;
  right: -90px;
  width: 280px;
  height: 280px;
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: 50%;
  box-shadow:
    0 0 0 44px rgb(255 255 255 / 0.14),
    0 0 0 88px rgb(255 255 255 / 0.09);
  pointer-events: none;
}

@media (min-width: 720px) {
  .bento {
    grid-template-columns: 1fr 1fr;
  }

  .bento-lead {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .bento {
    grid-template-columns: 1.25fr 1fr 1fr;
  }

  .bento-lead {
    grid-row: 1 / span 2;
    grid-column: 1;
  }
}

/* --- Aperçu vidéo ----------------------------------------------------------------------------------------- */
.visit-frame {
  max-width: 800px;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--navy);
  box-shadow: var(--shadow-lg);
}

.teaser,
.visit-frame iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  object-fit: cover;
}

.visit-actions {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

.visit-actions:empty {
  display: none;
}

/* --- Étapes : texte à gauche, numéros reliés par un trait dans une carte à droite (modèle Tebra) ------------ */
.start {
  display: grid;
  align-items: center;
  gap: 2.5rem;
}

.start-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

@media (min-width: 960px) {
  .start {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 4rem;
  }
}

.steps {
  display: grid;
  gap: 2.25rem;
  padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  border-radius: 28px;
  background: var(--card);
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  column-gap: 1.25rem;
}

.step-number {
  grid-row: 1 / span 2;
  justify-self: center;
  color: var(--navy);
  font-size: 2.6rem;
  font-weight: 650;
  line-height: 1;
}

.step > :not(.step-number) {
  grid-column: 2;
}

.step h3 {
  padding-top: 0.3rem;
  font-size: var(--fs-card);
  font-weight: 700;
}

.step p {
  margin-top: 0.5rem;
  color: var(--muted);
}

/* Le trait orange relie un numéro au suivant. */
.step:not(:last-child)::before {
  content: '';
  position: absolute;
  top: 3.1rem;
  bottom: -1.9rem;
  left: calc(1.5rem - 1px);
  width: 2px;
  background: var(--accent);
}

/* --- Questions fréquentes --------------------------------------------------------------------------------- */
.faq-layout {
  display: grid;
  gap: 2.5rem;
}

.faq-head .link-arrow {
  margin-top: 1.25rem;
}

.faq-list {
  display: grid;
  gap: 0.75rem;
}

.faq-item {
  border-radius: var(--radius);
  background: var(--card);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  color: var(--ink);
  font-weight: 650;
  list-style: none;
  cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary .icon {
  color: var(--brand);
  transition: transform 0.25s var(--ease);
}

.faq-item[open] summary .icon {
  transform: rotate(180deg);
}

.faq-item p {
  padding: 0 1.35rem 1.25rem;
  color: var(--muted);
}

@media (min-width: 960px) {
  .faq-layout {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    align-items: start;
    gap: 4rem;
  }

  .faq-head {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}

/* --- Appel final ------------------------------------------------------------------------------------------ */
.closing-wrap {
  padding-top: var(--section-pad);
}

.closing {
  position: relative;
  display: grid;
  gap: 2rem;
  padding: clamp(2rem, 1.5rem + 3vw, 3.75rem);
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--brand);
  color: #d6e7f5;
}

.closing h2 {
  color: #fff;
}

.closing p {
  max-width: 36rem;
  margin-top: 0.85rem;
  font-size: var(--fs-lead);
}

.closing-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.closing::after {
  content: '';
  position: absolute;
  right: -120px;
  bottom: -160px;
  width: 360px;
  height: 360px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 50%;
  box-shadow:
    0 0 0 50px color-mix(in srgb, var(--accent) 9%, transparent),
    0 0 0 100px color-mix(in srgb, var(--accent) 5%, transparent);
  pointer-events: none;
}

@media (max-width: 600px) {
  .closing-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (min-width: 960px) {
  .closing {
    grid-template-columns: minmax(0, 1.4fr) auto;
    align-items: center;
  }
}

/* --- Pages intérieures : en-tête de page ------------------------------------------------------------------ */
/* Haut des pages intérieures sur fond blanc (demande du 2026-10-16) : une section blanche qui suit ne double pas
   l'espace. */
/* Même espace sous la barre de navigation que le haut de l'accueil (.hero), à toutes les largeurs (2026-10-16). */
.page-hero {
  padding-block: clamp(1.25rem, 0.75rem + 1.6vw, 2.25rem) var(--section-pad);
  background: var(--surface);
}

.page-hero-inner {
  max-width: calc(52rem + 2 * var(--gutter));
  text-align: center;
}

.page-hero h1 {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.025em;
}

.section-tight {
  padding-block: var(--section-pad);
}

/* --- Page Solutions (refaite le 2026-10-16 sur la maquette validée par l'éditeur) --------------------------
   Haut de page avec le tableau de bord et deux fragments d'interface, les formules en onglets (bloc centré), les
   spécialités en cases illustrées, le parcours du patient en étapes avec l'écran de chaque module, le site web et
   l'administration. Préfixe sol- : rien ne touche l'accueil. */
.sol-hero {
  padding-block: clamp(1.25rem, 0.75rem + 1.6vw, 2.25rem) var(--section-pad);
  overflow: hidden;
}

/* Le texte en haut de sa colonne : même distance sous la barre de navigation que l'accueil. */
.sol-hero-grid {
  display: grid;
  gap: 3rem;
  align-items: start;
}

.sol-hero h1 {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.sol-lead {
  max-width: 34rem;
  margin-top: 1.25rem;
  color: var(--muted);
  font-size: var(--fs-lead);
}

.sol-hero .hero-actions {
  justify-content: flex-start;
  margin-top: 2rem;
}

.sol-proofs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 2.25rem;
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 600;
}

.sol-proofs li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.sol-proofs .icon {
  color: var(--brand);
  stroke-width: 2.4;
}

.sol-hero-visual {
  position: relative;
  padding-block: 1.75rem 2.75rem;
}

/* Une capture dans sa fenêtre à trois points. */
.sol-shot {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-lg);
}

.sol-bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.sol-bar i {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #dfe5ec;
}

.sol-bar span {
  overflow: hidden;
  margin-left: 0.6rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sol-shot img {
  display: block;
  width: 100%;
  height: auto;
}

.sol-float {
  position: absolute;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-lg);
}

.sol-float-queue {
  bottom: 0;
  left: -1rem;
  width: 280px;
  padding: 1rem 1.1rem;
}

.sol-float-cash {
  top: 0;
  right: 4%;
  padding: 0.85rem 1.1rem;
}

.sol-ui-label {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sol-ui-title {
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 700;
}

.sol-ui-big {
  color: var(--ink);
  font-size: 1.6rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.sol-ui-big small {
  font-size: 0.75rem;
  font-weight: 700;
}

.sol-ui-rows {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.75rem;
}

.sol-ui-rows li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
}

.sol-ui-rows b {
  color: var(--ink);
  font-weight: 600;
}

.sol-ui-rows em {
  margin-left: auto;
}

.sol-av {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
}

.sol-tag {
  display: inline-flex;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.sol-tag-green {
  background: #e3f4ea;
  color: var(--success);
}

.sol-tag-blue {
  background: var(--brand-50);
  color: var(--brand);
}

@media (max-width: 1023px) {
  .sol-float-queue {
    left: 0.75rem;
  }

  .sol-float-cash {
    right: 0.75rem;
  }
}

@media (max-width: 560px) {
  .sol-float-cash {
    display: none;
  }

  .sol-float-queue {
    width: 240px;
  }
}

@media (min-width: 1024px) {
  .sol-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  /* Légère perspective ancrée à droite : la capture reste dans la largeur de la page. */
  .sol-shot-hero {
    transform: perspective(2200px) rotateY(-7deg);
    transform-origin: right center;
  }
}

/* En-têtes de section : titre à gauche, texte à droite ; centré pour les formules. */
.sol-head {
  display: grid;
  gap: 1rem 4rem;
  align-items: end;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.sol-head p {
  max-width: 32rem;
  color: var(--muted);
  font-size: var(--fs-lead);
}

.sol-head-center {
  justify-items: center;
  text-align: center;
}

@media (min-width: 900px) {
  .sol-head {
    grid-template-columns: 1fr 1fr;
  }

  .sol-head-center,
  .sol-head-stack {
    grid-template-columns: 1fr;
  }
}

/* Deux sections qui se suivent sur le même fond ne doublent pas l'espace. */
/* Les formules : onglets centrés, puis la formule choisie et son écran. */
.sol-switch-wrap {
  display: flex;
  justify-content: center;
}

.sol-switch {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.35rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow);
}

.sol-switch button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.2rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  transition:
    background 0.25s,
    color 0.25s;
}

@media (max-width: 560px) {
  /* Les trois onglets tiennent sur une ligne d'un téléphone. */
  .sol-switch {
    flex-wrap: nowrap;
    gap: 0.15rem;
  }

  .sol-switch button {
    gap: 0.35rem;
    padding: 0.6rem 0.7rem;
    font-size: 0.85rem;
    white-space: nowrap;
  }
}

.sol-switch button[aria-selected='true'] {
  background: var(--brand);
  color: #fff;
}

.sol-switch button:focus-visible,
.sol-step:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.sol-tier {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  margin-top: 2.5rem;
}

.sol-tier[hidden] {
  display: none;
}

.sol-kicker {
  color: var(--brand);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Titre d'une formule : un cran sous les titres de section (h2), comme les titres des onglets de l'accueil. */
.sol-tier-copy h3 {
  margin-top: 0.4rem;
  font-size: var(--fs-subtitle);
  font-weight: 750;
  letter-spacing: -0.025em;
}

.sol-tier-copy h3 + p {
  max-width: 30rem;
  margin-top: 0.8rem;
  font-size: var(--fs-lead);
}

.sol-more {
  margin-top: 0.6rem;
  color: var(--muted);
  font-size: var(--fs-small);
  font-weight: 700;
}

.sol-checks {
  display: grid;
  gap: 0.6rem;
  margin-top: 1.4rem;
}

.sol-checks li {
  display: flex;
  gap: 0.6rem;
  color: var(--ink);
  font-weight: 550;
}

.sol-checks .icon {
  margin-top: 0.15rem;
  color: var(--brand);
  stroke-width: 2.4;
}

.sol-tier .link-arrow {
  margin-top: 1.6rem;
}

@media (min-width: 960px) {
  .sol-tier {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4.5rem;
  }
}

/* Les spécialités : cases de tailles différentes, une illustration aux libellés réels de Clinix. */
.sol-bento {
  display: grid;
  gap: 1rem;
}

.sol-tile {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem 1.25rem 1.6rem;
  border-radius: 22px;
  background: #fff;
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

.sol-art {
  display: grid;
  place-items: center;
  height: 13rem;
  margin: 0 0 0.75rem;
  padding: 0.75rem;
  border-radius: var(--radius);
  background: var(--surface-alt);
}

.sol-art svg {
  display: block;
  width: 100%;
  height: 100%;
}

.sol-tile h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-card);
  font-weight: 700;
}

.sol-tile h3 .icon {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--brand);
  stroke-width: 3;
}

.sol-tile p {
  color: var(--muted);
  font-size: var(--fs-body);
}

@media (min-width: 720px) {
  .sol-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sol-tile-wide {
    grid-column: span 2;
  }
}

@media (min-width: 1080px) {
  .sol-bento {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Bandes blanches de Solutions : « Choisissez votre clinique » juste sous le haut de page (2026-10-16, pour le séparer
   du vert d'eau) et le parcours (les étapes à gauche, l'écran de l'étape choisie à droite). Sur le blanc, les onglets
   des formules prennent le bleu pâle. */
.sol-journey-band,
.sol-white-band,
.section.master {
  padding-block: var(--band-pad);
}

.sol-journey-band,
.sol-white-band {
  background: #fff;
}

.sol-white-band .sol-switch {
  background: var(--surface-alt);
  box-shadow: none;
}

.sol-journey {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

.sol-steps {
  position: relative;
  display: grid;
  gap: 0.25rem;
}

.sol-steps::before {
  position: absolute;
  top: 1.6rem;
  bottom: 1.6rem;
  left: 1.45rem;
  width: 2px;
  background: var(--line);
  content: '';
}

.sol-step {
  position: relative;
  display: grid;
  grid-template-columns: 2.9rem 1fr;
  gap: 0 1rem;
  width: 100%;
  padding: 0.7rem 0.9rem 0.7rem 0;
  border: 0;
  border-radius: 14px;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  scroll-margin-top: calc(var(--header-h) + 6rem);
}

.sol-step-dot {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  color: var(--muted);
  transition:
    background 0.25s,
    color 0.25s,
    box-shadow 0.25s;
}

.sol-step-name {
  align-self: center;
  color: var(--muted);
  font-size: var(--fs-lead);
  font-weight: 650;
  transition: color 0.25s;
}

.sol-step-text {
  display: none;
  grid-column: 2;
  margin-top: 0.3rem;
  color: var(--muted);
  font-size: var(--fs-body);
}

.sol-step[aria-selected='true'] .sol-step-dot {
  background: var(--brand);
  box-shadow: 0 8px 18px -8px rgb(0 83 148 / 80%);
  color: #fff;
}

.sol-step[aria-selected='true'] .sol-step-name,
.sol-step:hover .sol-step-name {
  color: var(--ink);
}

.sol-step[aria-selected='true'] .sol-step-text {
  display: block;
}

.sol-stage {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  border-radius: 28px;
  background: var(--surface-alt);
}

.sol-scene {
  width: 100%;
  animation: sol-rise 0.5s var(--ease);
}

.sol-scene[hidden] {
  display: none;
}

@keyframes sol-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* Recadrage de l'écran dans la scène : le contenu à droite de la colonne du menu ; un formulaire en fenêtre est
   centré et rapproché. */
.sol-scene .sol-shot img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: right top;
}

.sol-fit-top .sol-shot img {
  object-position: 50% top;
}

.sol-fit-bottom .sol-shot img {
  object-position: right bottom;
}

.sol-fit-dialog .sol-shot img {
  object-position: 50% 50%;
  transform: scale(1.32);
}

@media (min-width: 960px) {
  .sol-journey {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4rem;
  }

  .sol-stage {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sol-scene {
    animation: none;
  }
}

/* Le site web et l'administration : deux fenêtres superposées. */
.sol-admin {
  display: grid;
  gap: 3rem;
  align-items: center;
}

.sol-admin-lead {
  max-width: 32rem;
  margin-top: 1rem;
  color: var(--muted);
  font-size: var(--fs-lead);
}

.sol-admin-visual {
  position: relative;
  padding-bottom: 18%;
}

.sol-admin-back {
  width: 88%;
  margin-left: auto;
}

.sol-admin-front {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 62%;
}

/* Bande bleu nuit (demande du 2026-10-16), comme « Vos dossiers restent à vous » de l'accueil : titre blanc, texte
   bleu-gris clair, coches orange, croissant du C du logo très pâle en fond. */
.sol-admin-band {
  position: relative;
  overflow: hidden;
  padding-block: var(--band-pad);
  background: var(--navy);
  color: #b9c8d8;
}

.sol-admin-band::before {
  content: '';
  position: absolute;
  bottom: -12rem;
  left: -10rem;
  width: 28rem;
  height: 28rem;
  border-radius: 50%;
  box-shadow: inset 3.75rem 0 0 rgb(255 255 255 / 0.035);
  pointer-events: none;
}

.sol-admin-band > .container {
  position: relative;
}

.sol-admin-band h2 {
  color: #fff;
}

.sol-admin-band .sol-admin-lead {
  color: #b9c8d8;
}

.sol-admin-band .sol-checks li {
  color: #e6edf5;
}

.sol-admin-band .sol-checks .icon {
  color: var(--accent);
}

@media (min-width: 960px) {
  .sol-admin {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4.5rem;
  }
}

@media (min-width: 960px) {
  .split-sim {
    grid-template-columns: minmax(0, 5.2fr) minmax(0, 6.8fr);
    gap: 3.5rem;
  }
}

/* --- Installation ----------------------------------------------------------------------------------------- */
.options {
  display: grid;
  gap: 1rem;
}

.option {
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--surface-alt);
}

/* L'offre conseillée se distingue par un fond plein, comme la carte mise en avant chez Tebra. */
.option-main {
  background: var(--accent);
}

.option.option-main dt {
  color: rgb(14 28 47 / 0.8);
}

.option.option-main dl div {
  border-top-color: rgb(14 28 47 / 0.14);
}

.option-main .option-badge {
  background: var(--navy);
}

.option-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.option-head h3 {
  font-size: var(--fs-card);
  font-weight: 700;
}

.option-badge {
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: var(--fs-label);
  font-weight: 700;
}

.option dl {
  display: grid;
  margin: 0;
}

.option dl div {
  padding: 0.75rem 0;
  border-top: 1px solid var(--line);
}

.option dt {
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.option dd {
  margin: 0.2rem 0 0;
  color: var(--ink);
  font-weight: 550;
}

@media (min-width: 900px) {
  .options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.sim-toggle {
  margin-top: 1.75rem;
}

/* Internet coupé : le bouton passe en bleu nuit, icône orange, et le wifi barré devient un wifi à rétablir. */
.sim-toggle[aria-pressed='true'],
.sim-toggle[aria-pressed='true']:hover {
  background: var(--navy);
  box-shadow: 0 8px 18px -10px rgb(10 31 53 / 0.7);
}

.sim-toggle[aria-pressed='true'] .icon {
  color: var(--accent);
}

.sim-label-restore,
.sim-toggle[aria-pressed='true'] .sim-label-cut {
  display: none;
}

.sim-toggle[aria-pressed='true'] .sim-label-restore {
  display: inline;
}

.sim {
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--card);
}

.sim-chain {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.sim-node {
  display: grid;
  flex: 1;
  justify-items: center;
  gap: 0.35rem;
  padding: 1rem 0.75rem;
  border: 1px dashed transparent;
  border-radius: var(--radius);
  background: var(--surface-alt);
  text-align: center;
  transition:
    opacity 0.3s,
    border-color 0.3s;
}

.sim-node b {
  color: var(--ink);
  font-size: var(--fs-small);
  line-height: 1.3;
}

.sim-link {
  flex: 0 0 2.5rem;
  height: 2px;
  background: var(--brand);
}

.sim-state {
  color: var(--success);
  font-size: 0.78rem;
  font-weight: 700;
}

.sim-off {
  display: none;
}

.sim.is-offline .sim-on {
  display: none;
}

.sim.is-offline .sim-off {
  display: inline;
}

.sim.is-offline .sim-internet {
  border-color: var(--line-strong);
  background: transparent;
  opacity: 0.6;
}

.sim.is-offline .sim-internet .sim-state {
  color: var(--danger);
}

.sim.is-offline .sim-link {
  background: repeating-linear-gradient(90deg, var(--danger) 0 6px, transparent 6px 12px);
}

.sim-list {
  display: grid;
  gap: 0.5rem;
}

.sim-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  background: var(--surface-alt);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 550;
}

.sim-badge {
  flex: none;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: #e3f4ea;
  color: var(--success);
  font-size: 0.75rem;
  font-weight: 700;
}

.sim.is-offline .sim-remote .sim-badge {
  background: #fff1d6;
  color: #7a4a00;
}

.icon-grid {
  display: grid;
  gap: 1rem;
}

.icon-grid li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.35rem;
  border-radius: var(--radius);
  background: var(--card);
}

/* Matériel nécessaire : une illustration dessinée par élément, pour le reconnaître d'un coup d'œil (pas de photo de
   banque d'images). Les classes des SVG reprennent les couleurs du site. */
.hardware-grid li {
  flex-direction: column;
  align-items: stretch;
}

.illus {
  display: grid;
  place-items: center;
  height: 9rem;
  margin: 0 0 0.25rem;
  border-radius: 12px;
  background: var(--surface-alt);
}

.illus svg {
  width: 10.5rem;
  height: auto;
}

.illus .s {
  fill: none;
  stroke: var(--navy);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.illus .os {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.illus .ws {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.85;
}

/* Les chiffres du serveur, pour l'informaticien de la clinique : une ligne discrète sous les cartes, écrites, elles,
   pour le directeur (2026-10-16). */
.hardware-tech {
  margin-top: 1.25rem;
  color: var(--muted);
  font-size: var(--fs-small);
}

.hardware-tech b {
  color: var(--ink);
  font-weight: 600;
}

.illus .f1 {
  fill: #fff;
}

.illus .f2 {
  fill: var(--brand-100);
}

.illus .b {
  fill: var(--brand);
}

.illus .n {
  fill: var(--navy);
}

.illus .o {
  fill: var(--accent);
}

.illus .sh {
  fill: var(--navy);
  opacity: 0.08;
}

.icon-grid h3 {
  font-size: var(--fs-card);
  font-weight: 700;
}

.icon-grid p {
  margin-top: 0.3rem;
  color: var(--muted);
  font-size: var(--fs-body);
}

@media (min-width: 720px) {
  .icon-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .icon-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .icon-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .icon-grid li {
    flex-direction: column;
  }
}

/* --- Formules --------------------------------------------------------------------------------------------- */
.plans {
  display: grid;
  gap: 1rem;
}

.plan {
  scroll-margin-top: calc(var(--header-h) + 1rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  background: var(--surface-alt);
}

.plan-audience {
  color: var(--muted);
  font-size: var(--fs-small);
  font-weight: 600;
}

.plan h3 {
  font-size: var(--fs-card);
  font-weight: 750;
}

.plan-intro {
  font-weight: 600;
}

.plan .check-list {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.5rem;
  font-size: var(--fs-body);
}

.plan-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.plan-price {
  color: var(--ink);
  font-size: var(--fs-lead);
  font-weight: 750;
}

/* Trio à la Tebra (2026-10-13) : la formule du milieu en orange, la plus complète en bleu nuit. */
.plan-accent {
  background: var(--accent);
  color: var(--ink);
}

.plan-accent .plan-audience {
  color: rgb(14 28 47 / 0.8);
}

.plan-accent .check-list .icon {
  background: rgb(255 255 255 / 0.55);
  color: var(--ink);
}

.plan-accent .plan-foot {
  border-top-color: rgb(14 28 47 / 0.14);
}

.plan-dark {
  background: var(--navy);
  color: #c9d6e4;
}

.plan-dark h3,
.plan-dark .plan-intro,
.plan-dark .plan-price {
  color: #fff;
}

.plan-dark .plan-audience {
  color: #9fb3c8;
}

.plan-dark .check-list .icon {
  background: rgb(255 255 255 / 0.1);
  color: var(--accent);
}

.plan-dark .plan-foot {
  border-top-color: rgb(255 255 255 / 0.14);
}

.plan-accent .btn-secondary,
.plan-dark .btn-secondary {
  border-color: transparent;
}

.plans-common {
  margin-top: 1.75rem;
}

.plans-note {
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: var(--fs-small);
}

.terms {
  display: grid;
  gap: 1rem;
  margin-top: 2.5rem;
}

.term {
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  background: var(--card);
}

.term h3 {
  margin-bottom: 1rem;
  font-size: var(--fs-card);
  font-weight: 700;
}

.term .check-list {
  display: grid;
  gap: 0.6rem;
}

.term > p {
  color: var(--muted);
}

.term-note {
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: var(--fs-small);
}

.term .link-arrow {
  margin-top: 1rem;
}

@media (min-width: 900px) {
  .plans {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .terms {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- Contact et confidentialité --------------------------------------------------------------------------- */
.channels {
  display: grid;
  gap: 1rem;
}

.channel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  background: var(--surface-alt);
}

.channel h3 {
  margin-top: 0.25rem;
  font-size: var(--fs-card);
  font-weight: 700;
}

.channel p {
  color: var(--muted);
}

.channel .btn {
  margin-top: auto;
}

/* Sur l'orange, le texte est toujours foncé : encre, ou encre à 80 % au moins (contraste 5:1). */
.channel-main {
  background: var(--accent);
  color: var(--ink);
}

.channel-main p {
  color: rgb(14 28 47 / 0.82);
}

.channel-main .tile-icon {
  background: #fff;
}

@media (min-width: 900px) {
  .channels {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }
}

.prose {
  max-width: calc(46rem + 2 * var(--gutter));
}

.prose-block + .prose-block {
  margin-top: 2rem;
}

.prose-block h2 {
  font-size: var(--fs-card);
  font-weight: 700;
}

.prose-block p {
  margin-top: 0.6rem;
}

/* --- Pied de page ----------------------------------------------------------------------------------------- */
.site-footer {
  padding-top: clamp(3.5rem, 3rem + 2vw, 5rem);
  background: var(--navy);
  color: #aebdcd;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem 1.5rem;
}

.footer-brand {
  grid-column: 1 / -1;
  max-width: 22rem;
}

.footer-logo {
  width: 112px;
  height: auto;
  filter: brightness(0) invert(1);
}

.footer-brand p {
  margin-top: 1rem;
  font-size: var(--fs-small);
}

.footer-title {
  margin-bottom: 0.9rem;
  color: #fff;
  font-size: var(--fs-small);
  font-weight: 700;
}

.footer-title-gap {
  margin-top: 1.75rem;
}

.footer-col li + li {
  margin-top: 0.55rem;
}

.footer-col a {
  color: #aebdcd;
  font-size: var(--fs-small);
  text-decoration: none;
}

.footer-col a:hover {
  color: #fff;
}

.footer-contact li,
.footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-small);
}

.footer-contact .icon {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--accent);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: 3rem;
  padding-block: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.1);
  font-size: var(--fs-small);
}

.footer-bottom a {
  color: #aebdcd;
}

.lang-switch-footer {
  margin-left: auto;
  border-color: rgb(255 255 255 / 0.16);
}

.lang-switch-footer a,
.lang-switch-footer span {
  color: #aebdcd;
}

.lang-switch-footer [aria-current='true'] {
  background: #fff;
  color: var(--navy);
}

@media (max-width: 599px) {
  .footer-col:last-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 900px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  }

  .footer-brand {
    grid-column: auto;
  }
}

/* --- Barre d'actions sur téléphone ------------------------------------------------------------------------ */
.mobile-bar {
  position: fixed;
  inset: auto 0 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgb(255 255 255 / 0.96);
  backdrop-filter: blur(10px);
}

.mobile-bar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 650;
  text-decoration: none;
}

.mobile-bar-primary {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

.mobile-bar-wa {
  border-color: var(--whatsapp);
  background: var(--whatsapp);
  color: #fff;
}

@media (min-width: 1024px) {
  body {
    padding-bottom: 0;
  }

  .mobile-bar {
    display: none;
  }
}

/* --- Fenêtre de contact ----------------------------------------------------------------------------------- */
.modal,
.lightbox {
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
}

.modal {
  width: min(560px, calc(100% - 1.5rem));
  margin: auto;
}

.modal::backdrop {
  background: rgb(10 31 53 / 0.55);
  backdrop-filter: blur(3px);
}

.modal-card {
  max-height: calc(100dvh - 1.5rem);
  padding: clamp(1.25rem, 1rem + 1.5vw, 1.9rem);
  overflow-y: auto;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-lg);
}

.modal[open] .modal-card {
  animation: modal-in 0.3s var(--ease);
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.modal-head h2 {
  font-size: 1.45rem;
}

.modal-head p {
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.contact-form {
  display: grid;
  gap: 1rem;
}

.field {
  display: grid;
  gap: 0.4rem;
}

.field label {
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 650;
}

.req {
  color: var(--danger);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 46px;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: #fff;
  font-size: 1rem;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.field textarea {
  min-height: 92px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--brand);
  outline: none;
  box-shadow: 0 0 0 4px rgb(0 83 148 / 0.14);
}

.field .has-error {
  border-color: var(--danger);
}

.field-error {
  color: var(--danger);
  font-size: 0.82rem;
}

.field-error:empty {
  display: none;
}

.form-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.form-note .icon {
  width: 1rem;
  height: 1rem;
  margin-top: 0.2rem;
}

.contact-form .btn {
  width: 100%;
  min-height: 50px;
}

@media (min-width: 560px) {
  .contact-form {
    grid-template-columns: 1fr 1fr;
  }

  .field-wide {
    grid-column: 1 / -1;
  }
}

.contact-done {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  text-align: center;
}

.done-icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: #e8f6ee;
  color: var(--success);
}

.done-icon .icon {
  width: 1.75rem;
  height: 1.75rem;
  stroke-width: 2.4;
}

.contact-done h3 {
  font-size: var(--fs-card);
}

.contact-done p {
  max-width: 26rem;
  color: var(--muted);
}

/* --- Visionneuse ------------------------------------------------------------------------------------------ */
.lightbox {
  width: min(1280px, calc(100% - 1.5rem));
  margin: auto;
}

.lightbox::backdrop {
  background: rgb(8 18 32 / 0.88);
}

.lightbox-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.25rem 0 0.75rem;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
}

.lightbox img {
  width: 100%;
  max-height: calc(100dvh - 6rem);
  border-radius: 12px;
  background: #fff;
  object-fit: contain;
}

/* --- Animations (2026-10-16 : « nous sommes à zéro animation sur le site ») --------------------------------
   Entrées au défilement (site.js pose data-reveal sur les blocs et un rang --reveal-i pour la cascade), entrée du
   haut de page au chargement, ligne de pouls qui se dessine, fragments d'interface qui flottent, retours au toucher.
   Courbes franches en sortie (ease-out) ; rien de plus de 0,7 s ; tout se coupe avec « réduire les animations ».
   Les effets de survol passent par les propriétés translate et scale, qui se combinent avec la transformation de
   l'entrée au lieu de l'écraser. */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.65s var(--ease-out) calc(var(--reveal-i, 0) * 70ms),
    transform 0.65s var(--ease-out) calc(var(--reveal-i, 0) * 70ms),
    translate 0.25s var(--ease-out),
    box-shadow 0.25s ease;
}

/* Les écrans et les visuels : un léger zoom en plus du glissement. */
.js [data-reveal='zoom'] {
  transform: translateY(24px) scale(0.97);
}

/* Le visuel du haut de page entre par la droite. */
.js [data-reveal='right'] {
  transform: translateX(36px) scale(0.98);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* La ligne de pouls de l'accroche se dessine une fois le bloc à l'écran. */
.js [data-reveal] .eyebrow::before,
.js .eyebrow[data-reveal]::before {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s var(--ease-out) 0.25s;
}

.js [data-reveal].is-visible .eyebrow::before,
.js .eyebrow[data-reveal].is-visible::before {
  clip-path: inset(0 0 0 0);
}

/* Le panneau d'un onglet qui s'ouvre (formules de la page Solutions). */
.sol-tier:not([hidden]) {
  animation: sol-rise 0.5s var(--ease-out);
}

/* Les fragments d'interface posés sur les écrans flottent doucement (décor, jamais une information). */
@media (prefers-reduced-motion: no-preference) {
  .sol-float-cash,
  .ui-cash {
    animation: float-y 6s ease-in-out infinite alternate;
  }

  .sol-float-queue,
  .ui-queue {
    animation: float-y 7s ease-in-out -2.5s infinite alternate;
  }

  .ui-ring {
    animation: float-y 8s ease-in-out -4s infinite alternate;
  }
}

@keyframes float-y {
  from {
    translate: 0 0;
  }

  to {
    translate: 0 -8px;
  }
}

/* Retours au toucher : le bouton s'enfonce, la flèche avance, la carte se soulève au survol. */
.btn {
  transition:
    background-color 0.2s var(--ease),
    border-color 0.2s var(--ease),
    color 0.2s var(--ease),
    scale 0.16s var(--ease-out);
}

.btn:active {
  transform: none;
  scale: 0.97;
}

.link-arrow .icon {
  transition: translate 0.2s var(--ease-out);
}

.sol-tile,
.plan,
.option,
.channel,
.bento-tile,
.icon-grid li,
.term {
  transition:
    translate 0.25s var(--ease-out),
    box-shadow 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover .icon {
    translate: 4px 0;
  }

  .sol-tile:hover,
  .plan:hover,
  .option:hover,
  .channel:hover,
  .bento-tile:hover,
  .icon-grid li:hover,
  .term:hover {
    translate: 0 -4px;
    box-shadow: var(--shadow-lg);
  }

  .sol-step:hover .sol-step-dot {
    scale: 1.06;
  }
}

.sol-step-dot {
  transition:
    background 0.25s,
    color 0.25s,
    box-shadow 0.25s,
    scale 0.2s var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .js [data-reveal] .eyebrow::before,
  .js .eyebrow[data-reveal]::before {
    clip-path: none;
  }
}

/* --- Parcours de Solutions : étapes qui défilent seules (2026-10-17) ---------------------------------------- */
/* Une ligne invite à cliquer ; quand site.js fait défiler les étapes (.is-auto), une barre se remplit sous l'étape
   active pendant le délai, pour montrer que l'écran va changer. */
.sol-steps-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.9rem;
  color: var(--brand);
  font-size: var(--fs-small);
  font-weight: 600;
}

.sol-steps-hint span {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 0 rgb(0 83 148 / 45%);
  animation: sol-hint-pulse 2s ease-out infinite;
}

@keyframes sol-hint-pulse {
  70% {
    box-shadow: 0 0 0 8px rgb(0 83 148 / 0%);
  }

  100% {
    box-shadow: 0 0 0 0 rgb(0 83 148 / 0%);
  }
}

.sol-steps.is-auto .sol-step[aria-selected='true']::before,
.sol-steps.is-auto .sol-step[aria-selected='true']::after {
  position: absolute;
  bottom: 0.2rem;
  left: 3.9rem;
  right: 0.9rem;
  height: 3px;
  border-radius: 3px;
  content: '';
}

.sol-steps.is-auto .sol-step[aria-selected='true']::before {
  background: var(--line);
}

.sol-steps.is-auto .sol-step[aria-selected='true']::after {
  background: var(--brand);
  transform-origin: 0 50%;
  animation: sol-progress var(--auto-ms, 4500ms) linear forwards;
}

@keyframes sol-progress {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@media (max-width: 767px) {
  .sol-steps-hint {
    display: none;
  }
}

/* --- Téléphone : moins d'images ---------------------------------------------------------------------------- */
/* Sous 768 px, une capture de l'application entière tient dans 343 px : son texte tombe à 3 px et le texte voisin
   dit déjà la même chose (2026-10-16, « tout n'est pas affiché parce que ça ne sert à rien »). On garde une image
   produit par page (le haut de l'accueil et de Solutions, la vidéo) et les dessins du matériel ; on cache les captures
   des diapositives et des formules, l'écran du parcours, les deux fenêtres de l'administration et les illustrations
   des spécialités. Une image cachée en chargement différé n'est pas téléchargée. Sans écran, chaque étape du
   parcours montre son texte et toutes ont la même pastille. */
@media (max-width: 767px) {
  .slide-media,
  .sol-tier-visual,
  .sol-art,
  .sol-stage,
  .sol-admin-visual {
    display: none;
  }

  .sol-step {
    cursor: default;
  }

  .sol-step[aria-selected] .sol-step-dot {
    background: var(--brand-50);
    box-shadow: none;
    color: var(--brand);
  }

  .sol-step[aria-selected] .sol-step-name {
    color: var(--ink);
  }

  .sol-step[aria-selected] .sol-step-text {
    display: block;
  }
}