/* EB Conciergerie · maquette navigable de l'accueil
   Nuancier v4 : marbre, bleu #0E2F93, or et argent en effet métal (plus de violet ni de vert depuis le 20/10), lavande. Typos : Bodoni Moda + Instrument Sans. */
:root {
  --marbre: #F5F4F1;
  --bleu: #0E2F93;
  --encre: #0A2170;
  --nuit: #071750;
  --celadon: #8CA58E;
  --lavande: #9562C7;
  --sable: #E6E2DA;
  --blanc: #fff;
  --or: linear-gradient(135deg, #8A6420 0%, #D4A93C 20%, #FFFBE6 42%, #F0CF6E 52%, #B8892F 74%, #D4A93C 88%, #8A6420 100%);
  --argent: linear-gradient(135deg, #5F646D 0%, #BFC4CB 20%, #FFFFFF 42%, #E3E6EA 52%, #8E949D 74%, #BFC4CB 88%, #5F646D 100%);
  --serif: "Bodoni Moda", "Didot", Georgia, serif;
  --sans: "Instrument Sans", system-ui, sans-serif;
  --pad: clamp(20px, 5vw, 96px);
  --ease: cubic-bezier(.2, .7, .1, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); font-size: 17px; line-height: 1.55; color: var(--encre); background: var(--nuit); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Typo */
.t-xl, .t-l, .t-m, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; }
.t-xl { font-size: clamp(44px, 6.6vw, 104px); line-height: .98; }
.t-l { font-size: clamp(36px, 4.6vw, 72px); line-height: 1.02; }
.t-m { font-size: clamp(32px, 3.6vw, 56px); line-height: 1.04; }
.t-xl em, .t-l em, .t-m em { font-family: var(--serif); }
.label { font: 500 12px/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--bleu); margin-bottom: 18px; }
.label--clair { color: rgba(255,255,255,.82); }
.label--argent { color: #BFC4CB; }
/* Or des textes : plus soutenu que l'or des objets (pas de reflet presque blanc), trait épaissi
   (graisse 500 + dessin Bodoni « petite taille » : déliés moins fins), ombre discrète pour les fonds photo. */
.or { background: linear-gradient(100deg, #A27623 0%, #D8AE4C 28%, #F2D88A 46%, #D4A93C 60%, #B08128 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 500 !important; font-variation-settings: "opsz" 12 !important; filter: drop-shadow(0 1px 1.5px rgba(7,23,80,.45)); }
/* (!important : les chiffres dorés posent leur police avec le raccourci « font », qui remettrait graisse et dessin à zéro) */
/* Sur fond clair (marbre) : or foncé, sans ombre */
.intro .or { background-image: linear-gradient(100deg, #6E4C12 0%, #9C7020 40%, #B98A2E 60%, #7A5616 100%); filter: none; }

/* Boutons */
.btns { display: flex; flex-wrap: wrap; gap: 14px; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; border-radius: 999px; font: 600 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; border: 0; cursor: pointer; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(7,23,80,.28); }
.btn--argent { background: var(--argent); color: var(--bleu); }
.btn--bleu { background: var(--bleu); color: #fff; }
.btn--contour { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); }


/* En-tête */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px var(--pad); transition: background .5s var(--ease), padding .5s var(--ease); }
.hdr.is-solid { background: rgba(10,33,112,.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding-block: 10px; }
.hdr__logo img { height: 58px; width: auto; }
.hdr__nav { display: flex; gap: 32px; font: 500 14px/1 var(--sans); color: #fff; letter-spacing: .02em; }
.hdr__nav a { opacity: .9; transition: opacity .3s; }
.hdr__nav a:hover { opacity: .6; }
.hdr__cta { padding: 13px 22px; }

/* 1 · Ouverture */
.hero { position: relative; height: 520vh; background: var(--nuit); }
.hero__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hero__poster, .hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,23,80,.3) 0%, rgba(7,23,80,0) 24%, rgba(7,23,80,0) 72%, rgba(7,23,80,.45) 100%); }
.hero__veil::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,23,80,.82) 0%, rgba(7,23,80,.5) 42%, transparent 70%), linear-gradient(0deg, rgba(7,23,80,.55) 0%, transparent 35%); opacity: var(--end, 0); }
/* Voile léger : les lettres gardent leur lisibilité par une ombre douce plutôt que par un filtre sur toute la vidéo */
.hero__eb, .hero__acc { text-shadow: 0 2px 30px rgba(7,23,80,.35); }
.hero__conc { filter: drop-shadow(0 2px 2px rgba(7,23,80,.55)) drop-shadow(0 0 24px rgba(7,23,80,.6)); }
.hero__eb { position: absolute; left: 0; right: 0; top: 13vh; display: flex; justify-content: center; gap: 4vw; font: 400 clamp(150px, 27vw, 420px)/.82 var(--serif); color: #fff; pointer-events: none; }
.hero__e { transform: translateX(calc(var(--split, 0) * -18vw)); }
.hero__b { transform: translateX(calc(var(--split, 0) * 18vw)); }
.hero__eb { opacity: var(--ebo, 1); }
.hero__conc { position: absolute; left: 0; right: 0; top: 56vh; text-align: center; font: italic 400 clamp(56px, 9.4vw, 150px)/1 var(--serif); opacity: var(--conc, 1); transform: translateY(calc(var(--split, 0) * -6vh)); }
.hero__acc { position: absolute; left: 0; right: 0; top: 37vh; text-align: center; font: 400 clamp(34px, 4.4vw, 68px)/1.08 var(--serif); color: #fff; opacity: var(--acc, 0); transform: translateY(calc((1 - var(--acc, 0)) * 30px)); }
.hero__end { position: absolute; left: var(--pad); bottom: 9vh; max-width: 640px; color: #fff; opacity: var(--end, 0); transform: translateY(calc((1 - var(--end, 0)) * 40px)); pointer-events: var(--endpe, none); }
.hero__end .t-xl { margin-bottom: 22px; }
.hero__txt { max-width: 520px; color: rgba(255,255,255,.9); margin-bottom: 30px; }
.hero__eng { list-style: none; display: flex; gap: 48px; margin-top: 44px; }
.hero__eng strong { display: block; font: 400 48px/1 var(--serif); }
.hero__eng span { font-size: 13px; color: rgba(255,255,255,.82); }
.hero__meta { position: absolute; left: var(--pad); right: var(--pad); bottom: 28px; display: flex; justify-content: space-between; font: 500 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: #fff; opacity: var(--meta, 1); }

/* 2 · Bandeau + la conciergerie */
.band { background: var(--bleu); overflow: hidden; padding: 30px 0; }
.band__track { display: flex; align-items: center; gap: 36px; white-space: nowrap; width: max-content; transform: translateX(var(--bx, 0px)); }
.band span { font: italic 400 clamp(32px, 4vw, 56px)/1 var(--serif); color: var(--marbre); }
.band i { width: 26px; height: 26px; background: var(--or); clip-path: polygon(50% 0, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0 50%, 43% 43%); flex: none; }
.intro { background: var(--marbre); display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: center; padding: clamp(80px, 12vw, 180px) var(--pad); position: relative; overflow: hidden; }
.intro .t-l { color: var(--bleu); }
.intro__txt p:not(.label) { max-width: 560px; margin: 26px 0 34px; }
.intro__fig { position: relative; min-height: 520px; display: grid; place-items: center; }
.disc { width: min(440px, 80vw); aspect-ratio: 1; border-radius: 50%; background: var(--bleu); color: #fff; display: grid; place-content: center; text-align: center; box-shadow: 0 0 0 16px var(--marbre), 0 0 0 19px #C9CDD3; }
.disc strong { font: 400 clamp(140px, 16vw, 220px)/.9 var(--serif); }
.disc span { font: 400 30px/1.15 var(--serif); }
.intro__num { position: absolute; text-align: center; }
.intro__num strong { display: block; font: 400 56px/1 var(--serif); }
.intro__num span { font: 500 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.intro__num--a { left: 0; bottom: 6%; }
.intro__num--b { right: 0; top: 4%; }

/* 3 · Le service en images : passage horizontal, arrêt sur chaque vidéo */
.hz { position: relative; height: 700vh; background: var(--nuit); }
.hz__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hz__head { position: absolute; z-index: 3; top: 96px; left: var(--pad); right: var(--pad); display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.hz__head .label { margin: 0; }
.pill { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-radius: 999px; background: rgba(245,244,241,.92); box-shadow: inset 0 0 0 1.5px #BFC4CB; font: 500 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--bleu); }
.pill b { color: var(--bleu); font-weight: 600; }
.pill > span:first-child { display: none; } /* « Le service en images » est déjà écrit à gauche : la pastille reste courte et dégage l'arche */
.pill__sep { color: #8E949D; }
.pill__bar { width: 110px; height: 3px; background: rgba(191,196,203,.6); border-radius: 2px; overflow: hidden; }
.pill__bar em { display: block; height: 100%; background: var(--or); transform-origin: left; transform: scaleX(var(--hp, .2)); }
.hz__track { display: flex; height: 100%; width: 300vw; transform: translate3d(calc(var(--hx, 0) * -100vw), 0, 0); will-change: transform; }
.hz__panel { position: relative; width: 100vw; height: 100%; flex: none; overflow: hidden; }
.hz__img { position: absolute; inset: 0; overflow: hidden; }
.hz__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.04 + var(--hx, 0) * .08)); }
.hz__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,23,80,.82) 0%, rgba(7,23,80,.45) 40%, transparent 70%), linear-gradient(180deg, rgba(7,23,80,.6) 0%, transparent 30%, transparent 55%, rgba(7,23,80,.85) 100%); }
.hz__intro { position: absolute; z-index: 2; left: var(--pad); bottom: 11vh; max-width: 680px; color: #fff; }
.hz__intro p:not(.label) { margin-top: 18px; font-size: 18px; color: rgba(255,255,255,.88); }
.hz__n { font: 400 64px/1 var(--serif); display: inline-block; margin-bottom: 10px; }

/* Panneaux vidéo : texte à gauche, arche carrée à droite. La vidéo avance au scroll, panneau à l'arrêt. */
.hz__panel--video { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4vw; padding: 140px var(--pad) 16px; color: #fff;
  background: radial-gradient(60vw 70vh at 72% 55%, rgba(27,63,176,.5), transparent 70%), var(--nuit); }
.hz__panel--video + .hz__panel--video { background: radial-gradient(60vw 70vh at 72% 55%, rgba(59,99,216,.5), transparent 70%), var(--bleu); }
.vp__txt { max-width: 470px; }
.vp__txt h3 { font-size: clamp(38px, 4vw, 64px); line-height: 1.02; margin: 6px 0 18px; }
.vp__txt p:not(.label) { color: rgba(255,255,255,.88); }
.vp__txt .btn { margin-top: 28px; }
.vp__frame { position: relative; width: min(calc(100vh - 160px), 56vw); aspect-ratio: 1; border-radius: 999px 999px 26px 26px; overflow: hidden;
  box-shadow: 0 0 0 12px rgba(255,255,255,.07), 0 0 0 14px #BFC4CB, 0 40px 90px rgba(4,12,46,.55); }
.vp__poster, .vp__canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vp__poster { transform: scale(calc(1.12 - var(--vp, 0) * .12)); }
.vp__frame.is-seq .vp__poster { transform: none; } /* l'affiche est la 1re image de la vidéo : pas de zoom, pas de saut */
.vp__canvas { opacity: 0; transition: opacity .4s var(--ease); }
.vp__frame.has-seq .vp__canvas { opacity: 1; }
.vp__bar { position: absolute; left: 22%; right: 22%; bottom: 18px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.3); overflow: hidden; }
.vp__bar em { display: block; height: 100%; background: linear-gradient(90deg, #8A6420, #FFFBE6 55%, #D4A93C); transform-origin: left; transform: scaleX(var(--vp, 0)); }

/* 4 · Les biens : l'arche s'ouvre sur l'écran, puis la galerie */
.biens { position: relative; background: var(--nuit); color: #fff; }
.biens__pin { height: 220vh; }
.biens__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; --ax: 33vw; --ar: 17vw; --at: 26vh; --ab: 8vh; }
.biens__head { position: absolute; z-index: 2; top: 104px; left: var(--pad); right: var(--pad); }
.biens__head h2 { max-width: 15ch; }
.biens__arch { position: absolute; inset: 0;
  clip-path: inset(calc((1 - var(--bo, 0)) * var(--at)) calc((1 - var(--bo, 0)) * var(--ax)) calc((1 - var(--bo, 0)) * var(--ab)) round calc((1 - var(--bo, 0)) * var(--ar)) calc((1 - var(--bo, 0)) * var(--ar)) calc((1 - var(--bo, 0)) * 26px) calc((1 - var(--bo, 0)) * 26px)); }
.biens__arch img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.25 - var(--bo, 0) * .25)); }
.biens__arch::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,23,80,.7), transparent 40%); opacity: var(--bo, 0); }
.biens__arch small { position: absolute; right: var(--pad); bottom: 24px; z-index: 1; font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #BFC4CB; opacity: var(--bo, 0); }
/* Grille des biens : rangées alignées (10 biens et plus), chaque carte tient entière dans l'écran */
.biens__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 70px 40px; padding: clamp(100px, 10vw, 150px) var(--pad) 40px; }
.bien { display: block; color: #fff; }
.bien img { width: 100%; aspect-ratio: 4 / 5; max-height: calc(100vh - 270px); max-height: calc(100svh - 270px); object-fit: cover; border-radius: 999px 999px 22px 22px; box-shadow: 0 0 0 8px rgba(255,255,255,.06), 0 0 0 9.5px #BFC4CB; transition: transform .7s var(--ease), box-shadow .7s var(--ease); }
.bien:hover img { transform: translateY(-6px); box-shadow: 0 0 0 8px rgba(255,255,255,.1), 0 0 0 9.5px #E3E6EA, 0 24px 50px rgba(0,0,0,.35); }
.bien__cap { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: baseline; margin-top: 24px; }
.bien__cap .or { font: 400 34px/1 var(--serif); grid-row: span 3; }
.bien h3 { font-size: clamp(24px, 1.9vw, 30px); line-height: 1.1; }
.bien p { color: rgba(255,255,255,.8); margin-top: 6px; font-size: 15px; }
.bien small { display: block; margin-top: 10px; font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #BFC4CB; }
.bien small b { color: #fff; font-weight: 600; }
.biens__cta { text-align: center; padding: 40px var(--pad) clamp(100px, 12vw, 160px); }
/* Version « en construction » : à la place de la grille, l'annonce des logements à venir */
.biens__soon { display: grid; justify-items: center; gap: 18px; text-align: center; padding: clamp(80px, 9vw, 130px) var(--pad) clamp(100px, 12vw, 160px); }
.biens__soon p { max-width: 36rem; color: rgba(255,255,255,.86); }
.biens__soon .btn { margin-top: 14px; }
.biens__pastille { padding: 10px 20px; border-radius: 999px; background: var(--argent); color: var(--bleu); font: 600 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; }

/* 4 · Notre histoire */
.story { position: relative; min-height: 100vh; overflow: hidden; background: var(--encre); color: #fff; display: grid; align-items: center; }
.story__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.06) translateY(var(--sy, 0px)); }
.story__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,23,80,.35) 0%, rgba(7,23,80,.55) 40%, rgba(7,23,80,.92) 62%); }
.story__inner { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: center; padding: 140px var(--pad); }
.story__arch { width: min(460px, 80vw); aspect-ratio: 3 / 4; margin: 0 auto; border-radius: 999px 999px 18px 18px; background: linear-gradient(180deg, rgba(245,244,241,.92), rgba(230,226,218,.95)); box-shadow: 0 0 0 10px rgba(245,244,241,.18), 0 0 0 12px #C9CDD3, 0 30px 80px rgba(7,23,80,.45); display: grid; place-items: center; text-align: center; color: rgba(10,33,112,.55); font: 500 13px/1.6 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.story__txt p:not(.label) { max-width: 540px; color: rgba(255,255,255,.9); margin-top: 24px; }
.story__note { font-size: 13px; color: #BFC4CB !important; margin-top: 10px !important; }
.story__piliers { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.story__piliers li { padding: 10px 18px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); font: 500 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.story__piliers li:nth-child(2) { background: var(--argent); color: var(--bleu); box-shadow: none; }
.story__sign { font: 400 22px/1.2 var(--serif) !important; }

/* 5 · Services */
.svc { background: var(--bleu); color: #fff; padding-top: clamp(100px, 12vw, 180px); }
.svc__head { padding: 0 var(--pad) 40px; }
/* Les 3 arguments, au-dessus de la mosaïque */
.svc__why { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 40px; padding: 10px var(--pad) 30px; }
.svc__why li { padding-top: 22px; border-top: 1px solid; border-image: var(--argent) 1; }
.svc__why b { display: block; font: 400 30px/1.1 var(--serif); }
.svc__why p { margin-top: 10px; font-size: 16px; color: rgba(255,255,255,.86); max-width: 34ch; }
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 300px; gap: 18px; padding: 40px var(--pad) clamp(100px, 12vw, 160px); }
.tile { position: relative; border-radius: 22px; overflow: hidden; padding: 28px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; }
.tile h3 { font-size: 30px; line-height: 1.05; margin: 8px 0 8px; }
.tile p { font-size: 15px; color: rgba(255,255,255,.88); max-width: 34ch; }
.tile > span.or, .tile div > span.or { font: 400 34px/1 var(--serif); }
.tile--big { grid-column: span 2; grid-row: span 2; }
.tile--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.tile--img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(7,23,80,.88)); }
.tile--img > div { position: relative; z-index: 1; }
.tile--img:hover img { transform: scale(1.06); }
.tile--marbre { background: var(--marbre); }
.tile--marbre h3 { color: var(--bleu); }
.tile--marbre p { color: rgba(10,33,112,.85); }
.tile__big { font: 400 72px/1 var(--serif); margin-bottom: auto; }
.tile--argent { background: var(--argent); }
.tile--argent h3, .tile--argent p { color: var(--nuit); }
/* or foncé sur les tuiles claires */
.tile--marbre .or, .tile--argent .or { background-image: linear-gradient(100deg, #6E4C12 0%, #9C7020 40%, #B98A2E 60%, #7A5616 100%); filter: none; }
.tile--encre { background: var(--nuit); box-shadow: inset 0 0 0 1.5px #BFC4CB; }
.tile__graph { position: absolute; right: 22px; top: 26px; width: 55%; }
.tile--bleu { background: linear-gradient(160deg, #1B3FB0, var(--encre)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }

/* 6 · Avis */
.avis { position: relative; min-height: 100vh; display: grid; place-items: center; overflow: hidden; padding: 120px var(--pad); }
.bgvid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avis__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,47,147,.35), rgba(7,23,80,.55)); }
.avis__card { position: relative; max-width: 1100px; padding: clamp(36px, 5vw, 72px); border-radius: 32px; background: rgba(14,47,147,.78); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 40px 100px rgba(7,23,80,.5); color: #fff; }
.avis__star { display: block; width: 36px; height: 36px; background: var(--or); clip-path: polygon(50% 0, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0 50%, 43% 43%); margin-bottom: 28px; }
.avis blockquote { font: italic 400 clamp(30px, 3.8vw, 58px)/1.14 var(--serif); }
.avis blockquote .w { opacity: .26; transition: opacity .35s linear; }
.avis blockquote .w.on { opacity: 1; }
.avis figcaption { margin-top: 30px; font: 500 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.88); }

/* 7 · La formule */
.formule { display: grid; grid-template-columns: 1fr 1fr; background: var(--nuit); color: #fff; }
.formule__img { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.formule__img img { width: 100%; height: 100%; object-fit: cover; }
.formule__txt { padding: clamp(100px, 12vw, 170px) var(--pad); position: relative; }
.steps { list-style: none; margin: 46px 0 60px; }
.steps li { display: flex; gap: 26px; padding: 28px 0; border-top: 1px solid; border-image: var(--argent) 1; }
.steps b { font: 400 54px/1 var(--serif); min-width: 72px; }
.steps h3 { font-size: 30px; line-height: 1.1; margin-bottom: 8px; }
.steps p { color: rgba(255,255,255,.82); font-size: 16px; }
.macaron { position: relative; width: 300px; aspect-ratio: 1; border-radius: 50%; background: var(--bleu); box-shadow: 0 0 0 3px #C9CDD3, 0 30px 70px rgba(0,0,0,.35); display: grid; place-items: center; }
.macaron__ring { position: absolute; inset: 0; transform: rotate(var(--rot, 0deg)); }
.macaron__ring text { font: 600 10.5px var(--sans); letter-spacing: .34em; fill: url(#gAr); }
.macaron__in { text-align: center; }
.macaron__in strong { display: block; font: 400 44px/1 var(--serif); }
.macaron__in span { font-size: 12px; color: rgba(255,255,255,.85); }

/* 8 · Nous contacter (même mise en page que l'ancienne estimation) */
.est { position: relative; min-height: 100vh; overflow: hidden; color: #fff; display: grid; align-items: center; }
.est__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,23,80,.92) 0%, rgba(14,47,147,.72) 55%, rgba(14,47,147,.55) 100%); }
.est__inner { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 6vw; align-items: center; padding: 140px var(--pad); }
.est__txt p:not(.label) { max-width: 460px; color: rgba(255,255,255,.9); margin-top: 22px; }
.est__free { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.est__free i { width: 10px; height: 10px; border-radius: 50%; background: var(--or); }
.est__contact { font-size: 14px; color: rgba(255,255,255,.72) !important; }
.form { background: rgba(245,244,241,.94); color: var(--encre); padding: 36px; border-radius: 22px; box-shadow: inset 0 0 0 1.5px #BFC4CB, 0 40px 90px rgba(0,0,0,.35); display: grid; gap: 16px; }
.form label { display: grid; gap: 7px; font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.form input, .form select { font: 400 15px/1.2 var(--sans); padding: 13px 14px; border-radius: 10px; border: 1px solid #BFC4CB; background: #fff; color: var(--encre); letter-spacing: 0; text-transform: none; }
.contact__list { list-style: none; margin-top: 30px; display: grid; gap: 0; max-width: 520px; }
.contact__list li { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.22); }
.contact__list span { font: 500 11px/1.7 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #BFC4CB; }
.contact__list b { font-weight: 500; }
.form textarea { font: 400 15px/1.4 var(--sans); padding: 13px 14px; border-radius: 10px; border: 1px solid #BFC4CB; background: #fff; color: var(--encre); letter-spacing: 0; text-transform: none; resize: vertical; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form .btn { justify-content: center; margin-top: 6px; }
.form__ok { display: none; text-align: center; color: var(--bleu); font-weight: 600; }
.form.is-sent .form__ok { display: block; }

/* Pied de page */
.foot { background: var(--nuit); color: #fff; padding: 110px var(--pad) 40px; overflow: hidden; }
.foot__top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.foot__logo { height: 96px; width: auto; margin-bottom: 18px; }
.foot__tag { font: 400 26px/1.2 var(--serif); max-width: 380px; }
.foot__cols { display: flex; gap: 64px; flex-wrap: wrap; font-size: 15px; color: rgba(255,255,255,.85); }
.foot__cols p { margin-bottom: 8px; }
.foot__legal { margin-top: 70px; padding-top: 22px; border-top: 1px solid; border-image: var(--argent) 1; font-size: 13px; color: rgba(255,255,255,.6); }
.foot__name { overflow: hidden; margin-top: 30px; }
.foot__name span { display: block; text-align: center; font: 400 clamp(40px, 11.5vw, 190px)/1.02 var(--serif); color: var(--marbre); white-space: nowrap; transform: translateY(var(--ny, 60%)); }
.foot__name em { font-weight: 500; font-variation-settings: "opsz" 12; background: linear-gradient(100deg, #A27623 0%, #D8AE4C 28%, #F2D88A 46%, #D4A93C 60%, #B08128 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Apparitions */
.reveal { opacity: 0; transform: translateY(46px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ── Fiche d'un bien (bien.html) ── */
.page-bien { background: var(--marbre); }
.fb-head { padding: 56px var(--pad) 0; color: var(--encre); }
.fb-head h1 { font: 400 clamp(40px, 5.4vw, 84px)/1 var(--serif); color: var(--bleu); letter-spacing: -.01em; }
.fb-head .or, .fb-card .or { font-weight: 500; }
.fb-head .or { background-image: linear-gradient(100deg, #6E4C12 0%, #9C7020 40%, #B98A2E 60%, #7A5616 100%); filter: none; }
.fb-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 34px; margin-top: 30px; font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.fb-facts b { font: 400 30px/1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--bleu); margin-right: 8px; }
.fb-points { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.fb-points li { padding: 9px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(14,47,147,.35); font: 500 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--bleu); }
.fb-gal { padding: 108px 0 0; }
.fb-gal__track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--pad); scroll-padding: 0 var(--pad); scrollbar-width: none; outline: none; }
.fb-gal__track::-webkit-scrollbar { display: none; }
.fb-slide { flex: 0 0 min(76vw, 1100px); height: min(66vh, 640px); scroll-snap-align: start; border-radius: 22px; overflow: hidden; background: var(--sable); }
.fb-slide img { width: 100%; height: 100%; object-fit: cover; }
.fb-gal__ui { display: flex; align-items: center; gap: 16px; padding: 20px var(--pad) 0; }
.fb-gal__btn { width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--bleu); color: #fff; font-size: 20px; cursor: pointer; transition: transform .3s var(--ease); }
.fb-gal__btn:hover { transform: scale(1.06); }
.fb-gal__count { font: 500 12px/1 var(--sans); letter-spacing: .22em; color: var(--bleu); }
.fb-gal__count b { font-weight: 600; }
.fb-gal__note { margin-left: auto; font-size: 13px; color: rgba(10,33,112,.6); }
.fb-body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .8fr); gap: 6vw; padding: 64px var(--pad) 120px; color: var(--encre); }
.fb-main h2 { font: 400 clamp(30px, 2.6vw, 40px)/1.1 var(--serif); color: var(--bleu); margin: 60px 0 18px; }
.fb-main h2:first-child { margin-top: 0; }
.fb-main p { max-width: 68ch; margin-top: 14px; }
.fb-dl div { display: grid; grid-template-columns: 200px 1fr; gap: 20px; padding: 16px 0; border-top: 1px solid rgba(10,33,112,.15); }
.fb-dl dt { font: 500 12px/1.6 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--bleu); }
.fb-dl--temps div { grid-template-columns: 1fr auto; }
.fb-dl--temps dd { font: 400 22px/1.2 var(--serif); color: var(--bleu); }
.fb-equip { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 30px; }
.fb-equip li { display: flex; gap: 12px; align-items: baseline; }
.fb-equip li::before { content: ""; width: 12px; height: 12px; flex: none; background: var(--or); clip-path: polygon(50% 0, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0 50%, 43% 43%); }
.fb-card { position: sticky; top: 110px; background: var(--bleu); color: #fff; border-radius: 22px; padding: 32px; box-shadow: inset 0 0 0 1.5px #BFC4CB, 0 30px 70px rgba(7,23,80,.25); }
.fb-card h3 { font-size: 30px; line-height: 1.1; margin-bottom: 16px; }
.fb-card ul { list-style: none; margin-bottom: 26px; }
.fb-card li { padding: 10px 0; border-top: 1px solid rgba(255,255,255,.18); font-size: 15px; }
.fb-card .btn { width: 100%; justify-content: center; }
.fb-card__note { margin-top: 14px; font-size: 13px; color: rgba(255,255,255,.75); }
.est__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.fb-autres { background: var(--nuit); color: #fff; padding: 110px 0 60px; }
.fb-autres > .label, .fb-autres > h2 { padding: 0 var(--pad); }
.fb-autres__grid { padding-top: 60px; }
@media (max-width: 1023px) {
  .fb-body { grid-template-columns: 1fr; gap: 60px; }
  .fb-card { position: relative; top: 0; }
  .fb-slide { flex-basis: 86vw; height: 56vh; }
  .fb-gal__note { display: none; }
}
@media (max-width: 599px) {
  .fb-head { padding-top: 40px; }
  .fb-gal { padding-top: 90px; }
  .fb-facts { gap: 12px 22px; }
  .fb-facts b { font-size: 24px; }
  .fb-slide { flex-basis: 88vw; height: 48vh; }
  .fb-dl div { grid-template-columns: 1fr; gap: 6px; }
  .fb-dl--temps div { grid-template-columns: 1fr auto; }
  .fb-equip { grid-template-columns: 1fr; }
  .fb-card { padding: 26px; }
}

/* Mentions légales (texte de la cliente, 21/10) */
.page-legal { background: var(--marbre); }
.legal { max-width: 860px; margin: 0 auto; padding: 150px var(--pad) 110px; box-sizing: content-box; }
.legal h1 { margin: 14px 0 18px; font: 400 clamp(40px, 5.4vw, 72px)/1 var(--serif); color: var(--bleu); letter-spacing: -.01em; }
.legal h2 { margin: 56px 0 16px; font: 400 clamp(24px, 2.4vw, 32px)/1.15 var(--serif); color: var(--bleu); }
.legal p, .legal li { max-width: 72ch; margin-top: 10px; }
.legal ul { padding-left: 1.2em; }
.legal a { text-decoration: underline; text-underline-offset: 3px; }
.legal mark { background: #F4E3B5; color: var(--encre); padding: 0 4px; border-radius: 3px; }
.legal__note { font-size: 14px; color: rgba(10,33,112,.7); }
.legal__dl { margin-top: 22px; border-top: 1px solid rgba(14,47,147,.18); }
.legal__dl div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 24px; padding: 12px 0; border-bottom: 1px solid rgba(14,47,147,.18); }
.legal__dl dt { font: 500 12px/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(10,33,112,.7); }
.legal__adr { padding-left: 18px; border-left: 2px solid rgba(14,47,147,.25); }
.foot__legal a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 599px) {
  .legal { padding-top: 120px; }
  .legal__dl div { grid-template-columns: 1fr; gap: 4px; }
}

/* Responsive : ordinateur > 1023 px · tablette 600–1023 px · téléphone < 600 px (comme la maquette Figma) */
@media (max-width: 1080px) {
  .hdr__nav { display: none; }
  .bento { grid-template-columns: repeat(2, 1fr); }
}
/* Tablette et téléphone : les blocs à deux colonnes passent l'un sous l'autre */
@media (max-width: 1023px) {
  .intro, .story__inner, .est__inner, .formule { grid-template-columns: 1fr; }
  .hero__end { right: var(--pad); }
  .hz__intro { bottom: 8vh; right: var(--pad); }
  .hz__panel--video { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; justify-items: center; gap: 30px; padding: 150px var(--pad) 40px; }
  .vp__txt { width: min(100%, 620px); max-width: none; }
  .vp__frame { order: -1; width: min(calc(100vw - 2 * var(--pad) - 8px), 52vh); }
  .story__inner { padding: 120px var(--pad); }
  .story__arch { width: min(380px, 70vw); }
  .story__bg::after { background: linear-gradient(180deg, rgba(7,23,80,.4) 0%, rgba(7,23,80,.72) 40%, rgba(7,23,80,.92) 65%); }
  .formule__img { position: relative; height: 55vh; }
  .est__inner { padding: 120px var(--pad); }
  .form { width: min(100%, 600px); }
}
/* Tablette seulement */
@media (min-width: 600px) and (max-width: 1023px) {
  .intro__fig { min-height: 500px; }
  .biens__stage { --ax: 16vw; --ar: 34vw; --at: 28vh; --ab: 8vh; }
  .biens__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px 40px; }
  .macaron { margin: 0; }
}
/* Téléphone */
@media (max-width: 599px) {
  body { font-size: 16px; }
  .hdr__logo img { height: 46px; }
  .hdr__cta { padding: 11px 16px; font-size: 11px; }
  .hero { height: 460vh; }
  .hero__eb { top: 17vh; gap: 2vw; }
  .hero__conc { top: 47vh; }
  .hero__acc { top: 32vh; padding: 0 20px; }
  .hero__end { bottom: 7vh; }
  .hero__end .t-xl { font-size: 40px; margin-bottom: 14px; }
  .hero__txt { font-size: 15px; margin-bottom: 20px; }
  .hero__end .btn { padding: 13px 20px; font-size: 11px; }
  .hero__eng { gap: 18px; margin-top: 24px; }
  .hero__eng span { font-size: 11px; }
  .hero__eng strong { font-size: 34px; }
  .intro__fig { min-height: 400px; }
  .disc { width: min(440px, 64vw); box-shadow: 0 0 0 12px var(--marbre), 0 0 0 14px #C9CDD3; }
  .disc strong { font-size: 120px; }
  .disc span { font-size: 22px; }
  .intro__num strong { font-size: 42px; }
  .intro__num span { font-size: 11px; }
  .hz__head { top: 84px; justify-content: flex-end; }
  .hz__head .label { display: none; }
  .pill__bar { width: 54px; }
  .hz__panel--video { gap: 22px; padding: 130px var(--pad) 32px; }
  .vp__txt h3 { font-size: 34px; margin-bottom: 10px; }
  .vp__txt p:not(.label) { font-size: 15px; }
  .vp__txt .btn { margin-top: 16px; }
  .vp__frame { width: min(calc(100vw - 2 * var(--pad) - 8px), 46vh); }
  .hz__panel--video .hz__n { display: none; }
  .biens__stage { --ax: 12vw; --ar: 38vw; --at: 30vh; --ab: 8vh; }
  .biens__grid { grid-template-columns: 1fr; gap: 56px; }
  .story__inner { padding: 110px var(--pad); }
  .bento { grid-template-columns: 1fr; grid-auto-rows: 260px; }
  .tile--big { grid-column: auto; grid-row: span 1; }
  .formule__img { height: 60vh; }
  .macaron { width: 240px; margin: 0 auto; }
  .form__row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Version « en construction » : la grande tuile marbre (voyageurs 7 j/7) porte un grand chiffre */
.tile--big .tile__big { font-size: clamp(88px, 10vw, 170px); }
.tile--big h3 { font-size: clamp(30px, 2.8vw, 44px); }
.tile--big p { font-size: 17px; max-width: 40ch; }
/* Version « en construction » : arguments et mosaïque des 9 prestations sur téléphone */
@media (max-width: 599px) {
  .svc__why { grid-template-columns: 1fr; }
  .bento { grid-auto-rows: minmax(260px, auto); }
}

/* 02/11 : formulaires d'estimation et de contact (d'après Altego), dans le style de la section contact */
.form fieldset { border: 0; }
.pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.pastilles legend { width: 100%; margin-bottom: 9px; font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.pastilles label { display: inline-flex; cursor: pointer; }
.pastilles input { position: absolute; opacity: 0; width: 1px; height: 1px; padding: 0; border: 0; }
.pastilles span { padding: 9px 14px; border-radius: 999px; border: 1px solid #BFC4CB; background: #fff; font: 500 13px/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--encre); transition: background .2s, color .2s; }
.pastilles input:checked + span { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.pastilles input:focus-visible + span { outline: 2px solid var(--bleu); outline-offset: 2px; }
.form label.form__rgpd { display: flex; align-items: flex-start; gap: 10px; font: 400 12.5px/1.45 var(--sans); letter-spacing: 0; text-transform: none; }
.form__rgpd input { width: 16px; height: 16px; margin-top: 2px; padding: 0; flex: none; }
.form__rgpd a { text-decoration: underline; }
@media (min-width: 1024px) { .est--estim .est__inner { grid-template-columns: .9fr 1.1fr; } }

/* 04/11 : feuille de modifs de la cliente */
/* 1re page : plus de contraste, slogan lisible, « conciergerie » un peu plus petit et son g entier */
.hero__poster, .hero__canvas { filter: brightness(.8) contrast(1.15) saturate(1.05); }
/* 10/11 : plus de halo bleu derrière le slogan (Quentin : « je n'aime pas le backshadow bleu ») ; ombre neutre fine pour la lisibilité */
.hero__acc { text-shadow: 0 1px 3px rgba(0,0,0,.45), 0 0 18px rgba(0,0,0,.3); }
.hero__acc em.or { filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)) drop-shadow(0 0 10px rgba(0,0,0,.3)); }
.hero__eb { font-size: clamp(130px, 23vw, 360px); }
.hero__conc { font-size: clamp(48px, 8vw, 128px); line-height: 1.2; padding-bottom: .12em; }
/* Fin de l'ouverture : « EB conciergerie » + logo, « Grasse - Côte d'Azur » en doré, valeurs en pastilles */
.hero__id { display: flex; align-items: center; gap: 22px; }
.hero__nom { font: 400 clamp(40px, 5vw, 76px)/1 var(--serif); color: #fff; letter-spacing: -.01em; }
.hero__logo { height: clamp(58px, 6.4vw, 96px); width: auto; }
.hero__lieu { margin: 14px 0 20px; font: 600 14px/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.hero__btns { align-items: center; }
.hero__valeurs { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.hero__valeurs li { padding: 13px 18px; border-radius: 999px; background: var(--argent); color: #7A5616; font: 700 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.hero__end { max-width: 720px; }
/* Notre fonctionnement : police réduite */
.formule__txt .t-l { font-size: clamp(34px, 3.6vw, 56px); }
.steps { margin: 34px 0 48px; }
.steps li { padding: 20px 0; gap: 20px; }
.steps b { font-size: 40px; min-width: 56px; }
.steps h3 { font-size: 23px; }
.steps p { font-size: 15px; }
/* Notre histoire : encart de la photo plus petit */
.story__arch { width: min(320px, 70vw); }
/* Parlons de votre bien : tient sur un écran */
#contact { min-height: 0; }
#contact .est__inner { padding: 104px var(--pad) 56px; gap: 4.5vw; }
#contact .t-xl { font-size: clamp(40px, 4.4vw, 70px); }
#contact .est__txt p:not(.label) { margin-top: 16px; }
#contact .contact__list { margin-top: 20px; }
#contact .contact__list li { padding: 10px 0; }
#contact .btns { margin-top: 18px !important; }
#contact .form { gap: 11px; padding: 26px 30px; }
#contact .form textarea { min-height: 84px; }
.form__titre { font: 400 30px/1.1 var(--serif); color: var(--bleu); }
/* Pied de page : « EB » à côté du logo, textes plus petits (sauf logo, EB, slogan) */
.foot__marque { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.foot__marque .foot__logo { margin-bottom: 0; }
.foot__eb { font: 400 92px/.8 var(--serif); color: #fff; letter-spacing: -.02em; }
.foot__cols { font-size: 13px; gap: 48px; }
.foot__cols .label { font-size: 10.5px; }
.foot__cols p { margin-bottom: 6px; }
.foot__legal { font-size: 12px; }
@media (max-width: 599px) {
  .hero__id { gap: 14px; }
  .hero__valeurs li { padding: 10px 13px; font-size: 10.5px; }
  .foot__eb { font-size: 64px; }
  #contact .est__inner { padding: 96px var(--pad) 48px; }
}
/* Macaron : la phrase fait exactement un tour (avant, elle dépassait et ses lettres se chevauchaient) */
.macaron__ring text { letter-spacing: .16em; }
@media (max-width: 599px) { .hero__nom { font-size: 34px; white-space: nowrap; } .hero__logo { height: 46px; } }

/* 06/11 : feuille finale de la cliente (05/11) */
/* 1re page : encore plus de contraste (l'image de la maison sera refaite au lot 2) */
.hero__poster, .hero__canvas { filter: brightness(.68) contrast(1.22) saturate(1.12); }
.hdr__nav { gap: 26px; }
/* Fin de l'ouverture : 3 bulles centrées sur toute la ligne du bas */
.hero__end { bottom: calc(4vh + 96px); }
.hero__txt { margin-bottom: 0; }
.hero__bulles { position: absolute; left: var(--pad); right: var(--pad); bottom: 4vh; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; opacity: var(--end, 0); transform: translateY(calc((1 - var(--end, 0)) * 40px)); pointer-events: none; }
.hero__bulles li { padding: 14px 24px; border-radius: 999px; background: var(--argent); color: #6E4C12; text-align: center; box-shadow: 0 10px 30px rgba(7,23,80,.35); }
.hero__bulles b { display: block; font: 700 13.5px/1.25 var(--sans); letter-spacing: .04em; }
.hero__bulles span { display: block; margin-top: 3px; font: 600 12.5px/1.3 var(--sans); }
/* Notre fonctionnement : pleine page, photo de nuit en fond, 4 étapes côte à côte */
.formule { position: relative; min-height: 100vh; min-height: 100svh; grid-template-columns: 1fr; align-items: center; overflow: hidden; }
.formule__img { position: absolute; inset: 0; height: auto; }
.formule__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,23,80,.74) 0%, rgba(7,23,80,.56) 45%, rgba(7,23,80,.88) 100%); }
.formule__txt { padding: 110px var(--pad) 56px; z-index: 1; }
.formule__intro { max-width: 62ch; margin-top: 16px; color: rgba(255,255,255,.92); }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; margin: 38px 0 0; }
.steps li { display: block; padding: 20px 0 0; }
.steps b { display: block; min-width: 0; margin-bottom: 10px; font-size: 38px; }
.steps h3 { font-size: 22px; }
.steps p { font-size: 14.5px; color: rgba(255,255,255,.88); }
/* Notre offre : photo en fondu, pastille en haut à droite */
.offre { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; display: grid; align-items: center; background: var(--encre); color: #fff; }
.offre__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.offre__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,23,80,.9) 0%, rgba(7,23,80,.76) 55%, rgba(7,23,80,.62) 100%); }
.offre__inner { position: relative; width: 100%; padding: 92px var(--pad) 28px; }
.offre .label { margin-bottom: 10px; }
.offre .t-m { font-size: clamp(26px, 2.5vw, 38px); }
.offre .macaron { position: absolute; top: 84px; right: var(--pad); width: 178px; }
.offre .macaron__ring text { font-size: 15px; letter-spacing: .08em; }
.offre .macaron__in strong { font-size: 27px; }
.offre .macaron__in small { display: block; margin-top: 3px; font: 400 15px/1.2 var(--serif); }
.offre .macaron__in span { display: block; max-width: 96px; margin: 4px auto 0; font-size: 10.5px; line-height: 1.25; color: #fff; }
.offre__mission { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; max-width: calc(100% - 220px); margin-top: 14px; font-size: 14.5px; }
.offre__mission li { padding: 8px 0; border-top: 1px solid rgba(255,255,255,.24); }
.offre__titre { margin-top: 22px; }
.offre__frais { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 14px; }
.offre__carte { padding: 18px 24px; border-radius: 22px; background: rgba(7,23,80,.62); box-shadow: inset 0 0 0 1px rgba(191,196,203,.5); }
.offre__carte h3 { font-size: 21px; line-height: 1.15; }
.offre__carte ul { margin: 8px 0 0 1.1em; font-size: 14.5px; }
.offre__carte li { padding: 2px 0; }
.offre__carte p { margin-top: 8px; font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.8); }
.offre__note { margin-top: 14px; font: italic 400 18px/1.25 var(--serif); }
/* Nos services : numéro, titre et phrase ; la tuile grandit si le texte est long */
.bento { grid-auto-rows: minmax(300px, auto); }
.tile h3 { font-size: 24px; }
.tile p { font-size: 14px; line-height: 1.45; }
.tile--big h3 { font-size: clamp(30px, 2.8vw, 44px); }
.tile--big p { font-size: 16px; }
/* Notre secteur : photos seules, le défilement est plus court qu'avec les vidéos */
.hz { height: 450vh; }
#secteur .t-xl { font-size: clamp(38px, 5vw, 80px); }
/* Estimation : tient sur une page */
#estimation { min-height: 100vh; min-height: 100svh; }
#estimation .est__inner { padding: 88px var(--pad) 24px; gap: 4vw; }
#estimation .t-xl { font-size: clamp(38px, 4.2vw, 66px); }
#estimation .form { gap: 10px; padding: 22px 26px; }
#estimation .form label { gap: 5px; font-size: 10.5px; letter-spacing: .14em; }
#estimation .form input:not([type="checkbox"]), #estimation .form select { padding: 9px 12px; font-size: 14px; }
#estimation .form__row { align-items: end; }
#estimation .pastilles span { padding: 7px 12px; font-size: 12.5px; }
#estimation .pastilles legend { margin-bottom: 6px; font-size: 10.5px; }
#estimation .form label.form__rgpd { font-size: 12px; letter-spacing: 0; }
#estimation .btn { padding: 13px 24px; }
/* Notre histoire : sa photo en bas à gauche, le texte à droite */
.story__inner { align-items: end; }
.story__arch { margin: 0; }
/* Parlons ensemble : « EB conciergerie » + logo */
.contact__id { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; font: 400 clamp(24px, 2.4vw, 34px)/1 var(--serif); }
.contact__id img { height: 44px; width: auto; }
/* Pied de page : « EB conciergerie » + logo, dans la police de la 1re page */
.foot__nom { font: 400 clamp(34px, 3.8vw, 58px)/1 var(--serif); letter-spacing: -.01em; }
.foot__logo { height: 76px; }
/* Lisibilité : le blanc et le doré ressortent en bas de la fin de l'ouverture et sur les fenêtres de services */
.hero__veil::after { background: linear-gradient(0deg, rgba(7,23,80,.86) 0%, rgba(7,23,80,.62) 30%, transparent 62%), linear-gradient(90deg, rgba(7,23,80,.8) 0%, rgba(7,23,80,.45) 42%, transparent 70%); }
.hero__txt { max-width: 680px; }
.hero__lieu { font-size: 15px; }
.tile--img::after { background: linear-gradient(180deg, rgba(7,23,80,.12) 0%, rgba(7,23,80,.66) 42%, rgba(7,23,80,.94) 100%); }
.tile--big::after { background: linear-gradient(180deg, transparent 42%, rgba(7,23,80,.92) 82%); }
@media (max-width: 1023px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offre__mission { max-width: none; }
  .offre .macaron { position: relative; top: auto; right: auto; margin: 0 0 24px auto; }
  .story__arch { margin: 0 auto; }
}
@media (max-width: 599px) {
  .hero__end { bottom: calc(3vh + 214px); }
  .hero__bulles { bottom: 3vh; grid-template-columns: 1fr; gap: 8px; }
  .hero__bulles li { padding: 9px 18px; border-radius: 24px; }
  .hero__bulles b { font-size: 12.5px; }
  .hero__bulles span { font-size: 11.5px; }
  .steps { grid-template-columns: 1fr; gap: 14px; }
  .steps li { padding-top: 14px; }
  .formule__txt { padding: 96px var(--pad) 48px; }
  .offre__mission, .offre__frais { grid-template-columns: 1fr; }
  .offre__inner { padding: 96px var(--pad) 48px; }
  .foot__logo { height: 56px; }
}

/* 06/11 : pied de page allégé. La liste de ses mots-clés reste dans la page, repliée par défaut */
.foot__seo { margin-top: 56px; }
.foot__seo summary { display: inline-block; cursor: pointer; font-size: 13px; color: rgba(255,255,255,.7); text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.foot__seo summary::-webkit-details-marker { display: none; }
.foot__seo summary:hover { color: #fff; }
.foot__seo .foot__cols { margin-top: 24px; }
.foot__legal { margin-top: 28px; }

/* 07/11 : corrections de l'audit, validées par Quentin */
/* Slogan : sous les lettres E et B (il les chevauchait), et le doré sans l'ombre qui le ternissait */
.hero__acc { top: calc(13vh + clamp(130px, 23vw, 360px) * .82 + 3vh); }
.hero__acc em.or { text-shadow: none; }
/* Notre secteur : la touche Tab ne peut plus décaler le panneau (le JS amène la page au bon arrêt) */
.hz__stage { overflow: clip; }
/* Menu sur tablette et téléphone : un bouton et un panneau plein écran (avant, plus de menu sous 1081 px) */
.hdr__menu { display: none; position: relative; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hdr__menu:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hdr__menu i { position: absolute; left: 13px; right: 13px; height: 1.5px; border-radius: 1px; background: #fff; transition: transform .3s var(--ease); }
.hdr__menu i:first-child { top: 18px; }
.hdr__menu i:last-child { top: 24.5px; }
.menu-ouvert { overflow: hidden; }
.menu-ouvert .hdr__menu i:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-ouvert .hdr__menu i:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 49; display: grid; place-items: center; padding: 110px var(--pad) 60px; background: var(--nuit); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s .3s; }
.menu-ouvert .menu { opacity: 1; visibility: visible; transition: opacity .3s var(--ease); }
.menu nav { display: grid; gap: 4px; text-align: center; transform: translateY(12px); transition: transform .4s var(--ease); }
.menu-ouvert .menu nav { transform: none; }
.menu a { display: block; padding: 10px 0; font: 400 clamp(30px, 7vw, 46px)/1.1 var(--serif); color: #fff; }
@media (max-width: 1180px) {
  .hdr__nav { display: none; }
  .hdr__menu { display: block; }
  .hdr__cta { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) { .menu, .menu nav, .hdr__menu i { transition: none; } }
/* Fin de l'ouverture sur petite tablette : les bulles l'une sous l'autre, comme sur téléphone (le texte passait dessous) */
@media (min-width: 600px) and (max-width: 900px) and (min-height: 600px) {
  .hero__end { bottom: calc(3vh + 214px); }
  .hero__bulles { bottom: 3vh; max-width: 560px; grid-template-columns: 1fr; gap: 8px; }
  .hero__bulles li { padding: 9px 18px; border-radius: 24px; }
  .hero__bulles b { font-size: 12.5px; }
  .hero__bulles span { font-size: 11.5px; }
}
/* Nos services : numéros dorés plus lisibles sur les photos (tablette et téléphone) */
@media (max-width: 1023px) { .tile--img .or { filter: drop-shadow(0 1px 2px rgba(7,23,80,.8)) drop-shadow(0 0 10px rgba(7,23,80,.7)); } }
@media (max-width: 599px) {
  .hero__acc { top: calc(17vh + clamp(130px, 23vw, 360px) * .82 + 3vh); }
  .hdr { gap: 12px; }
  /* la tuile 01 prend le voile des autres photos : son titre passait sur la partie claire */
  .tile--big::after { background: linear-gradient(180deg, rgba(7,23,80,.12) 0%, rgba(7,23,80,.66) 42%, rgba(7,23,80,.94) 100%); }
}
/* Très petits téléphones : « Estimation gratuite » reste sur une ligne à côté du bouton du menu */
@media (max-width: 359px) { .hdr__cta { white-space: nowrap; padding: 11px 12px; letter-spacing: .06em; } }

/* 10/11 : voiles allégés (Quentin : « trop gros voile bleu »). La photo reste visible ; l'ombre ne couvre plus que
   la zone du texte, et le texte porte une ombre neutre fine pour rester lisible. */
.hero__veil::after { background: linear-gradient(0deg, rgba(7,23,80,.55) 0%, rgba(7,23,80,.25) 26%, transparent 46%), linear-gradient(90deg, rgba(7,23,80,.4) 0%, rgba(7,23,80,.14) 40%, transparent 60%); }
.formule__img::after { background: linear-gradient(180deg, rgba(7,23,80,.3) 0%, rgba(7,23,80,.12) 40%, rgba(7,23,80,.55) 100%); }
.offre__bg::after { background: linear-gradient(90deg, rgba(7,23,80,.6) 0%, rgba(7,23,80,.38) 55%, rgba(7,23,80,.22) 100%); }
.hz__img::after { background: linear-gradient(90deg, rgba(7,23,80,.5) 0%, rgba(7,23,80,.2) 40%, transparent 62%), linear-gradient(180deg, rgba(7,23,80,.3) 0%, transparent 22%, transparent 62%, rgba(7,23,80,.5) 100%); }
.est__veil { background: linear-gradient(90deg, rgba(7,23,80,.62) 0%, rgba(7,23,80,.32) 50%, rgba(7,23,80,.18) 100%); }
.tile--img::after, .tile--big::after { background: linear-gradient(180deg, transparent 30%, rgba(7,23,80,.5) 62%, rgba(7,23,80,.86) 100%); }
.hero__end, .formule__txt, .offre__inner, .hz__intro, .est__txt, .tile--img > div, .biens__head { text-shadow: 0 1px 3px rgba(0,0,0,.5), 0 0 22px rgba(0,0,0,.35); }
.formule__txt .or, .offre__inner .or, .hz__intro .or, .est__txt .or, .tile--img .or, .biens__head .or, .hero__end .or { filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(0,0,0,.3)); }
/* Nos logements : le titre se lit sur le ciel et la colline (ombre douce en haut à gauche, sans voile sur la maison) */
.biens__arch::after { background: radial-gradient(ellipse 60% 70% at 18% 22%, rgba(7,23,80,.5), transparent 70%); }
/* Lisibilité de l'or : ombre resserrée sur la colonne de texte, la photo reste claire ailleurs */
.offre__bg::after { background: linear-gradient(90deg, rgba(7,23,80,.68) 0%, rgba(7,23,80,.46) 50%, rgba(7,23,80,.26) 100%); }
.hz__img::after { background: linear-gradient(90deg, rgba(7,23,80,.66) 0%, rgba(7,23,80,.34) 36%, transparent 60%), linear-gradient(180deg, rgba(7,23,80,.3) 0%, transparent 22%, transparent 62%, rgba(7,23,80,.5) 100%); }
.est__veil { background: linear-gradient(90deg, rgba(7,23,80,.72) 0%, rgba(7,23,80,.55) 30%, rgba(7,23,80,.2) 55%, rgba(7,23,80,.1) 100%); }
.biens__arch::after { background: radial-gradient(ellipse 62% 75% at 16% 20%, rgba(7,23,80,.66), rgba(7,23,80,.3) 55%, transparent 80%); }
.formule__img::after { background: linear-gradient(180deg, rgba(7,23,80,.32) 0%, rgba(7,23,80,.14) 35%, rgba(7,23,80,.5) 62%, rgba(7,23,80,.62) 100%); }
/* Petites tuiles : le haut de la photo reste net, la zone du numéro et du texte est assombrie */
.tile--img::after { background: linear-gradient(180deg, rgba(7,23,80,.06) 0%, rgba(7,23,80,.5) 30%, rgba(7,23,80,.78) 55%, rgba(7,23,80,.88) 100%); }
.tile--big::after { background: linear-gradient(180deg, transparent 38%, rgba(7,23,80,.55) 64%, rgba(7,23,80,.88) 100%); }
.hz__img::after { background: linear-gradient(90deg, rgba(7,23,80,.74) 0%, rgba(7,23,80,.5) 32%, transparent 58%), linear-gradient(180deg, rgba(7,23,80,.3) 0%, transparent 22%, transparent 62%, rgba(7,23,80,.5) 100%); }
.biens__arch::after { background: radial-gradient(ellipse 62% 75% at 16% 20%, rgba(7,23,80,.74), rgba(7,23,80,.36) 55%, transparent 80%); }
/* L'or est un dégradé découpé dans la lettre : une ombre de texte se peindrait par-dessus et le ternirait. Il garde seulement son ombre portée (filter). */
.hero__end .or, .formule__txt .or, .offre__inner .or, .hz__intro .or, .est__txt .or, .tile--img .or, .biens__head .or { text-shadow: none; }

/* 10/11 : téléphone et tablette en hauteur, photos verticales découpées dans les originaux 4K autour du sujet */
.hero__stage > picture, .formule__img > picture, .hz__img > picture, .biens__arch > picture, #contact > picture { display: contents; }
@media (max-width: 1023px) and (orientation: portrait) {
  .offre__bg { background-image: url(../assets/img/grasse-parfum-v.webp) !important; }
  .est--estim .est__bg { background-image: url(../assets/img/estimation-jardin-v.webp) !important; }
  .story__bg { background-image: url(../assets/img/villa-histoire-jour-v.webp) !important; }
}
/* Téléphone en hauteur : le texte prend toute la largeur, l'ombre passe donc du haut vers le bas */
@media (max-width: 1023px) and (orientation: portrait) {
  .est__veil { background: linear-gradient(180deg, rgba(7,23,80,.74) 0%, rgba(7,23,80,.6) 40%, rgba(7,23,80,.34) 70%, rgba(7,23,80,.2) 100%); }
  .biens__arch::after { background: linear-gradient(180deg, rgba(7,23,80,.66) 0%, rgba(7,23,80,.3) 26%, transparent 42%); }
}

/* Notre histoire : le portrait d'Élodie dans l'arche (11/11) */
.story__arch { overflow: hidden; }
.story__arch img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }

/* Nos services : les 9 services en défilement horizontal, 3 par page, photos plus larges que hautes (visio du 11/11) */
.hz--svc .hz__head { align-items: flex-start; }
.svc-titre { margin-top: 12px; font: 400 clamp(30px, 3vw, 46px)/1.05 var(--serif); color: #fff; }
.hz--svc .hz__panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4vw; align-content: center; align-items: start; padding: 196px var(--pad) 36px; color: #fff; background: var(--nuit); }
.hz--svc .hz__panel:nth-child(2) { background: var(--bleu); }
.svc-card img { display: block; width: 100%; aspect-ratio: 3 / 2; max-height: 38vh; object-fit: cover; border-radius: 18px; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 24px 50px rgba(0,0,0,.3); }
.svc-card .or { display: inline-block; margin-top: 18px; font: 400 30px/1 var(--serif); }
.svc-card h3 { margin-top: 8px; font: 400 clamp(20px, 1.6vw, 26px)/1.15 var(--serif); }
.svc-card p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.86); }
@media (max-width: 1023px) and (orientation: portrait) {
  .hz--svc .hz__head { justify-content: space-between; align-items: center; }
  .hz--svc .hz__head .label { display: block; }
  .svc-titre { display: none; }
  .hz--svc .hz__panel { grid-template-columns: 1fr; gap: 16px; padding: 132px var(--pad) 20px; }
  .svc-card { display: grid; grid-template-columns: 36% 1fr; gap: 14px; align-items: start; }
  .svc-card img { aspect-ratio: 4 / 3; max-height: none; border-radius: 12px; }
  .svc-card .or { margin-top: 0; font-size: 20px; }
  .svc-card h3 { margin-top: 4px; font-size: 17px; }
  .svc-card p { margin-top: 4px; font-size: 12.5px; line-height: 1.4; }
}

/* 11/11 visio : Grasse refaite (vraie vieille ville derrière l'usine, cheminée sur le toit de l'usine).
   La cliente veut la photo « plus floutée », avec un voile bleu plus marqué, pour que l'offre ressorte. */
.offre__bg { filter: blur(2px); transform: scale(1.03); }
.offre__bg::after { background: linear-gradient(90deg, rgba(7,23,80,.84) 0%, rgba(7,23,80,.68) 50%, rgba(7,23,80,.5) 100%); }
@media (max-width: 1023px) and (orientation: portrait) {
  .offre__bg { background-image: url(../assets/img/grasse-fragonard-v.webp) !important; }
}

/* 11/11 visio : Notre histoire revient à la villa provençale au couchant que la cliente préférait, avec quelques fleurs (sobres, à la demande de Quentin) */
@media (max-width: 1023px) and (orientation: portrait) {
  .story__bg { background-image: url(../assets/img/villa-histoire-provencale-v.webp) !important; }
}

/* 11/11 visio : Notre fonctionnement reprend la terrasse de nuit choisie par la cliente (feuille du 05/11),
   avec le voile bleu d'avant le 10/11 (« l'autre, c'était très bien » : le texte se lit). */
.formule__img::after { background: linear-gradient(180deg, rgba(7,23,80,.74) 0%, rgba(7,23,80,.56) 45%, rgba(7,23,80,.88) 100%); }

/* 11/11 visio : la cliente était « moyennement fan » du jardin ; retour à la piscine avec vue mer (d'avant le 10/11), refaite en 4K en fin d'après-midi */
@media (max-width: 1023px) and (orientation: portrait) {
  .est--estim .est__bg { background-image: url(../assets/img/estimation-piscine-mer-v.webp) !important; }
}

/* 12/11 · visio du 11/11 : Notre offre, « le nerf de la guerre ». L'offre doit ressortir (en doré) ; « Notre mission comprend »
   et « Une répartition claire des frais » centrés, la mission sur un fond comme les deux cartes ; la pastille posée sur la mission
   (« pourquoi vous payez 20 % HT : mon offre, c'est ça »), 20 % HT en grand et 24 % TTC plus petit ; les deux précisions
   des cartes en italique ; « Chaque logement étant unique » plus gros. */
.offre__inner { text-align: center; }
.offre .t-m { font-size: clamp(30px, 2.8vw, 44px); }
.offre__offre { position: relative; width: min(920px, 100%); margin: 16px auto 0; }
.offre__mission { position: relative; max-width: none; margin: 0; padding: 44px 40px 16px; column-gap: 48px; text-align: left; font-size: 15.5px; border-radius: 22px; background: rgba(14,47,147,.55); box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.offre__mission::before { content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; background: var(--or); -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; }
.offre__mission li { border-top-color: rgba(212,169,60,.32); }
.offre__mission li:nth-child(-n+2) { border-top: 0; }
.offre .macaron { position: relative; top: auto; right: auto; z-index: 1; width: 172px; margin: 4px auto -30px; }
.offre .macaron__in strong { font-size: 28px; }
.offre .macaron__in small { margin-top: 5px; font: 400 12.5px/1.2 var(--serif); }
.offre__titre { margin-top: 30px; }
.offre__frais { width: min(920px, 100%); margin: 14px auto 0; text-align: left; }
.offre__carte p { font: italic 500 15.5px/1.4 var(--serif); color: rgba(255,255,255,.9); }
.offre__note { width: min(920px, 100%); margin: 22px auto 0; font-size: clamp(21px, 1.9vw, 28px); line-height: 1.3; }
/* Grand écran : la pastille se pose en tampon sur le coin de la mission */
@media (min-width: 1200px) and (orientation: landscape) {
  .offre__mission { padding-top: 16px; }
  .offre .macaron { position: absolute; top: -92px; right: -118px; width: 196px; margin: 0; }
  .offre .macaron__in strong { font-size: 30px; }
}
@media (max-width: 599px) {
  .offre__mission { padding: 44px 22px 14px; }
  .offre__mission li:nth-child(2) { border-top: 1px solid rgba(212,169,60,.32); }
}
/* Écrans d'ordinateur peu hauts (1280 × 720, 1366 × 768…) : la section tient sur un écran */
@media (min-width: 1200px) and (orientation: landscape) and (max-height: 820px) {
  .offre .macaron { top: -84px; }
  .offre__mission li { padding: 6px 0; }
  .offre__titre { margin-top: 18px; }
  .offre__carte { padding: 14px 22px; }
  .offre__carte p { margin-top: 6px; }
  .offre__note { margin-top: 12px; font-size: clamp(20px, 1.7vw, 22px); }
}

/* 12/11 · visio du 11/11 : haut de page, fin du vol.
   « EB » avec « conciergerie » dessous, comme à l'ouverture, monté dans le ciel et la mer, le logo à sa droite.
   Bulles : les six mots en avant (Bodoni, or foncé), les phrases dessous en bleu, comme « Estimation gratuite ». */
.hero__marque { position: absolute; left: var(--pad); right: var(--pad); top: calc(64px + 7vh); display: flex; justify-content: center; align-items: center; gap: clamp(16px, 2.4vw, 36px); opacity: var(--end, 0); transform: translateY(calc((1 - var(--end, 0)) * -30px)); pointer-events: none; }
.hero__marque .hero__nom { display: flex; flex-direction: column; align-items: center; font: inherit; letter-spacing: 0; white-space: normal; }
.hero__nom-eb { font: 400 min(10vw, 17vh, 150px)/.82 var(--serif); color: #fff; text-shadow: 0 2px 30px rgba(7,23,80,.45); }
.hero__nom-conc { font: italic 400 min(3.7vw, 6.3vh, 56px)/1.2 var(--serif); padding-bottom: .1em; filter: drop-shadow(0 2px 2px rgba(7,23,80,.55)) drop-shadow(0 0 24px rgba(7,23,80,.6)); }
.hero__marque .hero__logo { height: min(9.5vw, 16vh, 140px); width: auto; }
.hero__end { bottom: calc(4vh + 104px); }
.hero__bulles b { display: inline-block; font: 500 clamp(18px, 1.55vw, 23px)/1.15 var(--serif); font-variation-settings: "opsz" 12; letter-spacing: 0; background: linear-gradient(100deg, #6E4C12 0%, #9C7020 40%, #B98A2E 60%, #7A5616 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__bulles li { padding: 13px 20px 14px; }
.hero__bulles span { margin-top: 4px; font: 600 clamp(12px, .92vw, 13.5px)/1.3 var(--sans); color: var(--bleu); }
/* Téléphone et tablette debout : le nom à la taille de l'écran */
@media (max-width: 1023px) and (orientation: portrait) {
  .hero__nom-eb { font-size: min(22vw, 110px); }
  .hero__nom-conc { font-size: min(8.4vw, 42px); }
  .hero__marque .hero__logo { height: min(21vw, 104px); }
}
/* Bulles l'une sous l'autre (téléphone, petite tablette) : un peu plus serrées, le texte au-dessus garde son air */
@media (max-width: 599px), (min-width: 600px) and (max-width: 900px) and (min-height: 600px) {
  .hero__end { bottom: calc(3vh + 214px); }
  .hero__bulles li { padding: 8px 14px 9px; }
  .hero__bulles b { font-size: 17px; }
  .hero__bulles span { margin-top: 2px; font-size: 12px; }
}
/* Téléphone couché (écran très bas) : tout se resserre pour que le nom, le texte et les bulles ne se chevauchent pas */
@media (orientation: landscape) and (max-height: 500px) {
  .hero__marque { top: 92px; }
  .hero__nom-eb { font-size: 15vh; }
  .hero__nom-conc { font-size: 5.6vh; }
  .hero__marque .hero__logo { height: 17vh; }
  .hero__end { bottom: calc(3vh + 94px); }
  .hero__lieu { margin: 0 0 6px; font-size: 12px; }
  .hero__txt { font-size: 13px; line-height: 1.45; }
  .hero__bulles { bottom: 3vh; gap: 10px; }
  .hero__bulles li { padding: 6px 12px 7px; border-radius: 22px; }
  .hero__bulles b { font-size: 15px; }
  .hero__bulles span { margin-top: 1px; font-size: 11px; }
}
/* Très petits téléphones : les phrases des bulles passent sur deux lignes, le texte remonte d'autant */
@media (max-width: 374px) { .hero__end { bottom: calc(3vh + 232px); } }
/* Vidéo de la villa : le nom posé sur l'horizon de la dernière image du vol (« EB » dans le ciel, « conciergerie » sur la mer).
   L'image couvre l'écran en 16/9 : sa hauteur affichée est max(56,25vw, 100vh), l'horizon est à 44,4 % de cette hauteur. */
.hero__marque { top: calc(50vh - .0556 * max(56.25vw, 100vh)); translate: 0 -55%; }
/* Téléphone debout : jamais plus bas que le texte du bas (qui remonte au-dessus des trois bulles) */
@media (max-width: 1023px) and (orientation: portrait) { .hero__marque { top: min(calc(50vh - .0556 * max(56.25vw, 100vh)), calc(97vh - 407px)); } }
@media (max-width: 374px) { .hero__marque { top: min(calc(50vh - .0556 * max(56.25vw, 100vh)), calc(97vh - 425px)); } }

/* 12/11 (2) · retours de Quentin. Partout où revient « EB conciergerie » : « EB » avec « conciergerie » dessous,
   et le L seul (sans le mot sous le logo) à droite. En haut de page : le nom à gauche, le L à droite de la page. */
.hero__marque { justify-content: space-between; }
.hero__marque .hero__logo { height: min(8.4vw, 14vh, 128px); }
@media (max-width: 1023px) and (orientation: portrait) { .hero__marque .hero__logo { height: min(19vw, 96px); } }
.contact__id { gap: clamp(16px, 1.6vw, 24px); margin-bottom: 18px; }
.contact__nom, .foot__nom { display: flex; flex-direction: column; align-items: center; }
.contact__nom-eb, .foot__nom-eb { font: 400 clamp(46px, 4.2vw, 64px)/.82 var(--serif); color: #fff; letter-spacing: 0; }
.contact__nom-conc, .foot__nom-conc { font: italic 400 clamp(20px, 1.75vw, 27px)/1.2 var(--serif); padding-bottom: .1em; letter-spacing: 0; }
.contact__id img, .foot__marque .foot__logo { height: clamp(50px, 4.4vw, 66px); }
/* Lisibilité : le voile bleu flouté plus marqué derrière les textes (fonctionnement, estimation, contact) */
.formule__img img, .est__bg, #contact .bgvid { filter: blur(3px); transform: scale(1.04); }
.formule__img::after { background: linear-gradient(180deg, rgba(7,23,80,.8) 0%, rgba(7,23,80,.66) 45%, rgba(7,23,80,.9) 100%); }
.steps p { color: #fff; }
.est__veil { background: linear-gradient(90deg, rgba(7,23,80,.88) 0%, rgba(7,23,80,.76) 34%, rgba(7,23,80,.46) 58%, rgba(7,23,80,.26) 100%); }
@media (max-width: 1023px) and (orientation: portrait) {
  .est__veil { background: linear-gradient(180deg, rgba(7,23,80,.86) 0%, rgba(7,23,80,.74) 40%, rgba(7,23,80,.52) 70%, rgba(7,23,80,.4) 100%); }
}

/* 12/11 (3) · Notre histoire, visio du 11/11 : les trois bulles « à côté les unes des autres »,
   « plus hautes que larges », « écrite[s] en doré pour rappeler la première page » (argent, mots en Bodoni or foncé).
   La section tient sur un écran d'ordinateur, 1280 × 720 compris : la signature passe sous le portrait. */
#histoire .story__piliers { display: grid; grid-template-columns: repeat(3, 132px); gap: 14px; margin-top: 22px; }
#histoire .story__piliers li { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 152px; padding: 14px 6px; border-radius: 999px; background: var(--argent); box-shadow: 0 10px 30px rgba(7,23,80,.35); text-align: center; letter-spacing: 0; text-transform: none; }
#histoire .story__piliers span, #histoire .story__piliers i { font: 500 17px/1.2 var(--serif); font-variation-settings: "opsz" 12; background: linear-gradient(100deg, #6E4C12 0%, #9C7020 40%, #B98A2E 60%, #7A5616 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
#histoire .story__piliers i { font-style: italic; font-weight: 400; font-size: 15px; margin: 1px 0; }
#histoire .story__sign { display: block; width: min(320px, 70vw); margin: 18px 0 0; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 12px rgba(0,0,0,.3); }
@media (min-width: 1024px) {
  #histoire .story__inner { padding: calc(90px + 2.5vh) var(--pad) 3.5vh; }
  #histoire .story__txt p:not(.label) { margin-top: 14px; }
  #histoire h2 { font-size: clamp(36px, min(4.6vw, 7.6vh), 72px); }
}
@media (min-width: 1024px) and (max-height: 820px) {
  #histoire .story__txt p:not(.label) { font-size: 16px; line-height: 1.5; }
}
@media (max-width: 1023px) {
  #histoire .story__sign { margin: 16px auto 0; }
}
@media (max-width: 599px) {
  #histoire .story__piliers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 360px; }
  #histoire .story__piliers li { height: auto; aspect-ratio: 4 / 5; padding: 12px 4px; }
  #histoire .story__piliers span { font-size: 14px; line-height: 1.12; }
  #histoire .story__piliers i { font-size: 12.5px; line-height: 1.12; }
}
@media (max-width: 374px) {
  #histoire .story__piliers span { font-size: 13px; }
  #histoire .story__piliers i { font-size: 12px; }
}

/* 12/11 (4) · Estimation, visio du 11/11 (« est-ce qu'on met 06 ou 07, ou est-ce qu'on mettrait +33 ? ») :
   une case pour l'indicatif du pays devant le numéro. France par défaut. */
.tel { display: flex; gap: 6px; }
.tel .tel__ind { flex: none; width: auto; }
.tel input { flex: 1; min-width: 0; }

/* 12/11 (5) · récapitulatif écrit de la cliente du 12/11, retouches sans nouvelle image. */
/* Haut de page : « les 3 titres dans les bulles en majuscules » */
.hero__bulles b { text-transform: uppercase; letter-spacing: .06em; font-size: clamp(14px, 1.12vw, 17px); }
@media (max-width: 599px), (min-width: 600px) and (max-width: 900px) and (min-height: 600px) { .hero__bulles b { font-size: 14px; } }
@media (orientation: landscape) and (max-height: 500px) { .hero__bulles b { font-size: 11.5px; } }
/* Notre fonctionnement : « mettre en avant les titres plus que le texte… une autre couleur ? » → titres en or, plus épais */
.steps h3 { width: fit-content; font-weight: 500; font-size: clamp(16px, 1.58vw, 26px); white-space: nowrap; font-variation-settings: "opsz" 12; background: linear-gradient(100deg, #A27623 0%, #D8AE4C 28%, #F2D88A 46%, #D4A93C 60%, #B08128 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
/* Notre offre : « 24 % TTC en blanc » */
.offre .macaron__in small { color: #fff; }
/* Notre histoire : « diminuer ma photo » */
.story__arch, #histoire .story__sign { width: min(270px, 64vw); }
/* Contact : « police sous Parlons ensemble à diminuer » */
#contact .est__txt p:not(.label) { font-size: 15px; line-height: 1.55; }
/* Pied de page : « trop froid… idem page 2 suite sans les bulles » : la dernière image du vol en fond sous un voile bleu,
   le slogan fini en or italique, le contact centré à droite (« rajouter mail à droite et centrer »). */
.foot { position: relative; background: var(--nuit) url(../assets/seq/vol2/239.webp) center 62% / cover no-repeat; }
.foot::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,23,80,.6) 0%, rgba(7,23,80,.78) 50%, rgba(7,23,80,.95) 100%), linear-gradient(90deg, rgba(7,23,80,.5) 0%, transparent 65%); pointer-events: none; }
.foot > * { position: relative; }
.foot__top { align-items: center; }
.foot__tag { text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.foot__tag .or { filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.foot__contact { text-align: center; }
.foot__contact .label { margin-bottom: 12px; }
.foot__cols p.foot__tel { margin-bottom: 16px; font: 400 clamp(22px, 2vw, 28px)/1.2 var(--serif); color: #fff; }
.foot__cta { display: inline-block; padding: 13px 24px; border-radius: 999px; background: var(--argent); color: var(--bleu); font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; box-shadow: 0 10px 30px rgba(7,23,80,.35); }
@media (max-width: 599px) { .foot__top > .foot__cols { width: 100%; justify-content: center; } }

/* 12/11 (6) · l'e-mail d'EB conciergerie, créé le 12/11 */
.foot__cols p.foot__mail { margin-bottom: 18px; font-size: 15px; color: rgba(255,255,255,.9); }
.foot__mail a, .contact__list a[href^="mailto"] { text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 3px; }
#contact .contact__list li { padding: 8px 0; }