/* La charte de l'app (mobile/src/ui/theme.ts), posée sur l'espace connecté du site :
   du blanc, du gris, du noir ; aucune ombre, aucun dégradé, aucun verre. Le noir est la
   seule couleur d'action ; vert, ambre, rouge ne servent qu'aux statuts. Les grands
   titres gardent la Cormorant, comme l'app ; tout le reste parle en Outfit.
   La vitrine (html.vitrine) garde son propre habit. L'onboarding (#maxx-depart,
   #maxx-parcours) garde ses écrans, mais passe au blanc de l'app. */

html:is(.dans-app, .app-accueil):not(.vitrine) body > :not(#maxx-depart):not(#maxx-parcours),
#maxx-depart, #maxx-parcours {
  --bg: var(--app-fond);
  --paper: var(--app-fond);
  --raise: var(--app-releve);
  --line: var(--app-ligne);
  --line-strong: var(--app-ligne-forte);
  --ink: var(--app-encre);
  --ink-soft: var(--app-encre-douce);
  --muted: var(--app-gris);
  --accent: var(--app-encre);
  --accent-hover: var(--app-noir);
  --accent-wash: var(--app-releve);
  --ok: var(--app-ok);
  --warn: var(--app-attention);
  --warn-wash: var(--app-attention-lavis);
  --bad: var(--app-mauvais);
  --bad-wash: var(--app-mauvais-lavis);
  --gold: var(--app-encre);
  --metal: var(--app-metal);
  --cream: var(--app-creme);
  --night: var(--app-encre);
  --night-paper: var(--app-nuit-papier);
  --titre-em: var(--app-encre);
  --cta-encre: var(--app-fond);
  --shadow: var(--app-rien);
  --hero-lueur: var(--app-rien);
  --glacier: var(--app-fond);
  --verre: var(--app-fond);
  --verre2: var(--app-fond);
  --verre-bord: var(--app-ligne);
  --verre-ombre: var(--app-rien);
  --radius: var(--app-rayon);
  --radius-lg: var(--app-rayon-grand);
}

/* Le fond : blanc, sans grain. */
html:is(.dans-app, .app-accueil):not(.vitrine),
html:is(.dans-app, .app-accueil):not(.vitrine) body { background: #ffffff; }
html:is(.dans-app, .app-accueil):not(.vitrine) body::before { background: #ffffff !important; }
html:is(.dans-app, .app-accueil):not(.vitrine) body::after { display: none !important; }

/* Aucune ombre, aucun verre : les surfaces se distinguent par leur gris. */
html:is(.dans-app, .app-accueil):not(.vitrine) :is(.shell, #lateral, .dire-barre, .lat-switch, #maxx-chat),
html:is(.dans-app, .app-accueil):not(.vitrine) :is(.shell, #lateral, .dire-barre, #maxx-chat) * {
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  text-shadow: none !important;
}
/* Le grand champ des offres (.om-q) est le titre de la page, et la barre du bas a déjà son
   contour : pas de cadre noir quand ils ont le focus. */
html:is(.dans-app, .app-accueil):not(.vitrine) :is(.shell, #lateral, .dire-barre) :focus-visible:not(.om-q, .dire-barre input) {
  outline: 2px solid #0d0d0d;
  outline-offset: 2px;
}

/* Les boutons : une pilule noire, plate. */
html:is(.dans-app, .app-accueil):not(.vitrine) .shell :is(button.primary, a.primary, .primary) {
  background: #0d0d0d;
  border-color: #0d0d0d;
  color: #ffffff;
}
html:is(.dans-app, .app-accueil):not(.vitrine) .shell :is(button.primary, a.primary, .primary):hover {
  background: #000000;
  transform: none;
}

/* Les puces : grises au repos, noires quand elles sont choisies (Chip.tsx). */
html:is(.dans-app, .app-accueil):not(.vitrine) .shell .chip:not(.noir):not(.on) {
  background: #f4f4f5;
  border-color: transparent;
  color: #3f3f46;
}
html:is(.dans-app, .app-accueil):not(.vitrine) .shell :is(a, button).chip:not(.noir):not(.on):hover { color: #0d0d0d; background: #ececee; }

/* Les ronds d'action et les tuiles posés sur la page blanche : gris, comme les tuiles
   de l'app sur fond blanc ; le rond principal reste noir. */
html:is(.dans-app, .app-accueil):not(.vitrine) .shell .actions-rapides .action:not(.principale) i,
html:is(.dans-app, .app-accueil):not(.vitrine) .shell .dash-nav .tuile:not(.on) {
  background: #f4f4f5;
  border-color: transparent;
}

/* La scène du CV : la feuille blanche posée sur du gris clair, comme l'atelier de l'app. */
html:is(.dans-app, .app-accueil):not(.vitrine) #view-cv :is(.cv-scene, .cv-mini-scene) { background: #f4f4f5; }

/* La lueur du parcours est peinte avec l'accent : en noir, ce serait une tache grise. */
#maxx-parcours .aurore { display: none; }

/* La carte de visite : dans l'app, la page reste blanche, seul le visuel de la carte porte son fond. */
html:is(.dans-app, .app-accueil):not(.vitrine) #view-carte .bc-fond { display: none; }
html:is(.dans-app, .app-accueil):not(.vitrine) .shell .bcard { background: #fff; border: 1px solid rgba(13, 13, 13, 0.14); }
html:is(.dans-app, .app-accueil):not(.vitrine) .shell .bcard::before { display: none; }
html:is(.dans-app, .app-accueil):not(.vitrine) .shell .bcard[data-fond="encre"] { background: #0c0c0c; border-color: rgba(244, 244, 242, 0.22); }
html:is(.dans-app, .app-accueil):not(.vitrine) .shell .bcard[data-fond="nuit"] { background: #101218; border-color: rgba(244, 244, 242, 0.22); }
html:is(.dans-app, .app-accueil):not(.vitrine) .shell .bcard:not([data-fond="encre"]):not([data-fond="nuit"]) :is(.bc-mono, .bc-joindre a:not(.bc-cv), .bc-joindre > span) { background: #f4f4f5; border-color: transparent; }

/* La colonne : celle de l'app (ui/Cote.tsx). Un panneau gris du haut en bas, le nœud et
   MAXX, la recherche en pilule, l'accueil en tuile large, dix tuiles sur deux colonnes,
   l'accès en bas. Repliée : un rail d'icônes de 72 px. */
html:is(.dans-app, .app-accueil):not(.vitrine) #lateral {
  background: var(--app-releve);
  border: 0;
  border-right: 0.5px solid var(--app-ligne-forte);
  border-radius: 0;
  padding: 16px 12px 12px;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto auto 1fr auto;
  color: var(--app-encre);
}
html:is(.dans-app, .app-accueil):not(.vitrine) #lateral .cote-tete { display: flex; align-items: center; gap: 6px; padding: 0 0 2px 6px; }
html:is(.dans-app, .app-accueil):not(.vitrine) #lateral .cote-marque { flex: 1; display: flex; align-items: center; gap: 10px; padding: 0; color: var(--app-encre); text-decoration: none; }
html:is(.dans-app, .app-accueil):not(.vitrine) #lateral .cote-marque .noeud { width: 28px; height: 26px; }
html:is(.dans-app, .app-accueil):not(.vitrine) #lateral .cote-marque span { font: 500 11.5px/14px var(--sans); letter-spacing: 3px; text-transform: uppercase; }
html:is(.dans-app, .app-accueil):not(.vitrine) #lateral .cote-bascule { flex: none; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: 16px; background: var(--app-fond); color: var(--app-encre); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
html:is(.dans-app, .app-accueil):not(.vitrine) #lateral .cote-bascule svg { width: 16px; height: 16px; stroke-width: 2; }
html:is(.dans-app, .app-accueil):not(.vitrine) #lateral .cote-bascule:hover { border-color: var(--app-ligne-forte); }
html:is(.dans-app, .app-accueil):not(.vitrine) #lateral .lat-cherche { height: 38px; padding: 0 14px; gap: 9px; background: var(--app-fond); border: 1px solid transparent; color: var(--app-gris); }
html:is(.dans-app, .app-accueil):not(.vitrine) #lateral .lat-cherche svg { width: 16px; height: 16px; stroke-width: 2; }
html:is(.dans-app, .app-accueil):not(.vitrine) #lateral .lat-cherche input { font: 400 13px/16px var(--sans); color: var(--app-encre); }
html:is(.dans-app, .app-accueil):not(.vitrine) #lateral .lat-cherche input::placeholder { color: var(--app-gris); }
html:is(.dans-app, .app-accueil):not(.vitrine) #lateral .lat-cherche:hover, html:is(.dans-app, .app-accueil):not(.vitrine) #lateral .lat-cherche:focus-within { border-color: var(--app-ligne-forte); }
html:is(.dans-app, .app-accueil):not(.vitrine) #lateral .tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
html:is(.dans-app, .app-accueil):not(.vitrine) #lateral .tuile {
  position: relative; display: grid; justify-items: center; gap: 3px; padding: 9px 4px 8px;
  border: 1px solid transparent; border-radius: 16px; background: var(--app-fond); color: var(--app-encre);
  font: 500 11.5px/14px var(--sans); letter-spacing: 0; text-transform: none; text-decoration: none; cursor: pointer;
}
html:is(.dans-app, .app-accueil):not(.vitrine) #lateral .tuile:hover { border-color: var(--app-ligne-forte); }
html:is(.dans-app, .app-accueil):not(.vitrine) #lateral .tuile.on, html:is(.dans-app, .app-accueil):not(.vitrine) #lateral .tuile.on:hover { background: var(--app-encre); border-color: var(--app-encre); color: #ffffff; }
html:is(.dans-app, .app-accueil):not(.vitrine) #lateral .tuile i { position: relative; width: 24px; height: 24px; display: grid; place-items: center; font-style: normal; }
html:is(.dans-app, .app-accueil):not(.vitrine) #lateral .tuile svg { width: 18px; height: 18px; }
html:is(.dans-app, .app-accueil):not(.vitrine) #lateral .tuile span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html:is(.dans-app, .app-accueil):not(.vitrine) #lateral .tuile small { margin-top: -2px; font: 400 10.5px/12px var(--sans); color: var(--app-gris); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html:is(.dans-app, .app-accueil):not(.vitrine) #lateral .tuile.on small { color: rgba(255, 255, 255, 0.7); }
html:is(.dans-app, .app-accueil):not(.vitrine) #lateral .cote-point { position: absolute; right: 1px; bottom: 3px; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--app-fond); box-sizing: border-box; }
html:is(.dans-app, .app-accueil):not(.vitrine) #lateral .tuile.on .cote-point { border-color: var(--app-encre); }
html:is(.dans-app, .app-accueil):not(.vitrine) #lateral .cote-badge { position: absolute; top: 5px; right: 6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--app-encre); color: #ffffff; font: 600 10.5px/19px var(--sans); font-style: normal; text-align: center; box-sizing: border-box; }
html:is(.dans-app, .app-accueil):not(.vitrine) #lateral .tuile.on .cote-badge { background: #ffffff; color: var(--app-encre); }
html:is(.dans-app, .app-accueil):not(.vitrine) #lateral .tuile.large { grid-auto-flow: column; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 12px; margin-bottom: -6px; font-size: 12.5px; }
html:is(.dans-app, .app-accueil):not(.vitrine) #lateral .tuile.large i { width: 18px; height: 18px; }
html:is(.dans-app, .app-accueil):not(.vitrine) #lateral .tuile.large svg { width: 18px; height: 18px; }
html:is(.dans-app, .app-accueil):not(.vitrine) #lateral .cote-compte { display: flex; align-items: center; gap: 8px; padding: 12px; border: 1px solid transparent; border-radius: 18px; background: var(--app-fond); color: var(--app-encre); text-decoration: none; }
html:is(.dans-app, .app-accueil):not(.vitrine) #lateral a.cote-compte:hover { border-color: var(--app-ligne-forte); }
html:is(.dans-app, .app-accueil):not(.vitrine) #lateral .cote-compte-mots { flex: 1; min-width: 0; display: grid; gap: 2px; justify-items: start; }
html:is(.dans-app, .app-accueil):not(.vitrine) #lateral .cote-compte-mots small { font: 400 11.5px/14px var(--sans); color: var(--app-gris); letter-spacing: 0; text-transform: none; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html:is(.dans-app, .app-accueil):not(.vitrine) #lateral .cote-compte-mots b { font: 500 20px/24px var(--serif); color: var(--app-encre); }
html:is(.dans-app, .app-accueil):not(.vitrine) #lateral .cote-puce { margin-top: 8px; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 0; border-radius: 15px; background: var(--app-encre); color: #ffffff; font: 500 12px/14px var(--sans); font-style: normal; letter-spacing: 0; text-transform: none; cursor: pointer; }
html:is(.dans-app, .app-accueil):not(.vitrine) #lateral .cote-chevron { display: inline-flex; color: var(--app-gris); }
html:is(.dans-app, .app-accueil):not(.vitrine) #lateral .cote-chevron svg { width: 14px; height: 14px; }
html:is(.dans-app, .app-accueil):not(.vitrine) .lat-switch { background: var(--app-fond); border: 1px solid var(--app-ligne-forte); }

/* Les résultats d'une recherche : les cartes de l'app (ui/CarteOffre.tsx). Carte blanche
   au trait fin, logo rond, le poste d'abord, « employeur » en gris dessous. Toute la
   carte ouvre la fiche, où l'on postule et garde — comme dans l'app. */
html.dans-app:not(.vitrine) #dire .bulle.resultat > .plus { margin-top: 10px; }

/* « Pour vous » : la carte de l'app (app/pour-vous.tsx). Blanche bordée d'un trait fin,
   rayon 18 ; le poste, « employeur · ville », le mot du modèle, ses raisons en puces
   grises, puis Postuler en pilule noire et Passer, Non en pilules grises. */
html.dans-app:not(.vitrine) #view-pourvous .pv-offres { display: grid; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
html.dans-app:not(.vitrine) #view-pourvous .pv-offres > li {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: stretch;
  padding: 16px; border-radius: 18px; background: var(--app-fond); border: 1px solid var(--app-ligne-forte);
  border-top: 1px solid var(--app-ligne-forte);
}
html.dans-app:not(.vitrine) #view-pourvous .pv-haut { display: flex; align-items: center; gap: 12px; cursor: pointer; min-width: 0; }
html.dans-app:not(.vitrine) #view-pourvous .pv-haut .lettre { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--app-fond); border: 1px solid var(--app-ligne); }
html.dans-app:not(.vitrine) #view-pourvous .pv-haut .offre-ouvrir { flex: 1; display: grid; gap: 2px; min-width: 0; }
html.dans-app:not(.vitrine) #view-pourvous .pv-haut .offre-ouvrir > span {
  font-family: var(--sans); font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.2px; color: var(--app-encre);
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html.dans-app:not(.vitrine) #view-pourvous .pv-haut .offre-ouvrir > small { display: block; font-size: 12.5px; line-height: 17px; color: var(--app-gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.dans-app:not(.vitrine) #view-pourvous .pv-chevron { flex: none; width: 18px; height: 18px; color: var(--app-gris); }
html.dans-app:not(.vitrine) #view-pourvous .pv-offres > li > * { grid-area: auto; order: 0; }
html.dans-app:not(.vitrine) #view-pourvous .pv-pourquoi { margin: 0; padding: 0; min-height: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: 14px; line-height: 19px; color: var(--app-encre-douce); }
html.dans-app:not(.vitrine) #view-pourvous .pv-pourquoi.attente { font-size: 12.5px; line-height: 17px; color: var(--app-gris); }
html.dans-app:not(.vitrine) #view-pourvous .pv-raisons { display: flex; flex-wrap: wrap; gap: 6px; }
html.dans-app:not(.vitrine) #view-pourvous .pv-raisons > span { padding: 4px 10px; border-radius: 999px; background: var(--app-releve); font-size: 12.5px; line-height: 17px; font-weight: 500; color: var(--app-encre-douce); }
html.dans-app:not(.vitrine) #view-pourvous .pv-offres .revue-actes { grid-area: auto; display: flex; gap: 8px; margin: 0; position: static; }
html.dans-app:not(.vitrine) #view-pourvous .pv-offres .revue-actes .rev-acte.postuler { display: inline-flex !important; width: auto !important; min-height: 0 !important; }
html.dans-app:not(.vitrine) #view-pourvous .pv-offres .revue-actes :is(.rev-acte, .pv-voir) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: auto; height: 48px; min-height: 0; padding: 0 20px; border-radius: 999px; border: 0;
  font: inherit; font-size: 16px; font-weight: 500; letter-spacing: 0; text-transform: none; text-decoration: none;
  background: var(--app-releve); color: var(--app-encre); box-shadow: none; opacity: 1;
}
html.dans-app:not(.vitrine) #view-pourvous .pv-offres .revue-actes :is(.rev-acte.postuler, .pv-voir) { flex: 1; background: var(--app-encre); color: var(--app-fond); }
html.dans-app:not(.vitrine) #view-pourvous .pv-offres .revue-actes .rev-acte svg { width: 16px; height: 16px; }
html.dans-app:not(.vitrine) #view-pourvous .pv-offres .revue-actes :is(.rev-acte, .pv-voir):hover { opacity: 0.85; }

/* Les candidatures (suivi, accueil) : la carte de l'app (ui/CarteCandidature.tsx). Le
   poste, « employeur · quand », la cause d'un échec en rouge, la pastille pleine :
   encre (à relire, en cours), vert (envoyée, entretien), rouge (pas partie, refus). */
html.dans-app:not(.vitrine) :is(.suivi-liste, .direct-tel, .dernieres-acc):has(> li[data-id]) { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
html.dans-app:not(.vitrine) :is(.suivi-liste, .direct-tel, .dernieres-acc) > li[data-id] {
  display: flex; align-items: center; gap: 14px; min-height: 0;
  padding: 14px 16px; border-radius: 22px; background: var(--app-fond);
  border: 1px solid var(--app-ligne-forte); cursor: pointer;
}
html.dans-app:not(.vitrine) :is(.suivi-liste, .direct-tel, .dernieres-acc) > li[data-id] .lettre { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--app-fond); border: 1px solid var(--app-ligne); }
html.dans-app:not(.vitrine) :is(.suivi-liste, .direct-tel, .dernieres-acc) > li[data-id] > div { flex: 1; display: grid; gap: 2px; min-width: 0; }
html.dans-app:not(.vitrine) :is(.suivi-liste, .direct-tel, .dernieres-acc) > li[data-id] > div > b {
  font-family: var(--sans); font-size: 16px; line-height: 21px; font-weight: 500; color: var(--app-encre);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0;
}
html.dans-app:not(.vitrine) :is(.suivi-liste, .direct-tel, .dernieres-acc) > li[data-id] > div > span { font-size: 14px; line-height: 19px; color: var(--app-gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.dans-app:not(.vitrine) :is(.suivi-liste, .direct-tel, .dernieres-acc) > li[data-id] > div > .cause { display: block; font-size: 12.5px; line-height: 17px; color: var(--app-mauvais); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.dans-app:not(.vitrine) :is(.suivi-liste, .direct-tel, .dernieres-acc) > li[data-id] > div > .cause[hidden] { display: none; }
html.dans-app:not(.vitrine) .pastille-app {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; max-width: 130px; padding: 0 12px; border-radius: 15px;
  font-style: normal; font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--app-fond); background: var(--app-attention);
}
html.dans-app:not(.vitrine) .pastille-app.ton-encre { background: var(--app-encre); }
html.dans-app:not(.vitrine) .pastille-app.ton-ok { background: var(--app-ok); }
html.dans-app:not(.vitrine) .pastille-app.ton-mauvais { background: var(--app-mauvais); }
html.dans-app:not(.vitrine) .pastille-app.ton-blanc { background: var(--app-fond); color: var(--app-encre-douce); border: 1px solid var(--app-ligne-forte); }
html.dans-app:not(.vitrine) .pastille-app.pouls::before { content: ""; width: 6px; height: 6px; border-radius: 3px; background: currentColor; animation: pastille-pouls 1.4s ease-in-out infinite; }
@keyframes pastille-pouls { 50% { opacity: 0.3; } }

/* La question en attente : une feuille blanche de l'app. La question en Cormorant,
   le champ de l'app (52 px, rayon 14), « Plus tard » en texte, l'action en pilule noire. */
#ask-panel { background: rgba(13, 13, 13, 0.28); backdrop-filter: none; -webkit-backdrop-filter: none; }
#ask-panel .ask-box { background: var(--app-fond); border: 0; border-radius: 22px; padding: 24px 24px 20px; box-shadow: none; }
#ask-panel .ask-box h3 { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--app-gris); margin: 0 0 6px; }
#ask-panel .ask-sub { font-size: 14px; color: var(--app-encre-douce); margin: 0 0 18px; }
#ask-panel #ask-form label { font-family: var(--serif); font-size: 28px; line-height: 1.15; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--app-encre); margin: 0 0 12px; }
#ask-panel #ask-form :is(input, select) {
  width: 100%; min-height: 52px; padding: 0 16px; border-radius: 14px; background: var(--app-fond);
  border: 1px solid var(--app-ligne-forte); font: inherit; font-size: 16px; color: var(--app-encre); box-shadow: none;
}
#ask-panel #ask-form :is(input, select):focus { outline: none; border-color: var(--app-encre); }
#ask-panel .ask-foot { justify-content: space-between; align-items: center; margin-top: 20px; }
#ask-panel .ask-foot button { height: 48px; padding: 0 20px; border-radius: 999px; font: inherit; font-size: 16px; font-weight: 500; letter-spacing: 0; text-transform: none; box-shadow: none; }
#ask-panel #ask-later { background: transparent; border: 0; color: var(--app-encre); }
#ask-panel #ask-send { background: var(--app-encre); border: 0; color: var(--app-fond); }

@media (min-width: 901px) {
  html.dans-app:not(.vitrine) .suivi-liste:has(> li[data-id]) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  html.dans-app:not(.vitrine) :is(.suivi-liste, .direct-tel, .dernieres-acc) > li[data-id] { padding: 18px 20px; }
  html.dans-app:not(.vitrine) :is(.suivi-liste, .direct-tel, .dernieres-acc) > li[data-id]:hover { background: var(--app-creme); border-color: rgba(0, 0, 0, 0.2); }
}

@media (min-width: 901px) {
  html:is(.dans-app, .app-accueil):not(.vitrine) #lateral { display: grid; position: fixed; left: 0; top: 0; bottom: 0; z-index: 60; transition: width 0.26s ease, padding 0.26s ease; }
  html.lat-on:is(.dans-app, .app-accueil):not(.vitrine) #lateral { width: 216px; }
  html.lat-on:is(.dans-app, .app-accueil):not(.vitrine) body { padding-left: 216px; }
  html.lat-on.dans-app:not(.vitrine) .dire-barre { left: 240px; right: 24px; }
  html:is(.dans-app, .app-accueil):not(.vitrine) .lat-switch { display: none !important; }
  /* repliée : le rail. Les mêmes portes, sans les mots. */
  html.lat-off:is(.dans-app, .app-accueil):not(.vitrine) #lateral { width: 72px; padding: 14px 12px; gap: 8px; grid-template-rows: auto auto auto auto 1fr auto; }
  html.lat-off:is(.dans-app, .app-accueil):not(.vitrine) body { padding-left: 72px; }
  html.lat-off.dans-app:not(.vitrine) .dire-barre { left: 96px; right: 24px; }
  html.lat-off:is(.dans-app, .app-accueil):not(.vitrine) #lateral .cote-tete { flex-direction: column; gap: 8px; padding: 0; }
  html.lat-off:is(.dans-app, .app-accueil):not(.vitrine) #lateral .cote-marque { height: 40px; justify-content: center; margin-bottom: 2px; }
  html.lat-off:is(.dans-app, .app-accueil):not(.vitrine) #lateral .cote-marque .noeud { width: 26px; height: 24px; }
  html.lat-off:is(.dans-app, .app-accueil):not(.vitrine) #lateral .cote-marque span, html.lat-off:is(.dans-app, .app-accueil):not(.vitrine) #lateral .lat-cherche,
  html.lat-off:is(.dans-app, .app-accueil):not(.vitrine) #lateral .tuile span, html.lat-off:is(.dans-app, .app-accueil):not(.vitrine) #lateral .tuile small { display: none; }
  html.lat-off:is(.dans-app, .app-accueil):not(.vitrine) #lateral .tuiles { grid-template-columns: 1fr; justify-items: center; gap: 8px; }
  html.lat-off:is(.dans-app, .app-accueil):not(.vitrine) #lateral .tuile, html.lat-off:is(.dans-app, .app-accueil):not(.vitrine) #lateral .tuile.large { width: 48px; height: 48px; padding: 0; margin: 0 auto; border-radius: 16px; align-content: center; }
  html.lat-off:is(.dans-app, .app-accueil):not(.vitrine) #lateral .tuile.large { margin-bottom: 0; }
  html.lat-off:is(.dans-app, .app-accueil):not(.vitrine) #lateral .cote-badge { top: 8px; right: 8px; min-width: 9px; width: 9px; height: 9px; padding: 0; border-radius: 50%; font-size: 0; border: 1.5px solid var(--app-fond); }
  html.lat-off:is(.dans-app, .app-accueil):not(.vitrine) #lateral .tuile.on .cote-badge { border-color: var(--app-encre); }
  html.lat-off:is(.dans-app, .app-accueil):not(.vitrine) #lateral .cote-point { right: 8px; bottom: 8px; }
}

@media (max-width: 900px) {
  html:is(.dans-app, .app-accueil):not(.vitrine) #lateral { left: 0; top: 0; bottom: 0; border-radius: 0; }
}

/* L'accueil sur ordinateur : le tableau de bord de l'app (ui/Accueil.tsx, tableau-app.js),
   avec ses mesures — la carte noire de la nuit, les chiffres en Cormorant, le chemin gris. */
html.tableau-app-on #view-accueil > .home-top { display: none; }
.tableau-app { display: grid; gap: 28px; max-width: 1180px; margin: 0 auto; padding: 32px 36px 120px; color: var(--app-encre); opacity: 0; transition: opacity 0.3s ease; }
.tableau-app.pret { opacity: 1; }
.tableau-app a { color: inherit; text-decoration: none; }
.tableau-app .ta-etiquette { font-size: 11.5px; line-height: 15px; font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase; color: var(--app-gris); }
.tableau-app .ta-legende { font-size: 12.5px; line-height: 17px; color: var(--app-gris); }
.ta-logo { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; overflow: hidden; background: var(--app-fond); border: 1px solid var(--app-ligne); font-style: normal; }
.ta-logo.disque { width: 28px; height: 28px; border-radius: 50%; }
.ta-logo.petit { width: 36px; height: 36px; }
.ta-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 18%; opacity: 0; }
.ta-logo.a-logo img { opacity: 1; }
.ta-logo.a-logo em { opacity: 0; }
.ta-logo em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--app-encre); }

.ta-haut { display: flex; gap: 28px; align-items: stretch; margin-top: -8px; }
.ta-jour { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.ta-date { display: block; margin-bottom: 10px; }
.ta-phrase { margin: 0; max-width: 720px; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 56px; line-height: 62px; letter-spacing: -0.8px; color: var(--app-encre); }
.ta-gestes { display: grid; gap: 14px; }
.ta-lecture { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--app-encre-douce); }
.ta-lecture i { width: 7px; height: 7px; border-radius: 4px; background: var(--app-ok); }
.ta-lecture b { font-weight: 400; color: var(--app-encre); }
.ta-boutons { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ta-pilule { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--app-ligne-forte); background: var(--app-fond); font-size: 14px; font-weight: 500; color: var(--app-encre); }
.ta-pilule svg { width: 16px; height: 16px; }
.ta-pilule:hover { background: var(--app-releve); }
.ta-pilule.encre { background: var(--app-encre); border-color: var(--app-encre); color: var(--app-fond); }
.ta-pilule.encre:hover { background: var(--app-noir); }
.ta-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 8px; border-radius: 10px; background: var(--app-encre); color: var(--app-fond); font-style: normal; font-size: 11px; font-weight: 600; }
.ta-badge.blanc { margin-left: 0; background: var(--app-fond); color: var(--app-encre); }
.ta-rond { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 22px; border: 1px solid var(--app-ligne-forte); background: var(--app-fond); }
.ta-rond svg { width: 19px; height: 19px; }
.ta-rond:hover { background: var(--app-releve); }
.ta-rond b { position: absolute; top: 10px; right: 10px; width: 9px; height: 9px; border-radius: 5px; background: var(--app-encre); border: 1.5px solid var(--app-fond); }

.ta-nuit { flex: none; width: 380px; min-height: 236px; display: flex; gap: 22px; padding: 26px; border-radius: 28px; background: var(--app-encre); color: #fff; transition: background 0.2s ease, translate 0.2s ease; }
.ta-nuit:hover { background: var(--app-nuit-papier); translate: 0 -1px; }
.ta-nuit-texte { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-width: 0; }
.ta-nuit .ta-etiquette { color: rgba(255, 255, 255, 0.62); }
.ta-nuit-phrase { margin: 10px 0 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 30px; line-height: 34px; letter-spacing: -0.3px; color: #fff; }
.ta-nuit ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.ta-nuit li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; line-height: 18px; color: #fff; }
.ta-nuit li svg { flex: none; width: 13px; height: 13px; color: rgba(255, 255, 255, 0.62); }
.ta-nuit li em { font-style: normal; color: rgba(255, 255, 255, 0.62); }
.ta-point { flex: none; width: 8px; height: 8px; border-radius: 4px; }
.ta-nuit-anneau { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 12.5px; color: rgba(255, 255, 255, 0.62); }
.ta-anneau { width: 104px; height: 104px; }
.ta-anneau text { font-family: var(--serif); font-weight: 500; font-size: 26px; fill: #fff; font-variant-numeric: lining-nums tabular-nums; }

.ta-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ta-kpi { display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 16px; border-radius: 22px; border: 1px solid var(--app-ligne-forte); background: var(--app-fond); transition: background 0.2s ease, translate 0.2s ease, border-color 0.2s ease; }
.ta-kpi:hover, .ta-mois:hover, .ta-reco-carte:hover, .ta-fraiche:hover { background: var(--app-creme); border-color: rgba(0, 0, 0, 0.22); translate: 0 -1px; }
.ta-kpi .ta-etiquette { letter-spacing: 0.4px; text-transform: none; font-size: 13px; color: var(--app-encre-douce); }
.ta-kpi-valeur { display: flex; align-items: baseline; gap: 6px; }
.ta-kpi-valeur b, .ta-station b, .ta-mois-total b { font-family: var(--serif); font-weight: 500; font-variant-numeric: lining-nums tabular-nums; color: var(--app-encre); }
.ta-kpi-valeur b { font-size: 44px; line-height: 46px; }
.ta-kpi-valeur small { font-size: 14px; color: var(--app-gris); }
.ta-kpi .ta-legende { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-barres { display: flex; align-items: flex-end; gap: 4px; height: 34px; }
.ta-barres i { flex: 1; height: 3px; border-radius: 2px; background: var(--app-releve); transition: height 520ms cubic-bezier(0.33, 1, 0.68, 1) var(--d); }
.ta-barres i.plein { background: var(--app-encre); }
.tableau-app.pret .ta-barres i { height: var(--h); }
.ta-lettres { display: flex; gap: 4px; margin-top: 4px; }
.ta-lettres span { flex: 1; text-align: center; font-size: 9.5px; line-height: 11px; color: var(--app-metal); }
.ta-lettres span.ici { color: var(--app-encre); }
.ta-maisons { display: flex; align-items: center; gap: 6px; height: 34px; }
.ta-maisons.vide::before { content: ""; flex: 1; height: 1px; background: var(--app-ligne-forte); }
.ta-maisons small { font-size: 12.5px; color: var(--app-gris); }
.ta-serie { display: flex; align-items: flex-end; gap: 4px; height: 34px; }
.ta-serie i { flex: 1; height: 10px; border-radius: 3px; background: var(--app-releve); }
.ta-serie i.plein { background: var(--app-encre); }

.ta-chemin { padding: 24px 24px 26px; border-radius: 24px; background: var(--app-releve); }
.ta-chemin-haut { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 22px; }
.ta-chemin h2 { margin: 0; text-transform: none; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 30px; line-height: 34px; letter-spacing: -0.3px; color: var(--app-encre); }
.ta-chemin h2 em { color: var(--app-gris); }
.ta-stations { display: flex; }
.ta-station { flex: 1; display: grid; gap: 2px; padding-right: 16px; }
.ta-station-fil { display: flex; align-items: center; margin-bottom: 12px; }
.ta-station-fil i { flex: none; width: 10px; height: 10px; border-radius: 5px; border: 1.5px solid var(--app-metal); background: var(--app-releve); }
.ta-station.plein .ta-station-fil i { background: var(--app-encre); border-color: var(--app-encre); }
.ta-station-fil span { flex: 1; height: 1px; margin: 0 6px; background: var(--app-metal); }
.ta-station b { font-size: 40px; line-height: 42px; }
.ta-station:not(.plein) b { color: var(--app-metal); }
.ta-station-titre { font-size: 14.5px; font-weight: 500; color: var(--app-encre); }

.ta-deux { display: flex; gap: 24px; align-items: flex-start; }
.ta-gauche { flex: 1.6; min-width: 0; display: grid; gap: 14px; }
.ta-droite { flex: 1; min-width: 0; display: grid; gap: 14px; }
.ta-entete { display: flex; align-items: center; justify-content: space-between; padding: 0 2px; }
.ta-entete h3 { display: flex; text-transform: none; align-items: center; margin: 0; font-family: var(--sans); font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.2px; color: var(--app-encre); }
.ta-entete > a { display: inline-flex; align-items: center; gap: 3px; height: 30px; padding: 0 10px; border-radius: 999px; font-size: 13.5px; color: var(--app-encre); }
.ta-entete > a:hover { background: var(--app-releve); }
.ta-entete > a svg { width: 13px; height: 13px; }
.ta-liste { display: grid; gap: 10px; }
.ta-carte-cand { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 22px; border: 1px solid var(--app-ligne-forte); background: var(--app-fond); }
.ta-carte-cand:hover { background: var(--app-creme); border-color: rgba(0, 0, 0, 0.2); }
.ta-cand-id { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ta-cand-id b { font-size: 16px; line-height: 21px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-cand-id small { font-size: 14px; line-height: 19px; color: var(--app-gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-cause { font-style: normal; font-size: 12.5px; line-height: 17px; color: var(--app-mauvais); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tableau-app .pastille-app { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; max-width: 130px; padding: 0 12px; border-radius: 15px; font-style: normal; font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--app-fond); background: var(--app-attention); }
.ta-vide { display: grid; justify-items: start; gap: 10px; padding: 22px; border-radius: 22px; background: var(--app-releve); }
.ta-vide b { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 28px; line-height: 32px; }
.ta-vide small { font-size: 14px; line-height: 19px; color: var(--app-encre-douce); }
.ta-vide .ta-pilule { height: 40px; margin-top: 6px; }
.ta-carte { border-radius: 22px; border: 1px solid var(--app-ligne-forte); background: var(--app-fond); overflow: hidden; }
.ta-ligne { display: flex; align-items: center; gap: 12px; padding: 13px 16px; }
.ta-ligne + .ta-ligne { border-top: 1px solid var(--app-ligne); }
.ta-ligne:hover { background: var(--app-creme); }
.ta-ligne > span { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ta-ligne > span b { display: flex; gap: 6px; font-size: 14.5px; line-height: 19px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-ligne > span b time { margin-left: auto; font-size: 12.5px; font-weight: 400; color: var(--app-gris); }
.ta-ligne.courriel > span b { font-weight: 400; font-size: 14px; }
.ta-ligne.courriel > span b.non-lu { font-weight: 500; }
.ta-ligne.courriel > span b.non-lu::before { content: ""; flex: none; align-self: center; width: 7px; height: 7px; border-radius: 4px; background: var(--app-encre); }
.ta-ligne > span small { font-size: 12.5px; line-height: 17px; color: var(--app-gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-ligne > svg { flex: none; width: 14px; height: 14px; color: var(--app-gris); }
.ta-rond-gris { position: relative; flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 19px; background: var(--app-releve); }
.ta-rond-gris svg { width: 18px; height: 18px; }
.ta-rond-gris b { position: absolute; right: 0; bottom: 0; width: 10px; height: 10px; border-radius: 5px; border: 1.5px solid var(--app-fond); }
.ta-vide-carte { display: grid; gap: 4px; padding: 18px; }
.ta-vide-carte b { font-size: 16px; font-weight: 500; }
.ta-vide-carte small { font-size: 14px; color: var(--app-encre-douce); }

.ta-mois { display: grid; gap: 16px; padding: 20px; border-radius: 22px; border: 1px solid var(--app-ligne-forte); background: var(--app-fond); transition: background 0.2s ease, translate 0.2s ease; }
.ta-mois-haut { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ta-mois-haut > div:first-child { display: grid; gap: 2px; }
.ta-mois-nom { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 28px; line-height: 32px; text-transform: capitalize; }
.ta-mois-total { display: grid; justify-items: end; }
.ta-mois-total b { font-size: 34px; line-height: 36px; }
.ta-damier .ta-lettres { gap: 5px; margin: 0 0 5px; }
.ta-cases { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.ta-cases i { aspect-ratio: 1; border-radius: 4px; background: var(--app-releve); }
.ta-cases i.vide { background: none; }
.ta-cases i.t1 { background: var(--app-metal); }
.ta-cases i.t2 { background: var(--app-encre-douce); }
.ta-cases i.t3 { background: var(--app-encre); }
.ta-cases i.jour { box-shadow: inset 0 0 0 1.5px var(--app-encre); }
.ta-cases i.futur { opacity: 0.45; }

.ta-reco, .ta-fraiches { display: grid; gap: 14px; }
.ta-reco-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ta-reco-carte, .ta-fraiche { display: grid; align-content: start; gap: 6px; min-height: 150px; padding: 16px; border-radius: 20px; border: 1px solid var(--app-ligne-forte); background: var(--app-fond); cursor: pointer; transition: background 0.2s ease, translate 0.2s ease; }
.ta-reco-haut { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ta-reco-haut .ta-logo.disque { width: 38px; height: 38px; }
.ta-score { display: grid; place-items: center; height: 24px; padding: 0 8px; border-radius: 12px; background: var(--app-releve); font-style: normal; font-size: 11px; font-weight: 600; }
.ta-reco-carte b, .ta-fraiche b { font-size: 15px; line-height: 19px; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ta-reco-carte small, .ta-fraiche small { font-size: 12.5px; color: var(--app-gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-reco-carte p { margin: 4px 0 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 16px; line-height: 20px; color: var(--app-encre-douce); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ta-vert { width: 8px; height: 8px; margin-right: 8px; border-radius: 4px; background: var(--app-ok); }
.ta-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 220px; gap: 12px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.ta-fraiche { min-height: 0; background: var(--app-releve); border-color: transparent; }
.ta-fraiche .pastille-app { height: 24px; padding: 0 9px; }
@media (max-width: 1180px) {
  .ta-haut, .ta-deux { flex-direction: column; }
  .ta-nuit { width: auto; }
  .ta-phrase { font-size: 46px; line-height: 52px; }
}

/* Suivi, comme l'app ((tabs)/suivi.tsx) : une colonne, le titre en serif italique sur
   ordinateur, le message gris, la carte de la semaine (feu, phrase, jours), les p'tits
   boutons, puis les cartes en grille (min 330). */
html.dans-app:not(.vitrine) #view-apps .offers-head, html.dans-app:not(.vitrine) #view-apps .track-pulse { display: none; }
html.dans-app:not(.vitrine) #app-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
html.dans-app:not(.vitrine) #app-list > * { grid-column: auto; margin: 0; }
.suivi-titre { display: grid; gap: 4px; padding-bottom: 8px; }
.suivi-titre h1 { margin: 0; font-family: var(--sans); font-style: normal; font-weight: 600; font-size: 30px; line-height: 36px; letter-spacing: -0.5px; text-transform: none; color: var(--app-encre); }
.suivi-titre p { margin: 0; font-size: 14px; line-height: 19px; color: var(--app-gris); }
.suivi-message { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--app-releve); font-size: 14px; line-height: 19px; color: var(--app-encre-douce); }
.suivi-message > i { flex: none; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; border: 1.6px solid currentColor; font-style: normal; font-size: 10px; font-weight: 700; color: var(--app-encre); }
.suivi-message.ton-attention > i { color: var(--app-attention); }
.suivi-message > span { flex: 1; min-width: 0; }
.suivi-message > a { flex: none; padding: 4px 6px; font-size: 14px; font-weight: 500; color: var(--app-encre); text-decoration: none; }
.suivi-tableau { display: grid; gap: 10px; }
.st-portes { display: flex; gap: 8px; }
.st-portes button { text-transform: none; letter-spacing: 0; padding: 6px 14px; border: 0; border-radius: 999px; background: var(--app-releve); font: 500 12.5px/17px var(--sans); color: var(--app-encre); cursor: pointer; }
.st-portes button.actif { background: var(--app-encre); color: #fff; }
.st-carte { display: grid; gap: 14px; padding: 22px; border-radius: 24px; background: var(--app-fond); border: 1px solid var(--app-ligne-forte); }
.st-leg { font-size: 12.5px; line-height: 17px; color: var(--app-gris); }
.st-rang { display: flex; align-items: center; gap: 8px; min-height: 168px; }
.st-feu { flex: 1.05; display: flex; align-items: flex-start; overflow: visible; }
.st-mots { flex: 1; display: grid; gap: 8px; padding-bottom: 8px; }
.st-phrase { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 26px; line-height: 30px; color: var(--app-encre); }
.st-jours { display: flex; justify-content: space-between; }
.st-jours button, .st-grille button { text-transform: none; letter-spacing: 0; display: grid; place-items: center; min-width: 36px; min-height: 36px; padding: 0; border: 0; border-radius: 999px; background: none; font: 400 12.5px/17px var(--sans); color: var(--app-gris); cursor: pointer; }
.st-jours button.ici, .st-jours button.actif, .st-grille button.actif { font-weight: 500; }
.st-jours button.chaud, .st-grille button.chaud { color: #c2410c; }
.st-jours button.actif, .st-grille button.actif { background: var(--app-releve); }
.st-jours button.actif:not(.chaud), .st-grille button.actif:not(.chaud) { color: var(--app-encre); }
.st-grille { display: grid; grid-template-columns: repeat(7, 1fr); }
.st-grille button { width: 100%; padding: 6px 0; }
html.dans-app:not(.vitrine) #app-list .suivi-filtres { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; }
html.dans-app:not(.vitrine) #app-list .suivi-filtres .chip { display: inline-flex; align-items: center; gap: 6px; height: auto; padding: 6px 12px; border: 0; border-radius: 999px; background: var(--app-releve); font: 500 12.5px/17px var(--sans); color: var(--app-encre); box-shadow: none; }
html.dans-app:not(.vitrine) #app-list .suivi-filtres .chip.noir { background: var(--app-encre); color: #fff; }
html.dans-app:not(.vitrine) #app-list .suivi-filtres .chip.pouls::before { content: ""; width: 6px; height: 6px; border-radius: 3px; background: currentColor; animation: pastille-pouls 1.4s ease-in-out infinite; }
html.dans-app:not(.vitrine) #app-list .suivi-grille:has(> li[data-id]) { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
html.dans-app:not(.vitrine) #app-list .suivi-grille > li[data-id] { padding: 18px 20px; border-top: 1px solid var(--app-ligne-forte); }
.suivi-vide { display: grid; justify-items: center; gap: 6px; padding: 40px 12px; text-align: center; }
.suivi-vide b { font-size: 17px; line-height: 22px; font-weight: 600; color: var(--app-encre); }
.suivi-vide span { max-width: 300px; font-size: 14px; line-height: 19px; color: var(--app-gris); }
.suivi-vide .ta-pilule { margin-top: 16px; }
@media (min-width: 901px) {
  html.dans-app:not(.vitrine) #view-apps .track-page { max-width: none; padding: 32px 36px 120px; }
  .suivi-titre { gap: 8px; padding-bottom: 6px; }
  .suivi-titre h1 { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 50px; line-height: 56px; letter-spacing: -0.6px; }
  .suivi-titre p { font-size: 16px; line-height: 22px; }
  html.dans-app:not(.vitrine) #app-list { gap: 32px; }
}
@media (max-width: 900px) {
  html.dans-app:not(.vitrine) #app-list .suivi-grille:has(> li[data-id]) { grid-template-columns: minmax(0, 1fr); }
}
html.dans-app:not(.vitrine) .pastille-app.pouls { width: auto; box-shadow: none; animation: none; }
html.dans-app:not(.vitrine) .track-page::before { display: none; }

/* Offres au repos, comme l'app ((tabs)/index.tsx, ui/Composer.tsx, ui/Vitrine.tsx) :
   la phrase en serif italique, le champ en pilule, les exemples et les fentes centrés ;
   dessous, les rails et les grilles. Sur ordinateur le champ est en haut, la barre du bas
   se retire tant qu'on n'a rien cherché. */
#dire .bulle.maxx.accueil.vide.repos { margin-top: 0 !important; max-width: none; justify-self: stretch; }
html.dire-repos #dire { max-width: none; }
.repos-app { display: grid; gap: 32px; width: 100%; text-align: left; color: var(--app-encre); }
.repos-app .ro-tete h1 { margin: 0; font: 600 30px/36px var(--sans); letter-spacing: -0.5px; color: var(--app-encre); }
.ro-hero { display: grid; gap: 14px; }
.repos-app.grand .ro-hero { justify-items: center; gap: 28px; padding: 56px 0 8px; }
.ro-hero h1 { margin: 0; text-align: center; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 64px; line-height: 70px; letter-spacing: -1px; color: var(--app-encre); text-transform: none; }
.ro-champ { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 760px; height: 64px; padding: 0 10px 0 24px; border-radius: 999px; background: var(--app-fond); border: 1px solid var(--app-ligne-forte); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06); }
.ro-champ:focus-within { border-color: var(--app-encre); }
.ro-champ input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent; font: 400 18px/24px var(--sans); color: var(--app-encre); }
.ro-champ input::placeholder { color: var(--app-gris); }
.ro-micro, .ro-envoyer { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 20px; background: none; color: var(--app-encre); cursor: pointer; }
.ro-micro svg, .ro-envoyer svg { width: 18px; height: 18px; }
.ro-envoyer { background: var(--app-encre); color: #fff; }
.ro-envoyer:disabled { background: var(--app-releve); color: var(--app-metal); cursor: default; }
.ro-exemples, .ro-fentes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.repos-app.grand :is(.ro-exemples, .ro-fentes) { justify-content: center; max-width: 760px; }
.repos-app:not(.grand) :is(.ro-exemples, .ro-fentes, .ro-rangee) { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 0 20px; }
.ro-exemples[hidden] { display: none; }
.ro-puce { flex: none; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 0; border-radius: 15px; background: var(--app-releve); font: 500 12.5px/17px var(--sans); color: var(--app-encre); text-transform: none; letter-spacing: 0; cursor: pointer; white-space: nowrap; }
.ro-puce:hover { background: var(--app-ligne-forte); }
.ro-puce.actif { background: var(--app-encre); color: #fff; }
.ro-fente { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 12px; border-radius: 15px; border: 1px dashed var(--app-ligne-forte); background: var(--app-fond); font: 500 12.5px/17px var(--sans); color: var(--app-encre-douce); text-transform: none; letter-spacing: 0; cursor: pointer; }
.ro-fente svg { width: 13px; height: 13px; color: var(--app-gris); }
.ro-fente span { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ro-fente.pleine { border: 0; background: var(--app-encre); color: #fff; }
.ro-fente.ouverte { border-style: solid; border-color: var(--app-encre); }
.ro-complet { display: inline-flex; align-items: center; gap: 4px; padding-left: 4px; font: 500 12.5px/17px var(--sans); color: var(--app-ok); }
.ro-complet svg { width: 14px; height: 14px; }
.ro-options { display: grid; gap: 8px; width: 100%; max-width: 760px; }
.ro-options[hidden] { display: none; }
.ro-options-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ro-options-tete b { font-size: 11.5px; line-height: 15px; font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase; color: var(--app-encre); }
.ro-fermer { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; background: none; color: var(--app-gris); cursor: pointer; }
.ro-fermer svg { width: 16px; height: 16px; }
.ro-rangee { display: flex; flex-wrap: wrap; gap: 6px; }
.repos-app.grand .ro-rangee { justify-content: center; }
.ro-blocs { display: grid; gap: 32px; }
.ro-attente { margin: 0; font-size: 14px; color: var(--app-gris); }
.ro-attente:empty { display: none; }
.ro-section { display: grid; gap: 10px; }
.ro-entete { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ro-entete h3 { display: flex; align-items: center; margin: 0; font: 600 17px/22px var(--sans); letter-spacing: -0.2px; text-transform: none; color: var(--app-encre); }
.repos-app:not(.grand) .ro-entete h3 { font-size: 11.5px; line-height: 15px; font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase; }
.ro-entete span { font-size: 12.5px; line-height: 17px; color: var(--app-gris); }
.repos-app .ta-rail { grid-auto-columns: 200px; gap: 10px; }
.repos-app .ta-fraiche { gap: 10px; padding: 14px; min-height: 0; }
.repos-app .ta-fraiche .ta-logo.disque { width: 36px; height: 36px; }
.ro-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.ro-carte { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 22px; background: var(--app-fond); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; }
.repos-app.grand .ro-carte { padding: 18px 20px; border: 1px solid var(--app-ligne-forte); }
.ro-carte:hover { background: var(--app-creme); border-color: rgba(0, 0, 0, 0.2); }
.ro-carte .ta-logo { border-radius: 50%; }
.ro-carte-id { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ro-carte-id b { font-size: 16px; line-height: 21px; font-weight: 500; color: var(--app-encre); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ro-carte-id small { font-size: 14px; line-height: 19px; color: var(--app-gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ro-carte-id em { font-style: normal; font-size: 12.5px; line-height: 17px; color: var(--app-gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ro-carte-id em.encre { color: var(--app-encre); }
.ro-suivies { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-top: 6px; }
.ro-suivie { position: relative; flex: none; display: grid; justify-items: center; gap: 6px; width: 104px; padding: 12px 6px; border: 0; border-radius: 18px; background: var(--app-releve); cursor: pointer; }
.ro-suivie span { max-width: 92px; font: 500 12.5px/17px var(--sans); color: var(--app-encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: none; }
.ro-compteur { position: absolute; top: -6px; right: 8px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; border: 2px solid var(--app-releve); background: var(--app-encre); color: #fff; font: 600 11px/14px var(--sans); font-style: normal; }
.ro-veilles { display: grid; gap: 8px; }
.ro-veille { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; border-radius: 18px; background: var(--app-releve); text-align: left; cursor: pointer; }
.ro-veille > span { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ro-veille b { font: 500 15px/20px var(--sans); color: var(--app-encre); text-transform: none; }
.ro-veille small { font-size: 12.5px; color: var(--app-ok); }
.ro-chevron { flex: none; width: 14px; height: 14px; color: var(--app-gris); }
.ro-phares { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.repos-app.grand .ro-phares { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.ro-phare { display: grid; justify-items: center; gap: 6px; min-width: 0; padding: 12px 6px; border: 0; border-radius: 18px; background: var(--app-releve); cursor: pointer; }
.ro-phare:hover, .ro-suivie:hover, .ro-veille:hover { background: var(--app-ligne-forte); }
.ro-phare .ta-logo.disque { width: 40px; height: 40px; }
.ro-phare b { max-width: 100%; font: 500 12.5px/17px var(--sans); color: var(--app-encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: none; }
.ro-phare small { max-width: 100%; font-size: 12.5px; line-height: 17px; color: var(--app-gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ro-invite { margin: 0; padding: 0 12px; text-align: center; font-size: 12.5px; line-height: 17px; color: var(--app-gris); }
@media (min-width: 901px) {
  html:is(.dire-repos, .dire-resultats) .dire-barre { display: none !important; }
}
@media (max-width: 900px) {
  .repos-app { gap: 24px; }
  .ro-hero h1 { font-size: 40px; line-height: 46px; }
}

/* Offres en recherche (offres-recherche.js), comme l'app : le champ en haut à gauche sur
   ordinateur, la maison, les logos, la lecture et « Suivre », les filtres, la grille. */
#dire .bulle.maxx.resultats-app { margin-top: 0 !important; max-width: none; justify-self: stretch; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.dire-resultats #dire { max-width: none; }
.recherche-app { gap: 20px; }
.rr-haut { position: relative; }
.rr-haut .ro-champ { max-width: none; }
.rr-suggestions { position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; right: 0; display: grid; gap: 2px; padding: 6px; border-radius: 22px; background: var(--app-fond); border: 1px solid var(--app-ligne-forte); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1); }
.rr-suggestions[hidden] { display: none; }
.rr-sugg { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-radius: 16px; background: var(--app-fond); text-align: left; cursor: pointer; }
.rr-sugg:hover { background: var(--app-releve); }
.rr-sugg .ta-logo.disque { width: 36px; height: 36px; }
.rr-sugg b { flex: 1; min-width: 0; font: 500 15px/20px var(--sans); color: var(--app-encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: none; }
.rr-sugg small { max-width: 150px; font-size: 12.5px; line-height: 17px; color: var(--app-gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr-rond { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 18px; background: var(--app-releve); color: var(--app-encre-douce); }
.rr-rond svg { width: 16px; height: 16px; }
.rr-sugg-vide { margin: 0; padding: 8px 12px; font-size: 14px; color: var(--app-gris); }
.rr-corps { display: grid; gap: 20px; }
.rr-maison { display: grid; gap: 12px; padding: 16px; border-radius: 22px; background: var(--app-releve); }
.rr-maison-tete { display: flex; align-items: center; gap: 14px; }
.rr-maison-tete .ta-logo.disque { width: 56px; height: 56px; }
.rr-maison-tete > span { flex: 1; min-width: 0; display: grid; gap: 2px; }
.rr-maison-tete b { font: 600 17px/22px var(--sans); letter-spacing: -0.2px; color: var(--app-encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr-maison-tete small { font-size: 14px; line-height: 19px; color: var(--app-gris); }
.rr-rangee { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.rr-rangee::-webkit-scrollbar, .rr-employeurs::-webkit-scrollbar { display: none; }
.rr-employeurs { display: flex; gap: 10px; padding: 2px 0; overflow-x: auto; scrollbar-width: none; }
.rr-employeur { flex: none; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.rr-employeur:hover { opacity: 0.55; }
.rr-employeur .ta-logo.disque { width: 52px; height: 52px; }
.rr-lecture { display: grid; gap: 8px; }
.rr-lecture-ligne { display: flex; align-items: flex-start; gap: 10px; }
.rr-lecture-ligne p { flex: 1; margin: 0; font-size: 14px; line-height: 19px; color: var(--app-encre); }
.rr-suivre { flex: none; height: 36px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--app-encre); color: #fff; font: 500 14px/18px var(--sans); text-transform: none; letter-spacing: 0; cursor: pointer; }
.rr-suivre.suivie { background: var(--app-releve); color: var(--app-encre); }
.rr-suivre:disabled { opacity: 0.5; cursor: default; }
.rr-grille { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; }
@media (min-width: 1700px) { .rr-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rr-vide { display: grid; justify-items: center; gap: 6px; padding: 40px 12px; text-align: center; }
.rr-vide b { font: 600 17px/22px var(--sans); color: var(--app-encre); }
.rr-vide span { font-size: 14px; line-height: 19px; color: var(--app-gris); }
.rr-pied { margin: 0; padding: 8px 0; text-align: center; font-size: 12.5px; line-height: 17px; color: var(--app-gris); }
.rr-sentinelle { display: block; height: 1px; }
.rr-compte { width: 100%; height: 48px; border: 0; border-radius: 999px; background: var(--app-encre); color: #fff; font: 500 16px/20px var(--sans); text-transform: none; letter-spacing: 0; cursor: pointer; }
@media (max-width: 900px) {
  .recherche-app .ro-grille { grid-template-columns: minmax(0, 1fr); }
}
html.dans-app:not(.vitrine) .accueil-page::before { display: none; }

/* La boîte, comme l'app ((tabs)/boite.tsx) : le titre, « 2 non lus », « Tout lu » et la
   roue des réglages ; la recherche (320) et les dossiers en puces sur une ligne ; la liste
   en pleine largeur (qui, objet, date) ; un courriel s'ouvre à la place de la liste. */
html.dans-app:not(.vitrine) #view-boite .boite-page.bo-client-page { display: grid; gap: 24px; max-width: none; padding: 32px 36px 120px; }
html.dans-app:not(.vitrine) #view-boite .bo-tete { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 24px 12px; }
html.dans-app:not(.vitrine) #view-boite .bo-titre { display: grid; gap: 8px; }
html.dans-app:not(.vitrine) #view-boite .bo-titre h1 { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 50px; line-height: 56px; letter-spacing: -0.6px; text-transform: none; color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-boite .bo-badge { display: none; }
html.dans-app:not(.vitrine) #view-boite .bo-sous-titre { margin: 0; font-size: 16px; line-height: 22px; color: var(--app-gris); }
html.dans-app:not(.vitrine) #view-boite .bo-sous-titre:empty { display: none; }
html.dans-app:not(.vitrine) #view-boite .bo-droite { display: flex; align-items: center; gap: 4px; padding-top: 12px; }
html.dans-app:not(.vitrine) #view-boite .bo-tout-lu { padding: 6px 10px; border: 0; background: none; font: 500 14px/19px var(--sans); color: var(--app-encre); text-transform: none; letter-spacing: 0; cursor: pointer; }
html.dans-app:not(.vitrine) #view-boite .bo-tout-lu[hidden] { display: none; }
html.dans-app:not(.vitrine) #view-boite .bo-roue { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 18px; background: none; color: var(--app-encre); cursor: pointer; }
html.dans-app:not(.vitrine) #view-boite .bo-roue svg { width: 20px; height: 20px; }
html.dans-app:not(.vitrine) #view-boite .bo-client-page.reglages-ouverts .bo-roue { background: var(--app-releve); }
html.dans-app:not(.vitrine) #view-boite .bo-rangee { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
html.dans-app:not(.vitrine) #view-boite .bo-chercher { flex: none; width: 320px; max-width: 100%; }
html.dans-app:not(.vitrine) #view-boite .bo-chercher input { width: 100%; height: 52px; padding: 0 16px 0 44px; border-radius: 14px; border: 1px solid var(--app-ligne); background-color: var(--app-fond); background-position: 16px 50%; font: 400 16px/22px var(--sans); color: var(--app-encre); box-shadow: none; }
html.dans-app:not(.vitrine) #view-boite .bo-chercher input:focus { border-color: var(--app-encre); outline: 0; }
html.dans-app:not(.vitrine) #view-boite .bo-dossiers { flex: 1; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; border: 0; overflow: visible; }
html.dans-app:not(.vitrine) #view-boite .bo-dossier { display: inline-flex; align-items: center; gap: 6px; min-height: 0; padding: 8px 14px; border: 0; border-radius: 999px; background: var(--app-releve); font: 500 12.5px/17px var(--sans); color: var(--app-encre); text-transform: none; letter-spacing: 0; white-space: nowrap; cursor: pointer; }
html.dans-app:not(.vitrine) #view-boite .bo-dossier.on { background: var(--app-encre); color: #fff; }
html.dans-app:not(.vitrine) #view-boite .bo-dossier .bo-nb { padding: 0; min-width: 0; height: auto; background: none; color: inherit; font: inherit; }
html.dans-app:not(.vitrine) #view-boite .bo-client { display: block; height: auto; min-height: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
html.dans-app:not(.vitrine) #view-boite .bo-colonne-liste { overflow: visible; border: 0; padding: 0; }
html.dans-app:not(.vitrine) #view-boite .bo-lignes { display: grid; border-radius: 18px; overflow: hidden; background: var(--app-releve); }
html.dans-app:not(.vitrine) #view-boite .bo-lignes li { display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px; border: 0; border-radius: 0; background: var(--app-releve); cursor: pointer; }
html.dans-app:not(.vitrine) #view-boite .bo-lignes li + li { border-top: 1px solid var(--app-ligne-forte); }
html.dans-app:not(.vitrine) #view-boite .bo-lignes li:hover, html.dans-app:not(.vitrine) #view-boite .bo-lignes li.sel { background: var(--app-ligne); }
html.dans-app:not(.vitrine) #view-boite .bo-qui-ligne { flex: none; width: 220px; padding-top: 2px; font: 400 14px/19px var(--sans); color: var(--app-encre-douce); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.dans-app:not(.vitrine) #view-boite .bo-objet { flex: 1; min-width: 0; font: 600 17px/22px var(--sans); letter-spacing: -0.2px; color: var(--app-encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.dans-app:not(.vitrine) #view-boite .bo-lignes li.non-lu :is(.bo-objet, .bo-qui-ligne) { color: #6eb6f0; }
html.dans-app:not(.vitrine) #view-boite .bo-lignes li.non-lu .bo-qui-ligne { font-weight: 600; }
html.dans-app:not(.vitrine) #view-boite .bo-lignes time { flex: none; padding-top: 3px; font-size: 12.5px; line-height: 17px; color: var(--app-gris); }
html.dans-app:not(.vitrine) #view-boite .bo-astuce { margin: 12px 0 0; padding: 0 12px; text-align: center; font-size: 12.5px; line-height: 17px; color: var(--app-gris); }
html.dans-app:not(.vitrine) #view-boite .bo-vide-app { display: grid; justify-items: center; gap: 6px; padding: 40px 12px; text-align: center; }
html.dans-app:not(.vitrine) #view-boite .bo-vide-app b { font: 600 17px/22px var(--sans); color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-boite .bo-vide-app span { max-width: 300px; font-size: 14px; line-height: 19px; color: var(--app-gris); }
html.dans-app:not(.vitrine) #view-boite .bo-vide-app .ta-pilule { margin-top: 16px; }
html.dans-app:not(.vitrine) #view-boite .bo-lecture { display: none; }
html.dans-app:not(.vitrine) #view-boite .lecture-ouverte .bo-tete, html.dans-app:not(.vitrine) #view-boite .lecture-ouverte .bo-colonne-liste { display: none; }
html.dans-app:not(.vitrine) #view-boite .lecture-ouverte .bo-lecture { display: grid; align-content: start; gap: 16px; max-width: 760px; padding: 0; background: none; }
html.dans-app:not(.vitrine) #view-boite .lecture-ouverte .bo-retour { display: inline-flex; align-items: center; gap: 4px; color: var(--app-encre); font-weight: 500; }
html.dans-app:not(.vitrine) #view-boite .bo-barre { justify-content: space-between; }
html.dans-app:not(.vitrine) #view-boite .bo-acte { min-height: 36px; border: 0; background: var(--app-releve); color: var(--app-encre); font: 500 13px/17px var(--sans); }
html.dans-app:not(.vitrine) #view-boite .bo-acte.danger { color: var(--app-mauvais); }
html.dans-app:not(.vitrine) #view-boite .bo-avatar { background: var(--app-releve); color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-boite :is(.bo-fiche, .bo-lien-ext, .bo-copier) { color: var(--app-encre); text-decoration: underline; text-underline-offset: 3px; }
html.dans-app:not(.vitrine) #view-boite .bo-code { background: var(--app-releve); }
html.dans-app:not(.vitrine) #view-boite .bo-carte .k { color: var(--app-gris); font-weight: 500; letter-spacing: 1.6px; font-size: 11.5px; }
html.dans-app:not(.vitrine) #view-boite .reglages-ouverts .bo-colonne-liste { padding: 0; }
html.dans-app:not(.vitrine) #view-boite .bo-carte.verre { padding: 20px; border-radius: 22px; border: 1px solid var(--app-ligne-forte); background: var(--app-fond); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (max-width: 900px) {
  html.dans-app:not(.vitrine) #view-boite .boite-page.bo-client-page { padding: 8px 20px 120px; gap: 16px; }
  html.dans-app:not(.vitrine) #view-boite .bo-titre h1 { font: 600 30px/36px var(--sans); letter-spacing: -0.5px; font-style: normal; }
  html.dans-app:not(.vitrine) #view-boite .bo-sous-titre { font-size: 14px; line-height: 19px; }
  html.dans-app:not(.vitrine) #view-boite .bo-droite { padding-top: 0; }
  html.dans-app:not(.vitrine) #view-boite .bo-rangee { display: grid; gap: 12px; }
  html.dans-app:not(.vitrine) #view-boite .bo-chercher { width: 100%; }
  html.dans-app:not(.vitrine) #view-boite .bo-dossiers { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 0 20px; }
  html.dans-app:not(.vitrine) #view-boite .bo-qui-ligne { display: none; }
  html.dans-app:not(.vitrine) #view-boite .bo-objet { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  html.dans-app:not(.vitrine) #view-boite .lecture-ouverte .bo-lecture { position: fixed; inset: 0; z-index: 10050; overflow: auto; max-width: none; padding: calc(10px + env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom)); background: var(--app-fond); }
}

/* Le profil, comme l'app ((tabs)/dossier.tsx et ui/Presentation.tsx) : le cercle vert
   qui se remplit, le nom au centre, les quatre portes numérotées, puis le compte. Les
   portes ouvrent des sous-vues (#/profil?v=…) avec un retour, comme l'Ecran de l'app. */
html.dans-app:not(.vitrine) #view-profil .profil-page.pr-app { max-width: 760px; margin: 0 auto; padding: 32px 36px 120px; gap: 24px; }
html.dans-app:not(.vitrine) #view-profil .pr-app::before { display: none; }
html.dans-app:not(.vitrine) #view-profil .pa-presentation { display: grid; gap: 18px; }
html.dans-app:not(.vitrine) #view-profil .pa-sourcil { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
html.dans-app:not(.vitrine) #view-profil .pa-marque { margin: 0; font: 500 11px/16px var(--sans); letter-spacing: 1.8px; text-transform: uppercase; color: var(--app-gris); }
html.dans-app:not(.vitrine) #view-profil .pa-email { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; line-height: 17px; color: var(--app-gris); }
html.dans-app:not(.vitrine) #view-profil .pa-scene { display: flex; justify-content: center; margin: 18px 0 4px; }
html.dans-app:not(.vitrine) #view-profil .pa-anneau { position: relative; width: min(280px, max(228px, calc(100vw - 72px))); aspect-ratio: 1; }
html.dans-app:not(.vitrine) #view-profil .pa-anneau svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
html.dans-app:not(.vitrine) #view-profil .pa-anneau circle { fill: none; }
html.dans-app:not(.vitrine) #view-profil .pa-interieur { stroke: var(--app-ligne-forte); stroke-width: 1; }
html.dans-app:not(.vitrine) #view-profil .pa-piste { stroke: var(--app-ok-lavis); }
html.dans-app:not(.vitrine) #view-profil .pa-trait { stroke: var(--app-ok); stroke-linecap: round; transition: stroke-dashoffset 1.3s cubic-bezier(0.16, 1, 0.3, 1); }
html.dans-app:not(.vitrine) #view-profil .pa-veine { stroke: var(--app-ok-lavis); stroke-width: 4; opacity: 0.3; animation: pa-souffle 4.4s ease-in-out infinite; }
@keyframes pa-souffle { 0%, 100% { opacity: 0.18; stroke-width: 3; } 50% { opacity: 0.63; stroke-width: 5; } }
html.dans-app:not(.vitrine) #view-profil .pa-centre { position: absolute; inset: 0 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; text-decoration: none; color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-profil .pa-centre:hover { opacity: 0.7; }
html.dans-app:not(.vitrine) #view-profil .pa-centre b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 34px/36px var(--serif); letter-spacing: -0.8px; }
html.dans-app:not(.vitrine) #view-profil .pa-centre em { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: italic 500 34px/38px var(--serif); letter-spacing: -0.4px; color: var(--app-encre-douce); }
html.dans-app:not(.vitrine) #view-profil .pa-centre em.absent { color: var(--app-gris); }
html.dans-app:not(.vitrine) #view-profil .pa-chiffre { position: absolute; width: 36px; height: 36px; margin: -18px 0 0 -18px; display: grid; place-items: center; border-radius: 18px; background: var(--app-fond); font: 500 14px/17px var(--sans); font-variant-numeric: tabular-nums; color: var(--app-ok); }
html.dans-app:not(.vitrine) #view-profil .pa-sous-nom { display: grid; justify-items: center; gap: 2px; text-align: center; text-decoration: none; color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-profil .pa-sous-nom b { font: 500 16px/22px var(--sans); }
html.dans-app:not(.vitrine) #view-profil .pa-sous-nom small { font-size: 14px; line-height: 19px; color: var(--app-gris); }
html.dans-app:not(.vitrine) #view-profil .pa-portes { list-style: none; margin: 0; padding: 0; }
html.dans-app:not(.vitrine) #view-profil .pa-portes li + li { border-top: 1px solid var(--app-ligne-forte); }
html.dans-app:not(.vitrine) #view-profil :is(.pa-portes a, .pa-ligne) { display: flex; align-items: center; gap: 14px; padding: 14px 0; text-decoration: none; color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-profil .pa-ligne { gap: 12px; padding: 15px 0; }
html.dans-app:not(.vitrine) #view-profil .pa-ligne + .pa-ligne { border-top: 1px solid var(--app-ligne-forte); }
html.dans-app:not(.vitrine) #view-profil :is(.pa-portes a, .pa-ligne):hover { opacity: 0.6; }
html.dans-app:not(.vitrine) #view-profil .pa-numero { flex: none; width: 28px; font: italic 500 20px/24px var(--serif); color: var(--app-gris); }
html.dans-app:not(.vitrine) #view-profil .pa-ligne-mots { flex: 1; min-width: 0; display: grid; gap: 1px; }
html.dans-app:not(.vitrine) #view-profil .pa-ligne-mots b { font: 500 16px/22px var(--sans); }
html.dans-app:not(.vitrine) #view-profil .pa-ligne-mots small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; line-height: 17px; color: var(--app-gris); }
html.dans-app:not(.vitrine) #view-profil .pa-ligne-mots small.alerte { color: var(--app-attention); }
html.dans-app:not(.vitrine) #view-profil :is(.pa-portes a, .pa-ligne) > i { flex: none; display: grid; width: 16px; height: 16px; color: var(--app-gris); }
html.dans-app:not(.vitrine) #view-profil :is(.pa-portes a, .pa-ligne, .pa-retour) svg { width: 100%; height: 100%; }
html.dans-app:not(.vitrine) #view-profil .pa-puce { flex: none; padding: 4px 10px; border-radius: 999px; font: 500 12.5px/17px var(--sans); }
html.dans-app:not(.vitrine) #view-profil .pa-puce.ok { background: var(--app-ok-lavis); color: var(--app-ok); }
html.dans-app:not(.vitrine) #view-profil .pa-puce.accent { background: var(--app-encre); color: var(--app-fond); }
html.dans-app:not(.vitrine) #view-profil .pa-prochain { justify-self: start; }
html.dans-app:not(.vitrine) #view-profil :is(.pa-pret, .pa-sous) { margin: 0; font-size: 14px; line-height: 19px; color: var(--app-gris); }
html.dans-app:not(.vitrine) #view-profil .pa-compte { display: grid; gap: 6px; }
html.dans-app:not(.vitrine) #view-profil .pa-etiquette { margin: 0; font: 500 12.5px/16px var(--sans); color: var(--app-gris); text-transform: none; letter-spacing: 0; }
html.dans-app:not(.vitrine) #view-profil .pa-tete { display: flex; align-items: flex-start; gap: 12px; }
html.dans-app:not(.vitrine) #view-profil .pa-retour { flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin: 10px 0 0 -8px; padding: 9px; border-radius: 18px; color: var(--app-encre); transform: scaleX(-1); }
html.dans-app:not(.vitrine) #view-profil .pa-retour:hover { background: var(--app-releve); }
html.dans-app:not(.vitrine) #view-profil .pa-tete > div { display: grid; gap: 8px; min-width: 0; }
html.dans-app:not(.vitrine) #view-profil .pa-tete h1 { margin: 0; font: italic 500 50px/56px var(--serif); letter-spacing: -0.6px; text-transform: none; color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-profil .pa-tete .pa-sous { font-size: 16px; line-height: 22px; }
html.dans-app:not(.vitrine) #view-profil .pa-identite { display: grid; gap: 16px; }
html.dans-app:not(.vitrine) #view-profil .pa-carte-champs { display: grid; gap: 12px; padding: 20px; border: 1px solid var(--app-ligne-forte); border-radius: 22px; background: var(--app-fond); }
html.dans-app:not(.vitrine) #view-profil .pa-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
html.dans-app:not(.vitrine) #view-profil .pa-champ { display: grid; gap: 6px; }
html.dans-app:not(.vitrine) #view-profil .pa-champ > span { font: 500 12.5px/16px var(--sans); color: var(--app-gris); text-transform: none; letter-spacing: 0; }
html.dans-app:not(.vitrine) #view-profil .pa-champ input { width: 100%; padding: 16px; border: 1px solid var(--app-ligne); border-radius: 14px; background: var(--app-fond); font: 400 16px/22px var(--sans); color: var(--app-encre); box-shadow: none; }
html.dans-app:not(.vitrine) #view-profil .pa-champ input:focus { border-color: var(--app-encre); outline: 0; }
html.dans-app:not(.vitrine) #view-profil .pa-champ small { font-size: 12.5px; line-height: 17px; color: var(--app-gris); text-transform: none; letter-spacing: 0; }
html.dans-app:not(.vitrine) #view-profil .pa-enregistrer { width: 100%; height: 52px; justify-content: center; font: 500 17px/21px var(--sans); text-transform: none; letter-spacing: 0; }
html.dans-app:not(.vitrine) #view-profil .pa-enregistrer:disabled { opacity: 0.45; }
html.dans-app:not(.vitrine) #view-profil .pa-legende { margin: 0; text-align: center; font-size: 12.5px; line-height: 17px; color: var(--app-gris); }
html.dans-app:not(.vitrine) #view-profil .pa-message { margin: 0; padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 19px; }
html.dans-app:not(.vitrine) #view-profil .pa-message.attention { background: var(--app-attention-lavis); color: var(--app-attention); }
html.dans-app:not(.vitrine) #view-profil .pa-message.mauvais { background: var(--app-mauvais-lavis); color: var(--app-mauvais); }
@media (prefers-reduced-motion: reduce) {
  html.dans-app:not(.vitrine) #view-profil .pa-trait { transition: none; }
  html.dans-app:not(.vitrine) #view-profil .pa-veine { animation: none; }
}
@media (max-width: 900px) {
  html.dans-app:not(.vitrine) #view-profil .profil-page.pr-app { padding: 8px 20px 120px; }
  html.dans-app:not(.vitrine) #view-profil .pa-tete h1 { font: 600 30px/36px var(--sans); letter-spacing: -0.5px; font-style: normal; }
  html.dans-app:not(.vitrine) #view-profil .pa-retour { margin-top: 0; }
  html.dans-app:not(.vitrine) #view-profil .pa-sourcil { padding-right: 52px; }
  html.dans-app:not(.vitrine) #view-profil .pa-tete { padding-right: 44px; }
  html.dans-app:not(.vitrine) #view-profil .pa-tete .pa-sous { font-size: 14px; line-height: 19px; }
}

/* Connexions, comme l'app (reseau.tsx) : les offres envoyées en cartes (logo, poste,
   maison), puis pour l'une d'elles les gens, recruteurs et équipe, dans un curseur. */
html.dans-app:not(.vitrine) #view-reseau > .home-top { display: none; }
html.dans-app:not(.vitrine) #view-reseau .reseau-page.res-app { display: grid; align-content: start; gap: 14px; max-width: 760px; margin: 0 auto; padding: 32px 36px 120px; }
html.dans-app:not(.vitrine) #view-reseau .res-app::before { display: none; }
html.dans-app:not(.vitrine) #view-reseau .ra-tete { display: grid; justify-items: start; gap: 18px; margin-bottom: 10px; }
html.dans-app:not(.vitrine) #view-reseau .ra-retour { display: grid; place-items: center; width: 30px; height: 30px; padding: 7px; border-radius: 15px; background: var(--app-releve); color: var(--app-encre); transform: scaleX(-1); }
html.dans-app:not(.vitrine) #view-reseau .ra-retour svg, html.dans-app:not(.vitrine) #view-reseau .ra-liste i svg { width: 100%; height: 100%; }
html.dans-app:not(.vitrine) #view-reseau .ra-tete h1 { margin: 0; font: italic 500 50px/56px var(--serif); letter-spacing: -0.6px; text-transform: none; color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-reseau .ra-attente { margin: 0; padding: 12px 0; font-size: 14px; line-height: 19px; color: var(--app-gris); }
html.dans-app:not(.vitrine) #view-reseau .ra-liste { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
html.dans-app:not(.vitrine) #view-reseau .ra-liste a { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--app-ligne-forte); border-radius: 18px; background: var(--app-fond); text-decoration: none; color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-reseau .ra-liste a:hover { background: var(--app-releve); }
html.dans-app:not(.vitrine) #view-reseau .ra-liste i { flex: none; display: grid; width: 18px; height: 18px; color: var(--app-gris); }
html.dans-app:not(.vitrine) #view-reseau :is(.ra-liste, .ra-offre) .ta-logo { width: 36px; height: 36px; border: 0; border-radius: 10px; }
html.dans-app:not(.vitrine) #view-reseau .ra-offre .ta-logo { width: 40px; height: 40px; }
html.dans-app:not(.vitrine) #view-reseau .ra-mots { flex: 1; min-width: 0; display: grid; gap: 1px; }
html.dans-app:not(.vitrine) #view-reseau .ra-mots b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 15px/21px var(--sans); }
html.dans-app:not(.vitrine) #view-reseau .ra-offre .ra-mots b { font-size: 16px; line-height: 22px; }
html.dans-app:not(.vitrine) #view-reseau .ra-mots small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; line-height: 17px; color: var(--app-gris); }
html.dans-app:not(.vitrine) #view-reseau .ra-offre { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-reseau .ra-offre:hover { opacity: 0.7; }
html.dans-app:not(.vitrine) #view-reseau .ra-vide { display: grid; justify-items: center; gap: 6px; padding: 40px 12px; text-align: center; }
html.dans-app:not(.vitrine) #view-reseau .ra-vide b { font: 600 17px/22px var(--sans); color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-reseau .ra-vide span { max-width: 340px; font-size: 14px; line-height: 19px; color: var(--app-gris); }
html.dans-app:not(.vitrine) #view-reseau .ra-vide .ta-pilule { margin-top: 16px; }
html.dans-app:not(.vitrine) #view-reseau .res-app .res-composer { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.dans-app:not(.vitrine) #view-reseau .res-app .res-gens { display: grid; gap: 14px; padding: 0; border: 0; border-radius: 0; background: none; }
html.dans-app:not(.vitrine) #view-reseau .res-app .res-gens { position: relative; }
html.dans-app:not(.vitrine) #view-reseau .res-app .res-gens-tete { position: absolute; top: 9px; right: 0; display: block; min-height: 0; }
html.dans-app:not(.vitrine) #view-reseau .res-app .res-gens-tete b { display: none; }
html.dans-app:not(.vitrine) #view-reseau .res-app .res-gens-tete .reperer { font: 500 14px/19px var(--sans); color: var(--app-encre); text-transform: none; letter-spacing: 0; }
html.dans-app:not(.vitrine) #view-reseau .res-app .res-split { justify-self: center; display: flex; gap: 0; padding: 3px; border: 0; border-radius: 999px; background: var(--app-releve); }
html.dans-app:not(.vitrine) #view-reseau .res-app .res-split button { padding: 8px 18px; border: 0; border-radius: 999px; background: none; font: 500 14px/19px var(--sans); color: var(--app-encre); text-transform: none; letter-spacing: 0; box-shadow: none; }
html.dans-app:not(.vitrine) #view-reseau .res-app .res-split button.on { background: var(--app-encre); color: var(--app-fond); }
html.dans-app:not(.vitrine) #view-reseau .res-app .res-split em { font-style: normal; opacity: 0.6; }
html.dans-app:not(.vitrine) #view-reseau .res-app .res-split em:empty { display: none; }
html.dans-app:not(.vitrine) #view-reseau .res-app .res-personnes { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
html.dans-app:not(.vitrine) #view-reseau .res-app .res-ligne { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
html.dans-app:not(.vitrine) #view-reseau .res-app .res-ligne + .res-ligne { border-top: 1px solid var(--app-ligne-forte); }
html.dans-app:not(.vitrine) #view-reseau .res-app .res-ligne a { display: flex; align-items: center; gap: 12px; padding: 12px 0; text-decoration: none; color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-reseau .res-app .res-ligne a > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
html.dans-app:not(.vitrine) #view-reseau .res-app .res-ligne b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 16px/22px var(--sans); }
html.dans-app:not(.vitrine) #view-reseau .res-app .res-ligne span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; line-height: 17px; color: var(--app-gris); }
html.dans-app:not(.vitrine) #view-reseau .res-app .res-ligne i { font-style: normal; color: var(--app-gris); }
html.dans-app:not(.vitrine) #view-reseau .res-app .res-gens-note { margin: 0; font-size: 12.5px; line-height: 17px; color: var(--app-gris); }
html.dans-app:not(.vitrine) #view-reseau .res-app .res-gens-note.alerte { color: var(--app-attention); }
@media (max-width: 900px) {
  html.dans-app:not(.vitrine) #view-reseau .reseau-page.res-app { padding: 8px 20px 120px; }
  html.dans-app:not(.vitrine) #view-reseau .ra-tete h1 { font: 600 30px/36px var(--sans); letter-spacing: -0.5px; font-style: normal; }
  html.dans-app:not(.vitrine) #view-reseau .ra-tete { padding-right: 44px; }
}

/* Le rythme, comme l'app (dossier/rythme.tsx) : le cadran qu'on tourne (5, 10, 20, 50
   par semaine), les trois positions et leur phrase, relecture et pause en interrupteurs. */
html.dans-app:not(.vitrine) #view-rythme .rythme-page.ry-app { display: grid; align-content: start; gap: 24px; max-width: 760px; margin: 0 auto; padding: 32px 36px 120px; }
html.dans-app:not(.vitrine) #view-rythme .ry-app::before { display: none; }
html.dans-app:not(.vitrine) #view-rythme .ry-tete { display: flex; align-items: flex-start; gap: 12px; }
html.dans-app:not(.vitrine) #view-rythme .ry-retour { flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin: 22px 0 0 -8px; padding: 8px; border-radius: 18px; color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-rythme .ry-retour:hover { background: var(--app-releve); }
html.dans-app:not(.vitrine) #view-rythme :is(.ry-retour, .ry-position) svg { width: 100%; height: 100%; }
html.dans-app:not(.vitrine) #view-rythme .ry-tete > div { display: grid; gap: 8px; }
html.dans-app:not(.vitrine) #view-rythme .ry-sourcil { margin: 0; font: 500 11px/16px var(--sans); letter-spacing: 1.8px; text-transform: uppercase; color: var(--app-gris); }
html.dans-app:not(.vitrine) #view-rythme .ry-tete h1 { margin: 0; font: italic 500 50px/56px var(--serif); letter-spacing: -0.6px; text-transform: none; color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-rythme .ry-carte { border: 1px solid var(--app-ligne-forte); border-radius: 22px; background: var(--app-fond); }
html.dans-app:not(.vitrine) #view-rythme .ry-carte-cadran { display: grid; justify-items: center; gap: 14px; padding: 22px; }
html.dans-app:not(.vitrine) #view-rythme .ry-cadran { position: relative; width: 200px; height: 200px; touch-action: none; cursor: grab; outline: 0; }
html.dans-app:not(.vitrine) #view-rythme .ry-cadran.tourne { cursor: grabbing; }
html.dans-app:not(.vitrine) #view-rythme .ry-cadran:focus-visible { box-shadow: 0 0 0 3px var(--app-ligne-forte); border-radius: 50%; }
html.dans-app:not(.vitrine) #view-rythme .ry-cadran svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
html.dans-app:not(.vitrine) #view-rythme .ry-piste { fill: none; stroke: var(--app-ligne-forte); stroke-opacity: 0.5; }
html.dans-app:not(.vitrine) #view-rythme .ry-arc { fill: none; stroke: var(--app-encre); stroke-linecap: round; transition: stroke-dashoffset 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
html.dans-app:not(.vitrine) #view-rythme .ry-cadran.tourne .ry-arc { transition: none; }
html.dans-app:not(.vitrine) #view-rythme .ry-cran-point { fill: var(--app-gris); }
html.dans-app:not(.vitrine) #view-rythme .ry-cran-point.on { fill: var(--app-encre); }
html.dans-app:not(.vitrine) #view-rythme .ry-poignee { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 14px; border: 1px solid var(--app-ligne-forte); background: var(--app-fond); box-shadow: 0 2px 6px rgba(20, 30, 50, 0.18); pointer-events: none; }
html.dans-app:not(.vitrine) #view-rythme .ry-centre { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; pointer-events: none; }
html.dans-app:not(.vitrine) #view-rythme .ry-centre b { font: 700 64px/68px var(--sans); letter-spacing: -1px; font-variant-numeric: tabular-nums; color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-rythme .ry-centre small { font-size: 12.5px; line-height: 17px; color: var(--app-gris); }
html.dans-app:not(.vitrine) #view-rythme .ry-centre .ry-engagees { color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-rythme .ry-phrase-semaine { margin: 0; text-align: center; font-size: 14px; line-height: 19px; color: var(--app-encre-douce); }
html.dans-app:not(.vitrine) #view-rythme .ry-crans { display: flex; gap: 8px; }
html.dans-app:not(.vitrine) #view-rythme .ry-cran { min-height: 0; padding: 8px 16px; border: 1px solid var(--app-ligne); border-radius: 999px; background: var(--app-fond); font: 500 14px/19px var(--sans); color: var(--app-encre); text-transform: none; letter-spacing: 0; box-shadow: none; cursor: pointer; }
html.dans-app:not(.vitrine) #view-rythme .ry-cran.on { background: var(--app-encre); border-color: var(--app-encre); color: var(--app-fond); }
html.dans-app:not(.vitrine) #view-rythme .ry-positions-bloc { display: grid; gap: 6px; }
html.dans-app:not(.vitrine) #view-rythme .ry-etiquette { margin: 0; padding: 0 4px; font: 500 12.5px/16px var(--sans); color: var(--app-gris); text-transform: none; letter-spacing: 0; }
html.dans-app:not(.vitrine) #view-rythme .ry-positions { display: flex; gap: 6px; padding: 5px; border: 1px solid var(--app-ligne); border-radius: 999px; background: rgba(255, 255, 255, 0.6); }
html.dans-app:not(.vitrine) #view-rythme .ry-position { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 0; padding: 12px 8px; border: 0; border-radius: 999px; background: none; font: 500 14px/19px var(--sans); color: var(--app-encre); text-transform: none; letter-spacing: 0; box-shadow: none; cursor: pointer; }
html.dans-app:not(.vitrine) #view-rythme .ry-position svg { flex: none; width: 20px; height: 20px; }
html.dans-app:not(.vitrine) #view-rythme .ry-position.on { background: var(--app-encre); color: var(--app-fond); }
html.dans-app:not(.vitrine) #view-rythme .ry-position:disabled { opacity: 0.85; }
html.dans-app:not(.vitrine) #view-rythme .ry-phrase { margin: 0; padding: 6px 6px 0; font: 400 20px/26px var(--sans); color: var(--app-encre-douce); }
html.dans-app:not(.vitrine) #view-rythme .ry-seuil { margin: 4px 0 0; padding: 0 6px; font-size: 12.5px; line-height: 17px; color: var(--app-gris); }
html.dans-app:not(.vitrine) #view-rythme .ry-inters { padding: 0 16px; }
html.dans-app:not(.vitrine) #view-rythme .ry-inter { position: relative; display: flex; align-items: center; gap: 12px; padding: 15px 0; cursor: pointer; text-transform: none; letter-spacing: 0; }
html.dans-app:not(.vitrine) #view-rythme .ry-inter + .ry-inter { border-top: 1px solid var(--app-ligne-forte); }
html.dans-app:not(.vitrine) #view-rythme .ry-inter > span { flex: 1; display: grid; gap: 2px; }
html.dans-app:not(.vitrine) #view-rythme .ry-inter b { font: 500 16px/22px var(--sans); letter-spacing: 0; color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-rythme .ry-inter small { font-size: 12.5px; line-height: 17px; letter-spacing: 0; color: var(--app-gris); }
html.dans-app:not(.vitrine) #view-rythme .ry-inter input { position: absolute; top: 50%; right: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
html.dans-app:not(.vitrine) #view-rythme .ry-inter i { position: relative; flex: none; width: 51px; height: 31px; border-radius: 16px; background: var(--app-ligne-forte); transition: background 0.2s; }
html.dans-app:not(.vitrine) #view-rythme .ry-inter i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: var(--app-fond); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); transition: transform 0.2s; }
html.dans-app:not(.vitrine) #view-rythme .ry-inter input:checked + i { background: var(--app-encre); }
html.dans-app:not(.vitrine) #view-rythme .ry-inter input:checked + i::after { transform: translateX(20px); }
html.dans-app:not(.vitrine) #view-rythme .ry-inter input:focus-visible + i { box-shadow: 0 0 0 3px var(--app-ligne-forte); }
html.dans-app:not(.vitrine) #view-rythme .ry-inter input:disabled + i { opacity: 0.6; }
html.dans-app:not(.vitrine) #view-rythme .ry-mot { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--app-mauvais-lavis); font-size: 14px; line-height: 19px; color: var(--app-mauvais); }
@media (max-width: 900px) {
  html.dans-app:not(.vitrine) #view-rythme .rythme-page.ry-app { padding: 8px 20px 120px; }
  html.dans-app:not(.vitrine) #view-rythme .ry-tete { padding-right: 44px; }
  html.dans-app:not(.vitrine) #view-rythme .ry-retour { margin-top: 20px; }
  html.dans-app:not(.vitrine) #view-rythme .ry-tete h1 { font: 600 30px/36px var(--sans); letter-spacing: -0.5px; font-style: normal; }
  html.dans-app:not(.vitrine) #view-rythme .ry-position { flex-direction: column; gap: 4px; padding: 10px 4px; font-size: 13px; }
}

/* Le compte, comme l'app (dossier/compte.tsx) : l'adresse en titre, des cartes de lignes
   à icône, les textes légaux, et la suppression dans une carte bordée de rouge. */
html.dans-app:not(.vitrine) #view-compte .compte-page.ca-app { display: grid; align-content: start; gap: 16px; max-width: 760px; margin: 0 auto; padding: 32px 36px 120px; }
html.dans-app:not(.vitrine) #view-compte .ca-app::before { display: none; }
html.dans-app:not(.vitrine) #view-compte .ca-tete { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
html.dans-app:not(.vitrine) #view-compte .ca-retour { flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin: 22px 0 0 -8px; padding: 8px; border-radius: 18px; color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-compte .ca-retour:hover { background: var(--app-releve); }
html.dans-app:not(.vitrine) #view-compte :is(.ca-retour, .ca-icone, .ca-fleche) svg { width: 100%; height: 100%; }
html.dans-app:not(.vitrine) #view-compte .ca-tete > div { display: grid; gap: 8px; min-width: 0; }
html.dans-app:not(.vitrine) #view-compte .ca-sourcil { margin: 0; font: 500 11px/16px var(--sans); letter-spacing: 1.8px; text-transform: uppercase; color: var(--app-gris); }
html.dans-app:not(.vitrine) #view-compte .ca-tete h1 { margin: 0; overflow: hidden; text-overflow: ellipsis; font: italic 500 50px/56px var(--serif); letter-spacing: -0.6px; text-transform: none; color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-compte .ca-carte { padding: 0 16px; border: 1px solid var(--app-ligne-forte); border-radius: 22px; background: var(--app-fond); }
html.dans-app:not(.vitrine) #view-compte .ca-ligne { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 0; padding: 15px 0; border: 0; border-radius: 0; background: none; box-shadow: none; text-align: left; text-decoration: none; text-transform: none; letter-spacing: 0; color: var(--app-encre); cursor: pointer; }
html.dans-app:not(.vitrine) #view-compte .ca-ligne + .ca-ligne { border-top: 1px solid var(--app-ligne-forte); }
html.dans-app:not(.vitrine) #view-compte .ca-ligne:hover { opacity: 0.6; }
html.dans-app:not(.vitrine) #view-compte .ca-icone { flex: none; display: grid; width: 24px; height: 18px; padding: 0 3px; color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-compte .ca-mots { flex: 1; min-width: 0; display: grid; gap: 2px; }
html.dans-app:not(.vitrine) #view-compte .ca-mots b { font: 500 16px/22px var(--sans); }
html.dans-app:not(.vitrine) #view-compte .ca-mots small { font-size: 12.5px; line-height: 17px; color: var(--app-gris); }
html.dans-app:not(.vitrine) #view-compte .ca-fleche { flex: none; display: grid; width: 18px; height: 18px; color: var(--app-gris); }
html.dans-app:not(.vitrine) #view-compte .ca-puce { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--app-encre); font: 500 12.5px/17px var(--sans); color: var(--app-fond); }
html.dans-app:not(.vitrine) #view-compte .ca-langues { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 0; }
html.dans-app:not(.vitrine) #view-compte .ca-puce-langue { min-height: 0; padding: 8px 14px; border: 0; border-radius: 999px; background: var(--app-releve); font: 500 12.5px/17px var(--sans); color: var(--app-encre); text-transform: none; letter-spacing: 0; box-shadow: none; cursor: pointer; }
html.dans-app:not(.vitrine) #view-compte .ca-puce-langue.on { background: var(--app-encre); color: var(--app-fond); }
html.dans-app:not(.vitrine) #view-compte .ca-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; padding-top: 4px; }
html.dans-app:not(.vitrine) #view-compte .ca-legal a { padding: 8px 6px; font: 500 14px/19px var(--sans); color: var(--app-encre); text-decoration: none; }
html.dans-app:not(.vitrine) #view-compte .ca-legal a:hover { text-decoration: underline; text-underline-offset: 3px; }
html.dans-app:not(.vitrine) #view-compte .ca-danger { border-color: var(--app-mauvais-lavis); }
html.dans-app:not(.vitrine) #view-compte .ca-ligne.danger :is(b, .ca-icone) { color: var(--app-mauvais); }
html.dans-app:not(.vitrine) #view-compte .ca-danger .cp-confirme { display: grid; gap: 10px; padding: 0 0 14px; }
html.dans-app:not(.vitrine) #view-compte .ca-danger .cp-confirme[hidden] { display: none; }
html.dans-app:not(.vitrine) #view-compte .ca-danger .cp-confirme label { display: grid; gap: 6px; font: 400 12.5px/17px var(--sans); color: var(--app-gris); text-transform: none; letter-spacing: 0; }
html.dans-app:not(.vitrine) #view-compte .ca-danger .cp-confirme input { width: 100%; padding: 16px; border: 1px solid var(--app-ligne); border-radius: 14px; background: var(--app-fond); font: 400 16px/22px var(--sans); color: var(--app-encre); box-shadow: none; }
html.dans-app:not(.vitrine) #view-compte .ca-danger .cp-confirme input:focus { border-color: var(--app-encre); outline: 0; }
html.dans-app:not(.vitrine) #view-compte .ca-danger .cp-erreur { margin: 0; font-size: 12.5px; line-height: 17px; color: var(--app-mauvais); }
html.dans-app:not(.vitrine) #view-compte .ca-danger .cp-confirme-actes { display: flex; gap: 10px; }
html.dans-app:not(.vitrine) #view-compte .ca-danger .cp-confirme-actes button { height: 36px; min-height: 0; padding: 0 16px; border-radius: 999px; font: 500 14px/18px var(--sans); text-transform: none; letter-spacing: 0; box-shadow: none; }
html.dans-app:not(.vitrine) #view-compte .ca-danger .cp-annuler { border: 1px solid var(--app-ligne-forte); background: var(--app-fond); color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-compte .ca-danger .cp-detruire { border: 0; background: var(--app-mauvais); color: var(--app-fond); }
html.dans-app:not(.vitrine) #view-compte .ca-danger .cp-detruire:disabled { opacity: 0.45; }
@media (max-width: 900px) {
  html.dans-app:not(.vitrine) #view-compte .compte-page.ca-app { padding: 8px 20px 120px; }
  html.dans-app:not(.vitrine) #view-compte .ca-tete { padding-right: 44px; }
  html.dans-app:not(.vitrine) #view-compte .ca-retour { margin-top: 20px; }
  html.dans-app:not(.vitrine) #view-compte .ca-tete h1 { font: 600 24px/30px var(--sans); letter-spacing: -0.4px; font-style: normal; }
}

/* L'atelier, comme l'app (ui/AtelierOrdi.tsx, ui/Atelier.tsx) : Carte, puis CV. Ordinateur :
   « Remplir » à gauche, l'objet sur le plateau gris, MAXX à droite. Téléphone : l'objet en
   haut, les parties en puces, MAXX en bas. */
/* la bulle d'aide reste ; sur ordinateur l'atelier lui laisse la place sous les colonnes */
@media (min-width: 901px) { html.atelier-on.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-ordi { padding-bottom: 80px; } }
@media (max-width: 900px) { html.atelier-on #lat-switch { display: none !important; } }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-hote { position: relative; min-height: 0; height: 100dvh; max-width: none; margin: 0; padding: 0; overflow: hidden; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-hote::before { display: none; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-hote :is(h1, p, label, button, span, b, small) { text-transform: none; letter-spacing: 0; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-hote button { min-height: 0; box-shadow: none; font-family: var(--sans); cursor: pointer; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-hote button:disabled { cursor: default; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-page { height: 100%; display: flex; flex-direction: column; box-sizing: border-box; color: var(--app-encre); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-espace { flex: 1; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-etiquette { font: 500 12.5px/16px var(--sans); color: var(--app-gris); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-legende { margin: 0; font: 400 12.5px/17px var(--sans); color: var(--app-gris); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-petit-gris { margin: 0; font: 400 14px/19px var(--sans); color: var(--app-gris); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-retour { width: 36px; height: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center; margin-left: -8px; border-radius: 18px; color: var(--app-encre); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-retour:hover { background: var(--app-releve); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-retour svg { width: 20px; height: 20px; }

/* ordinateur */
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-ordi { gap: 18px; padding: 22px 36px 24px; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-tete { display: flex; align-items: center; gap: 12px; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-titre { margin: 0; font: 500 40px/46px var(--serif); letter-spacing: -0.4px; color: var(--app-encre); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-action { height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--app-encre); color: var(--app-fond); font: 500 14px/1 var(--sans); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-action:disabled { opacity: 0.45; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-action:not(:disabled):active { opacity: 0.75; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-colonnes { flex: 1; min-height: 0; display: flex; gap: 18px; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-col { display: flex; flex-direction: column; min-height: 0; border: 0.5px solid var(--app-ligne-forte); border-radius: 22px; background: var(--app-fond); overflow: hidden; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-remplir { flex: none; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-cote { flex: none; display: flex; min-height: 0; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-cote > .at-maxx { flex: 1; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-entete { display: flex; align-items: center; gap: 8px; padding: 14px 16px 8px; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-cible { font: 400 12.5px/17px var(--sans); color: var(--app-gris); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-defile { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 12px; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-entete-bloc { padding: 0 12px 10px; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-rang { padding: 0 8px; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-ligne { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 7px 10px; border: 0; border-radius: 12px; background: transparent; color: var(--app-encre); text-align: left; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-ligne:hover, html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-ligne.on { background: var(--app-releve); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-point { flex: none; width: 8px; height: 8px; border-radius: 4px; border: 1.5px solid var(--app-ligne-forte); box-sizing: border-box; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-point.plein { background: var(--app-encre); border-color: var(--app-encre); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-point.creux { border-color: var(--app-encre-douce); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-ligne-mots { flex: 1; min-width: 0; display: grid; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-ligne-mots b { font: 500 16px/22px var(--sans); color: var(--app-encre); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-ligne-mots small { font: 400 12.5px/17px var(--sans); color: var(--app-gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-ligne-mots small.a-faire { color: var(--app-encre-douce); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-badge, html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-reste { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; font: 500 12px/1 var(--sans); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-badge { background: var(--app-encre); color: var(--app-fond); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-reste { border: 0.5px solid var(--app-ligne-forte); color: var(--app-encre-douce); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-chevron { display: inline-flex; color: var(--app-gris); transition: transform 0.2s; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-chevron svg { width: 14px; height: 14px; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-ligne.on .at-chevron { transform: rotate(180deg); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-formulaire { display: grid; gap: 12px; padding: 10px 10px 14px; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-gestes-gauche { display: grid; gap: 8px; padding-top: 10px; border-top: 0.5px solid var(--app-ligne); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-centre { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-plateau { position: relative; flex: 1; min-height: 0; border-radius: 22px; background: var(--app-releve); overflow: hidden; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-plateau.pose .at-apercu-hote { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-plateau.lisible .at-apercu-hote { position: absolute; inset: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; padding: 28px 0 56px; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-plateau.fige .at-apercu-hote { position: absolute; inset: 0; overflow-y: auto; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-papier { flex: none; border-radius: 2px; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12) !important; transition: transform 0.18s, box-shadow 0.18s; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-papier.fige { box-shadow: none !important; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-plateau.pose .at-papier:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18) !important; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-loupe { position: absolute; top: 12px; right: 14px; height: 28px; padding: 0 12px; border: 0; border-radius: 14px; background: var(--app-fond); font: 400 12.5px/17px var(--sans); color: var(--app-encre-douce); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-pied { position: absolute; left: 14px; right: 14px; bottom: 12px; display: flex; align-items: center; gap: 8px; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-voile { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(244, 244, 245, 0.82); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-pouls { width: 7px; height: 7px; border-radius: 4px; background: var(--app-encre); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-pouls.actif { animation: at-pouls 1.2s ease-in-out infinite; }
@keyframes at-pouls { 50% { opacity: 0.3; } }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-fil { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 0 16px 12px; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-fil-vide { margin: 0; font: 400 15px/22px var(--sans); color: var(--app-gris); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-maxx-mot { margin: 0; font: 400 15.5px/23px var(--sans); color: var(--app-encre); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-maxx-mot.attente { color: var(--app-gris); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-toi { align-self: flex-end; max-width: 88%; margin: 0; padding: 8px 12px; border-radius: 16px 16px 6px 16px; background: var(--app-releve); font: 400 15px/21px var(--sans); color: var(--app-encre); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-maxx.compact { flex: none; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-dernier { margin: 0; padding: 0 16px 10px; font: 400 15px/21px var(--sans); color: var(--app-encre); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-pied-maxx { display: grid; gap: 10px; padding: 12px; border-top: 0.5px solid var(--app-ligne); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-puces { display: flex; flex-wrap: wrap; gap: 6px; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-puces.occupe { opacity: 0.45; pointer-events: none; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-puce { padding: 4px 10px; border: 0; border-radius: 999px; background: var(--app-releve); font: 500 12.5px/17px var(--sans); color: var(--app-encre); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-puce:hover { background: var(--app-ligne-forte); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-dire { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 8px 0 18px; border-radius: 26px; background: var(--app-releve); box-sizing: border-box; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-dire input { flex: 1; min-width: 0; height: 52px; padding: 0; border: 0; background: transparent; font: 400 16px/22px var(--sans); color: var(--app-encre); box-shadow: none; outline: 0; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-dire input::placeholder { color: var(--app-gris); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-micro, html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-envoyer { flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 17px; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--app-gris); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-micro svg, html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-envoyer svg { width: 18px; height: 18px; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-micro.on { background: var(--app-mauvais); color: var(--app-fond); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-dire.plein .at-envoyer { background: var(--app-encre); color: var(--app-fond); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-message { margin: 0; padding: 10px 12px; border-radius: 12px; font: 400 14px/19px var(--sans); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-message.mauvais { background: var(--app-mauvais-lavis); color: var(--app-mauvais); }

/* les pièces des feuilles */
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-champ { display: grid; gap: 6px; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-champ > span { font: 500 12.5px/16px var(--sans); color: var(--app-gris); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-champ-saisie { width: 100%; box-sizing: border-box; padding: 16px; border: 1px solid var(--app-ligne); border-radius: 14px; background: var(--app-fond); font: 400 16px/22px var(--sans); color: var(--app-encre); box-shadow: none; resize: vertical; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) textarea.at-champ-saisie { min-height: 72px; padding-top: 12px; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-champ-saisie:focus { border-color: var(--app-encre); outline: 0; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-puces-fonds { display: flex; flex-wrap: wrap; gap: 8px; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-chip { padding: 8px 14px; border: 0; border-radius: 999px; background: var(--app-releve); font: 500 14px/19px var(--sans); color: var(--app-encre); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-chip.on { background: var(--app-encre); color: var(--app-fond); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-inter { position: relative; display: flex; align-items: center; gap: 12px; padding: 15px 0; cursor: pointer; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-inter-mots { flex: 1; min-width: 0; display: grid; gap: 2px; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-inter-mots b { font: 500 16px/22px var(--sans); color: var(--app-encre); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-inter-mots small { font: 400 12.5px/17px var(--sans); color: var(--app-gris); overflow-wrap: anywhere; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-inter input { position: absolute; top: 50%; right: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-inter-piste { position: relative; flex: none; width: 51px; height: 31px; border-radius: 16px; background: var(--app-ligne-forte); transition: background 0.2s; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-inter-piste::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: var(--app-fond); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); transition: transform 0.2s; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-inter input:checked + .at-inter-piste { background: var(--app-encre); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-inter input:checked + .at-inter-piste::after { transform: translateX(20px); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-inter input:focus-visible + .at-inter-piste { box-shadow: 0 0 0 3px var(--app-ligne-forte); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-inter input:disabled + .at-inter-piste { opacity: 0.6; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-boutons-texte { display: flex; flex-wrap: wrap; gap: 4px; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-texte { height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; font: 500 14px/1 var(--sans); color: var(--app-encre); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-texte:hover { background: var(--app-releve); }

/* téléphone */
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-tel { background: var(--app-fond); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-tete-tel { display: flex; align-items: center; gap: 8px; padding: calc(env(safe-area-inset-top) + 10px) 60px 6px 20px; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-tete-tel .at-retour { margin-left: 0; justify-content: flex-start; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-tete-tel .at-retour:hover { background: transparent; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-tete-tel .at-retour svg { width: 22px; height: 22px; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-titre-tel { flex: 1; margin: 0; font: 600 17px/22px var(--sans); letter-spacing: -0.2px; color: var(--app-encre); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-action-tel { padding: 6px 0; border: 0; background: transparent; font: 500 16px/22px var(--sans); color: var(--app-encre); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-action-tel:disabled { opacity: 0.35; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-scene { position: relative; flex: 1; min-height: 150px; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-scene .at-apercu-hote { position: absolute; inset: 0; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-scene.pose .at-apercu-hote { display: flex; align-items: center; justify-content: center; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-scene.grand .at-apercu-hote { overflow-y: auto; display: flex; flex-direction: column; align-items: center; padding: 8px 0; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-scene.fige .at-apercu-hote { overflow-y: auto; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-tel .at-papier { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-tel .at-papier.fige { box-shadow: none !important; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-feuille { max-height: 210px; overflow-y: auto; padding: 0 20px 4px; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-feuille > * { padding-bottom: 8px; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-tel .at-propositions, html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-tel .at-alerte { padding: 0 20px 6px; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-bas { display: grid; gap: 8px; padding: 8px 20px max(env(safe-area-inset-bottom), 10px); border-top: 0.5px solid var(--app-ligne); background: var(--app-fond); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-dire-tel { margin: 0; font: 400 14px/19px var(--sans); color: var(--app-encre-douce); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-parties-tel { display: flex; align-items: center; gap: 6px; padding-right: 8px; overflow-x: auto; scrollbar-width: none; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-parties-tel::-webkit-scrollbar { display: none; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-partie-tel { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 8px; border: 0; border-radius: 15px; background: var(--app-releve); font: 500 12.5px/17px var(--sans); color: var(--app-encre); white-space: nowrap; }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-partie-tel.on { background: var(--app-encre); color: var(--app-fond); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-partie-tel.at-agrandir { color: var(--app-encre-douce); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-point-tel { width: 6px; height: 6px; border-radius: 3px; background: var(--app-encre); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-partie-tel.on .at-point-tel { background: var(--app-fond); }

/* la carte de visite (ui/CarteVisite.tsx) : une plaque, quatre coins, le nœud */
.vc-carte { position: relative; width: 100%; aspect-ratio: 1.62; border: 0.5px solid; border-radius: 1px; overflow: hidden; box-sizing: border-box; text-align: center; }
.vc-carte.cliquable { cursor: pointer; }
.vc-carte p { margin: 0; text-transform: none; }
.vc-coin { position: absolute; border: 0 solid currentColor; }
.vc-coin.hg { top: var(--vc-in); left: var(--vc-in); border-top-width: 0.5px; border-left-width: 0.5px; }
.vc-coin.hd { top: var(--vc-in); right: var(--vc-in); border-top-width: 0.5px; border-right-width: 0.5px; }
.vc-coin.bg { bottom: var(--vc-in); left: var(--vc-in); border-bottom-width: 0.5px; border-left-width: 0.5px; }
.vc-coin.bd { bottom: var(--vc-in); right: var(--vc-in); border-bottom-width: 0.5px; border-right-width: 0.5px; }
.vc-marque { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.vc-marque img { object-fit: contain; }
.vc-marque b { margin-top: 5px; font-family: var(--sans); font-weight: 700; }
.vc-marque small { margin-top: 1px; font-family: var(--sans); font-weight: 400; color: var(--vc-douce); }
.vc-milieu { position: absolute; left: 28px; right: 28px; top: 28px; bottom: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.vc-milieu p { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-prenom { font-family: var(--serif); font-style: italic; font-weight: 500; }
.vc-prenom.vc-vide { color: var(--vc-douce); }
.vc-nom { width: 100%; margin-top: 1px !important; font-family: var(--serif); font-weight: 600; }
.vc-etude { width: 100%; font-family: var(--serif); font-style: italic; font-weight: 500; }
.vc-titre { width: 100%; font-family: var(--sans); font-weight: 500; text-transform: uppercase !important; color: var(--vc-douce); }
.vc-bas { position: absolute; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.vc-filet { display: block; height: 0.5px; background: currentColor; opacity: 0.55; }
.vc-ligne { display: flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; font-family: var(--sans); white-space: nowrap; }
.vc-ligne span { overflow: hidden; text-overflow: ellipsis; }
.vc-mail { min-width: 0; }
.vc-carre { flex: none; background: currentColor; opacity: 0.45; }
.vc-lieu { max-width: 100%; font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--vc-douce); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* l'écran Carte */
html.dans-app:not(.vitrine) #view-carte .ca-feuille { display: grid; gap: 12px; }
html.dans-app:not(.vitrine) #view-carte .ca-tenue { display: grid; gap: 18px; }
html.dans-app:not(.vitrine) #view-carte .at-papier:has(.ca-tenue) { box-shadow: none !important; border-radius: 0; }
html.dans-app:not(.vitrine) #view-carte .ca-tenue .vc-carte { box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12); }
html.dans-app:not(.vitrine) #view-carte .at-tel .ca-tenue .vc-carte { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); }
html.dans-app:not(.vitrine) #view-carte .ca-sous { display: flex; align-items: center; justify-content: center; gap: 14px; }
html.dans-app:not(.vitrine) #view-carte .ca-sous i { width: 3px; height: 3px; background: var(--app-encre); opacity: 0.35; }
html.dans-app:not(.vitrine) #view-carte .ca-sous-lien { padding: 0; border: 0; background: transparent; font: 500 12.5px/16px var(--sans); letter-spacing: 1.6px !important; color: var(--app-gris); text-decoration: none; }
html.dans-app:not(.vitrine) #view-carte .ca-sous-lien:hover { color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-carte .ca-recues { display: grid; gap: 12px; max-width: 560px; margin: 0 auto; padding: 20px 20px 16px; }
html.dans-app:not(.vitrine) #view-carte .ca-garder { display: flex; gap: 8px; align-items: flex-start; }
html.dans-app:not(.vitrine) #view-carte .ca-garder .at-champ-saisie { flex: 1; min-width: 0; }
html.dans-app:not(.vitrine) #view-carte .ca-garder .ta-pilule { height: 52px; }
html.dans-app:not(.vitrine) #view-carte .ca-garder .ta-pilule:disabled { opacity: 0.45; }
html.dans-app:not(.vitrine) #view-carte .ca-recue { display: grid; gap: 6px; }
html.dans-app:not(.vitrine) #view-carte .ca-recue-bas { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* l'écran CV (app/cv.tsx) */
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-chevron.on { transform: rotate(180deg); }
html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-aide { font: 400 12.5px/17px var(--sans); color: var(--app-gris); }
html.dans-app:not(.vitrine) #view-cv .cv-secondaire { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border: 0.5px solid var(--app-ligne-forte); border-radius: 999px; background: var(--app-fond); font: 500 14px/1 var(--sans); color: var(--app-encre); white-space: nowrap; }
html.dans-app:not(.vitrine) #view-cv .cv-secondaire:hover { background: var(--app-releve); }
html.dans-app:not(.vitrine) #view-cv .cv-secondaire.plein { width: 100%; height: 48px; font-size: 16px; }
html.dans-app:not(.vitrine) #view-cv .cv-secondaire.petit { align-self: flex-start; }
html.dans-app:not(.vitrine) #view-cv .cv-primaire { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; border: 0; border-radius: 999px; background: var(--app-encre); color: var(--app-fond); font: 500 16px/1 var(--sans); }
html.dans-app:not(.vitrine) #view-cv .cv-primaire svg { width: 16px; height: 16px; }
html.dans-app:not(.vitrine) #view-cv .cv-coin { display: inline-flex; align-items: center; gap: 12px; }
html.dans-app:not(.vitrine) #view-cv .cv-coin-mot { display: inline-flex; align-items: center; gap: 6px; font: 400 12.5px/17px var(--sans); color: var(--app-encre-douce); }
html.dans-app:not(.vitrine) #view-cv .cv-coin-mot.mauvais { color: var(--app-mauvais); }
html.dans-app:not(.vitrine) #view-cv .cv-pastille { width: 7px; height: 7px; border-radius: 4px; background: var(--app-attention); }
html.dans-app:not(.vitrine) #view-cv .cv-pastille.ok { background: var(--app-ok); }
html.dans-app:not(.vitrine) #view-cv .cv-pastille.mauvais { background: var(--app-mauvais); }

/* le tableau de bord, en tête de « Remplir » */
html.dans-app:not(.vitrine) #view-cv .cvt-guide { display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 10px; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--accent); color: #fff; text-align: left; cursor: pointer; font: inherit; transition: background 0.2s; }
html.dans-app:not(.vitrine) #view-cv .cvt-guide:hover { background: var(--accent-hover); }
html.dans-app:not(.vitrine) #view-cv .cvt-guide:focus-visible { outline: 2px solid var(--app-encre); outline-offset: 2px; }
html.dans-app:not(.vitrine) #view-cv .cvt-guide-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 17px; background: rgba(255, 255, 255, 0.18); }
html.dans-app:not(.vitrine) #view-cv .cvt-guide-ico svg { width: 18px; height: 18px; }
html.dans-app:not(.vitrine) #view-cv .cvt-guide-mots { display: grid; gap: 2px; flex: 1; min-width: 0; }
html.dans-app:not(.vitrine) #view-cv .cvt-guide-mots b { font: 500 14px/18px var(--sans); }
html.dans-app:not(.vitrine) #view-cv .cvt-guide-mots small { font: 400 12px/16px var(--sans); opacity: 0.82; }
html.dans-app:not(.vitrine) #view-cv .cvt-guide > svg { flex: none; width: 16px; height: 16px; }
html.dans-app:not(.vitrine) #view-cv .cvt { display: grid; gap: 8px; padding: 12px; border: 1.5px solid var(--app-ligne-forte); border-radius: 14px; background: var(--app-fond); transition: border-color 0.3s; }
html.dans-app:not(.vitrine) #view-cv .cvt.fete { border-color: var(--app-ok); }
html.dans-app:not(.vitrine) #view-cv .cvt-pas { display: flex; gap: 4px; }
html.dans-app:not(.vitrine) #view-cv .cvt-pas i { flex: 1; height: 3px; border-radius: 2px; background: var(--app-ligne-forte); }
html.dans-app:not(.vitrine) #view-cv .cvt-pas i.ok { background: var(--app-encre); }
html.dans-app:not(.vitrine) #view-cv .cvt-pas i.ici { background: var(--app-encre); opacity: 0.45; }
html.dans-app:not(.vitrine) #view-cv .cvt-pas i.ok.ici { opacity: 1; }
html.dans-app:not(.vitrine) #view-cv .cvt-rang { display: flex; align-items: center; gap: 8px; min-width: 0; }
html.dans-app:not(.vitrine) #view-cv .cvt-etiquette { font: 500 12.5px/16px var(--sans); color: var(--app-gris); }
html.dans-app:not(.vitrine) #view-cv .cvt-etiquette:first-child { flex: 1; }
html.dans-app:not(.vitrine) #view-cv .cvt-etiquette.encre { color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-cv .cvt-petit { flex: 1; margin: 0; font: 400 14px/19px var(--sans); color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-cv .cvt-legende { margin: 0; font: 400 12.5px/17px var(--sans); color: var(--app-gris); text-align: left; }
html.dans-app:not(.vitrine) #view-cv .cvt-trait { display: block; height: 0.5px; margin: 2px 0; background: var(--app-ligne-forte); }
html.dans-app:not(.vitrine) #view-cv .cvt-doc { display: inline-flex; color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-cv .cvt-doc svg { width: 15px; height: 15px; }
html.dans-app:not(.vitrine) #view-cv .cvt-nom { flex: 1; min-width: 0; font: 500 15px/20px var(--sans); color: var(--app-encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.dans-app:not(.vitrine) #view-cv .cvt-rang .cvt-etiquette.encre:not(:last-child) { flex: 1; }
html.dans-app:not(.vitrine) #view-cv .cvt-puce { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--app-releve); font: 500 12.5px/17px var(--sans); color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-cv .cvt-puce.ok { background: var(--app-ok-lavis); color: var(--app-ok); }
html.dans-app:not(.vitrine) #view-cv .cvt-puce.attention { background: var(--app-attention-lavis); color: var(--app-attention); }
html.dans-app:not(.vitrine) #view-cv .cvt-reessayer { justify-self: start; }
html.dans-app:not(.vitrine) #view-cv .cvt-ats { display: grid; gap: 6px; width: 100%; padding: 0; border: 0; background: transparent; text-align: left; }
html.dans-app:not(.vitrine) #view-cv .cvt-chevron { display: inline-flex; color: var(--app-gris); transition: transform 0.2s; }
html.dans-app:not(.vitrine) #view-cv .cvt-chevron svg { width: 12px; height: 12px; }
html.dans-app:not(.vitrine) #view-cv .cvt-chevron.on { transform: rotate(180deg); }
html.dans-app:not(.vitrine) #view-cv .cvt-jauge { display: block; height: 4px; border-radius: 2px; background: var(--app-ligne-forte); overflow: hidden; }
html.dans-app:not(.vitrine) #view-cv .cvt-jauge i { display: block; height: 4px; border-radius: 2px; background: var(--app-encre); }
html.dans-app:not(.vitrine) #view-cv .cvt-point { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 0; border: 0; background: transparent; text-align: left; color: var(--app-gris); }
html.dans-app:not(.vitrine) #view-cv .cvt-point > span { flex: 1; display: grid; }
html.dans-app:not(.vitrine) #view-cv .cvt-point b { font: 400 14px/19px var(--sans); color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-cv .cvt-point small { font: 500 12.5px/16px var(--sans); color: var(--app-encre-douce); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.dans-app:not(.vitrine) #view-cv .cvt-point svg { width: 12px; height: 12px; }
html.dans-app:not(.vitrine) #view-cv .cv-puce-ats { flex: none; width: 6px; height: 6px; border-radius: 3px; background: var(--app-encre); }
html.dans-app:not(.vitrine) #view-cv .cv-puce-ats.conseil { background: var(--app-ligne-forte); }

/* la page sur le plateau, le pied, le voile d'accueil */
html.dans-app:not(.vitrine) #view-cv .cv-page-app { position: relative; overflow: hidden; background: var(--app-fond); }
html.dans-app:not(.vitrine) #view-cv .cv-page-app .feuille-cv { background: var(--app-fond); }
html.dans-app:not(.vitrine) #view-cv .cv-page-app .cv-ici { box-shadow: 0 0 0 1.3pt var(--app-ligne-forte); background: var(--app-releve); }
html.dans-app:not(.vitrine) #view-cv .cvp-annuler { height: 26px; padding: 0 10px; border: 0; border-radius: 13px; background: var(--app-fond); font: 500 12.5px/17px var(--sans); color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-cv .cvp-pages { padding: 4px 10px; border-radius: 999px; background: var(--app-fond); font: 500 12.5px/17px var(--sans); color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-cv .cvp-pages.attention { color: var(--app-attention); }
html.dans-app:not(.vitrine) #view-cv .cvp-legende { font: 400 12.5px/17px var(--sans); color: var(--app-gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
html.dans-app:not(.vitrine) #view-cv .cvv { width: 100%; max-width: 400px; display: grid; gap: 10px; justify-items: center; padding: 22px; border: 0.5px solid var(--app-ligne-forte); border-radius: 18px; background: var(--app-fond); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08) !important; box-sizing: border-box; }
html.dans-app:not(.vitrine) #view-cv .cvv-titre { margin: 0; font: 500 30px/34px var(--serif); letter-spacing: -0.3px; text-align: center; color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-cv .cvv-petit { margin: 0 0 6px; font: 400 14px/19px var(--sans); text-align: center; color: var(--app-encre-douce); }
html.dans-app:not(.vitrine) #view-cv .cvv-legende { margin: 0 0 4px; font: 400 12.5px/17px var(--sans); text-align: center; color: var(--app-gris); }

/* MAXX propose : avant barré, après en clair, le tick et la croix */
html.dans-app:not(.vitrine) #view-cv .cv-proposee { display: flex; align-items: flex-start; gap: 10px; padding: 10px; border-left: 3px solid var(--app-encre); border-radius: 14px; background: var(--app-releve); }
html.dans-app:not(.vitrine) #view-cv .cv-proposee-mots { flex: 1; min-width: 0; display: grid; gap: 3px; }
html.dans-app:not(.vitrine) #view-cv .cv-proposee-mots b, html.dans-app:not(.vitrine) #view-cv .cv-retouche b { font: 500 12.5px/16px var(--sans); color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-cv :is(.cv-proposee-mots, .cv-retouche) s { font: 400 12.5px/17px var(--sans); color: var(--app-gris); }
html.dans-app:not(.vitrine) #view-cv :is(.cv-proposee-mots, .cv-retouche) p { margin: 0; font: 400 14px/19px var(--sans); color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-cv .cv-proposee-actes { display: flex; flex-direction: column; gap: 6px; }
html.dans-app:not(.vitrine) #view-cv :is(.cvr-oui, .cvr-non) { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 17px; display: inline-flex; align-items: center; justify-content: center; }
html.dans-app:not(.vitrine) #view-cv :is(.cvr-oui, .cvr-non) svg { width: 18px; height: 18px; }
html.dans-app:not(.vitrine) #view-cv .cvr-oui { background: var(--app-ok-lavis); color: var(--app-ok); }
html.dans-app:not(.vitrine) #view-cv .cvr-non { background: var(--app-mauvais-lavis); color: var(--app-mauvais); }
html.dans-app:not(.vitrine) #view-cv .cv-retouches { display: grid; gap: 8px; }
html.dans-app:not(.vitrine) #view-cv .cv-retouches-tete { display: flex; align-items: center; gap: 10px; font: 500 12.5px/16px var(--sans); color: var(--app-gris); }
html.dans-app:not(.vitrine) #view-cv .cv-retouches-tete span { flex: 1; }
html.dans-app:not(.vitrine) #view-cv .cv-retouches-tete button { padding: 0; border: 0; background: transparent; font: 500 12.5px/16px var(--sans); color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-cv .cv-retouches-liste { display: flex; gap: 8px; overflow-x: auto; }
html.dans-app:not(.vitrine) #view-cv .cv-retouches.vertical .cv-retouches-liste { flex-direction: column; max-height: 260px; overflow-y: auto; }
html.dans-app:not(.vitrine) #view-cv .cv-retouche { position: relative; flex: none; width: 240px; display: grid; gap: 3px; padding: 10px 52px 10px 10px; border-left: 3px solid var(--app-encre); border-radius: 14px; background: var(--app-releve); box-sizing: border-box; }
html.dans-app:not(.vitrine) #view-cv .cv-retouches.vertical .cv-retouche { width: auto; }
html.dans-app:not(.vitrine) #view-cv .cv-retouche .cv-proposee-actes { position: absolute; top: 8px; right: 8px; }

/* les formulaires de l'app */
html.dans-app:not(.vitrine) #view-cv .cv-forme { display: grid; gap: 12px; }
html.dans-app:not(.vitrine) #view-cv .cv-forme.serre { gap: 8px; }
html.dans-app:not(.vitrine) #view-cv .cv-groupe { display: grid; gap: 6px; }
html.dans-app:not(.vitrine) #view-cv .cv-etiquette { margin: 0; font: 500 12.5px/16px var(--sans); color: var(--app-gris); }
html.dans-app:not(.vitrine) #view-cv .cv-rangee { display: flex; flex-wrap: wrap; gap: 6px; }
html.dans-app:not(.vitrine) #view-cv .cv-rangee.centre { align-items: center; gap: 10px; }
html.dans-app:not(.vitrine) #view-cv .cv-rangee.defile { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 8px; }
html.dans-app:not(.vitrine) #view-cv .cv-chip { flex: none; padding: 8px 14px; border: 0; border-radius: 999px; background: var(--app-releve); font: 500 14px/19px var(--sans); font-style: normal; color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-cv .cv-chip.petit { padding: 4px 10px; font-size: 12.5px; line-height: 17px; }
html.dans-app:not(.vitrine) #view-cv .cv-chip.on { background: var(--app-encre); color: var(--app-fond); }
html.dans-app:not(.vitrine) #view-cv .cv-modele-mini { flex: none; display: grid; gap: 4px; padding: 0; border: 0; background: transparent; text-align: left; opacity: 0.7; }
html.dans-app:not(.vitrine) #view-cv .cv-modele-mini.on { opacity: 1; }
html.dans-app:not(.vitrine) #view-cv .cv-mini-cadre { display: flex; justify-content: center; padding: 3px; border: 0.5px solid var(--app-ligne-forte); border-radius: 8px; background: var(--app-fond); }
html.dans-app:not(.vitrine) #view-cv .cv-modele-mini.on .cv-mini-cadre { padding: 1.5px; border: 2px solid var(--app-encre); }
html.dans-app:not(.vitrine) #view-cv .cv-mini { position: relative; overflow: hidden; display: block; background: var(--app-fond); pointer-events: none; }
html.dans-app:not(.vitrine) #view-cv .cv-modele-mini small { font: 400 12.5px/17px var(--sans); color: var(--app-gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.dans-app:not(.vitrine) #view-cv .cv-modele-mini.on small { color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-cv .cv-teinte { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 13px; box-sizing: border-box; }
html.dans-app:not(.vitrine) #view-cv .cv-teinte.on { border: 3px solid var(--app-encre); }
html.dans-app:not(.vitrine) #view-cv .cv-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
html.dans-app:not(.vitrine) #view-cv .cv-inter { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
html.dans-app:not(.vitrine) #view-cv .cv-inter > span { font: 400 14px/19px var(--sans); color: var(--app-encre-douce); }
html.dans-app:not(.vitrine) #view-cv .cv-inter input { position: absolute; top: 50%; right: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
html.dans-app:not(.vitrine) #view-cv .cv-inter input:checked + .at-inter-piste { background: var(--app-encre); }
html.dans-app:not(.vitrine) #view-cv .cv-inter input:checked + .at-inter-piste::after { transform: translateX(20px); }
html.dans-app:not(.vitrine) #view-cv .cv-inter input:focus-visible + .at-inter-piste { box-shadow: 0 0 0 3px var(--app-ligne-forte); }
html.dans-app:not(.vitrine) #view-cv .cv-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 400 14px/19px var(--sans); color: var(--app-encre-douce); }
html.dans-app:not(.vitrine) #view-cv .cv-pager span { display: inline-flex; gap: 12px; }
html.dans-app:not(.vitrine) #view-cv :is(.cv-pager, .cv-carte-pied) button { padding: 0; border: 0; background: transparent; font: 500 12.5px/17px var(--sans); color: var(--app-encre-douce); }
html.dans-app:not(.vitrine) #view-cv .cv-pager button { font: 400 14px/19px var(--sans); }
html.dans-app:not(.vitrine) #view-cv :is(.cv-pager, .cv-carte-pied) button.mauvais { color: var(--app-mauvais); }
html.dans-app:not(.vitrine) #view-cv .cv-boite { display: grid; gap: 10px; padding: 12px; border-radius: 14px; background: var(--app-releve); }
html.dans-app:not(.vitrine) #view-cv .cv-carte { padding: 10px; border: 0.5px solid var(--app-ligne-forte); border-radius: 14px; background: var(--app-fond); }
html.dans-app:not(.vitrine) #view-cv .cv-carte.on { border-color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-cv .cv-carte.proposee { border-color: var(--app-encre); border-left-width: 3px; }
html.dans-app:not(.vitrine) #view-cv .cv-carte.cv-pile { display: grid; gap: 8px; }
html.dans-app:not(.vitrine) #view-cv .cv-carte-tete { width: 100%; display: flex; align-items: center; gap: 8px; padding: 0; border: 0; background: transparent; text-align: left; }
html.dans-app:not(.vitrine) #view-cv .cv-carte-tete > span { flex: 1; min-width: 0; display: grid; }
html.dans-app:not(.vitrine) #view-cv .cv-carte-tete b { font: 500 16px/22px var(--sans); color: var(--app-encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.dans-app:not(.vitrine) #view-cv .cv-carte-tete small { font: 400 12.5px/17px var(--sans); color: var(--app-gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.dans-app:not(.vitrine) #view-cv .cv-carte-corps { display: grid; gap: 10px; padding-top: 10px; }
html.dans-app:not(.vitrine) #view-cv .cv-carte-pied { display: flex; align-items: center; gap: 14px; }
html.dans-app:not(.vitrine) #view-cv .cv-aujourdhui { margin: 0; height: 50px; display: flex; align-items: center; padding: 0 14px; font: 400 14px/19px var(--sans); color: var(--app-gris); }
html.dans-app:not(.vitrine) #view-cv .cv-ligne-langue { display: flex; align-items: center; gap: 8px; }
html.dans-app:not(.vitrine) #view-cv .cv-ligne-langue .at-champ-saisie { flex: 1; min-width: 0; }
html.dans-app:not(.vitrine) #view-cv .cv-carte .cv-rangee { padding-top: 8px; }
html.dans-app:not(.vitrine) #view-cv .cv-croix { flex: none; width: 28px; height: 28px; padding: 0; border: 0; background: transparent; display: inline-flex; align-items: center; justify-content: center; color: var(--app-gris); }
html.dans-app:not(.vitrine) #view-cv .cv-croix svg { width: 16px; height: 16px; }
html.dans-app:not(.vitrine) #view-cv .cv-compte.attention { color: var(--app-attention); }
html.dans-app:not(.vitrine) #view-cv .cv-points { display: grid; gap: 6px; padding-top: 4px; }
html.dans-app:not(.vitrine) #view-cv .cv-point { display: flex; align-items: flex-start; gap: 8px; }
html.dans-app:not(.vitrine) #view-cv .cv-point .cv-puce-ats { margin-top: 6px; }
html.dans-app:not(.vitrine) #view-cv .cv-point > span { display: grid; gap: 1px; }
html.dans-app:not(.vitrine) #view-cv .cv-point b { font: 400 14px/19px var(--sans); color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-cv .cv-point em { font: 500 12.5px/16px var(--sans); font-style: normal; color: var(--app-encre-douce); }
html.dans-app:not(.vitrine) #view-cv .cv-point small { font: 400 12.5px/17px var(--sans); color: var(--app-gris); }
html.dans-app:not(.vitrine) #view-cv .cv-suite { display: flex; justify-content: flex-end; padding-top: 4px; }
html.dans-app:not(.vitrine) #view-cv .at-feuille .cv-forme { padding-bottom: 8px; }

/* ---- l'atelier sur ordinateur : un en-tête qui dit l'état, une page qu'on lit, des colonnes qui respirent */
@media (min-width: 901px) {
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-ordi { gap: 16px; padding: 20px 28px 22px; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-tete { gap: 14px; min-height: 56px; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-titres { display: grid; gap: 2px; min-width: 0; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-titre { font: 500 38px/42px var(--serif); }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-sous-titre { margin: 0; font: 400 13.5px/18px var(--sans); color: var(--app-gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-colonnes { gap: 16px; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-col { border-radius: 20px; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-entete { padding: 16px 18px 10px; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-entete .at-etiquette { font: 600 11.5px/14px var(--sans); letter-spacing: 1.2px !important; text-transform: uppercase !important; color: var(--app-gris); }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-entete-bloc { padding: 0 14px 12px; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-rang { padding: 0 10px; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-ligne { gap: 12px; min-height: 58px; padding: 9px 12px; border-radius: 14px; transition: background 0.15s; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-ligne.on { position: sticky; top: 0; z-index: 2; background: var(--app-fond); box-shadow: 0 0.5px 0 var(--app-ligne) !important; border-radius: 14px 14px 0 0; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-ligne-mots b { font: 500 16px/21px var(--sans); }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-ligne-mots small { font-size: 13px; line-height: 18px; }
  /* chaque partie : un rond, coché quand elle est écrite */
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-ligne .at-point { position: relative; width: 22px; height: 22px; border-radius: 11px; border: 1.5px solid var(--app-ligne-forte); background: var(--app-fond); }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-ligne .at-point.plein { background: var(--app-encre); border-color: var(--app-encre); }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-ligne .at-point.plein::after { content: ""; position: absolute; left: 6.5px; top: 3.5px; width: 5px; height: 9px; border: solid var(--app-fond); border-width: 0 2px 2px 0; transform: rotate(45deg); }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-ligne .at-point.creux { border-color: var(--app-attention); border-style: dashed; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-reste { background: var(--app-attention-lavis); border: 0; color: var(--app-attention); font-weight: 600; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-formulaire { gap: 14px; padding: 14px 12px 18px; border-radius: 0 0 14px 14px; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-rang + .at-rang { border-top: 0.5px solid var(--app-ligne); }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-rang:has(.at-ligne.on) { border-top-color: transparent; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-rang:has(.at-ligne.on) + .at-rang { border-top-color: transparent; }

  /* le plateau : la page posée comme sur un bureau ; « Lisible » ou « Page entière » */
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-plateau { border-radius: 20px; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-plateau.lisible .at-apercu-hote { padding: 32px 0 72px; scroll-behavior: smooth; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-papier { border-radius: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 18px 40px rgba(0, 0, 0, 0.10) !important; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-zoom { position: absolute; right: 14px; bottom: 14px; z-index: 3; display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--app-fond); box-shadow: 0 0 0 0.5px var(--app-ligne-forte) !important; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-zoom .at-loupe { position: static; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; background: transparent; color: var(--app-gris); transition: background 0.15s, color 0.15s; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-zoom .at-loupe svg { width: 17px; height: 17px; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-zoom .at-loupe:not(.on):hover { color: var(--app-encre); }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-zoom .at-loupe.on { background: var(--app-encre); color: var(--app-fond); }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-pied { left: 16px; right: 16px; bottom: 14px; z-index: 3; pointer-events: none; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-pied > * { pointer-events: auto; }
  html.dans-app:not(.vitrine) #view-cv .cvp-pages, html.dans-app:not(.vitrine) #view-cv .cvp-annuler { height: 30px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 15px; box-shadow: 0 0 0 0.5px var(--app-ligne-forte) !important; }
  html.dans-app:not(.vitrine) #view-cv .cvp-legende { padding: 6px 12px; border-radius: 15px; background: rgba(244, 244, 245, 0.92); }

  /* MAXX : une colonne quand la place le permet, sinon une barre sous la page */
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-maxx .at-entete { padding-bottom: 6px; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-fil { gap: 14px; padding: 4px 18px 14px; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-maxx-mot.accueil { font: 500 28px/32px var(--serif); letter-spacing: -0.3px; color: var(--app-encre); }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-fil-vide { font-size: 14px; line-height: 20px; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-pied-maxx { gap: 12px; padding: 14px; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-idees { display: grid; gap: 8px; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-idee { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 12px 12px 14px; border: 0.5px solid var(--app-ligne-forte); border-radius: 14px; background: var(--app-fond); text-align: left; transition: border-color 0.15s, background 0.15s; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-idee:hover { border-color: var(--app-encre); }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-idee > span { flex: 1; min-width: 0; display: grid; gap: 2px; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-idee b { font: 500 14.5px/19px var(--sans); color: var(--app-encre); }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-idee small { font: 400 12.5px/17px var(--sans); color: var(--app-gris); }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-idee i { flex: none; width: 28px; height: 28px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--app-releve); color: var(--app-encre); transition: background 0.15s, color 0.15s; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-idee:hover i { background: var(--app-encre); color: var(--app-fond); }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-idee i svg { width: 14px; height: 14px; transform: rotate(90deg); }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-maxx.compact { border-radius: 20px; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-maxx.compact .at-entete { padding: 12px 16px 4px; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-maxx.compact .at-dernier { padding: 0 16px 4px; font-size: 14.5px; line-height: 20px; color: var(--app-encre-douce); -webkit-line-clamp: 2; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-maxx.compact .at-pied-maxx { grid-template-columns: minmax(0, 1fr) minmax(280px, 42%); align-items: center; padding: 8px 12px 12px; border-top: 0; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-maxx.compact .at-pied-maxx > :not(.at-dire):not(.at-puces) { grid-column: 1 / -1; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-maxx.compact .at-puces { flex-wrap: nowrap; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 24px; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-maxx.compact .at-puces::-webkit-scrollbar { display: none; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-maxx.compact .at-puces:has(.at-geste) { grid-column: 1 / -1; }
  html.dans-app:not(.vitrine) #view-cv .at-plateau.lisible .cvp-legende { display: none; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-maxx.compact .at-puce { flex: none; height: 32px; padding: 0 12px; display: inline-flex; align-items: center; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-maxx.compact .at-dire { height: 46px; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-maxx.compact .at-dire input { height: 46px; }

  /* l'en-tête du CV : pas à pas, la lecture ATS, le fichier */
  html.dans-app:not(.vitrine) #view-cv .cv-coin { gap: 8px; }
  html.dans-app:not(.vitrine) #view-cv :is(.cvc-guide, .cvc-ats) { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 0.5px solid var(--app-ligne-forte); border-radius: 20px; background: var(--app-fond); font: 500 14px/1 var(--sans); color: var(--app-encre); white-space: nowrap; transition: border-color 0.15s, background 0.15s; }
  html.dans-app:not(.vitrine) #view-cv :is(.cvc-guide, .cvc-ats):hover { border-color: var(--app-encre); }
  html.dans-app:not(.vitrine) #view-cv .cvc-guide svg { width: 16px; height: 16px; }
  html.dans-app:not(.vitrine) #view-cv .cvc-ats { padding-left: 9px; }
  html.dans-app:not(.vitrine) #view-cv .cvc-ats[aria-expanded="true"] { background: var(--app-releve); border-color: var(--app-releve); }
  html.dans-app:not(.vitrine) #view-cv .cvc-ats span { color: var(--app-gris); }
  html.dans-app:not(.vitrine) #view-cv .cvc-ats b { font-weight: 600; color: var(--app-encre); font-variant-numeric: tabular-nums; }
  html.dans-app:not(.vitrine) #view-cv .cv-anneau { flex: none; }
  html.dans-app:not(.vitrine) #view-cv .cv-anneau circle { fill: none; stroke-width: 3; }
  html.dans-app:not(.vitrine) #view-cv .cv-anneau .fond { stroke: var(--app-ligne-forte); }
  html.dans-app:not(.vitrine) #view-cv .cv-anneau .plein { stroke: var(--app-attention); stroke-linecap: round; transition: stroke-dashoffset 0.5s ease; }
  html.dans-app:not(.vitrine) #view-cv .cv-anneau .plein.ok { stroke: var(--app-ok); }
  html.dans-app:not(.vitrine) #view-cv .cv-fichier { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px 0 12px; border-radius: 20px; background: var(--app-releve); color: var(--app-encre); max-width: 260px; }
  html.dans-app:not(.vitrine) #view-cv .cv-fichier > svg { flex: none; width: 18px; height: 18px; }
  html.dans-app:not(.vitrine) #view-cv .cv-fichier > span { display: grid; min-width: 0; }
  html.dans-app:not(.vitrine) #view-cv .cv-fichier b { font: 500 13px/16px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.dans-app:not(.vitrine) #view-cv .cv-fichier small { display: inline-flex; align-items: center; gap: 5px; font: 400 11.5px/14px var(--sans); color: var(--app-gris); white-space: nowrap; }
  html.dans-app:not(.vitrine) #view-cv .cv-pastille.neutre { background: var(--app-gris); animation: at-pouls 1.2s ease-in-out infinite; }
  html.dans-app:not(.vitrine) #view-cv .cv-coin .at-action { height: 40px; padding: 0 18px; border-radius: 20px; }

  /* l'épure : une ligne par partie, pas de flèches, pas de consignes, MAXX sur une ligne */
  html.dans-app:not(.vitrine) #view-cv .at-remplir .at-chevron { display: none; }
  html.dans-app:not(.vitrine) #view-cv .at-remplir .at-legende:not(.mauvais) { display: none; }
  html.dans-app:not(.vitrine) #view-cv .at-remplir .at-ligne { min-height: 52px; }
  html.dans-app:not(.vitrine) #view-cv .at-remplir .at-ligne b { font-size: 15px; font-weight: 500; }
  html.dans-app:not(.vitrine) #view-cv .at-remplir .at-rang + .at-rang { border-top-color: transparent; }
  html.dans-app:not(.vitrine) #view-cv .at-remplir .at-ligne:hover { background: var(--app-releve); }
  html.dans-app:not(.vitrine) #view-cv .at-maxx.compact:not(:has(.at-dernier)) .at-entete { display: none; }
  html.dans-app:not(.vitrine) #view-cv .at-maxx.compact:not(:has(.at-dernier)) .at-pied-maxx { padding: 12px; }
  html.dans-app:not(.vitrine) #view-cv .cvc-icone { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 0.5px solid var(--app-ligne-forte); background: var(--app-fond); color: var(--app-encre); transition: border-color 0.15s; }
  html.dans-app:not(.vitrine) #view-cv .cvc-icone:hover { border-color: var(--app-encre); }
  html.dans-app:not(.vitrine) #view-cv .cvc-icone svg { width: 17px; height: 17px; }
  html.dans-app:not(.vitrine) #view-cv .cvc-pdf { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 14px; border-radius: 20px; background: var(--app-releve); color: var(--app-encre); font: 500 14px/1 var(--sans); white-space: nowrap; transition: background 0.15s; }
  html.dans-app:not(.vitrine) #view-cv .cvc-pdf:hover { background: var(--app-ligne); }
  html.dans-app:not(.vitrine) #view-cv .cvc-pdf svg { width: 17px; height: 17px; }

  /* à gauche, seulement l'avancement */
  html.dans-app:not(.vitrine) #view-cv .cvt.ordi.mini { display: flex; align-items: center; gap: 14px; padding: 18px 16px 14px; margin: 0; background: transparent; }
  html.dans-app:not(.vitrine) #view-cv .cvt.ordi.mini .cvt-pas { flex: 1; }
  html.dans-app:not(.vitrine) #view-cv .cvt.ordi.mini .cvt-legende { flex-basis: 100%; }
  html.dans-app:not(.vitrine) #view-cv .cvt.ordi.mini { flex-wrap: wrap; }

  /* le tableau de bord compact, en tête de « Remplir » */
  html.dans-app:not(.vitrine) #view-cv .cvt.ordi { gap: 12px; padding: 14px; border: 0; border-radius: 16px; background: var(--app-releve); }
  html.dans-app:not(.vitrine) #view-cv .cvt.ordi.fete { box-shadow: inset 0 0 0 1.5px var(--app-ok) !important; }
  html.dans-app:not(.vitrine) #view-cv .cvt-etape { font: 500 22px/24px var(--serif); color: var(--app-encre); }
  html.dans-app:not(.vitrine) #view-cv .cvt-etape i { font-style: normal; color: var(--app-gris); }
  html.dans-app:not(.vitrine) #view-cv .cvt.ordi > .cvt-rang:first-child { justify-content: flex-start; align-items: baseline; gap: 6px; }
  html.dans-app:not(.vitrine) #view-cv .cvt.ordi .cvt-petit b { font-weight: 600; color: var(--app-encre); }
  html.dans-app:not(.vitrine) #view-cv .cvt.ordi .cvt-pas { gap: 5px; }
  html.dans-app:not(.vitrine) #view-cv .cvt.ordi .cvt-pas i { height: 5px; border-radius: 3px; background: var(--app-ligne-forte); transition: background 0.3s; }
  html.dans-app:not(.vitrine) #view-cv .cvt.ordi .cvt-pas i.ok { background: var(--app-encre); }
  html.dans-app:not(.vitrine) #view-cv .cvt.ordi .cvt-pas i.ici:not(.ok) { background: var(--app-encre); opacity: 0.35; }
  html.dans-app:not(.vitrine) #view-cv .cvt.ordi .cvt-petit { font-size: 14px; line-height: 19px; color: var(--app-encre-douce); }
  html.dans-app:not(.vitrine) #view-cv .cvt.ordi .at-action { flex: none; height: 34px; padding: 0 16px; }
  html.dans-app:not(.vitrine) #view-cv .cvt.ordi .cvt-ats { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--app-fond); cursor: pointer; }
  html.dans-app:not(.vitrine) #view-cv .cvt-ats-mots { flex: 1; min-width: 0; display: grid; gap: 1px; }
  html.dans-app:not(.vitrine) #view-cv .cvt-ats-mots b { font: 500 14px/19px var(--sans); color: var(--app-encre); }
  html.dans-app:not(.vitrine) #view-cv .cvt-ats-mots small { font: 400 12.5px/17px var(--sans); color: var(--app-gris); }
  html.dans-app:not(.vitrine) #view-cv .cvt-points { display: grid; gap: 2px; padding: 4px 4px 0; }
  html.dans-app:not(.vitrine) #view-cv .cvt.ordi .cvt-point { padding: 7px 8px; border-radius: 10px; }
  html.dans-app:not(.vitrine) #view-cv .cvt.ordi .cvt-point:hover { background: var(--app-fond); }
  html.dans-app:not(.vitrine) #view-cv .cvt-legende.mauvais { color: var(--app-mauvais); }
}
@media (min-width: 901px) and (max-width: 1279px) {
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-sous-titre { display: none; }
}

/* la barre du bas et le « + » du téléphone (app/(tabs)/_layout.tsx, ui/Plus.tsx) */
.dock-tel, .dock-coin, .dock-voile { display: none; }
@media (max-width: 900px) {
  html.dock-on #lat-switch, html.dock-on .lat-switch { display: none !important; }
  html.dock-on .dock-tel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; align-items: flex-start; justify-content: space-around; padding: 8px 0 max(env(safe-area-inset-bottom), 8px); background: var(--app-fond); border-top: 0.5px solid var(--app-ligne-forte); }
  html.dock-on .dock-onglet { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 72px; height: 48px; text-decoration: none; color: var(--app-gris); -webkit-tap-highlight-color: transparent; }
  html.dock-on .dock-onglet.on { color: var(--app-encre); }
  html.dock-on .dock-onglet i { position: relative; display: inline-flex; width: 24px; height: 24px; }
  html.dock-on .dock-onglet svg { width: 24px; height: 24px; stroke-width: 1.7; }
  html.dock-on .dock-onglet.on svg { stroke-width: 2.1; }
  html.dock-on .dock-onglet span { font: 500 11px/13px var(--sans); text-transform: none; letter-spacing: 0; }
  html.dock-on .dock-onglet.on span { font-weight: 600; }
  html.dock-on .dock-point { position: absolute; top: -2px; right: -4px; width: 8px; height: 8px; border-radius: 4px; background: var(--app-encre); border: 1.5px solid #fff; box-sizing: border-box; }
  html.dock-on .dock-voile { position: fixed; inset: 0; z-index: 71; background: rgba(0, 0, 0, 0.28); }
  html.dock-ouvert .dock-voile { display: block; }
  html.dock-on .dock-coin { position: fixed; right: 20px; z-index: 72; display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
  html.dock-on .dock-coin.haut { top: calc(env(safe-area-inset-top) + 4px); }
  html.dock-on .dock-coin.bas { bottom: calc(max(env(safe-area-inset-bottom), 8px) + 56px + 12px); }
  html.dock-on .dock-plus { width: 56px; height: 56px; padding: 0; border: 0; border-radius: 28px; background: var(--app-encre); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18); }
  html.dock-on .dock-plus svg { width: 26px; height: 26px; stroke-width: 2.2; transition: transform 0.2s; }
  html.dock-on .dock-coin.ouvert .dock-plus svg { transform: rotate(45deg); }
  html.dock-on .dock-liste { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
  html.dock-on .dock-porte { display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: transparent; color: var(--app-encre); }
  html.dock-on .dock-porte span { padding: 7px 12px; border-radius: 10px; background: var(--app-fond); font: 500 15px/19px var(--sans); text-transform: none; letter-spacing: 0; }
  html.dock-on .dock-porte i { width: 48px; height: 48px; border-radius: 24px; background: var(--app-fond); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1); }
  html.dock-on .dock-porte svg { width: 22px; height: 22px; stroke-width: 1.9; }
  /* la page laisse la place à la barre ; ce qui était collé en bas remonte au-dessus */
  html.dock-on .view.active { padding-bottom: calc(max(env(safe-area-inset-bottom), 8px) + 56px + 16px); }
  html.dock-on .dire-barre { bottom: calc(max(env(safe-area-inset-bottom), 8px) + 56px + 12px); }
  html.dock-on #maxx-chat { bottom: calc(max(env(safe-area-inset-bottom), 8px) + 56px + 84px); }
  html.dock-on body:has(#view-boite .lecture-ouverte) :is(.dock-tel, .dock-coin) { display: none; }
}
@media (max-width: 900px) {
  /* au téléphone, l'atelier a sa barre MAXX en bas : la bulle d'aide se pose au-dessus */
  html.atelier-on #maxx-chat { bottom: calc(env(safe-area-inset-bottom) + 140px); }
}

/* Pour vous au téléphone : l'écran de pile de l'app a son « retour » au-dessus du titre (ui/Ecran.tsx) */
.pv-retour { display: none; }
@media (max-width: 900px) {
  html.dans-app:not(.vitrine) .pv-retour { display: flex; flex-basis: 100%; width: 40px; height: 40px; align-items: center; color: var(--app-encre); margin-bottom: -6px; }
  /* au téléphone, l'app n'a pas de tiroir : onglets, « + » et « retour » suffisent */
  html.dans-app:not(.vitrine) #lat-switch, html.dans-app:not(.vitrine) .lat-switch { display: none !important; }
  /* la bulle d'aide : au ras du bas quand il n'y a ni barre d'onglets ni atelier */
  html.dans-app:not(.vitrine):not(.dock-on):not(.atelier-on):not(.fab) #maxx-chat { bottom: calc(16px + env(safe-area-inset-bottom)); }
}

/* La feuille d'une offre, comme app/offre.tsx : centrée, l'employeur en grand, les
   pastilles, l'affinité, « Postuler pour moi », puis Garder et Lire l'annonce. */
#fiche-offre .fiche-carte { font-family: "Outfit", system-ui, sans-serif; background: var(--app-fond); color: var(--app-encre); padding: 8px 20px calc(24px + env(safe-area-inset-bottom)); }
#fiche-offre .fiche-poignee { width: 40px; height: 5px; border-radius: 3px; margin: 6px auto 4px; background: var(--app-ligne-forte); }
#fiche-offre .fiche-fermer { background: var(--app-releve); color: var(--app-encre); }
#fiche-offre .fiche-corps { display: flex; flex-direction: column; gap: 20px; }
#fiche-offre :is(p, h2, button, a) { text-transform: none; letter-spacing: 0; }
#fiche-offre .fo-tete { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 12px; text-align: center; }
#fiche-offre .fo-lettres { width: 84px; height: 84px; border-radius: 28px; display: grid; place-items: center; background: var(--app-fond); border: 1px solid var(--app-ligne); font-weight: 600; font-size: 34px; line-height: 38px; letter-spacing: -0.5px; color: var(--app-encre); }
#fiche-offre .fo-id { display: flex; flex-direction: column; align-items: center; gap: 4px; }
#fiche-offre .fo-employeur { margin: 0; font-weight: 500; font-size: 12.5px; line-height: 16px; color: var(--app-gris); }
#fiche-offre .fo-id h2 { margin: 0; padding: 0 12px; font-family: inherit; font-weight: 600; font-size: 22px; line-height: 28px; letter-spacing: -0.3px; color: var(--app-encre); }
#fiche-offre .fo-petit { margin: 0; font-size: 14px; line-height: 19px; color: var(--app-encre-douce); }
#fiche-offre .fo-age { font-weight: 500; color: var(--app-gris); }
#fiche-offre .fo-age.neuve { color: var(--app-encre); }
#fiche-offre .fo-puces { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
#fiche-offre .fo-puce { padding: 4px 10px; border-radius: 999px; background: var(--app-releve); color: var(--app-encre-douce); font-weight: 500; font-size: 12.5px; line-height: 17px; }
#fiche-offre .fo-puce.ton-ok { background: var(--app-ok-lavis); color: var(--app-ok); }
#fiche-offre .fo-puce.ton-attention { background: var(--app-attention-lavis); color: var(--app-attention); }
#fiche-offre .fo-puce.ton-accent { background: var(--app-encre); color: #fff; }
#fiche-offre .fo-pourquoi { margin: 0; padding: 0 16px; font-size: 14px; line-height: 19px; color: var(--app-encre-douce); }
#fiche-offre .fo-affinite { display: flex; align-items: center; gap: 18px; padding: 18px; border-radius: var(--app-rayon-grand); background: var(--app-releve); }
#fiche-offre .fo-affinite > div { flex: 1; display: grid; gap: 4px; }
#fiche-offre .fo-affinite > div > b { font-weight: 500; font-size: 16px; line-height: 22px; }
#fiche-offre .fo-affinite > div > p { margin: 0; font-size: 14px; line-height: 19px; color: var(--app-encre-douce); }
#fiche-offre .fo-anneau { position: relative; flex: none; width: 84px; height: 84px; }
#fiche-offre .fo-anneau svg { width: 100%; height: 100%; transform: rotate(-90deg); }
#fiche-offre .fo-anneau circle { fill: none; stroke-width: 7; }
#fiche-offre .fo-anneau .piste { stroke: var(--app-ligne-forte); stroke-opacity: 0.5; }
#fiche-offre .fo-anneau .trait { stroke: var(--app-encre); stroke-linecap: round; }
#fiche-offre .fo-anneau b { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 600; font-size: 26px; font-variant-numeric: tabular-nums; }
#fiche-offre .fo-message { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--app-rayon); background: var(--app-releve); }
#fiche-offre .fo-message i { display: flex; flex: none; width: 18px; height: 18px; }
#fiche-offre .fo-message.ton-ok i { color: var(--app-ok); }
#fiche-offre .fo-message.ton-attention i { color: var(--app-attention); }
#fiche-offre .fo-message.ton-mauvais i { color: var(--app-mauvais); }
#fiche-offre .fo-message p { flex: 1; margin: 0; font-size: 14px; line-height: 19px; color: var(--app-encre-douce); }
#fiche-offre .fo-lien { padding: 0 6px; font-weight: 500; font-size: 14px; color: var(--app-encre); text-decoration: none; }
#fiche-offre .fo-actes { display: flex; flex-direction: column; gap: 10px; }
#fiche-offre .fo-rang { display: flex; gap: 10px; }
#fiche-offre .fo-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; min-height: 0; padding: 0 20px; border: 0; border-radius: 999px; background: var(--app-encre); color: #fff; font: 500 16px/20px "Outfit", system-ui, sans-serif; text-decoration: none; cursor: pointer; transition: opacity 0.15s; }
#fiche-offre .fo-bouton:hover { opacity: 0.85; }
#fiche-offre .fo-bouton:disabled { opacity: 0.45; cursor: default; }
#fiche-offre .fo-bouton svg { width: 18px; height: 18px; flex: none; }
#fiche-offre .fo-bouton.plein { width: 100%; }
#fiche-offre .fo-bouton.grand { height: 52px; font-size: 17px; line-height: 21px; }
#fiche-offre .fo-bouton.grand svg { width: 20px; height: 20px; }
#fiche-offre .fo-bouton.secondaire { flex: 1; background: var(--app-releve); color: var(--app-encre); }
#fiche-offre .fo-bouton.texte { width: 100%; height: 36px; background: transparent; color: var(--app-encre); font-size: 14px; line-height: 18px; }
#fiche-offre .fo-legende { margin: 0; padding: 0 12px; text-align: center; font-size: 12.5px; line-height: 17px; color: var(--app-gris); }
#fiche-offre .fo-roue { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; animation: fo-tourne 0.8s linear infinite; }
@keyframes fo-tourne { to { transform: rotate(360deg); } }

/* Le scan du CV (ordinateur et téléphone) */
html.dans-app:not(.vitrine) #view-cv .cv-anneau { flex: none; }
html.dans-app:not(.vitrine) #view-cv .cv-anneau circle { fill: none; stroke-width: 3; }
html.dans-app:not(.vitrine) #view-cv .cv-anneau .fond { stroke: var(--app-ligne-forte); }
html.dans-app:not(.vitrine) #view-cv .cv-anneau .plein { stroke: var(--app-attention); stroke-linecap: round; transition: stroke-dashoffset 0.5s ease; }
html.dans-app:not(.vitrine) #view-cv .cv-anneau .plein.ok { stroke: var(--app-ok); }
/* la pastille « Scanner » */
html.dans-app:not(.vitrine) #view-cv .cvc-scan { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 9px; border-radius: 20px; background: var(--app-encre); color: var(--app-fond); font: 500 14px/1 var(--sans); white-space: nowrap; transition: transform 0.15s; }
html.dans-app:not(.vitrine) #view-cv .cvc-scan:hover { transform: translateY(-1px); }
html.dans-app:not(.vitrine) #view-cv .cvc-scan b { font-weight: 500; color: rgba(255, 255, 255, 0.6); font-variant-numeric: tabular-nums; }
html.dans-app:not(.vitrine) #view-cv .cvc-scan .cv-anneau .fond { stroke: rgba(255, 255, 255, 0.22); }
html.dans-app:not(.vitrine) #view-cv .cvc-scan.actif .cv-anneau { animation: cvs-tourne 1s linear infinite; }
@keyframes cvs-tourne { to { transform: rotate(360deg); } }

/* le scan : une ligne qui remonte la page, et ce que MAXX lit */
html.dans-app:not(.vitrine) #view-cv .cvs { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
html.dans-app:not(.vitrine) #view-cv .at-plateau.scan .at-papier { filter: saturate(0.6); transition: filter 0.3s; }
html.dans-app:not(.vitrine) #view-cv .cvs-ligne { position: absolute; left: 0; right: 0; height: 120px; top: 100%; animation: cvs-monte 1.7s cubic-bezier(0.45, 0, 0.55, 1) infinite; background: linear-gradient(to bottom, rgba(199, 63, 55, 1) 0, rgba(199, 63, 55, 1) 2px, rgba(199, 63, 55, 0.22) 3px, rgba(199, 63, 55, 0.06) 60%, rgba(199, 63, 55, 0) 100%); }
html.dans-app:not(.vitrine) #view-cv .cvs-ligne::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 14px; background: radial-gradient(50% 50% at 50% 50%, rgba(199, 63, 55, 0.45), transparent); filter: blur(4px); }
@keyframes cvs-monte { 0% { top: 100%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { top: -120px; opacity: 0; } }
html.dans-app:not(.vitrine) #view-cv .cvs-carte { pointer-events: auto; position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); width: min(380px, calc(100% - 40px)); max-height: calc(100% - 80px); overflow-y: auto; padding: 16px 18px 18px; border-radius: 20px; background: var(--app-encre); color: var(--app-fond); animation: cvs-entre 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes cvs-entre { from { opacity: 0; transform: translate(-50%, 12px); } }
html.dans-app:not(.vitrine) #view-cv .cvs-titre { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 500 11px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
html.dans-app:not(.vitrine) #view-cv .cvs-pouls { width: 7px; height: 7px; border-radius: 50%; background: var(--app-mauvais); animation: at-pouls 1s ease-in-out infinite; }
html.dans-app:not(.vitrine) #view-cv .cvs.fin .cvs-pouls { background: var(--app-ok); animation: none; }
html.dans-app:not(.vitrine) #view-cv .cvs-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
html.dans-app:not(.vitrine) #view-cv .cvs-etapes li { display: flex; align-items: center; gap: 10px; min-height: 30px; font: 400 14px/18px var(--sans); color: rgba(255, 255, 255, 0.92); animation: cvs-ligne-entre 0.28s ease-out; }
@keyframes cvs-ligne-entre { from { opacity: 0; transform: translateY(6px); } }
html.dans-app:not(.vitrine) #view-cv .cvs-etapes li span { flex: 1; min-width: 0; }
html.dans-app:not(.vitrine) #view-cv .cvs-etapes li b { flex: none; max-width: 52%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 12.5px/16px var(--sans); color: rgba(255, 255, 255, 0.55); font-variant-numeric: tabular-nums; }
html.dans-app:not(.vitrine) #view-cv .cvs-etapes li.attention b { color: var(--app-attention); }
html.dans-app:not(.vitrine) #view-cv .cvs-etapes li.mauvais b { color: var(--app-mauvais); }
html.dans-app:not(.vitrine) #view-cv .cvs-ico { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font: 700 11px/1 var(--sans); font-style: normal; }
html.dans-app:not(.vitrine) #view-cv .cvs-ico svg { width: 12px; height: 12px; }
html.dans-app:not(.vitrine) #view-cv li.en-cours .cvs-ico { border: 2px solid rgba(255, 255, 255, 0.2); border-top-color: var(--app-fond); animation: cvs-tourne 0.7s linear infinite; }
html.dans-app:not(.vitrine) #view-cv li.en-cours span { color: rgba(255, 255, 255, 0.6); }
html.dans-app:not(.vitrine) #view-cv li.ok .cvs-ico { background: var(--app-ok); color: var(--app-fond); }
html.dans-app:not(.vitrine) #view-cv li.attention .cvs-ico { background: var(--app-attention); color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-cv li.mauvais .cvs-ico { background: var(--app-mauvais); color: var(--app-fond); }
html.dans-app:not(.vitrine) #view-cv .cvs-bilan { display: flex; align-items: center; gap: 14px; margin: 14px 0 4px; padding-top: 14px; border-top: 0.5px solid rgba(255, 255, 255, 0.16); animation: cvs-ligne-entre 0.35s ease-out; }
html.dans-app:not(.vitrine) #view-cv .cvs-bilan .cv-anneau .fond { stroke: rgba(255, 255, 255, 0.18); }
html.dans-app:not(.vitrine) #view-cv .cvs-bilan .cv-anneau circle { stroke-width: 4; }
html.dans-app:not(.vitrine) #view-cv .cvs-bilan > span { display: grid; gap: 2px; }
html.dans-app:not(.vitrine) #view-cv .cvs-bilan b { font: 500 30px/1 var(--serif); font-variant-numeric: tabular-nums; }
html.dans-app:not(.vitrine) #view-cv .cvs-bilan small { font: 400 13px/17px var(--sans); color: rgba(255, 255, 255, 0.6); }
html.dans-app:not(.vitrine) #view-cv .cvs-points { display: grid; gap: 6px; margin-top: 10px; }
html.dans-app:not(.vitrine) #view-cv .cvs-point { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); color: var(--app-fond); font: 500 13.5px/17px var(--sans); text-align: left; transition: background 0.15s; }
html.dans-app:not(.vitrine) #view-cv .cvs-point:hover { background: rgba(255, 255, 255, 0.16); }
html.dans-app:not(.vitrine) #view-cv .cvs-point span { flex: 1; }
html.dans-app:not(.vitrine) #view-cv .cvs-point svg { width: 14px; height: 14px; opacity: 0.6; }
html.dans-app:not(.vitrine) #view-cv .cvs-fermer { width: 100%; height: 40px; margin-top: 12px; border-radius: 20px; background: var(--app-fond); color: var(--app-encre); font: 500 14px/1 var(--sans); }
@media (prefers-reduced-motion: reduce) { html.dans-app:not(.vitrine) #view-cv .cvs-ligne { animation-duration: 4s; } }


html.dans-app:not(.vitrine) #view-cv .at-tel .at-scene.scan .at-papier { filter: saturate(0.6); }
html.dans-app:not(.vitrine) #view-cv .cvs-lancer { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 3; height: 38px; animation: cvs-entre 0.35s ease-out; }
html.dans-app:not(.vitrine) #view-cv .cvs-lancer:hover { transform: translateX(-50%); }
@media (max-width: 900px) {
  html.dans-app:not(.vitrine) #view-cv .at-tel .at-scene.pose .at-apercu-hote { align-items: flex-start; padding-top: 6px; }
  html.dans-app:not(.vitrine) #view-cv .cvs-carte { bottom: 10px; width: calc(100% - 24px); padding: 14px 16px 16px; }
}

/* L'accueil d'un CV vide : un titre, un geste fort, deux sorties */
html.dans-app:not(.vitrine) #view-cv .cvv { gap: 18px; padding: 30px 28px 24px; border-radius: 24px; }
html.dans-app:not(.vitrine) #view-cv .cvv-titre { font-size: 32px; line-height: 36px; }
html.dans-app:not(.vitrine) #view-cv .cvv-deposer { width: 100%; height: 60px; gap: 12px; border-radius: 30px; }
html.dans-app:not(.vitrine) #view-cv .cvv-deposer > span { display: grid; gap: 2px; text-align: left; font: 500 15px/18px var(--sans); }
html.dans-app:not(.vitrine) #view-cv .cvv-deposer small { font: 400 12px/14px var(--sans); opacity: 0.6; }
html.dans-app:not(.vitrine) #view-cv .cvv-ou { display: flex; align-items: center; gap: 14px; }
html.dans-app:not(.vitrine) #view-cv .cvv-ou button { padding: 6px 2px; background: none; border: 0; font: 500 14px/1 var(--sans); color: var(--app-encre-douce); transition: color 0.15s; }
html.dans-app:not(.vitrine) #view-cv .cvv-ou button:hover { color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-cv .cvv-ou i { width: 3px; height: 3px; border-radius: 50%; background: var(--app-ligne-forte); }

/* Les modèles : de vraies vignettes, en grille */
@media (min-width: 901px) {
  html.dans-app:not(.vitrine) #view-cv .cv-modele-mini { opacity: 1; gap: 6px; }
  html.dans-app:not(.vitrine) #view-cv .cv-mini-cadre { border-radius: 10px; transition: border-color 0.15s, transform 0.15s; }
  html.dans-app:not(.vitrine) #view-cv .cv-modele-mini:not(.on):hover .cv-mini-cadre { border-color: var(--app-encre); transform: translateY(-2px); }
  html.dans-app:not(.vitrine) #view-cv .cv-modele-mini small { font-size: 12px; text-align: center; }
  /* MAXX sur grand écran : les idées sous le titre, le champ en bas */
  html.dans-app:not(.vitrine) #view-cv .at-maxx:not(.compact):has(.at-idees) .at-fil { flex: none; }
  html.dans-app:not(.vitrine) #view-cv .at-maxx:not(.compact):has(.at-idees) .at-pied-maxx { flex: 1; display: flex; flex-direction: column; border-top: 0; }
  html.dans-app:not(.vitrine) #view-cv .at-maxx:not(.compact):has(.at-idees) .at-dire { margin-top: auto; }
}
@media (min-width: 901px) {
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-maxx.compact .at-pied-maxx:not(:has(.at-puces)) { grid-template-columns: minmax(0, 1fr); }
  html.dans-app:not(.vitrine) #view-cv .cv-mini { background: #fff; }
}

/* MAXX en dock flottant sur la page : replié, une phrase et le champ ;
   déplié, la conversation entière. */
@media (min-width: 901px) {
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-maxx.flottant { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 6; width: min(640px, calc(100% - 32px)); max-height: calc(100% - 32px); border: 0; border-radius: 28px; box-shadow: 0 0 0 0.5px var(--app-ligne-forte), 0 20px 44px rgba(0, 0, 0, 0.14) !important; transition: box-shadow 0.25s; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-maxx.flottant :is(.at-entete, .at-fil, .at-puces, .at-propositions:empty, .at-alerte:empty) { display: none; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-maxx.flottant .at-dernier { margin: 0; padding: 14px 20px 2px; font: 400 14px/19px var(--sans); color: var(--app-encre-douce); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: color 0.15s; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-maxx.flottant .at-dernier:hover { color: var(--app-encre); }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-maxx.flottant .at-pied-maxx { display: grid; gap: 10px; padding: 8px; border-top: 0; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-maxx.flottant .at-dire { height: 50px; border-radius: 25px; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-maxx.flottant.deplie { box-shadow: 0 0 0 0.5px var(--app-ligne-forte), 0 28px 64px rgba(0, 0, 0, 0.2) !important; animation: at-dock-monte 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
  @keyframes at-dock-monte { from { transform: translate(-50%, 10px); } }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-maxx.flottant.deplie .at-entete { display: flex; padding: 14px 14px 6px 20px; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-maxx.flottant.deplie .at-fil { display: flex; flex: 1 1 auto; min-height: 60px; max-height: 44vh; padding: 4px 20px 10px; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-maxx.flottant.deplie .at-dernier { display: none; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-maxx.flottant.deplie .at-puces { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 6px; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-maxx.flottant.deplie .at-puce { height: 32px; padding: 0 13px; display: inline-flex; align-items: center; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-replier { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 50%; background: var(--app-releve); color: var(--app-encre); }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-replier svg { width: 15px; height: 15px; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-plateau.avec-dock .at-apercu-hote { transition: opacity 0.25s; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-plateau.avec-dock:has(.flottant.deplie) .at-apercu-hote { opacity: 0.45; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-plateau.avec-dock .at-zoom { bottom: auto; top: 14px; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-plateau.avec-dock > .at-loupe { bottom: auto; top: 14px; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-plateau.avec-dock .at-pied { bottom: auto; top: 14px; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-plateau.avec-dock.lisible .at-apercu-hote { padding-bottom: 130px; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-plateau.avec-dock.pose .at-apercu-hote { padding-bottom: 96px; }
  html.dans-app:not(.vitrine) #view-cv .at-plateau.avec-dock .cvs-carte { bottom: 100px; max-height: calc(100% - 120px); }
}
@media (min-width: 901px) {
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-dire input:focus, html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-dire input:focus-visible { outline: none; }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-dire:focus-within { box-shadow: inset 0 0 0 1px var(--app-encre) !important; background: var(--app-fond); }
}

/* Les petits gestes qui rendent le CV évident */
html.dans-app:not(.vitrine) #view-cv .cv-signal { position: absolute; top: 14px; left: 50%; z-index: 7; display: inline-flex; align-items: center; gap: 7px; height: 32px; margin: 0; padding: 0 14px 0 10px; border-radius: 16px; background: var(--app-encre); color: var(--app-fond); font: 500 13px/1 var(--sans); opacity: 0; transform: translate(-50%, -8px); pointer-events: none; transition: opacity 0.25s, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
html.dans-app:not(.vitrine) #view-cv .cv-signal.on { opacity: 1; transform: translate(-50%, 0); }
html.dans-app:not(.vitrine) #view-cv .cv-signal svg { width: 14px; height: 14px; color: var(--app-ok); }
@media (min-width: 901px) {
  html.dans-app:not(.vitrine) #view-cv .cvt-suite { flex: none; height: 30px; padding: 0 12px; border-radius: 15px; background: var(--app-encre); color: var(--app-fond); font: 500 13px/1 var(--sans); transition: transform 0.15s; }
  html.dans-app:not(.vitrine) #view-cv .cvt-suite:hover { transform: translateX(2px); }
  html.dans-app:not(.vitrine) #view-cv .at-plateau.lisible .cv-page-app [data-edit] { position: relative; }
  html.dans-app:not(.vitrine) #view-cv .at-plateau.lisible .cv-page-app [data-edit]::after { content: attr(data-nom); position: absolute; top: -9pt; right: -4pt; padding: 3pt 8pt; border-radius: 10pt; background: var(--app-encre); color: var(--app-fond); font: 500 9pt/1.2 var(--sans); letter-spacing: 0; text-transform: none; white-space: nowrap; opacity: 0; transform: translateY(3pt); pointer-events: none; transition: opacity 0.15s, transform 0.15s; }
  html.dans-app:not(.vitrine) #view-cv .at-plateau.lisible .cv-page-app [data-edit]:hover::after { opacity: 1; transform: none; }
  html.dans-app:not(.vitrine) #view-cv .at-plateau.lisible .cv-page-app [data-edit]:hover { background: var(--app-releve); box-shadow: 0 0 0 4pt var(--app-releve); }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-kbd { flex: none; padding: 3px 7px; border-radius: 6px; border: 0.5px solid var(--app-ligne-forte); background: var(--app-fond); font: 500 11px/1 var(--sans); color: var(--app-gris); }
  html.dans-app:not(.vitrine) :is(#view-carte, #view-cv) .at-dire:is(.plein, :focus-within) .at-kbd { display: none; }
}
@media (min-width: 901px) {
  html.dans-app:not(.vitrine) #view-cv .at-remplir :is(input, textarea, select):focus-visible { outline: none; }
}

/* Le premier CV sur téléphone : la page en fond, l'accueil devant, rien d'autre */
@media (max-width: 900px) {
  html.dans-app:not(.vitrine) #view-cv .at-tel.avec-voile .at-bas, html.dans-app:not(.vitrine) #view-cv .at-tel.avec-voile .at-action-tel { display: none; }
  html.dans-app:not(.vitrine) #view-cv .at-tel.avec-voile .at-scene { flex: 1; }
  html.dans-app:not(.vitrine) #view-cv .at-tel .at-voile { position: absolute; inset: 0; z-index: 4; display: flex; align-items: flex-end; justify-content: center; padding: 16px 16px calc(20px + env(safe-area-inset-bottom)); background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 38%, #fff 62%); }
  html.dans-app:not(.vitrine) #view-cv .at-tel .cvv { max-width: none; padding: 26px 20px 20px; border: 0; box-shadow: none !important; background: transparent; animation: cvs-entre-tel 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
  @keyframes cvs-entre-tel { from { opacity: 0; transform: translateY(16px); } }
  html.dans-app:not(.vitrine) #view-cv .at-tel .cvv-titre { font-size: 34px; line-height: 38px; }
  html.dans-app:not(.vitrine) #view-cv .at-tel .cvv-deposer { height: 62px; }
  html.dans-app:not(.vitrine) #view-cv .at-tel .cvv-ou button { padding: 10px 4px; font-size: 15px; }
}
html.dans-app:not(.vitrine) #view-cv .cvv-acces { display: inline-flex; align-items: center; gap: 7px; align-self: center; margin: 0 0 -4px; font: 500 11px/1 var(--sans); letter-spacing: 1.4px; text-transform: uppercase; color: var(--app-texte-2, #6b6b70); }
html.dans-app:not(.vitrine) #view-cv .cvv-acces i { width: 7px; height: 7px; border-radius: 50%; background: var(--app-ok); box-shadow: 0 0 0 3px rgba(52, 168, 83, 0.15); }
html.dans-app:not(.vitrine) #view-cv .at-dire input:focus, html.dans-app:not(.vitrine) #view-cv .at-dire input:focus-visible { outline: none; box-shadow: none; }

/* ---- La visite du premier CV : une partie par écran, pas de sortie, « Continuer » au bout ---- */
html.cv-visite-on.dans-app:not(.vitrine) #lateral, html.cv-visite-on.dans-app:not(.vitrine) .lat-switch, html.cv-visite-on.dans-app:not(.vitrine) .lat-voile { display: none !important; }
html.cv-visite-on.dans-app:not(.vitrine) body { padding-left: 0 !important; }
html.dans-app:not(.vitrine) #view-cv .cv-visite :is(.at-retour, .at-ligne, .at-gestes-gauche, .at-parties-tel, .at-legende, .cv-points) { display: none !important; }
html.dans-app:not(.vitrine) #view-cv .cv-visite .at-tete { padding-left: 4px; }
html.dans-app:not(.vitrine) #view-cv .cv-visite-depart .at-remplir { display: none; }
html.dans-app:not(.vitrine) #view-cv .cv-visite .at-formulaire { padding-top: 6px; border: 0; animation: cvw-entre 0.42s cubic-bezier(0.2, 0.8, 0.2, 1); }
html.dans-app:not(.vitrine) #view-cv .cv-visite .at-entete-bloc { animation: cvw-entre 0.42s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes cvw-entre { from { opacity: 0; transform: translateY(10px); } }
html.dans-app:not(.vitrine) #view-cv .cvw-tete { display: grid; gap: 6px; padding: 2px 0 14px; }
html.dans-app:not(.vitrine) #view-cv .cvw-pas { display: flex; gap: 5px; margin-bottom: 12px; }
html.dans-app:not(.vitrine) #view-cv .cvw-pas i { flex: 1; height: 3px; border-radius: 2px; background: var(--app-ligne-forte); transition: background 0.3s ease; }
html.dans-app:not(.vitrine) #view-cv .cvw-pas i.fait { background: var(--app-encre); }
html.dans-app:not(.vitrine) #view-cv .cvw-pas i.ici { background: linear-gradient(90deg, var(--app-encre) 50%, var(--app-ligne-forte) 50%); }
html.dans-app:not(.vitrine) #view-cv .cvw-etape { margin: 0; font: 500 11px/1 var(--sans); letter-spacing: 1.4px; color: var(--app-gris, #8e8e93); }
html.dans-app:not(.vitrine) #view-cv .cvw-titre { margin: 0; font: 500 34px/38px var(--serif); letter-spacing: -0.4px; text-transform: none; color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-cv .cv-visite .at-entete-bloc { padding-top: 18px; }
html.dans-app:not(.vitrine) #view-cv .cvw-aide { margin: 0; font: 400 14px/20px var(--sans); color: var(--app-texte-2, #6b6b70); }
html.dans-app:not(.vitrine) #view-cv .cvw-pied { position: sticky; bottom: 0; z-index: 2; display: grid; gap: 10px; margin-top: 18px; padding: 14px 0 4px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--app-fond) 24%); }
html.dans-app:not(.vitrine) #view-cv .cvw-extras { display: flex; flex-wrap: wrap; gap: 8px; }
html.dans-app:not(.vitrine) #view-cv .cvw-rangee { display: flex; align-items: center; gap: 10px; }
html.dans-app:not(.vitrine) #view-cv .cvw-aide-btn { height: 36px; padding: 0 14px; border: 0.5px solid var(--app-ligne-forte); border-radius: 18px; background: var(--app-fond); color: var(--app-encre); font: 500 13px/1 var(--sans); cursor: pointer; transition: border-color 0.2s ease; }
html.dans-app:not(.vitrine) #view-cv .cvw-aide-btn:hover { border-color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-cv .cvw-aide-btn:disabled { opacity: 0.45; cursor: default; }
html.dans-app:not(.vitrine) #view-cv .cvw-retour { flex: none; width: 48px; height: 48px; border-radius: 24px; border: 0.5px solid var(--app-ligne-forte); background: var(--app-fond); color: var(--app-encre); font: 400 18px/1 var(--sans); cursor: pointer; }
html.dans-app:not(.vitrine) #view-cv .cvw-retour:hover { border-color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-cv .cvw-lien { flex: 1; padding: 0 4px; border: 0; background: none; text-align: left; font: 500 14px/18px var(--sans); color: var(--app-encre); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--app-ligne-forte); cursor: pointer; }
html.dans-app:not(.vitrine) #view-cv .cvw-lien:disabled { opacity: 0.4; }
html.dans-app:not(.vitrine) #view-cv .cvw-suite { flex: 1; min-width: 0; height: 48px; padding: 0 18px; line-height: 1.2 !important; text-align: center; border: 0; border-radius: 24px; background: var(--app-encre); color: #fff; font: 500 15px/1 var(--sans); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, transform 0.12s ease; }
html.dans-app:not(.vitrine) #view-cv .cvw-suite:active { transform: scale(0.98); }
html.dans-app:not(.vitrine) #view-cv .cvw-suite.off { background: var(--app-releve, #f4f4f5); color: var(--app-gris, #8e8e93); cursor: default; }
@media (max-width: 900px) {
  html.dans-app:not(.vitrine) #view-cv .cv-visite .at-feuille { max-height: none; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; padding: 14px 20px 0; border-top: 0.5px solid var(--app-ligne); }
  html.dans-app:not(.vitrine) #view-cv .cv-visite .at-feuille > * { flex-shrink: 0; }
  html.dans-app:not(.vitrine) #view-cv .cv-visite .at-feuille > .cvw-pied { margin-top: auto; }
  html.dans-app:not(.vitrine) #view-cv .cv-visite .at-scene { flex: 0 0 34%; min-height: 0; }
  html.dans-app:not(.vitrine) #view-cv .cv-visite .cvw-titre { font-size: 30px; line-height: 34px; }
  html.dans-app:not(.vitrine) #view-cv .cv-visite .cvw-tete { padding-bottom: 10px; }
  html.dans-app:not(.vitrine) #view-cv .cv-visite .cvw-pied { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  html.dans-app:not(.vitrine) #view-cv .cv-visite .at-bas { display: none; }
  html.dans-app:not(.vitrine) #view-cv .cv-visite .cvw-suite { flex: 1; }
}

/* Fin de la visite : le CV est prêt, la suite ce sont les offres. */
html.dans-app:not(.vitrine) #view-cv .cvs-carte-fin .cvs-etapes { display: none; }
html.dans-app:not(.vitrine) #view-cv .cvs-finale { animation: cvs-ligne-entre 0.45s ease-out; }
html.dans-app:not(.vitrine) #view-cv .cvs-pret { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 11px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); }
html.dans-app:not(.vitrine) #view-cv .cvs-pret i { width: 7px; height: 7px; border-radius: 50%; background: var(--app-ok); }
html.dans-app:not(.vitrine) #view-cv .cvs-finale h2 { margin: 10px 0 0; font: 500 32px/1.08 var(--serif); letter-spacing: -0.01em; text-transform: none; color: var(--app-fond); }
html.dans-app:not(.vitrine) #view-cv .cvs-finale .cvs-bilan small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
html.dans-app:not(.vitrine) #view-cv .cvs-offres { display: flex; align-items: center; justify-content: center; height: 50px; margin-top: 16px; border-radius: 25px; background: var(--app-fond); color: var(--app-encre); font: 600 15px/1 var(--sans); text-decoration: none; transition: transform 0.12s ease; }
html.dans-app:not(.vitrine) #view-cv .cvs-offres:active { transform: scale(0.98); }
html.dans-app:not(.vitrine) #view-cv .cvs-retoucher { height: 36px; margin-top: 6px; background: transparent; color: rgba(255, 255, 255, 0.78); }
html.dans-app:not(.vitrine) #view-cv .cvw-vrac { width: 100%; height: 42px; padding: 0 14px; border: 0.5px solid var(--app-ligne-forte); border-radius: 12px; background: var(--app-fond); color: var(--app-encre); font: 400 14px/1 var(--sans); }
html.dans-app:not(.vitrine) #view-cv .cvw-vrac:focus { outline: none; border-color: var(--app-encre); }
html.dans-app:not(.vitrine) #view-cv .cvw-suite.allume { animation: cvw-allume 0.42s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes cvw-allume { 0% { transform: scale(0.94); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { html.dans-app:not(.vitrine) #view-cv .cvw-suite.allume, html.dans-app:not(.vitrine) #view-cv .cvs-finale { animation: none; } }

/* Visite : le pied couvre le bas de la colonne, rien ne dépasse dessous ; la page ne propose pas « Modifier ». */
html.dans-app:not(.vitrine) #view-cv .cv-visite .cvw-pied { box-shadow: 0 24px 0 0 var(--app-fond); }
html.dans-app:not(.vitrine) #view-cv .cv-visite .cv-page-app [data-edit]::after { display: none; }
html.dans-app:not(.vitrine) #view-cv .cv-visite .cv-page-app [data-edit] { cursor: default; }
@media (min-width: 901px) {
  html.dans-app:not(.vitrine) #view-cv .cv-visite .at-remplir .at-defile { padding-bottom: 0; }
  html.dans-app:not(.vitrine) #view-cv .cv-visite .at-remplir .cvw-pied { padding-bottom: 14px; }
}