.sem-recit {
    color-scheme: light;
    --or: #B9870B; --or-clair: #D6A839; --or-pale: #FFE3A0; --bronze: #A25F02;
    --sapin: #3B675C; --encre: #002D35; --nuit: #0D4A52; --charbon: #303237;
    --creme: #FBF6EB; --blanc: #FFFDF8; --sourd: #56656A;
    --titre: 'Bricolage Grotesque', 'Avenir Next', system-ui, sans-serif;
    --texte: 'Karla', 'Helvetica Neue', system-ui, sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
    --rayon: 24px;
  }
.sem-recit { background: var(--blanc); scroll-behavior: auto; }
.sem-recit { margin: 0; background: var(--blanc); color: var(--encre); font-family: var(--texte); font-size: 16px; -webkit-font-smoothing: antialiased; }
.sem-recit h1, .sem-recit h2, .sem-recit h3 { font-family: var(--titre); font-weight: 700; letter-spacing: -.012em; text-wrap: balance; margin: 0; }
.sem-recit p { margin: 0; line-height: 1.58; }
.sem-recit a { color: inherit; }
.sem-recit button { font: inherit; }
.sem-recit .mono { font-family: var(--mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; }
.sem-recit .tuile {
    position: relative; isolation: isolate; overflow: hidden;
    border-radius: var(--rayon);
    background: rgba(255, 253, 247, .80);
    border: 1px solid rgba(185, 135, 11, .24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 22px 60px -30px rgba(0, 45, 53, .45);
    -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25);
    color: var(--encre);
    transition: transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s, background .6s, border-color .6s, color .6s;
  }
.sem-recit .tuile.nuit {
    background: rgba(3, 27, 31, .58);
    border-color: rgba(226, 194, 110, .26);
    box-shadow: inset 0 1px 0 rgba(255,236,190,.10), 0 22px 60px -30px rgba(0, 0, 0, .7);
    color: #F4EFE2;
  }
.sem-recit .tuile::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; z-index: 2; pointer-events: none;
    background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 217, 138, 1), rgba(214, 168, 57, .5) 35%, transparent 65%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity: 0; transition: opacity .45s;
  }
.sem-recit .tuile::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 227, 160, .22), transparent 60%);
    opacity: 0; transition: opacity .45s;
  }
.sem-recit .tuile.vivante:hover::before, .sem-recit .tuile.vivante:hover::after, .sem-recit .tuile.vivante:focus-within::before { opacity: 1; }
.sem-recit .tuile.vivante:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 30px 70px -30px rgba(0, 45, 53, .5); }
.sem-recit .tuile.nuit.vivante:hover { box-shadow: inset 0 1px 0 rgba(255,236,190,.12), 0 30px 70px -26px rgba(0, 0, 0, .8); }
.sem-recit .ride {
    position: absolute; z-index: 1; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
    border: 1.5px solid rgba(214, 168, 57, .85); pointer-events: none;
    transform: scale(0); opacity: .55;
    animation: ride 2.4s cubic-bezier(.33,.7,.3,1) forwards;
  }
.sem-recit .tuile.nuit .ride { border-color: rgba(255, 217, 138, .9); }
.sem-recit .ride.fige { border-width: 2px; border-color: rgba(255, 227, 160, 1); box-shadow: 0 0 18px rgba(255, 217, 138, .6); }
@keyframes ride { to { transform: scale(var(--portee, 30)); opacity: 0; } }
.sem-recit .bouton {
    display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; cursor: pointer;
    border-radius: 999px; padding: .72rem 1.25rem; border: 1px solid var(--or);
    background: linear-gradient(180deg, #E2B64A, #C8961B); color: #1F1604; font-weight: 700; font-size: .95rem;
    box-shadow: 0 10px 26px -14px rgba(185, 135, 11, .9), inset 0 1px 0 rgba(255,255,255,.35);
    transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s;
  }
.sem-recit .bouton:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -14px rgba(185, 135, 11, 1), inset 0 1px 0 rgba(255,255,255,.45); }
.sem-recit .bouton.discret { background: transparent; color: inherit; box-shadow: none; border-color: rgba(185, 135, 11, .55); }
.sem-recit :focus-visible { outline: 2px solid var(--or-clair); outline-offset: 3px; }
@media (max-width: 980px) {

}
@media (max-width: 480px) {

}
.sem-recit #recit { position: relative; height: 2600vh; }
.sem-recit .scene { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; background: #02090B; }
.sem-recit .couche { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform, opacity; opacity: 0; user-select: none; pointer-events: none; max-width: none; }
.sem-recit .couche.sombre-base { filter: brightness(.26) saturate(.6); }
.sem-recit #voile { position: absolute; inset: 0; background: #02090B; opacity: 0; pointer-events: none; }
.sem-recit #lumiere { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sem-recit #gl { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sem-recit svg .sc-disque, .sem-recit svg .sc-moyen, .sem-recit svg .sc-grand, .sem-recit svg .sc-ride, .sem-recit svg .sc-fige, .sem-recit svg .sc-lueur { transform-box: fill-box; transform-origin: center; }
.sem-recit .texte { position: absolute; z-index: 5; width: min(500px, calc(100vw - 32px)); padding: 30px 32px 28px; display: grid; gap: 14px; opacity: 0; visibility: hidden; }
.sem-recit .texte h1 { font-size: clamp(1.75rem, 3.1vw, 2.85rem); line-height: 1.07; }
.sem-recit .texte h2 { font-size: clamp(1.55rem, 2.6vw, 2.35rem); line-height: 1.1; }
.sem-recit .texte p { font-size: 1.04rem; color: inherit; opacity: .86; max-width: 60ch; }
.sem-recit .texte .mono { color: var(--or); }
.sem-recit .texte .bouton { justify-self: start; margin-top: 4px; }
.sem-recit .tuile.nuit .bouton.discret { color: #FFE3A0; border-color: rgba(226, 194, 110, .6); }
.sem-recit .tuile.nuit .mono { color: #E8C670; }
.sem-recit .texte .aide { display: flex; align-items: center; gap: 10px; margin-top: 4px; opacity: .75; }
.sem-recit .texte .aide i { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--or-clair); position: relative; }
.sem-recit .texte .aide i::after { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; border: 1.5px solid var(--or-clair); animation: aide 2.2s cubic-bezier(.52,.6,.25,.99) infinite; }
@keyframes aide { to { transform: scale(2.4); opacity: 0; } }
.sem-recit .texte.libre { padding: 0; background: none; border: 0; box-shadow: none; overflow: visible; }
.sem-recit .texte.libre .mono { color: var(--or-clair); text-shadow: 0 0 18px rgba(0,0,0,.5); }
.sem-recit .pos-bas-centre { left: 50%; bottom: 6vh; translate: -50% 0; width: min(720px, calc(100vw - 32px)); text-align: center; justify-items: center; }
.sem-recit .pos-bas-centre h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.08; }
.sem-recit .pos-bas-centre p { font-size: 1.06rem; opacity: .95; }
.sem-recit .pos-bas-gauche { left: max(16px, 5vw); bottom: 7vh; }
.sem-recit .texte .phrase-seule { text-wrap: balance; max-width: none; }
.sem-recit .texte .phrase-seule { font-family: var(--titre); font-weight: 500; font-size: clamp(1.15rem, 1.6vw, 1.38rem); line-height: 1.4; opacity: 1; }
.sem-recit .pos-haut-centre { left: 50%; top: 96px; translate: -50% 0; width: min(720px, calc(100vw - 32px)); text-align: center; justify-items: center; }
.sem-recit .pos-haut-centre h2 { font-size: clamp(1.7rem, 3.2vw, 2.7rem); line-height: 1.08; }
.sem-recit .pos-haut-centre p { font-size: 1.08rem; opacity: .95; }
.sem-recit .tuile.nuit.voilee { background: rgba(3, 27, 31, .46); -webkit-backdrop-filter: blur(10px) saturate(1.15); backdrop-filter: blur(10px) saturate(1.15); }
.sem-recit .pos-haut-milieu { left: 50%; top: 104px; translate: -50% 0; width: min(900px, calc(100vw - 32px)); text-align: center; justify-items: center; gap: 10px; }
.sem-recit .pos-haut-milieu h2 { font-size: clamp(2rem, 4.4vw, 3.9rem); line-height: 1.04; }
.sem-recit .pos-bas-milieu { left: 50%; bottom: 6vh; translate: -50% 0; width: min(640px, calc(100vw - 32px)); text-align: center; }
.sem-recit .pos-bas-milieu p { font-size: clamp(1.02rem, 1.35vw, 1.2rem); color: #F7F2E4; opacity: 1; text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 26px rgba(0,25,20,.75); }
.sem-recit .pos-gauche { left: max(16px, 5vw); top: 50%; translate: 0 -50%; }
@media (min-width: 761px) {
.sem-recit .texte.etroite { width: 420px; left: max(16px, 3.5vw); }
.sem-recit .texte.etroite h1 { font-size: clamp(1.6rem, 2.5vw, 2.35rem); }
}
.sem-recit .pos-droite { right: max(16px, 5vw); top: 50%; translate: 0 -50%; }
.sem-recit .pos-gauche-bas { left: max(16px, 5vw); bottom: 7vh; }
.sem-recit .pos-gauche-haut { left: max(16px, 5vw); top: 108px; }
.sem-recit .pos-centre-haut { left: 50%; top: 100px; translate: -50% 0; width: min(620px, calc(100vw - 32px)); text-align: center; justify-items: center; }
.sem-recit .pos-centre-bas { left: 50%; bottom: 12vh; translate: -50% 0; width: min(460px, calc(100vw - 32px)); text-align: center; justify-items: center; padding: 20px 26px; }
.sem-recit .pos-centre-bas p { font-size: 1.12rem; opacity: .95; }
.sem-recit .etiquette { position: absolute; left: 0; top: 0; z-index: 4; padding: 9px 14px 9px 12px; border-radius: 999px; display: flex; align-items: center; gap: 10px; white-space: nowrap; opacity: 0; visibility: hidden; font-size: .9rem; }
.sem-recit .etiquette b { font-family: var(--titre); font-weight: 700; font-size: .98rem; }
.sem-recit .etiquette small { opacity: .72; font-size: .82rem; }
.sem-recit .etiquette.tuile, .sem-recit .etiquette.mot { background: rgba(3, 27, 31, .3); border: 1px solid rgba(226, 194, 110, .22); color: #F4EFE2; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: none; padding: 7px 14px 7px 11px; }
.sem-recit .etiquette.mot { position: absolute; left: 0; top: 0; z-index: 4; border-radius: 999px; display: flex; align-items: center; gap: 10px; white-space: nowrap; opacity: 0; visibility: hidden; font-size: .9rem; }
.sem-recit .etiquette.mot.sombre { background: rgba(20, 16, 12, .38); border-color: rgba(160, 120, 70, .3); }
.sem-recit .etiquette.index { background: rgba(255, 253, 247, .32); color: var(--encre); border-color: rgba(185, 135, 11, .3); }
.sem-recit .sem-i { font-family: 'Material Symbols Rounded'; font-weight: 400; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.sem-recit .etiquette.index { padding: 10px 18px 10px 14px; gap: 12px; }
.sem-recit .etiquette.index .sem-i { font-size: 2.1rem; color: var(--or); text-shadow: 0 0 18px rgba(255, 214, 120, .9); }
.sem-recit .etiquette .point { width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--or-clair)); box-shadow: 0 0 12px var(--c, var(--or-clair)); flex: none; }
.sem-recit .bourgeon {
    position: absolute; left: 0; top: 0; z-index: 6; border: 0; background: none; padding: 0; cursor: pointer; color: var(--encre);
    display: grid; justify-items: center; gap: 7px; opacity: 0; visibility: hidden; width: 140px; margin-left: -70px; margin-top: -32px;
  }
.sem-recit .bourgeon .coeur {
    width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; position: relative;
    background: center / contain no-repeat;
    font-family: var(--titre); font-weight: 700; font-size: .78rem; color: var(--encre);
    filter: drop-shadow(0 0 10px rgba(255, 214, 120, .55));
    transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .5s;
  }
.sem-recit .bourgeon.a-naitre .coeur::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid var(--c); opacity: .55; animation: pouls 3.2s cubic-bezier(.52,.6,.25,.99) infinite; animation-delay: var(--d, 0s); }
@keyframes pouls { 0% { transform: scale(.85); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }
.sem-recit .bourgeon .nom { font-family: var(--titre); font-weight: 700; font-size: .86rem; padding: 3px 10px; border-radius: 999px; background: rgba(255, 253, 247, .94); border: 1px solid rgba(185, 135, 11, .2); }
.sem-recit .bourgeon:hover .coeur, .sem-recit .bourgeon:focus-visible .coeur, .sem-recit .bourgeon[aria-expanded="true"] .coeur { transform: scale(1.22); filter: drop-shadow(0 0 16px rgba(255, 214, 120, .9)); }
.sem-recit .bourgeon.a-naitre .coeur { width: 40px; height: 40px; background: rgba(255, 253, 247, .55); border: 1.5px dashed var(--c); color: var(--bronze); font-size: 1.1rem; }
.sem-recit .bourgeon.a-naitre .nom { font-weight: 500; font-family: var(--texte); font-style: italic; }
.sem-recit .bulle { position: absolute; z-index: 8; left: 0; top: 0; width: min(330px, calc(100vw - 32px)); padding: 20px 22px 18px; display: grid; gap: 10px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .35s, transform .45s cubic-bezier(.2,.7,.2,1), visibility 0s linear .35s; }
.sem-recit .bulle.ouverte { opacity: 1; visibility: visible; transform: none; transition: opacity .35s, transform .45s cubic-bezier(.2,.7,.2,1); }
.sem-recit .bulle h3 { font-size: 1.35rem; }
.sem-recit .bulle .ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sem-recit .bulle .puce { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--c) 14%, transparent); color: color-mix(in srgb, var(--c) 60%, #002D35); }
.sem-recit .bulle .puce::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.sem-recit .bulle .lieu { font-size: .85rem; color: var(--sourd); }
.sem-recit .bulle p { font-size: .96rem; }
.sem-recit .bulle .fermer { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(0,45,53,.06); cursor: pointer; color: var(--encre); font-size: 1rem; line-height: 1; }
.sem-recit .fil { position: absolute; z-index: 7; right: max(14px, 2.2vw); top: 50%; translate: 0 -50%; display: grid; gap: 0; justify-items: end; }
.sem-recit .fil button { position: relative; display: flex; align-items: center; gap: 12px; border: 0; background: none; color: inherit; cursor: pointer; padding: 9px 0; }
.sem-recit .fil button i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid currentColor; opacity: .5; background: transparent; transition: all .4s; }
.sem-recit .fil button span { display: none !important; font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; opacity: 0; transform: translateX(6px); transition: opacity .35s, transform .35s; }
.sem-recit .fil button:hover span, .sem-recit .fil button.actif span { opacity: .9; transform: none; }
.sem-recit .fil button.actif i { opacity: 1; border-color: var(--or-clair); background: var(--or-pale); box-shadow: 0 0 12px rgba(255, 217, 138, .9); }
.sem-recit .scene.ton-clair .fil { color: var(--encre); }
.sem-recit .scene.ton-sombre .fil { color: #F4EFE2; }
.sem-recit .porte { position: relative; padding: 120px 16px 110px; overflow: hidden; background: linear-gradient(180deg, #FBF4E2 0%, var(--blanc) 38%); }
.sem-recit .porte .ondes-deco { position: absolute; left: 50%; top: 40px; width: 1500px; max-width: none; translate: -50% 0; opacity: .5; pointer-events: none; }
.sem-recit .porte .dedans { position: relative; max-width: 1120px; margin: 0 auto; display: grid; gap: 40px; }
.sem-recit .porte header { display: grid; gap: 14px; text-align: center; justify-items: center; }
.sem-recit .porte header h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); max-width: 22ch; }
.sem-recit .porte header p { color: var(--sourd); max-width: 58ch; font-size: 1.08rem; }
.sem-recit .portes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sem-recit .portes .tuile { padding: 30px 28px 28px; display: grid; gap: 14px; align-content: start; text-decoration: none; cursor: pointer; }
.sem-recit .portes .picto { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #FFF8E3, #F3E2B4); border: 1px solid rgba(185, 135, 11, .35); }
.sem-recit .portes .picto svg { width: 26px; height: 26px; }
.sem-recit .portes h3 { font-size: 1.45rem; }
.sem-recit .portes p { color: var(--sourd); }
.sem-recit .portes .lire { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--or); margin-top: 6px; }
.sem-recit .prive { display: flex; align-items: center; justify-content: space-between; gap: 22px 30px; flex-wrap: wrap; padding: 26px 30px; }
.sem-recit .prive .cle { display: flex; align-items: center; gap: 16px; max-width: 640px; }
.sem-recit .prive .cle svg { flex: none; width: 34px; height: 34px; }
.sem-recit .prive p { font-size: 1.04rem; }
@media (max-width: 860px) {
.sem-recit .portes { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {

}
@media (max-width: 760px) {
.sem-recit #recit { height: 2100vh; }
.sem-recit .texte { padding: 20px 20px 18px; gap: 10px; }
.sem-recit .texte p { font-size: .97rem; }
.sem-recit .pos-gauche, .sem-recit .pos-droite, .sem-recit .pos-gauche-bas, .sem-recit .pos-bas-gauche, .sem-recit .pos-gauche-haut, .sem-recit .pos-centre-haut {
      left: 16px; right: 16px; top: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); translate: none; width: auto; text-align: left; justify-items: start;
    }
.sem-recit .pos-centre-bas { bottom: 22vh; }
.sem-recit .pos-bas-centre { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: 16px; right: 16px; width: auto; translate: none; }
.sem-recit .pos-haut-centre { top: 80px; left: 16px; right: 16px; width: auto; translate: none; }
.sem-recit .pos-haut-milieu { top: 86px; bottom: auto; left: 16px; right: 16px; width: auto; translate: none; text-align: center; justify-items: center; }
.sem-recit .pos-bas-milieu { left: 16px; right: 16px; width: auto; translate: none; text-align: center; }
.sem-recit .pos-gauche-haut { top: calc(88px + env(safe-area-inset-top, 0px)); bottom: auto; }
.sem-recit .fil span { display: none; }
.sem-recit .fil { right: 8px; }
.sem-recit .etiquette { font-size: .8rem; padding: 7px 11px 7px 10px; }
.sem-recit .etiquette small { display: none; }
.sem-recit .bourgeon { width: 100px; margin-left: -50px; margin-top: -22px; }
.sem-recit .bourgeon .coeur { width: 44px; height: 44px; font-size: .68rem; }
.sem-recit .bourgeon.a-naitre .coeur { width: 30px; height: 30px; }
.sem-recit .bourgeon .nom { font-size: .74rem; padding: 2px 7px; }
}
@media (prefers-reduced-motion: reduce) {
.sem-recit .tuile, .sem-recit .bouton, .sem-recit .bulle { transition: none; }
.sem-recit .ride, .sem-recit .texte .aide i::after, .sem-recit .bourgeon .coeur::after { animation: none; display: none; }
}
/* --- Intégration au site (outils/odoo/integrer.py) --- */
.sem-recit { background: var(--blanc); color: var(--encre); font-family: var(--texte); font-size: 16px; }
.sem-recit h1, .sem-recit h2, .sem-recit h3 { color: inherit; }
.sem-recit .texte.nuit h1, .sem-recit .texte.nuit h2, .sem-recit .tuile.nuit h2 { color: #F4EFE2; }
.sem-recit .portes .picto { width: auto; height: auto; background: none; border: 0; border-radius: 0; place-items: start; }
.sem-recit .portes .picto .sem-i, .sem-recit .prive .cle .sem-i { font-size: 2.4rem; color: var(--or); }
.sem-recit a.tuile { color: var(--encre); }
/* Odoo impose « section { height: auto } » sous 768 px : le récit garde sa longueur de défilement. */
.sem-recit #recit { height: 2600vh !important; }
@media (max-width: 760px) { .sem-recit #recit { height: 2100vh !important; } }
/* L'en-tête passe au-dessus de la scène dès le départ (recit.js, caler) ; une fois fixé, Odoo garde la main. */
body:has(.sem-recit) header#top:not(.o_header_affixed) { position: relative; z-index: 1030; }