/* MAXX — UI téléphone. Ne s'applique qu'en ≤ 900px, desktop inchangé.
   Aucune couleur en dur : tout vient des jetons du thème (jetons.css, data-theme).

   Le ton : calme. Petites tailles, beaucoup d'air, une seule couleur forte (l'encre),
   le bronze en touches. Rien ne crie. */

@media (min-width: 901px) {
  .tel-seul { display: none !important; }
}
@media (max-width: 900px) {
  .ordi-seul { display: none !important; }
}

@media (max-width: 900px) {
  html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
  body { background: var(--bg); color: var(--ink); overscroll-behavior-y: none; }
  * { -webkit-tap-highlight-color: transparent; }
  button, .nav-link, .essai-depot { transition: transform var(--snap), background var(--snap), color var(--snap), box-shadow var(--snap), opacity var(--snap); }
  button:active, .nav-link:active { transform: scale(0.97); }
  /* Pas de capitales qui crient : les boutons parlent normalement. */
  button, .essai-depot b, .essai-depot span, .hero-compte-tel, .attente-boite { text-transform: none; letter-spacing: 0; }
  .essai-depot b { letter-spacing: -0.01em; }

  /* ================= en-tête ================= */
  .home-top {
    /* iPhone sans bordure : la page monte jusque sous l'heure et le réseau ;
       l'en-tête garde la hauteur de la barre d'état en réserve. */
    padding: env(safe-area-inset-top) max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    border-bottom-color: transparent;
  }
  .home-top.is-scrolled {
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    border-bottom-color: var(--line);
  }
  .home-top-inner { min-height: 56px; max-width: none; }
  .home-top .brand, .brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--ink);
    letter-spacing: 0.3em;
    font-weight: 500;
    font-size: 11px;
  }
  .brand::after { display: none; }
  .brand-noeud { width: 22px; height: 20px; object-fit: contain; content: var(--noeud); }
  .home-top-cta { display: none; }
  .home-progress i { background: linear-gradient(90deg, var(--metal), var(--accent)); }

  /* ================= hero ================= */
  .hero-screen {
    min-height: 0;
    padding: 30px max(22px, env(safe-area-inset-right)) 6px max(22px, env(safe-area-inset-left));
    gap: 0;
    grid-template-rows: 1fr;
    align-content: start;
    overflow: hidden;
    scroll-snap-align: none;
  }
  .hero-core { display: grid; grid-template-columns: 1fr; gap: 0; max-width: none; width: 100%; padding-bottom: 0; }
  .hero-copy { display: contents; }
  .hero-screen h1 { order: 1; }
  .hook { order: 2; }
  .dire-accueil { order: 4; }
  .hero-actions-tel { order: 4; }
  .entree, .attente, .essai, #essai-vu { order: 5; }
  .hero-screen .go { display: none !important; }
  /* la maquette animée du desktop disparaît ; le vrai résultat de l'essai (#essai-vu),
     qui vit dans le même cadre, remonte dans la colonne */
  .demo-frame { display: contents; }
  .demo-frame .demo, .demo-ring { display: none !important; }
  .essai-vu { order: 5; margin-top: 12px; padding: 18px; border-radius: 18px; box-shadow: 0 14px 40px -22px color-mix(in srgb, var(--ink) 35%, transparent); }
  .essai-vu[hidden] { display: none; }
  .essai-vu-tete span { text-transform: none; }
  .essai-champs li { font-size: 13px; }
  .essai-suite .primary { margin-top: 6px; }

  .glow {
    width: 120vw; height: 120vw; top: 0; left: 50%; right: auto;
    transform: translate(-50%, -55%) !important;
    background: var(--hero-lueur);
    opacity: 0.55;
    filter: none;
    will-change: auto;
  }
  .hero-noeud {
    position: absolute; right: -22%; top: -4%; width: 70vw;
    opacity: 0.03; pointer-events: none; filter: none;
  }

  /* le titre et l'accroche du desktop cèdent la place à ceux du téléphone */
  .hero-screen h1:not(.titre-tel), .hero-copy > .hook { display: none !important; }
  .titre-tel { order: 1; }
  .hero-screen h1.titre-tel {
    position: relative;
    font-family: var(--serif);
    font-size: 30px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.18;
    margin: 6px 0 0;
    text-align: center;
    opacity: 1;
  }
  .hero-screen h1.titre-tel em { font-style: italic; font-weight: 500; color: var(--titre-em); }
  .metriques-tel {
    order: 5; list-style: none; margin: 26px 0 0; padding: 0 0 8px;
    display: grid; grid-template-columns: repeat(3, 1fr); text-align: center;
  }
  .metriques-tel li + li { border-left: 1px solid var(--line); }
  .metriques-tel b {
    display: block; font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1;
    color: var(--ink); font-variant-numeric: tabular-nums;
  }
  .metriques-tel span { display: block; margin-top: 5px; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
  .entree, .attente, .essai, #essai-vu { order: 6; }
  .essai-vu { order: 6; }
  /* actions : un seul bouton, encre. Le compte est un lien. */
  .hero-actions-tel { margin-top: 22px; display: grid; gap: 6px; justify-items: center; }
  .hero-essai-tel,
  button.primary,
  .entree-champ .primary {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--bg);
    border-radius: 999px;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.01em;
    min-height: 50px;
    padding: 12px 24px;
    box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--ink) 55%, transparent);
    width: 100%;
  }
  .hero-essai-tel:hover, button.primary:hover { background: var(--ink); color: var(--bg); opacity: 0.94; }
  .hero-compte-tel {
    background: none;
    border: 0;
    color: var(--muted);
    font-size: 13px;
    min-height: 40px;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: var(--line-strong);
  }
  button.text, button.ghost { color: var(--muted); }

  /* e-mail : n'apparaît que si on le demande */
  .entree:not(.tel-visible) { display: none !important; }
  .entree { margin-top: 10px; }
  .entree-champ {
    display: flex; flex-direction: column; gap: 8px;
    padding: 8px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 22px;
  }
  .entree-champ input[type="email"] {
    width: 100%; min-height: 46px; padding: 11px 16px;
    font-size: 16px; border: 0; border-radius: 14px;
    background: transparent; color: var(--ink);
  }
  .entree-champ input[type="email"]:focus { outline: 0; background: var(--bg); }
  .entree-champ input::placeholder { color: var(--muted); }
  .entree-champ .primary { min-height: 46px; box-shadow: none; }
  .entree-mention { display: none !important; }
  .entree-essai { display: none !important; }
  .entree-mention-court { margin: 10px 0 0; font-size: 11.5px; color: var(--muted); text-align: center; }
  .entree-mention-court a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }

  .essai { margin-top: 10px; }
  .essai-depot {
    background: var(--paper);
    border: 1px dashed var(--line-strong);
    border-radius: 18px;
    padding: 18px;
  }
  .essai-depot b { font-size: 15px; font-weight: 600; }
  .essai-depot span { font-size: 13px; color: var(--muted); }
  .essai-gages { font-size: 12px; color: var(--muted); }
  .essai-mention { font-size: 12px; color: var(--muted); }
  .essai-vu { margin-top: 14px; }

  /* ================= sous le hero ================= */
  .stage-stat, .stage-eq, .stage-know, .stage-gain, .stage-flow, .stage-price,
  .logo-strip-end, .home-path, .path, .logo-mention, .logo-compte { display: none !important; }

  .logo-strip { padding: 26px 0 40px; background: transparent; border-top: 0; }
  .logo-kicker { font-size: 10px; letter-spacing: 0.18em; color: var(--muted); text-align: center; padding: 0 22px; }
  .logo-kicker em { color: var(--ink-soft); font-style: normal; }
  .logo-rail {
    mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
    padding: 8px 0 0;
  }
  .logo-track { gap: 30px; animation-duration: 40s; }
  .logo-track img { height: 18px; max-width: 84px; filter: grayscale(1) contrast(0.9); opacity: 0.5; }

  /* Chaque section est une bande pleine largeur, avec sa propre couleur.
     Le rythme clair / sombre / chaud fait la page ; les textes restent courts. */
  .bande { padding: 56px max(24px, env(safe-area-inset-left)) 60px max(24px, env(safe-area-inset-right)); position: relative; }
  .bande.sombre { background: var(--ink); color: var(--bg); color-scheme: dark; }
  .bande.chaude { background: color-mix(in srgb, var(--accent) 11%, var(--bg)); }
  .bande .eyebrow {
    margin: 0 0 14px; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted);
    display: inline-block; clip-path: inset(0 100% 0 0);
    transition: clip-path 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
    opacity: 1; translate: 0;
  }
  .bande.in .eyebrow { clip-path: inset(0 0 0 0); }
  .bande.sombre .eyebrow { color: color-mix(in srgb, var(--bg) 60%, transparent); }
  .bande h2 {
    margin: 0; font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.2; letter-spacing: -0.01em;
    text-transform: none; color: inherit;
  }
  .bande [data-reveal] { translate: 0 22px; transition-duration: 800ms; }
  .bande [data-reveal]:nth-child(2) { transition-delay: 90ms; }
  .bande [data-reveal]:nth-child(3) { transition-delay: 180ms; }
  .bande [data-reveal]:nth-child(4) { transition-delay: 270ms; }
  .bande [data-reveal]:nth-child(5) { transition-delay: 360ms; }
  .bande [data-reveal]:nth-child(6) { transition-delay: 450ms; }

  /* le produit en action : une vidéo réelle, dans un cadre de téléphone */
  .regarder { text-align: center; padding-bottom: 64px; }
  .regarder h2 { max-width: 20ch; margin: 0 auto; }
  .regarder .cadre {
    margin: 30px auto 0; width: 232px; padding: 8px;
    border-radius: 34px; background: color-mix(in srgb, var(--bg) 10%, var(--ink));
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6), inset 0 0 0 1px color-mix(in srgb, var(--bg) 18%, transparent);
    transform-origin: 50% 100%;
    transition: opacity 900ms ease, translate 900ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 1100ms cubic-bezier(0.2, 0.8, 0.2, 1);
    transform: perspective(900px) rotateX(14deg) scale(0.96);
  }
  .regarder.in .cadre { transform: perspective(900px) rotateX(0) scale(1); }
  .regarder video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 27px; background: var(--bg); }
  .regarder .legende { margin: 18px 0 0; font-size: 11.5px; color: color-mix(in srgb, var(--bg) 55%, transparent); }
  .regarder::after {
    content: ""; position: absolute; left: 50%; bottom: 0; width: 70vw; height: 40vw; translate: -50% 40%;
    border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 45%, transparent), transparent);
    pointer-events: none; opacity: 0; transition: opacity 1.2s ease 300ms;
  }
  .regarder.in::after { opacity: 1; }

  /* bénéfices : trois phrases, qui entrent par la gauche */
  .benefices ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
  .benefices li {
    position: relative; padding-left: 18px;
    font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.2; color: var(--ink);
    translate: -18px 0;
  }
  .benefices.in li { translate: 0 0; }
  .benefices li::before {
    content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; background: var(--accent);
    transform: scaleY(0); transform-origin: top; transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 300ms;
  }
  .benefices.in li::before { transform: scaleY(1); }

  /* objections : fermées, donc peu de texte */
  .objections details { border-top: 1px solid var(--line); }
  .objections details:last-of-type { border-bottom: 1px solid var(--line); }
  .objections summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 15px 0; font-size: 15px; font-weight: 500; color: var(--ink);
  }
  .objections summary::-webkit-details-marker { display: none; }
  .objections summary::after {
    content: ""; flex: none; width: 8px; height: 8px;
    border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
    transform: rotate(45deg); margin-right: 4px; transition: transform 200ms ease;
  }
  .objections details[open] summary::after { transform: rotate(-135deg); }
  .objections details p { margin: -4px 0 15px; font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 34ch; }

  /* la promesse, une dernière fois */
  .moment { text-align: center; padding: 64px 24px 72px; }
  .moment-carte { position: relative; padding: 0; background: none; border: 0; box-shadow: none; }
  .moment-noeud {
    width: 34px; height: 32px; object-fit: contain; margin: 0 auto 18px; display: block;
    scale: 0.4; rotate: -30deg; transition: scale 900ms cubic-bezier(0.2, 1.2, 0.3, 1), rotate 900ms cubic-bezier(0.2, 1.2, 0.3, 1);
  }
  .moment.in .moment-noeud { scale: 1; rotate: 0deg; }
  .bande.sombre .moment-noeud { content: url("/static/marque/noeud-blanc.png"); }
  html[data-theme="signal"] .bande.sombre .moment-noeud { content: url("/static/marque/noeud-noir.png"); }
  .moment-texte { margin: 0; font-family: var(--serif); font-size: 28px; line-height: 1.2; color: var(--bg); }
  .moment .primary {
    display: block; margin: 22px auto 0; width: auto; min-width: 220px;
    background: var(--bg); border-color: var(--bg); color: var(--ink); box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.6);
  }
  .moment-mention { margin: 12px 0 0; font-size: 11.5px; color: color-mix(in srgb, var(--bg) 55%, transparent); }

  .site-foot { text-align: center; padding: 36px 22px 110px; border-top: 0; color: var(--muted); font-size: 12px; }

  /* ================= autres pages ================= */
  .stage, .stage-know, .stage-gain { padding: 48px max(18px, env(safe-area-inset-left)) 48px max(18px, env(safe-area-inset-right)); }
  .column { padding: 24px max(18px, env(safe-area-inset-left)) 128px max(18px, env(safe-area-inset-right)); }
  button { border-radius: 14px; }
  button.primary { border-radius: 999px; }
  .garantie, .waiver-box, .compte-box, .ask-box, .offer-search, .company-hero, .job-row {
    background: var(--paper); border-color: var(--line); color: var(--ink);
  }
  .waiver-box, .compte-box, .ask-box { border-radius: 20px; }
  #waiver, #compte-sheet { background: color-mix(in srgb, var(--ink) 55%, transparent); }
  #device-card {
    background: var(--paper); border-color: var(--line); color: var(--ink);
    left: 12px; right: 12px; bottom: calc(88px + env(safe-area-inset-bottom)); border-radius: 16px;
  }
  .offers-page, .track-page { padding: 18px max(18px, env(safe-area-inset-left)) 140px max(18px, env(safe-area-inset-right)); }
  .offer-search { border-radius: 20px; }
  .offer-search input, .offer-search select { background: var(--raise); color: var(--ink); border-color: var(--line); font-size: 16px; }
  .steps li.on b, .steps li.done b { background: var(--ink); border-color: var(--ink); color: var(--bg); }
  .steps li.done + li::before, .steps li.on + li::before { background: var(--ink); }
  .eyebrow { color: var(--muted); }
  input, select, textarea { color: var(--ink); background: var(--paper); border-color: var(--line-strong); }

  /* ================= chat ================= */
  #maxx-chat { right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); }
  #maxx-chat .bulle {
    width: 42px; height: 42px; display: grid; place-items: center; padding: 0;
    background: var(--paper); color: var(--ink); border: 1px solid var(--line);
    box-shadow: 0 10px 30px -14px color-mix(in srgb, var(--ink) 40%, transparent);
  }
  #maxx-chat .bulle svg { display: block; width: 18px; height: 18px; transform: translate(1px, -1px); }
  #maxx-chat .fenetre {
    right: -16px; bottom: 54px; width: calc(100vw - 20px); max-height: min(62vh, 480px);
    background: var(--paper); border: 1px solid var(--line-strong); border-radius: 22px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2);
  }
  #maxx-chat header { padding: 16px 18px 12px; border-bottom-color: var(--line); color: var(--ink); }
  #maxx-chat header b::after { color: var(--accent); }
  #maxx-chat header span, #maxx-chat .fermer { color: var(--muted); }
  #maxx-chat .fil .eux { background: var(--raise); color: var(--ink); }
  #maxx-chat .fil .vous { background: var(--ink); color: var(--bg); }
  #maxx-chat form { border-top-color: var(--line); padding: 12px 14px 14px; }
  #maxx-chat input { background: var(--bg); border-color: var(--line-strong); color: var(--ink); font-size: 16px; min-height: 44px; }
  #maxx-chat input:focus { outline-color: var(--accent); }
  #maxx-chat form button { background: var(--ink); color: var(--bg); border-radius: 12px; min-height: 44px; }

  /* ================= le parcours d'entrée : 2 questions, un chiffre, un dossier ================= */
  
  /* le bandeau cookies attend que le parcours soit fini : rien ne doit couvrir le bouton */

  /* quelques segments fins, sans un mot : ce qui est fait se remplit, l'étape en cours respire */

  /* une lueur qui se déplace lentement derrière tout : la vie, sans un mot de plus */

  /* l'écran 0 : la promesse, puis la première question qui arrive dessous */

  /* les puces arrivent en cascade à chaque écran */

  /* le rythme, réglé sur l'écran du chiffre : la phrase change en direct */

  /* le pied : discret quand l'écran se suffit */

  /* l'écran 8 : l'essai, dit en clair */

  /* la préparation : le compteur monte, les étapes se cochent */

  /* la coche qui se dessine avant le chiffre */

  /* les paliers qui attendent, sous l'anneau du dossier : le premier est déjà à soi */

  /* l'écran 3 : la recherche, puis le chiffre */

  /* l'écran 4 : l'anneau du dossier, puis le vrai formulaire */

  .hero-essai-tel b { font-weight: 600; }

  /* ================= l'hologramme : M · X · ∞ → le nœud ================= */
  #maxx-chargeur {
    position: fixed; inset: 0; z-index: 5000; padding-top: env(safe-area-inset-top);
    display: grid; place-items: center;
    background:
      radial-gradient(55% 35% at 50% 60%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
      var(--bg);
    opacity: 0; visibility: hidden;
    transition: opacity 320ms ease, visibility 0s linear 320ms;
    pointer-events: none;
  }
  #maxx-chargeur.on { opacity: 1; visibility: visible; transition: opacity 90ms ease; pointer-events: auto; }
  #maxx-chargeur .scene { position: relative; width: 240px; height: 240px; perspective: 520px; display: grid; place-items: center; }
  #maxx-chargeur * { animation-play-state: paused; }
  #maxx-chargeur.joue * { animation-play-state: running; }

  /* 1. les trois glyphes apparaissent, l'un après l'autre */
  #maxx-chargeur .glyphes {
    position: absolute; inset: 0; display: grid; place-items: center;
    font: 600 44px/1 var(--sans); color: var(--ink); letter-spacing: 0;
  }
  #maxx-chargeur .g { position: absolute; opacity: 0; will-change: transform, opacity; }
  #maxx-chargeur .g.m   { animation: glyphe-m   2300ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  #maxx-chargeur .g.x   { animation: glyphe-x   2300ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  #maxx-chargeur .g.inf { animation: glyphe-inf 2300ms cubic-bezier(0.2, 0.8, 0.2, 1) both; font-size: 50px; }
  @keyframes glyphe-m {
    0%       { opacity: 0; transform: translate(-96px, 8px) scale(0.7); filter: blur(4px); }
    12%, 42% { opacity: 1; transform: translate(-72px, 0) scale(1); filter: blur(0); }
    62%      { opacity: 0; transform: translate(0, 0) scale(0.35) rotate(-40deg); filter: blur(3px); }
    100%     { opacity: 0; }
  }
  @keyframes glyphe-x {
    0%, 12%  { opacity: 0; transform: translate(0, 10px) scale(0.7); filter: blur(4px); }
    24%, 46% { opacity: 1; transform: translate(0, 0) scale(1); filter: blur(0); }
    62%      { opacity: 0; transform: translate(0, 0) scale(0.35) rotate(40deg); filter: blur(3px); }
    100%     { opacity: 0; }
  }
  @keyframes glyphe-inf {
    0%, 24%  { opacity: 0; transform: translate(96px, 8px) scale(0.7); filter: blur(4px); }
    36%, 50% { opacity: 1; transform: translate(72px, 0) scale(1); filter: blur(0); }
    64%      { opacity: 0; transform: translate(0, 0) scale(0.35); filter: blur(3px); }
    100%     { opacity: 0; }
  }

  /* 2. le nœud naît de leur rencontre, puis tourne */
  #maxx-chargeur .noeud3d {
    position: relative; width: 96px; height: 88px;
    transform-style: preserve-3d;
    opacity: 0;
    animation:
      noeud-nait 2300ms cubic-bezier(0.2, 0.9, 0.2, 1) both,
      holo-tourne 2000ms cubic-bezier(0.55, 0.05, 0.25, 1) 1400ms infinite;
    filter: drop-shadow(0 14px 20px color-mix(in srgb, var(--ink) 22%, transparent));
  }
  @keyframes noeud-nait {
    0%, 56% { opacity: 0; scale: 0.3; filter: blur(8px) brightness(2); }
    70%     { opacity: 1; scale: 1.08; filter: blur(0) brightness(1.4); }
    80%     { scale: 1; filter: blur(0) brightness(1); }
    100%    { opacity: 1; scale: 1; }
  }
  #maxx-chargeur .noeud3d > i { position: absolute; inset: 0; display: block; backface-visibility: visible; }
  #maxx-chargeur .base { background: var(--noeud) center / contain no-repeat; }
  #maxx-chargeur .irise {
    -webkit-mask: var(--noeud) center / contain no-repeat; mask: var(--noeud) center / contain no-repeat;
    background: linear-gradient(115deg, #8fa8ff 0%, #d9c2ff 18%, #ffd1ec 34%, #b8fff1 52%, #fff0b8 68%, #8fa8ff 86%, #d9c2ff 100%);
    background-size: 300% 300%; mix-blend-mode: screen; opacity: 0.75;
    animation: holo-irise 2.4s linear infinite;
  }
  #maxx-chargeur .reflet {
    -webkit-mask: var(--noeud) center / contain no-repeat; mask: var(--noeud) center / contain no-repeat;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.95) 50%, transparent 62%);
    background-size: 260% 100%; animation: holo-reflet 2s ease-in-out infinite; opacity: 0.9;
  }
  #maxx-chargeur .scan {
    -webkit-mask: var(--noeud) center / contain no-repeat; mask: var(--noeud) center / contain no-repeat;
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0 1px, transparent 1px 4px);
    animation: holo-scan 1.1s linear infinite; opacity: 0.55;
  }
  
  @keyframes holo-irise { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
  @keyframes holo-reflet { 0% { background-position: 120% 0; } 100% { background-position: -20% 0; } }
  @keyframes holo-scan { 0% { background-position: 0 0; } 100% { background-position: 0 8px; } }

  /* 3. orbites, sol, légende — arrivent avec le nœud */
  #maxx-chargeur .orbite {
    position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
    border-top-color: transparent; border-bottom-color: transparent;
    opacity: 0;
    animation: orbite-arrive 2300ms ease both, holo-orbite 2.6s linear 1400ms infinite;
  }
  #maxx-chargeur .orbite.o2 {
    width: 118px; height: 118px; margin: -59px 0 0 -59px;
    border-color: color-mix(in srgb, var(--gold) 65%, transparent);
    border-left-color: transparent; border-right-color: transparent;
    animation: orbite-arrive 2300ms ease both, holo-orbite 1.7s linear 1400ms infinite reverse;
  }
  @keyframes orbite-arrive { 0%, 60% { opacity: 0; } 80%, 100% { opacity: 1; } }
  @keyframes holo-orbite { from { transform: rotateX(72deg) rotateZ(0); } to { transform: rotateX(72deg) rotateZ(360deg); } }
  #maxx-chargeur .sol {
    position: absolute; left: 50%; bottom: 46px; width: 130px; height: 28px; margin-left: -65px; border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 40%, transparent), transparent);
    opacity: 0; animation: orbite-arrive 2300ms ease both, holo-sol 2s ease-in-out 1400ms infinite;
  }
  #maxx-chargeur .ombre {
    position: absolute; left: 50%; bottom: 52px; width: 60px; height: 8px; margin-left: -30px; border-radius: 50%;
    background: color-mix(in srgb, var(--ink) 20%, transparent); filter: blur(4px);
    opacity: 0; animation: orbite-arrive 2300ms ease both, holo-ombre 2s ease-in-out 1400ms infinite;
  }
  @keyframes holo-sol { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(0.78); } }
  @keyframes holo-ombre { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(0.7); } }
  #maxx-chargeur .legende {
    position: absolute; left: 0; right: 0; bottom: 6px; margin: 0;
    display: flex; justify-content: center; gap: 14px;
    font-size: 10px; letter-spacing: 0.3em; color: var(--muted);
    opacity: 0; animation: orbite-arrive 2300ms ease both;
  }
  #maxx-chargeur .legende span:nth-child(2) { color: var(--ink); }
  #maxx-chargeur .legende span:nth-child(3) { letter-spacing: 0; font-size: 13px; line-height: 10px; }

  /* Entre deux pages : la même construction, deux fois plus vite. */
  #maxx-chargeur.rapide .g, #maxx-chargeur.rapide .noeud3d, #maxx-chargeur.rapide .orbite,
  #maxx-chargeur.rapide .sol, #maxx-chargeur.rapide .ombre, #maxx-chargeur.rapide .legende { animation-duration: 1300ms, 2000ms; animation-delay: 0ms, 800ms; }
  #maxx-chargeur.rapide .g { animation-duration: 1300ms; animation-delay: 0ms; }

  @media (prefers-reduced-motion: reduce) {
    #maxx-chargeur * { animation: none !important; opacity: 1 !important; }
    #maxx-chargeur .g { display: none; }
  }

  /* ---- le Suivi : la progression en tête ---- */
  .progression-tel { margin: 6px 0 22px; padding: 20px 18px 18px; display: grid; gap: 18px; border-radius: 22px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 20px 50px -34px color-mix(in srgb, var(--ink) 45%, transparent); transition: background 600ms ease, color 600ms ease; }
  .progression-tel.tenu { background: var(--ink); color: var(--bg); border-color: var(--ink); animation: tenu-pulse 2.4s ease-in-out 2; }
  .progression-tel.tenu .kicker, .progression-tel.tenu .jours li, .progression-tel.tenu .suite { color: color-mix(in srgb, var(--bg) 70%, transparent); }
  .progression-tel.tenu .phrase, .progression-tel.tenu .anneau-centre b, .progression-tel.tenu .jours .ici span, .progression-tel.tenu .serie-tel { color: var(--bg); }
  .progression-tel.tenu .anneau .fond { stroke: color-mix(in srgb, var(--bg) 20%, transparent); }
  .progression-tel.tenu .paliers li { border-color: color-mix(in srgb, var(--bg) 25%, transparent); color: color-mix(in srgb, var(--bg) 70%, transparent); }
  .progression-tel.tenu .paliers .atteint { background: var(--bg); color: var(--ink); border-color: var(--bg); }
  .progression-tel.tenu .paliers { border-color: color-mix(in srgb, var(--bg) 20%, transparent); }
  .progression-tel.tenu .vers { background: color-mix(in srgb, var(--bg) 20%, transparent); }
  @keyframes tenu-pulse { 0%, 100% { box-shadow: 0 20px 50px -34px color-mix(in srgb, var(--ink) 45%, transparent); } 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 25%, transparent); } }
  .progression-tel[hidden] { display: none; }
  .progression-tel .kicker { margin: 0 0 6px; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
  .progression-tel .semaine { display: grid; grid-template-columns: 108px 1fr; gap: 18px; align-items: center; }
  .progression-tel .anneau { position: relative; width: 108px; height: 108px; }
  .progression-tel .anneau svg { width: 100%; height: 100%; rotate: -90deg; }
  .progression-tel .anneau circle { fill: none; stroke-width: 7; }
  .progression-tel .anneau .fond { stroke: var(--line); }
  .progression-tel .anneau .trait { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; transition: stroke-dashoffset 1400ms cubic-bezier(0.2, 0.8, 0.2, 1); }
  .progression-tel.tenu .anneau .trait { stroke: var(--accent); }
  .progression-tel .anneau-centre { position: absolute; inset: 0; display: flex; align-items: baseline; justify-content: center; gap: 4px; padding-top: 36px; }
  .progression-tel .anneau-centre b { font-family: var(--serif); font-weight: 500; font-size: 34px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
  .progression-tel .anneau-centre span { font-family: var(--serif); font-size: 15px; color: var(--accent); }
  .progression-tel .phrase { margin: 0 0 12px; font-size: 15px; line-height: 1.4; color: var(--ink); }
  .progression-tel .jours { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
  .progression-tel .jours li { display: grid; justify-items: center; gap: 5px; font-size: 10px; color: var(--muted); }
  .progression-tel .jours i { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; position: relative; transition: background 400ms ease, scale 400ms cubic-bezier(0.2, 0.8, 0.2, 1.3); }
  .progression-tel .jours .plein i { background: var(--accent); border-color: var(--accent); scale: 1.08; }
  .progression-tel .jours .plein i::after { content: ""; position: absolute; left: 5px; top: 5px; width: 7px; height: 4px; border-left: 1.5px solid var(--bg); border-bottom: 1.5px solid var(--bg); rotate: -45deg; }
  .progression-tel .serie-tel { margin: -4px 0 0; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink); }
  .progression-tel .serie-tel[hidden] { display: none; }
  .progression-tel .serie-tel b { font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1; }
  .progression-tel .noeud-serie { width: 26px; height: 24px; background: var(--noeud) center / contain no-repeat; animation: holo-tourne 14s linear infinite; }
  .progression-tel.tenu .noeud-serie { filter: invert(1); }
  .progression-tel .vers { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; margin: -8px 0 0; }
  .progression-tel .vers i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--accent); transition: width 1200ms cubic-bezier(0.2, 0.8, 0.2, 1); }
  .progression-tel .jours .ici span { color: var(--ink); font-weight: 600; }
  .progression-tel .jours .ici i { border-color: var(--ink); }
  .progression-tel .puces { display: flex; gap: 8px; }
  .progression-tel .puces button { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; }
  .progression-tel .paliers { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; }
  .progression-tel .paliers li { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); border: 1px solid var(--line); transition: background 500ms ease, color 500ms ease; }
  .progression-tel .paliers .atteint { background: var(--ink); border-color: var(--ink); color: var(--bg); }
  .progression-tel .paliers .prochain { border-color: var(--accent); color: var(--accent); border-style: dashed; }
  .progression-tel .suite { margin: -6px 0 0; font-size: 12.5px; color: var(--muted); }

  /* ---- Offres : la conversation ---- */
  html.dire-actif #view-search .offers-page > :not(#dire) { display: none !important; }
  html.dire-actif #view-search .offers-page { padding-top: 6px; padding-bottom: 140px; min-height: calc(100dvh - 70px); }
  #dire .bulle { scroll-margin-top: 126px; scroll-margin-bottom: 160px; }
  html.dire-actif #dire { min-height: 0; }
  html.dire-actif #maxx-chat { display: none; }
  #dire .dire-fil { display: grid; gap: 14px; }
  #dire .bulle { opacity: 0; translate: 0 12px; transition: opacity 420ms ease, translate 520ms cubic-bezier(0.2, 0.8, 0.2, 1); }
  #dire .bulle.in { opacity: 1; translate: 0 0; }
  #dire .bulle.vous { justify-self: end; max-width: 80%; padding: 11px 16px; border-radius: 20px 20px 6px 20px; background: var(--ink); color: var(--bg); font-size: 15.5px; line-height: 1.4; }
  #dire .bulle.maxx { justify-self: start; width: 100%; }
  #dire .bulle.maxx p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
  #dire .accueil { padding: 40px 0 10px; display: grid; justify-items: start; gap: 18px; }
  #dire .noeud-dire { width: 64px; height: 60px; background: var(--noeud) center / contain no-repeat; animation: splash-nait 1200ms cubic-bezier(0.2, 0.8, 0.2, 1) both, holo-tourne 18s 1200ms linear infinite; }
  #dire .noeud-dire.petit { width: 26px; height: 24px; animation: holo-tourne 1.6s cubic-bezier(0.55, 0.05, 0.25, 1) infinite; }
  #dire .accueil h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 32px; line-height: 1.12; letter-spacing: -0.01em; color: var(--ink); text-transform: none; }
  #dire .exemples-dire { display: flex; flex-wrap: wrap; gap: 8px; }
  #dire .exemple, #dire .affine, #dire .etiquette { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0; }
  #dire .exemple { animation: puce-arrive 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  #dire .exemple:nth-child(2) { animation-delay: 80ms; } #dire .exemple:nth-child(3) { animation-delay: 160ms; }
  #dire .pense { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; min-height: 30px; }
  #dire .preuve-dire { margin: -8px 0 0 !important; font-size: 12.5px !important; color: var(--muted) !important; letter-spacing: 0.01em; animation: splash-monte 700ms 500ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  #dire .compris-flash { display: inline-flex; flex-wrap: wrap; gap: 6px; }
  #dire .compris-flash b { padding: 5px 11px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 12.5px; font-weight: 500; animation: puce-arrive 380ms cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 140ms); }
  .dire-barre .compris-direct { grid-column: 1 / -1; grid-row: 1; display: none; align-items: center; gap: 6px; padding: 8px 12px 2px; font-size: 12px; color: var(--muted); }
  .dire-barre .compris-direct span { margin-right: 2px; }
  .dire-barre .compris-direct b { padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, var(--paper)); color: var(--accent); font-weight: 500; animation: puce-arrive 300ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .dire-barre.a-compris { border-radius: 26px; }
  .dire-barre.a-compris .compris-direct { display: flex; flex-wrap: wrap; }
  #dire .resultat { padding: 20px 18px 16px; border-radius: 22px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 20px 50px -34px color-mix(in srgb, var(--ink) 45%, transparent); }
  #dire .compte { margin: 0; display: flex; align-items: baseline; gap: 8px; }
  #dire .compte b { font-family: var(--serif); font-weight: 500; font-size: 54px; line-height: 1; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; animation: chiffre-nait 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  #dire .compte span { font-family: var(--serif); font-size: 22px; color: var(--accent); }
  #dire .sous { margin: 4px 0 12px !important; font-size: 13.5px !important; color: var(--muted) !important; }
  #dire .etiquettes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
  #dire .etiquette { padding: 6px 10px 6px 12px; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; background: var(--ink); color: var(--bg); border-color: var(--ink); }
  #dire .etiquette i { font-style: normal; opacity: 0.6; }
  #dire .offres-dire { list-style: none; margin: 10px 0 0; padding: 0; display: grid; }
  #dire .offres-dire li { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); animation: puce-arrive 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 60ms + 200ms); }
  #dire .offres-dire li[hidden] { display: none; }
  #dire .lettre { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 16%, var(--paper)); color: var(--accent); font-family: var(--serif); font-size: 19px; }
  #dire .offres-dire div { min-width: 0; display: grid; gap: 1px; }
  #dire .offres-dire b { font-size: 14px; font-weight: 600; color: var(--ink); }
  #dire .offres-dire span { font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #dire .offres-dire small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #dire .postuler { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font-size: 12.5px; font-weight: 600; text-transform: none; letter-spacing: 0; transition: background 200ms ease, color 200ms ease; }
  #dire .postuler:disabled { background: var(--ink); color: var(--bg); opacity: 1; }
  #dire .plus { width: 100%; margin-top: 4px; padding: 10px; background: none; border: 0; border-top: 1px solid var(--line); color: var(--accent); font-size: 13.5px; font-weight: 500; text-transform: none; letter-spacing: 0; }
  #dire .affiner { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
  #dire .affine { font-size: 13px; padding: 7px 12px; }
  #dire .affine em { font-style: normal; color: var(--muted); font-weight: 400; margin-left: 2px; }

  .dire-barre {
    position: fixed; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60;
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; padding: 6px 6px 6px 8px;
    border-radius: 999px; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid var(--line-strong); box-shadow: 0 16px 40px -20px color-mix(in srgb, var(--ink) 55%, transparent);
    transition: box-shadow 300ms ease, border-color 300ms ease;
  }
  .dire-barre[hidden] { display: none; }
  .dire-barre:focus-within { border-color: var(--accent); }
  .dire-barre input { min-width: 0; border: 0; background: transparent; padding: 10px 6px; font-size: 16px; color: var(--ink); }
  .dire-barre input:focus { outline: 0; }
  .dire-barre input::placeholder { color: var(--muted); }
  .dire-barre .micro, .dire-barre .envoyer { width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; }
  .dire-barre .micro { background: transparent; color: var(--ink); }
  .dire-barre .micro[hidden] { display: none; }
  .dire-barre .micro svg, .dire-barre .envoyer svg { width: 20px; height: 20px; }
  .dire-barre .envoyer { background: var(--ink); color: var(--bg); }
  .dire-barre.ecoute { border-color: var(--accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent), 0 16px 40px -20px color-mix(in srgb, var(--ink) 55%, transparent); animation: ecoute 1.4s ease-in-out infinite; }
  .dire-barre.ecoute .micro { background: var(--accent); color: var(--bg); }
  @keyframes ecoute { 0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); } 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 8%, transparent); } }

  /* ---- Communauté ---- */
  .commu-page { padding: 18px max(18px, env(safe-area-inset-left)) 140px max(18px, env(safe-area-inset-right)); display: grid; gap: 18px; }
  .commu-page .kicker { margin: 0; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
  .commu-page h1 { margin: -12px 0 0; font-family: var(--serif); font-weight: 500; font-size: 40px; line-height: 1.05; letter-spacing: -0.01em; color: var(--ink); text-transform: none; }
  .commu-grand { padding: 22px 20px; border-radius: 22px; background: var(--ink); color: var(--bg); position: relative; overflow: hidden; }
  .commu-grand::after { content: ""; position: absolute; inset: -40%; background: radial-gradient(40% 40% at 80% 20%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%); animation: aurore 14s ease-in-out infinite alternate; pointer-events: none; }
  .commu-grand b { position: relative; z-index: 1; display: block; font-family: var(--serif); font-weight: 500; font-size: 64px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .commu-grand p { position: relative; z-index: 1; margin: 8px 0 0; font-size: 15px; line-height: 1.45; color: color-mix(in srgb, var(--bg) 80%, transparent); }
  .commu-tuiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .commu-tuiles li { padding: 16px 16px 14px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); display: grid; gap: 4px; }
  .commu-tuiles b { font-family: var(--serif); font-weight: 500; font-size: 32px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
  .commu-tuiles span { font-size: 12px; line-height: 1.35; color: var(--muted); }
  .commu-employeurs { list-style: none; margin: -8px 0 0; padding: 0; display: grid; gap: 10px; }
  .commu-employeurs li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; font-size: 14px; color: var(--ink); animation: puce-arrive 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 70ms + 200ms); }
  .commu-employeurs i { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: var(--line); position: relative; overflow: hidden; }
  .commu-employeurs i::after { content: ""; position: absolute; inset: 0; width: var(--part, 0%); background: var(--accent); border-radius: 4px; transition: width 1200ms cubic-bezier(0.2, 0.8, 0.2, 1); }
  .commu-employeurs b { font-variant-numeric: tabular-nums; font-weight: 600; }
  .commu-invite { padding: 22px 20px; border-radius: 22px; background: var(--paper); border: 1px solid var(--line); display: grid; gap: 8px; justify-items: start; }
  .commu-invite h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.15; color: var(--ink); text-transform: none; }
  .commu-invite p { margin: 0 0 6px; font-size: 14px; color: var(--muted); }
  .commu-suivi { justify-self: start; font-size: 14px; color: var(--accent); text-decoration: none; font-weight: 500; }

  /* le Suivi sans compte : l'invitation */
  .progression-tel.invite { grid-template-columns: 96px 1fr; display: grid; gap: 16px; align-items: center; }
  .progression-tel.invite .anneau { width: 96px; height: 96px; }
  .progression-tel.invite .anneau-centre { padding-top: 32px; }
  .progression-tel.invite .phrase { margin: 0 0 12px; }
  .progression-tel .primary.petit { padding: 10px 16px; font-size: 13.5px; min-height: 0; }

  /* ---- l'accueil parle : la barre dès la première seconde ---- */
  .dire-accueil {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px; margin: 18px 0 10px;
    padding: 6px 6px 6px 8px; border-radius: 999px; background: color-mix(in srgb, var(--paper) 92%, transparent);
    border: 1px solid var(--line-strong); box-shadow: 0 18px 44px -24px color-mix(in srgb, var(--ink) 55%, transparent);
    animation: splash-monte 900ms 400ms cubic-bezier(0.2, 0.8, 0.2, 1) both; position: relative;
  }
  .dire-accueil::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--tour, 0deg), transparent 0 60%, var(--accent) 80%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: tour 6s linear infinite; opacity: 0.8; pointer-events: none; }
  @property --tour { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
  @keyframes tour { to { --tour: 360deg; } }
  .dire-accueil button { border: 0; background: transparent; text-transform: none; letter-spacing: 0; font-weight: 500; min-height: 0; }
  .dire-accueil .texte { text-align: left; padding: 10px 4px; font-size: 15.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dire-accueil .micro, .dire-accueil .envoyer { width: 40px; height: 40px; border-radius: 50%; padding: 0; display: grid; place-items: center; }
  .dire-accueil .micro { color: var(--ink); }
  .dire-accueil .micro[hidden] { display: none; }
  .dire-accueil .envoyer { background: var(--ink); color: var(--bg); }
  .dire-accueil svg { width: 20px; height: 20px; }
  .hero-actions-tel .hero-essai-tel { background: transparent !important; color: var(--ink) !important; border: 1px solid var(--line-strong) !important; box-shadow: none !important; }

  /* ---- on écoute : le voile et l'orbe qui respire avec la voix ---- */
  .ecoute-voile { position: fixed; inset: 0; z-index: 5000; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 40px 28px; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3); animation: voile-in 360ms ease both; --n: 0; }
  .ecoute-voile[hidden] { display: none; }
  @keyframes voile-in { from { opacity: 0; } to { opacity: 1; } }
  .ecoute-voile .orbe { position: relative; width: 150px; height: 150px; display: grid; place-items: center; margin-bottom: 18px; }
  .ecoute-voile .orbe::after { content: ""; width: 74px; height: 70px; background: var(--noeud) center / contain no-repeat; animation: holo-tourne 10s linear infinite; transform: scale(calc(1 + var(--n) * 0.25)); transition: transform 90ms ease-out; position: relative; z-index: 1; }
  .ecoute-voile .orbe i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%); transform: scale(calc(0.6 + var(--n) * 1.1)); transition: transform 120ms ease-out; opacity: 0.55; }
  .ecoute-voile .orbe i:nth-child(2) { transform: scale(calc(0.8 + var(--n) * 1.5)); opacity: 0.3; transition-duration: 200ms; }
  .ecoute-voile .orbe i:nth-child(3) { transform: scale(calc(1 + var(--n) * 1.9)); opacity: 0.16; transition-duration: 320ms; }
  .ecoute-voile .etat { margin: 0; font-family: var(--serif); font-size: 26px; color: var(--ink); text-align: center; }
  .ecoute-voile .transcrit { margin: 0; min-height: 48px; font-size: 18px; line-height: 1.4; color: var(--ink); text-align: center; max-width: 320px; }
  .ecoute-voile .stop { margin: 18px 0 0; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }

  /* ---- glisser pour postuler ---- */
  #dire .offres-dire li { position: relative; touch-action: pan-y; }
  #dire .offres-dire li > * { transform: translateX(var(--dx, 0px)); position: relative; z-index: 1; }
  #dire .offres-dire li.retour > * { transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1); }
  #dire .offres-dire li::before { content: "Postuler →"; position: absolute; left: 0; top: 8px; bottom: 8px; width: calc(var(--dx, 0px) + 2px); overflow: hidden; display: grid; align-items: center; padding-left: 4px; color: var(--accent); font-size: 13px; font-weight: 600; white-space: nowrap; opacity: calc(var(--dx, 0px) / 60px); border-radius: 12px; }
  #dire .offres-dire li.pret::before { color: var(--bg); background: var(--accent); padding-left: 12px; }
  #dire .offres-dire li.glisse { z-index: 1; }
  #dire .offres-dire li.lance { opacity: 0.55; }
  #dire .offres-dire li.lance .lettre { background: var(--ink); color: var(--bg); }
  #dire .astuce { display: flex; align-items: center; gap: 8px; margin: 10px 0 -4px !important; font-size: 12.5px !important; color: var(--muted) !important; }
  #dire .astuce i { font-style: normal; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, var(--paper)); color: var(--accent); animation: astuce-va 1.6s ease-in-out infinite; }
  @keyframes astuce-va { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
  #dire .tout { width: 100%; margin-top: 12px; padding: 14px 18px; border: 0; border-radius: 16px; background: var(--ink); color: var(--bg); display: grid; justify-items: start; gap: 2px; text-transform: none; letter-spacing: 0; text-align: left; }
  #dire .tout span { font-size: 15px; font-weight: 600; }
  #dire .tout small { font-size: 12px; opacity: 0.7; }
  #dire .tout:disabled { opacity: 0.7; }
  #dire .sous.tape::after { content: "▍"; color: var(--accent); animation: curseur 800ms steps(1) infinite; }
  @keyframes curseur { 50% { opacity: 0; } }
  #dire .kicker-dire { margin: 4px 0 -8px !important; font-size: 10px !important; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted) !important; }
  #dire .exemple.reprise { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  #dire .lien-dire { display: inline-block; margin-top: 8px; color: var(--accent); font-weight: 500; text-decoration: none; font-size: 14px; }
  #dire .cv-devine { text-transform: none; letter-spacing: 0; display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; padding: 10px 14px 10px 12px; border-radius: 14px; border: 1px dashed var(--line-strong); color: var(--muted); font-size: 13.5px; animation: puce-arrive 520ms 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  #dire .cv-devine svg { width: 20px; height: 20px; color: var(--accent); flex: none; }
  #dire .cv-devine b { color: var(--ink); font-weight: 600; }
  #dire .bulle.lu { padding: 16px 18px; border-radius: 20px 20px 20px 6px; background: var(--paper); border: 1px solid var(--line); width: auto; max-width: 92%; }
  #dire .bulle.lu .cherche-ceci { margin-top: 6px !important; color: var(--muted) !important; }
  #dire .bulle.lu .cherche-ceci b { color: var(--ink); }
  .dire-barre .completer-dire { padding: 3px 9px; border-radius: 999px; border: 1px dashed var(--line-strong); background: transparent; color: var(--ink); font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; min-height: 0; }

  /* ---- le logo parle seul : le nœud, pas le mot ---- */
  .home-top .brand span { display: none; }
  .home-top .brand .brand-noeud { width: 30px; height: 28px; }

  /* ---- mode réflexion ---- */
  #dire .reflexion { width: 100%; }
  #dire .reflexion .tete { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 12.5px; letter-spacing: 0.04em; text-transform: none; min-height: 0; }
  #dire .reflexion .tete span { font-weight: 600; color: var(--ink); }
  #dire .reflexion .tete em { font-style: normal; opacity: 0; transition: opacity 400ms ease; }
  #dire .reflexion.replie .tete em { opacity: 1; }
  #dire .reflexion.replie .tete::after { content: "▸"; font-size: 11px; opacity: 0.6; margin-left: -4px; }
  #dire .reflexion .etapes { list-style: none; margin: 8px 0 0 12px; padding: 0 0 0 14px; border-left: 1px solid var(--line-strong); display: grid; gap: 6px; max-height: 400px; overflow: hidden; transition: max-height 420ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 300ms ease, margin 300ms ease; }
  #dire .reflexion.replie .etapes { max-height: 0; opacity: 0; margin-top: 0; }
  #dire .reflexion .etapes li { display: block !important; grid-template-columns: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; position: relative; font-size: 13.5px; line-height: 1.4; color: var(--muted); animation: puce-arrive 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  #dire .reflexion .etapes li b { display: inline !important; color: var(--ink); font-weight: 600; font-size: inherit; font-family: inherit; }
  #dire .reflexion .etapes li::before { content: ""; position: absolute; left: -18px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
  #dire .reflexion .noeud-dire.petit { width: 22px; height: 20px; }
  #dire .reflexion.replie .noeud-dire.petit { animation: none; }
  #dire .offres-dire mark { background: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }
  #dire .cv-devine { font-size: 13px; padding: 9px 12px; }
  #dire .compte b { font-size: 50px; }

  /* ---- logos d'employeurs : l'image quand on l'a, la lettre sinon ---- */
  #dire .lettre { position: relative; overflow: hidden; background: var(--paper); border: 1px solid var(--line); }
  #dire .lettre .logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6px; opacity: 0; transition: opacity 400ms ease; background: #fff; }
  #dire .lettre em { font-style: normal; position: relative; z-index: 1; color: var(--accent); }
  #dire .lettre.a-logo .logo { opacity: 1; }
  #dire .lettre.a-logo em { opacity: 0; }
  #dire .pile { display: flex; align-items: center; margin: 12px 0 10px; }
  #dire .pile .lettre { width: 34px; height: 34px; border-radius: 50%; margin-left: -8px; font-size: 15px; box-shadow: 0 0 0 2px var(--paper); animation: puce-arrive 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 70ms + 300ms); }
  #dire .pile .lettre:first-child { margin-left: 0; }
  #dire .pile .lettre .logo { padding: 5px; }
  #dire .pile .reste { margin-left: 8px; font-size: 12.5px; font-style: normal; color: var(--muted); font-weight: 500; }
  #dire .etiquettes .affine { background: transparent; border-style: dashed; }
  .commu-employeurs .logo { width: 22px; height: 22px; border-radius: 6px; object-fit: contain; background: #fff; vertical-align: middle; margin-right: 8px; border: 1px solid var(--line); }
  /* une aurore derrière la conversation */
  html.dire-actif #view-search .offers-page::before { content: ""; position: fixed; inset: -30% -20%; z-index: -1; pointer-events: none; background: radial-gradient(38% 34% at 20% 15%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), radial-gradient(30% 30% at 85% 70%, color-mix(in srgb, var(--ink) 9%, transparent), transparent 70%); animation: aurore 22s ease-in-out infinite alternate; }
  html.dire-actif #view-search .offers-page { position: relative; }

  /* ---- Aujourd'hui : la carte du jour, encre et aurore — ce qui a bougé, où en est la semaine ---- */
  #dire .jour-ici { display: contents; }
  #dire .accueil .bulle.jour { justify-self: stretch; margin: 2px 0 4px; }
  #dire .bulle.jour { position: relative; overflow: hidden; padding: 16px 18px 14px; border-radius: 22px; background: var(--ink); color: var(--bg); border: 1px solid var(--ink); box-shadow: 0 24px 60px -30px color-mix(in srgb, var(--ink) 80%, transparent); }
  #dire .bulle.jour::before { content: ""; position: absolute; inset: -40% -20% auto -20%; height: 130%; pointer-events: none; background: radial-gradient(40% 50% at 80% 20%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%), radial-gradient(30% 40% at 10% 90%, rgba(255, 255, 255, 0.10), transparent 70%); animation: aurore 16s ease-in-out infinite alternate; }
  #dire .bulle.jour > * { position: relative; }
  #dire .jour-tete { display: flex; align-items: center; gap: 10px; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: color-mix(in srgb, var(--bg) 70%, transparent); }
  #dire .jour-tete em { margin-left: auto; font-style: normal; letter-spacing: 0.02em; text-transform: none; font-size: 12px; }
  #dire .jour-tete .noeud-dire.petit { width: 22px; height: 20px; filter: invert(1) brightness(1.4); animation: holo-tourne 12s linear infinite; }
  #dire .jour-corps { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
  #dire .jour-corps:empty { display: none; }
  #dire .jour-texte { flex: 1; min-width: 0; }
  #dire .jour-texte:empty { display: none; }
  #dire .bulle.jour p { color: var(--bg); }
  #dire .bulle.jour .jour-phrase { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; }
  #dire .bulle.jour .jour-phrase b { font-weight: 500; color: var(--accent); }
  #dire .bulle.jour .jour-sous { margin-top: 6px; font-size: 12.5px; color: color-mix(in srgb, var(--bg) 65%, transparent); }
  #dire .jour-anneau { flex: none; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; align-content: center; background: conic-gradient(var(--accent) var(--part, 0%), rgba(255, 255, 255, 0.14) 0); position: relative; animation: jour-tourne 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  #dire .jour-anneau::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--ink); }
  #dire .jour-anneau b, #dire .jour-anneau span { position: relative; line-height: 1; }
  #dire .jour-anneau b { font-family: var(--serif); font-weight: 500; font-size: 22px; }
  #dire .jour-anneau span { font-size: 10px; color: color-mix(in srgb, var(--bg) 60%, transparent); margin-top: 2px; }
  #dire .jour-anneau.tenu { background: var(--accent); }
  @keyframes jour-tourne { from { transform: rotate(-90deg) scale(0.8); opacity: 0; } to { transform: none; opacity: 1; } }
  #dire .veille { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
  #dire .veille:empty { display: none; }
  #dire .veille li { animation: puce-arrive 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  #dire .reprise-veille { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.07); color: var(--bg); text-align: left; text-transform: none; letter-spacing: 0; font-size: 14px; min-height: 0; }
  #dire .reprise-veille b { font-family: var(--serif); font-weight: 500; font-size: 20px; color: var(--accent); line-height: 1; }
  #dire .reprise-veille span { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #dire .reprise-veille em { grid-column: 2; font-style: normal; font-size: 11.5px; color: color-mix(in srgb, var(--bg) 60%, transparent); }
  #dire .reprise-veille i { grid-column: 3; grid-row: 1 / span 2; font-style: normal; color: color-mix(in srgb, var(--bg) 70%, transparent); }
  #dire .exemple.reprise { display: inline-flex; align-items: center; gap: 8px; }
  #dire .exemple.reprise .neuf { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--accent); color: var(--ink); animation: puce-arrive 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  /* une offre entrée cette semaine */
  #dire .offres-dire li > div b .neuf { display: inline-block; margin-left: 7px; padding: 1px 6px; border-radius: 999px; font-style: normal; font-weight: 600; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 2px; background: color-mix(in srgb, var(--accent) 22%, var(--paper)); color: var(--ink); }

  /* ---- Suivi : le niveau a un nom, et MAXX travaille en direct ---- */
  .progression-tel .niveau-tel { margin: 0; display: flex; align-items: baseline; gap: 12px; }
  .progression-tel .niveau-tel[hidden] { display: none; }
  .progression-tel .niveau-tel .kicker { margin: 0; }
  .progression-tel .niveau-tel b { font-family: var(--serif); font-weight: 500; font-size: 22px; letter-spacing: -0.01em; color: var(--ink); }
  .progression-tel .niveau-tel + .paliers { border-top: 0; padding-top: 4px; }
  .direct-tel { margin: -8px 0 22px; padding: 16px 18px 12px; border-radius: 22px; background: var(--paper); border: 1px solid var(--line); }
  .direct-tel .kicker { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
  .direct-tel .kicker em { margin-left: auto; font-style: normal; letter-spacing: 0.02em; text-transform: none; font-size: 12px; }
  .direct-tel .pouls { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
  .direct-tel.actif .pouls { background: var(--accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); animation: pouls 1.6s ease-out infinite; }
  @keyframes pouls { 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
  .direct-tel ol { list-style: none; margin: 0; padding: 0; }
  .direct-tel li { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; column-gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); animation: puce-arrive 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 60ms); }
  .direct-tel li:first-child { border-top: 0; }
  .direct-tel .lettre { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 16%, var(--paper)); color: var(--accent); font-family: var(--serif); font-size: 19px; position: relative; overflow: hidden; }
  .direct-tel .lettre .logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6px; background: #fff; opacity: 0; transition: opacity 300ms ease; }
  .direct-tel .lettre.a-logo .logo { opacity: 1; }
  .direct-tel .lettre.sans-logo .logo { display: none; }
  .direct-tel li > div { min-width: 0; }
  .direct-tel li > div:not(.etat) b { display: block; font-size: 14.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .direct-tel li > div:not(.etat) span { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .direct-tel li > .etat { display: grid; justify-items: end; gap: 5px; }
  .direct-tel li > .etat em { font-style: normal; font-size: 11.5px; color: var(--muted); text-align: right; max-width: 104px; }
  .direct-tel li.started > .etat em { color: var(--accent); font-weight: 600; }
  .direct-tel li.started .lettre { animation: lettre-souffle 1.6s ease-in-out infinite; }
  @keyframes lettre-souffle { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); } }
  .direct-tel li.failed > .etat em { color: var(--bad); }
  .direct-tel li[data-id] { cursor: pointer; }

  /* ---- L'application : la vitrine est une page à part (sans dock), l'accueil est le tableau de bord ---- */
  html.vitrine .dock { display: none; }
  html.vitrine .hero-actions-tel .ouvrir-app { margin-top: 6px; color: var(--ink); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; }
  html.fab #maxx-chat { display: none; }
  .fab-postuler { position: fixed; right: 18px; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 92px); z-index: 60; width: 62px; height: 62px; border-radius: 50%; border: 0; background: var(--ink); color: var(--bg); display: grid; place-items: center; align-content: center; gap: 0; padding: 0; box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--ink) 80%, transparent), 0 0 0 1px color-mix(in srgb, var(--bg) 40%, transparent) inset; text-transform: none; letter-spacing: 0; animation: puce-arrive 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .fab-postuler[hidden] { display: none; }
  .fab-postuler span { font-family: var(--serif); font-size: 30px; line-height: 0.9; font-weight: 400; }
  .fab-postuler small { font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; margin-top: 1px; }
  .fab-postuler::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); animation: fab-halo 3s ease-out infinite; }
  @keyframes fab-halo { 0% { transform: scale(0.9); opacity: 0.9; } 100% { transform: scale(1.35); opacity: 0; } }
  #view-accueil .home-top .brand span { display: none; }
  .accueil-page { padding: 8px 20px 150px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; overflow: hidden; }
  .accueil-page > * { min-width: 0; }
  .accueil-page .jour-k { margin: 6px 0 0; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
  .accueil-page .jour-k::first-letter { text-transform: uppercase; }
  .accueil-page .kicker { margin: 0; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
  .tracker { padding: 22px 18px 18px; border-radius: 24px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 24px 60px -36px color-mix(in srgb, var(--ink) 55%, transparent); display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .tracker > * { min-width: 0; }
  .tracker-haut { grid-template-columns: 132px minmax(0, 1fr); }
  .tracker:empty { min-height: 260px; }
  .tracker-haut { display: grid; grid-template-columns: 132px 1fr; gap: 18px; align-items: center; }
  .grand-anneau { position: relative; width: 132px; height: 132px; }
  .grand-anneau svg { width: 100%; height: 100%; rotate: -90deg; }
  .grand-anneau circle { fill: none; stroke-width: 8; }
  .grand-anneau .fond { stroke: var(--line); }
  .grand-anneau .trait { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; transition: stroke-dashoffset 1400ms cubic-bezier(0.2, 0.8, 0.2, 1); }
  .grand-anneau .centre { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 2px; }
  .grand-anneau .centre b { font-family: var(--serif); font-weight: 500; font-size: 44px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
  .grand-anneau .centre span { font-family: var(--serif); font-size: 14px; color: var(--accent); }
  .grand-anneau.tenu .trait { stroke: var(--ink); }
  .tracker-texte .phrase { margin: 4px 0 0; font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); }
  .tracker-texte .phrase b { font-weight: 500; color: var(--accent); }
  .tracker-texte .serie { margin: 10px 0 0; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); }
  .tracker-texte .serie b { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1; }
  .tracker .noeud-serie { width: 22px; height: 20px; background: var(--noeud) center / contain no-repeat; animation: holo-tourne 14s linear infinite; }
  .tracker .jours { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; }
  .tracker .jours li { display: grid; justify-items: center; gap: 6px; font-size: 10px; color: var(--muted); }
  .tracker .jours i { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-strong); position: relative; transition: background 400ms ease, scale 400ms cubic-bezier(0.2, 0.8, 0.2, 1.3); }
  .tracker .jours .plein i { background: var(--accent); border-color: var(--accent); scale: 1.06; }
  .tracker .jours .plein i::after { content: ""; position: absolute; left: 8px; top: 7px; width: 8px; height: 5px; border-left: 1.6px solid var(--bg); border-bottom: 1.6px solid var(--bg); rotate: -45deg; }
  .tracker .jours .ici span { color: var(--ink); font-weight: 600; }
  .tracker .jours .ici i { border-color: var(--ink); }
  .tracker .macros { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); }
  .tracker .macros li { display: grid; gap: 2px; text-align: center; }
  .tracker .macros li + li { border-left: 1px solid var(--line); }
  .tracker .macros b { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.1; color: var(--ink); }
  .tracker .macros span { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
  .tracker .rythme-acc { display: flex; gap: 8px; }
  .tracker .rythme-acc button { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0; }
  .tracker .ouvrir-compte { width: 100%; }
  .tracker .sous-compte { margin: -8px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }
  .bloc-jour.direct-tel { margin: 0; padding: 16px 18px 12px; border-radius: 22px; background: var(--paper); border: 1px solid var(--line); }
  .bloc-jour[hidden] { display: none; }
  .bloc-jour .kicker { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
  .bloc-jour .kicker em { margin-left: auto; font-style: normal; letter-spacing: 0.02em; text-transform: none; font-size: 12px; }
  .bloc-jour .pouls { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
  .bloc-jour.actif .pouls { background: var(--accent); animation: pouls 1.6s ease-out infinite; }
  .bloc-jour .vide { margin: 4px 0 12px; font-family: var(--serif); font-size: 19px; color: var(--ink); }
  .bloc-jour .primary.petit { display: inline-block; margin-bottom: 4px; }
  .pour-vous-acc { display: grid; gap: 8px; }
  .pour-vous-acc[hidden] { display: none; }
  .pour-vous-acc .carte-offres { display: grid; grid-template-columns: 1fr auto auto; align-items: center; column-gap: 10px; padding: 14px 16px; border-radius: 18px; background: var(--ink); color: var(--bg); border: 0; text-decoration: none; text-align: left; text-transform: none; letter-spacing: 0; min-height: 0; position: relative; overflow: hidden; }
  .pour-vous-acc .carte-offres::before { content: ""; position: absolute; inset: -60% -20% auto -20%; height: 160%; pointer-events: none; background: radial-gradient(40% 50% at 85% 30%, color-mix(in srgb, var(--accent) 50%, transparent), transparent 70%); }
  .pour-vous-acc .carte-offres > * { position: relative; }
  .pour-vous-acc .carte-offres b { font-family: var(--serif); font-weight: 500; font-size: 19px; line-height: 1.15; grid-column: 1; }
  .pour-vous-acc .carte-offres span { grid-column: 1; grid-row: 2; font-size: 12.5px; color: color-mix(in srgb, var(--bg) 65%, transparent); }
  .pour-vous-acc .carte-offres .neuf { grid-column: 2; grid-row: 1 / span 2; font-style: normal; font-family: var(--serif); font-size: 22px; color: var(--accent); }
  .pour-vous-acc .carte-offres i { grid-column: 3; grid-row: 1 / span 2; font-style: normal; color: color-mix(in srgb, var(--bg) 70%, transparent); }
  /* Offres : la carte « pour vous » et la réflexion déjà repliée */
  #dire .pour-vous-k { margin: 0 0 4px !important; font-size: 10px !important; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted) !important; }
  #dire .tout { margin: 14px 0 6px; }
  #dire .reflexion.calme { opacity: 0.75; }

  /* ================= parcours : header retour, numéro de question ================= */

  /* ================= parcours : le compte, adresse + mot de passe ================= */

  /* ================= parcours : la formule ================= */

  /* ================= landing : la barre « dites-moi » disparaît, un seul bouton ================= */
  .hero-screen .dire-accueil { display: none !important; }
  .hero-actions-tel .hero-essai-tel { width: 100%; }

  /* ================= landing : le fil en direct ================= */
  .direct-landing { padding-top: 34px; padding-bottom: 34px; }
  .direct-landing .eyebrow { display: flex; align-items: center; gap: 8px; }
  .direct-landing .pouls { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); animation: pouls-landing 1.8s ease-out infinite; }
  @keyframes pouls-landing { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
  .flux-offres { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; max-height: 268px; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent); mask-image: linear-gradient(to bottom, #000 78%, transparent); }
  .flux-offres li { display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); animation: flux-arrive 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  @keyframes flux-arrive { from { opacity: 0; translate: 0 -10px; } to { opacity: 1; translate: 0 0; } }
  .flux-offres .lettre { position: relative; width: 38px; height: 38px; border-radius: 11px; background: var(--bg); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
  .flux-offres .lettre em { font-style: normal; font-weight: 700; font-size: 14px; color: var(--ink); }
  .flux-offres .lettre img { position: absolute; inset: 7px; width: 24px; height: 24px; object-fit: contain; opacity: 0; }
  .flux-offres .lettre.a-logo img { opacity: 1; }
  .flux-offres .lettre.a-logo em { opacity: 0; }
  .flux-offres span { display: grid; min-width: 0; }
  .flux-offres span b { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .flux-offres span small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .flux-offres time { font-size: 11px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .flux-mention { margin: 12px 0 0; font-size: 12px; color: var(--muted); }
  .flux-mention b { color: var(--ink); font-weight: 600; }

  /* ================= landing : portails, comparaison, retours ================= */
  .portails-liste { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .portails-liste li { padding: 9px 14px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; color: var(--ink); }
  .portails-note { margin: 16px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 34ch; }
  .compare-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
  .compare-col { padding: 16px 14px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); }
  .compare-col.maxx { background: var(--ink); color: var(--bg); border-color: var(--ink); color-scheme: dark; }
  .compare-col b { display: block; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 12px; opacity: 0.7; }
  .compare-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
  .compare-col li { position: relative; padding-left: 16px; font-size: 13px; line-height: 1.4; }
  .compare-col li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.35; }
  .compare-col.maxx li::before { background: var(--accent); opacity: 1; }
  .retours[hidden] { display: none; }
  .retours-liste { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
  .retours-liste li { padding: 16px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); font-size: 14.5px; line-height: 1.5; color: var(--ink); }
  .retours-liste li small { display: block; margin-top: 8px; font-size: 12px; color: var(--muted); }
  .moment-texte br { display: inline; }

  /* ================= l'application : Accueil, façon relevé ================= */
  html.app-accueil body { background: color-mix(in srgb, var(--paper) 55%, var(--bg)); }
  .accueil-page { padding: 6px 18px 140px; gap: 14px; }
  .acc-tete { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px 0; }
  .acc-tete .salut { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.1; color: var(--ink); letter-spacing: -0.01em; }
  .accueil-page .acc-tete .jour-k { margin: 4px 0 0; font-size: 11px; letter-spacing: 0.14em; }
  .acc-noeud { width: 40px; height: 40px; border-radius: 50%; background: var(--paper) var(--noeud) center / 22px no-repeat; border: 1px solid var(--line); box-shadow: 0 8px 22px -14px color-mix(in srgb, var(--ink) 50%, transparent); }
  .carte-solde { position: relative; overflow: hidden; padding: 20px 20px 18px; border-radius: 28px; border: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--paper) 92%, #fff), var(--paper)); box-shadow: 0 30px 70px -44px color-mix(in srgb, var(--ink) 55%, transparent), 0 1px 0 #fff inset; gap: 12px; }
  .carte-solde::before { content: ""; position: absolute; right: -60px; top: -80px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 16%, transparent), transparent); pointer-events: none; }
  .carte-solde .kicker { color: var(--muted); }
  .carte-solde .solde { margin: 2px 0 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .carte-solde .solde b { font-family: var(--serif); font-weight: 400; font-size: 64px; line-height: 0.95; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
  .carte-solde .solde span { font-size: 14px; color: var(--muted); }
  .carte-solde .phrase { margin: 0; font-size: 15px; line-height: 1.4; color: var(--ink); }
  .carte-solde .phrase b { color: var(--accent); font-weight: 600; }
  .barres { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; height: 96px; }
  .barres li { display: grid; grid-template-rows: 1fr auto; justify-items: center; gap: 6px; height: 100%; }
  .barres b { position: relative; align-self: end; width: 100%; max-width: 30px; height: 6%; border-radius: 9px; background: color-mix(in srgb, var(--ink) 8%, transparent); transition: height 900ms cubic-bezier(0.2, 0.8, 0.2, 1); }
  .barres-pretes .barres b { height: var(--h); }
  .barres .plein b { background: color-mix(in srgb, var(--ink) 22%, transparent); }
  .barres .ici b { background: var(--accent); }
  .barres .futur b { background: color-mix(in srgb, var(--ink) 4%, transparent); }
  .barres b em { position: absolute; left: 50%; top: -18px; translate: -50% 0; font-style: normal; font-size: 11px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
  .barres .ici b em { color: var(--accent); }
  .barres span { font-size: 10.5px; color: var(--muted); }
  .barres .ici span { color: var(--ink); font-weight: 700; }
  .carte-solde .macros { list-style: none; margin: 6px 0 0; padding: 12px 0 0; border-top: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); display: flex; gap: 0; }
  .carte-solde .macros li { flex: 1; display: grid; gap: 2px; padding: 0 6px; border-left: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); }
  .carte-solde .macros li:first-child { border-left: 0; padding-left: 0; }
  .carte-solde .macros b { font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .carte-solde .macros span { font-size: 10.5px; color: var(--muted); line-height: 1.2; }
  .carte-solde .rythme-acc { margin-top: 4px; }
  .carte-solde .ouvrir-compte { width: 100%; margin-top: 4px; }
  .acc-gestes { display: grid; gap: 14px; }
  .acc-gestes:empty { display: none; }
  .actions-rapides { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .actions-rapides .action { display: grid; justify-items: center; gap: 8px; padding: 0; background: none; border: 0; text-decoration: none; color: var(--ink); font: inherit; text-transform: none; letter-spacing: 0; }
  .actions-rapides .action i { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); box-shadow: 0 14px 30px -22px color-mix(in srgb, var(--ink) 55%, transparent), 0 1px 0 #fff inset; color: var(--ink); transition: scale 200ms cubic-bezier(0.2, 0.8, 0.2, 1.4); }
  .actions-rapides .action:active i { scale: 0.94; }
  .actions-rapides .action svg { width: 22px; height: 22px; }
  .actions-rapides .action i b { font-family: var(--serif); font-weight: 500; font-size: 20px; color: var(--ink); }
  .actions-rapides .principale i { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .actions-rapides .dossier:not(.fait) i::after { content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); translate: 22px -22px; border: 2px solid var(--paper); }
  .actions-rapides .action i { position: relative; }
  .actions-rapides .action span { font-size: 11.5px; line-height: 1.2; text-align: center; color: var(--ink); }
  .carte-dossier { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; width: 100%; padding: 16px 18px; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); background: color-mix(in srgb, var(--accent) 8%, var(--paper)); text-align: left; font: inherit; text-transform: none; letter-spacing: 0; color: var(--ink); }
  .carte-dossier .cd-texte { display: grid; gap: 3px; min-width: 0; }
  .carte-dossier b { font-size: 15px; font-weight: 600; }
  .carte-dossier small { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
  .carte-dossier i { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--bg); display: grid; place-items: center; font-style: normal; }
  .accueil-page .bloc-jour.direct-tel { padding: 16px 18px 14px; border-radius: 24px; background: var(--paper); border: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); box-shadow: 0 24px 60px -44px color-mix(in srgb, var(--ink) 55%, transparent); }
  .accueil-page .bloc-jour .vide { margin: 8px 0 12px; font-size: 14px; color: var(--muted); }
  .accueil-page .bloc-jour .primary.petit { display: inline-flex; padding: 10px 16px; font-size: 12px; border-radius: 999px; text-decoration: none; }
  .accueil-page .direct-tel li { border-top-color: color-mix(in srgb, var(--ink) 6%, transparent); }
  /* la feuille du rythme */
  .voile-rythme { position: fixed; inset: 0; z-index: 4500; background: color-mix(in srgb, var(--ink) 35%, transparent); display: grid; align-items: end; opacity: 0; transition: opacity 240ms ease; }
  .voile-rythme.on { opacity: 1; }
  .voile-rythme .feuille { background: var(--bg); border-radius: 28px 28px 0 0; padding: 22px 22px max(22px, env(safe-area-inset-bottom)); display: grid; gap: 14px; translate: 0 30px; transition: translate 320ms cubic-bezier(0.2, 0.8, 0.2, 1); }
  .voile-rythme.on .feuille { translate: 0 0; }
  .voile-rythme .kicker { margin: 0; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
  .voile-rythme .puces { display: flex; gap: 8px; }
  .voile-rythme .puces button { flex: 1; padding: 14px 0; border-radius: 16px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 18px; font-family: var(--serif); }
  .voile-rythme .puces button.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .voile-rythme .aide { margin: 0; font-size: 13px; color: var(--muted); }
  .voile-rythme .text { background: none; border: 0; padding: 6px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-transform: none; letter-spacing: 0; font-size: 13px; }
  /* la feuille « Prête à relire » : une tête d'offre, une phrase, un bouton */
  .voile-prete .feuille { gap: 12px; }
  .voile-prete .relire-ouvrir { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 999px; background: linear-gradient(180deg, var(--accent), var(--accent-hover)); color: #fff; text-decoration: none; font-size: 15px; font-weight: 500; box-shadow: 0 14px 30px -18px var(--accent); }
  /* plus de bouton flottant : le dock suffit */
  .fab-postuler { display: none !important; }

  /* ================= Offres, nue : le compte, trois critères, le bouton, la liste ================= */
  #dire .pile, #dire .affine:not(.changer), #dire .astuce, #dire .reflexion { display: none !important; }
  #dire .affine.changer { border-style: dashed; }
  /* la barre ne s'affiche qu'à la demande, une fois qu'il y a une carte ; à vide, elle reste là pour écrire */
  /* la barre reste en bas, toujours — comme un chat : on écrit, les offres arrivent au-dessus */
  /* ================= Suivi : la liste, rien d'autre ================= */
  #view-apps .progression-tel, #view-apps .track-page > .direct-tel { display: none !important; }

  /* la bande « ordinateur relié » du bas n'a plus sa place : l'Accueil en parle en une carte, l'avatar ouvre le compte.
     Sur la vitrine non plus (elle s'étalait par-dessus le hero quand un compte est ouvert). */
  #device-card { display: none !important; }
  .carte-machine { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; width: 100%; padding: 16px 18px; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); background: var(--paper); text-align: left; font: inherit; text-transform: none; letter-spacing: 0; color: var(--ink); }
  .carte-machine .cd-texte { display: grid; gap: 3px; min-width: 0; }
  .carte-machine b { font-size: 15px; font-weight: 600; }
  .carte-machine small { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
  .carte-machine i { width: 34px; height: 34px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line); color: var(--ink); display: grid; place-items: center; font-style: normal; }

  /* dans l'application, la bulle de chat laisse la place au dock */
  html.dans-app #maxx-chat { display: none !important; }
  .hero-actions-tel .hero-essai-tel { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  /* Suivi : la liste et le vide */
  #view-apps .suivi-liste { padding: 0 !important; }
  #view-apps .suivi-liste li { grid-template-columns: 38px 1fr auto; }
  .suivi-vide { display: grid; gap: 10px; justify-items: start; padding: 10px 0; }
  .suivi-vide .grand-vide { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 64px; line-height: 1; color: var(--ink); letter-spacing: -0.03em; }
  .suivi-vide p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); max-width: 30ch; }
  .suivi-vide .primary { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; margin-top: 6px; padding: 14px 22px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 14px; }
  #view-apps .offers-head h1 { font-size: 34px; }

  /* =====================================================================================
     Le verre. Un seul langage pour la vitrine et l'application : un fond photo flou
     (l'aube à gauche, le bleu à droite), des panneaux de verre blanc laiteux à grands
     rayons, un grand chiffre en serif, des ronds pour les gestes, des listes avec les
     vrais logos, un dock en pilule. Rien de doré, rien d'italique : l'encre et le gris.
     ===================================================================================== */
  /* le fond : l'aube et le bleu, une lumière au centre, un grain à peine visible */
  body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: var(--glacier, var(--bg));
  }
  body::after {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.07; mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }
  html[data-theme="signal"] body::before, html[data-theme="signal"] body::after { display: none; }
  body, html.app-accueil body { background: transparent; }
  #view-home, .view { background: transparent; }

  /* le verre, en une classe et sur ce qui doit l'être */
  .carte-produit, .carte-produit .flottant, .objections details,
  .carte-solde, .recherche-acc, .accueil-page .bloc-jour.direct-tel, .carte-dossier, .carte-machine, .pour-vous-acc .carte-offres.veille-acc,
  .suivi-tete, .suivi-groupe, #dire .bulle.resultat .offres-dire li, #dire .bulle.maxx:not(.resultat):not(.pense):not(.reflexion), .voile-filtres .feuille, .voile-rythme .feuille, .home-top-inner {
    position: relative;
    background: var(--verre);
    -webkit-backdrop-filter: blur(34px) saturate(125%); backdrop-filter: blur(34px) saturate(125%);
    border: 1px solid var(--verre-bord);
    border-radius: 30px;
    box-shadow: var(--verre-ombre);
  }
  .carte-solde::before, .suivi-tete::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.25) 100%);
  }
  .carte-solde > *, .suivi-tete > * { position: relative; z-index: 1; }
  .sous-carte { background: var(--verre2); border: 1px solid rgba(255, 255, 255, 0.95); border-radius: 22px; box-shadow: 0 10px 24px -20px rgba(20, 20, 22, 0.25); }
  /* .chip, .rond, .lab : dans verre.css, communs aux deux largeurs */

  /* ---- en-tête de la vitrine : une pilule de verre posée sur l'image ---- */
  html.vitrine .home-top { position: fixed; top: 0; left: 0; right: 0; z-index: 30; background: transparent !important; border: 0; padding: calc(10px + env(safe-area-inset-top)) 16px 0; }
  html.vitrine .home-top-inner { min-height: 0; padding: 7px 8px 7px 14px; border-radius: 999px; display: flex; align-items: center; justify-content: space-between; }
  html.vitrine .home-top .brand span { display: inline; font-size: 11px; letter-spacing: 0.24em; color: var(--ink); }
  html.vitrine .home-top-cta { display: none !important; }
  html.vitrine .home-top-inner { padding-right: 14px; }
  html.vitrine #maxx-chat { display: none !important; }
  /* dans l'application, chaque page a sa propre tête : la barre du site s'efface */
  html.dans-app .view .home-top, html.app-accueil .view .home-top { display: none !important; }
  html.vitrine .home-progress { display: none; }

  /* ---- hero : la vraie page Workday en transparence, le panneau de verre en bas ---- */
  .hero-screen { position: relative; min-height: 100svh; padding: calc(78px + env(safe-area-inset-top)) 0 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; }
  .hero-screen::before { content: ""; position: absolute; z-index: 0; pointer-events: none; width: 360px; height: 360px; left: 45%; top: 42%; border-radius: 50%; filter: blur(50px); background: radial-gradient(circle, rgba(74, 151, 234, 0.5), rgba(74, 151, 234, 0) 70%); }
  .hero-screen::after { content: ""; position: absolute; z-index: 0; pointer-events: none; width: 280px; height: 280px; left: -80px; bottom: 4%; border-radius: 50%; filter: blur(50px); background: radial-gradient(circle, rgba(214, 232, 220, 0.95), rgba(214, 232, 220, 0) 70%); }
  .hero-screen .glow, .hero-noeud { display: none !important; }
  .hero-core { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; flex: 1; gap: 0; max-width: none; padding: 0 16px calc(14px + env(safe-area-inset-bottom)); }
  .hero-copy { display: contents; }
  .panneau-hero { order: 2; padding: 0 4px 6px; }
  .hero-screen h1.titre-tel { margin: 0; text-align: left; font-family: var(--serif); font-size: 42px; font-weight: 500; line-height: 0.98; letter-spacing: -0.025em; }
  .hero-screen h1.titre-tel em { font-style: italic; font-weight: 500; color: var(--muted); }
  .hook-tel { margin: 12px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-soft); max-width: 34ch; }
  .hero-actions-tel { margin-top: 16px; display: grid; grid-template-columns: 1fr 50px; gap: 8px; align-items: stretch; }
  .hero-cand { margin-top: 16px; padding: 14px 16px 12px; border-radius: 28px; }
  .cand-une { display: flex; align-items: center; gap: 10px; }
  .cand-une .lettre { position: relative; width: 40px; height: 40px; border-radius: 12px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; flex: none; font-style: normal; }
  .cand-une .lettre em { font-style: normal; font-weight: 700; font-size: 14px; color: var(--ink); }
  .cand-une .lettre img { position: absolute; inset: 6px; width: 28px; height: 28px; object-fit: contain; opacity: 0; transition: opacity 300ms ease; }
  .cand-une .lettre.a-logo img { opacity: 1; }
  .cand-une .lettre.a-logo em { opacity: 0; }
  .cand-une > span { display: grid; min-width: 0; flex: 1; }
  .cand-une b { font-family: var(--serif); font-size: 18px; font-weight: 500; line-height: 1.1; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cand-une small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cand-une .anneau-p { flex: none; width: 46px; height: 46px; }
  .hero-cand .etapes, .cand-vitrine .etapes { margin-top: 12px; }
  .hero-cand .etapes li { padding-bottom: 9px; }
  .cand-vitrine .etapes li { padding-bottom: 12px; }
  .hero-cand .etapes li::before { top: 20px; }
  .hero-cand .etapes li > span b, .cand-vitrine .etapes li > span b { font-size: 14px; }
  .hero-cand .etapes li > span small, .cand-vitrine .etapes li > span small { font-size: 11.5px; }
  .hero-actions-tel .hero-essai-tel { min-height: 50px; font-size: 15px; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.6); }
  .hero-actions-tel .hero-essai-tel b { font-weight: 600; }
  .hero-compte-tel { width: 50px; height: 50px; border-radius: 50%; background: var(--ink); color: #fff; text-decoration: none; font-size: 18px; display: grid; place-items: center; padding: 0; min-height: 0; }
  .hero-actions-tel .ouvrir-app { grid-column: 1 / -1; }
  .metriques-tel { margin: 16px 0 0; padding: 0; display: flex; gap: 24px; text-align: left; }
  .metriques-tel li + li { border-left: 0; }
  .metriques-tel b { font-size: 25px; font-weight: 500; }
  .metriques-tel span { margin-top: 4px; font-size: 9.5px; letter-spacing: 0.14em; }
  .hero-deja { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
  /* le titre seul, puis la scène : à gauche le geste et trois chiffres, à droite le
     téléphone de l'ordinateur en petit, qui déborde un peu de l'écran */
  .hook-tel, .hero-cand[hidden] { display: none !important; }
  .hero-tel-scene { display: grid; grid-template-columns: minmax(0, 1fr) 150px; column-gap: 6px; align-items: center; margin-top: 14px; }
  .hero-tel-gauche { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 0; min-width: 0; }
  .hero-tel-gauche .hero-actions-tel, .hero-tel-gauche .metriques-tel, .hero-tel-gauche .hero-deja { order: 0; }
  .hero-tel-gauche .hero-actions-tel { margin-top: 0; grid-template-columns: minmax(0, 1fr) 44px; gap: 6px; width: auto; }
  .hero-tel-gauche .hero-actions-tel .hero-essai-tel { min-height: 44px; min-width: 0; width: 100%; font-size: 14px; padding: 0 10px; }
  .hero-tel-gauche .hero-actions-tel .hero-essai-tel { background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.6) !important; }
  .hero-tel-gauche .hero-compte-tel { width: 44px; height: 44px; font-size: 16px; background: rgba(255, 255, 255, 0.7); color: var(--ink); border: 1px solid var(--line-strong); }
  .hero-tel-gauche .metriques-tel { margin: 18px 0 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; gap: 10px; }
  .hero-tel-gauche .metriques-tel li { display: flex; align-items: baseline; gap: 8px; }
  .hero-tel-gauche .metriques-tel b { font-size: 24px; line-height: 1; }
  .hero-tel-gauche .metriques-tel span { margin: 0; }
  .hero-tel-gauche .hero-deja { margin-top: 16px; }
  .tel-mini { position: relative; justify-self: end; width: 150px; height: 340px; margin-right: -34px; }
  .tel-mini .tel-cadre { position: absolute; right: 0; top: 0; zoom: 0.56; width: 300px; height: 610px; padding: 12px; border-radius: 50px; rotate: -5deg; transform-origin: 50% 60%;
    background: linear-gradient(160deg, #202226, #0b0c0e); box-shadow: 0 50px 80px -40px rgba(20, 30, 50, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
  .tel-mini .tel-cadre::before { content: ""; position: absolute; left: 50%; top: 22px; translate: -50% 0; width: 92px; height: 26px; border-radius: 999px; background: #0b0c0e; z-index: 2; }
  .tel-mini .tel-ecran { position: relative; height: 100%; border-radius: 40px; overflow: hidden; background: var(--glacier, var(--bg)); padding: 62px 16px 18px; display: flex; flex-direction: column; gap: 10px; box-sizing: border-box; }
  .tel-mini .tel-date { margin: 0; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
  .tel-mini .tel-date::first-letter { text-transform: uppercase; }
  .tel-mini .tel-une { margin: 0; font-family: var(--serif); font-size: 21px; line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); max-width: 11ch; }
  .tel-mini .flux-offres { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 7px; max-height: none; -webkit-mask-image: none; mask-image: none; overflow: visible; }
  .tel-mini .flux-offres li { display: grid; grid-template-columns: 32px 1fr auto; gap: 9px; align-items: center; padding: 9px 10px; border-radius: 16px; background: rgba(255, 255, 255, 0.72); border: 1px solid #fff; }
  .tel-mini .flux-offres .lettre { position: relative; width: 32px; height: 32px; border-radius: 10px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; flex: none; font-style: normal; }
  .tel-mini .flux-offres .lettre em { font-style: normal; font-weight: 700; font-size: 13px; color: var(--ink); }
  .tel-mini .flux-offres .lettre img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain; opacity: 0; transition: opacity 300ms ease; }
  .tel-mini .flux-offres .lettre.a-logo img { opacity: 1; }
  .tel-mini .flux-offres .lettre.a-logo em { opacity: 0; }
  .tel-mini .flux-offres span { display: grid; min-width: 0; }
  .tel-mini .flux-offres b { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
  .tel-mini .flux-offres small { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tel-mini .flux-offres time { font-size: 9.5px; color: var(--muted); white-space: nowrap; }
  .tel-mini .tel-bouton { margin: auto 0 0; padding: 13px; border-radius: 999px; background: var(--ink); color: #fff; text-align: center; font-size: 13px; font-weight: 500; }
  @media (min-width: 480px) { .hero-tel-scene { grid-template-columns: minmax(0, 300px) 200px; column-gap: 36px; justify-content: start; margin-top: 8px; } .tel-mini { width: 200px; height: 430px; margin-right: 0; } .tel-mini .tel-cadre { zoom: 0.7; } }
  @media (max-width: 360px) { .hero-tel-scene { grid-template-columns: minmax(0, 1fr) 128px; } .tel-mini { width: 128px; height: 300px; } .tel-mini .tel-cadre { zoom: 0.48; } }
  .hero-deja button { background: none; border: 0; padding: 0; color: var(--ink); font: inherit; text-decoration: none; border-bottom: 1px solid var(--line-strong); text-transform: none; letter-spacing: 0; min-height: 0; border-radius: 0; }
  .entree, .attente, .essai, #essai-vu { order: 3; margin-top: 10px; }
  .logo-strip { display: none !important; }

  /* ---- les quatre produits, façon Apple : le nom du produit en grand, une ligne, le
     visuel dessous. Chaque carte fait un écran ; toutes ont la même hauteur. ---- */
  .produit { padding: 10px 16px; }
  .produit:first-of-type { padding-top: 6px; }
  .carte-produit { overflow: hidden; height: calc(100svh - 96px); min-height: 620px; max-height: 760px; display: flex; flex-direction: column; justify-content: flex-start; translate: 0 24px; opacity: 0; transition: translate 800ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 700ms ease; }
  .produit.in .carte-produit { translate: 0 0; opacity: 1; }
  .carte-produit::before { content: ""; position: absolute; z-index: 0; pointer-events: none; width: 320px; height: 320px; border-radius: 50%; filter: blur(48px); right: -90px; top: 16%; background: radial-gradient(circle, rgba(43, 127, 224, 0.4), rgba(43, 127, 224, 0) 70%); }
  .carte-produit::after { content: ""; position: absolute; z-index: 0; pointer-events: none; width: 280px; height: 280px; border-radius: 50%; filter: blur(48px); left: -80px; bottom: 4%; background: radial-gradient(circle, rgba(214, 232, 220, 0.95), rgba(214, 232, 220, 0) 70%); }
  .p-cv .carte-produit::before { right: auto; left: 20%; top: 34%; background: radial-gradient(circle, rgba(74, 151, 234, 0.45), rgba(74, 151, 234, 0) 70%); }
  .p-suivi .carte-produit::after { background: radial-gradient(circle, rgba(31, 154, 85, 0.2), rgba(31, 154, 85, 0) 70%); left: 30%; bottom: 20%; }
  .p-reseau .carte-produit::before { opacity: 0.5; }
  .carte-produit.portail-workday { --photo: url("/static/img/portail-workday.jpg"); }
  .carte-produit.voilee::before { filter: blur(4px) saturate(0.6); opacity: 0.35; }
  .carte-produit .tete { position: relative; z-index: 2; padding: 26px 22px 0; }
  .carte-produit .tete .eyebrow { margin: 0 0 16px; display: flex; align-items: center; gap: 8px; clip-path: none; }
  .carte-produit .num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--verre2); border: 1px solid rgba(255, 255, 255, 0.95); font-size: 11.5px; font-weight: 600; color: var(--ink); letter-spacing: 0; }
  .carte-produit .tag { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: var(--verre2); border: 1px solid rgba(255, 255, 255, 0.95); font-size: 11px; color: var(--ink); letter-spacing: 0; text-transform: none; }
  .carte-produit .tag .pouls { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: pouls-landing 1.8s ease-out infinite; }
  .carte-produit .tag.bientot { background: var(--ink); color: #fff; border-color: var(--ink); letter-spacing: 0.12em; text-transform: uppercase; font-size: 10px; }
  .carte-produit .tete h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 42px; line-height: 1; letter-spacing: -0.02em; color: var(--ink); text-transform: none; }
  .carte-produit .tete .une { margin: 12px 0 0; font-size: 15.5px; line-height: 1.45; color: var(--muted); max-width: 30ch; }
  .carte-produit .tete .une b { color: var(--ink); font-weight: 600; }
  .carte-produit .visuel { position: relative; z-index: 2; padding: 0 14px 14px; display: grid; gap: 10px; margin: auto 0; }
  .p-postule .carte-produit .visuel { margin: auto 0 0; }
  .carte-produit .flottant { padding: 12px 14px; border-radius: 24px; }
  .carte-produit.tete-seule { justify-content: center; height: auto; min-height: 0; text-align: center; }
  .carte-produit.tete-seule .tete { padding: 34px 22px 30px; display: grid; justify-items: center; }
  .carte-produit.tete-seule h2 { font-size: 42px; line-height: 1; letter-spacing: -0.025em; }
  .carte-produit.tete-seule .une { max-width: none; }
  .carte-produit.tete-seule .primary { margin-top: 20px; width: auto; min-width: 220px; }
  .carte-produit.tete-seule .portails-vitrine { justify-content: center; margin: 0 0 22px; }
  .rythme-vitrine { display: flex; gap: 8px; }
  .rythme-vitrine b { flex: 1; text-align: center; padding: 13px 0; border-radius: 999px; font-family: var(--serif); font-weight: 500; font-size: 18px; background: var(--verre); border: 1px solid var(--verre-bord); color: var(--ink); }
  .rythme-vitrine b.on { background: var(--ink); color: #fff; border-color: var(--ink); }
  .portails-vitrine { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
  .portails-vitrine li { padding: 0; font-family: var(--serif); font-size: 18px; color: var(--ink-soft); }
  .portails-vitrine { gap: 6px 16px; }
  /* le fil en direct, dans la carte 1 */
  .p-postule .flottant { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; }
  .flottant .flux-offres { margin: 0; max-height: none; -webkit-mask-image: none; mask-image: none; gap: 8px; -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent); mask-image: linear-gradient(to bottom, #000 82%, transparent); gap: 0; }
  .flottant .flux-offres li { background: rgba(255, 255, 255, 0.74); border: 1px solid #fff; border-radius: 18px; padding: 11px 12px; grid-template-columns: 40px 1fr auto; }
  .flottant .flux-offres li:first-child { background: #fff; box-shadow: 0 14px 30px -18px rgba(20, 30, 50, 0.35); }
  .flottant .flux-offres .lettre { width: 40px; height: 40px; border-radius: 12px; background: #fff; border: 1px solid rgba(255, 255, 255, 0.95); }
  .flottant .flux-offres .lettre img { inset: 7px; width: 26px; height: 26px; }
  .flottant .flux-offres span b { font-size: 13.5px; }
  .flottant .flux-offres span small { font-size: 11px; }
  .flottant .flux-mention { margin: 2px 2px 0; font-size: 11px; line-height: 1.4; color: var(--muted); }
  .p-postule .rythme-vitrine { order: -1; margin-bottom: 2px; }
  /* le CV, avant et après */
  .carte-produit .flottant.cv-avant-apres { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 0 0; margin-top: 18px; position: relative; align-items: end; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; }
  .fleche-cv { position: absolute; left: 50%; top: 46%; translate: -50% -50%; z-index: 2; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 14px; box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.6); }
  .mots-vitrine { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
  .mots-vitrine span { padding: 8px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 12px; color: var(--ink); }
  .mots-vitrine span.bl { background: var(--accent-wash); color: var(--accent); border-color: transparent; font-weight: 600; }
  .page-cv { padding: 18px 14px 20px; border-radius: 20px; background: rgba(255, 255, 255, 0.8); border: 1px solid #fff; min-height: 290px; }
  .page-cv.apres { background: #fff; box-shadow: 0 30px 60px -26px rgba(43, 127, 224, 0.6); translate: 0 -18px; }
  .page-cv .kicker { margin: 10px 0 4px; font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
  .page-cv .kicker:first-child { margin-top: 0; }
  .page-cv b { display: block; font-family: var(--serif); font-size: 15px; line-height: 1.15; margin-bottom: 6px; color: var(--ink); font-weight: 500; }
  .page-cv i { display: block; height: 6px; border-radius: 3px; background: rgba(20, 20, 22, 0.1); margin: 7px 0; }
  .page-cv i.c { width: 70%; }
  .page-cv i.mod { background: var(--accent); }
  /* les états du suivi */
  .pile-cand { position: relative; padding-top: 18px; }
  .pile-cand::before, .pile-cand::after { content: ""; position: absolute; left: 14px; right: 14px; top: 8px; height: 40px; border-radius: 22px; background: rgba(255, 255, 255, 0.55); border: 1px solid #fff; }
  .pile-cand::after { left: 28px; right: 28px; top: 0; background: rgba(255, 255, 255, 0.35); }
  .cand-vitrine { position: relative; padding: 18px 18px 14px !important; background: rgba(255, 255, 255, 0.72) !important; }
  .cand-vitrine .etapes li { padding-bottom: 16px; }
  .cand-vitrine .etapes li > span b { font-size: 14.5px; }
  .gens ul { list-style: none; margin: 0; padding: 0; }
  .gens { background: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 0 !important; }
  .gens ul { display: grid; gap: 8px; }
  .gens li { display: grid; grid-template-columns: 42px 1fr auto; gap: 10px; align-items: center; padding: 12px 12px; border-radius: 18px; background: rgba(255, 255, 255, 0.72); border: 1px solid #fff; }
  .message-vitrine { margin-top: 2px; padding: 14px 16px; border-radius: 20px 20px 20px 6px; background: #fff; border: 1px solid #fff; box-shadow: 0 20px 40px -24px rgba(20, 30, 50, 0.4); font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
  .message-vitrine .k { margin: 0 0 4px; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
  .message-vitrine em { font-style: normal; background: var(--accent-wash); border-radius: 4px; padding: 0 3px; color: var(--ink); }
  .mention-vitrine { margin: 0 2px; font-size: 11px; color: var(--muted); }
  .gens .ini { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 600; background: linear-gradient(140deg, #cfe0f7, #d6e8dc); color: var(--ink); }
  .gens span { display: grid; min-width: 0; }
  .gens b { font-size: 13px; font-weight: 600; color: var(--ink); }
  .gens .flou { filter: blur(4px); }
  .gens small { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gens em.chip { font-style: normal; font-size: 12px; padding: 8px 12px; }
  .flou { filter: blur(3.5px); }
  /* questions et promesse finale : du verre, pas de bande noire */
  .objections { padding: 26px 16px 10px; }
  .objections .eyebrow { display: none; }
  .objections details { border: 1px solid var(--verre-bord); border-radius: 22px; margin-top: 8px; padding: 0 16px; }
  .objections details:last-of-type { border-bottom: 1px solid var(--verre-bord); }
  .objections summary { padding: 15px 0; font-size: 14.5px; }
  .objections details p { margin: -2px 0 14px; font-size: 13.5px; }
  .site-foot { padding-bottom: 40px; }

  /* ---- l'application : Accueil ---- */
  .accueil-page { padding: calc(6px + env(safe-area-inset-top)) 16px 130px; gap: 12px; }
  .acc-tete { padding: 8px 4px 0; }
  .acc-tete .acc-noeud { width: 36px; height: 36px; background: #fff var(--noeud) center / 18px no-repeat; border: 1px solid rgba(255, 255, 255, 0.95); position: relative; box-shadow: none; }
  .acc-tete .acc-noeud.en-ligne::after { content: ""; position: absolute; right: -1px; top: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); border: 2px solid #fff; }
  .acc-marque { font-size: 11px; letter-spacing: 0.24em; font-weight: 600; color: var(--ink); }
  .acc-cloche { width: 36px; height: 36px; border-radius: 50%; background: var(--verre2); border: 1px solid rgba(255, 255, 255, 0.95); display: grid; place-items: center; position: relative; text-decoration: none; color: var(--ink); }
  .acc-cloche svg { width: 17px; height: 17px; }
  .acc-cloche.a-point::after { content: ""; position: absolute; top: 6px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--bad); border: 1.5px solid #fff; }
  /* L'en-tête de l'accueil : la marque à gauche (elle ramène ici, rien d'autre), le suivi
     et le compte à droite. Le compte porte l'initiale et la pastille « machine en ligne ». */
  .acc-tete { align-items: center; gap: 10px; }
  .acc-marque-lien { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); padding: 4px 2px; }
  .acc-noeud-marque { width: 24px; height: 22px; background: var(--noeud) center / contain no-repeat; }
  .acc-actes { display: inline-flex; align-items: center; gap: 8px; }
  .acc-compte { width: 36px; height: 36px; padding: 0; border-radius: 50%; background: var(--ink); color: #fff; border: 1px solid var(--ink); display: grid; place-items: center; position: relative; font: inherit; cursor: pointer; }
  .acc-compte b { font-family: var(--serif); font-size: 17px; font-weight: 500; line-height: 1; }
  .acc-compte svg { width: 17px; height: 17px; }
  .acc-compte.en-ligne::after { content: ""; position: absolute; right: -1px; top: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); border: 2px solid #fff; }
  html.app-accueil .lat-switch { display: none !important; }
  html.app-accueil .acc-tete .acc-cloche { visibility: visible; }
  /* Ailleurs dans l'application, l'interrupteur du menu ressemble à un menu, pas à un
     réglage sombre/clair : un rond, trois traits. */
  html.dans-app:not(.vitrine) .lat-switch { width: 38px; height: 38px; padding: 0; justify-content: center; }
  html.dans-app:not(.vitrine) .lat-switch i { width: 16px; height: 2px; border-radius: 2px; background: var(--ink); box-shadow: 0 -5px 0 var(--ink), 0 5px 0 var(--ink); transition: none; }
  html.lat-on.dans-app:not(.vitrine) .lat-switch i { transform: none; }
  /* Le corps : une colonne, des blocs espacés ; les « prochaines » redisent le bloc du
     jour, on ne les montre pas ; les pages, en petit, ferment la page. */
  html.app-accueil .acc-corps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  html.app-accueil .acc-corps > * { min-width: 0; }
  html.app-accueil .acc-corps > .acc-gestes:empty, html.app-accueil .acc-corps > .acc-cv:empty, html.app-accueil .acc-corps > .acc-chiffres:empty, html.app-accueil .acc-corps > .vitrine-acc:empty { display: none; }
  html.app-accueil .acc-gestes { display: grid; gap: 10px; }
  html.app-accueil .acc-cv { display: grid; gap: 10px; }
  html.app-accueil .prochaines-acc { display: none !important; }
  html.app-accueil .dash-nav { padding: 12px 10px 10px; margin-top: 6px; }
  html.app-accueil .dash-nav .lab { margin: 0 6px 10px; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
  html.app-accueil .dash-nav .tuiles { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  html.app-accueil .dash-nav .tuile { gap: 5px; padding: 9px 0 7px; border-radius: 14px; font-size: 9.5px; }
  html.app-accueil .dash-nav .tuile i { width: 22px; height: 22px; }
  html.app-accueil .dash-nav .tuile svg { width: 17px; height: 17px; }
  html.app-accueil .dash-nav .tuile i b { font-size: 15px; }
  .salut-bloc { padding: 2px 4px 0; }
  .salut-bloc .petit { margin: 0 0 6px; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
  .salut-bloc .petit::first-letter { text-transform: uppercase; }
  .salut-bloc .salut-sous { margin: 0; font-family: var(--serif); font-size: 26px; line-height: 1.1; color: var(--ink); font-weight: 500; letter-spacing: -0.01em; }
  .salut-bloc .salut-sous b { color: var(--ink); font-weight: 500; }
  /* la photo sous le verre : la vraie page du portail, délavée, en haut de chaque page de l'app */
  .accueil-page, #view-apps .track-page, #view-search .offers-page { position: relative; }
  .accueil-page::before, #view-apps .track-page::before, #view-search .offers-page::before {
    content: ""; position: absolute; left: -16px; right: -16px; top: 0; height: 420px; z-index: 0; pointer-events: none;
    background: url("/static/img/portail-workday.jpg") center 62% / 100% auto no-repeat;
    opacity: 0.14; filter: saturate(0.5) contrast(0.95) blur(2px);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 60%, transparent 100%);
  }
  .accueil-page > *, #view-apps .track-page > *, #view-search .offers-page > * { position: relative; z-index: 1; }
  .carte-solde { padding: 18px 18px 16px; gap: 10px; border-radius: 30px; overflow: visible; }
  .carte-solde .chip { justify-self: start; }
  .carte-solde .lab { margin-top: 4px; }
  .carte-solde .solde { margin: 0; gap: 6px; }
  .carte-solde .solde b { font-size: 48px; font-weight: 500; letter-spacing: -0.02em; }
  .carte-solde .solde span { font-family: var(--serif); font-size: 26px; color: rgba(20, 20, 22, 0.35); font-weight: 500; }
  .carte-solde .solde i { font-style: normal; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line-strong); font-size: 9px; color: var(--muted); align-self: center; margin-left: 4px; }
  .carte-solde .phrase { font-size: 13px; color: var(--muted); }
  .carte-solde .phrase b { color: var(--ink); }
  .grille2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .grille2 .sous-carte { padding: 12px; display: grid; gap: 6px; align-content: start; }
  .grille2 .lab { font-size: 11.5px; }
  .val-petit { margin: 0; font-family: var(--serif); font-size: 24px; line-height: 1; color: var(--ink); font-weight: 500; }
  .val-petit span { font-size: 13px; color: var(--muted); }
  .grille2 .barres { height: 44px; gap: 4px; margin: 4px 0 0; }
  .grille2 .barres b { max-width: none; border-radius: 3px; }
  .grille2 .barres b em { display: none; }
  .grille2 .barres .ici b { background: var(--ink); }
  .grille2 .barres span { font-size: 8.5px; }
  .grille2 .barres .ici span { font-weight: 600; }
  .logos-prochaines { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 4px; }
  .logos-prochaines a, .logos-prochaines span { display: grid; justify-items: center; gap: 4px; text-decoration: none; color: var(--muted); font-size: 9px; text-align: center; min-width: 0; }
  .logos-prochaines a small, .logos-prochaines span small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .logos-prochaines .lettre { position: relative; width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 1px solid rgba(255, 255, 255, 0.95); display: grid; place-items: center; overflow: hidden; }
  .logos-prochaines .lettre img { position: absolute; inset: 7px; width: 24px; height: 24px; object-fit: contain; opacity: 0; }
  .logos-prochaines .lettre.a-logo img { opacity: 1; }
  .logos-prochaines .lettre.a-logo em { opacity: 0; }
  .logos-prochaines .lettre em { font-style: normal; font-weight: 700; font-size: 13px; color: var(--ink); }
  .logos-prochaines .toutes .lettre { background: var(--ink); color: #fff; border-color: var(--ink); }
  .logos-prochaines .toutes .lettre em { color: #fff; }
  .logos-prochaines .toutes small { color: var(--ink); }
  .logos-prochaines .vide { grid-column: 1 / -1; justify-items: start; font-size: 11.5px; color: var(--muted); line-height: 1.4; }
  .logos-prochaines .vide a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
  .carte-solde .rythme-acc button { background: var(--verre2); border-color: rgba(255, 255, 255, 0.95); font-family: var(--serif); font-size: 17px; }
  /* les gestes : des bulles */
  .actions-rapides { gap: 6px; padding: 12px 10px 10px; border-radius: 26px; background: var(--verre); border: 1px solid var(--verre-bord); box-shadow: var(--verre-ombre); -webkit-backdrop-filter: blur(34px); backdrop-filter: blur(34px); }
  .actions-rapides .action i { width: 56px; height: 56px; background: var(--verre2); border-color: rgba(255, 255, 255, 0.95); box-shadow: 0 12px 26px -18px rgba(20, 20, 22, 0.45); }
  .actions-rapides .action i b { font-size: 19px; }
  .actions-rapides .action span { font-size: 10.5px; color: var(--muted); }
  .actions-rapides .principale i { background: var(--ink); color: #fff; border-color: var(--ink); }
  .actions-rapides .dossier:not(.fait) i::after { border-color: #fff; }
  /* la recherche */
  .recherche-acc { display: flex; align-items: center; gap: 10px; padding: 7px 7px 7px 16px; border-radius: 999px; text-decoration: none; color: var(--muted); font-size: 13.5px; }
  .recherche-acc span { flex: 1; }
  .recherche-acc .filtre-acc { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-style: normal; }
  .recherche-acc .filtre-acc svg { width: 16px; height: 16px; }
  .carte-dossier { border-radius: 24px; background: var(--verre); border-color: var(--verre-bord); }
  .carte-machine { border-radius: 24px; }
  .carte-machine i { background: var(--verre2); border-color: rgba(255, 255, 255, 0.95); }
  .accueil-page .bloc-jour.direct-tel { padding: 14px 16px 10px; border-radius: 26px; }
  .accueil-page .bloc-jour .kicker { font-family: var(--serif); font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--ink); }
  .accueil-page .bloc-jour .kicker em { font-size: 11px; color: var(--muted); }
  .accueil-page .bloc-jour .kicker .pouls { display: none; }
  .accueil-page .bloc-jour.actif .kicker .pouls { display: block; }

  /* ---- les listes de candidatures (Accueil, Suivi) : logo rond, employeur, poste, l'état à droite ---- */
  .direct-tel li, .suivi-liste li { grid-template-columns: 38px 1fr auto; column-gap: 11px; padding: 9px 0; align-items: center; }
  .direct-tel .lettre, .suivi-liste .lettre { width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 1px solid rgba(255, 255, 255, 0.95); }
  .direct-tel li > div:not(.etat) b, .suivi-liste li > div:not(.etat) b { font-size: 12.5px; font-weight: 600; }
  .direct-tel li > div:not(.etat) span, .suivi-liste li > div:not(.etat) span { font-size: 10.5px; color: var(--muted); }
  .direct-tel li > .etat em, .suivi-liste li > .etat em { font-style: normal; text-align: right; font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; display: grid; gap: 1px; }
  .direct-tel li > .etat em small, .suivi-liste li > .etat em small { font-weight: 400; font-size: 10.5px; color: var(--muted); }
  .direct-tel li.submitted > .etat em, .suivi-liste li.submitted > .etat em { color: var(--accent); }
  .direct-tel li.started > .etat em, .suivi-liste li.started > .etat em { color: var(--ink); }
  .direct-tel li.interview_invited > .etat em, .suivi-liste li.interview_invited > .etat em, .direct-tel li.offer > .etat em, .suivi-liste li.offer > .etat em { color: var(--ok); }
  .direct-tel li.rejected > .etat em, .suivi-liste li.rejected > .etat em { color: var(--muted); }
  .direct-tel li.failed > .etat em, .suivi-liste li.failed > .etat em { color: var(--bad); }

  /* ---- Suivi ---- */
  #view-apps .track-page { padding: calc(6px + env(safe-area-inset-top)) 16px 130px; }
  #view-apps .offers-head { padding: 8px 4px 12px; }
  #view-apps .offers-head h1 { font-family: var(--serif); font-size: 26px; font-weight: 500; text-align: left; letter-spacing: -0.01em; }
  #view-apps .offers-head p, #view-apps .offers-head .kicker { display: none; }
  .suivi-tete { padding: 16px 16px 14px; margin-bottom: 10px; }
  .suivi-tete .compteur { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
  .suivi-tete .compteur .droite { text-align: right; }
  .suivi-tete .val { margin: 2px 0 0; display: flex; align-items: baseline; gap: 8px; font-family: var(--serif); font-size: 44px; line-height: 1; letter-spacing: -0.02em; color: var(--ink); font-weight: 500; }
  .suivi-tete .droite .val { justify-content: flex-end; }
  .suivi-tete .val span { font-size: 22px; color: rgba(20, 20, 22, 0.4); }
  .suivi-tete .val .chip { font-size: 11px; align-self: center; }
  .suivi-filtres { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
  .suivi-filtres::-webkit-scrollbar { display: none; }
  .suivi-filtres .chip { padding: 9px 14px; font-size: 12.5px; }
  .suivi-rien { margin: 24px 4px; text-align: center; color: var(--muted); font-size: 13.5px; }
  .onde { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; margin: 8px 0 0; padding: 20px 0 18px; }
  .onde .col { position: relative; display: grid; grid-template-rows: 64px 20px 64px; }
  .onde .haut, .onde .bas { position: relative; display: block; }
  .onde .haut { grid-row: 1; align-self: end; border-radius: 4px; background: rgba(20, 20, 22, 0.09); min-height: 3px; transition: height 800ms cubic-bezier(0.2, 0.8, 0.2, 1); }
  .onde .bas { grid-row: 3; align-self: start; border-radius: 4px; background: rgba(20, 20, 22, 0.06); min-height: 3px; transition: height 800ms cubic-bezier(0.2, 0.8, 0.2, 1); }
  .onde .col.ici .haut { background: var(--ink); }
  .onde .col.ici .bas { background: var(--bad); }
  .onde .col.ici .haut::before { content: attr(data-v); position: absolute; left: 50%; top: -16px; transform: translateX(-50%); font-size: 9.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
  .onde .col.ici .bas::after { content: attr(data-v); position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); font-size: 9.5px; color: var(--bad); font-weight: 600; white-space: nowrap; }
  .onde .axe { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: flex; justify-content: space-between; font-size: 9px; color: var(--muted); pointer-events: none; padding: 0 2px; }
  .onde .axe b { font-weight: 600; color: var(--ink); }
  .suivi-tete .reponses-ligne { margin: 4px 0 0; text-align: center; font-size: 12px; color: var(--muted); }
  .suivi-tete .reponses-ligne b { font-family: var(--serif); font-size: 20px; color: var(--ink); font-weight: 500; }
  .suivi-groupe { padding: 12px 16px 6px; margin-top: 10px; }
  .suivi-groupe h4 { margin: 0 0 4px; font-family: var(--serif); font-weight: 500; font-size: 16px; color: var(--ink); }
  .suivi-groupe h4::first-letter { text-transform: uppercase; }
  .suivi-groupe .suivi-liste { list-style: none; margin: 0; padding: 0 !important; }
  .suivi-groupe .suivi-liste li + li { border-top: 1px solid var(--line); }
  .suivi-vide { padding: 20px 4px; }

  /* ---- Offres : le compte en tête, chaque offre dans sa carte de verre, le bouton noir ---- */
  #view-search .offers-page { padding-top: calc(6px + env(safe-area-inset-top)); }
  #dire .bulle.resultat { background: transparent; border: 0; box-shadow: none; padding: 8px 0 0; }
  #dire .bulle.resultat .compte { margin: 0; display: flex; align-items: baseline; gap: 8px; }
  #dire .bulle.resultat .compte .n { font-family: var(--serif); font-size: 48px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
  #dire .bulle.resultat .compte span { font-family: var(--serif); font-size: 26px; color: rgba(20, 20, 22, 0.4); }
  #dire .bulle.resultat .sous { color: var(--muted); font-size: 12.5px; }
  #dire .etiquettes { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
  #dire .etiquette, #dire .affine.changer, #dire .affine.filtres { display: inline-flex !important; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--verre2); border: 1px solid rgba(255, 255, 255, 0.95); font-size: 11.5px; color: var(--ink); text-transform: none; letter-spacing: 0; min-height: 0; }
  #dire .affine.changer { border-style: solid; }
  #dire .affine.filtres { background: var(--ink); color: #fff; border-color: var(--ink); }
  #dire .tout { border-radius: 999px; background: var(--ink); color: #fff; }
  #dire .offres-dire { display: grid; gap: 10px; margin-top: 12px; }
  #dire .bulle.resultat .offres-dire li { display: grid; grid-template-columns: 46px 1fr; grid-template-areas: "logo texte" "bouton bouton"; column-gap: 12px; row-gap: 14px; padding: 16px; border-radius: 26px; border-top: 1px solid var(--verre-bord); }
  #dire .bulle.resultat .offres-dire li .lettre { grid-area: logo; width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 1px solid rgba(255, 255, 255, 0.95); }
  #dire .bulle.resultat .offres-dire li > div { grid-area: texte; display: grid; gap: 2px; min-width: 0; }
  #dire .bulle.resultat .offres-dire li > div b { font-size: 13px; font-weight: 600; color: var(--ink); }
  #dire .bulle.resultat .offres-dire li > div span { font-family: var(--serif); font-size: 20px; line-height: 1.12; color: var(--ink); white-space: normal; }
  #dire .bulle.resultat .offres-dire li > div span mark { background: none; color: inherit; border-bottom: 1px solid var(--line-strong); }
  #dire .bulle.resultat .offres-dire li > div small { font-size: 11.5px; color: var(--muted); }
  #dire .bulle.resultat .offres-dire li .neuf { font-size: 9.5px; margin-left: 8px; }
  #dire .bulle.resultat .offres-dire li .postuler { grid-area: bouton; width: 100%; min-height: 48px; border-radius: 999px; background: var(--ink); color: #fff; border: 0; font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0; }
  #dire .bulle.resultat .offres-dire li .postuler:disabled { background: var(--verre2); color: var(--muted); border: 1px solid rgba(255, 255, 255, 0.95); }
  #dire .bulle.resultat .offres-dire li.lance { opacity: 0.7; }
  #dire .plus { width: 100%; margin-top: 10px; padding: 12px; border-radius: 999px; background: var(--verre2); border: 1px solid rgba(255, 255, 255, 0.95); color: var(--ink); text-transform: none; letter-spacing: 0; font-size: 13px; }

  /* ---- la feuille des filtres ---- */
  .voile-filtres { position: fixed; inset: 0; z-index: 4500; background: rgba(20, 20, 22, 0.28); display: grid; align-items: end; opacity: 0; transition: opacity 240ms ease; }
  .voile-filtres.on { opacity: 1; }
  .voile-filtres .feuille { border-radius: 30px 30px 0 0; border-bottom: 0; padding: 18px 20px max(20px, env(safe-area-inset-bottom)); display: grid; gap: 16px; translate: 0 30px; transition: translate 320ms cubic-bezier(0.2, 0.8, 0.2, 1); background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.7)); max-height: 88svh; overflow: auto; }
  .voile-filtres.on .feuille { translate: 0 0; }
  .voile-filtres h3 { margin: 0; text-align: center; font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--ink); }
  .voile-filtres .grp .lab { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
  .voile-filtres .pills { display: flex; flex-wrap: wrap; gap: 6px; }
  .voile-filtres .pills button { padding: 9px 13px; border-radius: 999px; background: var(--verre2); border: 1px solid rgba(255, 255, 255, 0.95); color: var(--ink); font-size: 12.5px; text-transform: none; letter-spacing: 0; min-height: 0; }
  .voile-filtres .pills button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
  .voile-filtres .pills.ronds button { width: 42px; height: 42px; padding: 0; display: grid; place-items: center; font-family: var(--serif); font-size: 16px; }
  .voile-filtres .pills.ronds button.on { background: #fff; color: var(--ink); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8), 0 0 0 4px var(--ink); border-color: transparent; }
  .voile-filtres .actes { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; margin-top: 4px; }
  .voile-filtres .actes button { min-height: 50px; border-radius: 999px; font-size: 14px; text-transform: none; letter-spacing: 0; }
  .voile-filtres .actes .annuler { background: var(--verre2); border: 1px solid rgba(255, 255, 255, 0.95); color: var(--ink); }
  .voile-filtres .actes .voir { background: var(--ink); color: #fff; border: 0; }
  .voile-rythme .feuille { border-radius: 30px 30px 0 0; border-bottom: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.7)); }
  .voile-rythme .puces button { background: var(--verre2); border-color: rgba(255, 255, 255, 0.95); }

  /* la conversation : ce que MAXX dit, en verre ; la barre, en pilule */
  #dire .bulle.maxx:not(.resultat):not(.pense):not(.reflexion) { border-radius: 22px; padding: 14px 16px; }
  .dire-barre { border-radius: 999px; background: var(--verre); border: 1px solid var(--verre-bord); box-shadow: var(--verre-ombre); -webkit-backdrop-filter: blur(34px); backdrop-filter: blur(34px); }

  /* ---- l'Accueil, tableau de bord : le titre du jour, quatre chiffres, le CV, les prochaines ---- */
  .acc-corps { display: grid; gap: 12px; min-width: 0; }
  .acc-corps > * { min-width: 0; }
  .salut-bloc h1.salut-sous { margin: 0; font-size: 27px; }
  .acc-chiffres:empty, .acc-cv:empty { display: none; }
  .acc-chiffres .carte-cv .primary { min-height: 48px; }
  .kpi.verre::before { display: none; }
  .carte-cv.verre::before { display: none; }
  .accueil-page .bloc-jour .kicker span { font-family: var(--serif); font-size: 16px; }
  .accueil-page .bloc-jour .kicker em:empty { display: none; }
  /* la vitrine : de l'offre à l'entretien */
  .p-etapes .carte-produit.tete-seule { text-align: left; }
  .p-etapes .carte-produit.tete-seule .tete { justify-items: start; padding: 28px 22px 18px; }
  .p-etapes .carte-produit.tete-seule h2 { font-size: 40px; line-height: 1; }
  .p-etapes .carte-produit.tete-seule h2 em { font-style: italic; color: var(--muted); }
  .p-etapes .carte-produit .visuel { padding: 0 22px 26px; }
  .p-etapes .etapes li { padding-bottom: 16px; }
  .p-etapes .etapes li > span b { font-size: 14px; }
  .p-etapes .etapes li > span small { font-size: 11.5px; }
  /* la vitrine : pourquoi, pour qui */
  .p-pourquoi .carte-produit.tete-seule, .p-pourqui .carte-produit.tete-seule { text-align: left; }
  .p-pourquoi .carte-produit.tete-seule .tete, .p-pourqui .carte-produit.tete-seule .tete { justify-items: start; padding: 28px 22px 18px; }
  .p-pourquoi .carte-produit.tete-seule h2, .p-pourqui .carte-produit.tete-seule h2 { font-size: 38px; line-height: 1; }
  .p-pourquoi .carte-produit.tete-seule h2 em, .p-pourqui .carte-produit.tete-seule h2 em { font-style: italic; color: var(--muted); }
  .p-pourquoi .carte-produit .visuel, .p-pourqui .carte-produit .visuel { padding: 0 22px 26px; display: grid; gap: 16px; justify-items: start; }
  .duel-nuit.tel { width: 100%; padding: 16px 16px 12px; border-radius: 18px; background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.95); display: grid; gap: 6px; }
  .duel-nuit.tel .duel-rythme { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
  .duel-nuit.tel .duel-rythme b { font-family: var(--serif); font-size: 52px; line-height: 0.9; letter-spacing: -0.04em; font-weight: 400; color: var(--ink); }
  .duel-nuit.tel .duel-rythme span { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
  .duel-nuit.tel .duel-axe { padding-top: 14px; }
  .duel-nuit.tel .duel-points { position: relative; height: 40px; border-bottom: 1px solid rgba(20, 20, 22, 0.14); }
  .duel-nuit.tel .duel-points i { position: absolute; left: var(--x); bottom: 8px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9); opacity: 0; transform: translateY(-16px) scale(0.6); }
  .duel-nuit.tel.vu .duel-points i { animation: duel-tombe-tel 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(0.4s + var(--d)); }
  .duel-nuit.tel .duel-points i:nth-child(3n) { background: var(--accent); }
  @keyframes duel-tombe-tel { to { opacity: 1; transform: translateY(0) scale(1); } }
  .duel-nuit.tel .duel-jours { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
  .duel-nuit.tel .duel-jours li:nth-child(n+6) { color: var(--accent); }
  .benefices-tel, .audience-tel { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; width: 100%; }
  .benefices-tel li { padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.95); display: grid; gap: 3px; }
  .benefices-tel b { font-size: 15px; font-weight: 600; color: var(--ink); }
  .benefices-tel small, .audience-tel small { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
  .audience-tel li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.95); }
  .audience-tel i { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--accent); padding-top: 3px; }
  .audience-tel span { display: grid; gap: 3px; }
  .audience-tel b { font-family: var(--serif); font-size: 19px; line-height: 1.1; color: var(--ink); font-weight: 500; }
  .p-pourqui .secondaire { background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(255, 255, 255, 0.95); color: var(--ink); border-radius: 999px; padding: 14px 20px; min-height: 48px; font-size: 14.5px; font-weight: 600; letter-spacing: 0; text-transform: none; }
}

/* ================= le dock en pilule : Offres · Accueil · Suivi ================= */
@media (max-width: 720px) {
  html[data-theme="aube"] .dock { padding: 0 16px; bottom: max(14px, env(safe-area-inset-bottom)); }
  html[data-theme="aube"] .dock-glass {
    padding: 6px; border-radius: 999px; max-width: 420px; gap: 6px; align-items: center;
    background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(30px) saturate(125%); backdrop-filter: blur(30px) saturate(125%);
    box-shadow: 0 20px 40px -24px rgba(20, 20, 22, 0.35), inset 0 1px 0 #fff;
  }
  html[data-theme="aube"] .dock .nav-link[data-route="/recherche"] { order: 1; }
  html[data-theme="aube"] .dock .nav-link[data-route="/"], html[data-theme="aube"] .dock .nav-link[data-route="/accueil"] { order: 2; }
  html[data-theme="aube"] .dock .nav-link[data-route="/candidatures"] { order: 3; }
  html[data-theme="aube"] .dock .nav-link {
    flex: 1; flex-direction: row; gap: 8px; min-height: 46px; padding: 0 14px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink);
    background: rgba(255, 255, 255, 0.65); border: 1px solid rgba(255, 255, 255, 0.95);
  }
  html[data-theme="aube"] .dock .nav-link::before { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); -webkit-mask: none; mask: none; position: relative; }
  html[data-theme="aube"] .dock .nav-link::after { content: ""; position: absolute; left: 14px; top: 50%; width: 26px; height: 26px; translate: 0 -50%; background: #fff; -webkit-mask: var(--ico) center / 13px no-repeat; mask: var(--ico) center / 13px no-repeat; }
  html[data-theme="aube"] .dock .nav-link { position: relative; }
  html[data-theme="aube"] .dock .nav-link.active { background: var(--ink); color: #fff; border-color: var(--ink); }
  html[data-theme="aube"] .dock .nav-link.active::before { background: #fff; }
  html[data-theme="aube"] .dock .nav-link.active::after { background: var(--ink); }
  /* l'Accueil au centre : un rond, sans mot */
  /* cinq entrées (Offres, Accueil, Suivi, Réseau, Carte) : celle où l'on est garde son mot,
     les autres ne montrent que leur signe — le tout tient dans la main */
  html[data-theme="aube"] .dock .nav-link.active { justify-content: flex-start; padding-right: 18px; }
  html[data-theme="aube"] .dock .nav-link:not(.active) { flex: 0 0 42px; width: 42px; padding: 0; font-size: 0; justify-content: center; }
  html[data-theme="aube"] .dock-glass { gap: 4px; }
  html[data-theme="aube"] .dock .nav-link:not(.active)::before { display: none; }
  html[data-theme="aube"] .dock .nav-link:not(.active)::after { left: 50%; translate: -50% -50%; background: var(--ink); -webkit-mask-size: 18px; mask-size: 18px; }
  /* l'anneau de la semaine sur Suivi : au repos, il fait le tour du rond — le signe reste,
     comme sur les quatre autres ; actif, il se pose à droite du mot */
  html[data-theme="aube"] .dock .nav-link.active.a-anneau .tally { display: block; flex: none; width: 14px; height: 14px; margin-left: 4px; font-size: 0; border-radius: 50%; background: conic-gradient(#fff var(--part, 0%), rgba(255, 255, 255, 0.25) 0); }
  html[data-theme="aube"] .dock .nav-link.active.a-anneau.tenu .tally { background: #fff; }
  html[data-theme="aube"] .dock .nav-link:not(.active).a-anneau { border-color: transparent; background: conic-gradient(var(--ok) var(--part, 0%), rgba(20, 20, 22, 0.12) 0); }
  html[data-theme="aube"] .dock .nav-link:not(.active).a-anneau::before { display: block; position: absolute; inset: 2px; left: 2px; top: 2px; width: auto; height: auto; translate: none; border-radius: 50%; background: #fff; }
  html[data-theme="aube"] .dock .nav-link:not(.active).a-anneau.tenu { background: var(--ok); }
}

/* ================= barre d'onglets ================= */
@media (max-width: 720px) {
  .dock .nav-link[data-route="/tarifs"], .dock .nav-link[data-route="/communaute"] { display: none; }
  .dock .nav-link[data-route="/"], .dock .nav-link[data-route="/accueil"] { order: 1; } .dock .nav-link[data-route="/recherche"] { order: 2; } .dock .nav-link[data-route="/candidatures"] { order: 3; } .dock .nav-link[data-route="/reseau"] { order: 4; } .dock .nav-link[data-route="/carte"] { order: 5; } .dock .nav-link[data-route="/profil"] { order: 6; }
  .dock .nav-link[data-route="/profil"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='3.6'/><path d='M4.5 20c.8-4 3.6-6 7.5-6s6.7 2 7.5 6'/></svg>"); }
  .dock { bottom: max(12px, env(safe-area-inset-bottom)); padding: 0 16px; }
  .dock-glass { padding: 5px; border-radius: 24px; max-width: 420px; }
  .dock .nav-link {
    flex-direction: column; gap: 3px; padding: 8px 6px 7px;
    font-size: 9.5px; letter-spacing: 0.1em; border-radius: 19px; min-height: 50px; color: var(--muted);
  }
  .dock .nav-link::before {
    content: ""; width: 18px; height: 18px; background: currentColor;
    -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
  }
  .dock .nav-link.active { background: var(--ink); color: var(--bg); }
  .dock .nav-link[data-route="/"], .dock .nav-link[data-route="/accueil"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 11.5 12 4l9 7.5'/><path d='M5.5 10.5V20h13v-9.5'/></svg>"); }
  .dock .nav-link[data-route="/recherche"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='6.5'/><path d='m20 20-4.2-4.2'/></svg>"); }
  .dock .nav-link[data-route="/candidatures"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6h16M4 12h10M4 18h7'/><path d='m17 16 2 2 3.5-3.5'/></svg>"); }
  .dock .nav-link[data-route="/communaute"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8' r='3.2'/><circle cx='17' cy='9.5' r='2.6'/><path d='M3.5 19c.6-3.3 2.8-5 5.5-5s4.9 1.7 5.5 5'/><path d='M14.8 18.5c.4-2.3 1.6-3.6 3.4-3.6 1.4 0 2.4.8 2.8 2.6'/></svg>"); }
  .dock .nav-link[data-route="/reseau"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='6' r='2.6'/><circle cx='5' cy='17' r='2.6'/><circle cx='19' cy='17' r='2.6'/><path d='M12 8.6v4M9.8 13.4 6.6 15M14.2 13.4l3.2 1.6'/></svg>"); order: 4; }
  .dock .nav-link[data-route="/carte"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='3'/><circle cx='8.5' cy='11' r='2'/><path d='M13 9.5h5M13 13h5M5.5 16.5c.6-1.6 1.7-2.4 3-2.4s2.4.8 3 2.4'/></svg>"); order: 5; }
  .dock .nav-link .tally { display: none; }
  /* l'objectif de la semaine, en anneau autour du Suivi : réel, seulement une fois connecté */
  .dock .nav-link.a-anneau { position: relative; }
  .dock .nav-link.a-anneau::after { content: ""; position: absolute; top: 4px; left: 50%; width: 26px; height: 26px; translate: -50% 0; border-radius: 50%; padding: 2px; background: conic-gradient(var(--accent) var(--part, 0%), color-mix(in srgb, currentColor 18%, transparent) 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: --part 800ms ease; }
  .dock .nav-link.a-anneau.tenu::after { background: var(--accent); }
  .dock .nav-link.active.a-anneau::after { background: conic-gradient(var(--bg) var(--part, 0%), color-mix(in srgb, var(--bg) 25%, transparent) 0); }
}
@media (min-width: 721px) {
  .dock .nav-link[data-route="/communaute"] { display: none; }
}

@media (max-width: 380px) {
  .hero-screen h1.titre-tel { font-size: 27px; }

}
@media (prefers-reduced-motion: reduce) {
  .duel-nuit.tel .duel-points i { animation: none; opacity: 1; transform: none; }
}

/* ================= landing téléphone, deuxième version : des cartes qui ne se ressemblent pas ================= */
@media (max-width: 900px) {
  /* les cartes prennent la hauteur de leur contenu : plus d'écran vide */
  .carte-produit, .carte-produit.tete-seule { height: auto; min-height: 0; max-height: none; padding-bottom: 6px; }
  .p-postule .carte-produit .visuel { margin: 14px 0 0; }
  .carte-produit .visuel { margin: 0; }
  .carte-produit.tete-seule .tete { padding-bottom: 18px; }

  /* deux cartes de verre qui sortent du petit téléphone du hero */
  .tel-mini { overflow: visible; }
  .tel-mini .flot-mini.verre { position: absolute; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 16px; white-space: nowrap; }
  .flot-mini-a { left: -112px; top: 4px; flex-direction: column; align-items: flex-start; gap: 2px; }
  .flot-mini-a .flot-num { font-size: 9px; letter-spacing: 0.2em; color: var(--accent); font-weight: 700; }
  .flot-mini-a b { font-size: 12px; font-weight: 600; color: var(--ink); }
  .flot-mini-b { left: -118px; bottom: 6px; }
  .flot-mini-b .anneau-p { width: 34px; height: 34px; }
  .flot-mini-b .anneau-p::before { inset: 4px; }
  .flot-mini-b .anneau-p b { font-size: 10px; }
  .flot-mini-b > span { display: grid; line-height: 1.1; }
  .flot-mini-b > span b { font-size: 12px; font-weight: 600; color: var(--ink); }
  .flot-mini-b > span small { font-size: 10px; color: var(--muted); }
  @media (min-width: 480px) { .flot-mini-a { left: -140px; top: 30px; } .flot-mini-b { left: -150px; bottom: 40px; } }

  /* la carte d'encre (le CV, la fin) */
  .carte-produit.encre { background: linear-gradient(165deg, #171a22 0%, #0b0c0e 70%); color: #fff; }
  .carte-produit.encre::before { background: radial-gradient(circle, rgba(74, 151, 234, 0.55), rgba(74, 151, 234, 0) 70%); right: -60px; top: -40px; left: auto; }
  .carte-produit.encre::after { background: radial-gradient(circle, rgba(214, 232, 220, 0.25), rgba(214, 232, 220, 0) 70%); }
  .carte-produit.encre .tete h2, .carte-produit.encre .tete .une b { color: #fff; }
  .carte-produit.encre .tete .une { color: rgba(255, 255, 255, 0.66); }
  .carte-produit.encre .num, .carte-produit.encre .tag { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.18); color: #fff; }
  .carte-produit.encre .mots-vitrine span { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.16); color: #fff; }
  .carte-produit.encre .mots-vitrine span.bl { background: var(--accent); color: #fff; }
  .carte-produit.encre .page-cv { background: rgba(255, 255, 255, 0.92); }
  .carte-produit.encre .page-cv.apres { box-shadow: 0 30px 60px -20px rgba(74, 151, 234, 0.8); }
  .carte-produit.encre .fleche-cv { background: var(--accent); }
  .carte-produit.tete-seule.encre .tete { padding: 44px 22px 40px; }
  .carte-produit.tete-seule.encre h2 em { color: rgba(255, 255, 255, 0.55); font-style: italic; }
  .carte-produit.tete-seule.encre .primary { background: #fff; color: var(--ink); border-color: #fff; }

  /* la carte sur une ville floutée (le réseau) */
  .carte-produit.photo::before, .carte-produit.photo::after { inset: 0; width: auto; height: auto; left: 0; top: 0; right: 0; bottom: 0; border-radius: 0; filter: none; }
  .carte-produit.photo::before { background: var(--photo) center / cover no-repeat; opacity: 1; }
  .carte-produit.photo::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.5) 45%, rgba(255, 255, 255, 0.7) 100%); }
  .reseau-scene { display: grid; gap: 8px; }
  .reseau-offre { padding: 12px 14px; border-radius: 20px; background: rgba(255, 255, 255, 0.86); border: 1px solid #fff; box-shadow: 0 16px 34px -24px rgba(20, 30, 50, 0.4); }
  .reseau-offre .chip { font-style: normal; font-size: 11px; padding: 6px 10px; background: var(--ink); color: #fff; border: 0; }
  .reseau-fil { display: grid; grid-template-columns: repeat(3, 1fr); height: 18px; }
  .reseau-fil i { justify-self: center; width: 1px; height: 100%; background: linear-gradient(180deg, rgba(20, 20, 22, 0.35), rgba(20, 20, 22, 0.08)); }
  .reseau-gens { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .reseau-gens li { display: grid; justify-items: center; text-align: center; gap: 3px; padding: 12px 8px 10px; border-radius: 18px; background: rgba(255, 255, 255, 0.78); border: 1px solid #fff; }
  .reseau-gens .ini { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(140deg, #cfe0f7, #d6e8dc); color: var(--ink); margin-bottom: 4px; }
  .reseau-gens .ini svg { width: 20px; height: 20px; }
  .reseau-gens b { font-size: 12.5px; font-weight: 600; color: var(--ink); }
  .reseau-gens small { font-size: 10px; color: var(--muted); line-height: 1.3; }
  .reseau-gens em { margin-top: 4px; font-style: normal; font-size: 10px; font-weight: 600; color: var(--ok); display: inline-flex; align-items: center; gap: 4px; }
  .reseau-gens em .pouls { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); animation: pouls-landing 1.8s ease-out infinite; }
  .p-reseau .message-vitrine { margin-top: 2px; }

  /* le carrousel de « Pourquoi » */
  .carrousel { width: 100%; display: grid; gap: 10px; }
  .carrousel-piste { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px; margin: -2px; }
  .carrousel-piste::-webkit-scrollbar { display: none; }
  .diapo { flex: 0 0 100%; box-sizing: border-box; scroll-snap-align: start; min-height: 158px; padding: 18px 18px 16px; border-radius: 22px; background: rgba(255, 255, 255, 0.72); border: 1px solid #fff; display: grid; align-content: center; gap: 6px; text-align: left; }
  .diapo.diapo-nuit { padding: 0; background: none; border: 0; display: block; }
  .diapo .diapo-num { font-size: 10px; letter-spacing: 0.2em; color: var(--accent); font-weight: 700; }
  .diapo h3 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.05; letter-spacing: -0.015em; color: var(--ink); text-transform: none; }
  .diapo p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
  .carrousel-points { display: flex; justify-content: center; gap: 6px; }
  .carrousel-points button { width: 6px; height: 6px; min-height: 0; padding: 0; border-radius: 999px; border: 0; background: rgba(20, 20, 22, 0.2); transition: width 200ms ease, background 200ms ease; }
  .carrousel-points button[aria-selected="true"] { width: 20px; background: var(--ink); }
  .p-pourquoi .carte-produit .visuel .primary { justify-self: center; }

  /* pour qui : trois villes */
  .audience-photo { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 12px; }
  .audience-photo li { position: relative; height: 176px; border-radius: 24px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 24px 50px -30px rgba(20, 30, 50, 0.5); }
  .audience-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .audience-photo li .verre { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 12px 14px 12px 44px; border-radius: 18px; text-align: left; display: grid; gap: 2px; background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.45); }
  .audience-photo .verre i { position: absolute; left: 14px; top: 14px; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--accent); }
  .audience-photo .verre b { font-family: var(--serif); font-weight: 500; font-size: 19px; line-height: 1.1; color: var(--ink); }
  .audience-photo .verre small { font-size: 12px; line-height: 1.4; color: var(--ink-soft); }

  /* les avis */
  .avis-liste { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 10px; }
  .avis { padding: 16px 16px 14px; border-radius: 22px; text-align: left; display: grid; gap: 8px; }
  .avis-note { margin: 0; font-size: 14px; letter-spacing: 2px; color: var(--accent); }
  .avis-note span { color: rgba(20, 20, 22, 0.15); }
  .avis-texte { margin: 0; font-family: var(--serif); font-size: 17.5px; line-height: 1.3; color: var(--ink); }
  .avis-qui { margin: 0; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .avis-qui b { color: var(--ink); font-weight: 600; }
  .avis-qui em { font-style: normal; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--accent-wash); color: var(--accent); font-weight: 700; }

}

/* ================= hero téléphone, troisième version : le téléphone droit, au centre ================= */
@media (max-width: 900px) {
  .hero-tag-tel { margin: 0 0 12px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.95); font-size: 11.5px; font-weight: 600; color: var(--ink); letter-spacing: 0; text-transform: none; }
  .hero-tag-tel .pouls { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: pouls-landing 1.8s ease-out infinite; }
  .hero-ligne-tel { margin: 12px 0 0; font-size: 15.5px; line-height: 1.4; color: var(--ink-soft); max-width: 30ch; }
  .panneau-hero .hero-actions-tel { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1fr) 50px; gap: 8px; width: auto; }
  .panneau-hero .hero-actions-tel .hero-essai-tel { min-height: 50px; width: 100%; font-size: 15px; background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.6) !important; }
  .panneau-hero .hero-compte-tel { width: 50px; height: 50px; font-size: 17px; background: rgba(255, 255, 255, 0.7); color: var(--ink); border: 1px solid var(--line-strong); }
  .hero-tel-scene { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; margin-top: 26px; }
  .tel-mini { position: relative; justify-self: center; width: 192px; height: 392px; margin: 0; }
  .tel-mini .tel-cadre { position: absolute; left: 0; right: 0; top: 0; margin: 0 auto; zoom: 0.64; rotate: 0deg; transform: none; box-shadow: 0 40px 70px -30px rgba(20, 30, 50, 0.55); }
  .tel-mini .flot-mini.verre { padding: 9px 12px; }
  .flot-mini-a, .flot-mini-b { flex-direction: row; align-items: center; gap: 8px; }
  .flot-mini-a { left: -90px; top: 196px; right: auto; }
  .flot-mini-b { left: auto; right: -88px; bottom: 74px; }
  .flot-mini .coche { width: 30px; height: 30px; border-radius: 50%; background: var(--ok); position: relative; flex: none; }
  .flot-mini .coche::after { content: ""; position: absolute; left: 10px; top: 7px; width: 7px; height: 12px; border: solid #fff; border-width: 0 2px 2px 0; rotate: 45deg; }
  .flot-mini > span { display: grid; line-height: 1.1; }
  .flot-mini > span b { font-size: 12px; font-weight: 600; color: var(--ink); }
  .flot-mini > span small { font-size: 10px; color: var(--muted); }
  .hero-tel-scene .metriques-tel { margin: 22px 0 0; display: flex; justify-content: center; gap: 28px; }
  .hero-tel-scene .metriques-tel li { display: flex; align-items: baseline; gap: 7px; }
  .hero-tel-scene .metriques-tel b { font-size: 22px; line-height: 1; }
  .hero-tel-scene .metriques-tel span { margin: 0; }
  .hero-tel-scene .hero-deja { margin-top: 12px; text-align: center; }
  @media (min-width: 480px) { .tel-mini { width: 240px; height: 490px; } .tel-mini .tel-cadre { zoom: 0.8; } .flot-mini-a { left: -110px; top: 250px; } .flot-mini-b { right: -110px; bottom: 100px; } }
  @media (max-width: 360px) { .tel-mini { width: 168px; height: 344px; } .tel-mini .tel-cadre { zoom: 0.56; } .flot-mini-a { left: -84px; } .flot-mini-b { right: -80px; } }

  /* trois gestes, sous le hero */
  .p-comment { padding: 8px 16px 6px; }
  .trois-gestes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 12px 1fr 12px 1fr; align-items: stretch; gap: 0; }
  .trois-gestes li { position: relative; display: grid; justify-items: center; text-align: center; gap: 3px; padding: 16px 6px 14px; border-radius: 22px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.95); }
  .trois-gestes li:not(:last-child)::after { content: ""; position: absolute; right: -12px; top: 50%; width: 12px; height: 1px; background: rgba(20, 20, 22, 0.25); }
  .trois-gestes li:nth-child(2) { grid-column: 3; }
  .trois-gestes li:nth-child(3) { grid-column: 5; }
  .trois-gestes li:nth-child(2)::before, .trois-gestes li:nth-child(3)::before { content: ""; }
  .trois-gestes i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; margin-bottom: 4px; }
  .trois-gestes li:nth-child(2) i { background: var(--accent); }
  .trois-gestes i svg { width: 19px; height: 19px; }
  .trois-gestes b { font-size: 13px; font-weight: 600; color: var(--ink); }
  .trois-gestes small { font-size: 10.5px; color: var(--muted); }
}

/* ================= hero : les mots à gauche, le téléphone droit à droite ================= */
@media (max-width: 900px) {
  .hero-scene-tel { display: grid; grid-template-columns: minmax(0, 1fr) 138px; column-gap: 8px; align-items: start; }
  .hero-mots-tel { min-width: 0; }
  .hero-mots-tel .titre-tel { font-size: 35px; line-height: 1.02; }
  .hero-tel-scene { display: contents; }
  .hero-scene-tel .tel-mini { width: 138px; height: 290px; margin: 6px -18px 0 0; justify-self: end; }
  .hero-scene-tel .tel-mini .tel-cadre { zoom: 0.5; height: 580px; }
  .hero-scene-tel .tel-mini .tel-ecran { padding: 58px 14px 16px; gap: 8px; }
  .hero-scene-tel .tel-mini .tel-une { font-size: 19px; }
  .hero-scene-tel .tel-mini .flux-offres { gap: 6px; }
  .hero-scene-tel .tel-mini .tel-bouton { margin-top: auto; }
  .hero-scene-tel .flot-mini-a { left: -54px; top: 132px; }
  .hero-scene-tel .flot-mini-b { right: auto; left: -44px; bottom: -30px; }
  .hero-scene-tel { margin-bottom: 40px; }
  .hero-scene-tel .flot-mini-b .anneau-p { width: 28px; height: 28px; }
  .hero-scene-tel .flot-mini-b .anneau-p b { font-size: 9px; }
  .panneau-hero > .hero-actions-tel { margin-top: 16px; }
  .panneau-hero > .metriques-tel { margin: 18px 0 0; display: flex; gap: 26px; text-align: left; }
  .panneau-hero > .metriques-tel li { display: flex; align-items: baseline; gap: 7px; }
  .panneau-hero > .metriques-tel b { font-size: 22px; line-height: 1; }
  .panneau-hero > .metriques-tel span { margin: 0; }
  .panneau-hero > .hero-deja { margin-top: 12px; }
  @media (min-width: 480px) { .hero-scene-tel { grid-template-columns: minmax(0, 1fr) 210px; column-gap: 24px; } .hero-scene-tel .tel-mini { width: 210px; height: 380px; margin-right: 0; } .hero-scene-tel .tel-mini .tel-cadre { zoom: 0.7; height: 540px; } .hero-mots-tel .titre-tel { font-size: 42px; } .hero-scene-tel .flot-mini-a { left: -40px; top: 190px; } .hero-scene-tel .flot-mini-b { left: -60px; bottom: -30px; } }
  @media (max-width: 360px) { .hero-scene-tel { grid-template-columns: minmax(0, 1fr) 120px; } .hero-mots-tel .titre-tel { font-size: 34px; } .hero-scene-tel .tel-mini { width: 120px; height: 264px; } .hero-scene-tel .tel-mini .tel-cadre { zoom: 0.44; } .hero-scene-tel .flot-mini-a { left: -70px; top: 110px; } }

  /* pour qui : des cartes plus basses */
  .audience-photo li { height: 132px; }
  .audience-photo li .verre { left: 8px; right: 8px; bottom: 8px; padding: 9px 12px 9px 40px; border-radius: 16px; }
  .audience-photo .verre i { left: 12px; top: 11px; }
  .audience-photo .verre b { font-size: 17px; }
  .audience-photo .verre small { font-size: 11.5px; }

}

/* ================= avis, façon Trustpilot : étoiles vertes, la note, le lien ================= */
@media (max-width: 900px) {
  .tp-etoile { display: inline-block; width: 16px; height: 16px; margin-right: 2px; background: rgba(20, 20, 22, 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 3.6l2.5 5.4 5.9.7-4.4 4 1.2 5.8L12 16.6l-5.2 2.9 1.2-5.8-4.4-4 5.9-.7z'/%3E%3C/svg%3E") center / 12px no-repeat; vertical-align: -3px; }
  .tp-etoile.pleine { background-color: #00b67a; }
  .tp-etoile.demie { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 3.6l2.5 5.4 5.9.7-4.4 4 1.2 5.8L12 16.6l-5.2 2.9 1.2-5.8-4.4-4 5.9-.7z'/%3E%3C/svg%3E"), linear-gradient(90deg, #00b67a 50%, rgba(20, 20, 22, 0.14) 50%); background-size: 12px, 100%; }
  .tp-tag .tp-etoile { width: 14px; height: 14px; background-color: #00b67a; background-size: 10px; margin: 0; }
  .tp-note { margin: 14px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
  .tp-note b { color: var(--ink); font-weight: 600; }
  .avis .avis-note { letter-spacing: 0; }
  .tp-lien { justify-self: start; font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; padding: 10px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.95); }
  .suivi-avis .tp-lien { justify-self: start; padding: 0; background: none; border: 0; color: var(--muted); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
}

/* ================= le diaporama des avis ================= */
@media (max-width: 900px) {
  .carrousel-avis { width: 100%; }
  .carrousel-avis .avis-liste { display: flex; gap: 10px; list-style: none; margin: -2px; padding: 2px; }
  .carrousel-avis .avis.diapo { flex: 0 0 100%; min-height: 0; align-content: start; gap: 8px; padding: 18px 18px 16px; }
  .carrousel-avis .avis-texte { font-size: 18px; }
  .p-avis .tp-lien { justify-self: center; margin-top: 4px; }
  @media (min-width: 420px) { .hero-scene-tel .tel-mini { margin-right: 0; } }
}

/* ================= la note en haut, le filigrane, le pied d'encre ================= */
@media (max-width: 900px) {
  .note-hero { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0; text-decoration: none; font-size: 12.5px; color: var(--muted); }
  .note-hero b { color: var(--ink); font-weight: 600; }
  .note-hero .tp-etoile { width: 14px; height: 14px; background-size: 10px; margin-right: 1px; }
  .hero-mots-tel .titre-tel { margin-top: 12px; }
  .tel-mini .filigrane { position: absolute; z-index: 0; left: 50%; top: 42%; translate: -50% -50%; rotate: -90deg; font-family: var(--serif); font-size: 150px; letter-spacing: 0.08em; color: rgba(20, 20, 22, 0.045); pointer-events: none; white-space: nowrap; }
  .tel-mini .tel-cadre { z-index: 1; }
}

/* ================= hero : à la hauteur de son contenu, pas de vide sous les chiffres ================= */
@media (max-width: 900px) {
  html.vitrine .hero-screen, .hero-screen { min-height: 0; }
  .hero-core { flex: none; padding-bottom: 6px; }
  .hero-mots-tel .titre-tel { margin-top: 10px; }
  .hero-mots-tel .note-hero { margin-top: 14px; }
  .hero-scene-tel { margin-bottom: 34px; }
  .panneau-hero > .hero-actions-tel { margin-top: 12px; }
  .panneau-hero > .metriques-tel { margin-top: 14px; }
  .panneau-hero > .hero-deja { margin-top: 8px; }
  .p-comment { padding-top: 14px; }
}

/* ================= landing téléphone v4 : du mouvement, une structure par section ================= */
@media (max-width: 900px) {
  /* les éléments d'une section arrivent l'un après l'autre */
  .tel-seul [data-reveal]:nth-child(2) { transition-delay: 90ms; }
  .tel-seul [data-reveal]:nth-child(3) { transition-delay: 180ms; }
  .tel-seul [data-reveal]:nth-child(4) { transition-delay: 270ms; }
  .trois-gestes li[data-reveal] { translate: 0 22px; }
  .audience-photo li[data-reveal] { translate: 0 28px; scale: 0.98; }
  [data-band].in .audience-photo li[data-reveal] { scale: 1; }
  .reseau-gens li[data-reveal] { translate: 0 18px; }

  /* les cartes de verre du hero flottent doucement */
  @keyframes flotte { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
  .tel-mini .flot-mini.verre { animation: flotte 5s ease-in-out infinite; }
  .tel-mini .flot-mini-b.verre { animation-delay: -2.4s; }

  /* les chiffres du hero vivent maintenant dans la déclaration : une seule fois */
  .panneau-hero > .metriques-tel { display: none; }
  /* déjà entré : un seul bouton, pas de « déjà un compte » */
  html.deja-entre .hero-compte-tel, html.deja-entre .panneau-hero > .hero-deja { display: none; }
  html.deja-entre .panneau-hero > .hero-actions-tel { grid-template-columns: minmax(0, 1fr); }

  /* la déclaration : une phrase en grand, les chiffres se comptent, puis le ruban */
  .p-declaration { padding: 26px 22px 6px; text-align: left; }
  .declaration { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 27px; line-height: 1.18; letter-spacing: -0.015em; color: var(--muted); }
  .declaration b { font-weight: 500; color: var(--ink); }
  .declaration b span { font-variant-numeric: tabular-nums; }
  .ruban-titre { margin: 22px 0 8px; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
  .ruban { overflow: hidden; margin: 0 -22px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
  .ruban-piste { display: flex; gap: 8px; width: max-content; padding: 2px 0; animation: ruban-defile calc(var(--n, 10) * 2.6s) linear infinite; }
  .ruban:hover .ruban-piste { animation-play-state: paused; }
  .ruban-piste span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.95); font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
  .ruban-piste img { width: 22px; height: 22px; border-radius: 50%; background: #fff; object-fit: contain; padding: 3px; box-sizing: border-box; }
  @keyframes ruban-defile { to { translate: -50% 0; } }

  /* suivi : la candidature en tête, puis les cinq étapes qui défilent */
  .suivi-une { padding: 12px 14px; border-radius: 20px; background: rgba(255, 255, 255, 0.86); border: 1px solid #fff; box-shadow: 0 16px 34px -24px rgba(20, 30, 50, 0.4); }
  .carrousel-etapes .etapes-defile { list-style: none; margin: -2px; padding: 2px; display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .carrousel-etapes .etapes-defile::-webkit-scrollbar { display: none; }
  .etapes-defile li { flex: 0 0 62%; scroll-snap-align: start; box-sizing: border-box; min-height: 128px; padding: 14px 14px 12px; border-radius: 20px; background: rgba(255, 255, 255, 0.72); border: 1px solid #fff; display: grid; align-content: start; gap: 3px; position: relative; }
  .etapes-defile li.encours { background: var(--ink); color: #fff; border-color: var(--ink); }
  .etapes-defile li.att { opacity: 0.7; }
  .etapes-defile .et-num { font-family: var(--serif); font-size: 26px; line-height: 1; color: var(--accent); margin-bottom: 6px; }
  .etapes-defile li.encours .et-num { color: #fff; }
  .etapes-defile li.ok .et-num::after { content: ""; display: inline-block; width: 7px; height: 12px; margin-left: 8px; border: solid var(--ok); border-width: 0 2px 2px 0; rotate: 45deg; vertical-align: 2px; }
  .etapes-defile b { font-size: 14px; font-weight: 600; }
  .etapes-defile small { font-size: 11.5px; color: var(--muted); }
  .etapes-defile li.encours small { color: rgba(255, 255, 255, 0.7); }
  .etapes-defile em { position: absolute; right: 12px; top: 14px; font-style: normal; font-size: 10.5px; color: var(--muted); }
  .etapes-defile li.encours em { color: #fff; }
  .etapes-defile li.encours em::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); margin-right: 5px; animation: pouls-landing 1.8s ease-out infinite; }
  .carrousel-etapes .carrousel-points { margin-top: 2px; }

  /* la fin : une ville plein cadre qui respire lentement, le texte en blanc */
  .p-fin-photo { position: relative; margin: 10px 16px 0; border-radius: 30px; overflow: hidden; min-height: 460px; display: grid; align-items: end; isolation: isolate; }
  .p-fin-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: respire 18s ease-in-out infinite alternate; }
  @keyframes respire { from { scale: 1; } to { scale: 1.12; } }
  .fin-voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 12, 16, 0.05) 0%, rgba(10, 12, 16, 0.35) 45%, rgba(10, 12, 16, 0.82) 100%); }
  .fin-mots { position: relative; padding: 40px 26px 30px; display: grid; justify-items: start; gap: 12px; color: #fff; }
  .fin-mots .eyebrow { margin: 0; clip-path: none; }
  .fin-mots .tag { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 10.5px; letter-spacing: 0.16em; backdrop-filter: blur(8px); }
  .fin-mots h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 42px; line-height: 1; letter-spacing: -0.02em; color: #fff; text-transform: none; }
  .fin-mots h2 em { font-style: italic; color: rgba(255, 255, 255, 0.7); }
  .fin-mots .primary { margin-top: 6px; width: auto; min-width: 200px; background: #fff; color: var(--ink); border-color: #fff; }
  .fin-sans { margin: 0; font-size: 12.5px; color: rgba(255, 255, 255, 0.7); }
  @media (prefers-reduced-motion: reduce) { .ruban-piste, .p-fin-photo img, .tel-mini .flot-mini.verre { animation: none; } }
}

/* ================= landing téléphone v5 : de l'air, comme le site du yacht ================= */
@media (max-width: 900px) {
  /* le hero respire : grand titre, une note, un bouton — et le téléphone à droite, net */
  .hero-mots-tel .hero-tag-tel { margin-bottom: 14px; }
  .hero-mots-tel .titre-tel { font-size: 36px; line-height: 1.04; }
  .hero-mots-tel .note-hero { margin-top: 14px; }
  .hero-scene-tel { column-gap: 12px; margin-bottom: 30px; }
  /* le téléphone : mis à l'échelle par transform (identique sur Safari iOS et Chrome), pas par zoom */
  .hero-scene-tel .tel-mini { width: 142px; height: 300px; margin: 4px -14px 0 0; }
  .hero-scene-tel .tel-mini .tel-cadre { zoom: 1; width: 284px; height: 600px; right: 0; top: 0; transform: scale(0.5); transform-origin: top right; rotate: 0deg; padding: 12px; border-radius: 48px; left: auto; right: 0; margin: 0; translate: 0 0; }
  .hero-scene-tel .tel-mini .tel-ecran { padding: 56px 16px 16px; gap: 10px; }
  .hero-scene-tel .tel-mini .tel-date { font-size: 10px; }
  .hero-scene-tel .tel-mini .tel-une { font-size: 22px; max-width: none; }
  .hero-scene-tel .tel-mini .flux-offres { gap: 8px; }
  /* les deux cartes de verre chevauchent le bord gauche du téléphone, jamais le titre */
  .hero-scene-tel .flot-mini-a { left: -58px; top: 216px; }
  .hero-scene-tel .flot-mini-b { left: -58px; bottom: -16px; }
  .hero-scene-tel .flot-mini { padding: 6px 10px 6px 6px; gap: 7px; border-radius: 14px; }
  .hero-scene-tel .flot-mini b { font-size: 11px; }
  .hero-scene-tel .flot-mini small { font-size: 9.5px; }
  .hero-scene-tel .flot-mini .coche { width: 26px; height: 26px; }
  .hero-scene-tel .flot-mini-b .anneau-p { width: 26px; height: 26px; }
  .hero-scene-tel .tel-mini .tel-bouton { display: none; }
  .panneau-hero > .hero-actions-tel { margin-top: 6px; }
  .panneau-hero > .hero-deja { margin-top: 14px; }
  .hero-actions-tel .hero-essai-tel b { font-weight: 600; }

  /* entre les sections : du vide. Les cartes ont de la marge, le texte a de la place. */
  .produit { padding: 22px 16px; }
  .trois-gestes { margin-top: 26px; }
  .p-declaration { padding: 40px 24px 10px; }
  .declaration { font-size: clamp(24px, 8.1vw, 40px); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; }
  .declaration em { font-style: italic; color: var(--ink); }
  .ruban-titre { margin-top: 30px; }
  .carte-produit { padding-top: 30px; padding-bottom: 30px; }
  .carte-produit .tete { margin-bottom: 22px; }
  .carte-produit .tete h2 { margin-top: 14px; margin-bottom: 8px; }
  .p-pourquoi, .p-pourqui, .p-avis { padding-top: 40px; padding-bottom: 40px; }
  .p-fin-photo { margin-top: 24px; min-height: 500px; }
  .objections { padding-top: 40px; }
  @media (max-width: 360px) { .hero-scene-tel .tel-mini { width: 124px; height: 264px; } .hero-scene-tel .tel-mini .tel-cadre { transform: scale(0.44); } .hero-mots-tel .titre-tel { font-size: 32px; } }
  @media (min-width: 480px) { .hero-scene-tel .tel-mini { width: 200px; height: 420px; margin-right: 0; } .hero-scene-tel .tel-mini .tel-cadre { transform: scale(0.7); } .hero-scene-tel .flot-mini-a { left: -80px; top: 300px; } .hero-scene-tel .flot-mini-b { left: -80px; bottom: -8px; } }
}

/* ================= carte 1 : la nuit de MAXX ================= */
@media (max-width: 900px) {
  .nuit { position: relative; border-radius: 26px; padding: 18px 18px 16px; background: linear-gradient(160deg, #ffffff, #eef3fb 55%, #e6ecf7); color: var(--ink); display: grid; gap: 14px; border: 1px solid #fff; box-shadow: 0 30px 60px -34px rgba(20, 30, 50, 0.4); overflow: hidden; }
  .nuit::before { content: ""; position: absolute; right: -50px; top: -70px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 196, 120, 0.45), rgba(120, 160, 255, 0.18) 55%, transparent 72%); pointer-events: none; }
  .nuit-tete { display: flex; justify-content: space-between; align-items: center; }
  .nuit-heure { font-family: var(--serif); font-size: 30px; line-height: 1; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
  .nuit-etat { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
  .nuit-etat .pouls { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(48, 200, 120, 0.5); animation: pouls-landing 1.8s ease-out infinite; }
  .nuit .cand-une.nuit-offre { padding: 12px 14px; border-radius: 18px; background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: 0 10px 24px -18px rgba(20, 30, 50, 0.35); }
  .nuit .nuit-offre small { color: var(--muted); }
  .nuit-pas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .nuit-pas li { position: relative; display: flex; align-items: center; gap: 7px; padding: 9px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.55); border: 1px solid #fff; font-size: 11px; font-weight: 600; color: var(--muted); transition: background 400ms, color 400ms; white-space: nowrap; overflow: hidden; }
  .nuit-pas li i { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line-strong); position: relative; transition: background 300ms, border-color 300ms; }
  .nuit-pas li.encours { color: var(--ink); background: #fff; }
  .nuit-pas li.encours i { border-color: var(--ink); animation: nuit-tourne 900ms linear infinite; border-top-color: transparent; }
  .nuit-pas li.fait { color: var(--ink); }
  .nuit-pas li.fait i { background: var(--ok); border-color: var(--ok); }
  .nuit-pas li.fait i::after { content: ""; position: absolute; left: 4px; top: 1.5px; width: 3px; height: 7px; border: solid #fff; border-width: 0 1.5px 1.5px 0; rotate: 45deg; }
  @keyframes nuit-tourne { to { rotate: 360deg; } }
  .nuit.envoyee .nuit-offre { outline: 2px solid var(--ok); outline-offset: -2px; }
  .nuit-compte { margin: 0; display: flex; align-items: baseline; gap: 8px; }
  .nuit-compte b { font-family: var(--serif); font-size: 34px; line-height: 1; font-weight: 500; font-variant-numeric: tabular-nums; }
  .nuit-compte span { font-size: 12.5px; color: var(--muted); }
  .nuit-compte em { font-style: normal; color: var(--ink); font-weight: 600; }
  .nuit-rythme { margin-top: 14px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
  .nuit-rythme > span { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 600; white-space: nowrap; }
  .p-postule .nuit-rythme .rythme-vitrine { order: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .nuit .nuit-offre .lettre { background: var(--bg, #f2f4f8); border: 1px solid var(--line); }
  .nuit .nuit-offre .lettre em { color: var(--ink); }
  .nuit-rythme .rythme-vitrine b { padding: 8px 0; font-size: 14px; border-radius: 999px; }
  @media (prefers-reduced-motion: reduce) { .nuit-pas li.encours i, .nuit-etat .pouls { animation: none; } }
}

/* ---- la progression, sur téléphone : compacte, au-dessus des bénéfices ---- */
@media (max-width: 900px) {
  .prog-tel { margin-bottom: 16px; padding: 14px; border-radius: 24px; background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.9); gap: 14px; }
  .prog-tel .prog-haut { grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
  .prog-tel .prog-serie, .prog-tel .prog-objectif { padding: 10px 12px; gap: 9px; border-radius: 16px; }
  .prog-tel .flamme { width: 32px; height: 32px; border-radius: 11px; }
  .prog-tel .flamme svg { width: 18px; height: 18px; }
  .prog-tel .prog-serie b, .prog-tel .prog-objectif b { font-size: 19px; }
  .prog-tel .prog-serie small, .prog-tel .prog-objectif small { font-size: 9.5px; }
  .prog-tel .prog-objectif { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .prog-tel .prog-jours li { max-height: 38px; font-size: 11px; }
  .prog-tel .prog-semaines { height: 136px; gap: 8px; margin-top: 4px; }
  .prog-tel .prog-col em { font-size: 9.5px; padding: 3px 7px; }
}

/* Carte ville — petite, en tête des résultats */
#dire .carte-ville { position: relative; margin: 0 0 8px; width: min(220px, 42vw); border-radius: 12px; overflow: hidden; border: 1px solid var(--line, rgba(20, 20, 22, 0.08)); background: #e8eef3; aspect-ratio: 2 / 1; max-height: 110px; }
#dire .carte-ville iframe { display: block; width: 100%; height: 100%; border: 0; }
#dire .pins-ville { position: absolute; inset: 0; pointer-events: none; }
#dire .pin-employeur { pointer-events: auto; position: absolute; transform: translate(-50%, -100%); border: 0; background: none; padding: 0; cursor: pointer; display: grid; justify-items: center; }
#dire .pin-employeur i { width: 7px; height: 7px; border-radius: 50%; background: #1d4ed8; box-shadow: 0 0 0 2px #fff; }
#dire .pin-employeur span { display: none; }
#dire .carte-legende { display: none; }
#dire .recit-exemples { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; font-size: 14px; line-height: 1.45; }
.carte-credits .bc-lien { display: flex; gap: 8px; margin-top: 8px; }
.carte-credits .bc-lien input { flex: 1; min-width: 0; }
#dire .maisons-ville { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 12px; margin: 0 0 8px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
#dire .maison-carte { flex: 0 0 min(240px, 78vw); scroll-snap-align: start; text-align: left; padding: 14px; border-radius: 20px; border: 1px solid var(--line, rgba(20, 20, 22, 0.08)); background: var(--paper, #fff); color: inherit; display: grid; grid-template-columns: 40px 1fr; grid-template-areas: "logo nom" "logo titre" "logo n"; column-gap: 10px; row-gap: 2px; cursor: pointer; }
#dire .maison-carte .lettre { grid-area: logo; width: 40px; height: 40px; }
#dire .maison-carte b { grid-area: nom; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dire .maison-carte span { grid-area: titre; font-size: 12.5px; color: var(--muted, #6b6b70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dire .maison-carte small { grid-area: n; font-size: 11px; color: var(--muted, #6b6b70); }
#dire .recit { display: grid; gap: 8px; margin: 4px 0 16px; }
#dire .recit p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
#dire .offres-dire .src { display: inline-block; margin-left: 7px; padding: 1px 6px; border-radius: 999px; font-style: normal; font-weight: 600; font-size: 10px; letter-spacing: 0.04em; vertical-align: 2px; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--muted, #6b6b70); }