/*
 * Le site de CReaM.
 *
 * Les couleurs et les fontes sont celles du logiciel — encre indigo, Public
 * Sans et IBM Plex Mono. Un site qui ne ressemble pas au produit qu'il vend
 * fait douter des captures : autant que le visiteur reconnaisse l'écran qu'il
 * verra après l'achat.
 *
 * Une seule fonte s'ajoute : Bricolage Grotesque, pour les titres. Le logiciel
 * n'a pas besoin d'une voix, une page de vente si.
 *
 * **Fond blanc, en toutes circonstances.** Le site ne suit pas le thème sombre
 * du visiteur : `color-scheme: light` sur la racine et aucun bloc
 * `prefers-color-scheme`. C'est un choix, pas un oubli — les captures d'écran
 * sont claires, et une page sombre autour d'elles les ferait flotter. Les gris
 * gardent leur biais chaud : c'est ce qui distingue un blanc choisi d'un blanc
 * par défaut. Aucune section n'est sombre : le rythme de la page tient aux
 * filets et aux respirations, pas à des bandes de couleur.
 */

/*
 * ── Fontes, servies depuis ce serveur ────────────────────────────────────
 *
 * **Elles ne viennent pas de Google.** Un `<link>` vers `fonts.googleapis.com`
 * transmet l'adresse IP de chaque visiteur à un tiers, ce que la page ne
 * pourrait plus dire qu'elle ne fait pas — et le site vend précisément le
 * contraire. Les trois familles sont sous licence SIL Open Font, qui autorise
 * l'hébergement : les fichiers sont dans `fontes/`, et rien ne sort d'ici.
 */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fontes/public-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fontes/public-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* L'italique a son propre dessin : sans lui le navigateur penche la romaine,
   et les deux `<em>` de la page le montrent. */
@font-face {
  font-family: 'Public Sans';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('fontes/public-sans-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fontes/bricolage-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fontes/bricolage-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fontes/plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fontes/plex-mono-500.woff2') format('woff2');
}

/* ── Jetons ──────────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  --fond: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f3f1;

  --encre: #1c1b19;
  --encre-2: #56534d;
  --encre-3: #8b8780;

  --filet: #e0ddd8;
  --filet-net: #c9c5be;

  --accent: #3a45a0;
  --accent-vif: #4c58bd;
  --accent-voile: #eceef8;
  --accent-encre: #ffffff;

  --bon: #1d6b4f;
  --bon-voile: #e6f1eb;
  --alerte: #91650d;

  --ombre: 0 1px 2px rgb(28 27 25 / 0.05), 0 1px 1px rgb(28 27 25 / 0.03);
  --ombre-portee: 0 24px 60px -24px rgb(28 27 25 / 0.28);

  --fonte-titre: 'Bricolage Grotesque', 'Public Sans', ui-sans-serif, system-ui, sans-serif;
  --fonte: 'Public Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --fonte-donnee: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;

  --large: 1140px;
  --texte: 62ch;
}

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--fonte);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

h1,
h2,
h3 {
  font-family: var(--fonte-titre);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}

h1 {
  font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4rem);
  line-height: 1.04;
}
h2 {
  font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem);
  line-height: 1.12;
}
h3 {
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.large {
  width: min(100% - 2.5rem, var(--large));
  margin-inline: auto;
}

.texte {
  max-width: var(--texte);
}

.donnee {
  font-family: var(--fonte-donnee);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* Le repère de section : une étiquette en capitales, jamais un numéro d'ordre
   quand le contenu n'est pas une séquence. */
.repere {
  font-family: var(--fonte-donnee);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-3);
  margin: 0 0 0.9rem;
}

.chapeau {
  color: var(--encre-2);
  font-size: 1.12rem;
  line-height: 1.65;
}

/* ── Marque ──────────────────────────────────────────────────────────────── */
.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
}
.marque svg {
  flex: none;
}
.marque-nom {
  font-family: var(--fonte-titre);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
/* « CReaM » porte « CRM » dans ses capitales : on ne le voit que si les deux
   minuscules reculent. */
.marque-min {
  opacity: 0.55;
  font-weight: 500;
}

/* ── Barre de navigation ─────────────────────────────────────────────────── */
.barre {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--fond) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--filet);
}
.barre-corps {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  min-height: 62px;
}
.barre nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
/* `:not(.bouton)` n'est pas décoratif : sans lui, `.barre nav a` l'emporte sur
   `.bouton` — deux classes contre une — et le bouton d'appel se retrouve en
   gris sur indigo, illisible. */
.barre nav a:not(.bouton) {
  color: var(--encre-2);
  text-decoration: none;
  font-size: 0.94rem;
}
.barre nav a:not(.bouton):hover,
.barre nav a:not(.bouton)[aria-current='page'] {
  color: var(--encre);
}
.barre nav a[aria-current='page'] {
  font-weight: 600;
}

/* ── Boutons ─────────────────────────────────────────────────────────────── */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.72rem 1.25rem;
  border-radius: 8px;
  border: 1px solid transparent;
  background: var(--accent);
  color: var(--accent-encre);
  font: inherit;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 140ms cubic-bezier(0.32, 0.72, 0, 1);
}
.bouton:hover {
  background: var(--accent-vif);
}
.bouton-second {
  background: transparent;
  color: var(--encre);
  border-color: var(--filet-net);
}
.bouton-second:hover {
  background: var(--surface);
  border-color: var(--encre-3);
}

/* ── Rythme des sections ─────────────────────────────────────────────────── */
section {
  padding-block: clamp(3.5rem, 2rem + 5vw, 6rem);
  border-top: 1px solid var(--filet);
}
section:first-of-type {
  border-top: 0;
}

.tete-section {
  display: grid;
  gap: 1rem;
  margin-bottom: 2.6rem;
}

/* ── Ouverture ───────────────────────────────────────────────────────────── */
.ouverture {
  padding-top: clamp(3rem, 1.5rem + 5vw, 5.5rem);
  padding-bottom: 0;
}
.ouverture h1 {
  max-width: 15ch;
}
.ouverture .chapeau {
  max-width: 52ch;
  margin-top: 1.4rem;
  font-size: 1.18rem;
}
.ouverture-actions {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.ouverture-note {
  margin-top: 1.1rem;
  font-size: 0.9rem;
  color: var(--encre-3);
}

/* ── Captures ────────────────────────────────────────────────────────────── */
/* Le cadre et sa légende : `figcaption` doit vivre dans le `figure`, donc le
   cadre est une boîte à part et non le `figure` lui-même. */
.capture-bloc {
  margin: 3rem 0 0;
}
.capture {
  border: 1px solid var(--filet-net);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--ombre-portee);
}
.capture img {
  display: block;
  width: 100%;
}
figure {
  margin: 0;
}
figcaption {
  margin-top: 0.9rem;
  font-size: 0.88rem;
  color: var(--encre-3);
  max-width: 60ch;
}

/* ── Grilles ─────────────────────────────────────────────────────────────── */
.grille {
  display: grid;
  gap: 1px;
  background: var(--filet);
  border: 1px solid var(--filet);
  border-radius: 12px;
  overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.grille > div {
  background: var(--surface);
  padding: 1.6rem 1.5rem;
}
/* Six cases : trois colonnes au plus, puis deux, puis une — jamais quatre, qui
   laisseraient deux cases grises sur la seconde rangée. */
.grille-trois {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.grille h3 {
  margin-bottom: 0.5rem;
}
.grille p {
  color: var(--encre-2);
  font-size: 0.96rem;
}
.grille ul {
  margin: 0.7rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--encre-2);
  font-size: 0.94rem;
}
.grille li {
  padding-left: 1rem;
  position: relative;
  margin-top: 0.25rem;
}
.grille li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--filet-net);
}

/* ── Tarifs ──────────────────────────────────────────────────────────────── */
.bascule {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--filet-net);
  border-radius: 9px;
  background: var(--surface);
  gap: 3px;
}
.bascule button {
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  border: 0;
  background: transparent;
  color: var(--encre-2);
  padding: 0.45rem 0.95rem;
  border-radius: 6px;
  cursor: pointer;
}
.bascule button[aria-pressed='true'] {
  background: var(--accent);
  color: var(--accent-encre);
}
.bascule-note {
  margin-left: 0.9rem;
  font-size: 0.88rem;
  color: var(--bon);
  font-weight: 600;
}

.plans {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  /* `stretch` — le défaut — et non `align-items: start` : les cartes doivent
     s'aligner en bas, et un `height: 100%` sur une rangée de hauteur
     automatique tronquait leur contenu. */
}
.plan {
  border: 1px solid var(--filet);
  border-radius: 12px;
  background: var(--surface);
  padding: 1.8rem 1.6rem;
  box-shadow: var(--ombre);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.plan-retenu {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--ombre-portee);
}
.plan-etiquette {
  font-family: var(--fonte-donnee);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.plan h3 {
  font-size: 1.5rem;
}
.plan-prix {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-family: var(--fonte-donnee);
  font-variant-numeric: tabular-nums;
}
.plan-montant {
  font-size: 2.5rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  /* « 1 000 € » ne se coupe jamais : ses espaces restent ordinaires, les épreuves
     de Staff lisent ce prix tel quel. */
  white-space: nowrap;
}
.plan-unite {
  color: var(--encre-3);
  font-size: 0.92rem;
}
.plan-sous {
  font-size: 0.9rem;
  color: var(--encre-3);
  margin-top: 0.35rem;
}
.plan ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: var(--encre-2);
}
.plan li {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: 0.55rem;
  align-items: start;
}
.plan li svg {
  margin-top: 0.35em;
  color: var(--bon);
}
.plan .bouton {
  margin-top: auto;
  justify-content: center;
  /* Un libellé qui passe sur deux lignes dans une carte étroite (sur un téléphone,
     ou dans une fenêtre de 1 000 à 1 100 px) : centrées, comme le bouton. */
  text-align: center;
}

/* ── Tableaux ────────────────────────────────────────────────────────────── */
.defile {
  overflow-x: auto;
  border: 1px solid var(--filet);
  border-radius: 12px;
  background: var(--surface);
}
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 40rem;
  font-size: 0.95rem;
}
caption {
  text-align: left;
  padding: 1.2rem 1.3rem 0;
  color: var(--encre-3);
  font-size: 0.9rem;
}
th,
td {
  text-align: left;
  padding: 0.78rem 1.1rem;
  border-top: 1px solid var(--filet);
  vertical-align: top;
}
thead th {
  border-top: 0;
  font-family: var(--fonte-donnee);
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--encre-3);
  font-weight: 500;
  white-space: nowrap;
}
tbody th {
  font-weight: 600;
  color: var(--encre);
}
td.prix,
th.prix {
  text-align: right;
  font-family: var(--fonte-donnee);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* CReaM Pro, vente ouverte (captures du 28 octobre 2026) : sous son prix, ses
   conditions passent à la ligne. Sur une ligne insécable, elles élargissaient la
   colonne au point d'écraser celle des fonctionnalités, et sortaient du tableau
   à 1280 pixels. */
td.prix .prix-conditions {
  display: block;
  margin-top: 0.2rem;
  white-space: normal;
  font-family: var(--fonte);
  font-size: 0.8rem;
  color: var(--encre-3);
}
.rang-titre th {
  background: var(--surface-2);
  font-family: var(--fonte-donnee);
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--encre-2);
  font-weight: 500;
}
td.marque-oui,
td.marque-non,
td.marque-option {
  text-align: center;
  white-space: nowrap;
}
td.marque-oui {
  color: var(--bon);
}
td.marque-non {
  color: var(--encre-3);
}
td.marque-option {
  color: var(--encre-2);
  font-size: 0.86rem;
}
/* Le tableau des versions : sous le nom de chaque offre, ses prix centrés comme
   ses « Oui », et l'en-tête centré avec eux. */
.defile thead th:not(:first-child),
.defile td.prix {
  text-align: center;
}

/* ── Encart ──────────────────────────────────────────────────────────────── */
.encart {
  border: 1px solid var(--accent);
  background: var(--accent-voile);
  border-radius: 12px;
  padding: 1.5rem 1.6rem;
  display: grid;
  gap: 0.6rem;
}
.encart h3 {
  color: var(--encre);
}
.encart p {
  color: var(--encre-2);
  max-width: 68ch;
}

/* ── Questions ───────────────────────────────────────────────────────────── */
.questions {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--filet);
}
.questions > div {
  border-bottom: 1px solid var(--filet);
  padding-block: 1.5rem;
  display: grid;
  grid-template-columns: minmax(14rem, 22rem) 1fr;
  gap: 2rem;
}
.questions h3 {
  font-size: 1.02rem;
}
.questions p {
  color: var(--encre-2);
  max-width: 62ch;
}
.questions p + p {
  margin-top: 0.7rem;
}

/* ── Prose (mentions légales) ────────────────────────────────────────────── */
.prose {
  max-width: 68ch;
}
.prose h2 {
  font-size: 1.35rem;
  margin-top: 2.6rem;
  margin-bottom: 0.8rem;
}
.prose p,
.prose li {
  color: var(--encre-2);
}
.prose p + p {
  margin-top: 0.8rem;
}
/* Le côté de la vente de CReaM Pro qui ne vaut pas reste dans la page, enveloppé
   d'un <template data-vente-pro> : entre deux paragraphes, l'écart demeure. */
.prose p + template[data-vente-pro] + p {
  margin-top: 0.8rem;
}
.prose dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) 1fr;
  gap: 0.55rem 1.5rem;
}
.prose dt {
  color: var(--encre-3);
  font-size: 0.9rem;
}
.prose dd {
  margin: 0;
  color: var(--encre-2);
}
.averifier {
  color: var(--alerte);
  font-size: 0.85rem;
}

/* La ligne d'explication sous un tableau ou un prix. */
.note {
  margin-top: 1rem;
  font-size: 0.88rem;
  color: var(--encre-3);
  max-width: 78ch;
}
.note strong {
  color: var(--encre-2);
  font-weight: 600;
}

/* ── Pied ────────────────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--filet);
  padding-block: 2.6rem 3.2rem;
  font-size: 0.9rem;
  color: var(--encre-3);
}
.pied-corps {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}
footer nav {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
}
footer a {
  color: var(--encre-2);
  text-decoration: none;
}
footer a:hover {
  color: var(--encre);
  text-decoration: underline;
}
.pied-legal {
  max-width: 42ch;
}

/* En dessous de 760 px, la barre passe sur deux lignes : le logotype, puis les
   liens. Les laisser s'enrouler autour du logo les empilait par-dessus lui. */
@media (max-width: 760px) {
  .barre-corps {
    flex-wrap: wrap;
    gap: 0.6rem 1.2rem;
    padding-block: 0.7rem;
  }
  .barre nav {
    margin-left: 0;
    width: 100%;
    gap: 1.1rem;
    font-size: 0.9rem;
  }
  .barre nav a.bouton {
    margin-left: auto;
    padding: 0.5rem 0.9rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 640px) {
  .questions > div {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
  .prose dl {
    grid-template-columns: 1fr;
    gap: 0.15rem 0;
  }
  .prose dt {
    margin-top: 0.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}

/* « à venir » dans un en-tête de colonne : la mention doit se lire sans crier,
   dans les mêmes capitales que les autres en-têtes. À côté du nom sur un grand
   écran, dessous sur un téléphone. */
.entete-note {
  color: var(--encre-3);
  font-weight: 400;
}
.entete-note::before {
  content: '· ';
}

/* ── Le pas à pas d'installation ─────────────────────────────────────────
   Une vraie procédure : les numéros y encodent l'ordre, ils ne décorent pas. */
.etapes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.etape {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 1.6rem;
  padding-block: 2.2rem;
  border-top: 1px solid var(--filet);
  align-items: start;
}
.etape:first-child {
  border-top: 0;
  padding-top: 0;
}
.etape-numero {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  border: 1px solid var(--accent);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-family: var(--fonte-donnee);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.etape p {
  color: var(--encre-2);
  margin-top: 0.5rem;
  max-width: 62ch;
}
.etape strong {
  color: var(--encre);
  font-weight: 600;
}
.etape .capture-bloc {
  margin-top: 1.6rem;
}

@media (max-width: 640px) {
  .etape {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
}

/* ── Formulaire de contact ──────────────────────────────────────
   La fenêtre est construite par `contact.js`, jamais écrite dans les pages. */
dialog.contact {
  width: min(32rem, calc(100vw - 2rem));
  /* Sur un écran bas, la fenêtre défile en elle-même : sans cela, le titre
     sort par le haut et l'on ne sait plus à quoi l'on répond. */
  max-height: calc(100vh - 2rem);
  overflow: auto;
  padding: 0;
  border: 1px solid var(--filet);
  border-radius: 14px;
  background: var(--surface);
  color: var(--encre);
  box-shadow: 0 24px 60px rgb(28 27 25 / 0.18);
}
dialog.contact::backdrop {
  background: rgb(28 27 25 / 0.45);
}
.contact-corps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.8rem 1.6rem 1.4rem;
}
.contact-croix {
  position: absolute;
  top: 0.6rem;
  right: 0.7rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--encre-3);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.contact-croix:hover {
  background: var(--surface-2);
  color: var(--encre);
}
.contact-titre {
  margin: 0;
  font-size: 1.35rem;
}
.contact-chapeau {
  margin: -0.3rem 0 0.2rem;
  color: var(--encre-2);
  font-size: 0.93rem;
  line-height: 1.5;
}
.contact-champ {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.86rem;
  color: var(--encre-2);
}
.contact-champ em {
  font-style: normal;
  color: var(--encre-3);
}
.contact-champ input,
.contact-champ select,
.contact-champ textarea {
  font: inherit;
  font-size: 1rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--filet-net);
  border-radius: 8px;
  background: var(--fond);
  color: var(--encre);
  resize: vertical;
}
.contact-champ input:focus,
.contact-champ textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
/* Le champ piège : hors de l'écran, et hors du parcours au clavier. */
.contact-piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact-refus {
  margin: 0;
  padding: 0.6rem 0.7rem;
  border-radius: 8px;
  background: #fdf0e6;
  color: #8a3b12;
  font-size: 0.9rem;
}
.contact-refus.contact-bon {
  background: var(--bon-voile);
  color: var(--bon);
}
.contact-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 0.2rem;
}
.contact-mention {
  margin: 0;
  color: var(--encre-3);
  font-size: 0.8rem;
  line-height: 1.45;
}
@media (max-width: 480px) {
  .contact-corps {
    padding: 1.5rem 1.1rem 1.2rem;
  }
  .contact-actions {
    flex-direction: column-reverse;
  }
  .contact-actions .bouton {
    width: 100%;
    justify-content: center;
  }
}

/* ── Le parcours de la page d'accueil ────────────────────────────────────
   Quatre questions au plus, une réponse au bout : voir `parcours.js`. Sans le
   script, les étapes s'empilent, séparées d'un filet, et « Revenir » se cache —
   il n'aurait rien à défaire sur une page qui montre tout. */
.parcours {
  margin-top: 2.4rem;
  max-width: 60rem;
  padding: clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
  border: 1px solid var(--filet);
  border-radius: 14px;
  background: var(--surface-2);
  scroll-margin-top: 84px;
}
.parcours-etape {
  display: grid;
  gap: 1rem;
}
.parcours-etape + .parcours-etape {
  margin-top: 2.4rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--filet-net);
}
.parcours-actif .parcours-etape {
  display: none;
}
.parcours-actif .parcours-etape + .parcours-etape {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.parcours-actif .parcours-etape.parcours-courante {
  display: grid;
  animation: parcours-entree 240ms cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes parcours-entree {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.parcours-repere {
  margin: 0;
  color: var(--accent);
}
.parcours-question {
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem);
  line-height: 1.2;
}
h3.parcours-question {
  margin-top: 0.5rem;
  font-size: 1.22rem;
}
.parcours-titre {
  max-width: 30ch;
  font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.15;
}
.parcours-question:focus,
.parcours-titre:focus {
  outline: none;
}
.parcours-texte {
  max-width: 62ch;
  color: var(--encre-2);
}
.parcours-texte strong {
  color: var(--encre);
  font-weight: 600;
}
.parcours-choix {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  margin-top: 0.3rem;
}
.parcours-choix-court {
  grid-template-columns: repeat(2, minmax(0, 12rem));
}
.choix {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.35rem;
  padding: 1.1rem 1.2rem 1.15rem;
  border: 1px solid var(--filet-net);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--ombre);
  color: var(--encre);
  text-decoration: none;
  transition:
    border-color 140ms cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 140ms cubic-bezier(0.32, 0.72, 0, 1);
}
.choix:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--ombre);
}
.choix-titre {
  padding-right: 1.6rem;
  font-family: var(--fonte-titre);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.choix-titre::after {
  content: '→';
  position: absolute;
  top: 1.05rem;
  right: 1.1rem;
  font-family: var(--fonte);
  color: var(--accent);
  transition: transform 140ms cubic-bezier(0.32, 0.72, 0, 1);
}
.choix:hover .choix-titre::after {
  transform: translateX(3px);
}
.choix-texte {
  color: var(--encre-2);
  font-size: 0.92rem;
  line-height: 1.5;
}
.parcours-retour {
  justify-self: start;
  color: var(--encre-2);
  font-size: 0.9rem;
  text-decoration: none;
}
.parcours-retour::before {
  content: '← ';
}
.parcours-retour:hover {
  color: var(--encre);
}
.parcours:not(.parcours-actif) .parcours-retour {
  display: none;
}
/* Une vraie séquence : installer, cliquer, travailler. Les numéros disent
   l'ordre, ils ne décorent pas. */
.parcours-pas {
  counter-reset: pas;
  display: grid;
  gap: 0.75rem;
  max-width: 62ch;
  margin: 0.2rem 0 0;
  padding: 0;
  list-style: none;
}
.parcours-pas li {
  counter-increment: pas;
  display: grid;
  grid-template-columns: 1.9rem 1fr;
  gap: 0.75rem;
  color: var(--encre-2);
}
.parcours-pas li::before {
  content: counter(pas);
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--accent-voile);
  color: var(--accent);
  font-family: var(--fonte-donnee);
  font-size: 0.85rem;
}
.parcours-pas strong {
  color: var(--encre);
  font-weight: 600;
}
.parcours-garantie {
  max-width: 66ch;
  padding: 0.95rem 1.1rem;
  border-radius: 10px;
  background: var(--bon-voile);
  color: var(--encre-2);
  font-size: 0.97rem;
}
.parcours-garantie strong {
  color: var(--bon);
  font-weight: 600;
}
.parcours-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 0.3rem;
}
.parcours-mention {
  color: var(--encre-3);
  font-size: 0.9rem;
}
@media (prefers-reduced-motion: reduce) {
  .parcours-actif .parcours-etape.parcours-courante {
    animation: none;
  }
}

/* ── L'audit commercial du 14 octobre 2026 ─────────────────────────────
   Le parcours en deux questions, les conditions de l'essai sous son bouton,
   les rappels du parcours, le calcul, et le détail replié. */
.parcours [hidden] {
  display: none !important;
}
.parcours-choix-besoins {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.parcours-choix-besoins .choix-titre {
  font-family: var(--fonte);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
}
button.choix {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.parcours-lien {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}
.parcours-fonctions {
  display: grid;
  gap: 0.45rem;
  max-width: 62ch;
  margin: 0;
  padding: 0;
  list-style: none;
}
.parcours-fonctions li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--encre);
  font-size: 0.97rem;
}
.parcours-fonctions li::before {
  content: '';
  position: absolute;
  top: 0.38em;
  left: 0.15rem;
  width: 0.8rem;
  height: 0.42rem;
  border-bottom: 2px solid var(--bon);
  border-left: 2px solid var(--bon);
  transform: rotate(-45deg);
}
/* Les conditions de l'essai, juste sous son bouton : lisibles sans crier. */
.conditions-essai {
  max-width: 62ch;
  margin-top: -0.2rem;
  color: var(--encre-2);
  font-size: 0.9rem;
  line-height: 1.5;
}
.conditions-essai a {
  white-space: nowrap;
}
.plan .conditions-essai {
  margin-top: -0.4rem;
  font-size: 0.84rem;
}
.ouverture-actions + .conditions-essai {
  margin-top: 0.9rem;
}
.calcul {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 1.4rem;
  align-items: start;
}
.calcul-saisie,
.calcul-resultat {
  display: grid;
  gap: 1rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--filet);
  border-radius: 12px;
  background: var(--surface);
}
.calcul-resultat {
  background: var(--surface-2);
}
.calcul-champ {
  display: grid;
  gap: 0.35rem;
  color: var(--encre-2);
  font-size: 0.93rem;
}
.calcul-champ input {
  width: 100%;
  max-width: 12rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--filet-net);
  border-radius: 8px;
  background: var(--fond);
  color: var(--encre);
  font: inherit;
  font-family: var(--fonte-donnee);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
.calcul-champ input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.calcul-hypotheses summary {
  color: var(--accent);
  font-size: 0.92rem;
  cursor: pointer;
}
.calcul-hypotheses .calcul-champ {
  margin-top: 0.9rem;
}
.calcul-ligne,
.calcul-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.calcul-ligne {
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--filet);
}
.calcul-ligne span {
  color: var(--encre-2);
  font-size: 0.95rem;
}
.calcul-ligne output {
  font-family: var(--fonte-donnee);
  font-variant-numeric: tabular-nums;
  /* « 3 h », « 120 km », « 175 € » ne se coupent pas : les libellés du
     calcul des gains sont longs, c'est à eux de passer à la ligne. */
  white-space: nowrap;
  flex: none;
}
.calcul-total output {
  white-space: nowrap;
}
.calcul-total span {
  font-weight: 600;
}
.calcul-total output {
  font-family: var(--fonte-titre);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.calcul-comparaison {
  color: var(--encre-2);
}
.calcul-comparaison strong {
  color: var(--encre);
  font-family: var(--fonte-donnee);
}
.calcul-resultat .note {
  margin-top: 0;
}
.calcul-resultat .bouton {
  justify-self: start;
}
@media (max-width: 760px) {
  .calcul {
    grid-template-columns: 1fr;
  }
}
.details-section {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--filet);
}
.details-section summary {
  color: var(--encre);
  font-weight: 600;
  cursor: pointer;
}
.details-section[open] summary {
  margin-bottom: 1.2rem;
}
.prose h2 {
  scroll-margin-top: 84px;
}

/* ── L'audit UX du 14 octobre 2026 ─────────────────────────────────────
   L'ouverture de l'accueil en deux colonnes, le parcours en cartes, la
   démonstration par trois écrans réels, les deux offres des tarifs, les
   versions résumées et les repères du téléchargement. Rien de neuf dans la
   palette : l'indigo du logiciel, ses gris chauds, le vert réservé à ce qui
   est compris ou acquis. */

/* L'ouverture : la promesse et le parcours côte à côte. Sur téléphone, le
   parcours vient juste après le titre, avant les bénéfices : c'est lui qu'on
   est venu chercher. */
.ouverture-parcours {
  padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
.ouverture-grille {
  display: grid;
  gap: 1.8rem;
  grid-template-areas: 'texte' 'parcours' 'plus';
}
.ouverture-texte {
  grid-area: texte;
}
.ouverture-plus {
  grid-area: plus;
}
.ouverture-grille > .parcours {
  grid-area: parcours;
  margin-top: 0;
  max-width: none;
}
@media (min-width: 1000px) {
  .ouverture-grille {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: 'texte parcours' 'plus parcours';
    column-gap: clamp(2.4rem, 4vw, 4rem);
    row-gap: 2rem;
    align-items: start;
  }
}
.ouverture-parcours h1 {
  font-size: clamp(2.3rem, 1.5rem + 2.4vw, 3.4rem);
  max-width: 14ch;
}
.ouverture-parcours .chapeau {
  margin-top: 1.1rem;
  max-width: 46ch;
  font-size: 1.1rem;
}
.benefices {
  display: grid;
  gap: 0.9rem;
  max-width: 50ch;
  margin: 0;
  padding: 0;
  list-style: none;
}
.benefices li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--encre-2);
  line-height: 1.55;
}
.benefices li::before {
  content: '';
  position: absolute;
  top: 0.42em;
  left: 0.2rem;
  width: 0.85rem;
  height: 0.45rem;
  border-bottom: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.benefices strong {
  color: var(--encre);
  font-weight: 600;
}
.reassurance {
  margin-top: 1.5rem;
  color: var(--encre-2);
  font-family: var(--fonte-donnee);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

/* Le parcours : une progression qui se voit, des cartes qu'on touche du
   doigt, la réponse donnée marquée quand on revient en arrière. Autant de
   traits que d'étapes sur le chemin — trois pour l'immobilier, cinq pour
   l'agent sans CRM (23 octobre 2026) —, dans la même largeur. */
.parcours-progression {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 0.35rem;
  max-width: 14rem;
}
.parcours-progression span {
  height: 4px;
  border-radius: 2px;
  background: var(--filet-net);
}
.parcours-progression[data-pas='1'] span:first-child,
.parcours-progression[data-pas='2'] span:nth-child(-n + 2),
.parcours-progression[data-pas='3'] span:nth-child(-n + 3),
.parcours-progression[data-pas='4'] span:nth-child(-n + 4),
.parcours-progression[data-pas='5'] span {
  background: var(--accent);
}
.ouverture-grille .parcours-choix,
.ouverture-grille .parcours-choix-besoins {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem;
}
.choix {
  grid-template-columns: 2.5rem minmax(0, 1fr);
  column-gap: 0.95rem;
  align-items: center;
  padding: 0.95rem 1.1rem;
}
.choix-icone {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 10px;
  background: var(--accent-voile);
  color: var(--accent);
}
.parcours-choix-besoins .choix-icone {
  grid-row: auto;
}
.choix-icone svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.choix-titre,
.choix-texte {
  grid-column: 2;
}
.choix-texte {
  padding-right: 1.6rem;
}
.choix-titre::after {
  top: 50%;
  transform: translateY(-50%);
}
.choix:hover .choix-titre::after {
  transform: translate(3px, -50%);
}
.choix:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 10px;
}
.choix[aria-current='true'] {
  border-color: var(--accent);
  background: var(--accent-voile);
  box-shadow: 0 0 0 1px var(--accent), var(--ombre);
}
.choix[aria-current='true'] .choix-icone {
  background: var(--accent);
  color: var(--accent-encre);
}
.choix[aria-current='true'] .choix-titre::after {
  content: '✓';
}
.parcours-raison {
  max-width: 62ch;
  color: var(--encre-2);
}
.parcours-raison strong {
  color: var(--accent);
  font-weight: 600;
}
.parcours-detail {
  max-width: 62ch;
  padding-top: 0.8rem;
  border-top: 1px solid var(--filet-net);
}
.parcours-detail summary {
  color: var(--accent);
  font-size: 0.93rem;
  font-weight: 600;
  cursor: pointer;
}
.parcours-detail[open] summary {
  margin-bottom: 0.9rem;
}
.parcours-detail .parcours-mention {
  margin-top: 0.9rem;
}
.parcours-precaution {
  max-width: 62ch;
}

/* La démonstration : trois écrans réels, recadrés pour se lire à la largeur
   de la page. Le texte reste à côté de l'image pendant qu'on la parcourt. */
.demo {
  display: grid;
  gap: clamp(2.8rem, 2rem + 3vw, 4.5rem);
}
.demo-rangee {
  display: grid;
  gap: 1.3rem;
}
@media (min-width: 900px) {
  .demo-rangee {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 2.6rem;
    align-items: start;
  }
  .demo-texte {
    position: sticky;
    top: 96px;
  }
}
.demo-texte h3 {
  margin: 0.45rem 0 0.6rem;
  font-size: 1.35rem;
}
.demo-texte p:not(.demo-version) {
  max-width: 46ch;
  color: var(--encre-2);
}
.demo-version {
  color: var(--accent);
  font-family: var(--fonte-donnee);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.demo-figure {
  display: grid;
  gap: 0.9rem;
  margin: 0;
}
.demo-figure .capture {
  display: block;
}
.demo-figure .capture img {
  width: 100%;
}
.demo-figure figcaption {
  margin-top: 0;
  color: var(--encre-3);
  font-size: 0.88rem;
}

/* Le calcul : un exemple, des hypothèses qu'on voit et qu'on change. */
.calcul-exemple {
  color: var(--encre-2);
  font-size: 0.9rem;
}
.calcul-hypotheses {
  display: grid;
  gap: 0.9rem;
  margin: 0.3rem 0 0;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--filet);
  border-radius: 10px;
}
.calcul-hypotheses legend {
  padding: 0 0.35rem;
  color: var(--encre);
  font-size: 0.92rem;
  font-weight: 600;
}
.calcul-hypotheses .calcul-champ {
  margin-top: 0;
}
.calcul-aide {
  color: var(--encre-3);
  font-size: 0.86rem;
}

/* Deux offres côte à côte : les deux formules de CReaM Wash, sur sa page. */
.plans-deux {
  max-width: 58rem;
}
/* Trois offres depuis CReaM Compass (22 octobre 2026) — Lite, Compass, CReaM :
   côte à côte sur un grand écran, l'une sous l'autre en dessous de 1000 px. Un
   `auto-fit` les laisserait à deux plus une sur une tablette, la troisième
   seule sur sa rangée. */
.plans-trois {
  grid-template-columns: minmax(0, 1fr);
  max-width: 36rem;
}
@media (min-width: 1000px) {
  .plans-trois {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
  }
}
/* Une fonction annoncée, pas encore livrée : ni coche, ni couleur du « oui ». */
.plan li.plan-a-venir svg {
  color: var(--encre-3);
}
.marque-a-venir {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0.02rem 0.45rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--alerte);
  font-family: var(--fonte-donnee);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: 0.12em;
  white-space: nowrap;
}
.plan-ttc {
  margin-top: 0.35rem;
  color: var(--encre);
  font-size: 0.95rem;
  font-weight: 600;
}
/* L'autre période, toujours sous les yeux (audit du 17 octobre 2026). */
.plan-autre {
  margin-top: 0.2rem;
  color: var(--encre-2);
  font-size: 0.88rem;
}
/* Ce qui décide d'un achat se lit d'abord : pas d'essai, le paiement à l'inscription. */
.plan-cle {
  margin-top: 0.6rem;
  padding: 0.5rem 0.7rem;
  border-left: 3px solid var(--accent);
  background: var(--accent-voile);
  border-radius: 0 6px 6px 0;
  color: var(--encre);
  font-size: 0.9rem;
}
.plan-ttc strong {
  color: var(--encre);
  font-weight: 600;
}
/* Toute la largeur, comme les rangées d'offres au-dessus. */
.encart-equipe {
  margin-top: 1.6rem;
  border: 1px dashed var(--filet-net);
  background: var(--surface-2);
}
.encart-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 0.4rem;
}
/* Le statut de CReaM Pro : une pastille courte, qui tient sur une ligne, puis la
   date en clair, à côté sur un grand écran, dessous dans une carte étroite. */
.statut-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
}
.statut-a-venir {
  justify-self: start;
  padding: 0.12rem 0.6rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--alerte);
  font-family: var(--fonte-donnee);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.statut-date {
  color: var(--encre-2);
  font-size: 0.86rem;
}

/* Les questions des tarifs, repliables : les essentielles s'ouvrent d'office,
   tout le reste se lit d'un clic — et reste dans la page. */
.questions details {
  border-bottom: 1px solid var(--filet);
}
.questions summary {
  position: relative;
  padding: 1.15rem 2.4rem 1.15rem 0;
  color: var(--encre);
  font-family: var(--fonte-titre);
  font-size: 1.04rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  list-style: none;
  cursor: pointer;
}
.questions summary::-webkit-details-marker {
  display: none;
}
.questions summary::after {
  content: '+';
  position: absolute;
  top: 1.05rem;
  right: 0.35rem;
  color: var(--accent);
  font-family: var(--fonte);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1;
}
.questions details[open] summary::after {
  content: '−';
}
.questions details > div {
  display: grid;
  gap: 0.7rem;
  padding-bottom: 1.4rem;
}

/* Versions : trois résumés pour décider, le tableau pour vérifier. */
.resumes {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin-top: 2.6rem;
}
.resume {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem 1.4rem;
  border: 1px solid var(--filet);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--ombre);
}
.resume-retenu {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--ombre);
}
.resume-a-venir {
  border-style: dashed;
  border-color: var(--filet-net);
  background: var(--surface-2);
  box-shadow: none;
}
.resume h3 {
  font-size: 1.3rem;
}
.resume dl {
  display: grid;
  gap: 0.75rem;
  margin: 0;
}
.resume dt {
  color: var(--encre-3);
  font-family: var(--fonte-donnee);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.resume dd {
  margin: 0.15rem 0 0;
  color: var(--encre-2);
  font-size: 0.95rem;
}
.resume dd strong {
  color: var(--encre);
  font-weight: 600;
}
.resume .bouton {
  margin-top: auto;
  justify-content: center;
  text-align: center;
}
.resume .conditions-essai {
  margin-top: -0.4rem;
  font-size: 0.84rem;
}
.lien-detail {
  display: inline-block;
  margin: 1.4rem 0 2.4rem;
  font-weight: 600;
}
#detail {
  scroll-margin-top: 84px;
}
/* Le tableau tient sur un téléphone sans défiler de côté : des colonnes courtes
   — cinq depuis CReaM Compass —, une fois les marges réduites. */
@media (max-width: 640px) {
  .defile table {
    min-width: 0;
    font-size: 0.8rem;
  }
  .defile th,
  .defile td {
    padding: 0.55rem 0.3rem;
  }
  .defile thead th,
  .defile td.marque-option,
  .defile td.prix {
    white-space: normal;
  }
  .defile thead th {
    font-size: 0.62rem;
    letter-spacing: 0.02em;
  }
  .defile .entete-note {
    display: block;
  }
  .defile .entete-note::before {
    content: none;
  }
  .defile td.prix,
  .defile td.marque-option {
    font-size: 0.74rem;
  }
}

/* Télécharger : trois repères, puis deux chemins selon d'où l'on vient. */
.installeur-precision {
  margin-top: 0.9rem;
  max-width: 60ch;
  color: var(--encre-2);
  font-size: 0.94rem;
}
.installeur-reperes {
  display: grid;
  gap: 0.8rem 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  max-width: 54rem;
  margin: 1.6rem 0 0;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--filet);
  border-radius: 12px;
  background: var(--surface-2);
  list-style: none;
  color: var(--encre-2);
  font-size: 0.92rem;
}
.installeur-reperes strong {
  display: block;
  color: var(--encre);
  font-weight: 600;
}
.chemins {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  max-width: 54rem;
  margin-top: 1.4rem;
}
.chemin {
  display: grid;
  gap: 0.4rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--filet);
  border-radius: 12px;
  background: var(--surface);
}
.chemin h2 {
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.chemin p {
  color: var(--encre-2);
  font-size: 0.93rem;
}
.etape {
  scroll-margin-top: 84px;
}

/* ── Les métiers (16 octobre 2026) ───────────────────────────────────────── */
.ouverture-metier h1 {
  max-width: 20ch;
}
.plans-un {
  max-width: 30rem;
}
/* Les métiers disponibles : une carte par logiciel métier prêt, la liste grandit. */
.metiers {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr));
}
.metier-logiciel {
  margin-top: 0.2rem;
  font-family: var(--fonte-donnee);
  font-size: 0.85rem;
  color: var(--accent);
}
.metier-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: auto;
}
.metier-dispo .bouton {
  margin-top: 0;
}
.metier-prix {
  color: var(--encre-2);
  font-size: 0.95rem;
}
.metier-prix strong {
  color: var(--encre);
  font-weight: 600;
}
.statut-sur-demande {
  justify-self: start;
  display: inline-block;
  margin-bottom: 0.6rem;
  padding: 0.12rem 0.6rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--encre-3);
  font-family: var(--fonte-donnee);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.metier-autre {
  border-style: dashed;
  box-shadow: none;
  background: var(--surface-2);
}
.statut-disponible {
  justify-self: start;
  display: inline-block;
  margin-bottom: 0.6rem;
  padding: 0.12rem 0.6rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--bon);
  font-family: var(--fonte-donnee);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* L'inscription : l'activité, le nom de domaine, la période. Les champs
   prennent la largeur de leur carte, et la police du texte, pas celle des
   chiffres : on y tape un nom, pas un montant. */
.inscription {
  display: grid;
  gap: 0.85rem;
}
.inscription-champ {
  display: grid;
  gap: 0.35rem;
  color: var(--encre-2);
  font-size: 0.93rem;
}
.inscription-champ input,
.inscription-champ select {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--filet-net);
  border-radius: 8px;
  background: var(--fond);
  color: var(--encre);
  font: inherit;
  font-size: 1rem;
}
.inscription-champ input:focus,
.inscription-champ select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.inscription-aide {
  color: var(--encre-3);
  font-size: 0.85rem;
}
.inscription .bouton {
  justify-self: start;
  margin-top: 0.3rem;
}
/* Sur un téléphone, le lien vers les métiers a pris de la place dans la barre
   collée en haut : « Fonctionnalités », une ancre de l'accueil, s'efface pour
   qu'elle tienne sur deux lignes, comme avant. */
@media (max-width: 480px) {
  .barre nav a[href$='#outils'] {
    display: none;
  }
}

/* ── Le backlog (17 octobre 2026) : le journal des changements faits en
   l'absence de Toni, le plus récent en tête. ─────────────────────────────── */
.journal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  max-width: 62rem;
}
.journal-entree {
  display: grid;
  grid-template-columns: minmax(9rem, 12rem) 1fr;
  gap: 1.6rem;
  padding-block: 1.4rem;
  border-top: 1px solid var(--filet);
}
.journal-entree:first-child {
  border-top: 0;
  padding-top: 0;
}
.journal-quand {
  font-family: var(--fonte-donnee);
  font-size: 0.85rem;
  color: var(--encre-3);
  font-variant-numeric: tabular-nums;
}
.journal-entree h2 {
  font-size: 1.12rem;
}
.journal-entree p {
  color: var(--encre-2);
  max-width: 66ch;
  margin-top: 0.4rem;
}
.journal-entree code {
  font-family: var(--fonte-donnee);
  font-size: 0.9em;
}
@media (max-width: 640px) {
  .journal-entree {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
}

/* Les conditions de l'essai en trois lignes courtes, sous chaque bouton d'essai
   (audit de conversion du 17 octobre 2026). */
.conditions-liste {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
  font-size: 0.88rem;
  color: var(--encre-2);
}
.conditions-liste li {
  position: relative;
  padding-left: 1.1rem;
}
.conditions-liste li::before {
  content: '';
  position: absolute;
  left: 0.15rem;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bon);
}
.conditions-liste strong {
  color: var(--encre);
  font-weight: 600;
}
.conditions-liste + .conditions-essai {
  margin-top: 0.5rem;
}
/* Dans une carte de prix, la liste des conditions n'est pas une liste de
   fonctions : ni coches, ni deux colonnes. */
.plan .conditions-liste {
  gap: 0.25rem;
  font-size: 0.88rem;
}
.conditions-liste li,
.plan .conditions-liste li {
  display: block;
}
.journal-liste {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  color: var(--encre-2);
  max-width: 66ch;
  display: grid;
  gap: 0.35rem;
}

/* Le choix de la période avant l'essai, à l'accueil (audit du 17 octobre 2026),
   et celui de l'offre, CReaM Compass ou CReaM, depuis le 22 octobre 2026. */
.periode-essai,
.offre-essai {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 0.6rem;
  margin-top: 1rem;
}
/* Sous l'offre, la période tient sur une rangée, même sur un téléphone : les
   deux choix ne se confondent pas. */
.offre-essai + .periode-essai {
  margin-top: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.periode-choix,
.offre-choix {
  font: inherit;
  text-align: left;
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--filet-net);
  border-radius: 10px;
  background: var(--surface);
  color: var(--encre-2);
  font-size: 0.88rem;
  cursor: pointer;
}
.periode-choix strong,
.offre-choix strong {
  color: var(--encre);
  font-size: 0.98rem;
}
.offre-prix {
  color: var(--encre);
  font-family: var(--fonte-donnee);
  font-variant-numeric: tabular-nums;
  font-size: 0.86rem;
}
.periode-choix[aria-pressed='true'],
.offre-choix[aria-pressed='true'] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  background: var(--accent-voile);
}
.periode-choix:focus-visible,
.offre-choix:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Sur un téléphone, la barre ne reste plus collée en haut : sur deux lignes,
   elle prenait une part notable du petit écran (audit du 17 octobre 2026). Les
   pages gardent leurs appels à l'action dans le contenu. */
@media (max-width: 760px) {
  .barre {
    position: static;
  }
}
.encart-metier {
  margin-top: 1.6rem;
}
/* Le nom de domaine, replié et facultatif, avant de payer CReaM Wash. */
.inscription-plus {
  display: grid;
  gap: 0.85rem;
}
.inscription-plus > summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 0.93rem;
}
.inscription-plus[open] > summary {
  margin-bottom: 0.2rem;
}

/* Qui édite CReaM, au bas de l’accueil (référencement, 17 octobre 2026). */
.note.editeur {
  margin-top: 1.6rem;
  max-width: 46rem;
}

/* Le calcul des gains (17 octobre 2026) : le résultat d'abord, le détail replié. */
.calcul-annuel {
  margin: 0;
  color: var(--encre-2);
  font-size: 0.92rem;
}
.calcul-detail summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.92rem;
}
.calcul-detail .calcul-ligne {
  margin-top: 0.55rem;
}
.calcul-suite {
  margin: 0;
  font-size: 0.92rem;
  color: var(--encre-2);
}

/* Les gains retenus par CReaM, fixés par Toni le 19 octobre 2026. */
.calcul-gains {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.45rem;
  color: var(--encre-2);
  font-size: 0.92rem;
}
.calcul-gains strong {
  color: var(--encre);
}
.calcul-question {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  font-size: 0.95rem;
}
.calcul-question span {
  font-weight: 600;
  width: 100%;
}
.calcul-question label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
}