/* ═══════════════════════════════════════════════════════════════
   OFFRE — SEO, GEO & PERFORMANCE · feuille différée (activée par
   offre-seo.js). La console (réglages + Google + assistant IA), les
   scènes de la méthode, la mosaïque des livrables, le cas STYS.
   Projet fictif Orée, toutes les données sont fictives.
   ═══════════════════════════════════════════════════════════════ */

/* ═══ LA CONSOLE ═══
   À gauche, les réglages de la page ; à droite, Google ou l'assistant
   IA ; en bas, les mesures. */
.os-console.est-pret { box-shadow: 0 60px 120px -60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06); }
.osc {
  --osc-trait: rgba(255, 255, 255, 0.08);
  --osc-doux: rgba(255, 255, 255, 0.55);
  --osc-vert: #3DDC84;
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 372px minmax(0, 1fr);
  grid-template-rows: 56px minmax(0, 1fr) 76px;
  grid-template-areas: "barre barre" "reglages vue" "etat etat";
  font: 400 13px/1.45 var(--police);
  color: #EDEDED;
}
.osc button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.osc img { display: block; }
.osc :focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }

/* La barre */
.osc-barre { grid-area: barre; display: flex; align-items: center; gap: 12px; padding: 0 16px 0 14px; border-bottom: 1px solid var(--osc-trait); }
.osc-av { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: #EEF3F1; }
.osc-av svg { width: 12px; height: 16px; }
.osc-projet { display: grid; line-height: 1.2; }
.osc-projet b { font-weight: 600; }
.osc-projet small { color: var(--osc-doux); font-size: 11px; }
.osc-onglets { display: flex; gap: 4px; margin-left: auto; padding: 4px; border-radius: 11px; background: rgba(255, 255, 255, 0.05); }
.osc .osc-onglet { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 8px; color: var(--osc-doux); font-size: 12.5px; font-weight: 500; transition: background-color 250ms ease, color 250ms ease; }
.osc .osc-onglet[aria-selected="true"] { background: #fff; color: #141414; }
.osc-onglet img { width: 14px; height: 14px; }
.osc-ia-ic { width: 14px; height: 14px; border-radius: 50%; background: conic-gradient(from 180deg, #F2D27A, #B8891C, #F2D27A); }
.osc-mode { padding: 3px 9px; border-radius: 99px; box-shadow: inset 0 0 0 1px rgba(209, 163, 38, 0.5); color: var(--or); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; }
.osc-mode::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--or); vertical-align: 1px; animation: osc-pouls 1.6s ease-in-out infinite; }
.est-libre .osc-mode::before { animation: none; background: var(--osc-vert); }
@keyframes osc-pouls { 50% { opacity: 0.25; } }

/* Les réglages */
.osc-reglages { grid-area: reglages; display: grid; align-content: start; gap: 13px; padding: 14px 18px; overflow: hidden; border-right: 1px solid var(--osc-trait); background: #121212; }
.osc-page { display: grid; margin: 0; line-height: 1.3; }
.osc-page small, .osc-libelle { color: var(--osc-doux); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.osc-page b { font-weight: 500; font-size: 13.5px; }
.osc-page b span { color: var(--or); }
.osc-groupe { display: grid; gap: 8px; }
.osc-libelle { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.osc-compte { color: var(--osc-doux); font-size: 10.5px; letter-spacing: 0; font-variant-numeric: tabular-nums; text-transform: none; }
.osc-reqs { display: flex; flex-wrap: wrap; gap: 6px; }
.osc .osc-req { padding: 5px 10px; border-radius: 99px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); color: var(--osc-doux); font-size: 12px; transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease; }
.osc .osc-req[aria-checked="true"] { background: rgba(209, 163, 38, 0.14); box-shadow: inset 0 0 0 1px rgba(209, 163, 38, 0.6); color: #F3E7C4; }
.osc-champ { display: grid; gap: 6px; border-radius: 12px; transition: box-shadow 250ms ease; }
.osc-saisie { width: 100%; padding: 9px 11px; border: 0; border-radius: 9px; background: #1B1B1B; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); color: #fff; font: 400 13.5px/1.4 var(--police); resize: none; }
.osc-saisie:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--or); }
.osc-saisie::placeholder { color: rgba(255, 255, 255, 0.35); }
.osc-saisie--desc { height: 62px; }
.osc-jauge { display: block; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, 0.08); }
.osc-jauge span { display: block; width: 0; height: 100%; border-radius: inherit; background: rgba(255, 255, 255, 0.3); transition: width 200ms ease, background-color 200ms ease; }
.osc-jauge .est-court { background: #E3A13B; } .osc-jauge .est-bon { background: var(--osc-vert); } .osc-jauge .est-long { background: #E5604F; }
.osc-sws { display: grid; gap: 2px; }
.osc .osc-sw { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 10px; border-radius: 10px; text-align: left; transition: background-color 200ms ease; }
.osc .osc-sw:hover { background: rgba(255, 255, 255, 0.04); }
.osc-sw-txt { display: grid; line-height: 1.25; }
.osc-sw-txt b { font-weight: 500; font-size: 13px; }
.osc-sw-txt small { color: var(--osc-doux); font-size: 11px; }
.osc-sw-piste { position: relative; flex: none; width: 34px; height: 20px; border-radius: 99px; background: rgba(255, 255, 255, 0.16); transition: background-color 250ms ease; }
.osc-sw-piste span { position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform 300ms var(--ressort); }
.osc-sw[aria-checked="true"] .osc-sw-piste { background: var(--or); }
.osc-sw[aria-checked="true"] .osc-sw-piste span { transform: translateX(14px); }
/* Ce que la démonstration touche */
.osc .est-demo { box-shadow: 0 0 0 1.5px var(--or), 0 0 0 6px rgba(209, 163, 38, 0.15); }
.osc-onglet.est-demo { box-shadow: 0 0 0 1.5px var(--or); }

/* La vue : Google ou l'assistant */
.osc-vue { grid-area: vue; position: relative; min-width: 0; padding: 16px; background: radial-gradient(80% 60% at 70% 0%, rgba(209, 163, 38, 0.08), transparent 70%), #0E0E0E; }
.osc-ecran { position: relative; height: 100%; overflow: hidden; border-radius: 14px; }
.osc-ecran[hidden] { display: none; }
.osc-ecran--google { display: grid; grid-template-rows: auto minmax(0, 1fr); background: #fff; color: #202124; }
.osc-g-tete { display: grid; gap: 10px; padding: 14px 18px 0; border-bottom: 1px solid #EBEBEB; }
.osc-g-recherche { display: flex; align-items: center; gap: 10px; max-width: 520px; padding: 9px 14px; border-radius: 99px; box-shadow: 0 1px 6px rgba(32, 33, 36, 0.2); font-size: 14px; }
.osc-g-recherche span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.osc-g-recherche svg { width: 18px; height: 18px; fill: none; stroke: #4285F4; stroke-width: 1.8; stroke-linecap: round; }
.osc-g-onglets { display: flex; gap: 18px; font-size: 12.5px; color: #5F6368; }
.osc-g-onglets span { padding: 4px 0 9px; }
.osc-g-onglets .est-actif { color: #1A0DAB; box-shadow: inset 0 -3px 0 #1A73E8; }
.osc-g-liste { display: grid; align-content: start; gap: 18px; margin: 0; padding: 16px 18px 50px; overflow: hidden; list-style: none; }
.osc-r { display: grid; gap: 5px; transition: transform 650ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.osc-r[hidden] { display: none; }
.osc-r-site { display: flex; align-items: center; gap: 9px; }
.osc-r-fav { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #EEF0F2; }
.osc-r-fav--oree { background: #EEF3F1; box-shadow: inset 0 0 0 1px #DADCE0; }
.osc-r-fav--oree svg { width: 10px; height: 13px; }
.osc-r-nom { display: grid; line-height: 1.25; }
.osc-r-nom b { font-size: 13px; font-weight: 500; }
.osc-r-nom small { color: #4D5156; font-size: 11.5px; }
.osc-sq { display: block; height: 9px; border-radius: 5px; background: #ECEEF1; }
.osc-sq--court { width: 120px; }
.osc-sq--titre { width: var(--l); height: 13px; background: #DCE4F7; }
.osc-sq--texte { width: 92%; }
.osc-sq--fin { width: 62%; }
.osc-r-titre { color: #1A0DAB; font-size: 18px; line-height: 1.3; }
.osc-r-texte { color: #4D5156; font-size: 13px; line-height: 1.5; }
.osc-r-note, .osc-r-faq { display: none; }
.osc-r--oree.a-note .osc-r-note { display: flex; align-items: center; gap: 8px; color: #70757A; font-size: 12.5px; }
.osc-etoiles { display: inline-flex; gap: 1px; }
.osc-etoiles i { width: 12px; height: 12px; background: #FBBC04; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.osc-r--oree.a-faq .osc-r-faq { display: grid; margin-top: 4px; border-top: 1px solid #EBEBEB; }
.osc-r-faq > span { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #EBEBEB; font-size: 13px; }
.osc-r-faq svg { width: 14px; height: 14px; fill: none; stroke: #5F6368; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.osc-r--oree { position: relative; }
.osc-r--oree::before { content: ''; position: absolute; left: -18px; top: 2px; bottom: 2px; width: 3px; border-radius: 0 3px 3px 0; background: var(--or); }
.osc-r--oree.est-monte { animation: osc-lueur 1400ms ease; }
@keyframes osc-lueur { 0% { background: rgba(209, 163, 38, 0.18); box-shadow: 0 0 0 8px rgba(209, 163, 38, 0.18); } 100% { background: transparent; box-shadow: 0 0 0 8px transparent; } }
.osc-g-absent { position: absolute; left: 18px; right: 18px; bottom: 34px; margin: 0; padding: 10px 14px; border-radius: 10px; background: #FEF7E0; box-shadow: inset 0 0 0 1px #F3D27A; color: #5C4813; font-size: 12.5px; font-weight: 500; }
.osc-g-absent[hidden] { display: none; }
.osc-g-anonymes { position: absolute; right: 14px; bottom: 10px; margin: 0; color: #9AA0A6; font-size: 10.5px; }

/* L'assistant IA */
.osc-ecran--ia { background: #161616; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.osc-chat { display: grid; align-content: start; gap: 16px; height: 100%; padding: 22px 24px; overflow: hidden; font-size: 14px; }
.osc-chat-q { justify-self: end; max-width: 80%; margin: 0; padding: 10px 15px; border-radius: 16px 16px 4px 16px; background: #2A2A2A; }
.osc-chat-r { display: grid; gap: 8px; line-height: 1.55; }
.osc-chat-l { margin: 0; transition: opacity 400ms ease, transform 500ms var(--ressort); }
.osc-chat-l sup { margin-left: 3px; padding: 0 5px; border-radius: 4px; background: rgba(209, 163, 38, 0.2); color: #F2D27A; font-size: 10.5px; }
.osc-chat-src { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.osc-chat-src small { color: var(--osc-doux); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.osc-chat-src > div { display: grid; gap: 6px; }
.osc-src { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); color: var(--osc-doux); font-size: 13px; transition: opacity 400ms ease, transform 500ms var(--ressort); }
.osc-src b { font-size: 11px; font-weight: 500; }
.osc-src-av { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); }
.osc-src-av svg { width: 10px; height: 13px; }
.osc-src--oree { background: rgba(209, 163, 38, 0.1); box-shadow: inset 0 0 0 1px rgba(209, 163, 38, 0.55); color: #fff; }
.osc-src--oree .osc-src-av { background: #EEF3F1; }
.osc-src--oree b { color: var(--or); }
.osc-chat .est-attente { opacity: 0; transform: translateY(8px); }
.osc-chat-note { margin: 0; color: #E3A13B; font-size: 12.5px; }
.osc-chat-note:empty { display: none; }
.osc-ecran--ia { position: relative; }
.osc-chat { padding-bottom: 80px; }
.osc-chat-saisie { position: absolute; left: 24px; right: 24px; bottom: 20px; display: flex; justify-content: space-between; align-items: center; padding: 8px 8px 8px 16px; border-radius: 99px; background: #222; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.4); font-size: 13px; }
.osc-chat-envoi { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--or); }
.osc-chat-envoi svg { width: 14px; height: 14px; fill: none; stroke: #111; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Les mesures */
.osc-etat { grid-area: etat; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: center; gap: 12px; padding: 0 18px; border-top: 1px solid var(--osc-trait); background: #121212; }
.osc-m { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; column-gap: 10px; min-width: 0; }
.osc-m small { grid-column: 1 / -1; color: var(--osc-doux); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.osc-m b { font-size: 20px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.osc-m--pos b { color: #F2D27A; }
.osc-delta { font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.osc-delta.est-hausse { color: var(--osc-vert); } .osc-delta.est-baisse { color: #E5604F; }
.osc-anneau { position: relative; display: grid; place-items: center; width: 36px; height: 36px; }
.osc-anneau svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.osc-anneau circle { fill: none; stroke-width: 3; }
.osc-anneau-fond { stroke: rgba(255, 255, 255, 0.1); }
.osc-anneau-plein { stroke: var(--or); stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; transition: stroke-dashoffset 500ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.osc-anneau b { font-size: 12px; }
.osc-m--lcp b.est-bon { color: var(--osc-vert); } .osc-m--lcp b.est-mauvais { color: #E5604F; }
.osc-m--ia b { color: var(--osc-doux); font-size: 15px; }
.osc-m--ia b.est-cite { color: #F2D27A; }
.osc-explo { justify-self: end; padding: 4px 10px; border-radius: 99px; color: var(--osc-doux); font-size: 11.5px; white-space: nowrap; }
.osc-explo.est-cours { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); }
.osc-explo.est-cours::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 7px; border: 1.5px solid rgba(255, 255, 255, 0.3); border-top-color: var(--or); border-radius: 50%; vertical-align: -1px; animation: osc-tourne 700ms linear infinite; }
.osc-explo.est-ok { color: var(--osc-vert); }
.osc-explo.est-ok::before { content: '✓ '; }
.osc-explo:empty { display: none; }
@keyframes osc-tourne { to { transform: rotate(360deg); } }

@media (max-width: 1100px) {
  .osc { grid-template-columns: 320px minmax(0, 1fr); }
  .osc-etat { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .osc-explo { display: none; }
}
@media (max-width: 760px) {
  .osc { grid-template-columns: minmax(0, 1fr); grid-template-rows: 56px auto minmax(0, 1fr) auto; grid-template-areas: "barre" "reglages" "vue" "etat"; }
  .osc-barre { gap: 8px; padding: 0 10px; }
  .osc-projet small, .osc-mode { display: none; }
  .osc .osc-onglet { padding: 6px 9px; }
  .osc-reglages { border-right: 0; border-bottom: 1px solid var(--osc-trait); padding: 14px; gap: 14px; }
  .osc-saisie { font-size: 16px; }
  .osc-saisie--desc { height: 86px; }
  .osc-sws { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .osc .osc-sw { padding: 7px 6px; }
  .osc-vue { padding: 10px; }
  .osc-g-tete { padding: 12px 12px 0; }
  .osc-g-liste { padding: 14px 14px 50px; gap: 16px; }
  .osc-r--oree::before { left: -14px; }
  .osc-r-titre { font-size: 16.5px; }
  .osc-g-onglets { gap: 14px; }
  .osc-etat { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 12px 14px; row-gap: 12px; }
  .osc-chat { padding: 16px 16px 70px; }
  .osc-chat-saisie { left: 12px; right: 12px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .osc *, .osc *::before { animation: none !important; transition: none !important; }
}

/* ═══ LA MÉTHODE : les scènes de la planche ═══ */
.os-scene { position: absolute; inset: 0; display: grid; align-content: center; gap: 14px; padding: 50px 24px 34px; opacity: 0; visibility: hidden; transition: opacity 450ms ease, visibility 0s linear 450ms; color: var(--sur-noir); }
[data-courant="1"] .os-scene--1, [data-courant="2"] .os-scene--2,
[data-courant="3"] .os-scene--3, [data-courant="4"] .os-scene--4 { opacity: 1; visibility: visible; transition: opacity 450ms ease 120ms, visibility 0s; }
.os-scene-note { position: absolute; right: 16px; bottom: 10px; color: rgba(255, 255, 255, 0.35); font-size: 10px; }
@keyframes os-pop { from { opacity: 0; transform: scale(0.4); } }
@keyframes os-glisse { from { opacity: 0; transform: translateY(14px); } }
@keyframes os-jauge { from { transform: scaleX(0); } }
@keyframes os-trace { from { stroke-dashoffset: 1; } }

/* 1 · Technique : avant / après, puis l'exploration */
.os-vitaux { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.os-vital { display: grid; gap: 2px; padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.os-vital small { color: var(--sur-noir-2); font-size: 10.5px; }
.os-vital-av { color: #E5604F; font-size: 12px; text-decoration: line-through; }
.os-vital b { color: #3DDC84; font-size: 22px; font-weight: 600; line-height: 1.1; }
.os-vital-seuil { color: rgba(255, 255, 255, 0.4); font-size: 10.5px; }
.os-exploration { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: #fff; color: #141414; font-size: 12px; }
.os-explo-tete { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 6px; border-bottom: 1px solid #ECECEC; }
.os-explo-tete small { color: #6B6B6B; }
.os-explo-ligne { display: grid; grid-template-columns: minmax(0, 1fr) 40px 80px; align-items: center; gap: 8px; padding: 3px 0; }
.os-explo-ligne > span { overflow: hidden; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.os-explo-ligne b { justify-self: start; padding: 1px 6px; border-radius: 5px; font: 600 11px ui-monospace, 'SF Mono', Menlo, monospace; }
.os-explo-ligne small { color: #6B6B6B; text-align: right; }
.os-explo-ligne .est-ok { background: #E6F4EA; color: #137333; } .os-explo-ligne .est-redir { background: #E8F0FE; color: #1A56C2; } .os-explo-ligne .est-corrige { background: #FEF7E0; color: #8A6A12; }
[data-courant="1"] .os-vital { animation: os-glisse 450ms var(--ressort) calc(var(--i) * 120ms) backwards; }
[data-courant="1"] .os-vital b { animation: os-pop 400ms cubic-bezier(0.3, 1.6, 0.5, 1) calc(500ms + var(--i) * 150ms) backwards; }
[data-courant="1"] .os-exploration { animation: os-glisse 500ms var(--ressort) 700ms backwards; }

/* 2 · Sémantique : questions, intention, page cible */
.os-intentions { display: grid; gap: 6px; }
.os-int-tete, .os-int { display: grid; grid-template-columns: minmax(0, 1fr) 96px 86px; align-items: center; gap: 10px; }
.os-int-tete { padding: 0 12px; }
.os-int-tete small { color: var(--sur-noir-2); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.os-int { position: relative; padding: 10px 12px 14px; border-radius: 11px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); font-size: 12.5px; }
.os-int-q { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-int-page { overflow: hidden; color: var(--or); font: 11.5px ui-monospace, 'SF Mono', Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }
.os-int u { position: absolute; left: 12px; bottom: 6px; height: 3px; width: calc((100% - 24px) * var(--v)); border-radius: 3px; background: rgba(255, 255, 255, 0.22); transform-origin: left; }
.os-tag { justify-self: start; padding: 2px 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); color: var(--sur-noir-2); font-size: 10.5px; white-space: nowrap; }
.os-int--achat { box-shadow: inset 0 0 0 1px rgba(209, 163, 38, 0.6); background: rgba(209, 163, 38, 0.08); }
.os-int--achat .os-tag { background: var(--or); color: #111; font-weight: 600; }
.os-int--achat u { background: var(--or); }
[data-courant="2"] .os-int { animation: os-glisse 450ms var(--ressort) calc(var(--i) * 120ms) backwards; }
[data-courant="2"] .os-int u { animation: os-jauge 900ms cubic-bezier(0.2, 0.8, 0.2, 1) calc(500ms + var(--i) * 120ms) backwards; }

/* 3 · Local & autorité : la carte, la fiche, les liens */
.os-scene--3 { grid-template-rows: minmax(0, 1fr); align-content: stretch; padding-bottom: 30px; }
.os-carte { position: relative; display: block; min-height: 0; }
.os-carte-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.os-carte-mer { fill: url(#os-mer); }
.os-carte-iso { stroke: rgba(255, 255, 255, 0.09); stroke-width: 1; stroke-dasharray: 0.004 0.008; }
.os-carte-iso + .os-carte-iso { stroke: rgba(255, 255, 255, 0.05); }
.os-carte-cote { stroke: rgba(255, 255, 255, 0.6); stroke-width: 2; stroke-dasharray: 1; stroke-linejoin: round; }
.os-carte-halo { fill: url(#os-halo); }
.os-carte-zone { stroke: rgba(209, 163, 38, 0.4); stroke-width: 1; stroke-dasharray: 3 6; transform-box: fill-box; transform-origin: center; }
.os-carte-zone + .os-carte-zone { stroke: rgba(209, 163, 38, 0.2); }
.os-carte-liens path { stroke: rgba(209, 163, 38, 0.75); stroke-width: 1.6; stroke-dasharray: 1; fill: none; }
.os-carte-villes circle { fill: #141414; stroke: rgba(255, 255, 255, 0.5); stroke-width: 1.5; }
.os-carte-villes text { fill: rgba(255, 255, 255, 0.72); font: 500 17px var(--police); }
.os-carte-losange { fill: var(--or); }
.os-carte-nom { fill: #fff; font: 600 19px var(--police); }
@keyframes os-zone { from { opacity: 0; transform: scale(0.3); } }
@keyframes os-ville { to { fill: var(--or); stroke: rgba(209, 163, 38, 0.35); stroke-width: 6; } }

/* La fiche : la requête, Orée en tête du pack local, des coordonnées cohérentes */
.os-fiche { position: absolute; left: 0; top: 0; display: grid; gap: 8px; width: min(272px, 62%); padding: 10px; border-radius: 14px; background: #fff; color: #141414; box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.95); }
.os-fiche-req { display: flex; align-items: center; gap: 7px; overflow: hidden; padding: 6px 10px; border-radius: 99px; background: #F1F3F4; color: #3C4043; font-size: 11.5px; white-space: nowrap; }
.os-fiche-req svg { flex: none; width: 12px; height: 12px; fill: none; stroke: #5F6368; stroke-width: 2.6; stroke-linecap: round; }
.os-fiche-res { display: grid; grid-template-columns: 20px 36px minmax(0, 1fr); align-items: center; gap: 9px; padding: 0 2px; }
.os-fiche-rang { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--or); color: #111; font-size: 11px; font-weight: 700; }
.os-fiche-av { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #EEF3F1; }
.os-fiche-av svg { width: 13px; height: 17px; }
.os-fiche-txt { display: grid; min-width: 0; line-height: 1.25; }
.os-fiche-txt b { font-size: 14px; }
.os-fiche-txt > small { overflow: hidden; color: #6B6B6B; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.os-fiche-nap { display: flex; align-items: center; gap: 6px; padding: 8px 2px 0; border-top: 1px solid #ECECEC; color: #137333; font-size: 10.5px; }
.os-fiche-nap svg { flex: none; width: 14px; height: 14px; padding: 2px; border-radius: 50%; background: #E6F4EA; fill: none; stroke: #137333; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.os-etoiles { display: inline-flex; align-items: center; gap: 1px; font-size: 11.5px; }
.os-etoiles > span { margin-right: 4px; font-weight: 600; }
.os-etoiles i { width: 11px; height: 11px; background: #FBBC04; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.os-etoiles small { margin-left: 6px; color: #6B6B6B; font-size: 11px; }

/* Les liens : en bas à droite, sur la mer, loin des villes */
.os-liens { position: absolute; right: 0; bottom: 0; display: grid; gap: 4px; width: min(228px, 56%); padding: 10px; border-radius: 14px; background: rgba(18, 18, 18, 0.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(209, 163, 38, 0.35), 0 24px 48px -24px #000; }
.os-liens-tete { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px 5px; }
.os-liens-tete b { font-size: 12.5px; font-weight: 500; }
.os-liens-tete small { color: var(--sur-noir-2); font-size: 10.5px; }
.os-lien { display: grid; grid-template-columns: 7px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 9px; background: rgba(255, 255, 255, 0.045); font-size: 11.5px; }
.os-lien > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-lien i { width: 7px; height: 7px; border-radius: 50%; background: var(--or); box-shadow: 0 0 0 3px rgba(209, 163, 38, 0.18); }
.os-lien em { color: var(--sur-noir-2); font-size: 10px; font-style: normal; }
.os-autorite { display: grid; gap: 5px; padding: 7px 4px 0; }
.os-autorite-l { display: flex; justify-content: space-between; color: var(--sur-noir-2); font-size: 10.5px; }
.os-autorite-l b { color: var(--or); font-weight: 600; }
.os-autorite u { display: block; height: 4px; overflow: hidden; border-radius: 4px; background: rgba(255, 255, 255, 0.1); text-decoration: none; }
.os-autorite u::after { content: ''; display: block; width: 78%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #B8891C, #F2D27A); transform-origin: left; }

[data-courant="3"] .os-carte-cote, [data-courant="3"] .os-carte-iso { animation: os-trace 1400ms cubic-bezier(0.65, 0, 0.35, 1) backwards; }
[data-courant="3"] .os-carte-zone { animation: os-zone 900ms cubic-bezier(0.2, 0.8, 0.2, 1) calc(600ms + var(--i, 0) * 200ms) backwards; }
[data-courant="3"] .os-carte-liens path { animation: os-trace 900ms cubic-bezier(0.65, 0, 0.35, 1) 900ms backwards; }
[data-courant="3"] .os-carte-liens path:nth-child(2) { animation-delay: 1050ms; } [data-courant="3"] .os-carte-liens path:nth-child(3) { animation-delay: 1200ms; } [data-courant="3"] .os-carte-liens path:nth-child(4) { animation-delay: 1350ms; }
[data-courant="3"] .os-carte-villes circle { animation: os-ville 400ms ease calc(1600ms + var(--i) * 150ms) forwards; }
[data-courant="3"] .os-fiche { animation: os-glisse 500ms var(--ressort) 500ms backwards; }
[data-courant="3"] .os-fiche-rang { animation: os-pop 450ms cubic-bezier(0.3, 1.6, 0.5, 1) 1000ms backwards; }
[data-courant="3"] .os-liens { animation: os-glisse 500ms var(--ressort) 1200ms backwards; }
[data-courant="3"] .os-lien { animation: os-glisse 450ms var(--ressort) calc(1400ms + var(--i) * 150ms) backwards; }
[data-courant="3"] .os-autorite u::after { animation: os-jauge 1100ms cubic-bezier(0.2, 0.8, 0.2, 1) 1900ms backwards; }


/* 4 · GEO : l'entité déclarée, puis la citation */
.os-entite { display: grid; gap: 10px; padding: 14px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.os-entite-tete { display: flex; justify-content: space-between; align-items: baseline; }
.os-entite-tete b { font-weight: 500; }
.os-entite-tete small { color: var(--sur-noir-2); font-size: 11px; }
.os-json { display: grid; gap: 3px; font: 12px/1.5 ui-monospace, 'SF Mono', Menlo, monospace; color: #D4D4D4; }
.os-json-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-k { color: #9CDCFE; } .os-v { color: #F2D27A; }
.os-cite { display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; background: #161616; box-shadow: inset 0 0 0 1px rgba(209, 163, 38, 0.35); }
.os-cite-tete { display: flex; align-items: center; gap: 8px; }
.os-cite-tete b { font-weight: 500; font-size: 13px; }
.os-cite-tete small { margin-left: auto; color: var(--sur-noir-2); font-size: 11px; }
.os-cite-ic { width: 16px; height: 16px; border-radius: 50%; background: conic-gradient(from 180deg, #F2D27A, #B8891C, #F2D27A); }
.os-cite-src { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: rgba(209, 163, 38, 0.1); box-shadow: inset 0 0 0 1px rgba(209, 163, 38, 0.55); font-size: 12.5px; }
.os-cite-src b { color: var(--or); font-size: 11px; }
[data-courant="4"] .os-json-l { animation: os-glisse 400ms var(--ressort) calc(var(--i) * 110ms) backwards; }
[data-courant="4"] .os-cite { animation: os-glisse 500ms var(--ressort) 800ms backwards; }
[data-courant="4"] .os-cite-src { animation: os-pop 450ms cubic-bezier(0.3, 1.6, 0.5, 1) 1300ms backwards; }

@media (prefers-reduced-motion: reduce) {
  .os-scene, .os-scene * { animation: none !important; }
}

/* ═══ LES LIVRABLES : six tuiles, calmes ═══
   Grille régulière de six, un visuel par tuile, immobile tant qu'on ne
   survole pas (le survol déplace à peine un élément ; rien avec le
   mouvement réduit). Survol de la carte : le résultat de recherche
   (offre-seo.css). */
.os-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: none; gap: var(--e4); margin: 0; padding: 0; list-style: none; }
.os-bento > .od-tuile { grid-area: auto; }
.os-bento .od-poignees { display: none; }
.os-bento .od-tuile-vue { height: 230px; }
.os-bento img { display: block; }
.os-bento .od-tuile-texte { gap: 8px; }
.os-bento .livrable-quoi { max-width: 36ch; }

/* 01 · L'audit : un score, quatre contrôles */
.os-audit { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 26px; padding: 20px; }
.os-anneau { position: relative; display: grid; place-items: center; flex: none; width: 104px; height: 104px; }
.os-anneau svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.os-anneau circle { fill: none; stroke-width: 3.2; }
.os-anneau-fond { stroke: rgba(255, 255, 255, 0.1); }
.os-anneau-plein { stroke: #3DDC84; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 4; transition: stroke-dashoffset 900ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.os-anneau b { font-size: 30px; font-weight: 600; color: #3DDC84; }
.os-audit-liste { display: grid; gap: 9px; font-size: 13px; }
.os-audit-liste span { display: inline-flex; align-items: center; gap: 9px; }
.os-audit-liste i { width: 16px; height: 16px; border-radius: 50%; background: #3DDC84 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.3 2.3 2.3 4.7-5' fill='none' stroke='%23111' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.os-audit-liste i.est-attente { background: none; box-shadow: inset 0 0 0 1.5px var(--or); }
.os-tuile--audit:hover .os-anneau-plein { stroke-dashoffset: 0; }

/* 02 · Les corrections : un diff */
.os-diff { position: absolute; inset: 18px; display: grid; align-content: center; gap: 4px; font: 11.5px/1.5 ui-monospace, 'SF Mono', Menlo, monospace; }
.os-diff-fichier { margin-bottom: 6px; color: var(--sur-noir-2); }
.os-diff-l { display: flex; gap: 8px; padding: 4px 10px; overflow: hidden; border-radius: 6px; white-space: nowrap; transition: transform 400ms var(--ressort); }
.os-diff-s { flex: none; width: 10px; }
.os-diff-l--moins { background: rgba(229, 96, 79, 0.14); color: #F2A79C; }
.os-diff-l--plus { background: rgba(61, 220, 132, 0.12); color: #9FE8BD; }
.os-tuile--code:hover .os-diff-l--plus { transform: translateX(4px); }

/* 03 · Intentions et plan */
.os-plan { position: absolute; inset: 18px; display: grid; align-content: center; gap: 8px; }
.os-plan-l { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); font-size: 12.5px; transition: transform 400ms var(--ressort); }
.os-plan-l > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-plan-l--achat { background: rgba(209, 163, 38, 0.1); box-shadow: inset 0 0 0 1px rgba(209, 163, 38, 0.55); }
.os-plan-l--achat .os-tag { background: var(--or); color: #111; font-weight: 600; }
.os-tuile--intentions:hover .os-plan-l--achat { transform: translateX(4px); }

/* 04 · Optimisation sur page : le résultat enrichi */
.os-extrait { position: absolute; inset: 18px; display: grid; align-content: center; gap: 5px; padding: 16px; border-radius: 12px; background: #fff; color: #202124; transition: transform 450ms var(--ressort); }
.os-extrait-site { display: flex; align-items: center; gap: 8px; }
.os-extrait-site > span:last-child { display: grid; line-height: 1.2; }
.os-extrait-site b { font-size: 12.5px; font-weight: 500; }
.os-extrait-site small { color: #4D5156; font-size: 11px; }
.os-extrait-fav { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #EEF3F1; box-shadow: inset 0 0 0 1px #DADCE0; }
.os-extrait-fav svg { width: 9px; height: 12px; }
.os-extrait-titre { color: #1A0DAB; font-size: 15.5px; line-height: 1.3; }
.os-extrait-note { display: flex; align-items: center; gap: 6px; color: #70757A; }
.os-extrait-note .os-etoiles > span { color: #70757A; font-weight: 400; }
.os-extrait-texte { color: #4D5156; font-size: 12.5px; line-height: 1.45; }
.os-tuile--page:hover .os-extrait { transform: translateY(-4px); }

/* 05 · Local et liens : la fiche établissement */
.os-local { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.os-local-carte { position: relative; background:
  linear-gradient(135deg, transparent 47%, rgba(255, 255, 255, 0.09) 47% 53%, transparent 53%) 0 0 / 46px 46px,
  linear-gradient(45deg, transparent 48%, rgba(255, 255, 255, 0.06) 48% 52%, transparent 52%) 0 0 / 64px 64px,
  #1A2A2E; }
.os-local-epingle { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 34px; height: 34px; transform: translate(-50%, -70%); transition: transform 450ms var(--ressort); }
.os-local-epingle svg { width: 34px; height: 34px; fill: #EA4335; stroke: #fff; stroke-width: 1.2; }
.os-local-epingle::after { content: ''; position: absolute; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.os-local-fiche { display: grid; align-content: center; gap: 4px; padding: 16px; background: #fff; color: #202124; font-size: 12px; }
.os-local-fiche b { font-size: 15px; font-weight: 500; }
.os-local-fiche > small { color: #188038; font-size: 11.5px; }
.os-local-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.os-local-actions span { padding: 4px 9px; border-radius: 99px; box-shadow: inset 0 0 0 1px #DADCE0; color: #1A73E8; font-size: 11px; font-weight: 500; }
.os-tuile--local:hover .os-local-epingle { transform: translate(-50%, -85%); }

/* 06 · Le suivi GEO */
.os-suivi { position: absolute; inset: 18px; display: grid; align-content: center; gap: 8px; }
.os-suivi-l { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); font-size: 13px; transition: transform 400ms var(--ressort); }
.os-suivi-logo { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #fff; }
.os-suivi-logo img { width: 14px; height: 14px; }
.os-suivi-l em { padding: 2px 9px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); color: var(--sur-noir-2); font-size: 11px; font-style: normal; font-weight: 600; }
.os-suivi-l em.est-cite { background: rgba(209, 163, 38, 0.18); color: #F2D27A; }
.os-tuile--geo:hover .os-suivi-l:first-child { transform: translateX(4px); }

@media (max-width: 1100px) {
  .os-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .os-bento { grid-template-columns: minmax(0, 1fr); gap: var(--e3); }
  .os-bento .od-tuile-vue { height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .os-bento * { animation: none !important; transition: none !important; }
}

/* ═══ LE CAS · STYS ═══
   Une vraie page de résultats Google, bâtie à 1 240 px de large et
   réduite au cadre comme une capture (--k posé par offre-seo.js) :
   Aperçu IA qui cite STYS, annonce, 1er résultat naturel, fiche
   d'établissement. Les concurrents sont floutés, comme sur une capture
   publiée. Les étiquettes or désignent ce que nous avons fait. */
.os-cas .od-pellicule { padding: 0; }
.os-cas .od-cas-chip { inset: auto auto 16px 16px; z-index: 3; background: #050505; }
.os-g { box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.06); }
.os-g-cadre { --k: 0.5; position: relative; height: calc(var(--k) * 1180px); overflow: hidden; background: #fff; }
.os-g-cadre::after { content: ''; position: absolute; inset: auto 0 0; height: 70px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); pointer-events: none; }
.os-g-page { width: 1240px; transform: scale(var(--k)); transform-origin: 0 0; color: #202124; font: 14px/1.58 Arial, Helvetica, sans-serif; text-align: left; }
.os-g-page b { font-weight: 400; }

/* En-tête : logo, champ de recherche, compte */
.os-g-tete { display: flex; align-items: center; gap: 34px; padding: 22px 28px 14px; }
.os-g-logo { font: 500 30px/1 'Product Sans', Arial, sans-serif; letter-spacing: -1px; }
.os-g-logo b:nth-child(1), .os-g-logo b:nth-child(4) { color: #4285F4; }
.os-g-logo b:nth-child(2), .os-g-logo b:nth-child(6) { color: #EA4335; }
.os-g-logo b:nth-child(3) { color: #FBBC05; }
.os-g-logo b:nth-child(5) { color: #34A853; }
.os-g-req { display: flex; align-items: center; justify-content: space-between; width: 690px; height: 46px; padding: 0 16px 0 22px; border-radius: 24px; box-shadow: 0 2px 5px 1px rgba(64, 60, 67, 0.16); font-size: 16px; }
.os-g-req-ic { display: flex; align-items: center; gap: 14px; }
.os-g-req-ic svg { width: 22px; height: 22px; fill: none; stroke: #70757A; stroke-width: 1.8; stroke-linecap: round; }
.os-g-req-ic i { width: 1px; height: 26px; background: #DADCE0; }
.os-g-micro { stroke: #4285F4 !important; }
.os-g-loupe { stroke: #4285F4 !important; stroke-width: 2.2 !important; }
.os-g-compte { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.os-g-apps { display: grid; grid-template-columns: repeat(3, 4px); gap: 3px; }
.os-g-apps i { width: 4px; height: 4px; border-radius: 50%; background: #5F6368; }
.os-g-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #0B57D0; color: #fff; font-size: 15px; }
.os-g-onglets { display: flex; gap: 26px; padding: 0 0 0 156px; border-bottom: 1px solid #EBEBEB; color: #5F6368; font-size: 14px; }
.os-g-onglets > * { padding: 10px 0 12px; }
.os-g-onglets b { color: #1F1F1F; font-weight: 500; box-shadow: inset 0 -3px 0 #1F1F1F; }
.os-g-outils { margin-left: auto; margin-right: 40px; }

/* Corps : résultats à gauche, fiche à droite */
.os-g-corps { display: grid; grid-template-columns: 652px 372px; gap: 0 46px; padding: 22px 0 0 156px; }
.os-g-gauche { display: grid; gap: 30px; align-content: start; }
.os-g-r { position: relative; display: grid; gap: 3px; }
.os-g-site { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; line-height: 1.3; }
.os-g-site > span:last-child { display: grid; }
.os-g-site b { font-size: 14px; color: #202124; }
.os-g-site small { color: #4D5156; font-size: 12px; }
.os-g-fav { display: grid; place-items: center; width: 28px; height: 28px; overflow: hidden; border-radius: 50%; background: #F1F3F4; box-shadow: 0 0 0 1px #DADCE0; }
.os-g-fav img { width: 100%; height: 100%; object-fit: cover; }
.os-g-fav i { width: 14px; height: 14px; border-radius: 4px; background: #9AA0A6; }
.os-g-titre { color: #1A0DAB; font-size: 20px; line-height: 1.3; }
.os-g-desc { color: #4D5156; font-size: 14px; }
.os-g-liens { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.os-g-liens span { padding: 5px 14px; border-radius: 8px; box-shadow: inset 0 0 0 1px #DADCE0; color: #1A0DAB; font-size: 14px; }
.os-g-pub { color: #202124; font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.os-g-r.est-flou > :not(.os-g-pub) { filter: blur(4px); }
.os-g-bleu { color: #1A0DAB; }

/* Aperçu IA */
.os-g-ia { position: relative; padding: 16px 20px 18px; border-radius: 16px; background: #F3F6FC; }
.os-g-ia-tete { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 15px; font-weight: 500; }
.os-g-ia-tete svg { width: 20px; height: 20px; fill: #4285F4; }
.os-g-ia-corps { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 18px; }
.os-g-ia p { margin: 0; color: #1F1F1F; font-size: 16px; line-height: 1.6; }
.os-g-ia mark { padding: 1px 0; background: #D3E3FD; color: inherit; }
.os-g-ia-src { display: grid; gap: 8px; align-content: start; }
.os-g-ia-carte { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: #fff; font-size: 13px; line-height: 1.35; }
.os-g-ia-carte small { display: flex; align-items: center; gap: 6px; color: #4D5156; font-size: 12px; }
.os-g-ia-carte small img { width: 16px; height: 16px; border-radius: 50%; }
.os-g-ia-carte small i { width: 16px; height: 16px; border-radius: 50%; background: #9AA0A6; }
.os-g-ia-carte.est-flou > * { filter: blur(3px); }

/* Fiche d'établissement */
.os-g-fiche { position: relative; display: grid; align-content: start; gap: 6px; padding-bottom: 20px; border-radius: 12px; box-shadow: inset 0 0 0 1px #DADCE0; }
.os-g-photos { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; height: 200px; overflow: hidden; border-radius: 12px 12px 0 0; }
.os-g-photos img { width: 100%; height: 100%; object-fit: cover; }
.os-g-photos img:first-child { grid-row: span 2; }
.os-g-fiche > :not(.os-g-photos, .os-g-note-or) { margin: 0 18px; }
.os-g-fiche-nom { margin-top: 12px !important; font-size: 21px; line-height: 1.3; }
.os-g-note { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.os-g-etoiles { display: inline-flex; gap: 1px; }
.os-g-etoiles i { width: 14px; height: 14px; background: #FBBC04; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.os-g-fiche-type { color: #70757A; font-size: 14px; }
.os-g-etoiles.est-47 i:last-child { background: linear-gradient(90deg, #FBBC04 70%, #DADCE0 70%); }
.os-g-ouvert { color: #188038; }
.os-g-proprio { display: grid; gap: 2px; padding: 0 0 12px; border-bottom: 1px solid #EBEBEB; font-size: 14px; line-height: 1.4; }
.os-g-proprio small { color: #70757A; font-size: 12px; }
.os-g-extraits { display: grid; gap: 8px; margin-top: 14px; color: #4D5156; font-size: 13.5px; line-height: 1.45; }
.os-g-actions { display: flex; justify-content: space-between; padding: 12px 0 14px; border-bottom: 1px solid #EBEBEB; }
.os-g-actions > span { display: grid; justify-items: center; gap: 6px; color: #0B57D0; font-size: 13px; }
.os-g-actions i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px #DADCE0; }
.os-g-actions svg { width: 20px; height: 20px; fill: none; stroke: #0B57D0; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.os-g-fiche-desc { padding-top: 6px; font-size: 14px; }
.os-g-infos { display: grid; gap: 6px; padding: 8px 0 12px; border-bottom: 1px solid #EBEBEB; font-size: 14px; }
.os-g-infos b { font-weight: 700; }
.os-g-avis-tete { display: block; margin: 6px 0 10px; font-size: 20px; }
.os-g-avis-grille { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 18px; align-items: center; }
.os-g-avis-barres { display: grid; gap: 5px; }
.os-g-avis-barres u { position: relative; display: block; height: 9px; border-radius: 5px; background: #E8EAED; text-decoration: none; }
.os-g-avis-barres u::after { content: ''; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); border-radius: inherit; background: #FBBC04; transform-origin: left; }
.os-g-avis-moy { display: grid; justify-items: center; gap: 2px; }
.os-g-avis-moy b { font-size: 48px; line-height: 1; }
.os-g-avis-moy small { color: #70757A; font-size: 13px; }

/* Version étroite (téléphone) : une colonne, la fiche sous les résultats */
.os-g-cadre[data-etroit] { height: calc(var(--k) * 1880px); }
[data-etroit] .os-g-page { width: 700px; }
[data-etroit] .os-g-tete { gap: 18px; padding: 20px 20px 12px; }
[data-etroit] .os-g-req { width: auto; flex: 1; }
[data-etroit] .os-g-apps { display: none; }
[data-etroit] .os-g-onglets { padding-left: 24px; }
[data-etroit] .os-g-onglets span:nth-child(n+5) { display: none; }
[data-etroit] .os-g-corps { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 22px 28px 0; }
[data-etroit] .os-g-ia-corps { grid-template-columns: minmax(0, 1fr); }
[data-etroit] .os-g-ia-carte.est-flou, [data-etroit] .os-g-r.est-flou:not(.est-pub), [data-etroit] .os-g-r.est-pub.est-flou ~ .os-g-r.est-pub.est-flou { display: none; }
[data-etroit] .os-g-note-or { font-size: 24px; }

/* Les étiquettes : ce que nous avons fait */
.os-g-note-or { position: absolute; z-index: 2; padding: 6px 16px; border-radius: 99px; background: #111; color: #F2D27A; font: 600 19px/1.2 var(--police); font-style: normal; white-space: nowrap; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.6); }
.os-g-note-or sup { font-size: 0.6em; }
.os-g-ia .os-g-note-or { top: -14px; right: 18px; }
.os-g-r .os-g-note-or { top: -6px; right: 0; }
.os-g-fiche .os-g-note-or { top: 14px; left: 14px; }
.os-g-r.est-stys::before, .os-g-r.est-pub:not(.est-flou)::before, .os-g-ia::before, .os-g-fiche::before { content: ''; position: absolute; inset: -12px -16px; border-radius: 16px; box-shadow: 0 0 0 2px rgba(209, 163, 38, 0.75); pointer-events: none; }
.os-g-ia::before, .os-g-fiche::before { inset: -6px; border-radius: 20px; }
.os-g-r.est-pub:not(.est-flou)::before { box-shadow: 0 0 0 2px rgba(209, 163, 38, 0.45); }

/* Les trois chiffres, à la place du paragraphe */
.os-chiffres { display: grid; gap: var(--e3); margin: 0; }
.os-chiffres > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: baseline; gap: var(--e3); padding-bottom: var(--e3); border-bottom: 1px solid var(--trait); }
.os-chiffres > div:last-child { padding-bottom: 0; border-bottom: 0; }
.os-chiffres dt { color: var(--or-lisible); font-size: 34px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; }
.os-chiffres dt sup { font-size: 0.45em; }
.os-chiffres dt span { margin-left: 2px; font-size: 0.55em; vertical-align: 0.35em; }
.os-chiffres dd { margin: 0; color: var(--encre-3); font-size: var(--p-4); line-height: 1.4; }

/* L'arrivée à l'écran : les quatre encadrés s'allument l'un après l'autre */
.od-anime .os-cas .od-cas-scene :is(.os-g-ia, .os-g-r.est-pub, .os-g-r.est-stys, .os-g-fiche) :is(.os-g-note-or) { transition: opacity 500ms ease, transform 600ms var(--ressort); }
.od-anime .os-cas .od-cas-scene:not(.est-vu) .os-g-note-or { opacity: 0.001; transform: translateY(10px) scale(0.9); }
.os-cas .od-cas-scene.est-vu .os-g-ia .os-g-note-or { transition-delay: 300ms; }
.os-cas .od-cas-scene.est-vu .est-pub .os-g-note-or { transition-delay: 550ms; }
.os-cas .od-cas-scene.est-vu .est-stys .os-g-note-or { transition-delay: 800ms; }
.os-cas .od-cas-scene.est-vu .os-g-fiche .os-g-note-or { transition-delay: 1050ms; }
.os-cas .od-cas-scene.est-vu .os-g-avis-barres u::after { animation: os-jauge 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 900ms backwards; }

@media (max-width: 700px) {
  .os-cas .od-cas-chip { display: none; }
  .os-chiffres > div { grid-template-columns: 76px minmax(0, 1fr); }
  .os-chiffres dt { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .os-cas *, .os-cas *::after { animation: none !important; transition: none !important; }
}