/* Offres : une recherche, quatre regards (offres-modes.js).
   La requête est le titre, en serif ; une ligne grise dessous ; les modes en mots ;
   puis du blanc, des logos, et une seule couleur d'action (le bleu). Le bronze ne dit
   qu'une chose : bon match. Rien d'encadré. */

.om, .om-voile, #fiche-offre .fo-annonce {
  --om-encre: var(--app-encre, #0d0d0d);
  --om-douce: var(--app-encre-douce, #3f3f46);
  --om-gris: var(--app-gris, #8e8e93);
  --om-pale: color-mix(in srgb, var(--app-gris, #8e8e93) 55%, transparent);
  --om-ligne: var(--app-ligne, rgba(0, 0, 0, 0.06));
  --om-bleu: #1f4bdb;
  --om-bleu-lavis: #e8eeff;
  --om-bronze: #b08d57;
  --om-fond: var(--app-fond, #fff);
  --om-releve: var(--app-releve, #f4f4f5);
  display: block;
  width: 100%;
  color: var(--om-encre);
  text-align: left;
  font-family: var(--sans);
  -webkit-tap-highlight-color: transparent;
}
.om *, .om-voile * { box-sizing: border-box; }
.om h2, .om p, .om ul, .om small, .om b, .om-voile p, .om-voile span { text-transform: none; letter-spacing: normal; }
.om button, .om-voile button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-transform: none; letter-spacing: 0; min-height: 0; }
.om svg, .om-voile svg { display: block; width: 100%; height: 100%; }
#dire .bulle.om-hote { display: block !important; text-align: left; margin-top: 0 !important; max-width: none; width: 100%; justify-self: stretch; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; gap: 0; }
html.om-actif.dire-actif #dire { max-width: none; }
/* la barre fixée et les regards collés en haut : aucun ancêtre ne doit leur servir de cadre
   (le translate laissé par l'animation de la bulle, le overflow de la page) */
#dire .bulle.om-hote { translate: none !important; transform: none !important; }
html.om-actif.dire-actif #view-search .offers-page { overflow: visible; overflow-x: clip; }
@media (min-width: 901px) {
  html.om-actif.dire-actif #view-search .offers-page { max-width: 1180px; }
}

/* ---------- l'en-tête : la requête est le titre ---------- */
.om-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.om-q { flex: 1; min-width: 0; margin: 0; font: 400 34px/1.08 var(--serif); letter-spacing: -0.015em; color: var(--om-encre); text-align: left; }
.om-q-bouton { display: block; }
.om button.om-q-bouton { font: 400 34px/1.08 var(--serif); letter-spacing: -0.015em; }
.om-q-bouton.vide { color: var(--om-pale); font-style: italic; }
.om-q-form { flex: 1; min-width: 0; position: relative; }
input.om-q { width: 100%; border: 0; outline: 0; background: transparent; padding: 0; border-radius: 0; box-shadow: none; }
input.om-q::placeholder { color: var(--om-pale); font-style: italic; }
input.om-q:focus, input.om-q:focus-visible { color: var(--om-encre); outline: 0; box-shadow: none; }
.om-outils { display: flex; gap: 2px; flex: none; margin-top: 2px; color: var(--om-gris); }
.om-outil { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; }
.om-outil svg { width: 20px; height: 20px; }
.om-outil[hidden] { display: none; }
.om-outil.on { color: var(--om-bleu); }
.om-outil:hover { background: var(--om-releve); }
/* ---- la dictée : le bouton devient un rond bleu dont les barres suivent la voix ;
   les mots s'écrivent dans le champ, on retouche le rond pour envoyer ---- */
.om-micro.dictee, .dire-barre .micro.dictee { background: var(--om-bleu) !important; color: #fff !important; --n: 0; }
.om-micro.dictee:hover, .dire-barre .micro.dictee:hover { background: #173ec2 !important; }
.onde { display: inline-flex; align-items: center; justify-content: center; gap: 3px; height: 20px; }
.onde i { display: block; width: 3px; border-radius: 2px; background: currentColor; transition: height 80ms ease-out; animation: onde-vie 1.2s ease-in-out infinite; }
.onde i:nth-child(1) { height: calc(4px + var(--n, 0) * 10px); animation-delay: 0s; }
.onde i:nth-child(2) { height: calc(7px + var(--n, 0) * 13px); animation-delay: 0.15s; }
.onde i:nth-child(3) { height: calc(5px + var(--n, 0) * 15px); animation-delay: 0.3s; }
.onde i:nth-child(4) { height: calc(3px + var(--n, 0) * 9px); animation-delay: 0.45s; }
@keyframes onde-vie { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.5); } }
@media (prefers-reduced-motion: reduce) { .onde i { animation: none; } }
.om-sugg { position: absolute; z-index: 6; top: calc(100% + 10px); left: 0; min-width: 360px; max-width: 100%; display: grid; gap: 2px; padding: 6px; border-radius: 18px; background: var(--om-fond); border: 1px solid var(--om-ligne); box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.3); }
.om-sugg[hidden] { display: none; }
.om-sugg button { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; text-align: left; }
.om-sugg button:hover { background: var(--om-releve); }
.om-sugg b { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.om-sugg small { font-size: 12.5px; color: var(--om-gris); white-space: nowrap; }
.om-rond-s { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--om-releve); color: var(--om-douce); }
.om-rond-s svg { width: 14px; height: 14px; }

.om-villes { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 14px; color: var(--om-gris); }
.om-villes button { color: var(--om-gris); }
.om-villes button b { font-weight: 400; color: var(--om-pale); margin-left: 5px; }
.om-villes button.on { color: var(--om-encre); font-weight: 500; }

.om-sous { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; min-height: 24px; font-size: 14px; color: var(--om-gris); }
.om-sous b { color: var(--om-encre); font-weight: 500; }
.om-bleu { color: var(--om-bleu); font-weight: 500; }
.om-suivre { display: inline-flex; align-items: center; gap: 6px; color: var(--om-bleu); font-weight: 500; font-size: 14px; flex: none; }
.om-suivre svg { width: 13px; height: 13px; }
.om-suivre.on { color: var(--om-gris); }
.om-suivre:disabled { opacity: 0.5; }

/* ---------- comme ChatGPT : les quatre regards en haut, la barre en bas ---------- */
.om-modes { display: flex; gap: 2px; width: max-content; max-width: 100%; margin: 0 auto; padding: 3px; border-radius: 999px; background: var(--om-releve); font-size: 14px; }
.om .om-modes button { padding: 8px 16px; border-radius: 999px; color: var(--om-gris); white-space: nowrap; transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease; }
.om .om-modes button:hover { color: var(--om-encre); }
.om .om-modes button.on { background: var(--om-fond); color: var(--om-encre); font-weight: 500; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px -6px rgba(0, 0, 0, 0.18); }
.om-sous { justify-content: center; gap: 14px; margin-top: 10px; min-height: 20px; font-size: 13px; text-align: center; }
.om-aide { color: var(--om-gris); }
.om-points { display: none; }

/* ---------- ordinateur : les regards en haut, la barre posée en bas ---------- */
.om.grand { display: flex; flex-direction: column; min-height: calc(100dvh - 56px); }
.om.grand .om-modes { order: 1; font-size: 14.5px; }
.om.grand .om-villes, .om.grand .om-sous { order: 2; justify-content: center; }
.om.grand .om-corps { order: 3; flex: 1; margin-top: 28px; padding-bottom: 110px; }
/* la barre, fixée en bas, centrée dans ce que laisse la colonne de gauche */
html.lat-on:is(.dans-app, .app-accueil):not(.vitrine) .om.grand { --om-g: 216px; }
html.lat-off:is(.dans-app, .app-accueil):not(.vitrine) .om.grand { --om-g: 72px; }
.om.grand .om-tete { order: 4; position: fixed; bottom: 24px; left: calc(var(--om-g, 0px) + (100vw - var(--om-g, 0px)) / 2); transform: translateX(-50%); z-index: 8; width: min(760px, calc(100vw - var(--om-g, 0px) - 64px)); margin: 0; align-items: center; padding: 6px 8px 6px 20px; border: 1px solid color-mix(in srgb, var(--om-encre) 10%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--om-fond) 97%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.3); }
.om.grand .om-tete:focus-within { border-color: color-mix(in srgb, var(--om-encre) 25%, transparent); }
.om.grand .om-q-form { display: flex; align-items: center; gap: 12px; }
.om-loupe { flex: none; width: 19px; height: 19px; color: var(--om-gris); }
.om.grand input.om-q { font: 400 17px/1.2 var(--sans); letter-spacing: 0; height: 46px; }
.om.grand input.om-q::placeholder { font-style: normal; color: var(--om-gris); }
.om.grand .om-outils { margin-top: 0; }
.om.grand .om-sugg { top: auto; bottom: calc(100% + 14px); }
@media (min-width: 901px) {
  html.om-actif.dire-actif #view-search .offers-page { padding-top: 28px; }
}

@media (max-width: 900px) {
  .om { padding-top: 4px; }
  .om:not(.grand) .om-tete { display: none; }
  /* un voile blanc sous les regards et le « + » : les offres s'effacent en passant dessous */
  html.om-actif.dire-actif #dire::before { content: ""; position: fixed; z-index: 6; top: 0; left: 0; right: 0; height: calc(env(safe-area-inset-top) + 64px); background: linear-gradient(var(--app-fond, #fff) 72%, transparent); pointer-events: none; }
  .om-modes { position: sticky; top: calc(env(safe-area-inset-top) + 6px); z-index: 7; font-size: 13px; box-shadow: 0 6px 20px -12px rgba(0, 0, 0, 0.25); }
  .om .om-modes button { padding: 8px 9px; }
  /* le « + » vit en haut à droite : les regards se centrent dans ce qui reste */
  html.dock-on .om:not(.grand) .om-modes { translate: -24px 0; }
  .om-micro { display: none !important; }
  /* la seule barre : filtres, le texte, le micro, l'envoi */
  html.om-actif.dire-actif .dire-barre:not([hidden]) { display: flex; align-items: center; gap: 2px; padding: 5px 5px 5px 8px; }
  html.om-actif.dire-actif .dire-barre input { flex: 1; order: 1; padding-left: 8px; }
  html.om-actif.dire-actif .dire-barre .om-filtres { order: 0; }
  html.om-actif.dire-actif .dire-barre .micro:not([hidden]) { display: grid !important; order: 2; }
  html.om-actif.dire-actif .dire-barre .envoyer { order: 3; width: 38px; height: 38px; }
  html.om-actif.dire-actif .dire-barre .compris-direct { display: none; }
  .dire-barre .om-filtres { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--om-encre, #0d0d0d); cursor: pointer; }
  .dire-barre .om-filtres[hidden] { display: none; }
  .dire-barre .om-filtres.on { color: var(--om-bleu, #1f4bdb); }
  .dire-barre .om-filtres svg { width: 20px; height: 20px; }
  /* le « + » : une icône discrète, comme le bouton de droite de ChatGPT */
  html.om-actif.dire-actif.dock-on .dock-coin.haut { top: calc(env(safe-area-inset-top) + 6px); right: 16px; }
  html.om-actif.dire-actif.dock-on .dock-coin.haut:not(.ouvert) .dock-plus { width: 40px; height: 40px; background: var(--app-releve, #f4f4f5); color: var(--app-encre, #0d0d0d); box-shadow: none; }
  html.om-actif.dire-actif.dock-on .dock-coin.haut .dock-plus svg { width: 20px; height: 20px; }
}
html.om-actif.dire-actif #lateral .lat-cherche { display: none !important; }

/* ---------- le corps ---------- */
.om-corps { margin-top: 18px; animation: om-arrive 320ms ease both; }
@keyframes om-arrive { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
.om.glisse-gauche .om-corps { animation: om-gauche 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.om.glisse-droite .om-corps { animation: om-droite 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes om-gauche { from { opacity: 0; translate: 40px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes om-droite { from { opacity: 0; translate: -40px 0; } to { opacity: 1; translate: 0 0; } }
.om-attente { height: 120px; position: relative; }
.om-attente::after { content: ""; position: absolute; left: 0; top: 24px; width: 120px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--om-pale), transparent); animation: om-va 1.1s ease-in-out infinite; }
@keyframes om-va { 0% { translate: 0 0; opacity: 0.4; } 50% { translate: 80px 0; opacity: 1; } 100% { translate: 0 0; opacity: 0.4; } }
.om-message { display: grid; gap: 10px; justify-items: start; padding: 28px 0; }
.om-message b { font: 400 22px/1.2 var(--serif); letter-spacing: -0.01em; }
.om-message span { font-size: 14px; color: var(--om-gris); line-height: 1.5; max-width: 420px; }
.om-message .om-cta { margin-top: 6px; }
.om-message .om-reessayer { color: var(--om-bleu); font-weight: 500; font-size: 14px; }
.om-pied { margin: 18px 0 0; font-size: 13px; color: var(--om-pale); }

/* une ligne = une offre */
.om-liste { display: block; }
.om-ligne { display: grid; grid-template-columns: 44px 1fr auto; column-gap: 16px; align-items: center; padding: 13px 0; cursor: pointer; border-radius: 12px; }
.om-ligne:hover .om-ligne-txt b, .om-ligne:focus-visible .om-ligne-txt b { color: var(--om-bleu); }
.om-ligne:focus-visible { outline: 2px solid var(--om-bleu); outline-offset: 4px; }
.om-ligne-txt { min-width: 0; }
.om-ligne-txt b { display: block; font-size: 16px; line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.om-ligne-txt small { display: block; margin-top: 3px; font-size: 13px; color: var(--om-gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.om-ligne.sel .om-ligne-txt b { color: var(--om-bleu); }
.om-pt { width: 9px; height: 9px; border-radius: 50%; background: var(--om-bronze); }
.om-vide { width: 9px; }
.om-age { font-size: 12.5px; color: var(--om-pale); white-space: nowrap; }
.om-n { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: var(--om-bleu); color: #fff; font-size: 12px; font-weight: 600; }
.om-veille { grid-template-columns: 1fr auto auto; }
.om-veille .ta-logo + .om-ligne-txt { grid-column: auto; }
.om-veille:has(.ta-logo) { grid-template-columns: 44px 1fr auto auto; }
.om-veille > svg { width: 16px; height: 16px; color: var(--om-pale); }
.om-groupe { margin-top: 18px; }
.om-groupe + .om-groupe { margin-top: 30px; }
.om-caps { display: block; font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--om-gris); margin-bottom: 4px; }

/* les logos : nus, sans tuile */
.om .ta-logo.om-logo { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--om-ligne); background: var(--om-fond); }
.om .ta-logo.om-logo img { padding: 10%; }
.om .ta-logo.om-logo em { font: 500 17px/1 var(--serif); color: var(--om-encre); }
.om .ta-logo.om-logo.a-logo { border-color: transparent; }

/* ---------- maisons ---------- */
.om-chiffre { font: 400 96px/1 var(--serif); letter-spacing: -0.035em; margin: 10px 0 0; }
.om-chiffre small { display: block; margin-top: 16px; font: 400 11.5px/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--om-gris); }
.om.grand .om-chiffre { font-size: 128px; }
.om-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 10px; margin-top: 34px; }
.om.grand .om-grille { grid-template-columns: repeat(8, 1fr); gap: 34px 14px; margin-top: 44px; }
.om-maison { position: relative; display: grid; justify-items: center; gap: 8px; min-width: 0; }
.om-maison .ta-logo.om-logo { width: 54px; height: 54px; border-radius: 15px; }
.om.grand .om-maison .ta-logo.om-logo { width: 56px; height: 56px; }
.om-maison b { display: block; max-width: 100%; font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.om-maison small { display: block; margin-top: -4px; font-size: 12px; color: var(--om-gris); white-space: nowrap; }
.om-maison:hover b { color: var(--om-bleu); }
.om-point-bleu { position: absolute; top: -4px; right: calc(50% - 31px); width: 10px; height: 10px; border-radius: 50%; background: var(--om-bleu); border: 2px solid var(--om-fond); }

/* ---------- une à une ---------- */
.om-une { display: grid; justify-items: stretch; }
.om-grande { display: block; padding-top: 10px; }
.om-grande .ta-logo.om-logo { width: 64px; height: 64px; border-radius: 18px; }
.om-grande h2 { margin: 22px 0 0; font: 400 36px/1.02 var(--serif); letter-spacing: -0.02em; color: var(--om-encre); }
.om.grand .om-une .om-grande h2 { font-size: 44px; }
.om-grande-sous { margin: 10px 0 0; font-size: 14px; color: var(--om-gris); line-height: 1.5; }
.om-annonce { margin-top: 18px; }
.om-lecture { margin: 0; font-size: 13px; color: var(--om-pale); }
.om-salaire { margin: 0 0 12px; font: 500 20px/1.1 var(--serif); letter-spacing: -0.01em; color: var(--om-encre); }
.om-bloc + .om-bloc { margin-top: 16px; }
/* La paie : « 385k à 460k $ ». Les chiffres en serif, le « à » en italique, la devise petite. */
.om-paie { display: flex; align-items: baseline; justify-content: center; gap: 7px; margin: 0 0 12px; color: var(--om-encre); }
.om-paie b { font: 500 24px/1 var(--serif); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.om-paie i { font: italic 500 17px/1 var(--serif); color: var(--om-pale); margin: 0 1px; }
.om-paie small { font-size: 14px; color: var(--om-gris); margin-left: -2px; }
.om-paie b small { font: 500 0.55em/1 var(--serif); color: var(--om-gris); margin: 0 2px 0 0; vertical-align: 0.42em; }
.om-paie em { font-style: normal; font-size: 12px; color: var(--om-pale); }
/* Un fil : chaque ligne de l'annonce est un point sur le trait ; le dernier, bronze, c'est vous. */
.om-cles { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.om-cles li { position: relative; padding-left: 24px; font-size: 14.5px; line-height: 1.4; color: var(--om-douce); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.om-cles li::before { content: ""; position: absolute; left: 0; top: 5px; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--om-bleu); background: var(--om-fond); box-sizing: border-box; }
.om-cles li::after { content: ""; position: absolute; left: 4px; top: 16px; bottom: -12px; width: 1px; background: rgba(31, 75, 219, 0.16); }
.om-cles li:last-child::after { display: none; }
.om-cles li.vous::before { border-color: var(--om-bronze); background: var(--om-bronze); }
.om-extrait { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--om-douce); }
.om-match { position: relative; margin: 18px 0 0; padding-left: 18px; font-size: 14px; color: var(--om-douce); }
.om-match::before { content: ""; position: absolute; left: 0; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--om-bronze); }
.om-match:empty::after { content: "Bon match"; }
.om-petit { margin: 8px 0 0; font-size: 13px; color: var(--om-gris); }
/* la carte : centrée, une pile derrière, presque sans mots */
.om-pile { position: relative; margin: 14px auto 0; max-width: 420px; }
/* La couleur de la maison, lue dans son logo, respire derrière la carte. Sans logo : rien. */
.om-une { --t: 31, 75, 219; --avance: 0; }
.om-halo { position: absolute; left: 10%; right: 10%; top: 8%; bottom: 8%; border-radius: 50%; background: rgb(var(--t)); opacity: 0.16; filter: blur(44px); transform: translateZ(0); transition: background-color 600ms ease, opacity 400ms ease; pointer-events: none; }
.om-une:not([style*="--t"]) .om-halo { opacity: 0.07; }
.om-ombre { position: absolute; left: 14px; right: 14px; top: 0; bottom: 0; border-radius: 30px; background: var(--om-fond); border: 1px solid var(--om-ligne); transform: translateY(24px) scale(0.92); opacity: 0.45; }
/* La carte d'après, pour de vrai, derrière : on la lit déjà. */
.om-derriere { position: absolute; inset: 0; overflow: hidden; display: grid; justify-items: center; align-content: start; text-align: center; padding: 36px 26px 30px; border-radius: 30px; background: var(--om-fond); border: 1px solid var(--om-ligne); transform: translateY(12px) scale(0.955); opacity: 0.7; pointer-events: none; filter: saturate(0.6); }
/* son texte s'efface avant le bas : sous une carte courte, rien ne dépasse */
.om-derriere::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(transparent, var(--om-fond) 70%); }
.om-derriere .ta-logo.om-logo { width: 72px; height: 72px; border-radius: 20px; }
.om-derriere h2 { margin: 22px 0 0; font: 400 32px/1.04 var(--serif); letter-spacing: -0.02em; color: var(--om-encre); text-wrap: balance; }
.om-derriere .om-paie { margin: 18px 0 0; }
.om-derriere .om-cles { margin-top: 24px; text-align: left; width: 100%; gap: 12px; }
.om-derriere .om-lecture { margin: 26px 0 4px; }
.om-carte { position: relative; display: grid; justify-items: center; text-align: center; padding: 36px 26px 30px; border-radius: 30px; background: linear-gradient(180deg, rgba(var(--t), 0.07), rgba(var(--t), 0) 38%) var(--om-fond); border: 1px solid var(--om-ligne); box-shadow: 0 30px 70px -40px rgba(var(--t), 0.45), 0 2px 6px -2px rgba(12, 27, 61, 0.06); cursor: pointer; transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 240ms ease; touch-action: pan-y; will-change: transform; }
.om-carte:not([style*="--t"]) { background: var(--om-fond); box-shadow: 0 30px 70px -40px rgba(12, 27, 61, 0.35), 0 2px 6px -2px rgba(12, 27, 61, 0.06); }
.om-carte.tenue { transition: none; }
.om-carte:focus-visible { outline: 2px solid var(--om-bleu); outline-offset: 6px; }
.om-carte .ta-logo.om-logo { width: 72px; height: 72px; border-radius: 20px; }
.om-carte h2 { margin: 22px 0 0; font: 400 32px/1.04 var(--serif); letter-spacing: -0.02em; color: var(--om-encre); text-wrap: balance; }
.om-carte-sous { margin: 8px 0 0; font-size: 14px; color: var(--om-gris); }
.om-carte .om-salaire { margin: 18px 0 0; font-size: 26px; }
.om-carte .om-paie { margin: 18px 0 0; }
.om-carte .om-paie b { font-size: 30px; }
.om-carte .om-paie i { font-size: 20px; }
.om-carte .om-cles { margin-top: 24px; text-align: left; gap: 12px; width: 100%; padding: 0 2px; }
.om-carte .om-cles li { font-size: 14px; color: var(--om-douce); }
.om-carte .om-cles li::after { bottom: -14px; }
.om-carte .om-extrait { margin-top: 22px; text-align: left; font-size: 14px; }
.om-carte .om-match { margin-top: 24px; font-size: 13px; }
.om-carte::before, .om-carte::after { content: ""; position: absolute; top: 22px; width: 44px; height: 44px; border-radius: 50%; opacity: 0; transition: opacity 160ms ease; pointer-events: none; background-size: 18px; background-position: center; background-repeat: no-repeat; }
.om-carte::before { left: 22px; background-color: var(--om-releve); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
.om-carte::after { right: 22px; background-color: var(--om-bleu); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M6 4h12v17l-6-4-6 4z'/%3E%3C/svg%3E"); }
.om-carte.vers-passer::before, .om-carte.vers-garder::after { opacity: 1; }
.om.carte-part .om-carte { animation: om-carte-arrive 300ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
/* une à une : toute la page suit le doigt (ou la souris), la carte penche */
html.om-une-on { overflow-x: clip; touch-action: pan-y pinch-zoom; }
html.om-une-on body { touch-action: pan-y pinch-zoom; }
.om[data-mode="une"] .om-corps { will-change: transform; }
.om-corps.tenu { transition: none; }
.om-corps.revient { transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.om-corps.part { transition: transform 230ms cubic-bezier(0.4, 0, 1, 1); }
html.om-tire, html.om-tire * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }
.om[data-mode="une"] .om-corps img { -webkit-user-drag: none; }
@keyframes om-carte-arrive { from { transform: translateY(12px) scale(0.955); opacity: 0.7; } to { transform: none; opacity: 1; } }
.om.carte-part .om-derriere { animation: om-derriere-arrive 300ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes om-derriere-arrive { from { transform: translateY(24px) scale(0.92); opacity: 0.45; } to { transform: translateY(12px) scale(0.955); opacity: 0.7; } }
.om-lecture { display: flex; justify-content: center; gap: 6px; margin: 26px 0 4px; }
.om-lecture i { width: 6px; height: 6px; border-radius: 50%; background: var(--om-pale); animation: om-souffle 1.1s ease-in-out infinite; }
.om-lecture i:nth-child(2) { animation-delay: 0.15s; }
.om-lecture i:nth-child(3) { animation-delay: 0.3s; }
@keyframes om-souffle { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.om-progres { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 22px; }
.om-progres small { font-size: 12px; color: var(--om-pale); font-variant-numeric: tabular-nums; }
.om-gestes { display: flex; justify-content: center; align-items: center; gap: 26px; margin-top: 30px; }
.om-rond { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; color: var(--om-gris); box-shadow: 0 0 0 1.5px var(--om-ligne); background: var(--om-fond); transition: transform 160ms ease; }
.om-rond svg { width: 19px; height: 19px; }
.om-rond:active { transform: scale(0.94); }
.om-rond.bleu { width: 66px; height: 66px; color: #fff; background: var(--om-bleu); box-shadow: 0 18px 36px -16px color-mix(in srgb, var(--om-bleu) 70%, transparent); }
.om-rond.bleu svg { width: 22px; height: 22px; }
.om-rond[aria-pressed="true"] { color: var(--om-bleu); }
.om-une.vers-passer .om-passer, .om-une.vers-garder .om-garder { transform: scale(calc(1 + 0.22 * var(--avance))); }
.om-une.vers-passer .om-passer { color: var(--om-encre); box-shadow: 0 0 0 1.5px var(--om-encre); }
.om-une.vers-garder .om-garder { color: #fff; background: var(--om-bleu); box-shadow: 0 0 0 1.5px var(--om-bleu); }
.om-rond kbd { position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%); font: 500 11px/1 var(--sans, system-ui); color: var(--om-pale); opacity: 0; transition: opacity 200ms ease; }
.om-rond { position: relative; }
.om.grand .om-une:hover .om-rond kbd, .om.grand .om-une:focus-within .om-rond kbd { opacity: 1; }
.om.grand .om-gestes { margin-bottom: 10px; }
.om-jauge { position: relative; display: block; width: 120px; height: 3px; border-radius: 2px; background: var(--om-ligne); overflow: hidden; }
.om-jauge i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--om-encre); transition: width 240ms ease; }
.om.carte-part .om-grande { animation: om-part 280ms ease both; }
@keyframes om-part { from { opacity: 0; translate: -24px 0; } to { opacity: 1; translate: 0 0; } }
.om.grand .om-une { max-width: 640px; margin: 10px auto 0; }
/* ordinateur, une à une : la carte seule sous les regards, sans la barre ni les villes */
.om.grand[data-mode="une"] .om-tete, .om.grand[data-mode="une"] .om-villes, .om.grand[data-mode="une"] .om-sous { display: none; }
.om.grand[data-mode="une"] .om-corps { padding-bottom: 40px; }
.om.grand .om-pile { max-width: 460px; }
.om.grand .om-carte h2 { font-size: 36px; }
@media (max-width: 900px) {
  /* téléphone : la carte, les gestes et la jauge tiennent au-dessus de la barre */
  .om-pile { margin-top: 4px; }
  .om-carte { padding: 22px 20px 20px; border-radius: 26px; }
  .om-carte .ta-logo.om-logo { width: 54px; height: 54px; border-radius: 16px; }
  .om-carte h2 { margin-top: 14px; font-size: 26px; }
  .om-carte .om-paie { margin-top: 12px; }
  .om-carte .om-paie b { font-size: 26px; }
  .om-carte .om-paie i { font-size: 18px; }
  .om-carte .om-cles { margin-top: 16px; gap: 9px; }
  .om-carte .om-cles li { font-size: 13.5px; line-height: 1.35; }
  .om-carte .om-cles li::after { bottom: -11px; }
  .om-derriere { padding: 22px 20px 20px; border-radius: 26px; }
  .om-derriere .ta-logo.om-logo { width: 54px; height: 54px; border-radius: 16px; }
  .om-derriere h2 { margin-top: 14px; font-size: 26px; }
  .om-derriere .om-paie { margin-top: 12px; }
  .om-derriere .om-cles { margin-top: 16px; gap: 9px; }
  .om-halo { filter: blur(36px); }
  .om-carte .om-extrait { margin-top: 14px; font-size: 13.5px; }
  .om-gestes { margin-top: 16px; gap: 22px; }
  .om[data-mode="une"] .om-corps { margin-top: 10px; }
  .om-rond { width: 46px; height: 46px; }
  .om-rond.bleu { width: 58px; height: 58px; }
  .om-progres { margin-top: 12px; }
  .om-une { padding-bottom: 20px; }

  /* Une à une, comme Tinder : rien que la carte et les trois gestes, sur tout l'écran.
     Les quatre regards restent en haut pour en sortir ; la barre d'onglets, le « + »,
     la barre de texte, les villes et la ligne grise s'effacent. Le corps est fixé (et
     non un enfant fixé) : c'est lui que le doigt translate. */
  html.om-une-on #dock-tel, html.om-une-on .dock-coin, html.om-une-on .dock-voile,
  html.om-une-on.om-actif .dire-barre, html.om-une-on .om-villes, html.om-une-on .om-sous { display: none !important; }
  html.om-une-on.dock-on .om:not(.grand) .om-modes { translate: none; }
  html.om-une-on, html.om-une-on body { overflow: hidden; overscroll-behavior: none; }
  .om:not(.grand)[data-mode="une"] .om-corps { position: fixed; z-index: 5; left: 0; right: 0; top: calc(env(safe-area-inset-top) + 58px); bottom: 0; margin: 0; padding: 0 16px; }
  .om:not(.grand)[data-mode="une"] .om-une { height: 100%; display: flex; flex-direction: column; padding-bottom: calc(env(safe-area-inset-bottom) + 14px); }
  .om:not(.grand)[data-mode="une"] .om-pile { flex: 1; min-height: 0; width: 100%; max-width: 480px; margin: 6px auto 0; }
  .om:not(.grand)[data-mode="une"] .om-carte { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 28px 22px; }
  .om:not(.grand)[data-mode="une"] .om-derriere { align-content: center; }
  .om:not(.grand)[data-mode="une"] .om-carte .ta-logo.om-logo, .om:not(.grand)[data-mode="une"] .om-derriere .ta-logo.om-logo { flex: none; width: 76px; height: 76px; border-radius: 22px; }
  .om:not(.grand)[data-mode="une"] .om-carte h2, .om:not(.grand)[data-mode="une"] .om-derriere h2 { margin-top: 20px; font-size: 30px; }
  .om:not(.grand)[data-mode="une"] .om-carte .om-cles { margin-top: 24px; gap: 12px; min-height: 0; overflow: hidden; }
  .om:not(.grand)[data-mode="une"] .om-carte .om-cles li { font-size: 14.5px; }
  .om:not(.grand)[data-mode="une"] .om-gestes { flex: none; margin-top: 18px; gap: 30px; }
  .om:not(.grand)[data-mode="une"] .om-rond { width: 58px; height: 58px; }
  .om:not(.grand)[data-mode="une"] .om-rond.bleu { width: 70px; height: 70px; }
  .om:not(.grand)[data-mode="une"] .om-progres { display: none; }
  .om:not(.grand)[data-mode="une"] .om-message { padding-top: 40px; }
}

/* ---------- ordinateur : liste + rail ---------- */
.om-deux { display: grid; grid-template-columns: minmax(0, 1fr) 420px; column-gap: 72px; align-items: start; }
.om-rail { position: sticky; top: 96px; }
.om-rail .om-grande h2 { font-size: 34px; }
.om-actes { display: flex; align-items: center; gap: 20px; margin-top: 26px; }
.om-cta { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px; border-radius: 22px; background: var(--om-bleu); color: #fff; font-size: 14px; font-weight: 500; text-decoration: none; }
.om-cta:hover { filter: brightness(1.06); }
.om-lien { color: var(--om-gris); font-size: 14px; text-decoration: none; }
.om-lien:hover { color: var(--om-encre); }
.om-lien[aria-pressed="true"] { color: var(--om-bleu); }
@media (max-width: 1100px) { .om-deux { grid-template-columns: minmax(0, 1fr) 360px; column-gap: 40px; } }

/* ---------- la feuille des filtres ---------- */
.om-voile { position: fixed; inset: 0; z-index: 85; background: rgba(12, 27, 61, 0.22); opacity: 0; transition: opacity 240ms ease; display: flex; align-items: flex-end; justify-content: center; }
.om-voile.on { opacity: 1; }
.om-feuille { width: 100%; max-height: 86vh; overflow-y: auto; background: var(--om-fond); color: var(--om-encre); border-radius: 28px 28px 0 0; padding: 12px 22px calc(28px + env(safe-area-inset-bottom)); translate: 0 24px; transition: translate 260ms cubic-bezier(0.2, 0.8, 0.2, 1); font-family: var(--sans); }
.om-voile.on .om-feuille { translate: 0 0; }
.om-poignee { width: 40px; height: 4px; border-radius: 2px; margin: 0 auto 10px; background: var(--om-ligne); }
.om-grp { display: grid; grid-template-columns: 86px 1fr; column-gap: 14px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--om-ligne); }
.om-grp:first-of-type { border-top: 0; }
.om-lab { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--om-gris); }
.om-mots { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 15px; color: var(--om-gris); }
.om-mots button { color: var(--om-gris); padding: 4px 0; }
.om-mots button b { font-weight: 400; color: var(--om-pale); margin-left: 5px; font-size: 13px; }
.om-mots button.on { color: var(--om-encre); font-weight: 500; }
.om-actes-feuille { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }
.om-actes-feuille .om-cta { height: 46px; padding: 0 24px; }
@media (min-width: 901px) {
  .om-voile { align-items: center; }
  .om-feuille { width: 560px; border-radius: 24px; padding: 14px 26px 26px; max-height: 80vh; }
}

/* « #dire .bulle.maxx p » pèse plus lourd que nos classes : on redit ici ce qui compte. */
#dire .bulle.maxx.om-hote p { margin: 0; line-height: 1.45; color: inherit; }
#dire .bulle.maxx.om-hote .om-salaire { font: 500 20px/1.1 var(--serif); color: var(--om-encre); margin: 0 0 12px; }
#dire .bulle.maxx.om-hote .om-carte .om-salaire { font-size: 26px; margin: 18px 0 0; }
@media (max-width: 900px) { #dire .bulle.maxx.om-hote .om-carte .om-salaire { font-size: 22px; margin-top: 12px; } }
#dire .bulle.maxx.om-hote .om-paie { display: flex; line-height: 1; margin: 0 0 12px; color: var(--om-encre); }
#dire .bulle.maxx.om-hote .om-carte .om-paie, #dire .bulle.maxx.om-hote .om-derriere .om-paie { margin: 18px 0 0; }
@media (max-width: 900px) { #dire .bulle.maxx.om-hote .om-carte .om-paie { margin-top: 12px; } }
#dire .bulle.maxx.om-hote .om-grande-sous { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--om-gris); }
#dire .bulle.maxx.om-hote .om-carte-sous { margin: 8px 0 0; font-size: 14px; color: var(--om-gris); }
#dire .bulle.maxx.om-hote .om-match { margin: 18px 0 0; font-size: 14px; color: var(--om-douce); }
#dire .bulle.maxx.om-hote .om-carte .om-match { margin-top: 24px; font-size: 13px; }
@media (max-width: 900px) { #dire .bulle.maxx.om-hote .om-carte .om-match { margin-top: 14px; } }
#dire .bulle.maxx.om-hote .om-petit { margin: 8px 0 0; font-size: 13px; color: var(--om-gris); }
#dire .bulle.maxx.om-hote .om-extrait { font-size: 14.5px; line-height: 1.5; color: var(--om-douce); }
#dire .bulle.maxx.om-hote .om-carte .om-extrait { margin-top: 22px; font-size: 14px; }
#dire .bulle.maxx.om-hote .om-pied { margin: 18px 0 0; font-size: 13px; color: var(--om-pale); }
#dire .bulle.maxx.om-hote .om-lecture { margin: 26px 0 4px; }

/* ---------- la fiche d'offre, enrichie ---------- */
#fiche-offre .fo-lettres { position: relative; overflow: hidden; }
#fiche-offre .fo-lettres img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 14%; opacity: 0; }
#fiche-offre .fo-lettres.a-logo { font-size: 0; border-color: transparent; }
#fiche-offre .fo-lettres.a-logo img { opacity: 1; }
#fiche-offre .fo-annonce { display: grid; gap: 14px; padding: 0 2px; text-align: left; }
#fiche-offre .fo-annonce .om-salaire { margin: 0; }
#fiche-offre .fo-annonce .om-paie { margin: 0; justify-content: flex-start; }
#fiche-offre .fo-annonce .om-caps { margin-bottom: 6px; }

/* ---------- Suivis : les maisons en stories, le carré bleu, les recherches ---------- */
.om-suivis { display: grid; gap: 22px; max-width: 640px; margin: 0 auto; }
.om-stories { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; margin: 0 -4px; padding: 2px 4px 4px; overscroll-behavior-x: contain; }
.om-stories::-webkit-scrollbar { display: none; }
.om .om-st { flex: none; width: 72px; display: grid; justify-items: center; gap: 6px; }
.om-anneau { width: 68px; height: 68px; border-radius: 50%; padding: 2px; border: 1.5px solid var(--app-ligne-forte, rgba(0,0,0,.12)); display: grid; place-items: center; }
.om-st.neuf .om-anneau { border: 0; padding: 3px; background: linear-gradient(225deg, #7b96ff, var(--om-bleu) 55%, #1532a0); }
.om .om-anneau .ta-logo.om-logo { width: 100%; height: 100%; border-radius: 50%; border: 2.5px solid #fff; background: #fff; }
.om .om-st:not(.neuf) .ta-logo.om-logo { opacity: .55; }
.om-st small { font-size: 12px; line-height: 15px; width: 72px; text-align: center; color: var(--om-gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.om-st.neuf small { color: var(--om-encre); }
.om .om-st:active { opacity: .6; }

.om .om-carre { position: relative; display: flex; flex-direction: column; align-items: flex-start; width: 100%; height: 330px; border-radius: 30px; padding: 24px; overflow: hidden; text-align: left; color: #fff;
  background: linear-gradient(210deg, #5b7cff 0%, var(--om-bleu) 45%, #1532a0 100%); transition: transform 160ms ease; }
.om .om-carre:active { transform: scale(.985); }
.om-carre-lab { display: block; font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,.8); }
.om .om-carre-n { display: block; font-weight: 600; font-size: 92px; line-height: 100px; letter-spacing: -3px; margin-top: 10px; color: #fff; }
.om-carre-sous { display: block; font-size: 17px; color: rgba(255,255,255,.9); }
.om-minis { display: flex; margin: 16px 0 14px; }
.om .om-minis .ta-logo.om-logo { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #2a55e6; background: #fff; margin-left: -7px; }
.om .om-minis .ta-logo.om-logo:first-child { margin-left: 0; }
.om .om-minis .ta-logo.om-logo em { font-size: 10px; }
.om-carre .om-pile { position: absolute; right: -26px; bottom: 34px; width: 200px; height: 150px; margin: 0; max-width: none; pointer-events: none; }
.om-petite { position: absolute; width: 160px; height: 108px; border-radius: 20px; background: #fff; padding: 14px; color: var(--om-encre);
  right: calc(30px - var(--r) * 15px); top: calc(34px - var(--r) * 17px); opacity: calc(1 - var(--r) * .14); transform: rotate(calc(-3deg + var(--r) * 6deg)); }
.om .om-petite .ta-logo.om-logo { width: 30px; height: 30px; border-radius: 9px; }
.om .om-petite b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 8px; font-weight: 500; font-size: 13px; line-height: 16px; }
.om-voir { position: relative; margin-top: auto; display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--om-bleu); font-weight: 600; font-size: 15px; padding: 12px 18px; border-radius: 999px; }
.om .om-voir svg { width: 14px; height: 14px; }

.om-rechs { display: grid; }
.om .om-rech { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 0; border-bottom: 1px solid var(--om-ligne); text-align: left; font-size: 15.5px; }
.om .om-rech span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.om .om-rech b { color: var(--om-bleu); font-weight: 600; font-size: 14px; }
.om .om-rech small { color: var(--om-gris); font-size: 14px; }
.om .om-rech svg { width: 15px; height: 15px; flex: none; color: var(--om-pale); }
.om .om-gardees-bascule[aria-expanded="true"] svg { transform: rotate(90deg); }
.om .om-rech:hover span { color: var(--om-bleu); }
/* ---------- la story : plein écran bleu, sous la fiche d'offre (z 90) ---------- */
html.om-story-on, html.om-story-on body { overflow: hidden; }
.om-story { --om-bleu: #1f4bdb; position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; color: #fff; font-family: var(--sans);
  padding: calc(env(safe-area-inset-top) + 12px) 14px calc(env(safe-area-inset-bottom) + 18px);
  background: linear-gradient(210deg, #5b7cff 0%, #1f4bdb 45%, #1532a0 100%); opacity: 0; transition: opacity 200ms ease; -webkit-tap-highlight-color: transparent; user-select: none; }
.om-story.in { opacity: 1; }
.om-story * { box-sizing: border-box; }
.om-story button { font: inherit; text-transform: none; letter-spacing: 0; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; color: inherit; }
.om-story svg { display: block; width: 100%; height: 100%; }
.os-barres { display: flex; gap: 4px; max-width: 560px; width: 100%; margin: 0 auto; }
.os-barres i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.3); }
.os-barres i.vu { background: #fff; }
.os-qui { display: flex; align-items: center; gap: 10px; margin: 14px auto 0; max-width: 560px; width: 100%; }
.os-qui .ta-logo { width: 38px; height: 38px; border-radius: 50%; border: 0; background: #fff; }
.os-qui span { flex: 1; min-width: 0; display: grid; }
.os-qui b { font-weight: 500; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-qui small { font-size: 12.5px; color: rgba(255,255,255,.72); }
.os-fermer { width: 30px; height: 30px; padding: 4px !important; }
.os-scene { flex: 1; min-height: 0; display: flex; padding-top: 16px; max-width: 560px; width: 100%; margin: 0 auto; touch-action: pan-y; }
.os-carte { position: relative; flex: 1; background: #fff; color: var(--app-encre, #0d0d0d); border-radius: 30px; padding: 26px 24px; display: flex; flex-direction: column; overflow: hidden; transition: transform 220ms ease; will-change: transform; }
.os-dedans { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: auto; }
.os-dedans > .ta-logo { width: 76px; height: 76px; border-radius: 24px; }
.os-carte h2 { margin: 18px 0 0; font-weight: 600; font-size: 28px; line-height: 31px; letter-spacing: -.5px; text-transform: none; }
.os-sous { margin: 8px 0 0; font-size: 14px; color: var(--app-gris, #8e8e93); }
.os-annonce { margin-top: 18px; width: 100%; text-align: left; display: grid; gap: 14px; }
.os-annonce .om-paie, .os-annonce .om-salaire { justify-content: center; text-align: center; }
.os-marque { position: absolute; top: 18px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; padding: 10px; opacity: 0; transition: opacity 120ms ease; z-index: 2; }
.os-oui { left: 18px; background: #1f4bdb; color: #fff; }
.os-non { right: 18px; background: #f4f4f5; color: #8e8e93; }
.om-story.vers-oui .os-oui, .om-story.vers-non .os-non { opacity: 1; }
.os-actes { display: flex; align-items: center; justify-content: center; gap: 26px; padding-top: 20px; }
.os-rond { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.16) !important; display: grid; place-items: center; padding: 17px !important; transition: transform 120ms ease; }
.os-go { width: 76px; height: 76px; border-radius: 50%; background: #fff !important; color: #1f4bdb !important; font-weight: 600 !important; font-size: 15px; transition: transform 120ms ease; }
.os-rond:active, .os-go:active { transform: scale(.94); }
@media (min-width: 901px) {
  .om-story { padding-top: 28px; padding-bottom: 28px; }
  .os-scene { max-height: 640px; }
  .os-carte { cursor: grab; }
}

/* ---------- ordinateur : des cartes plus grandes, un cadre net ---------- */
@media (min-width: 901px) {
  .om.grand .om-corps { width: 100%; max-width: 1080px; margin-left: auto; margin-right: auto; padding-bottom: 150px; }
  /* sous la barre du bas, un voile blanc : les offres s'effacent au lieu de passer dessous en plein */
  .om.grand:not([data-mode="une"])::after { content: ""; position: fixed; z-index: 7; left: var(--om-g, 0px); right: 0; bottom: 0; height: 128px; pointer-events: none; background: linear-gradient(to top, var(--om-fond) 46%, color-mix(in srgb, var(--om-fond) 0%, transparent)); }
  .om.grand .om-message { justify-items: center; text-align: center; padding: 72px 0 40px; }
  .om.grand .om-message span { max-width: 460px; }
  /* le fil : chaque offre devient une carte, à l'aise */
  .om.grand .om-liste { display: grid; gap: 10px; }
  .om.grand .om-ligne { grid-template-columns: 56px 1fr auto; column-gap: 20px; padding: 18px 22px; border: 1px solid var(--om-ligne); border-radius: 20px; background: var(--om-fond); transition: border-color 160ms ease, box-shadow 200ms ease, transform 200ms ease; }
  .om.grand .om-ligne:hover { border-color: color-mix(in srgb, var(--om-encre) 16%, transparent); box-shadow: 0 14px 34px -24px rgba(12, 27, 61, 0.35); transform: translateY(-1px); }
  .om.grand .om-ligne .ta-logo.om-logo { width: 56px; height: 56px; border-radius: 15px; }
  .om.grand .om-ligne-txt b { font-size: 18px; }
  .om.grand .om-ligne-txt small { margin-top: 5px; font-size: 14px; }
  .om.grand .om-age { font-size: 13px; }
  .om.grand .om-deux { column-gap: 48px; grid-template-columns: minmax(0, 1fr) 440px; }
  /* une à une : la carte prend de la place */
  .om.grand .om-une { max-width: 760px; }
  .om.grand .om-une .om-pile { max-width: 580px; margin-top: 18px; }
  .om.grand .om-carte, .om.grand .om-derriere { padding: 52px 44px 44px; border-radius: 34px; }
  .om.grand .om-carte { min-height: clamp(240px, calc(100vh - 330px), 420px); align-content: center; }
  .om.grand .om-carte .ta-logo.om-logo, .om.grand .om-derriere .ta-logo.om-logo { width: 88px; height: 88px; border-radius: 24px; }
  .om.grand .om-carte h2, .om.grand .om-derriere h2 { margin-top: 26px; font-size: 44px; }
  .om.grand .om-carte-sous { font-size: 15.5px; }
  .om.grand .om-carte .om-cles { margin-top: 30px; gap: 15px; }
  .om.grand .om-carte .om-cles li { font-size: 16px; }
  .om.grand .om-carte .om-extrait { font-size: 15.5px; }
  .om.grand .om-gestes { margin-top: 36px; gap: 32px; }
  .om.grand .om-rond { width: 60px; height: 60px; }
  .om.grand .om-rond.bleu { width: 76px; height: 76px; }
  /* maisons */
  .om.grand .om-grille { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 38px 18px; }
  .om.grand .om-maison .ta-logo.om-logo { width: 72px; height: 72px; border-radius: 20px; }
  .om.grand .om-maison b { font-size: 14px; }
  .om.grand .om-maison small { font-size: 13px; }
  /* suivis */
  .om.grand .om-suivis { max-width: 860px; gap: 28px; }
  .om.grand .om-st { width: 88px; }
  .om.grand .om-anneau { width: 84px; height: 84px; }
  .om.grand .om-st small { width: 88px; font-size: 13px; }
  .om.grand .om-carre { height: 400px; padding: 32px; border-radius: 34px; }
  .om.grand .om-carre-n { font-size: 120px; line-height: 124px; }
  .om.grand .om-carre-sous { font-size: 19px; }
  .om.grand .om-carre .om-pile { width: 260px; height: 190px; right: -10px; bottom: 50px; }
  .om.grand .om-carre .om-petite { width: 200px; height: 130px; }
  .om.grand .om-rech { padding: 18px 4px; font-size: 16.5px; }
}
/* une à une, fenêtre basse : la carte se resserre pour que les trois boutons restent visibles */
@media (min-width: 901px) and (max-height: 760px) {
  .om.grand .om-modes { margin-top: 8px; }
  .om.grand .om-une .om-pile { margin-top: 10px; }
  .om.grand .om-carte, .om.grand .om-derriere { padding: 28px 32px 26px; }
  .om.grand .om-carte .ta-logo.om-logo, .om.grand .om-derriere .ta-logo.om-logo { width: 64px; height: 64px; border-radius: 18px; }
  .om.grand .om-carte h2, .om.grand .om-derriere h2 { margin-top: 16px; font-size: 32px; }
  .om.grand .om-carte .om-cles, .om.grand .om-carte .om-extrait { display: none; }
  .om.grand .om-gestes { margin-top: 18px; }
}