/* ═══════════════════════════════════════════════════════════════
   PAGES MÉTIER (15/10/2026) — immobilier de prestige, hôtellerie et
   restauration, joaillerie-horlogerie-mode.
   Le modèle des pages d'offre : la page charge aussi
   css/v4/offre-design.css (composants « od- » communs) et, en différé,
   offre-design-figma.css + offre-secteur-diff.css. Ici, seulement ce
   qui doit être là au premier rendu : la place de la démonstration,
   « Ce que ça change » et le survol propre aux pages métier.
   Préfixe : .oz-
   ═══════════════════════════════════════════════════════════════ */

/* ─── La place de la démonstration ───
   Taille définitive dès le premier rendu ; le contenu est construit par
   js/v4/offre-secteur.js à l'approche. */
.oz-demo-cadre { margin-top: var(--e8); max-width: 1368px; }
.oz-demo {
  position: relative;
  height: 720px;
  margin-inline: auto;
  overflow: hidden;
  border-radius: 18px;
  background: #0E0E0E;
  color: #EDEDED;
  text-align: left;
}
.oz-demo-repli { position: absolute; left: 50%; top: 50%; margin: 0; transform: translate(-50%, -50%); color: rgba(255, 255, 255, 0.45); font-size: var(--p-4); white-space: nowrap; }
.oz-demo.est-pret .oz-demo-repli { display: none; }
@media (max-width: 1100px) { .oz-demo { height: 760px; } }
@media (max-width: 760px) {
  .oz-demo-cadre { padding-inline: 12px; }
  .oz-demo { height: 1240px; border-radius: 14px; }
}

/* ═══ 1. CE QUE ÇA CHANGE ═══
   À gauche ce que voit le client (un téléphone, un résultat Google), à
   droite ce qui arrive chez vous (l'entonnoir et les demandes, chiffres
   fictifs). Animé à l'apparition (.est-vu) et par offre-secteur.js. */
.oz-change-lead { max-width: 52ch; margin: var(--e4) 0 0; }
.oz-methode-lead, .oz-livrables-lead { max-width: 46ch; margin: var(--e4) 0 0; }
.oz-change-planche {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--e5);
  margin-top: var(--e7);
}
.oz-change-carte {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--e5);
  padding: var(--e6);
  overflow: hidden;
  border-radius: var(--r4);
}
.oz-change-carte--claire { background: radial-gradient(120% 90% at 0% 0%, #FFFDF7 0%, #F6F0E2 50%, #EBE1CB 100%); color: #1E1A12; }
.oz-change-carte--noire {
  align-content: center;
  background: radial-gradient(70% 45% at 50% 100%, rgba(209, 163, 38, 0.2), transparent 70%), var(--noir);
  color: var(--sur-noir);
}
.oz-change-etiquette { margin: 0; font-size: var(--p-5); letter-spacing: 0.04em; color: #6B5F45; }
.oz-change-carte--noire .oz-change-etiquette { color: var(--sur-noir-2); }
.oz-change-ecrans { display: grid; grid-template-columns: 236px minmax(0, 1fr); align-items: center; gap: var(--e5); }

/* Le téléphone */
.oz-tel { position: relative; width: 236px; aspect-ratio: 9 / 19.2; padding: 9px; border-radius: 42px; background: #111; box-shadow: inset 0 0 0 1.5px #3a3a3a, 0 40px 60px -34px rgba(40, 30, 10, 0.55); }
.oz-tel-ecran { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 34px; background: #fff; color: #111; font: 400 11px/1.3 -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; }
.oz-tel-ilot { position: absolute; left: 50%; top: 8px; z-index: 4; width: 74px; height: 21px; border-radius: 99px; background: #000; transform: translateX(-50%); }
.oz-tel-statut { display: flex; justify-content: space-between; align-items: center; height: 36px; padding: 0 22px; flex: none; }
.oz-tel-statut b { font-size: 12px; font-weight: 600; }
.oz-tel-statut i { width: 22px; height: 10px; border-radius: 3px; box-shadow: inset 0 0 0 1.2px #111; background: linear-gradient(90deg, #111 70%, transparent 70%) 2px 2px / 15px 6px no-repeat; }
.oz-ig-haut { display: flex; align-items: center; height: 30px; padding: 0 12px; flex: none; }
.oz-ig-haut img { width: 82px; height: auto; }
.oz-post-tete { display: flex; align-items: center; gap: 8px; padding: 6px 12px; flex: none; }
.oz-post-av { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #1E1A12; color: #F2D27A; font: 600 12px/1 Georgia, serif; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #D6249F; }
.oz-post-qui { display: grid; line-height: 1.15; }
.oz-post-qui b { font-size: 11px; font-weight: 600; }
.oz-post-qui small { font-size: 9.5px; color: #737373; }
.oz-post-media { position: relative; flex: none; aspect-ratio: 4 / 5; overflow: hidden; background: #E9E2D3; }
.oz-post-media img { width: 100%; height: 100%; object-fit: cover; }
.oz-post-etiquette { position: absolute; left: 10px; bottom: 10px; padding: 4px 9px; border-radius: 6px; background: rgba(255, 255, 255, 0.92); color: #111; font-size: 10px; font-weight: 600; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.5); }
.oz-post-etiquette::before { content: ''; position: absolute; left: 12px; top: -5px; border: 5px solid transparent; border-top: 0; border-bottom-color: rgba(255, 255, 255, 0.92); }
.oz-post-cta { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: #0095F6; color: #fff; font-size: 11px; font-weight: 600; flex: none; }
.oz-post-cta svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.oz-post-actions { display: flex; gap: 12px; padding: 8px 12px 4px; flex: none; }
.oz-post-actions svg { width: 18px; height: 18px; fill: none; stroke: #111; stroke-width: 1.7; stroke-linejoin: round; }
.oz-post-actions svg:first-child { fill: #FF3040; stroke: #FF3040; }
.oz-post-legende { padding: 0 12px; font-size: 10.5px; line-height: 1.35; }

/* La fiche Google Maps dans le téléphone */
.oz-tel-ecran--maps { background: #E8EEF0; }
.oz-maps-carte { position: relative; flex: 1 1 0; min-height: 70px; background:
  linear-gradient(115deg, transparent 47%, #fff 47% 50%, transparent 50%) 0 0 / 100% 100%,
  linear-gradient(20deg, transparent 60%, #fff 60% 62%, transparent 62%) 0 0 / 100% 100%,
  radial-gradient(60% 50% at 80% 30%, #A9D4E8 0 60%, transparent 61%),
  #E4ECE3; }
.oz-maps-repere { position: absolute; left: 46%; top: 42%; width: 22px; height: 22px; border-radius: 50% 50% 50% 0; background: #EA4335; transform: rotate(-45deg); box-shadow: 0 6px 10px -4px rgba(0, 0, 0, 0.5); }
.oz-maps-repere::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: #fff; }
.oz-maps-fiche { position: relative; display: grid; gap: 5px; padding: 8px 12px 14px; border-radius: 16px 16px 0 0; background: #fff; box-shadow: 0 -6px 18px -10px rgba(0, 0, 0, 0.35); }
.oz-maps-poignee { justify-self: center; width: 30px; height: 4px; border-radius: 99px; background: #D5D5D5; }
.oz-maps-nom { font-size: 14px; font-weight: 600; }
.oz-maps-note { display: flex; align-items: center; gap: 4px; font-size: 11px; }
.oz-maps-note b { font-weight: 600; }
.oz-maps-note small { color: #70757A; }
.oz-etoiles { display: inline-flex; gap: 1px; }
.oz-etoiles i { width: 10px; height: 10px; background: #FBBC04; clip-path: polygon(50% 0, 62% 35%, 100% 38%, 70% 61%, 80% 100%, 50% 78%, 20% 100%, 30% 61%, 0 38%, 38% 35%); }
.oz-maps-type { color: #70757A; font-size: 10.5px; }
.oz-maps-actions { display: flex; gap: 5px; margin-top: 2px; }
.oz-maps-actions span { padding: 5px 9px; border-radius: 99px; box-shadow: inset 0 0 0 1px #DADCE0; color: #1A73E8; font-size: 10px; font-weight: 600; }
.oz-maps-actions .est-plein { background: #1A73E8; color: #fff; box-shadow: none; }
.oz-maps-photos { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 3px; height: 74px; margin-top: 4px; overflow: hidden; border-radius: 10px; }
.oz-maps-photos img { width: 100%; height: 100%; object-fit: cover; }
.oz-maps-avis { color: #3C4043; font-size: 10.5px; }

/* Le résultat Google */
.oz-serp { display: grid; gap: 10px; padding: 16px; border-radius: 16px; background: #fff; box-shadow: 0 30px 50px -36px rgba(40, 30, 10, 0.55); font: 400 12px/1.4 Arial, sans-serif; color: #202124; }
.oz-serp-haut { display: flex; align-items: center; gap: 12px; }
.oz-serp-logo { font: 500 18px/1 'Product Sans', Arial, sans-serif; letter-spacing: -0.5px; }
.oz-serp-logo b:nth-child(1), .oz-serp-logo b:nth-child(4) { color: #4285F4; } .oz-serp-logo b:nth-child(2), .oz-serp-logo b:nth-child(6) { color: #EA4335; } .oz-serp-logo b:nth-child(3) { color: #FBBC05; } .oz-serp-logo b:nth-child(5) { color: #34A853; }
.oz-serp-logo b { font-weight: 500; }
.oz-serp-recherche { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 7px 12px; border-radius: 99px; box-shadow: 0 1px 5px rgba(32, 33, 36, 0.22); }
.oz-serp-recherche svg { flex: none; width: 13px; height: 13px; fill: none; stroke: #9AA0A6; stroke-width: 1.6; }
.oz-serp-requete { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.oz-serp-caret { width: 1px; height: 14px; background: #202124; animation: oz-caret 1s steps(1) infinite; }
@keyframes oz-caret { 50% { opacity: 0; } }
.oz-serp-onglets { display: flex; gap: 14px; padding-bottom: 6px; border-bottom: 1px solid #ECEDEF; color: #5F6368; font-size: 11px; }
.oz-serp-onglets i { font-style: normal; }
.oz-serp-onglets .est-actif { color: #1A73E8; box-shadow: 0 8px 0 -6px #1A73E8; }
.oz-serp-resultat { display: flex; gap: 12px; padding: 10px; margin-inline: -10px; border-radius: 12px; background: #FFFBEE; box-shadow: inset 0 0 0 1px rgba(209, 163, 38, 0.35); }
.oz-serp-vignette { flex: none; width: 76px; height: 92px; border-radius: 10px; object-fit: cover; }
.oz-serp-corps { display: grid; gap: 4px; min-width: 0; }
.oz-serp-site { display: flex; align-items: center; gap: 8px; }
.oz-serp-favicon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #1E1A12; color: #F2D27A; font: 600 11px/1 Georgia, serif; }
.oz-serp-site-txt { display: grid; line-height: 1.2; }
.oz-serp-site-txt b { font-size: 12px; font-weight: 400; }
.oz-serp-site-txt small { color: #4D5156; font-size: 10.5px; }
.oz-serp-titre { color: #1A0DAB; font-size: 15px; font-weight: 400; line-height: 1.3; }
.oz-serp-desc { color: #4D5156; font-size: 11.5px; }
.oz-serp-prix { display: flex; align-items: baseline; gap: 8px; }
.oz-serp-prix b { font-size: 14px; }
.oz-serp-prix small { color: #188038; font-size: 11px; }
.oz-serp-liens { display: flex; flex-wrap: wrap; gap: 6px; }
.oz-serp-liens i { padding: 3px 10px; border-radius: 99px; box-shadow: inset 0 0 0 1px #DADCE0; color: #1A0DAB; font-style: normal; font-size: 11px; }
.oz-serp-org { display: grid; gap: 5px; padding-top: 4px; }
.oz-serp-org i { display: block; height: 7px; border-radius: 4px; background: #EEF0F2; }
.oz-serp-org i:first-child { width: 42%; background: #DCE3F5; }
.oz-serp-org i:nth-child(2) { width: 92%; } .oz-serp-org i:nth-child(3) { width: 70%; }

/* La carte noire : l'entonnoir, le résultat, les demandes */
.oz-entonnoir { display: grid; gap: 12px; }
.oz-etage { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 6px; align-items: end; }
.oz-etage-txt { display: grid; line-height: 1.25; }
.oz-etage-txt b { font-size: 14px; font-weight: 500; }
.oz-etage-txt small { color: var(--sur-noir-2); font-size: 11.5px; }
.oz-etage-nb { grid-column: 2; grid-row: 1; color: #fff; font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.oz-etage-barre { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.oz-etage-barre i { display: block; width: var(--l); height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(209, 163, 38, 0.55), var(--or)); transform-origin: left; transition: transform 1000ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.oz-etage:nth-child(2) .oz-etage-barre i { transition-delay: 180ms; }
.oz-etage:nth-child(3) .oz-etage-barre i { transition-delay: 360ms; }
.oz-resultat { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 14px; padding: 14px 16px; border-radius: 14px; background: rgba(209, 163, 38, 0.12); box-shadow: inset 0 0 0 1px rgba(209, 163, 38, 0.45); }
.oz-resultat small { grid-column: 1 / -1; color: var(--sur-noir-2); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.oz-resultat b { color: var(--or); font-size: 1.9rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.oz-resultat span { color: var(--sur-noir-2); font-size: 12px; }
.oz-fil { display: grid; gap: 6px; }
.oz-fil-ligne { display: grid; grid-template-columns: 24px auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 12px; border-radius: 11px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); font-size: 12.5px; transition: opacity 500ms ease, transform 600ms var(--ressort); }
.oz-fil-ligne img { width: 24px; height: 24px; padding: 4px; border-radius: 7px; background: #fff; }
.oz-fil-ligne b { font-weight: 600; }
.oz-fil-ligne small { overflow: hidden; color: var(--sur-noir-2); font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; }
.oz-fil-ligne.est-neuve { box-shadow: inset 0 0 0 1px rgba(209, 163, 38, 0.6), 0 0 22px -6px rgba(209, 163, 38, 0.5); }

/* Entrée en scène */
.oz-change-carte { transition: transform 900ms var(--ressort), opacity 700ms ease; }
.oz-change-carte--noire { transition-delay: 150ms; }
.od-anime .oz-change-planche:not(.est-vu) .oz-change-carte { opacity: 0; transform: translateY(30px); }
.od-anime .oz-change-planche:not(.est-vu) .oz-etage-barre i { transform: scaleX(0); }

@media (max-width: 1100px) {
  .oz-change-planche { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .oz-change-carte { padding: var(--e5) 14px; }
  .oz-change-ecrans { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .oz-serp { width: 100%; }
}

/* ═══ LE SURVOL DES CARTES, PROPRE AUX PAGES MÉTIER : le poinçon ═══
   Comme le poinçon d'une pièce d'orfèvrerie : un liseré d'or se trace
   autour de la carte, et un petit losange frappé apparaît dans son
   coin. Ni les poignées du Web design, ni l'inspecteur du
   Développement, ni le résultat de recherche du SEO. */
[data-oz-poincon] { position: relative; isolation: isolate; }
[data-oz-poincon]::after {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: 3;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--oz-angle, 0deg), var(--or) 0 var(--oz-trace, 0%), transparent var(--oz-trace, 0%));
  -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);
  pointer-events: none;
  transition: --oz-trace 650ms cubic-bezier(0.65, 0, 0.35, 1);
}
@property --oz-trace { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
[data-oz-poincon]:hover::after { --oz-trace: 100%; }
[data-oz-poincon]::before {
  content: '';
  position: absolute;
  right: 12px; top: 12px;
  z-index: 4;
  width: 12px; height: 12px;
  background: var(--or);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  box-shadow: 0 0 0 3px rgba(209, 163, 38, 0.2);
  opacity: 0;
  transform: scale(1.8) rotate(-45deg);
  transition: opacity 250ms ease 250ms, transform 450ms cubic-bezier(0.3, 1.6, 0.5, 1) 250ms;
  pointer-events: none;
}
[data-oz-poincon]:hover::before { opacity: 1; transform: none; }
.od-effet[data-oz-poincon] { padding-inline: 14px; margin-inline: -14px; border-radius: 6px; }
.od-effet[data-oz-poincon]::before { top: calc(var(--e5) + 4px); }
@media (hover: none) {
  [data-oz-poincon]::before, [data-oz-poincon]::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-oz-poincon]::before, [data-oz-poincon]::after { transition: none; }
}

/* ═══ LES TROIS PROPRIÉTÉS DE L'OUVERTURE : un survol par métier ═══
   (15/10/2026, demande du fondateur) Ni les poignées de recadrage du
   Web design, ni l'inspecteur du Développement : chaque page métier a
   le sien, tiré de son secteur.
   · Immobilier : la cote d'un plan d'architecte et sa trame.
   · Hôtellerie : le porte-clé d'une chambre, qui se balance.
   · Joaillerie : un éclat de lumière qui traverse, comme sur une pierre.
   · Conciergerie : le chemin pointillé jusqu'à la porte. */
.oz-ouverture .od-propriete:hover { box-shadow: none; }
.oz-ouverture .od-propriete:hover .od-propriete-icone { transform: none; }
.oz-ouverture .od-propriete::before { transform: none; }

/* Immobilier : la cote et la trame du plan */
.oz-ouverture--immobilier .od-propriete::before {
  inset: auto 12px 3px 12px;
  height: 9px;
  background: linear-gradient(var(--or), var(--or)) center / 100% 1.5px no-repeat;
  border-inline: 1.5px solid var(--or);
  transform: scaleX(0.4);
  transition: opacity 0.25s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.oz-ouverture--immobilier .od-propriete:hover::before { opacity: 1; transform: none; }
.oz-ouverture--immobilier .od-propriete:hover {
  background:
    repeating-linear-gradient(0deg, rgba(209, 163, 38, 0.09) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(90deg, rgba(209, 163, 38, 0.09) 0 1px, transparent 1px 12px);
}
.oz-ouverture--immobilier .od-propriete:hover .od-propriete-icone { background: #1E2B26; color: #E9E2D3; }

/* Hôtellerie : le porte-clé de la chambre */
.oz-ouverture--hotellerie .od-propriete::before {
  content: '101';
  inset: -10px 14px auto auto;
  display: grid;
  place-items: end center;
  width: 30px; height: 44px;
  padding-bottom: 8px;
  border-radius: 15px 15px 15px 15px / 11px 11px 20px 20px;
  background: radial-gradient(circle at 50% 8px, var(--fond, #FFFDF7) 0 3px, transparent 3.5px), #1F2A44;
  color: #F2D27A;
  font: 600 10px/1 var(--police-texte, inherit);
  letter-spacing: 0.04em;
  transform-origin: 50% 4px;
  transform: rotate(-24deg) translateY(-6px);
  transition: opacity 0.2s ease, transform 0.3s ease;
}
.oz-ouverture--hotellerie .od-propriete:nth-child(2)::before { content: '102'; }
.oz-ouverture--hotellerie .od-propriete:nth-child(3)::before { content: '103'; }
.oz-ouverture--hotellerie .od-propriete:hover::before { opacity: 1; transform: rotate(0); animation: oz-balance 1.6s cubic-bezier(0.3, 0.6, 0.4, 1); }
@keyframes oz-balance { 0% { transform: rotate(-24deg) translateY(-6px); } 30% { transform: rotate(12deg); } 55% { transform: rotate(-6deg); } 78% { transform: rotate(3deg); } 100% { transform: rotate(0); } }
.oz-ouverture--hotellerie .od-propriete:hover { background: rgba(31, 42, 68, 0.05); }
.oz-ouverture--hotellerie .od-propriete:hover .od-propriete-icone { background: #1F2A44; color: #F2D27A; }

/* Joaillerie : l'éclat qui traverse */
.oz-ouverture--joaillerie .od-propriete { overflow: hidden; }
.oz-ouverture--joaillerie .od-propriete::before {
  inset: 0;
  opacity: 1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 236, 190, 0.75) 48%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 236, 190, 0.75) 52%, transparent 70%);
  transform: translateX(-130%);
  transition: none;
}
.oz-ouverture--joaillerie .od-propriete:hover::before { transform: translateX(130%); transition: transform 900ms cubic-bezier(0.4, 0, 0.2, 1); }
.oz-ouverture--joaillerie .od-propriete:hover { background: rgba(209, 163, 38, 0.05); }
.oz-ouverture--joaillerie .od-propriete:hover .od-propriete-icone { background: #141210; color: #F2D27A; box-shadow: 0 0 0 1px rgba(242, 210, 122, 0.55), 0 0 18px -2px rgba(242, 210, 122, 0.75); }

/* Conciergerie : le chemin jusqu'à la porte */
.oz-ouverture--conciergerie .od-propriete::before {
  inset: auto 20px 6px 76px;
  height: 2px;
  opacity: 1;
  background: repeating-linear-gradient(90deg, var(--or) 0 6px, transparent 6px 11px);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1);
}
.oz-ouverture--conciergerie .od-propriete:hover::before { transform: scaleX(1); }
.oz-ouverture--conciergerie .od-propriete:hover { background: rgba(29, 58, 74, 0.05); }
.oz-ouverture--conciergerie .od-propriete:hover .od-propriete-icone { background: #1D3A4A; color: #fff; transform: translateY(-3px); box-shadow: 0 6px 0 -3px var(--or); }

/* Yachting : la ligne de flottaison */
.oz-ouverture--yachting .od-propriete::before {
  inset: auto 14px 4px 14px;
  height: 8px;
  opacity: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8'%3E%3Cpath d='M0 4c3 0 3-3 6-3s3 3 6 3 3-3 6-3 3 3 6 3' fill='none' stroke='%23D1A326' stroke-width='1.6'/%3E%3C/svg%3E") 0 50% / 24px 8px repeat-x;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 700ms cubic-bezier(0.65, 0, 0.35, 1);
}
.oz-ouverture--yachting .od-propriete:hover::before { clip-path: inset(0 0 0 0); animation: oz-houle 2.4s linear infinite; }
@keyframes oz-houle { to { background-position: 24px 50%; } }
.oz-ouverture--yachting .od-propriete:hover { background: rgba(15, 39, 66, 0.05); }
.oz-ouverture--yachting .od-propriete:hover .od-propriete-icone { background: #0F2742; color: #fff; animation: oz-tangue 2s ease-in-out infinite; }
@keyframes oz-tangue { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-2px); } }

/* Monaco : le double filet doré du papier à lettres */
.oz-ouverture--monaco .od-propriete::before {
  inset: 6px;
  opacity: 1;
  background: none;
  border-block: 1px solid #B8975A;
  box-shadow: inset 0 3px 0 -2px #B8975A, inset 0 -3px 0 -2px #B8975A;
  clip-path: inset(0 50% 0 50%);
  transition: clip-path 600ms cubic-bezier(0.65, 0, 0.35, 1);
}
.oz-ouverture--monaco .od-propriete:hover::before { clip-path: inset(0 0 0 0); }
.oz-ouverture--monaco .od-propriete:hover { background: #FBF6EC; }
.oz-ouverture--monaco .od-propriete:hover .od-propriete-icone { background: #5B1A22; color: #F5F0E6; }

/* Nice (21/10/2026) : le même double filet, à l'ocre des façades */
.oz-ouverture--nice .od-propriete::before {
  inset: 6px;
  opacity: 1;
  background: none;
  border-block: 1px solid #C98A3E;
  box-shadow: inset 0 3px 0 -2px #C98A3E, inset 0 -3px 0 -2px #C98A3E;
  clip-path: inset(0 50% 0 50%);
  transition: clip-path 600ms cubic-bezier(0.65, 0, 0.35, 1);
}
.oz-ouverture--nice .od-propriete:hover::before { clip-path: inset(0 0 0 0); }
.oz-ouverture--nice .od-propriete:hover { background: #FBF5EA; }
.oz-ouverture--nice .od-propriete:hover .od-propriete-icone { background: #1E3A5C; color: #F7F1E6; }

/* Côte d'Azur : le soleil qui se lève sur l'horizon */
.oz-ouverture--cotedazur .od-propriete { overflow: hidden; }
.oz-ouverture--cotedazur .od-propriete::before {
  inset: auto 18px 0 auto;
  width: 46px; height: 46px;
  border-radius: 50%;
  opacity: 1;
  background: radial-gradient(circle, #F2C27A 0 55%, rgba(242, 194, 122, 0.25) 56% 100%);
  transform: translateY(100%);
  transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.oz-ouverture--cotedazur .od-propriete:hover::before { transform: translateY(45%); }
.oz-ouverture--cotedazur .od-propriete:hover { background: linear-gradient(180deg, rgba(47, 111, 163, 0.06), rgba(47, 111, 163, 0.12)); box-shadow: inset 0 -1.5px 0 #2F6FA3; }
.oz-ouverture--cotedazur .od-propriete:hover .od-propriete-icone { background: #2F6FA3; color: #fff; }

/* Le poinçon des cartes prend la forme du secteur. */
[data-oz-poincon="monaco"]::before { clip-path: polygon(0 100%, 0 30%, 25% 60%, 50% 0, 75% 60%, 100% 30%, 100% 100%); width: 15px; height: 12px; }
[data-oz-poincon="cotedazur"]::before { clip-path: circle(50%); width: 12px; height: 12px; box-shadow: none; }
[data-oz-poincon="nice"]::before { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 13px; height: 13px; box-shadow: none; }
[data-oz-poincon="yachting"]::before { clip-path: none; box-shadow: none; width: 16px; height: 16px; -webkit-mask: var(--oz-forme) center / contain no-repeat; mask: var(--oz-forme) center / contain no-repeat; }
[data-oz-poincon="yachting"] { --oz-forme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.5a3 3 0 0 1 1 5.8V9h4v2.2h-4v8.2a7.5 7.5 0 0 0 6.2-6.1l-2.1.3 3.4-4 1.9 4.9-1.5-.6A9.8 9.8 0 0 1 12 21.8a9.8 9.8 0 0 1-8.9-7.9l-1.5.6 1.9-4.9 3.4 4-2.1-.3a7.5 7.5 0 0 0 6.2 6.1v-8.2H7V9h4V7.3a3 3 0 0 1 1-5.8Zm0 1.9a1.1 1.1 0 1 0 0 2.2 1.1 1.1 0 0 0 0-2.2Z'/%3E%3C/svg%3E"); }
[data-oz-poincon="immobilier"]::before { clip-path: polygon(50% 0, 100% 46%, 84% 46%, 84% 100%, 16% 100%, 16% 46%, 0 46%); width: 14px; height: 14px; }
[data-oz-poincon="hotellerie"]::before, [data-oz-poincon="conciergerie"]::before { clip-path: none; box-shadow: none; width: 16px; height: 16px; -webkit-mask: var(--oz-forme) center / contain no-repeat; mask: var(--oz-forme) center / contain no-repeat; }
[data-oz-poincon="hotellerie"] { --oz-forme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M7 7a5 5 0 1 1 0 10A5 5 0 0 1 7 7Zm0 3a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z'/%3E%3Cpath d='M11.5 10.6h11v2.8h-2v3.2h-2.6v-3.2h-1.6v2.2h-2.6v-2.2h-2.2Z'/%3E%3C/svg%3E"); }
[data-oz-poincon="conciergerie"] { --oz-forme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.5a7.5 7.5 0 0 0-7.5 7.5c0 5.4 7.5 13.5 7.5 13.5S19.5 14.4 19.5 9A7.5 7.5 0 0 0 12 1.5Zm0 4.6a2.9 2.9 0 1 1 0 5.8 2.9 2.9 0 0 1 0-5.8Z'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: reduce) {
  .oz-ouverture .od-propriete::before { animation: none !important; transition: none !important; }
}

/* E-commerce (21/10/2026) : le ticket de caisse qui se déroule */
.oz-ouverture--boutique .od-propriete { overflow: hidden; }
.oz-ouverture--boutique .od-propriete::before {
  inset: 0 auto 0 0;
  width: 5px;
  opacity: 1;
  background: repeating-linear-gradient(180deg, #A47F48 0 6px, transparent 6px 10px);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 650ms cubic-bezier(0.65, 0, 0.35, 1);
}
.oz-ouverture--boutique .od-propriete:hover::before { transform: scaleY(1); }
.oz-ouverture--boutique .od-propriete:hover { background: #FAF6EF; }
.oz-ouverture--boutique .od-propriete:hover .od-propriete-icone { background: #17120E; color: #E4C28A; animation: oz-sac 900ms cubic-bezier(0.3, 1.5, 0.5, 1); }
@keyframes oz-sac { 0% { transform: translateY(0); } 40% { transform: translateY(-5px) rotate(-6deg); } 100% { transform: none; } }
[data-oz-poincon="boutique"]::before { clip-path: none; box-shadow: none; width: 15px; height: 15px; -webkit-mask: var(--oz-forme) center / contain no-repeat; mask: var(--oz-forme) center / contain no-repeat; }
[data-oz-poincon="boutique"] { --oz-forme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8 7V6a4 4 0 0 1 8 0v1h4l-1.5 15h-13L4 7Zm2 0h4V6a2 2 0 0 0-4 0Z'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: reduce) { .oz-ouverture--boutique .od-propriete:hover .od-propriete-icone { animation: none; } }

/* Refonte (21/10/2026) : le volet « après » qui balaie l'ancienne carte */
.oz-ouverture--refonte .od-propriete { overflow: hidden; }
.oz-ouverture--refonte .od-propriete::before {
  inset: 0;
  opacity: 1;
  background: linear-gradient(90deg, rgba(180, 104, 62, 0.08) 0 calc(100% - 2px), #B4683E calc(100% - 2px));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1);
}
.oz-ouverture--refonte .od-propriete:hover::before { transform: scaleX(1); }
.oz-ouverture--refonte .od-propriete:hover .od-propriete-icone { background: #1F2420; color: #F2C9A8; }
[data-oz-poincon="refonte"]::before { clip-path: none; width: 15px; height: 11px; border-radius: 2px; box-shadow: none; background: linear-gradient(90deg, rgba(209, 163, 38, 0.35) 0 44%, transparent 44% 56%, var(--or) 56%); }
/* Refonte : le site refait, dans le téléphone de « Ce que ça change » */
.oz-rf-tete { display: flex; justify-content: space-between; align-items: center; height: 34px; padding: 0 14px; flex: none; }
.oz-rf-tete b { font: 400 13px/1 'Fraunces', Georgia, serif; letter-spacing: 0.3em; }
.oz-rf-tete i { width: 16px; height: 8px; border-block: 1.5px solid #1F2420; }
.oz-rf-photo { position: relative; flex: none; height: 46%; overflow: hidden; }
.oz-rf-photo img { width: 100%; height: 100%; object-fit: cover; }
.oz-rf-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.6)); }
.oz-rf-titre { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 1; display: grid; gap: 3px; color: #fff; }
.oz-rf-titre small { font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.oz-rf-titre b { font: 400 15px/1.15 'Fraunces', Georgia, serif; }
.oz-rf-form { display: grid; gap: 7px; padding: 12px 12px 8px; background: #F5F1E8; flex: 1; align-content: start; }
.oz-rf-form > small { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: #6B6253; }
.oz-rf-puces { display: flex; flex-wrap: wrap; gap: 4px; }
.oz-rf-puces i { padding: 4px 8px; border-radius: 99px; box-shadow: inset 0 0 0 1px #CFC6B4; font-style: normal; font-size: 9.5px; }
.oz-rf-puces .est-choisi { background: #1F2420; color: #F5F1E8; box-shadow: none; }
.oz-rf-ligne { display: flex; justify-content: space-between; padding: 6px 9px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #E2DACA; font-size: 10px; }
.oz-rf-ligne small { color: #6B6253; font-size: 10px; }
.oz-rf-bouton { padding: 8px; border-radius: 9px; background: #B4683E; color: #fff; font-size: 10.5px; font-weight: 600; text-align: center; }
.oz-rf-chrono { align-self: center; margin: 6px 0 10px; padding: 3px 9px; border-radius: 99px; background: #E5F3EA; color: #1F7A45; font-size: 9.5px; font-weight: 700; }

/* Site vitrine (21/10/2026) : l'arche du domaine qui se lève derrière la carte */
.oz-ouverture--vitrine .od-propriete { overflow: hidden; }
.oz-ouverture--vitrine .od-propriete::before {
  inset: auto 16px 0 auto;
  width: 44px; height: 56px;
  opacity: 1;
  border-radius: 999px 999px 0 0;
  background: none;
  box-shadow: inset 0 0 0 1.5px #B8704F;
  transform: translateY(100%);
  transition: transform 650ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.oz-ouverture--vitrine .od-propriete:hover::before { transform: translateY(18%); }
.oz-ouverture--vitrine .od-propriete:hover { background: #FBF6EE; }
.oz-ouverture--vitrine .od-propriete:hover .od-propriete-icone { background: #1F1D1A; color: #F0C9B4; }
[data-oz-poincon="vitrine"]::before { clip-path: none; box-shadow: none; width: 11px; height: 14px; border-radius: 999px 999px 1px 1px; }

/* Automobile (21/10/2026) : la ligne blanche de la route qui défile sous la carte */
.oz-ouverture--automobile .od-propriete { overflow: hidden; }
.oz-ouverture--automobile .od-propriete::before {
  inset: auto 0 6px 0;
  height: 2px;
  opacity: 1;
  background: repeating-linear-gradient(90deg, #C9A35B 0 14px, transparent 14px 26px);
  background-size: 26px 2px;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 500ms cubic-bezier(0.65, 0, 0.35, 1);
}
.oz-ouverture--automobile .od-propriete:hover::before { clip-path: inset(0 0 0 0); animation: oz-route 700ms linear infinite; }
@keyframes oz-route { to { background-position: -26px 0; } }
.oz-ouverture--automobile .od-propriete:hover { background: #F7F4EE; }
.oz-ouverture--automobile .od-propriete:hover .od-propriete-icone { background: #10151F; color: #C9A35B; }
[data-oz-poincon="automobile"]::before { clip-path: none; box-shadow: none; width: 16px; height: 16px; -webkit-mask: var(--oz-forme) center / contain no-repeat; mask: var(--oz-forme) center / contain no-repeat; }
[data-oz-poincon="automobile"] { --oz-forme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 2.2a7.8 7.8 0 0 0-7.6 6h4.1a3.6 3.6 0 0 1 7 0h4.1a7.8 7.8 0 0 0-7.6-6Zm-1.6 15.4v-3.9a3.6 3.6 0 0 1-2-2.4H4.5a7.8 7.8 0 0 0 5.9 6.3Zm3.2 0a7.8 7.8 0 0 0 5.9-6.3h-3.9a3.6 3.6 0 0 1-2 2.4ZM12 10.6a1.4 1.4 0 1 0 0 2.8 1.4 1.4 0 0 0 0-2.8Z'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: reduce) { .oz-ouverture--automobile .od-propriete:hover::before { animation: none; } }

/* Paris (21/10/2026) : le zinc des toits, une ligne de faîtage qui se pose */
.oz-ouverture--paris .od-propriete { overflow: hidden; }
.oz-ouverture--paris .od-propriete::before {
  inset: 0 0 auto 0;
  height: 7px;
  opacity: 1;
  background: repeating-linear-gradient(90deg, #A88A55 0 1.5px, transparent 1.5px 9px), linear-gradient(#1F2630, #1F2630) 0 0 / 100% 1.5px no-repeat;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 650ms cubic-bezier(0.65, 0, 0.35, 1);
}
.oz-ouverture--paris .od-propriete:hover::before { clip-path: inset(0 0 0 0); }
.oz-ouverture--paris .od-propriete:hover { background: #F7F5F0; }
.oz-ouverture--paris .od-propriete:hover .od-propriete-icone { background: #1F2630; color: #E8D5A8; }
[data-oz-poincon="paris"]::before { clip-path: polygon(50% 0, 62% 70%, 100% 100%, 0 100%, 38% 70%); width: 12px; height: 15px; box-shadow: none; }

/* Réseaux sociaux (21/10/2026) : l'anneau de story qui s'allume autour de l'icône */
.oz-ouverture--reseaux .od-propriete:hover { background: #FCF8F6; }
.oz-ouverture--reseaux .od-propriete-icone { transition: box-shadow 450ms ease, background-color 300ms ease, color 300ms ease; }
.oz-ouverture--reseaux .od-propriete:hover .od-propriete-icone { background: #1F2A44; color: #fff; box-shadow: 0 0 0 2px #FFFDF7, 0 0 0 4px #DD2A7B, 0 0 18px -4px rgba(221, 42, 123, 0.7); }
.oz-ouverture--reseaux .od-propriete::before { display: none; }
[data-oz-poincon="reseaux"]::before { clip-path: none; box-shadow: none; width: 13px; height: 13px; border-radius: 4px; background: radial-gradient(circle at 50% 50%, transparent 0 2.2px, var(--or) 2.4px 3.6px, transparent 3.8px), linear-gradient(var(--or), var(--or)) center / 100% 100% no-repeat; -webkit-mask: radial-gradient(circle, #000 0 2.2px, transparent 2.4px 3.6px, #000 3.8px); mask: radial-gradient(circle, #000 0 2.2px, transparent 2.4px 3.6px, #000 3.8px); }
/* Réseaux sociaux : la messagerie, à côté du téléphone de « Ce que ça change » */
.oz-dm { display: grid; gap: 9px; padding: 16px; border-radius: 16px; background: #fff; color: #1F2A44; box-shadow: 0 30px 50px -36px rgba(40, 30, 10, 0.55); font: 400 12px/1.4 -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; }
.oz-dm-tete { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid #EFEDE8; font-size: 13px; }
.oz-dm-tete small { padding: 2px 8px; border-radius: 99px; background: #FF3040; color: #fff; font-size: 10.5px; font-weight: 700; }
.oz-dm-ligne { display: grid; grid-template-columns: 30px minmax(0, 1fr) 16px; align-items: center; gap: 10px; }
.oz-dm-ligne > i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #EFEDE8; font-style: normal; font-weight: 600; }
.oz-dm-ligne span { display: grid; min-width: 0; }
.oz-dm-ligne small { overflow: hidden; color: #6B6F7A; white-space: nowrap; text-overflow: ellipsis; }
.oz-dm-ligne img { width: 16px; height: 16px; }
.oz-dm-bulle { justify-self: end; max-width: 88%; padding: 8px 11px; border-radius: 14px 14px 4px 14px; background: linear-gradient(135deg, #7B3FE4, #3797F0); color: #fff; }
.oz-dm-ok { justify-self: end; padding: 3px 9px; border-radius: 99px; background: #E5F3EA; color: #1F7A45; font-size: 10.5px; font-weight: 700; }

/* Aviation privée (22/10/2026) : la traînée qui se trace et l'icône qui décolle */
.oz-ouverture--aviation .od-propriete { overflow: hidden; }
.oz-ouverture--aviation .od-propriete::before {
  inset: auto 0 10px 0;
  height: 2px;
  opacity: 1;
  background: linear-gradient(90deg, transparent, rgba(226, 88, 43, 0.15) 20%, #E2582B);
  transform: scaleX(0) rotate(-4deg);
  transform-origin: 0 50%;
  transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1);
}
.oz-ouverture--aviation .od-propriete:hover::before { transform: scaleX(1) rotate(-4deg); }
.oz-ouverture--aviation .od-propriete:hover { background: #F5F7F8; }
.oz-ouverture--aviation .od-propriete-icone { transition: transform 600ms cubic-bezier(0.3, 1.2, 0.5, 1), background-color 300ms ease, color 300ms ease; }
.oz-ouverture--aviation .od-propriete:hover .od-propriete-icone { background: #1A1F24; color: #FFB494; transform: translate(3px, -4px) rotate(-8deg); }
[data-oz-poincon="aviation"]::before { clip-path: none; box-shadow: none; width: 16px; height: 16px; -webkit-mask: var(--oz-forme) center / contain no-repeat; mask: var(--oz-forme) center / contain no-repeat; }
[data-oz-poincon="aviation"] { --oz-forme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.5 12c0-.8-.7-1.4-1.5-1.4h-5.2L9.6 2.5H7.5l2.6 8.1H5L3.3 8.4H1.8l1 3.6-1 3.6h1.5L5 13.4h5.1l-2.6 8.1h2.1l5.2-8.1H20c.8 0 1.5-.6 1.5-1.4Z'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: reduce) { .oz-ouverture--aviation .od-propriete:hover .od-propriete-icone { transform: none; } }

/* Gestion de patrimoine (22/10/2026) : les lignes du registre qui se posent */
.oz-ouverture--patrimoine .od-propriete { overflow: hidden; }
.oz-ouverture--patrimoine .od-propriete::before {
  inset: 0;
  opacity: 0;
  background: repeating-linear-gradient(180deg, transparent 0 13px, rgba(23, 51, 43, 0.1) 13px 14px), linear-gradient(90deg, transparent 10px, rgba(156, 131, 80, 0.55) 10px 11px, transparent 11px);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 600ms cubic-bezier(0.65, 0, 0.35, 1), opacity 200ms ease;
}
.oz-ouverture--patrimoine .od-propriete:hover::before { opacity: 1; clip-path: inset(0 0 0 0); }
.oz-ouverture--patrimoine .od-propriete:hover { background: #FAF8F3; }
.oz-ouverture--patrimoine .od-propriete:hover .od-propriete-icone { background: #17332B; color: #C9B27E; }
[data-oz-poincon="patrimoine"]::before { clip-path: polygon(0 100%, 0 86%, 12% 86%, 12% 30%, 4% 30%, 4% 18%, 50% 0, 96% 18%, 96% 30%, 88% 30%, 88% 86%, 100% 86%, 100% 100%); width: 14px; height: 15px; box-shadow: none; }

/* Architecture intérieure (22/10/2026) : l'équerre qui se trace dans l'angle */
.oz-ouverture--architecture .od-propriete::before {
  inset: 8px auto auto 8px;
  width: 30px;
  height: 30px;
  opacity: 0;
  border-top: 1.5px solid #A0674B;
  border-left: 1.5px solid #A0674B;
  background: linear-gradient(135deg, rgba(160, 103, 75, 0.12) 0 50%, transparent 50%);
  transform: scale(0.4);
  transform-origin: 0 0;
  transition: opacity 250ms ease, transform 550ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.oz-ouverture--architecture .od-propriete:hover::before { opacity: 1; transform: none; }
.oz-ouverture--architecture .od-propriete:hover { background: #F6F2EC; }
.oz-ouverture--architecture .od-propriete:hover .od-propriete-icone { background: #2E2620; color: #E4C4B0; }
[data-oz-poincon="architecture"]::before { clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 82%, 18% 82%, 18% 0); width: 14px; height: 14px; box-shadow: none; }

/* ═══ PAGES VILLE × SECTEUR (22/10/2026) : survols et poinçons ═══
   · Immobilier à Monaco : les fenêtres d'une tour qui s'allument, étage
     par étage (la ville verticale) ; poinçon en deux tours.
   · Yachting à Antibes : le pavillon qu'on hisse au mât ; poinçon en
     rose des vents.
   · Hôtellerie à Saint-Tropez : le lambrequin rayé du parasol qui se
     déroule ; poinçon en parasol. */
.oz-ouverture--immomonaco .od-propriete { overflow: hidden; }
.oz-ouverture--immomonaco .od-propriete::before {
  inset: 10px 14px 10px auto;
  width: 14px;
  opacity: 1;
  background: repeating-linear-gradient(180deg, #D3A48F 0 5px, transparent 5px 9px) center / 6px 100% no-repeat;
  box-shadow: inset 0 0 0 1px rgba(21, 32, 43, 0.25);
  clip-path: inset(100% 0 0 0);
  transition: clip-path 800ms steps(8, end);
}
.oz-ouverture--immomonaco .od-propriete:hover::before { clip-path: inset(0 0 0 0); }
.oz-ouverture--immomonaco .od-propriete:hover { background: #F8F3EE; }
.oz-ouverture--immomonaco .od-propriete:hover .od-propriete-icone { background: #15202B; color: #E2BBA9; }

.oz-ouverture--yachtantibes .od-propriete { overflow: hidden; }
.oz-ouverture--yachtantibes .od-propriete::before {
  inset: 8px 16px 8px auto;
  width: 20px;
  opacity: 0;
  background:
    linear-gradient(135deg, #E0A526 50%, #0B2E2B 50%) 2px 0 / 16px 12px no-repeat,
    linear-gradient(#0B2E2B, #0B2E2B) 0 0 / 1.5px 100% no-repeat;
  background-position: 2px 100%, 0 0;
  transition: opacity 250ms ease, background-position 700ms cubic-bezier(0.3, 1.2, 0.5, 1);
}
.oz-ouverture--yachtantibes .od-propriete:hover::before { opacity: 1; background-position: 2px 0, 0 0; }
.oz-ouverture--yachtantibes .od-propriete:hover { background: linear-gradient(rgba(11, 46, 43, 0.05) 1px, transparent 1px) 0 0 / 14px 14px, linear-gradient(90deg, rgba(11, 46, 43, 0.05) 1px, transparent 1px) 0 0 / 14px 14px; }
.oz-ouverture--yachtantibes .od-propriete:hover .od-propriete-icone { background: #0B2E2B; color: #E0A526; }

.oz-ouverture--hoteltropez .od-propriete { overflow: hidden; }
.oz-ouverture--hoteltropez .od-propriete::before {
  inset: 0 0 auto 0;
  height: 7px;
  opacity: 1;
  background: repeating-linear-gradient(90deg, #D9663A 0 12px, #FBF3E6 12px 24px);
  -webkit-mask: radial-gradient(circle at 6px 7px, transparent 3px, #000 3.5px) 0 0 / 12px 7px;
  mask: radial-gradient(circle at 6px 7px, transparent 3px, #000 3.5px) 0 0 / 12px 7px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 650ms cubic-bezier(0.65, 0, 0.35, 1);
}
.oz-ouverture--hoteltropez .od-propriete:hover::before { transform: scaleX(1); }
.oz-ouverture--hoteltropez .od-propriete:hover { background: #FCF5EA; }
.oz-ouverture--hoteltropez .od-propriete:hover .od-propriete-icone { background: #2B1C14; color: #F2B08E; }

[data-oz-poincon="immomonaco"]::before { clip-path: polygon(0 100%, 0 30%, 40% 30%, 40% 0, 100% 0, 100% 100%); width: 11px; height: 15px; box-shadow: none; }
[data-oz-poincon="yachtantibes"]::before { clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); width: 16px; height: 16px; box-shadow: none; }
[data-oz-poincon="hoteltropez"]::before { clip-path: none; box-shadow: none; width: 16px; height: 16px; -webkit-mask: var(--oz-forme) center / contain no-repeat; mask: var(--oz-forme) center / contain no-repeat; }
[data-oz-poincon="hoteltropez"] { --oz-forme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1.5 11.5a10.5 8 0 0 1 21 0Z'/%3E%3Cpath d='M11 11h2v10.5h-2Z'/%3E%3Cpath d='M6 21h12v1.5H6Z'/%3E%3C/svg%3E"); }

/* ═══ VILLES · Cannes, Antibes, Saint-Tropez (22/10/2026) ═══
   Un survol des trois propriétés et un poinçon par ville. */
/* Cannes : les rayures des parasols de la Croisette, qui se déroulent */
.oz-ouverture--cannes .od-propriete { overflow: hidden; }
.oz-ouverture--cannes .od-propriete::before {
  inset: 0 0 auto 0;
  height: 7px;
  opacity: 1;
  background: repeating-linear-gradient(90deg, #3D6E9E 0 10px, #FAF6EE 10px 20px);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 650ms cubic-bezier(0.65, 0, 0.35, 1);
}
.oz-ouverture--cannes .od-propriete:hover::before { transform: scaleX(1); }
.oz-ouverture--cannes .od-propriete:hover { background: #FBF7EF; }
.oz-ouverture--cannes .od-propriete:hover .od-propriete-icone { background: #14223A; color: #C9A45C; }

/* Antibes : la courbe d'un capteur, qui se trace */
.oz-ouverture--antibes .od-propriete::before {
  inset: auto 14px 6px 14px;
  height: 14px;
  opacity: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M0 10 12 9 22 4 32 8 44 6 54 11 66 3 78 7 90 5 102 9 120 2' fill='none' stroke='%23D1A326' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 900ms cubic-bezier(0.65, 0, 0.35, 1);
}
.oz-ouverture--antibes .od-propriete:hover::before { clip-path: inset(0 0 0 0); }
.oz-ouverture--antibes .od-propriete:hover { background: rgba(18, 58, 48, 0.05); }
.oz-ouverture--antibes .od-propriete:hover .od-propriete-icone { background: #123A30; color: #E2B93B; }

/* Saint-Tropez : la marinière qui monte, comme une vague */
.oz-ouverture--sttropez .od-propriete { overflow: hidden; }
.oz-ouverture--sttropez .od-propriete::before {
  inset: 0;
  opacity: 1;
  background: repeating-linear-gradient(180deg, rgba(36, 71, 107, 0.08) 0 5px, transparent 5px 12px);
  clip-path: inset(100% 0 0 0);
  transition: clip-path 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.oz-ouverture--sttropez .od-propriete:hover::before { clip-path: inset(0 0 0 0); }
.oz-ouverture--sttropez .od-propriete:hover { background: #FBF6EE; }
.oz-ouverture--sttropez .od-propriete:hover .od-propriete-icone { background: #D8826A; color: #fff; }

[data-oz-poincon="cannes"]::before { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); width: 15px; height: 15px; box-shadow: none; }
[data-oz-poincon="antibes"]::before { clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); width: 14px; height: 13px; box-shadow: none; }
[data-oz-poincon="sttropez"]::before { clip-path: polygon(50% 0, 54% 0, 54% 74%, 100% 74%, 82% 100%, 18% 100%, 0 74%, 46% 74%, 46% 68%, 8% 68%, 46% 6%); width: 15px; height: 16px; box-shadow: none; }

/* Vins (22/10/2026) : le vin qui monte dans la carte, couleur rosé */
.oz-ouverture--vins .od-propriete { overflow: hidden; }
.oz-ouverture--vins .od-propriete::before {
  inset: auto 0 0 0;
  height: 100%;
  opacity: 1;
  background: linear-gradient(180deg, rgba(201, 130, 111, 0.16), rgba(201, 130, 111, 0.06)), linear-gradient(#C9826F, #C9826F) 0 0 / 100% 2px no-repeat;
  transform: translateY(100%);
  transition: transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.oz-ouverture--vins .od-propriete:hover::before { transform: translateY(58%); }
.oz-ouverture--vins .od-propriete:hover .od-propriete-icone { background: #3B1F22; color: #F2C9BC; }
[data-oz-poincon="vins"]::before { clip-path: none; box-shadow: none; width: 15px; height: 15px; -webkit-mask: var(--oz-forme) center / contain no-repeat; mask: var(--oz-forme) center / contain no-repeat; }
[data-oz-poincon="vins"] { --oz-forme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h12l-.3 6.5A5.7 5.7 0 0 1 13.2 14v6H17v2H7v-2h3.8v-6a5.7 5.7 0 0 1-4.5-5.5Z'/%3E%3C/svg%3E"); }

/* Beauté (22/10/2026) : une goutte qui tombe, et son onde sous l'icône */
.oz-ouverture--beaute .od-propriete { overflow: hidden; }
.oz-ouverture--beaute .od-propriete::before {
  inset: 50% auto auto 41px;
  width: 30px; height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  opacity: 0;
  background: none;
  box-shadow: 0 0 0 1.5px #A9BDB1;
  transform: scale(0.6);
  transition: none;
}
.oz-ouverture--beaute .od-propriete:hover::before { animation: oz-onde-soin 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite; }
@keyframes oz-onde-soin { 0% { opacity: 0.9; transform: scale(0.8); } 100% { opacity: 0; transform: scale(2.6); } }
.oz-ouverture--beaute .od-propriete:hover { background: #F7F5F1; }
.oz-ouverture--beaute .od-propriete:hover .od-propriete-icone { background: #2F3B36; color: #E6CFC3; }
[data-oz-poincon="beaute"]::before { clip-path: none; box-shadow: none; width: 12px; height: 15px; -webkit-mask: var(--oz-forme) center / contain no-repeat; mask: var(--oz-forme) center / contain no-repeat; }
[data-oz-poincon="beaute"] { --oz-forme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 26'%3E%3Cpath d='M10 0C14 7 20 12 20 17a10 10 0 0 1-20 0C0 12 6 7 10 0Z'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: reduce) { .oz-ouverture--beaute .od-propriete:hover::before { animation: none; opacity: 0.6; transform: scale(1.4); } }

/* Galerie d'art (22/10/2026) : le cartel qui se glisse au bas de la carte, comme au mur */
.oz-ouverture--galerie .od-propriete { overflow: hidden; }
.oz-ouverture--galerie .od-propriete::before {
  content: 'N° 01';
  inset: auto 14px 8px auto;
  padding: 3px 7px;
  opacity: 0;
  background: #fff;
  box-shadow: 0 0 0 1px #DAD6CE, 0 6px 12px -8px rgba(0, 0, 0, 0.35);
  color: #111;
  font: 500 9.5px/1.2 var(--police-texte, inherit);
  letter-spacing: 0.06em;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.oz-ouverture--galerie .od-propriete:nth-child(2)::before { content: 'N° 02'; }
.oz-ouverture--galerie .od-propriete:nth-child(3)::before { content: 'N° 03'; }
.oz-ouverture--galerie .od-propriete:hover::before { opacity: 1; transform: none; }
.oz-ouverture--galerie .od-propriete:hover { background: #FFFFFF; box-shadow: inset 0 0 0 1px #E6E2DA; }
.oz-ouverture--galerie .od-propriete:hover .od-propriete-icone { background: #111; color: #fff; }
[data-oz-poincon="galerie"]::before { clip-path: none; width: 15px; height: 12px; background: linear-gradient(var(--or), var(--or)) center / 5px 4px no-repeat; box-shadow: inset 0 0 0 1.5px var(--or); }