/* ═════════════════════════════════════════════
   Les cartes ont du caractère (2026-09-23)
   Chaque carte reçoit un « objet » vivant, dans la langue des Pièces :
   encre chaude, un seul accent, craie en transparence, mouvement discret.
   ═════════════════════════════════════════════ */
.ob{--on:#f4f1ec;--mut:rgba(244,241,236,.5);--hair:rgba(244,241,236,.12);--fill:rgba(244,241,236,.07);display:block;font-style:normal;pointer-events:none}
.ob svg{display:block}

/* ── film : 1 · 48 h · 100 % ── */
.film__stat{position:relative;overflow:hidden}
.film__stat .ob{margin-left:auto;align-self:center;flex-shrink:0}
.ob--one{position:relative;width:74px;height:34px}
.ob--one svg{position:absolute;left:4px;top:2px;width:20px;height:20px;fill:var(--on);stroke:#171514;stroke-width:1.4;animation:ob-cursor 4s var(--ease) infinite}
.ob--one em{position:absolute;left:20px;top:17px;padding:4px 9px;border-radius:999px 999px 999px 4px;background:var(--accent);color:#fff;font:600 11px/1 var(--text);font-style:normal;animation:ob-cursor 4s var(--ease) infinite}
@keyframes ob-cursor{0%,100%{translate:0 0}50%{translate:10px -4px}}
.ob--week{position:relative;display:flex;gap:14px;padding:0 2px 12px;font:600 11px/1 var(--text);color:var(--mut)}
.ob--week span:first-child,.ob--week span:last-child{color:var(--on)}
.ob--week u{position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--accent-2) 0 var(--p,0%),var(--hair) 0);animation:ob-fill 3.6s var(--ease) infinite}
@property --p{syntax:'<percentage>';inherits:false;initial-value:0%}
@keyframes ob-fill{0%{--p:0%}70%,100%{--p:100%}}
.ob--ring{width:40px;height:40px}
.ob--ring svg{width:100%;height:100%;fill:none;stroke-width:3;stroke-linecap:round;transform:rotate(-90deg)}
.ob--ring circle{stroke:var(--hair)}
.ob--ring .r{stroke:var(--accent-2);stroke-dasharray:94.3;stroke-dashoffset:94.3;animation:ob-ring 3.6s var(--ease) infinite}
.ob--ring path{stroke:var(--on);transform:rotate(90deg);transform-origin:center;stroke-dasharray:20;stroke-dashoffset:20;animation:ob-check 3.6s var(--ease) infinite}
@keyframes ob-ring{0%{stroke-dashoffset:94.3}60%,100%{stroke-dashoffset:0}}
@keyframes ob-check{0%,55%{stroke-dashoffset:20}75%,100%{stroke-dashoffset:0}}

/* ── valeurs : main · vivant · rapide ── */
.tile--value .ob{height:64px;display:flex;align-items:center}
.tile--value h3{margin-top:14px!important}
.ob--hand{position:relative;flex-direction:column;align-items:flex-start!important;justify-content:center}
.ob--hand span{font:400 44px/1 'Alex Brush',cursive;color:var(--accent-2);clip-path:inset(0 100% 0 0);animation:ob-write 5s var(--ease) infinite}
.ob--hand svg{width:170px;height:14px;fill:none;stroke:var(--on);stroke-width:1.6;stroke-linecap:round;opacity:.5;stroke-dasharray:220;stroke-dashoffset:220;animation:ob-under 5s var(--ease) infinite}
@keyframes ob-write{0%{clip-path:inset(0 100% 0 0)}40%,90%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 0);opacity:0}}
@keyframes ob-under{0%,35%{stroke-dashoffset:220}55%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
.ob--wave{gap:4px}
.ob--wave i{width:5px;height:calc(14px + 30px * var(--a,.5));border-radius:3px;background:linear-gradient(var(--accent-2),var(--accent));opacity:.9;animation:ob-eq 1.6s ease-in-out infinite alternate;animation-delay:calc(var(--k) * -.13s)}
@keyframes ob-eq{0%{height:8px;opacity:.35}100%{height:46px;opacity:1}}
.ob--fast{flex-direction:column;align-items:stretch!important;justify-content:center;gap:10px}
.ob__track{position:relative;height:4px;border-radius:2px;background:var(--hair)}
.ob__track b{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--accent-2);width:var(--p);animation:ob-fill 2.8s var(--ease) infinite}
.ob__track i{position:absolute;top:50%;left:var(--p);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--on);box-shadow:0 0 0 4px color-mix(in oklch,var(--accent) 45%,transparent);z-index:1;animation:ob-fill 2.8s var(--ease) infinite}
.ob__days{display:flex;align-items:center;justify-content:space-between;font:500 11px/1.2 var(--text);color:var(--mut)}
.ob__days span{display:flex;flex-direction:column;gap:2px}.ob__days span:last-child{text-align:right}
.ob__days b{color:var(--on);font:600 13px/1 var(--font)}
.ob__days em{font:600 11px/1 var(--text);font-style:normal;padding:5px 9px;border-radius:999px;background:var(--accent);color:#fff}

/* ── process : une ligne qui avance, un repère par étape ── */
.process--ob{position:relative}
.process--ob li{border-top:0!important;padding-top:0!important}
.ob__line{position:absolute;left:18px;right:18px;top:18px;height:2px;background:var(--hair,rgba(244,241,236,.12));border-radius:2px;--hair:rgba(244,241,236,.12)}
.ob__line u{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--accent-2));width:var(--p);animation:ob-fill 6s var(--ease) infinite}
.ob--node{position:relative;z-index:1;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#23201d;box-shadow:inset 0 0 0 1px var(--hair),0 10px 20px -10px rgba(0,0,0,.6);margin-bottom:12px;animation:ob-node 6s var(--ease) infinite}
.ob--node svg{width:18px;height:18px;fill:none;stroke:var(--on);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.process--ob li:nth-child(2) .ob--node{animation-delay:0s}
.process--ob li:nth-child(3) .ob--node{animation-name:ob-node2}
.process--ob li:nth-child(4) .ob--node{animation-name:ob-node3}
.process--ob li:nth-child(5) .ob--node{animation-name:ob-node4}
@keyframes ob-node{0%,100%{background:var(--accent)}}
@keyframes ob-node2{0%,22%{background:#23201d}28%,100%{background:var(--accent)}}
@keyframes ob-node3{0%,44%{background:#23201d}50%,100%{background:var(--accent)}}
@keyframes ob-node4{0%,66%{background:#23201d}72%,100%{background:var(--accent)}}

/* ── services : une maquette miniature par carte ── */
.tile--service:not(.tile--service-wide){padding-top:22px!important}
.tile--service .tile__num{position:absolute;right:22px;top:22px;width:auto!important;height:auto!important;background:none!important;box-shadow:none!important;color:var(--mut,rgba(244,241,236,.5))!important;font:500 12px/1 'Space Mono',monospace!important;letter-spacing:.08em}
.tile--service .ob{position:relative;height:96px;margin-bottom:8px}
.ob--pages i{position:absolute;left:0;top:6px;width:64px;height:82px;border-radius:8px;background:#2a2622;box-shadow:inset 0 0 0 1px var(--hair),0 12px 20px -12px rgba(0,0,0,.7);transition:transform .6s var(--spring)}
.ob--pages i:nth-child(1){transform:translateX(0) rotate(-8deg);opacity:.55}
.ob--pages i:nth-child(2){transform:translateX(24px) rotate(-2deg);opacity:.8}
.ob--pages i:nth-child(3){transform:translateX(50px) rotate(5deg);background:var(--on);padding:10px 8px;display:flex;flex-direction:column;gap:5px}
.ob--pages i:nth-child(3) b{height:5px;border-radius:3px;background:#d8d2c8}.ob--pages i:nth-child(3) b:first-child{height:22px;background:var(--accent);border-radius:4px}.ob--pages i:nth-child(3) b:last-child{width:60%}
.tile--service:hover .ob--pages i:nth-child(1){transform:translateX(-6px) rotate(-14deg)}
.tile--service:hover .ob--pages i:nth-child(3){transform:translateX(64px) rotate(9deg)}
.ob--long{width:66px;border-radius:10px;overflow:hidden;background:var(--on);box-shadow:0 12px 20px -12px rgba(0,0,0,.7)}
.ob--long div{display:flex;flex-direction:column;gap:6px;padding:8px;animation:ob-scroll 6s ease-in-out infinite alternate}
.ob--long b{height:26px;border-radius:5px;background:var(--accent);flex-shrink:0}.ob--long b:nth-of-type(2){background:#e7e1d7}.ob--long b:nth-of-type(3){background:color-mix(in oklch,var(--accent) 40%,#fff)}
.ob--long i{height:5px;border-radius:3px;background:#d8d2c8;flex-shrink:0}.ob--long i:nth-of-type(2n){width:70%}
@keyframes ob-scroll{0%,15%{transform:none}85%,100%{transform:translateY(-58px)}}
.ob--redo{width:140px;border-radius:10px;overflow:hidden;display:flex;box-shadow:0 12px 20px -12px rgba(0,0,0,.7)}
.ob--redo>div{position:absolute;inset:0;display:flex;flex-direction:column;gap:6px;padding:12px}
.ob--redo .old{background:#3a3631}.ob--redo .old i{height:6px;border-radius:1px;background:#6b645b}.ob--redo .old i:first-child{height:18px;background:#5a534b}
.ob--redo .new{background:var(--on);clip-path:inset(0 0 0 var(--x,50%));animation:ob-redo 4s ease-in-out infinite alternate}
.ob--redo .new b{height:30px;border-radius:6px;background:var(--accent)}.ob--redo .new i{height:6px;border-radius:3px;background:#d8d2c8}.ob--redo .new i:last-child{width:60%}
.ob--redo u{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;margin-left:-1px;background:var(--on);box-shadow:0 0 0 1px rgba(0,0,0,.2);animation:ob-redo 4s ease-in-out infinite alternate}
.ob--redo u::after{content:"";position:absolute;top:50%;left:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--on);box-shadow:0 2px 6px rgba(0,0,0,.4)}
@property --x{syntax:'<percentage>';inherits:false;initial-value:50%}
@keyframes ob-redo{0%{--x:78%}100%{--x:18%}}
.ob--phone{width:150px}
.ob--phone .scr{position:absolute;left:0;top:0;width:52px;height:94px;border-radius:12px;background:#0f0e0d;box-shadow:inset 0 0 0 2px #3a3631,0 12px 20px -12px rgba(0,0,0,.7);display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:14px 8px;align-content:start}
.ob--phone .scr i{aspect-ratio:1;border-radius:5px;background:var(--accent)}
.ob--phone .scr i:nth-child(2n){background:var(--accent-2)}.ob--phone .scr i:nth-child(3){background:var(--on)}.ob--phone .scr i:nth-child(6){background:#3a3631}
.ob--phone em{position:absolute;left:36px;top:22px;padding:7px 10px;border-radius:10px;background:var(--on);color:#171514;font:600 10px/1.2 var(--text);font-style:normal;white-space:nowrap;box-shadow:0 10px 20px -8px rgba(0,0,0,.6);animation:ob-notif 4s var(--spring) infinite}
.ob--phone em::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:6px}
@keyframes ob-notif{0%,15%{opacity:0;transform:translateY(8px) scale(.9)}25%,80%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(-4px)}}
.ob--dash{width:150px;border-radius:10px;overflow:hidden;background:#2a2622;box-shadow:inset 0 0 0 1px var(--hair),0 12px 20px -12px rgba(0,0,0,.7)}
.ob--dash .bar{display:flex;gap:4px;padding:7px 8px;border-bottom:1px solid var(--hair)}
.ob--dash .bar i{width:6px;height:6px;border-radius:50%;background:var(--hair)}.ob--dash .bar i:first-child{background:var(--accent)}
.ob--dash .chart{position:absolute;left:10px;right:10px;bottom:10px;top:30px;display:flex;align-items:flex-end;gap:6px}
.ob--dash .chart i{flex:1;border-radius:3px 3px 1px 1px;background:linear-gradient(var(--accent-2),var(--accent));height:var(--h);transform-origin:bottom;animation:ob-bars 3.6s var(--ease) infinite}
.ob--dash .chart i:nth-child(2){animation-delay:.08s}.ob--dash .chart i:nth-child(3){animation-delay:.16s}.ob--dash .chart i:nth-child(4){animation-delay:.24s}.ob--dash .chart i:nth-child(5){animation-delay:.32s}.ob--dash .chart i:nth-child(6){animation-delay:.4s}
@keyframes ob-bars{0%{transform:scaleY(.15)}35%,85%{transform:none}100%{transform:scaleY(.15)}}
.ob--duo{width:160px}
.ob--duo .web{position:absolute;left:0;top:6px;width:112px;height:76px;border-radius:9px;background:var(--on);padding:18px 10px 10px;display:flex;flex-direction:column;gap:6px;box-shadow:0 12px 20px -12px rgba(0,0,0,.7)}
.ob--duo .web::before{content:"";position:absolute;left:8px;top:7px;width:24px;height:4px;border-radius:2px;background:#d8d2c8}
.ob--duo .web i{height:6px;border-radius:3px;background:#d8d2c8}.ob--duo .web i:first-child{height:18px;background:var(--accent);border-radius:4px}.ob--duo .web i:last-child{width:55%}
.ob--duo .mob{position:absolute;left:96px;top:22px;width:40px;height:70px;border-radius:10px;background:#0f0e0d;box-shadow:inset 0 0 0 2px #3a3631,0 14px 24px -10px rgba(0,0,0,.8);padding:12px 6px;display:flex;flex-direction:column;gap:5px;animation:ob-float 4s ease-in-out infinite}
.ob--duo .mob i{height:16px;border-radius:4px;background:var(--accent)}.ob--duo .mob i+i{height:5px;background:var(--accent-2)}
@keyframes ob-float{0%,100%{translate:0 0}50%{translate:0 -5px}}

/* ── contact : lettre · appel · message · agenda ── */
.tile--chan .ob{position:absolute;right:62px;top:14px}
.ob--mail{width:52px;height:38px}
.ob--mail b{position:absolute;inset:0;border-radius:6px;background:#3a3631;box-shadow:inset 0 0 0 1px rgba(244,241,236,.18)}
.ob--mail b::after{content:"";position:absolute;left:0;right:0;top:0;height:22px;background:linear-gradient(to bottom right,transparent 49%,#4a453f 50%) left/50% 100% no-repeat,linear-gradient(to bottom left,transparent 49%,#4a453f 50%) right/50% 100% no-repeat;border-radius:6px 6px 0 0}
.ob--mail i{position:absolute;left:6px;right:6px;bottom:6px;height:34px;border-radius:4px;background:var(--on);padding:7px 6px;display:flex;flex-direction:column;gap:4px;z-index:-1;animation:ob-letter 4s var(--spring) infinite}
.ob--mail{isolation:isolate}
.ob--mail i span{height:3px;border-radius:2px;background:#d8d2c8}.ob--mail i span:first-child{background:var(--accent);width:60%}
@keyframes ob-letter{0%,20%{transform:translateY(0)}45%,80%{transform:translateY(-22px)}100%{transform:translateY(0)}}
.ob--ring2{width:38px;height:38px;display:grid;place-items:center}
.ob--ring2 svg{width:20px;height:20px;fill:none;stroke:var(--accent-2);stroke-width:1.8;stroke-linejoin:round;animation:ob-buzz 2.4s ease-in-out infinite}
.ob--ring2 u{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--accent-2);opacity:0;animation:ob-ping 2.4s var(--ease) infinite}
.ob--ring2 u+u{animation-delay:.5s}
@keyframes ob-ping{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.5);opacity:0}}
@keyframes ob-buzz{0%,60%,100%{rotate:0deg}65%{rotate:-12deg}70%{rotate:12deg}75%{rotate:-8deg}80%{rotate:6deg}}
.ob--chat{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.ob--chat span{padding:6px 10px;border-radius:12px 12px 4px 12px;background:var(--accent);color:#fff;font:500 11px/1.2 var(--text);white-space:nowrap;animation:ob-pop 5s var(--spring) infinite}
.ob--chat .me{align-self:flex-start;display:flex;gap:3px;padding:8px 10px;border-radius:12px 12px 12px 4px;background:#2a2622;box-shadow:inset 0 0 0 1px var(--hair);animation-delay:.6s}
.ob--chat .me i{width:5px;height:5px;border-radius:50%;background:var(--on);animation:ob-dot 1.2s ease-in-out infinite}
.ob--chat .me i:nth-child(2){animation-delay:.15s}.ob--chat .me i:nth-child(3){animation-delay:.3s}
@keyframes ob-pop{0%{opacity:0;transform:translateY(6px) scale(.9)}12%,85%{opacity:1;transform:none}100%{opacity:0}}
@keyframes ob-dot{0%,100%{opacity:.3;translate:0 0}50%{opacity:1;translate:0 -2px}}
.ob--cal{display:flex;gap:6px;margin:6px 0 4px}
.ob--cal span{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:12px;background:var(--fill);font:600 11px/1 var(--text);color:var(--mut)}
.ob--cal span i{width:100%;height:6px;border-radius:3px;background:var(--hair)}
.ob--cal span.on{background:color-mix(in oklch,var(--accent) 22%,transparent);color:var(--on);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--accent) 60%,transparent)}
.ob--cal .pick{height:auto!important;padding:4px 0;background:var(--accent)!important;color:#fff;font:600 10px/1 var(--text);font-style:normal;text-align:center;animation:ob-pick 3s var(--spring) infinite}
@keyframes ob-pick{0%,20%{transform:scale(.8);opacity:.4}35%,100%{transform:none;opacity:1}}

/* ── mobile : les objets restent, plus petits ── */
@media(max-width:640px){
  .tile--service .ob{height:70px;transform:scale(.78);transform-origin:left top;margin-bottom:0}
  .tile--service .tile__num{right:16px;top:18px}
  .ob--cal{gap:4px}.ob--cal span{padding:6px 2px}
  .process--ob .ob--node{width:32px;height:32px;border-radius:10px;margin-bottom:8px}
  .ob__line{display:none}
}
@media(prefers-reduced-motion:reduce){.ob,.ob *{animation:none!important}.ob--hand span{clip-path:none}.ob--hand svg{stroke-dashoffset:0}}
.ob--cal span b{font:inherit;color:inherit}
.ob__days span span{font:inherit;color:inherit}

/* ── contact : chaque objet est centré sur la flèche (40 px, à 18 px du haut) et reste dans la carte ── */
.tile--chan .ob{top:38px;right:70px;translate:0 -50%}
.ob--mail{width:48px;height:34px}
.ob--mail i{left:6px;right:6px;bottom:5px;height:28px;padding:6px 6px}
@keyframes ob-letter{0%,20%{transform:translateY(0)}45%,80%{transform:translateY(-13px)}100%{transform:translateY(0)}}
.ob--chat{flex-direction:row;align-items:center;gap:6px}
.ob--chat .me{align-self:center;order:-1}
/* WhatsApp : la bulle reste à hauteur de la flèche, « en train d'écrire » juste dessous, à droite */
.ob--chat{display:block}
.ob--chat .me{position:absolute;right:0;top:calc(100% + 6px);order:0;border-radius:12px 4px 12px 12px}

/* ── « Fait à la main » : un stylet trace une signature sur une tablette d'encre ── */
.tile--value .ob--pen{position:relative;height:64px;width:200px;display:block}
.ob--pen svg{position:absolute;inset:0;overflow:visible}
.ob--pen path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.ob--pen .pad{stroke:rgba(244,241,236,.08);stroke-width:1.5;stroke-dasharray:3 6}
.ob--pen .ink{stroke:var(--accent-2);stroke-width:3;stroke-dasharray:320;stroke-dashoffset:320;filter:drop-shadow(0 0 6px color-mix(in oklch,var(--accent) 70%,transparent));animation:pen-ink 4.5s var(--ease) infinite}
.ob--pen .pen{position:absolute;left:0;top:0;width:0;height:0;offset-path:path("M8 52C26 28 44 26 52 42S74 60 92 38 124 22 134 42 160 58 192 32");offset-rotate:0deg;offset-distance:0%;animation:pen-move 4.5s var(--ease) infinite}
.ob--pen .pen b{position:absolute;left:-4px;bottom:0;width:8px;height:64px;border-radius:4px 4px 2px 2px;transform-origin:50% 100%;rotate:32deg;
  background:linear-gradient(to bottom,#f4f1ec 0 10%,var(--accent) 10% 14%,#f4f1ec 14% 84%,#cfc8bd 84%);
  clip-path:polygon(0 0,100% 0,100% 86%,50% 100%,0 86%);box-shadow:inset -2px 0 0 rgba(0,0,0,.12);filter:drop-shadow(6px 10px 8px rgba(0,0,0,.45))}
@keyframes pen-ink{0%{stroke-dashoffset:320;opacity:1}60%,85%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes pen-move{0%{offset-distance:0%;opacity:0}6%{opacity:1}60%{offset-distance:100%;opacity:1}72%{offset-distance:100%;translate:6px -10px;opacity:1}85%,100%{offset-distance:100%;translate:6px -10px;opacity:0}}

/* ── L'atelier : la phrase « Un échange direct… » dans une capsule de craie, pour contraster ── */
.tile--text p:not(.big):not(.tile__kick){position:relative;max-width:none;margin-top:4px;padding:16px 20px 16px 50px;border-radius:20px;background:var(--craie);color:var(--ink)!important;font-size:15px;line-height:1.5;box-shadow:0 18px 30px -20px rgba(0,0,0,.6)}
.tile--text p:not(.big):not(.tile__kick)::before{content:"";position:absolute;left:18px;top:19px;width:18px;height:18px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in oklch,var(--accent) 22%,transparent)}
.tile--text p:not(.big):not(.tile__kick)::after{content:"";position:absolute;left:24px;top:25px;width:6px;height:6px;border-radius:50%;background:#fff}
html body .bento .tile--text p:not(.big):not(.tile__kick){color:#1a1817!important;-webkit-text-fill-color:#1a1817}
.tile--value .ob--pen{margin-top:6px}
.ob--pen .pen b{height:54px}
.ob--pen .pen b{height:44px}

/* ── film : chiffre, texte et objet centrés sur la même ligne, sans colonne orpheline ── */
.film__stat{align-items:center!important;min-height:112px}
.film__stat b{flex-shrink:0}
.film__stat span{flex:1;min-width:0;line-height:1.35;text-wrap:balance}

/* ═════════════════════════════════════════════
   Alignement global (2026-09-23) : une seule colonne de 1240 px pour tout le site.
   Titres de section, grilles, pièces et film partagent exactement les mêmes bords.
   ═════════════════════════════════════════════ */
.section__head{max-width:1240px}
.ap-board{padding-left:0!important;padding-right:0!important}
.section--film{margin-left:0!important;margin-right:0!important}
@media(max-width:640px){
  html .bento--services{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  .bento--services>*{min-width:0}
  .tile--service .ob{max-width:100%}
}
.ap-isl input[type=range]{margin-left:0;margin-right:0}

/* ── Travaux · Agence Immobilière : le château va d'un bord à l'autre de la page, sans marges latérales ── */
.bento--work .tile--immo .immo__page{--px:16px;padding-left:var(--px)!important;padding-right:var(--px)!important}
.bento--work .tile--immo .immo__page video,.bento--work .tile--immo .immo__page img{width:calc(100% + 2 * var(--px))!important;max-width:none!important;margin:auto calc(-1 * var(--px)) 0!important;object-fit:cover!important;object-position:center 30%!important}
@media(max-width:640px){.bento--work .tile--immo .immo__page{--px:10px}}

/* ── Agence Immobilière : pas de cadre d'encre, le château remplit toute la page (vidéo plein écran),
   la barre, le titre et la recherche flottent dessus ── */
#travaux .bento--work .tile--immo{padding:0!important;background:#f4f2ee!important}
#travaux .bento--work .tile--immo .immo__page{inset:0!important;border-radius:inherit!important;background:transparent!important;isolation:isolate}
#travaux .bento--work .tile--immo .immo__page video{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;object-fit:cover!important;object-position:center 62%!important;z-index:-2}
#travaux .bento--work .tile--immo .immo__page::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,rgba(250,249,246,.96) 0%,rgba(250,249,246,.85) 30%,rgba(250,249,246,0) 58%)}
#travaux .bento--work .tile--immo .immo__page>*:not(video){position:relative}
#travaux .bento--work .tile--immo::after{display:none}
#travaux .bento--work .tile--immo .tile__foot::before{inset:-60px -28px -28px;border-radius:0 0 inherit inherit}
@media(max-width:640px){#travaux .bento--work .tile--immo .immo__page video{object-position:center 38%!important;transform:scale(1.18);transform-origin:50% 30%}}

/* ── Pièce 07 · Message : le monogramme plus petit, il ne touche plus l'onglet ── */
.ap-isl:not(.ap-blk) .ap-mono{width:28px;height:28px;border-radius:8px;font-size:10px}
.ap-isl:not(.ap-blk) .ap-mono::after{inset:2px;border-radius:6px}

/* ── Agence Immobilière v2 : la vidéo descend sous la recherche, pleine largeur, sans jamais toucher le texte ── */
#travaux .bento--work .tile--immo .immo__page::before{display:none}
#travaux .bento--work .tile--immo .immo__page{background:#faf9f6!important}
#travaux .bento--work .tile--immo .immo__page video{position:relative!important;inset:auto!important;flex:1 1 0!important;min-height:0!important;height:auto!important;width:calc(100% + 2 * var(--px))!important;margin:6px calc(-1 * var(--px)) 0!important;object-fit:cover!important;object-position:center 72%!important;transform:none!important;z-index:0;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%);mask-image:linear-gradient(to bottom,transparent 0,#000 18%)}