/* ═══════════════════════════════════════════════════════════════
   OFFRE — DÉVELOPPEMENT · feuille différée (activée par offre-dev.js)
   L'atelier (éditeur de code + aperçu + déploiement), les scènes de la
   méthode, la mosaïque des livrables et son survol, le cas Sublimex.
   Projet fictif Orée, toutes les données sont fictives.
   ═══════════════════════════════════════════════════════════════ */

/* ═══ L'ATELIER ═══
   Un éditeur complet : barre d'activité, explorateur, onglets, fil
   d'Ariane, code + minimap, panneau du terminal, barre d'état ; à
   droite, le navigateur et le site d'Orée, qui défile. */
.oc-atelier.est-pret { box-shadow: 0 60px 120px -60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06); user-select: none; -webkit-user-select: none; }
.oc {
  --oc-or: #D1A326;
  --oc-vert: #3DDC84;
  --oc-panneau: #141414;
  --oc-trait: rgba(255, 255, 255, 0.08);
  --oc-doux: rgba(255, 255, 255, 0.55);
  --oc-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 44px 196px minmax(0, 1fr) minmax(0, 1.1fr);
  grid-template-rows: 48px minmax(0, 1fr) 24px;
  grid-template-areas: "barre barre barre barre" "activite cote editeur apercu" "etat etat etat etat";
  font: 400 12.5px/1.45 var(--police);
  color: #EDEDED;
}
.oc svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.oc button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.oc img { display: block; }
.oc-ic-ts, .oc-ic-json, .oc-ic-md { display: inline-grid; place-items: center; flex: none; width: 16px; height: 12px; border-radius: 2px; background: #3178C6; color: #fff; font: 700 7.5px/1 var(--police); letter-spacing: 0.02em; }
.oc-ic-json { background: none; color: #E6BA42; font: 700 10px/1 var(--oc-mono); }
.oc-ic-md { background: none; color: #6CB6FF; font-size: 8.5px; }

/* La barre du haut */
.oc-barre { position: relative; grid-area: barre; display: flex; align-items: center; gap: 14px; padding: 0 14px; background: #101010; border-bottom: 1px solid var(--oc-trait); }
.oc-feux { display: flex; gap: 6px; }
.oc-feux i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; }
.oc-feux i:nth-child(2) { background: #FEBC2E; } .oc-feux i:nth-child(3) { background: #28C840; }
.oc-projet { display: flex; align-items: center; gap: 7px; color: var(--oc-doux); }
.oc-projet b { color: #fff; font-weight: 600; }
.oc-branche { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); color: var(--oc-doux); font: 11.5px var(--oc-mono); }
.oc-palette { display: inline-flex; align-items: center; gap: 8px; width: min(340px, 30%); margin-left: auto; padding: 5px 6px 5px 10px; border-radius: 8px; background: #1A1A1A; box-shadow: inset 0 0 0 1px var(--oc-trait); color: var(--oc-doux); font-size: 11.5px; }
.oc-palette > span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-palette kbd { padding: 1px 6px; border-radius: 4px; background: #262626; color: var(--oc-doux); font: 10.5px var(--police); }
.oc-appareils { display: inline-flex; gap: 2px; margin-left: auto; padding: 3px; border-radius: 9px; background: #1B1B1B; box-shadow: inset 0 0 0 1px var(--oc-trait); }
.oc-appareils button { display: grid; place-items: center; width: 32px; height: 26px; border-radius: 6px; color: var(--oc-doux); }
.oc-appareils button.est-actif { background: #2C2C2C; color: #fff; }
.oc .oc-deployer { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 10px; background: linear-gradient(180deg, #E6BA42, #C99A1F); color: #141414; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 10px 22px -12px rgba(209, 163, 38, 0.8); transition: transform 200ms ease, filter 200ms ease; }
.oc .oc-deployer:hover { transform: translateY(-1px); }
.oc-deployer-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: rgba(0, 0, 0, 0.14); }
.oc-deployer-ic svg { stroke-width: 1.8; }
.oc .oc-deployer.est-cours { filter: saturate(0.6); }
.oc-deployer.est-cours .oc-deployer-ic svg { animation: oc-decolle 700ms ease-in-out infinite; }
@keyframes oc-decolle { 50% { transform: translate(2px, -2px); } }
.oc .oc-deployer.est-fait { background: linear-gradient(180deg, #3DDC84, #23B26A); }
/* La progression du déploiement, en filet sous la barre. */
.oc-progression { --p: 0; position: absolute; left: 0; bottom: -1px; height: 2px; width: calc(var(--p) * 100%); background: linear-gradient(90deg, var(--oc-or), var(--oc-vert)); box-shadow: 0 0 12px rgba(61, 220, 132, 0.6); transition: width 400ms ease; }

/* La barre d'activité */
.oc-activite { grid-area: activite; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0; background: #0C0C0C; border-right: 1px solid var(--oc-trait); color: rgba(255, 255, 255, 0.38); }
.oc-activite > span { position: relative; display: grid; place-items: center; width: 44px; height: 40px; }
.oc .oc-activite svg { width: 21px; height: 21px; stroke-width: 1.4; }
.oc-activite > span.est-actif { color: #fff; box-shadow: inset 2px 0 0 var(--oc-or); }
.oc-activite-bas { margin-top: auto; }
.oc-activite-git b { position: absolute; right: 7px; bottom: 6px; display: grid; place-items: center; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 99px; background: var(--oc-or); color: #111; font-size: 9.5px; font-weight: 700; animation: oc-pop 350ms cubic-bezier(0.3, 1.6, 0.5, 1); }
.oc-activite-git b[hidden] { display: none; }

/* La colonne de gauche */
.oc-cote { grid-area: cote; display: flex; flex-direction: column; gap: 6px; padding: 12px 8px; background: var(--oc-panneau); border-right: 1px solid var(--oc-trait); overflow: hidden; }
.oc-sec { display: flex; justify-content: space-between; margin: 0 6px 2px; color: var(--oc-doux); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.oc-racine { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0 4px; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
.oc .oc-chevron { width: 13px; height: 13px; opacity: 0.6; }
.oc-arbre { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.oc-arbre li { display: flex; }
.oc-dossier, .oc-fichier-muet { align-items: center; gap: 6px; padding: 3px 6px; color: var(--oc-doux); white-space: nowrap; }
.oc-dossier svg:not(.oc-chevron), .oc-fichier-muet svg:not(.oc-chevron) { color: #D1A326; }
.oc-arbre button { display: flex; align-items: center; gap: 6px; width: 100%; padding: 3px 8px 3px 6px; border-radius: 5px; text-align: left; transition: background-color 200ms ease; }
.oc-arbre .oc-niv2 { padding-left: 25px; }
.oc-arbre .oc-fichier-muet:not(.oc-niv2) { padding-left: 6px; }
.oc-arbre button > .oc-nom { flex: 1; }
.oc-arbre button:hover { background: rgba(255, 255, 255, 0.05); }
.oc-arbre button.est-actif { background: rgba(209, 163, 38, 0.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(209, 163, 38, 0.35); }
.oc-arbre button.est-modifie > .oc-nom, .oc-onglets button.est-modifie > .oc-nom { color: #E6BA42; }
.oc-m { color: #E6BA42; font: 600 10.5px var(--oc-mono); }
.oc-poids { display: grid; gap: 6px; margin-top: auto; padding: 12px; border-radius: 12px; background: #1A1A1A; box-shadow: inset 0 0 0 1px var(--oc-trait); }
.oc-poids small { color: var(--oc-doux); font-size: 11px; }
.oc-poids > b { font-size: 16px; font-weight: 600; }
.oc-poids > b span { color: var(--oc-doux); font-size: 11.5px; font-weight: 400; }
.oc-poids > i { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.oc-poids > i b { display: block; width: 60.7%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3DDC84, #D1A326); }
.oc-note { display: flex; align-items: center; gap: 7px; margin: 4px 4px 0; color: var(--oc-doux); font-size: 10.5px; }
.oc-note i { width: 6px; height: 6px; border-radius: 50%; background: var(--oc-or); }

/* L'éditeur */
.oc-editeur { grid-area: editeur; display: grid; grid-template-rows: 36px 26px minmax(0, 1fr) 176px; min-width: 0; background: #0E0E0E; border-right: 1px solid var(--oc-trait); }
.oc-onglets { display: flex; overflow: hidden; background: #121212; border-bottom: 1px solid var(--oc-trait); }
.oc-onglets button { display: flex; align-items: center; gap: 7px; padding: 0 12px; border-right: 1px solid var(--oc-trait); color: var(--oc-doux); white-space: nowrap; }
.oc-onglets button.est-actif { background: #0E0E0E; color: #fff; box-shadow: inset 0 2px 0 var(--oc-or); }
.oc-onglets .oc-m:empty { display: none; }
.oc-ariane { display: flex; align-items: center; gap: 4px; padding: 0 14px; overflow: hidden; color: var(--oc-doux); font-size: 11.5px; white-space: nowrap; }
.oc .oc-ariane svg { width: 12px; height: 12px; opacity: 0.5; }
.oc-ariane b { color: #D4D4D4; font-weight: 400; margin-left: 2px; }
.oc-code-zone { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 54px; min-height: 0; }
.oc-code { margin: 0; padding: 6px 0 18px; overflow: hidden; font: 12.5px/1.72 var(--oc-mono); color: #D4D4D4; white-space: pre; tab-size: 2; }
.oc-ligne { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); }
.oc-ligne > b { padding-right: 16px; color: #4A4A4A; font-weight: 400; text-align: right; user-select: none; }
.oc-ligne > span { overflow: hidden; text-overflow: ellipsis; }
.oc-ligne.est-courante { background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 -1px 0 rgba(255, 255, 255, 0.04); }
.oc-ligne.est-courante > b { color: #C6C6C6; }
/* La marque Git dans la gouttière : ligne modifiée. */
.oc-ligne.est-modifiee::before { content: ''; position: absolute; left: 36px; top: 2px; bottom: 2px; width: 3px; border-radius: 2px; background: #1B81A8; box-shadow: 0 0 8px rgba(27, 129, 168, 0.8); animation: oc-pop 300ms ease; }
.oc-k { color: #C586C0; } .oc-s { color: #CE9178; } .oc-c { color: #6A9955; font-style: italic; } .oc-t { color: #4EC9B0; } .oc-p { color: #9CDCFE; } .oc-f { color: #DCDCAA; } .oc-n { color: #B5CEA8; }
.oc .oc-jeton { position: relative; display: inline-flex; align-items: center; gap: 6px; margin: -1px 0; padding: 0 5px; border-radius: 5px; font: inherit; box-shadow: inset 0 0 0 1px rgba(209, 163, 38, 0.55); background: rgba(209, 163, 38, 0.1); transition: background-color 200ms ease, box-shadow 200ms ease; }
.oc .oc-jeton:hover { background: rgba(209, 163, 38, 0.22); box-shadow: inset 0 0 0 1px var(--oc-or); }
.oc-jeton > i { width: 11px; height: 11px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35); transition: background-color 300ms ease; }
.oc .oc-jeton--texte { color: #CE9178; }
.oc .oc-jeton--bloc { gap: 0; background: none; box-shadow: inset 0 0 0 1px transparent; }
.oc .oc-jeton--bloc:hover { background: rgba(78, 201, 176, 0.1); box-shadow: inset 0 0 0 1px rgba(78, 201, 176, 0.6); }
.oc-jeton::after { content: ''; position: absolute; right: -4px; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--oc-or); animation: oc-pouls 1.6s ease infinite; }
.oc-jeton--bloc::after { display: none; }
/* La frappe : un caret qui clignote au bout du texte. */
.oc .oc-jeton.est-frappe::after { position: static; width: 2px; height: 1.15em; margin-left: 1px; border-radius: 0; background: #AEAFAD; animation: oc-caret 900ms steps(1) infinite; }
@keyframes oc-caret { 50% { opacity: 0; } }
@keyframes oc-pouls { 50% { opacity: 0.25; } }
/* La bulle d'information au survol d'une valeur (comme l'éditeur). */
.oc-jeton[data-info]::before { content: attr(data-info); position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 4; padding: 6px 9px; border-radius: 6px; background: #1F1F1F; color: #9CDCFE; font: 11px/1.3 var(--oc-mono); white-space: nowrap; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 12px 24px -10px rgba(0, 0, 0, 0.8); opacity: 0; transform: translateY(4px); transition: opacity 180ms ease, transform 180ms ease; pointer-events: none; }
.oc-jeton[data-info]:hover::before { opacity: 1; transform: none; transition-delay: 350ms; }

/* Le menu d'autocomplétion de la couleur d'accent. */
.oc-suggest { position: absolute; z-index: 5; display: grid; min-width: 230px; padding: 4px; border-radius: 8px; background: #1F1F1F; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 20px 40px -12px rgba(0, 0, 0, 0.9); font: 12px/1.3 var(--oc-mono); animation: oc-menu 180ms ease; }
@keyframes oc-menu { from { opacity: 0; transform: translateY(-4px); } }
.oc-suggest button { display: grid; grid-template-columns: 12px auto 1fr; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 5px; text-align: left; color: #D4D4D4; }
.oc-suggest button i { width: 12px; height: 12px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3); }
.oc-suggest button small { justify-self: end; color: var(--oc-doux); font-size: 10.5px; }
.oc-suggest button.est-choisi { background: #04395E; box-shadow: inset 0 0 0 1px #2B79D0; color: #fff; }
.oc-suggest p { margin: 4px 0 0; padding: 5px 8px 3px; border-top: 1px solid var(--oc-trait); color: var(--oc-doux); font: 10.5px var(--police); }

/* La minimap */
.oc-minimap { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 10px 8px 0 6px; border-left: 1px solid rgba(255, 255, 255, 0.04); overflow: hidden; }
.oc-minimap i { display: block; flex: none; height: 2px; margin-left: calc(var(--r) * 1px); width: calc(var(--l) * 0.75px); max-width: calc(100% - var(--r) * 1px); border-radius: 1px; background: rgba(212, 212, 212, 0.35); }
.oc-mm-k { background: rgba(197, 134, 192, 0.6) !important; } .oc-mm-s { background: rgba(206, 145, 120, 0.6) !important; } .oc-mm-c { background: rgba(106, 153, 85, 0.6) !important; }
.oc-mm-t { background: rgba(78, 201, 176, 0.55) !important; } .oc-mm-p { background: rgba(156, 220, 254, 0.5) !important; } .oc-mm-f { background: rgba(220, 220, 170, 0.55) !important; }
.oc-minimap i.est-modifiee { box-shadow: -5px 0 0 #1B81A8; }
.oc-minimap-vue { position: absolute; left: 0; right: 0; top: 6px; height: 62%; background: rgba(255, 255, 255, 0.04); }

/* Le panneau du terminal */
.oc-terminal { display: grid; grid-template-rows: 30px minmax(0, 1fr); min-height: 0; border-top: 1px solid var(--oc-trait); background: #0A0A0A; }
.oc-terminal-tete { display: flex; align-items: stretch; gap: 18px; padding: 0 14px; color: var(--oc-doux); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 1px solid var(--oc-trait); }
.oc-terminal-tete > * { display: flex; align-items: center; gap: 6px; }
.oc-terminal-tete b { color: #fff; font-weight: 500; box-shadow: inset 0 -1px 0 var(--oc-or); }
.oc-terminal-tete .oc-compte { display: grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: rgba(255, 255, 255, 0.1); font-style: normal; letter-spacing: 0; }
.oc-terminal-tete .oc-shell { margin-left: auto; letter-spacing: 0; text-transform: none; }
.oc .oc-terminal-tete .oc-shell svg { width: 13px; height: 13px; }
.oc-terminal-lignes { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 8px 14px 10px; overflow: hidden; font: 11.5px/1.5 var(--oc-mono); color: #B5B5B5; }
.oc-terminal-lignes span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; animation: oc-ligne 300ms ease backwards; }
.oc-terminal-lignes .est-cmd { color: #fff; } .oc-terminal-lignes .est-ok { color: #3DDC84; } .oc-terminal-lignes .est-or { color: var(--oc-or); font-weight: 600; }
@keyframes oc-ligne { from { opacity: 0; transform: translateY(6px); } }

/* La barre d'état */
.oc-etat { grid-area: etat; display: flex; align-items: center; gap: 14px; padding: 0 12px; overflow: hidden; background: #0F2E22; border-top: 1px solid rgba(61, 220, 132, 0.25); color: rgba(255, 255, 255, 0.78); font-size: 11px; white-space: nowrap; }
.oc-etat > span { display: inline-flex; align-items: center; gap: 5px; }
.oc .oc-etat svg { width: 12px; height: 12px; }
.oc-etat-droite { margin-left: auto; }
.oc-etat-env { padding: 0 8px; align-self: stretch; background: rgba(61, 220, 132, 0.18); color: #9FF0C2; }

/* L'aperçu */
.oc-apercu { grid-area: apercu; position: relative; display: grid; place-items: center; padding: 16px; min-width: 0; background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1.3px) 0 0 / 18px 18px, #111; }
.oc-navigateur { display: grid; grid-template-rows: 34px minmax(0, 1fr); width: 100%; height: 100%; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9); transition: width 600ms cubic-bezier(0.65, 0, 0.35, 1), border-radius 600ms ease; }
.oc-nav-barre { display: flex; align-items: center; gap: 10px; padding: 0 10px; background: #EEF0F2; color: #6B7075; }
.oc-nav-barre .oc-feux i { width: 9px; height: 9px; }
.oc-nav-fleches { display: flex; gap: 4px; }
.oc .oc-nav-fleches svg { width: 13px; height: 13px; }
.oc-url { display: flex; align-items: center; justify-content: center; gap: 5px; flex: 1; min-width: 0; padding: 3px 10px; border-radius: 99px; background: #fff; color: #555; font-size: 11px; }
.oc-url > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-url-cadenas { display: none; color: #1E8E3E; }
.oc .oc-url-cadenas svg { width: 11px; height: 11px; stroke-width: 1.8; }
.oc-url.est-https .oc-url-cadenas { display: inline-flex; }
.oc-url.est-https { color: #17322E; font-weight: 500; }
.oc-taille { color: #8A8F94; font: 10px var(--oc-mono); white-space: nowrap; }
.oc-vue { position: relative; min-height: 0; overflow: hidden; }
.oc-apercu.est-mobile .oc-navigateur { width: 270px; border-radius: 30px; box-shadow: 0 0 0 8px #1C1C1E, 0 0 0 9px #3A3A3D, 0 30px 60px -30px rgba(0, 0, 0, 0.9); }
.oc-apercu.est-mobile .oc-nav-barre { padding-top: 6px; }
.oc-apercu.est-mobile :is(.oc-feux, .oc-nav-fleches, .oc-taille) { display: none; }

/* Le site d'Orée dans l'aperçu : il défile. */
.oc-site { --o-accent: var(--oc-accent, #A84E2E); position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; background: #EEF3F1; color: #17322E; font-family: 'Instrument Sans', system-ui, sans-serif; }
.oc-site::-webkit-scrollbar { display: none; }
.oc-site.est-recharge { animation: oc-recharge 600ms ease; }
@keyframes oc-recharge { 0% { filter: brightness(1.15); } 100% { filter: none; } }
.oc-site-nav { display: flex; justify-content: space-between; align-items: center; padding: 11px 16px; }
.oc-site-logo { display: block; width: 66px; }
.oc-site-logo svg { display: block; width: 100%; height: auto; }
.oc-site-liens { display: flex; align-items: center; gap: 13px; font-size: 11px; }
.oc-site-langue { padding: 2px 6px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(23, 50, 46, 0.25); font-size: 9.5px; font-weight: 600; }
.oc-site-lien-cta { padding: 4px 11px; border-radius: 99px; background: var(--oc-accent); color: #fff; transition: background-color 400ms ease; }
.oc-site-burger { display: none; }
.oc .oc-site-burger svg { width: 18px; height: 18px; stroke-width: 1.7; }
.oc-site [data-bloc] { position: relative; transition: box-shadow 250ms ease; }
.oc-site [data-bloc].est-cible { box-shadow: 0 0 0 2px #4EC9B0, 0 0 0 6px rgba(78, 201, 176, 0.25); z-index: 1; }
.oc-site [data-bloc].est-cible::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; background: rgba(111, 168, 220, 0.18); pointer-events: none; }
.oc-site-hero { height: 300px; margin: 0 12px; overflow: hidden; border-radius: 12px; }
.oc-site-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.oc-site-hero-txt { position: absolute; inset: 0; display: grid; align-content: end; justify-items: start; gap: 8px; padding: 20px; background: linear-gradient(180deg, transparent 25%, rgba(23, 50, 46, 0.82)); color: #fff; }
.oc-site-hero-txt small { padding: 3px 9px; border-radius: 99px; background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(6px); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.oc-site-hero-txt b { min-height: 1.05em; max-width: 15ch; font: italic 500 28px/1.05 'Fraunces', Georgia, serif; }
.oc-site-sous { max-width: 30ch; font-size: 11.5px; opacity: 0.85; }
.oc-site-ctas { display: flex; gap: 8px; margin-top: 2px; }
.oc-site-cta { display: inline-block; padding: 6px 14px; border-radius: 99px; background: var(--oc-accent); color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; transition: background-color 400ms ease; }
.oc-site-cta--clair { background: rgba(255, 255, 255, 0.92); color: #17322E; }
.oc-site-tete { display: flex; justify-content: space-between; align-items: baseline; }
.oc-site-tete b { font: 500 17px/1.1 'Fraunces', Georgia, serif; }
.oc-site-tete span { color: #4F6461; font-size: 10.5px; }
.oc-site-villas { display: grid; gap: 10px; margin: 16px 12px 0; padding: 4px 0; border-radius: 8px; }
.oc-site-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.oc-site-carte { display: grid; gap: 3px; }
.oc-site-carte-img { position: relative; overflow: hidden; border-radius: 9px; }
.oc-site-carte img { width: 100%; height: 92px; object-fit: cover; transition: filter 400ms ease; }
.oc-site .oc-site-statut { position: absolute; left: 6px; top: 6px; padding: 2px 7px; border-radius: 99px; background: rgba(255, 255, 255, 0.92); color: #1E7A4C; font-size: 9px; font-style: normal; font-weight: 600; }
.oc-site .oc-site-statut::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.oc-site-carte.est-complet img { filter: grayscale(0.85) brightness(0.9); }
.oc-site .oc-site-carte.est-complet .oc-site-statut { background: #17322E; color: #fff; animation: oc-pop 380ms cubic-bezier(0.3, 1.6, 0.5, 1); }
.oc-site-carte b { font: 500 12px/1.2 'Fraunces', Georgia, serif; }
.oc-site-carte small { color: #4F6461; font-size: 9.5px; }
.oc-site-table { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 16px 12px 0; border-radius: 10px; }
.oc-site-table > span { position: relative; display: grid; align-content: end; height: 130px; padding: 10px 12px; overflow: hidden; border-radius: 10px; color: #fff; }
.oc-site-table img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.oc-site-table > span::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, rgba(23, 50, 46, 0.8)); }
.oc-site-table > span { isolation: isolate; }
.oc-site-table b { font: italic 500 16px/1.1 'Fraunces', Georgia, serif; }
.oc-site-table small { font-size: 9.5px; opacity: 0.85; }
.oc-site-resa { display: grid; gap: 10px; margin: 16px 12px 0; padding: 14px; border-radius: 14px; background: #fff; box-shadow: 0 14px 30px -20px rgba(23, 50, 46, 0.6); }
.oc-site-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px 0; text-align: center; }
.oc-site .oc-jour-nom { color: #8A9B98; font-size: 9px; }
.oc-site .oc-jour { padding: 4px 0; font-size: 10.5px; font-style: normal; }
.oc-site .oc-jour.est-entre { background: color-mix(in srgb, var(--oc-accent) 14%, transparent); }
.oc-site .oc-jour.est-debut, .oc-site .oc-jour.est-fin { border-radius: 99px; background: var(--oc-accent); color: #fff; font-weight: 600; transition: background-color 400ms ease; }
.oc-site-champs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid #E3EAE8; }
.oc-site-champs > span:not(.oc-site-cta) { display: grid; }
.oc-site-champs small { color: #4F6461; font-size: 9.5px; }
.oc-site-champs b { font-size: 12px; }
.oc-site-pied { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 18px; padding: 18px 16px; background: #17322E; color: rgba(238, 243, 241, 0.7); font-size: 9.5px; --o-logo-encre: #EEF3F1; }
.oc-site-pied .oc-site-logo { width: 56px; }
/* Mobile */
.oc-apercu.est-mobile .oc-site-liens > span:not(.oc-site-burger) { display: none; }
.oc-apercu.est-mobile .oc-site-burger { display: block; }
.oc-apercu.est-mobile .oc-site-hero { height: 380px; }
.oc-apercu.est-mobile .oc-site-hero-txt b { font-size: 25px; }
.oc-apercu.est-mobile .oc-site-cartes { grid-template-columns: minmax(0, 1fr); }
.oc-apercu.est-mobile .oc-site-carte img { height: 110px; }
.oc-apercu.est-mobile .oc-site-table { grid-template-columns: minmax(0, 1fr); }
.oc-apercu.est-mobile .oc-site-champs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oc-apercu.est-mobile .oc-site-champs > span:nth-child(3) { display: none; }
.oc-apercu.est-mobile .oc-site-pied { flex-direction: column; align-items: flex-start; }

/* Par-dessus l'écran : l'étiquette d'inspection, l'indicateur du
   serveur de développement, le toast de rechargement. */
.oc-etiquette { position: absolute; left: 0; top: 0; z-index: 3; display: inline-flex; gap: 8px; padding: 4px 8px; border-radius: 4px; background: #1F1F1F; color: #fff; font: 10.5px/1.3 var(--oc-mono); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.6); transition: transform 120ms linear; }
.oc-etiquette[hidden] { display: none; }
.oc-etiquette-nom { color: #4EC9B0; }
.oc-etiquette-dim { color: #A6A6A6; }
.oc-indic-next { position: absolute; left: 10px; bottom: 10px; z-index: 3; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #000; color: #fff; font: 700 12px/1 var(--police); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25), 0 6px 14px -4px rgba(0, 0, 0, 0.6); }
.oc-indic-next[hidden] { display: none; }
.oc-toast { position: absolute; right: 10px; bottom: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 99px; background: #111; color: #fff; font-size: 10.5px; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.7); opacity: 0; transform: translateY(6px); transition: opacity 250ms ease, transform 300ms ease; pointer-events: none; }
.oc .oc-toast svg { width: 12px; height: 12px; color: #E6BA42; fill: #E6BA42; stroke: none; }
.oc-toast.est-vu { opacity: 1; transform: none; }

/* La recette après déploiement */
.oc-recette { position: absolute; right: 26px; bottom: 26px; z-index: 3; display: grid; gap: 10px; padding: 14px 16px; border-radius: 14px; background: rgba(16, 16, 16, 0.92); box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(209, 163, 38, 0.4); backdrop-filter: blur(8px); animation: oc-monte 500ms var(--ressort, ease) backwards; }
.oc-recette[hidden] { display: none; }
.oc-recette p { margin: 0; color: var(--oc-doux); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.oc-anneaux { display: flex; gap: 14px; }
.oc-anneau { position: relative; display: grid; justify-items: center; gap: 4px; width: 62px; }
.oc .oc-anneau svg { width: 46px; height: 46px; transform: rotate(-90deg); }
.oc-anneau-fond { fill: rgba(61, 220, 132, 0.12); stroke: rgba(61, 220, 132, 0.2); stroke-width: 4; }
.oc-anneau-trait { fill: none; stroke: #3DDC84; stroke-width: 4; stroke-linecap: round; stroke-dasharray: var(--v) 100; animation: oc-anneau 1100ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
@keyframes oc-anneau { from { stroke-dasharray: 0 100; } }
.oc-anneau > b { position: absolute; top: 13px; color: #3DDC84; font-size: 14px; font-weight: 700; }
.oc-anneau small { color: var(--oc-doux); font-size: 9.5px; line-height: 1.2; text-align: center; }
.oc-vitaux { display: flex; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--oc-trait); color: var(--oc-doux); font: 10.5px var(--oc-mono); }
.oc-vitaux b { color: #3DDC84; font-weight: 600; }
@keyframes oc-monte { from { opacity: 0; transform: translateY(14px); } }

/* La pancarte et le curseur de démonstration */
.oc-pancarte { position: absolute; left: 50%; top: 7px; z-index: 6; display: none; align-items: center; gap: 10px; max-width: calc(100% - 24px); padding: 9px 16px 9px 12px; border-radius: 99px; background: var(--oc-or) !important; color: #111 !important; font-size: 12.5px; font-weight: 600; white-space: nowrap; transform: translateX(-50%); box-shadow: 0 12px 30px -10px rgba(209, 163, 38, 0.55), 0 0 0 4px rgba(209, 163, 38, 0.18); }
.oc-pancarte i { width: 8px; height: 8px; border-radius: 50%; background: #111; animation: oc-pouls 1.4s ease infinite; }
.oc-atelier.est-demo:not(.est-en-main) .oc-pancarte { display: inline-flex; }
.oc-atelier.est-demo:not(.est-en-main) .oc-palette { visibility: hidden; }
.oc-curseur { position: absolute; left: 0; top: 0; z-index: 7; display: flex; align-items: flex-start; pointer-events: none; opacity: 0; transition: opacity 400ms ease; will-change: transform; }
.oc-atelier.est-demo:not(.est-en-main) .oc-curseur { opacity: 1; }
.oc .oc-curseur svg { width: 20px; height: 20px; fill: var(--oc-or); stroke: #111; stroke-width: 1; }
.oc-curseur > span { margin: 15px 0 0 -2px; padding: 2px 7px; border-radius: 4px 10px 10px 10px; background: var(--oc-or); color: #111; font-size: 11px; font-weight: 600; }
.oc-curseur.est-clic svg { animation: oc-clic 300ms ease; }
@keyframes oc-clic { 50% { transform: scale(0.8); } }

@media (max-width: 1240px) {
  .oc-etat-option { display: none !important; }
  .oc-palette { display: none; }
}
@media (max-width: 1100px) {
  .oc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "barre barre" "editeur apercu" "etat etat"; }
  .oc-cote, .oc-activite { display: none; }
  .oc-code-zone { grid-template-columns: minmax(0, 1fr); }
  .oc-minimap { display: none; }
}
@media (max-width: 760px) {
  .oc { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 440px minmax(0, 1fr) 24px; grid-template-areas: "barre" "editeur" "apercu" "etat"; }
  .oc-barre { flex-wrap: wrap; gap: 10px; padding: 10px 12px; }
  .oc-branche, .oc-ariane { display: none; }
  .oc-editeur { grid-template-rows: 36px minmax(0, 1fr) 140px; border-right: 0; border-bottom: 1px solid var(--oc-trait); }
  .oc-onglets button { padding: 0 9px; gap: 5px; }
  .oc-onglets .oc-ic-ts { display: none; }
  .oc-code { font-size: 10.5px; }
  .oc-ligne { grid-template-columns: 30px minmax(0, 1fr); }
  .oc-ligne > b { padding-right: 9px; }
  .oc-ligne.est-modifiee::before { left: 24px; }
  .oc-jeton[data-info]::before { display: none; }
  .oc-apercu { padding: 14px 12px 70px; }
  .oc-recette { right: 12px; left: 12px; bottom: 72px; }
  .oc-anneaux { justify-content: space-between; }
  .oc-pancarte { top: auto; bottom: 36px; font-size: 11px; }
  .oc-etat > span:not(.oc-etat-branche):not(.oc-etat-diag):not(.oc-etat-env) { display: none; }
  .oc-etat-env { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .oc *, .oc *::after { animation: none !important; transition: none !important; }
}

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

/* Les noms qui défilent dans une case (scène 4 et tuile des
   intégrations) : des exemples, jamais une liste imposée. */
.oc-defile { display: block; height: 24px; overflow: hidden; }
.oc-defile > span { display: grid; animation: oc-defile-noms 8s ease-in-out var(--d, 0s) infinite; }
.oc-defile > span > span { display: flex; align-items: center; gap: 6px; height: 24px; white-space: nowrap; }
.oc-defile--fixe > span { animation: none; }
@keyframes oc-defile-noms {
  0%, 19% { transform: translateY(0); }
  25%, 44% { transform: translateY(-24px); }
  50%, 69% { transform: translateY(-48px); }
  75%, 94% { transform: translateY(-72px); }
  100% { transform: translateY(-96px); }
}

/* 1 · Le cadrage : le brief, puis la stack choisie couche par couche */
.oc-scene--1 { gap: 12px; padding-bottom: 36px; }
.oc-brief { display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; background: #fff; color: #141414; }
.oc-brief small { color: #6B6B6B; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.oc-brief-puces { display: flex; flex-wrap: wrap; gap: 6px; }
.oc-brief-puces span { padding: 4px 10px; border-radius: 99px; background: #F4EEDC; color: #3A3220; font-size: 11.5px; font-weight: 500; }
.oc-pile { display: grid; gap: 6px; }
.oc-pile-couche { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 10px; padding: 7px 10px; border-radius: 11px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.oc-pile-couche > small { color: var(--sur-noir-2); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.oc-options { display: flex; gap: 6px; overflow: hidden; }
.oc-options > * { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 4px 10px; border-radius: 99px; color: rgba(255, 255, 255, 0.42); font-size: 11.5px; white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.oc-options b { background: var(--or); color: #111; font-weight: 600; box-shadow: 0 6px 16px -8px rgba(209, 163, 38, 0.8); }
.oc-options img { width: 14px; height: 14px; }
.oc-decision { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.oc-decision > span { display: grid; gap: 2px; padding: 10px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.oc-decision > span:first-child { background: rgba(209, 163, 38, 0.14); box-shadow: inset 0 0 0 1px rgba(209, 163, 38, 0.45); }
.oc-decision small { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; }
.oc-decision b { font-size: 16px; }
.oc-decision > span:first-child b { color: var(--or); }
@keyframes oc-choisi { from { background: transparent; color: rgba(255, 255, 255, 0.42); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } }
[data-courant="1"] .oc-brief-puces span { animation: oc-pop 350ms cubic-bezier(0.3, 1.6, 0.5, 1) backwards; }
[data-courant="1"] .oc-brief-puces span:nth-child(2) { animation-delay: 90ms; } [data-courant="1"] .oc-brief-puces span:nth-child(3) { animation-delay: 180ms; } [data-courant="1"] .oc-brief-puces span:nth-child(4) { animation-delay: 270ms; }
[data-courant="1"] .oc-pile-couche { animation: oc-glisse 450ms var(--ressort) calc(300ms + var(--i) * 120ms) backwards; }
[data-courant="1"] .oc-options b { animation: oc-choisi 500ms ease calc(900ms + var(--i) * 260ms) backwards; }
[data-courant="1"] .oc-decision > span { animation: oc-glisse 500ms var(--ressort) 2000ms backwards; }
[data-courant="1"] .oc-decision > span:nth-child(2) { animation-delay: 2150ms; }

/* 2 · Le développement : la semaine, la demande de fusion, la validation */
.oc-sprint { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.oc-sprint::before { content: ''; position: absolute; left: 6px; right: 12%; top: 5px; height: 2px; background: linear-gradient(90deg, var(--or) 62%, rgba(255, 255, 255, 0.12) 62%); }
.oc-sprint > span { position: relative; display: grid; gap: 2px; justify-items: start; }
.oc-sprint i { width: 12px; height: 12px; margin-bottom: 6px; border-radius: 50%; background: #111; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25); }
.oc-sprint .est-fait i { background: var(--or); box-shadow: none; }
.oc-sprint .est-cours i { background: #111; box-shadow: inset 0 0 0 2px var(--or), 0 0 0 5px rgba(209, 163, 38, 0.2); animation: oc-pouls 1.6s ease infinite; }
.oc-sprint b { color: var(--or); font-size: 11.5px; }
.oc-sprint small { color: var(--sur-noir-2); font-size: 11px; line-height: 1.25; }
.oc-sprint > span:not(.est-fait):not(.est-cours) :is(b, small) { opacity: 0.5; }
.oc-pr { display: grid; gap: 10px; padding: 14px; border-radius: 14px; background: #161616; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 24px 40px -24px rgba(0, 0, 0, 0.8); }
.oc-pr-tete { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.oc-pr-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(139, 92, 246, 0.2); color: #C4B5FD; }
.oc-pr-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.oc-pr-tete > span:nth-child(2) { display: grid; min-width: 0; }
.oc-pr-tete b { font-size: 13.5px; font-weight: 600; }
.oc-pr-tete small { color: var(--sur-noir-2); font-size: 11px; }
.oc-pr-etat { padding: 3px 10px; border-radius: 99px; background: rgba(61, 220, 132, 0.15); color: #7FD49B; font-size: 11px; font-weight: 600; }
.oc-pr-controles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.oc-pr-controles > span { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px; background: rgba(255, 255, 255, 0.04); color: var(--sur-noir-2); font-size: 12px; }
.oc-pr-controles i { flex: none; width: 15px; height: 15px; 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 8.5 2.5 2.5L12 5' fill='none' stroke='%23111' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.oc-pr-controles b { margin-left: auto; color: #fff; font: 600 11.5px ui-monospace, 'SF Mono', Menlo, monospace; }
.oc-pr-poids { grid-column: 1 / -1; }
.oc-pr-poids u { order: 2; flex: 1; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.oc-pr-poids u s { display: block; width: 56%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3DDC84, var(--or)); transform-origin: left; }
.oc-pr-poids b { order: 3; margin-left: 0; }
.oc-pr-apercu { display: flex; align-items: center; gap: 7px; color: #9CDCFE; font: 11.5px ui-monospace, 'SF Mono', Menlo, monospace; }
.oc-pr-apercu svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.oc-avis { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: #fff; color: #141414; font-size: 12px; }
.oc-avis-av { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #EEF3F1; }
.oc-avis-av svg { width: 14px; height: 18px; }
.oc-avis > span:nth-child(2) { flex: 1; min-width: 0; }
.oc-avis-ok { padding: 3px 10px; border-radius: 99px; background: #17322E; color: #fff; font-size: 11px; font-weight: 600; }
[data-courant="2"] .oc-sprint > span { animation: oc-glisse 400ms var(--ressort) backwards; }
[data-courant="2"] .oc-sprint > span:nth-child(2) { animation-delay: 100ms; } [data-courant="2"] .oc-sprint > span:nth-child(3) { animation-delay: 200ms; } [data-courant="2"] .oc-sprint > span:nth-child(4) { animation-delay: 300ms; }
[data-courant="2"] .oc-pr { animation: oc-glisse 500ms var(--ressort) 350ms backwards; }
[data-courant="2"] .oc-pr-controles i { animation: oc-pop 380ms cubic-bezier(0.3, 1.6, 0.5, 1) 800ms backwards; }
[data-courant="2"] .oc-pr-controles > span:nth-child(2) i { animation-delay: 950ms; } [data-courant="2"] .oc-pr-controles > span:nth-child(3) i { animation-delay: 1100ms; } [data-courant="2"] .oc-pr-controles > span:nth-child(4) i { animation-delay: 1250ms; } [data-courant="2"] .oc-pr-controles > span:nth-child(5) i { animation-delay: 1400ms; }
[data-courant="2"] .oc-pr-poids u s { animation: oc-jauge 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 1400ms backwards; }
[data-courant="2"] .oc-pr-etat { animation: oc-pop 400ms cubic-bezier(0.3, 1.6, 0.5, 1) 1500ms backwards; }
[data-courant="2"] .oc-avis { animation: oc-glisse 500ms var(--ressort) 1900ms backwards; }

/* 3 · La recette */
.oc-recette-scene { display: grid; grid-template-columns: minmax(0, 1fr) 128px; align-items: center; gap: 18px; }
.oc-grille-recette { display: grid; grid-template-columns: 76px repeat(4, minmax(0, 1fr)); gap: 6px; font-size: 11px; }
.oc-grille-recette > span { display: flex; align-items: center; color: var(--sur-noir-2); }
.oc-grille-recette > span:nth-child(-n+5) { justify-content: center; font-weight: 600; color: var(--sur-noir); }
.oc-grille-recette i { height: 38px; border-radius: 8px; background: rgba(61, 220, 132, 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8.5 2.5 2.5L12 5' fill='none' stroke='%233DDC84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; box-shadow: inset 0 0 0 1px rgba(61, 220, 132, 0.3); }
.oc-grille-recette i.est-vide { background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.oc-score { position: relative; display: grid; justify-items: center; gap: 2px; text-align: center; }
.oc-score svg { width: 110px; height: 110px; transform: rotate(-90deg); }
.oc-score-fond { fill: rgba(61, 220, 132, 0.1); stroke: rgba(61, 220, 132, 0.18); stroke-width: 4; }
.oc-score-anneau { fill: none; stroke: #3DDC84; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 99 100; }
.oc-score > b { position: absolute; top: 34px; color: #3DDC84; font-size: 32px; font-weight: 700; line-height: 1; }
.oc-score small { font-size: 12px; font-weight: 600; }
.oc-score > span { color: var(--sur-noir-2); font-size: 11px; }
[data-courant="3"] .oc-grille-recette i { animation: oc-pop 350ms cubic-bezier(0.3, 1.6, 0.5, 1) backwards; }
[data-courant="3"] .oc-grille-recette i:nth-of-type(4n+2) { animation-delay: 80ms; } [data-courant="3"] .oc-grille-recette i:nth-of-type(4n+3) { animation-delay: 160ms; } [data-courant="3"] .oc-grille-recette i:nth-of-type(4n) { animation-delay: 240ms; }
[data-courant="3"] .oc-score-anneau { animation: oc-anneau 1400ms cubic-bezier(0.2, 0.8, 0.2, 1) 500ms backwards; }

/* 3 bis · Les contrôles de la recette */
.oc-controles { display: flex; flex-wrap: wrap; gap: 6px; }
.oc-controles span { padding: 4px 10px 4px 8px; border-radius: 99px; background: rgba(61, 220, 132, 0.1); color: #9FE8BE; font-size: 11px; }
.oc-controles span::before { content: '✓ '; font-weight: 700; }
[data-courant="3"] .oc-controles span { animation: oc-pop 350ms cubic-bezier(0.3, 1.6, 0.5, 1) 900ms backwards; }
[data-courant="3"] .oc-controles span:nth-child(2) { animation-delay: 980ms; } [data-courant="3"] .oc-controles span:nth-child(3) { animation-delay: 1060ms; } [data-courant="3"] .oc-controles span:nth-child(4) { animation-delay: 1140ms; } [data-courant="3"] .oc-controles span:nth-child(5) { animation-delay: 1220ms; } [data-courant="3"] .oc-controles span:nth-child(6) { animation-delay: 1300ms; }

/* 4 · La passation : vos outils, vos comptes */
.oc-surmesure { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 11px; background: rgba(209, 163, 38, 0.12); box-shadow: inset 0 0 0 1px rgba(209, 163, 38, 0.4); color: var(--sur-noir); font-size: 12px; line-height: 1.35; }
.oc-surmesure b { flex: none; padding: 3px 9px; border-radius: 99px; background: var(--or); color: #111; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.oc-passation { display: grid; gap: 6px; }
.oc-transfert { display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 7px 12px; border-radius: 11px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.oc-transfert-cat { color: var(--sur-noir-2); font-size: 12px; }
.oc-transfert .oc-defile { padding: 0 10px; border-radius: 7px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 2px 0 0 var(--or); }
.oc-transfert .oc-defile > span > span { color: #fff; font-size: 13px; font-weight: 600; }
.oc-transfert em { padding: 3px 10px; border-radius: 99px; background: rgba(209, 163, 38, 0.16); color: #E6BA42; font-style: normal; font-size: 11px; font-weight: 600; white-space: nowrap; }
.oc-transfert--doc em { background: var(--or); color: #111; }
.oc-scene--4 .oc-defile > span { animation-play-state: paused; }
[data-courant="4"] .oc-scene--4 .oc-defile > span { animation-play-state: running; }
[data-courant="4"] .oc-surmesure { animation: oc-glisse 450ms var(--ressort) backwards; }
[data-courant="4"] .oc-transfert { animation: oc-glisse 450ms var(--ressort) backwards; }
[data-courant="4"] .oc-transfert:nth-child(1) { animation-delay: 150ms; } [data-courant="4"] .oc-transfert:nth-child(2) { animation-delay: 250ms; } [data-courant="4"] .oc-transfert:nth-child(3) { animation-delay: 350ms; } [data-courant="4"] .oc-transfert:nth-child(4) { animation-delay: 450ms; } [data-courant="4"] .oc-transfert:nth-child(5) { animation-delay: 550ms; } [data-courant="4"] .oc-transfert:nth-child(6) { animation-delay: 650ms; }
[data-courant="4"] .oc-transfert em { animation: oc-pop 400ms cubic-bezier(0.3, 1.6, 0.5, 1) 1000ms backwards; }
@media (prefers-reduced-motion: reduce) {
  .oc-scene, .oc-scene * { animation: none !important; }
}

/* ═══ LES LIVRABLES : six tuiles, calmes ═══
   Version resserrée du 11/10 : 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 :
   l'inspecteur doré (offre-dev.css). */
.oc-livrables-lead { max-width: 46ch; margin: var(--e4) 0 var(--e7); }
.oc-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; }
.oc-bento > .od-tuile { grid-area: auto; }
.oc-bento .od-poignees { display: none; }
.oc-bento .od-tuile { isolation: isolate; }
.oc-bento .od-tuile:hover { border-color: rgba(209, 163, 38, 0.55); }
.oc-bento .od-tuile-vue { height: 230px; }
.oc-bento img { display: block; }
.oc-bento .od-tuile-texte { gap: 8px; }
.oc-bento .livrable-quoi { max-width: 34ch; }

/* 01 · Site, application ou SaaS : un écran et un téléphone */
.oc-appareils-vue { position: absolute; inset: 0; }
.oc-av-bureau { position: absolute; left: 22px; right: 70px; top: 26px; bottom: 26px; display: grid; grid-template-rows: 18px minmax(0, 1fr); overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.9); }
.oc-av-barre { display: flex; align-items: center; gap: 4px; padding: 0 8px; background: #EEF0F2; }
.oc-av-barre i { width: 6px; height: 6px; border-radius: 50%; background: #C9CDD2; }
.oc-av-bureau img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.oc-av-tel { position: absolute; right: 24px; bottom: 18px; width: 78px; height: 150px; overflow: hidden; border: 4px solid #1C1C1E; border-radius: 16px; background: #1C1C1E; box-shadow: 0 20px 36px -16px rgba(0, 0, 0, 0.9); transition: transform 500ms var(--ressort); }
.oc-av-tel img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.oc-tuile--site:hover .oc-av-tel { transform: translateY(-6px); }

/* 02 · L'interface : un composant, ses états, ses mesures */
.oc-composant { position: absolute; inset: 0; display: grid; align-content: center; gap: 14px; padding: 22px; }
.oc-composant-code { justify-self: start; padding: 7px 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); color: #D4D4D4; font: 12px ui-monospace, 'SF Mono', Menlo, monospace; }
.oc-composant-code b { color: #4EC9B0; font-weight: 400; } .oc-composant-code em { color: #CE9178; font-style: normal; }
.oc-composant-etats { display: flex; gap: 12px; }
.oc-btn { padding: 9px 20px; border-radius: 99px; background: #A84E2E; color: #fff; font-size: 13px; font-weight: 600; transition: transform 300ms var(--ressort); }
.oc-btn.est-focus { box-shadow: 0 0 0 3px #0E0E0E, 0 0 0 5px #F2D27A; }
.oc-composant-mesures { display: flex; flex-wrap: wrap; gap: 14px; color: var(--sur-noir-2); font-size: 12px; }
.oc-composant-mesures span { display: inline-flex; align-items: center; gap: 6px; }
.oc-composant-mesures i { width: 7px; height: 7px; border-radius: 50%; background: #3DDC84; }
.oc-tuile--ui:hover .oc-btn:first-child { transform: translateY(-2px); }

/* 03 · Les contenus : un champ, la page qui suit */
.oc-cms { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: 12px; padding: 18px; }
.oc-cms-studio { display: grid; align-content: center; gap: 12px; padding: 14px; border-radius: 12px; background: #fff; color: #141414; font-size: 12px; }
.oc-cms-champ { display: grid; gap: 5px; }
.oc-cms-champ small { color: #6B6B6B; font-size: 10.5px; }
.oc-cms-saisie { padding: 8px 10px; border-radius: 7px; box-shadow: inset 0 0 0 1.5px var(--or); line-height: 1.35; }
.oc-cms-publier { justify-self: start; padding: 6px 14px; border-radius: 7px; background: #17322E; color: #fff; font-weight: 600; }
.oc-cms-page { position: relative; overflow: hidden; border-radius: 12px; }
.oc-cms-page img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms ease; }
.oc-cms-page b { position: absolute; left: 10px; right: 10px; bottom: 10px; color: #fff; font: italic 500 15px/1.15 'Fraunces', Georgia, serif; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }
.oc-tuile--cms:hover .oc-cms-page img { transform: scale(1.05); }

/* 04 · Paiement et réservation */
.oc-paiement { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: center; align-items: start; gap: 12px; padding: 18px; }
.oc-panier { grid-row: 1 / 3; display: grid; gap: 8px; padding: 8px; border-radius: 12px; background: #fff; color: #141414; }
.oc-panier img { width: 100%; height: 118px; object-fit: cover; border-radius: 8px; }
.oc-panier > span { display: grid; padding: 0 4px 2px; }
.oc-panier b { font: 500 14px/1.2 'Fraunces', Georgia, serif; }
.oc-panier small { color: #6B6B6B; font-size: 11px; }
.oc-carte-bancaire { display: grid; align-content: space-between; height: 92px; padding: 12px 14px; border-radius: 12px; background: linear-gradient(135deg, #17322E, #1F6F78); color: #fff; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.8); transition: transform 500ms var(--ressort); }
.oc-cb-puce { width: 26px; height: 19px; border-radius: 4px; background: linear-gradient(135deg, #F2D27A, #B8891C); }
.oc-cb-num { font: 13px ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: 0.06em; }
.oc-paye { display: grid; place-items: center; height: 38px; border-radius: 10px; background: #1E7A4C; color: #fff; font-size: 12.5px; font-weight: 600; }
.oc-tuile--shop:hover .oc-carte-bancaire { transform: rotate(-3deg) translateY(-3px); }

/* 05 · Vos outils, connectés : quatre familles autour du site */
.oc-outils { position: absolute; inset: 0; }
.oc-outils-fils { position: absolute; inset: 0; width: 100%; height: 100%; }
.oc-outils-fils path { fill: none; stroke: rgba(209, 163, 38, 0.5); stroke-width: 1.5; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; }
.oc-outils-centre { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 17px; background: #EEF3F1; transform: translate(-50%, -50%); box-shadow: 0 0 0 6px rgba(209, 163, 38, 0.15); }
.oc-outils-centre svg { width: 22px; height: 28px; }
.oc-outil { position: absolute; left: var(--x); top: var(--y); width: max-content; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 9px; border-radius: 10px; background: #fff; color: #141414; font-size: 12px; font-weight: 600; white-space: nowrap; transform: translate(-50%, -50%); box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.8); transition: transform 400ms var(--ressort); }
.oc-outil svg { flex: none; width: 16px; height: 16px; fill: none; stroke: #8A6A12; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.oc-tuile--outils:hover .oc-outil { transform: translate(-50%, -50%) scale(1.06); }

/* 06 · Mise en ligne et passation */
.oc-deploiements { position: absolute; inset: 18px; display: grid; align-content: center; gap: 8px; }
.oc-dep { display: grid; grid-template-columns: 10px 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); transition: transform 400ms var(--ressort); }
.oc-dep i { width: 9px; height: 9px; border-radius: 50%; background: #3DDC84; }
.oc-dep > span { display: grid; min-width: 0; }
.oc-dep b { font-size: 12.5px; font-weight: 500; }
.oc-dep small { overflow: hidden; color: var(--sur-noir-2); font: 10.5px ui-monospace, 'SF Mono', Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }
.oc-dep em { color: #7FD49B; font-style: normal; font-size: 11px; font-weight: 600; }
.oc-dep.est-nom { box-shadow: inset 0 0 0 1px rgba(209, 163, 38, 0.55); }
.oc-dep.est-nom i { background: var(--or); }
.oc-dep.est-nom em { color: var(--or); }
.oc-tuile--host:hover .oc-dep.est-nom { transform: translateX(4px); }

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

/* ═══ LE CAS · SUBLIMEX ═══
   L'aperçu fait 4,349 largeurs ; la fenêtre en montre 0,625 : le
   défilement va jusqu'à −85,6 %. */
.oc-cas .od-cas-defile { animation-name: oc-defile-sx; }
@keyframes oc-defile-sx {
  0%, 10% { transform: translateY(0); }
  90%, 100% { transform: translateY(-85.6%); }
}

/* 4 · La passation : chaque nom qui défile a son logo devant lui. */
.oc-pastille { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 5px; background: #fff; }
.oc .oc-pastille img, .oc-pastille img { width: 13px; height: 13px; }
.oc-pastille--generique { background: rgba(209, 163, 38, 0.18); box-shadow: inset 0 0 0 1px rgba(209, 163, 38, 0.5); color: var(--or); }
.oc-pastille--generique svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.oc-pastille--fr { background: var(--or); color: #111; font-size: 8.5px; font-weight: 700; letter-spacing: 0.02em; }
.oc-transfert .oc-defile > span > span { gap: 8px; }