/* ==========================================================================
   BONAPPART — Feuille de style partagée
   Design system extrait de bonappart-accueil-v3.html (maquette validée).
   ========================================================================== */

:root{
  --encre:#1C3128;
  --pierre:#EFECE4;
  --blanc:#FAF8F3;
  --sapin:#2E5342;
  --laiton:#C2A05C;
  --laiton-2:#A8874C;
  --texte:#2A342E;
  --texte-inv:#E9EDE9;
  --doux:#66706A;
  --doux-inv:#93A19A;
  --ligne:#DAD5C8;
  --ligne-inv:rgba(255,255,255,.10);
  --r:20px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Archivo',system-ui,sans-serif;background:var(--pierre);color:var(--texte);line-height:1.55;font-size:16px;overflow-x:hidden}
::selection{background:var(--laiton);color:#fff}
.serif{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400}
a{color:inherit;text-decoration:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:var(--laiton)}

/* ---------- NAV ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:all .3s;background:rgba(28,49,40,.85);backdrop-filter:blur(16px);border-bottom:1px solid var(--ligne-inv)}
/* Accueil (gabarit A) : nav transparente sur le hero plein écran, solide au scroll — comportement propre à la maquette. */
body.home nav{background:transparent;border-bottom-color:transparent;backdrop-filter:none}
body.home nav.scrolled{background:rgba(28,49,40,.85);backdrop-filter:blur(16px);border-bottom:1px solid var(--ligne-inv)}
.nav-in{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;max-width:1240px;margin:0 auto}
.brand{display:flex;align-items:center;gap:14px}
.brand img{height:34px;width:auto;display:block}
.brand .word{font-weight:900;font-size:18px;letter-spacing:.10em;color:#fff}
.brand .sep{width:1px;height:22px;background:rgba(255,255,255,.22)}
.brand .tag{font-family:'Instrument Serif',serif;font-style:italic;font-size:15.5px;color:var(--laiton);letter-spacing:.01em;white-space:nowrap;transform:translateY(1px)}
.menu{display:flex;gap:30px;font-size:13.5px;font-weight:600;color:#D6DDD7}
.menu a{opacity:.85;transition:.2s;white-space:nowrap}
.menu a:hover{opacity:1;color:var(--laiton)}
.pill{display:inline-flex;align-items:center;gap:10px;background:var(--laiton);color:var(--encre);padding:12px 22px;border-radius:999px;font-weight:700;font-size:14px;transition:transform .25s cubic-bezier(.2,1.4,.4,1),background .2s;border:none;cursor:pointer;white-space:nowrap}
.pill:hover{transform:scale(1.05);background:#D4B26B}
.pill.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.35)}
.pill.ghost:hover{border-color:var(--laiton);color:var(--laiton);background:transparent}
/* .pill.ghost est pense pour un fond sombre (texte blanc). Variante pour
   un .pill.ghost pose sur fond clair (--pierre/--blanc) : couleur par
   defaut = l'ancien style hover (laiton), nouveau hover = remplissage
   sapin plein pour rester distinct et bien contraste. */
.pill.ghost.on-light{color:var(--laiton);border-color:var(--laiton)}
.pill.ghost.on-light:hover{background:var(--sapin);border-color:var(--sapin);color:#fff}
.burger{display:none;background:none;border:none;color:#fff;font-size:26px;cursor:pointer}
.mobile-menu{display:none;position:fixed;top:66px;left:0;right:0;background:var(--encre);border-bottom:1px solid var(--ligne-inv);z-index:99;padding:8px 28px 24px;flex-direction:column;gap:4px}
.mobile-menu.open{display:flex}
.mobile-menu a{padding:12px 0;font-size:15px;font-weight:600;color:#D6DDD7;border-bottom:1px solid var(--ligne-inv)}
.mobile-menu a:last-child{border-bottom:none}
.mobile-menu .pill{margin-top:14px;justify-content:center}

/* ---------- HERO (accueil) ---------- */
.hero{background:var(--encre);color:var(--texte-inv);min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;position:relative;padding-top:110px;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 60% at 80% 10%, rgba(74,140,106,.26), transparent 60%),radial-gradient(60% 50% at 8% 92%, rgba(194,160,92,.10), transparent 60%);pointer-events:none}
.hero .watermark{position:absolute;right:-4vw;bottom:8vh;height:64vh;opacity:.05;pointer-events:none;filter:grayscale(1)}
.hero .wrap{position:relative;z-index:2}
.hero h1{font-weight:900;font-size:clamp(42px,8vw,114px);line-height:.97;letter-spacing:-.03em;color:#fff;text-transform:uppercase}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line>span{display:inline-block;transform:translateY(110%);animation:rise .9s cubic-bezier(.2,.9,.2,1) forwards}
.hero h1 .line:nth-child(2)>span{animation-delay:.12s}
.hero h1 .line:nth-child(3)>span{animation-delay:.24s}
@keyframes rise{to{transform:none}}
@media (prefers-reduced-motion:reduce){.hero h1 .line>span{animation:none;transform:none}}
.hero h1 .accent{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;text-transform:none;letter-spacing:0;color:var(--laiton);font-size:.94em}
.hero-sub{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:end;margin:38px 0 56px}
.hero-sub p{font-size:17px;color:var(--doux-inv);max-width:520px}
.hero-cta{display:flex;gap:14px;justify-content:flex-end;flex-wrap:wrap}

/* ---------- HERO COMPACT (pages situations / partenaires — gabarit B/C) ----------
   Composant dérivé du design system (non présent dans la maquette accueil,
   qui n'a qu'un hero plein écran). Fond encre identique, sans badge (retiré),
   paragraphe "réponse directe" mis en valeur pour la citabilité IA (§5.4a). */
.hero-compact{background:var(--encre);color:var(--texte-inv);padding:150px 0 64px;position:relative;overflow:hidden}
.hero-compact::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 85% 0%, rgba(74,140,106,.22), transparent 60%);pointer-events:none}
.hero-compact .wrap{position:relative;z-index:2}
.hero-compact h1{font-weight:900;font-size:clamp(32px,4.6vw,54px);letter-spacing:-.03em;line-height:1.05;color:#fff;margin-top:14px}
.hero-compact .reponse{font-size:17px;color:var(--doux-inv);max-width:640px;margin-top:22px}
.hero-compact .hero-cta{justify-content:flex-start;margin-top:30px}

/* badge rotatif (accueil uniquement — retiré du hero-compact des pages situations) */
.badge{position:absolute;top:31vh;right:6vw;width:158px;height:158px;z-index:3}
.badge .ring{position:absolute;inset:0;animation:spin 22s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.badge .ring{animation:none}}
.badge .core{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--laiton);font-weight:900;font-size:32px;letter-spacing:-.02em;text-align:center}
.badge .core .lbl{display:block;font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;font-size:12px;letter-spacing:.06em;color:var(--laiton);margin-top:1px}
.badge .core b{font-weight:900}
.badge .core small{font-size:16px;font-weight:700;margin-left:2px;transform:translateY(4px)}
.badge.mini{width:110px;height:110px}
.badge.mini .core{font-size:23px}
.badge.mini .core small{font-size:11px}

/* ticker */
.ticker{border-top:1px solid var(--ligne-inv);border-bottom:1px solid var(--ligne-inv);overflow:hidden;padding:16px 0;background:rgba(255,255,255,.02)}
.ticker-track{display:flex;gap:44px;white-space:nowrap;animation:scroll 46s linear infinite;width:max-content}
@keyframes scroll{to{transform:translateX(-50%)}}
.ticker span{font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--doux-inv)}
.ticker b{color:var(--laiton)}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* ---------- STATS ---------- */
.stats{background:var(--encre);color:#fff;padding:70px 0}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat{border-left:1px solid var(--ligne-inv);padding-left:24px}
.stat .n{font-weight:900;font-size:clamp(34px,4vw,56px);letter-spacing:-.03em;line-height:1;color:#fff}
.stat .n em{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;color:var(--laiton)}
.stat p{font-size:13.5px;color:var(--doux-inv);margin-top:10px;max-width:220px}

/* ---------- CHIFFRE SIGNATURE (.stats-single, variante réutilisable) ----------
   Même composant .stats/.stat, pour un chiffre isolé mis en avant en fin de
   fiche réalisation (ex. rentabilité constatée sur une opération passée). */
.stats-single .wrap{grid-template-columns:1fr;justify-items:center;text-align:center}
.stats-single .stat{border-left:none;padding-left:0}
.stats-single .stat p{max-width:360px}

/* ---------- CHIFFRE D'ACCROCHE (.resultat-chiffre, réutilisable) ----------
   Point d'entree visuel en tete d'une section Resultat : meme typo Archivo
   que .stat .n, mais fond clair + bordure laiton (langage de .cas-reel),
   jamais un fond --encre ici pour ne pas en coller un second contre celui
   du bloc .stats qui suit (§4.6-bis). */
.resultat-chiffre{display:flex;align-items:baseline;flex-wrap:wrap;gap:16px 20px;border-left:3px solid var(--laiton);padding:2px 0 2px 22px;margin-bottom:22px}
.resultat-chiffre .num{font-weight:900;font-size:clamp(34px,4vw,52px);letter-spacing:-.03em;line-height:1;color:var(--encre)}
.resultat-chiffre .num em{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;color:var(--laiton-2)}
.resultat-chiffre .lbl{font-size:13.5px;color:var(--doux);max-width:240px}

/* ---------- ENCART CTA INVESTISSEUR (.cta-invest, réutilisable) ----------
   Carte signature en fin de section Résultat, fond --sapin (même langage
   que .buyer.win) plutôt que --encre pour ne pas coller deux fonds sombres
   contre .stats juste après (§4.6-bis). Aligné horizontal des que la place
   le permet (question à gauche, CTA à droite), empilé en dessous. */
.cta-invest{background:var(--sapin);border-radius:var(--r);padding:32px 36px;margin-top:32px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cta-invest-q{display:flex;align-items:center;gap:16px}
.cta-invest-icon{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:rgba(194,160,92,.16);
  display:flex;align-items:center;justify-content:center;color:#fff}
.cta-invest-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.content-section .cta-invest-q p{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;font-size:clamp(20px,2.4vw,25px);color:#fff;margin:0}
.cta-invest .pill{flex:0 0 auto}
@media(max-width:560px){.cta-invest{padding:26px 24px}.cta-invest-q{width:100%}.cta-invest .pill{width:100%;justify-content:center}}

/* Carte signature CTA finale contenue (cercle-prive.html) : meme famille que
   .cta-invest (fond sombre, coins arrondis, carte dans le .wrap) mais mise en
   page verticale/centree pour un bloc de conversion de fin de page — remplace
   .final (plein ecran) qui donnait une impression de fin de page decourageant
   le scroll. Fond --encre : rien de sombre juste avant sur cette page (§4.6-bis). */
.cta-final{background:var(--encre);border-radius:var(--r);padding:64px 40px;text-align:center;position:relative;overflow:hidden}
.cta-final h2{color:#fff;font-size:clamp(28px,4.4vw,40px)}
.cta-final h2 .accent{color:var(--laiton);text-transform:none}
.content-section .cta-final p{color:var(--doux-inv);max-width:520px;margin:20px auto 34px;font-size:16px}
.cta-final .pill{box-shadow:0 10px 28px rgba(0,0,0,.28)}
.cta-final .tel-line{margin-top:26px;font-size:14.5px;color:var(--doux-inv)}
.cta-final .tel-reveal{color:var(--laiton)}
.cta-final .tel-reveal:hover{color:#fff}
@media(max-width:640px){.cta-final{padding:48px 24px}}

/* ---------- SECTIONS ---------- */
section{padding:110px 0}
.sec-idx{font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:var(--laiton-2);margin-bottom:16px;display:block}
.sec-head{display:grid;grid-template-columns:1fr minmax(260px,380px);gap:40px;align-items:end;margin-bottom:56px}
h2{font-weight:900;font-size:clamp(32px,4.6vw,58px);letter-spacing:-.03em;line-height:1.02;color:var(--encre)}
h2 .accent{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;color:var(--sapin)}
h3{font-weight:800;color:var(--encre)}
.sec-head p{color:var(--doux);max-width:380px;font-size:15.5px;justify-self:end}
.rv{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* section de contenu générique (gabarit B) */
.content-section h2{font-size:clamp(26px,3.4vw,38px)}
/* ---------- §8.12 LARGEUR DE CONTENU UNIQUE ----------
   Sur une page de contenu (situations, partenaires, société — et par
   extension réalisations, qui partagent les mêmes composants), tout élément
   de contenu partage la même largeur : celle du .wrap (pleine largeur,
   comme les H2/.sec-idx), sans plafond de lecture réduite propre à un
   élément. Concerné : .content-section p, .content-section p+.img-block,
   .cas-reel, .journey (+.journey-note), .faq-list, .maillage. Seules
   exceptions : les sections plein écran (hero, testimonial-featured, stats,
   final) — leur fond peut occuper tout l'écran, mais leur texte reste cadré
   dans une largeur de lecture volontaire, définie par composant (jamais
   collé aux bords). Le composant .sec-head (page d'accueil uniquement) est
   hors périmètre de cette règle. */
.content-section p{color:var(--texte);font-size:16px}
.content-section p+p{margin-top:16px}
.content-section strong{color:var(--encre)}

/* ---------- BENTO ---------- */
.bento{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:18px}
.card{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);padding:38px 32px;display:flex;flex-direction:column;min-height:340px;position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s}
.card:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(28,49,40,.10)}
.card .num{font-family:'Instrument Serif',serif;font-style:italic;font-size:20px;color:var(--laiton-2)}
.card h3{font-weight:800;font-size:24px;letter-spacing:-.02em;margin:14px 0 12px;color:var(--encre)}
.card p{font-size:14.5px;color:var(--doux);flex:1}
.card .go{margin-top:24px;font-weight:700;font-size:14px;color:var(--sapin);display:inline-flex;align-items:center;gap:8px}
.card .go::after{content:"→";transition:transform .25s}
.card:hover .go::after{transform:translateX(6px)}
.card.dark{background:var(--encre);border-color:transparent}
.card.dark h3{color:#fff}
.card.dark p{color:var(--doux-inv)}
.card.dark .go{color:var(--laiton)}

/* ---------- SITUATIONS (accueil) ---------- */
.situations{background:var(--encre);color:var(--texte-inv)}
.situations h2{color:#fff}
.sit-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* Chaque ligne devient un bloc distinct (fond legerement plus clair que
   --encre + bordure laiton discrete + coins arrondis) plutot qu'une ligne
   de liste continue : meme principe de renforcement au repos que sur
   partenaires/index.html, adapte au fond sombre (accents clairs/laiton
   plutot que bordure/ombre sombres). */
.sit{display:flex;align-items:baseline;gap:22px;padding:22px 54px 22px 20px;background:rgba(255,255,255,.035);border:1px solid rgba(194,160,92,.22);border-radius:12px;transition:background .25s,border-color .25s;position:relative}
.sit:hover{background:rgba(194,160,92,.09);border-color:var(--laiton)}
.sit-icon{width:36px;height:36px;min-width:36px;border-radius:50%;background:rgba(194,160,92,.2);border:1px solid rgba(194,160,92,.4);color:var(--laiton);display:flex;align-items:center;justify-content:center;align-self:center}
.sit-icon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sit .idx{font-family:'Instrument Serif',serif;font-style:italic;font-size:15px;color:var(--laiton);min-width:34px}
.sit .t{font-weight:700;font-size:17px;color:#fff}
.sit .d{font-size:13px;color:var(--doux-inv);margin-top:3px}
.sit::after{content:"›";position:absolute;right:18px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;background:var(--laiton);color:var(--encre);display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1;transition:transform .25s,background .25s}
.sit:hover::after{transform:translateY(-50%) translateX(4px);background:#D4B26B}

/* Variante claire de .situations : pour un usage hors accueil ou --encre
   directement apres un autre bloc --encre (hero-compact) casserait
   l'alternance de fond (§8.8). Laiton insuffisamment contraste sur
   --pierre (2.10:1) -> --sapin en remplacement pour .idx et la fleche. */
.situations.light{background:var(--pierre);color:var(--texte)}
.situations.light h2{color:var(--encre)}
.situations.light .sit-list{border-top-color:var(--ligne)}
.situations.light .sit{border-bottom-color:var(--ligne)}
.situations.light .sit .idx{color:var(--sapin)}
.situations.light .sit .t{color:var(--encre)}
.situations.light .sit .d{color:var(--doux)}
.situations.light .sit::after{color:var(--sapin)}

/* ---------- 4 ACHETEURS ---------- */
.buyers{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.buyer{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);padding:30px 26px;transition:transform .3s}
.buyer:hover{transform:translateY(-4px)}
.buyer .who{font-weight:800;font-size:17px;color:var(--encre);margin:12px 0 8px}
.buyer p{font-size:13.5px;color:var(--doux)}
.buyer .tag{font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:#B0533A}
.buyer.win{background:var(--sapin);border-color:transparent;transform:scale(1.03)}
.buyer.win:hover{transform:scale(1.05)}
.buyer.win .who{color:#fff}
.buyer.win p{color:#DAE7DF}
.buyer.win .tag{color:var(--laiton)}

/* ---------- GRILLE DE REALISATIONS (.reals-grid, reutilisable) ----------
   Remplace un style inline grid-template-columns sans breakpoint (cartes
   illisibles en 3 colonnes fixes sur mobile). 3 colonnes en desktop,
   2 en tablette, 1 en mobile. */
.reals-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:1024px){.reals-grid{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.reals-grid{grid-template-columns:1fr}}

/* ---------- GRILLE DE CARACTERISTIQUES (.feature-grid) ----------
   Reutilisable partout ou une liste de points courts (offre, garanties,
   arguments...) serait sinon un paragraphe dense. Meme carte visuelle
   que .buyer (fond blanc, bordure) mais titre+description seulement,
   sans le tag colore specifique aux "4 acheteurs". */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feature-card{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);padding:26px 24px}
.feature-card h3{font-weight:800;font-size:16px;color:var(--encre);margin-bottom:8px}
.feature-card p{font-size:13.5px;color:var(--doux);margin:0}
.feature-card .spec-icon{width:40px;height:40px;border-radius:50%;background:var(--pierre);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;color:var(--sapin)}
.feature-card .spec-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- PROCESS ---------- */
.process .step-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pstep{border-top:2px solid var(--encre);padding-top:22px}
.pstep .pn{font-weight:900;font-size:44px;letter-spacing:-.04em;color:var(--laiton-2);line-height:1}
.pstep h3{font-weight:800;font-size:17px;margin:12px 0 8px;color:var(--encre)}
.pstep p{font-size:13.5px;color:var(--doux)}

/* ---------- REALISATIONS ---------- */
.reals{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:18px}
.real{border-radius:var(--r);min-height:380px;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:28px;color:#fff;background:linear-gradient(160deg,#35604C,#1C3128);border:1px solid rgba(194,160,92,.35);box-shadow:0 4px 14px rgba(28,49,40,.16);transition:transform .25s cubic-bezier(.2,1.4,.4,1),box-shadow .25s,border-color .25s}
.real:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(28,49,40,.30);border-color:var(--laiton)}
.real:nth-child(2){background:linear-gradient(160deg,#4a4136,#1C3128)}
.real:nth-child(3){background:linear-gradient(160deg,#37503f,#1a1610)}
.real::before{content:"PHOTO";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;letter-spacing:.3em;color:rgba(255,255,255,.22);font-weight:700}
.real:has(img)::before{display:none}
.real img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.real:has(img)::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg, rgba(20,30,25,.05) 0%, rgba(15,22,18,.85) 100%)}
.real .info{position:relative;z-index:2}
.real-type{position:absolute;top:16px;left:16px;z-index:2;width:34px;height:34px;border-radius:50%;background:rgba(28,49,40,.65);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;color:#fff}
.real-type svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.real .commune{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--laiton)}
.real h3{font-weight:800;font-size:21px;margin-top:8px;letter-spacing:-.01em;color:#fff}
.real .d{font-size:13px;color:rgba(255,255,255,.75);margin-top:6px}
.real-chevron{position:absolute;top:16px;right:16px;z-index:2;width:26px;height:26px;border-radius:50%;background:var(--laiton);color:var(--encre);display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1;transition:transform .25s,background .25s}
.real:hover .real-chevron{transform:translateX(4px);background:#D4B26B}
.real .illus-badge{top:52px}
@media(prefers-reduced-motion:reduce){.real,.real-chevron{transition:none}}
/* Photo piscine (propriete familiale, tres panoramique 2.1:1) : recadree
   par .real img en carre, le centre par defaut coupait la moitie du bassin
   et la terrasse a droite — on decale vers la droite/le bas pour garder
   piscine + terrasse + mobilier plutot que la haie en fond. */
.real img[src*="grand-besancon-propriete-piscine"]{object-position:68% 45%}
/* Photo cuisine avant travaux (lot de copropriete) : contre-jour de la
   fenetre qui assombrit le reste de la piece a l'ecran, sans toucher au
   fichier source (§ img/ jamais modifie). */
.real img[src*="lot-copropriete-avant-01"]{filter:brightness(1.22) contrast(1.03)}

/* ---------- PREUVE ---------- */
.preuve{background:var(--blanc);border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne)}
.preuve .wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.preuve h2{font-size:clamp(28px,3.6vw,44px)}
.preuve p{color:var(--doux);margin-top:18px;font-size:15.5px}
.assur{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.assur span{background:var(--pierre);border:1px solid var(--ligne);padding:9px 16px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--texte)}

/* ---------- PASTILLES D'ÉTAPES (.step-tags, réutilisable) ----------
   Reprend le langage visuel de .m-badge (fond laiton, texte encre, pilule
   Archivo) en version inline dans le flux du texte, pour une liste courte
   d'actions/étapes à côté d'une seule photo (pas un reportage .chantier,
   voir .work-list ci-dessous pour ce cas plus chargé). */
.step-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.step-tags span{background:var(--laiton);color:var(--encre);font-family:'Archivo',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.01em;padding:8px 16px;border-radius:999px}

/* ---------- LISTE DE TRAVAUX SOBRE (.work-list, réutilisable) ----------
   Colonne de puces discrète pour une liste de travaux/équipements, quand
   le reportage photo (.chantier) porte déjà la charge visuelle de la
   section — remplace .tag-list (pastilles), trop chargé à côté d'une
   galerie photo. */
.work-list{margin-top:16px;columns:2;column-gap:32px}
.work-list li{list-style:none;position:relative;padding-left:18px;margin-bottom:9px;font-size:15px;color:var(--texte);break-inside:avoid}
.work-list li::before{content:'—';position:absolute;left:0;color:var(--laiton)}
@media(max-width:640px){.work-list{columns:1}}

/* ---------- PHOTO HERO PLEINE LARGEUR (.hero-photo, fiches réalisations) ----------
   Seule exception assumée à la règle §4.6-ter (largeur de contenu unique) :
   une photo d'ouverture immersive, hors du .wrap, pleine largeur d'écran. */
.hero-photo{width:100%;height:56vw;max-height:560px;min-height:280px;overflow:hidden}
.hero-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- ENCART PROJECTION (.projet-encart, fiches réalisations) ----------
   Bloc visuellement distinct des vraies photos, pour une projection 3D ou tout
   visuel non photographique — légende obligatoire, jamais mêlé aux photos réelles. */
.projet-encart{background:var(--pierre);border-left:3px solid var(--laiton);border-radius:var(--r);padding:28px 32px}
.projet-encart .img-block{margin:0;min-height:420px}
.legende{font-size:13px;color:var(--doux);font-style:italic;margin-top:12px}

/* ---------- DUO PHOTO + LÉGENDE PROPRE (.duo-photos, réutilisable) ----------
   Deux photos côte à côte, chacune avec sa propre légende toujours visible
   (contrairement à .photo-grid, dont la légende n'apparaît qu'au survol). */
.duo-photos{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:16px}
@media(max-width:640px){.duo-photos{grid-template-columns:1fr}}

/* ---------- REPORTAGE CHANTIER PAR ONGLETS (.chantier, réutilisable) ----------
   Composant standard pour toute fiche réalisation disposant d'un vrai
   reportage photo Avant / Pendant / Après : navigation par onglets, une
   grande photo par phase avec légende incrustée, bande de vignettes
   cliquables pour naviguer dans la série de cette phase. */
.chantier{margin:32px 0}
.chantier-tabs{display:flex;gap:10px;margin-bottom:20px}
.chantier-tab{background:var(--blanc);border:1.5px solid var(--ligne);color:var(--doux);
  font-family:'Archivo',sans-serif;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  padding:10px 22px;border-radius:999px;cursor:pointer;transition:.25s}
.chantier-tab.active{background:var(--encre);border-color:var(--encre);color:#fff}
.chantier-tab:hover:not(.active){border-color:var(--laiton)}
.chantier-stage{display:none;animation:fadein .5s ease}
.chantier-stage.active{display:block}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.chantier-main{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:16/10;margin-bottom:12px;background:var(--encre)}
.chantier-main img{width:100%;height:100%;object-fit:cover;display:block}
.chantier-main figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px;
  background:linear-gradient(to top, rgba(28,49,40,.9), transparent);
  font-family:'Instrument Serif',serif;font-style:italic;color:#fff;font-size:15px}
.chantier-thumbs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.chantier-thumbs img{width:88px;height:64px;object-fit:cover;border-radius:8px;cursor:pointer;
  opacity:.55;transition:.2s;flex-shrink:0;border:2px solid transparent}
.chantier-thumbs img.active{opacity:1;border-color:var(--laiton)}
.illus-thumb-wrap{position:relative;flex-shrink:0;display:block}
@media(prefers-reduced-motion:reduce){.chantier-stage{animation:none}}

/* besancon-saint-ferjeux : le cadre .chantier-main (16:10) coupait trop les
   photos portrait (0.56-0.75) prises au telephone. Deux traitements :
   - object-position par photo, quand un recadrage cover reste honnete
     (garde le sujet principal en cadre, meme si les bords sont coupes) ;
   - object-fit:contain quand le sujet doit rester visible en entier
     (aucun recadrage cover, meme repositionne, ne le permet) : mieux vaut
     une marge --encre sur les cotes qu'une piece a moitie coupee.
   Toilettes + escalier apres travaux : fusionnees en une seule image
   composite paysage (besancon-saint-ferjeux-toilettes-escalier-apres.webp),
   pas besoin de traitement particulier, cover/center suffit. */
.chantier-main img[src*="toilette-avant"],
.chantier-thumbs img[src*="toilette-avant"]{object-position:center 62%}
.chantier-main img[src*="carrelage-pendant"],
.chantier-thumbs img[src*="carrelage-pendant"]{object-position:center 75%}
.chantier-main img[src*="salle-a-manger-apres"],
.chantier-thumbs img[src*="salle-a-manger-apres"]{object-position:center 60%}
.chantier-main img[src*="escalier-avant"],
.chantier-thumbs img[src*="escalier-avant"],
.chantier-main img[src*="cuisine-pendant"],
.chantier-thumbs img[src*="cuisine-pendant"],
.chantier-main img[src*="dressing-apres"],
.chantier-thumbs img[src*="dressing-apres"]{object-fit:contain}

/* ---------- AVERTISSEMENT PHOTOS D'ILLUSTRATION (.illus-notice, .illus-badge) ----------
   EXCEPTION PONCTUELLE a la politique photo du site (§8.8, qui interdit
   normalement toute image qui n'est pas une vraie photo BONAPPART verifiee).
   Utilise UNIQUEMENT sur grand-besancon-combles.html, en attendant les
   vraies photos du chantier. Ne jamais reutiliser ces classes sur une autre
   fiche sans revalider explicitement l'exception. */
.illus-notice{display:flex;align-items:flex-start;gap:12px;background:var(--pierre);
  border:1px solid var(--ligne);border-left:3px solid var(--laiton);border-radius:var(--r);
  padding:16px 20px;margin:24px 0 28px}
.illus-notice-icon{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--laiton);
  color:var(--encre);display:flex;align-items:center;justify-content:center;
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:700;font-size:13px}
.illus-notice p{font-size:13.5px;color:var(--doux);margin:0;line-height:1.5}
.illus-badge{position:absolute;top:12px;right:12px;z-index:2;background:rgba(255,255,255,.88);
  color:var(--doux);font-family:'Archivo',sans-serif;font-weight:700;font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.illus-thumb-badge{position:absolute;top:2px;right:2px;width:13px;height:13px;border-radius:50%;
  background:rgba(255,255,255,.88);color:var(--doux);font-family:'Instrument Serif',serif;
  font-style:italic;font-size:9px;line-height:13px;text-align:center;pointer-events:none}

/* ---------- MOSAÏQUE ÉDITORIALE (.mosaic, standard fiches réalisations) ----------
   Composant standard pour toute galerie de plusieurs photos sur une fiche
   réalisation : asymétrique (grande verticale + large + carrée), badge de
   statut (Avant/Après/Projection 3D — la projection garde impérativement une
   couleur de badge distincte, --sapin, pour ne jamais être confondue avec une
   vraie photo, cf. §8.8) et légende incrustée en Instrument Serif italique.
   Remplace .photo-grid pour les galeries de plusieurs photos ; .duo-photos
   reste utile pour associer une photo à un document non-photo (.plan-box).
   Reveal au scroll (.rv, §4.4) : chaque figure reçoit .rv individuellement,
   le décalage de transition ci-dessous crée l'effet de cascade. */
.mosaic{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:auto auto;gap:14px;margin:28px 0}
.mosaic .m-big{grid-row:span 2}
.mosaic figure{position:relative;overflow:hidden;border-radius:var(--r);margin:0;background:var(--encre)}
.mosaic .m-big img{aspect-ratio:4/5}
.mosaic .m-wide img{aspect-ratio:16/10}
.mosaic .m-sq img{aspect-ratio:1/1}
.mosaic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
/* besancon-tristan-bernard-chambre-avant.webp (899x1600, 0.56, tres portrait)
   et -cuisine-avant.webp (1600x899, 1.78, tres large) sont cote a cote en
   .m-sq (1:1) sur cette fiche : ratio partage qui equilibre le recadrage
   des deux (~44% coupe chacune, aucune des deux n'est favorisee), avec un
   object-position par image pour garder le sujet utile dans le cadre. */
.mosaic img[src*="tristan-bernard-chambre-avant"]{object-position:center 22%}
.mosaic img[src*="tristan-bernard-cuisine-avant"]{object-position:55% center}
.mosaic figure:hover img{transform:scale(1.04)}
.mosaic figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 18px 14px;
  background:linear-gradient(to top, rgba(28,49,40,.88), transparent);
  font-family:'Instrument Serif',serif;font-style:italic;color:#fff;font-size:14.5px}
.m-badge{position:absolute;top:12px;left:12px;z-index:2;background:var(--laiton);color:var(--encre);
  font-family:'Archivo',sans-serif;font-weight:700;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px}
.m-badge.projection{background:var(--sapin);color:#fff}
.mosaic figure.rv:nth-child(2){transition-delay:.12s}
.mosaic figure.rv:nth-child(3){transition-delay:.24s}
.mosaic figure.rv:nth-child(4){transition-delay:.36s}
@media(max-width:820px){.mosaic{grid-template-columns:1fr 1fr}.m-big{grid-column:span 2;grid-row:span 1}.m-big img{aspect-ratio:16/10}}
@media(prefers-reduced-motion:reduce){.mosaic img{transition:none}.mosaic figure:hover img{transform:none}}
/* variante 2 photos à légende longue (ex. "Le projet") : la case à 2 colonnes
   du mosaic standard est trop étroite en mobile pour une légende-phrase
   entière sans chevaucher le badge — 2 colonnes fixes, 1 colonne sous 640px. */
.mosaic.mosaic-duo{grid-template-columns:1fr 1fr}
@media(max-width:640px){.mosaic.mosaic-duo{grid-template-columns:1fr}}
/* 3e figure pleine largeur sous une paire .mosaic-duo (.f-full) : ratio
   proche du natif de besancon-tristan-bernard-entree-avant.webp (996x666,
   1.5), quasiment pas de recadrage puisqu'elle occupe toute la largeur. */
.mosaic.mosaic-duo .f-full{grid-column:1/-1}
.mosaic.mosaic-duo .f-full img{aspect-ratio:3/2}
/* variante 5 photos, vitrine "apres" (.mosaic-five, reutilisable) : une
   photo dominante pleine largeur en ratio natif (jamais de crop force sur
   la hero — a la difference de .m-big, pensee pour un portrait, aucune de
   nos photos "apres" ne l'est) + 4 photos secondaires egales en dessous.
   Reprend figure/img/figcaption/hover de .mosaic tel quel. */
.mosaic.mosaic-five{grid-template-columns:repeat(4,1fr)}
.mosaic.mosaic-five .f-big{grid-column:1/-1}
.mosaic.mosaic-five .f-big img{aspect-ratio:3/2}
.mosaic.mosaic-five .f-small img{aspect-ratio:1/1}
@media(max-width:820px){.mosaic.mosaic-five{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.mosaic.mosaic-five{grid-template-columns:1fr}}

/* ---------- PLAN / DOCUMENT TECHNIQUE (.plan-box, réutilisable) ----------
   Pour un plan, schéma ou document — jamais recadré (object-fit:contain) ni
   assombri comme une photo (.img-block) : fond blanc, traits et textes lisibles.
   Badge + légende incrustée en bas, même esprit que .mosaic, mais en clair
   (fond blanc du document) au lieu du dégradé sombre réservé aux photos. */
.plan-box{position:relative;background:#fff;border:1px solid var(--ligne);border-radius:var(--r);overflow:hidden;min-height:420px}
.plan-box .plan-inner{display:flex;align-items:center;justify-content:center;height:100%;padding:14px}
.plan-box img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.plan-box figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 18px 12px;
  background:linear-gradient(to top, rgba(255,255,255,.96) 55%, transparent);
  font-family:'Instrument Serif',serif;font-style:italic;color:var(--doux);font-size:14.5px}
/* variante 3 plans egaux (.plan-trio, reutilisable) : galerie de plans
   techniques (etage, masse, cadastre...) en fin de fiche realisation —
   meme .plan-box, juste une grille 3 colonnes dediee. */
.plan-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}
.plan-trio .plan-box{min-height:280px}
@media(max-width:900px){.plan-trio{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.plan-trio{grid-template-columns:1fr}}

/* ---------- PHRASE DE CLÔTURE (.pull-line, réutilisable fiches réalisations) ----------
   Reprend la dernière phrase d'une section pour lui donner du poids visuel,
   sans ajouter de texte — même esprit que .accent (Instrument Serif italique). */
.pull-line{font-family:'Instrument Serif',serif;font-style:italic;font-size:clamp(19px,2.1vw,24px);color:var(--sapin);line-height:1.35;margin-top:18px}
/* note discrète (à venir), plus légère qu'un .img-block vide */
.a-venir-note{margin-top:24px;padding-left:20px;border-left:2px solid var(--ligne);font-size:14px;color:var(--doux)}

/* ---------- GALERIE PHOTO (.photo-grid, réutilisable fiches réalisations) ----------
   Grille responsive : 2 colonnes desktop, 1 colonne mobile. Légende visible au
   survol uniquement (clavier : :focus-within). */
.photo-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:24px 0}
.photo-grid figure{position:relative;margin:0;border-radius:var(--r);overflow:hidden;background:var(--pierre)}
.photo-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.photo-grid figcaption{position:absolute;inset:auto 0 0 0;padding:14px 16px;background:linear-gradient(180deg,transparent,rgba(28,49,40,.78));color:#fff;font-size:13px;font-weight:600;opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease}
.photo-grid figure:hover figcaption,.photo-grid figure:focus-within figcaption{opacity:1;transform:none}
@media(max-width:640px){.photo-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.photo-grid figcaption{transition:none}}

/* ---------- CAS RÉEL (encadré, pages situations) ---------- */
.cas-reel{background:var(--pierre);border-left:3px solid var(--laiton);border-radius:12px;padding:28px 32px;margin:8px 0}
.cas-reel .eyebrow{display:block;margin-bottom:10px}
.cas-reel h2{font-weight:800;font-size:21px;color:var(--encre);margin-bottom:14px}
.cas-reel p{font-size:15.5px;color:var(--texte)}
.cas-reel p+p{margin-top:14px}

/* ---------- MISE EN EVIDENCE TEXTE (.key-point, reutilisable) ----------
   Surlignage doux pour LA phrase la plus differenciante d'un paragraphe
   (cas reels, sections notaires, etc.) — jamais une phrase entiere en
   gras, ce composant fait ce travail visuellement sans alourdir le
   texte. Un seul .key-point par paragraphe maximum : sa force vient de
   sa rarete. Complementaire de <strong> (mots-cles courts, 3-5 mots
   max) : <strong> ponctue, .key-point marque LE point cle du paragraphe. */
.key-point{background:rgba(194,160,92,.15);padding:0 4px;border-radius:3px}

/* ---------- TÉMOIGNAGE (citation de tiers — même esprit que .cas-reel,
   dédié à une citation, pas à un récit d'opération) ---------- */
.testimonial{background:var(--pierre);border-left:3px solid var(--laiton);border-radius:12px;padding:32px 36px;margin:8px 0}
.testimonial .quote-mark{display:block;font-family:'Instrument Serif',serif;font-style:italic;font-size:56px;line-height:1;color:var(--laiton);margin-bottom:-8px}
.testimonial p{font-size:16px;color:var(--texte);line-height:1.6;max-width:none}
.testimonial .attribution{display:block;margin-top:18px;text-align:right;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--doux)}

/* ---------- TÉMOIGNAGE MIS EN AVANT (.testimonial-featured) ----------
   Variante pleine largeur, plus impactante que .testimonial : a utiliser
   en tete de page quand un seul temoignage fort remplace la citation
   discrete habituellement en bas de page. Fond --encre : ne JAMAIS le
   placer directement apres .hero/.hero-compact (aussi --encre) ni avant
   .final — toujours au moins une section a fond clair entre deux blocs
   sombres (regle §8.8 alternance). Padding : herite du .section{padding:
   110px 0} par defaut, pas d'override — reste uniforme avec le reste du
   site. Reveal au scroll via la classe .rv deja geree site-wide (site.js
   + regle .rv/.rv.in ci-dessus, respecte prefers-reduced-motion). */
.testimonial-featured{background:var(--encre);color:#fff;position:relative;overflow:hidden;text-align:center}
.testimonial-featured::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 0%, rgba(194,160,92,.12), transparent 60%);pointer-events:none}
.testimonial-featured .wrap{max-width:820px;margin:0 auto;position:relative;z-index:2}
.testimonial-featured .mark{font-family:'Instrument Serif',serif;font-style:italic;font-size:120px;line-height:.5;color:var(--laiton);display:block;margin-bottom:10px}
.testimonial-featured blockquote{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;font-size:clamp(22px,3.2vw,34px);line-height:1.45;color:#fff;margin:0 0 32px}
.testimonial-featured .attr{display:inline-flex;align-items:center;gap:14px}
.testimonial-featured .attr .line{width:36px;height:1px;background:var(--laiton)}
.testimonial-featured .attr .who{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--doux-inv)}

/* ---------- BLOC IMAGE (emplacements photos, overlay vert §8.8) ----------
   En attendant les photos réelles (WebP) : dégradé de substitution +
   overlay encre (rgba(28,49,40,.35) → rgba(28,49,40,.7)) qui restera au-dessus
   de l'image une fois le fichier fourni, pour garder le texte lisible. */
.img-block{position:relative;border-radius:var(--r);overflow:hidden;min-height:280px;background:linear-gradient(160deg,#35604C,#1C3128);display:flex;align-items:center;justify-content:center}
.img-block::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(28,49,40,.35), rgba(28,49,40,.7))}
.img-block img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* besancon-bien-invendable-visite.webp (rotonde.png) : le plafond vide
   occupe le haut du cadre, le contenu (lit, affaires) est en bas —
   recentre le cadrage vers le bas plutot que le centre par defaut. */
.img-block img[src*="bien-invendable-visite"]{object-position:center 75%}
.img-block .img-label{position:relative;z-index:2;color:#fff;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;text-align:center;padding:0 24px}
.cas-reel .img-block{min-height:200px;margin-bottom:20px}

/* ---------- COMPARATEUR AVANT/APRÈS (.compare-slider, réutilisable) ----------
   Composant a utiliser des qu'une paire de photos avant/apres reelles est
   disponible pour une realisation (remplace .img-block dans ce cas precis ;
   .img-block reste le composant par defaut pour une photo unique).

   Marquage HTML minimal, JS auto-cable par site.js (aucune ligne de JS a
   ecrire par instance, juste ce bloc) :

   <div class="compare-slider">
     <img class="cs-before" src="../img/xxx-avant.webp" alt="Avant : ..." loading="lazy">
     <img class="cs-after" src="../img/xxx-apres.webp" alt="Après : ..." loading="lazy">
     <div class="cs-handle" role="slider" tabindex="0" aria-label="Comparer avant et après"
          aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">
       <span class="cs-grip" aria-hidden="true">↔</span>
     </div>
   </div>

   - Les deux <img> doivent etre recadrees a un ratio coherent entre elles
     (l'une sous l'autre en position:absolute, chacune en object-fit:cover :
     un ratio proche evite qu'un des deux cadrages paraisse plus "zoome").
   - Le curseur se deplace par glisser (souris/tactile, Pointer Events) et
     au clavier (flèches gauche/droite au focus, Home/End pour les extremes).
   - Position pilotee par la custom property --pos (0% a 100%), lue par le
     clip-path de .cs-after et le left du curseur — pas de JS a modifier
     pour changer le style, tout passe par cette seule variable.
   - Hauteur en aspect-ratio (3/2, ratio des photos avant/apres livrees),
     pas en min-height fixe : un min-height court + object-fit:cover sur
     un conteneur large ecrase l'image (on ne voit qu'une bande centrale).
     Avec l'aspect-ratio, la hauteur suit la largeur reelle du bloc et
     l'image se voit en entier. Si une future paire de photos a un ratio
     tres different de 3/2, ajuster --cs-ratio pour cette instance
     (ex. style="--cs-ratio:4/3" sur le .compare-slider concerne). */
.compare-slider{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:var(--cs-ratio, 3/2);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.cas-reel .compare-slider{margin-bottom:20px}
.compare-slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;user-select:none}
/* mamirolle-facade-pendant.webp : photo tres portrait (0.46) dans un cadre
   large --cs-ratio:16/10 partage avec la projection (1.5) — la facade et
   les fenetres sont a mi-hauteur du fichier source, entre le ciel (haut)
   et le gravier au sol (bas) : on centre le recadrage sur cette bande. */
.compare-slider img[src*="mamirolle-facade-pendant"]{object-position:center 44%}
.compare-slider .cs-after{clip-path:inset(0 calc(100% - var(--pos, 50%)) 0 0)}
.compare-slider .cs-handle{position:absolute;top:0;bottom:0;left:var(--pos, 50%);transform:translateX(-50%);width:44px;z-index:2;cursor:ew-resize;touch-action:none;display:flex;align-items:center;justify-content:center}
.compare-slider .cs-handle::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.15);transform:translateX(-50%)}
.compare-slider .cs-grip{position:relative;z-index:1;width:44px;height:44px;border-radius:50%;background:var(--laiton);color:var(--encre);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.compare-slider .cs-handle:focus-visible .cs-grip{outline:2px solid #fff;outline-offset:2px}
@media (prefers-reduced-motion:no-preference){.compare-slider .cs-grip{transition:transform .15s ease}}
.compare-slider .cs-handle:active .cs-grip{transform:scale(1.08)}

/* ---------- FAQ ACCORDÉON (ouverture animée, §4.4 finitions motion v2) ----------
   Technique CSS pure : le wrapper .faq-body anime grid-template-rows 0fr→1fr
   (supportée nativement par <details>/[open], pas de JS nécessaire). */
.faq-list{border-top:1px solid var(--ligne)}
.faq-item{border-bottom:1px solid var(--ligne)}
.faq-item summary{list-style:none;cursor:pointer;padding:22px 4px;font-weight:700;font-size:16.5px;color:var(--encre);display:flex;align-items:center;justify-content:space-between;gap:20px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:'Instrument Serif',serif;font-size:26px;color:var(--laiton-2);flex:0 0 auto;transition:transform .25s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .faq-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.faq-item[open] .faq-body{grid-template-rows:1fr}
.faq-item .faq-body>.a{overflow:hidden;padding:0 4px 24px;color:var(--doux);font-size:15px}
@media (prefers-reduced-motion:reduce){.faq-item .faq-body{transition:none}}

/* ---------- SITUATIONS LIÉES (.related-row, rendu validé 18/07) ---------- */
.maillage{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;padding:28px 0;border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne)}
.maillage .lbl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--laiton)}
.maillage a{font-weight:600;font-size:14.5px;color:var(--sapin)}
.maillage a:hover{color:var(--laiton)}

/* ---------- PARCOURS ÉTAPE PAR ÉTAPE (.journey, §4.4) ----------
   Timeline verticale — code de référence du PDF, appliqué tel quel. */
.journey{margin:18px 0}
.jstep{position:relative;padding:0 0 26px 46px}
.jstep::before{content:"";position:absolute;left:13px;top:30px;bottom:0;width:2px;background:var(--ligne)}
.jstep:last-child::before{display:none}
.jstep .dot{position:absolute;left:0;top:2px;width:28px;height:28px;border-radius:50%;background:var(--blanc);border:2px solid var(--sapin);display:flex;align-items:center;justify-content:center;font-family:'Instrument Serif',serif;font-style:italic;font-size:13px;color:var(--sapin)}
.jstep:last-child .dot{background:var(--laiton);border-color:var(--laiton);color:#fff}
.jstep h3{font-weight:800;font-size:16.5px;color:var(--encre);margin-bottom:4px}
.jstep p{font-size:14px;color:var(--doux)}
.journey-note{margin-top:20px;padding-left:20px;border-left:2px solid var(--ligne);font-size:15px;color:var(--doux)}

/* ---------- BARRE CTA COLLANTE MOBILE (pages situations, §4.4 motion v2) ----------
   Bandeau bas d'écran, mobile uniquement, apparaît après 60% de scroll. */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--encre);padding:12px 16px;display:none;transform:translateY(100%);transition:transform .3s ease;border-top:1px solid var(--ligne-inv)}
.sticky-cta.show{transform:translateY(0)}
.sticky-cta .pill{display:flex;justify-content:center;width:100%;font-size:14.5px;padding:14px}
@media (prefers-reduced-motion:reduce){.sticky-cta{transition:none}}

/* ---------- BANDEAU COOKIES (consentement CNIL — toutes pages) ----------
   Hors écran par défaut (transform), affiché via .show tant qu'aucun choix
   n'est enregistré. Accepter/Refuser à égalité visuelle. Navigation jamais
   bloquée : le reste de la page reste utilisable derrière le bandeau. */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:200;background:var(--encre);padding:22px 24px;box-shadow:0 -8px 24px rgba(0,0,0,.18);transform:translateY(100%);transition:transform .3s ease;border-top:1px solid var(--ligne-inv)}
.cookie-banner.show{transform:translateY(0)}
.cookie-banner-in{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between}
.cookie-banner p{margin:0;font-size:14px;line-height:1.55;color:var(--doux-inv);max-width:640px;flex:1 1 320px}
.cookie-banner p a{color:var(--laiton);text-decoration:underline}
.cookie-banner-actions{display:flex;gap:12px;flex:0 0 auto}
.cookie-banner-actions button.pill{font-size:14px;padding:12px 26px;cursor:pointer}
@media (max-width:640px){.cookie-banner-in{flex-direction:column;align-items:stretch}.cookie-banner-actions{justify-content:stretch}.cookie-banner-actions button.pill{flex:1;justify-content:center}}
@media (prefers-reduced-motion:reduce){.cookie-banner{transition:none}}

/* ---------- TÉLÉPHONE PROTÉGÉ (§8.7) ---------- */
.tel-reveal{background:none;border:none;font:inherit;color:var(--laiton);font-weight:700;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px}
.tel-reveal:hover{color:var(--sapin)}
.final .tel-reveal{color:#fff}
.final .tel-reveal:hover{color:var(--laiton)}

/* ---------- CTA FINAL ---------- */
.final{background:var(--encre);color:#fff;text-align:center;padding:130px 0;position:relative;overflow:hidden}
.final img.wm{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:120%;opacity:.04;pointer-events:none}
.final .wrap{position:relative;z-index:2}
.final h2{color:#fff;font-size:clamp(36px,6vw,84px);text-transform:uppercase;letter-spacing:-.03em}
.final h2 .accent{color:var(--laiton);text-transform:none}
.final p{color:var(--doux-inv);max-width:520px;margin:22px auto 38px;font-size:16px}
.final .pill{margin-top:32px}
.final.compact{padding:80px 0}
.final.compact h2{font-size:clamp(28px,4.4vw,44px)}
.final .tel-line{margin-top:28px;font-size:14.5px;color:var(--doux-inv)}

/* ---------- PAGES LÉGALES (mentions, confidentialité) ----------
   Contenu dense, gabarit propre : pas de hero sombre, colonne de lecture
   resserrée, tableaux et fiches d'identité. Classes préfixées legal- pour
   ne rien interférer avec les composants existants (card, table...). */
.legal-wrap{max-width:820px}
.legal-wrap .updated{font-size:13px;color:var(--doux);margin-bottom:12px}
.legal-wrap h2{font-weight:800;font-size:20px;color:var(--encre);margin:44px 0 14px;padding-top:24px;border-top:1px solid var(--ligne)}
.legal-wrap h2:first-of-type{border-top:none;margin-top:0;padding-top:0}
.legal-wrap p{margin-bottom:12px;font-size:15px;max-width:none}
.legal-wrap ul{margin:0 0 12px 20px}
.legal-wrap li{margin-bottom:6px;font-size:15px;color:var(--texte)}
.legal-wrap a{color:var(--sapin);text-decoration:underline}
.legal-card{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);padding:26px 28px;margin:16px 0}
.legal-card dl{display:grid;grid-template-columns:180px 1fr;gap:10px 16px;font-size:14.5px;margin:0}
.legal-card dt{font-weight:700;color:var(--doux)}
.legal-card dd{color:var(--texte)}
.legal-table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14px}
.legal-table th{background:var(--encre);color:#fff;text-align:left;padding:10px 12px;font-size:13px}
.legal-table td{border:1px solid var(--ligne);padding:9px 12px;background:var(--blanc);vertical-align:top;color:var(--texte)}
.legal-fill{background:#FDF3E3;border:1px dashed var(--laiton-2);color:#7A5E2A;padding:1px 6px;border-radius:4px;font-size:.95em;font-family:monospace}
.legal-box{background:var(--blanc);border-left:4px solid var(--laiton);border-radius:12px;padding:18px 22px;margin:16px 0;font-size:14.5px;color:var(--texte)}

/* ---------- FORMULAIRE (offre-72h) ---------- */
.form-wrap{max-width:640px}
.form-card{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);padding:40px 36px;margin-top:8px}
.field{margin-bottom:22px}
.field label{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--doux);margin-bottom:8px}
.field input[type="text"],.field input[type="tel"],.field input[type="email"],.field select{
  width:100%;border:1px solid var(--doux);border-radius:10px;padding:14px 16px;font-family:'Archivo',sans-serif;
  font-size:15px;color:var(--texte);background:#fff;transition:border-color .2s}
.field input:focus,.field select:focus{outline:none;border-color:var(--sapin)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2366706A'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='%2366706A' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.field-check{display:flex;gap:12px;align-items:flex-start;margin:28px 0 30px}
.field-check input{margin-top:3px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--sapin)}
.field-check label{font-size:13.5px;color:var(--texte);line-height:1.5}
.field-check a{color:var(--sapin);text-decoration:underline}
.form-card button.pill{width:100%;justify-content:center;font-size:15.5px;padding:16px 22px}
.form-card button.pill[disabled]{opacity:.65;cursor:not-allowed}
.form-card button.pill[disabled]:hover{transform:none}
.form-note{font-size:13px;color:var(--doux);margin-top:14px;text-align:center}

/* Validation temps réel : erreur discrète / positive, jamais affichée avant blur ou tentative d'envoi */
.field.has-error input,.field.has-error select{border-color:#B0533A}
.field.is-valid input,.field.is-valid select{border-color:var(--sapin)}
.field-error{display:none;color:#B0533A;font-size:12.5px;margin-top:6px}
.field-error:empty{display:none !important}
.field.has-error .field-error{display:block}
.field-check.has-error label{color:#B0533A}
.field-check.has-error .field-error{display:block}
.field-sub{margin-top:10px}
.form-error{display:none;background:rgba(176,83,58,.08);border-left:4px solid #B0533A;border-radius:12px;padding:14px 18px;margin-bottom:22px;font-size:14px;color:#7A3E2C}
.form-error.show{display:block}
/* Honeypot anti-spam : hors écran, jamais display:none seul (certains bots l'évitent) */
.hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- GROUPE DE CASES A COCHER (.field-check-group, derive de .field-check) ----------
   Pour un choix multiple dans un formulaire (ex. typologie, secteurs recherches) :
   memes codes que .field-check (case + libelle, accent sapin) mais en puces repliables
   plutot qu'un bloc unique. <fieldset> natif pour l'accessibilite (legend = intitule du
   groupe), bordure par defaut du fieldset remise a zero. */
.field-check-group{border:none;padding:0;margin:0 0 22px}
.field-check-group legend{padding:0;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--doux);margin-bottom:10px}
.check-chips{display:flex;flex-wrap:wrap;gap:10px}
.check-chip{display:flex;align-items:center;gap:8px;border:1.5px solid var(--ligne);border-radius:999px;padding:9px 16px;cursor:pointer;transition:border-color .15s ease}
.check-chip:hover{border-color:var(--laiton)}
.check-chip input{width:16px;height:16px;accent-color:var(--sapin);flex:0 0 auto;margin:0}
.check-chip label{font-size:13.5px;color:var(--texte);cursor:pointer}
.field-check-group.has-error .check-chip{border-color:#B0533A}
.field-check-group.has-error .field-error{display:block}
.field-check-group .field-error{margin-top:8px}

/* ---------- LIEN RETOUR (.back-link, fiches realisations individuelles) ----------
   Petit lien discret entre le header et la premiere section de contenu :
   renvoie vers la grille realisations/index.html sans gros bouton qui
   casserait la hierarchie visuelle (H1 puis Contexte). */
.back-link-wrap{padding:22px 0 0}
.back-link{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--doux)}
.back-link .arrow{transition:transform .2s ease}
.back-link:hover{color:var(--sapin)}
.back-link:hover .arrow{transform:translateX(-3px)}
/* Variante bas de page (.maillage-back) : meme lien, en fin de rangee .maillage
   (deja flex-wrap), flèche inversée pour suivre le sens de lecture "vers la
   sortie". Repasse en flux normal sous 640px pour ne pas casser l'empilement
   des autres liens de maillage. */
.maillage-back{margin-left:auto}
.maillage-back:hover .arrow{transform:translateX(3px)}
@media(max-width:640px){.maillage-back{margin-left:0}}

/* ---------- LANDING PAGE AUTONOME (investisseurs/recherche-bien.html) ----------
   Header et footer allegés : pas de menu/burger (aucune echappatoire vers le
   reste du site, un seul objectif de conversion), pas de colonnes de liens
   en pied de page — juste la marque et les mentions legales obligatoires.
   Reprend les styles nav/footer existants, seul le contenu interne change. */
.footer-minimal{padding:40px 0}
.footer-minimal .wrap{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.footer-minimal .mentions{margin-top:0;border-top:none;padding-top:0}

/* recherche-bien.html : carte "preuve par l'exemple", derivee de .cas-reel
   (fond pierre + bordure laiton existants) + une vraie photo sans overlay
   sombre (contrairement a .img-block, pense pour un texte incruste par
   dessus) — ici la photo doit se lire pleinement, le chiffre est a cote,
   pas dessus. */
.proof-card{display:grid;grid-template-columns:1fr 1.3fr;gap:28px;align-items:center}
.proof-media{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3}
.proof-media img{width:100%;height:100%;object-fit:cover;display:block}
.proof-content .resultat-chiffre{margin:14px 0}
.proof-link{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px;color:var(--sapin);margin-top:4px}
.proof-link:hover{color:var(--laiton)}
.proof-link .arrow{transition:transform .2s ease}
.proof-link:hover .arrow{transform:translateX(3px)}
@media(max-width:768px){.proof-card{grid-template-columns:1fr}}

/* Sous-titres discrets a l'interieur du .form-card (recherche-bien.html,
   off-market.html) : regroupe les champs par bloc logique sans toucher a
   la structure du formulaire (toujours des .field freres au meme niveau,
   la validation JS ne s'appuie que sur .closest('.field'...), insensible
   a ces intitules purement visuels). */
.form-group-title{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--laiton);margin:0 0 18px;padding-top:22px;border-top:1px solid var(--ligne)}
.form-card>.form-group-title:first-child{padding-top:0;border-top:none}

/* ---------- PHOTO HERO CADREE (.hero-photo-frame, recherche-bien.html) ----------
   A la difference de .hero-photo (pleine largeur ecran, pensee pour des
   sources deja tres larges), cette page n'a qu'une source a 1440px de large
   au mieux (aucune version plus grande disponible) : l'etirer en pleine
   largeur de viewport l'aurait rendue floue sur grand ecran. On reduit donc
   la zone d'affichage (largeur de lecture .wrap, hauteur plafonnee) plutot
   que d'agrandir l'image au-dela de sa resolution native. */
.hero-photo-frame{border-radius:var(--r);overflow:hidden;height:560px;max-height:52vw}
.hero-photo-frame img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:768px){.hero-photo-frame{height:320px;max-height:70vw}}

/* Cascade "Meublé ou vide" -> "Duree" -> "Colocation" (recherche-bien.html) :
   apparition/disparition en fondu + leger glissement plutot qu'un saut brut.
   .cascade-step reste dans le flux (hidden gere par JS, jamais display:none
   directement ici) le temps de la transition de sortie ; site.js retire
   `hidden` un frame apres l'avoir ajoute a l'entree pour laisser jouer la
   transition d'opacite. */
.cascade-step{transition:opacity .25s ease,transform .25s ease;opacity:0;transform:translateY(-6px)}
.cascade-step.in{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.cascade-step{transition:none}}

/* ---------- 3 BLOCS AUDIENCE (investisseurs/index.html, .audience-blocks) ----------
   Trois publics differents (acheteur d'un bien / co-financeur / prescripteur
   professionnel) doivent se distinguer au premier coup d'oeil, sans qu'aucun
   ne paraisse "premium" par rapport aux autres — meme carte (fond blanc,
   meme padding, meme ombre), seule la couleur d'accent et l'icone different.
   Le texte des 3 cartes est calibre pour rester proche en longueur : les CTA
   suivent le texte a distance fixe (pas de margin-top:auto qui, en etirant
   les cartes a hauteur egale via la grille, creerait un vide artificiel
   au-dessus du bouton de la carte la plus courte). align-items:start laisse
   chaque carte sa hauteur naturelle plutot que de forcer un etirement. */
.audience-blocks{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:8px 0;align-items:start}
.audience-card{background:var(--blanc);border:1px solid rgba(194,160,92,.35);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 4px 14px rgba(28,49,40,.06)}
/* position:relative + img en position:absolute (comme .real/.real img) :
   un <img height:100%> en flux normal dans un conteneur dont la hauteur
   vient de aspect-ratio ignore ce ratio et reprend la taille intrinseque
   de l'image (constate avec la photo Haussmann, tres portrait, qui
   imposait sa propre hauteur au conteneur). Sortir l'image du flux
   contourne le probleme : le conteneur n'a alors plus que aspect-ratio
   pour se dimensionner. */
.audience-media{aspect-ratio:16/10;position:relative;overflow:hidden}
/* Photo cercle prive (immeuble haussmannien, portrait) : ratio par defaut
   la rendait nettement plus haute que les 2 autres cartes une fois le
   texte equilibre — on la raccourcit specifiquement, plutot que d'etirer
   le contenu des cartes voisines pour compenser. */
.audience-b .audience-media{aspect-ratio:16/7}
.audience-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.audience-body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.audience-icon{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.audience-icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.audience-a .audience-icon{background:rgba(194,160,92,.14);color:var(--laiton-2)}
.audience-b .audience-icon{background:rgba(46,83,66,.12);color:var(--sapin)}
.audience-c .audience-icon{background:rgba(28,49,40,.08);color:var(--encre)}
.audience-card h2{font-weight:800;font-size:20px;color:var(--encre);margin:0 0 6px}
.audience-lead{font-family:'Instrument Serif',serif;font-style:italic;font-size:16px;color:var(--sapin);margin:0 0 12px}
.audience-body p{font-size:14px;color:var(--texte);margin:0 0 12px}
.audience-ctas{margin-top:20px;display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center}
.audience-note{font-size:12.5px;color:var(--doux);margin:10px 0 0}
@media(max-width:980px){.audience-blocks{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.audience-blocks{grid-template-columns:1fr}}

/* Photo hero investisseurs/index.html : meme traitement que .hero-photo-frame
   (recherche-bien.html) — cuisine photographiee en portrait, on garde la
   bande meubles/plan de travail plutot que le plafond ou le sol. */
.hero-photo-frame img[src*="lot-copropriete-resultat-01"]{object-position:center 32%}
/* Photo Haussmann (bloc cercle prive) : portrait recadree dans un cadre
   16:10, on privilegie la tourelle et les etages hauts plutot que le
   rez-de-chaussee (cafe, rue). */
.audience-media img[src*="investisseurs-haussmann"]{object-position:center 62%}

/* ---------- SELECTEUR DE PROFIL (nous-contacter.html) ----------
   Derive de .feature-card (meme carte blanche, meme rayon, meme .spec-icon) :
   6 cartes, certaines de vrais liens (profils 3 et 4, qui renvoient vers une
   page dediee), d'autres des <button> qui revelent un panneau de formulaire
   sur cette meme page. Les deux partagent exactement le meme rendu. */
.profile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:960px){.profile-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.profile-grid{grid-template-columns:1fr}}
.profile-card{display:block;width:100%;text-align:left;background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);padding:24px 22px;font:inherit;color:inherit;cursor:pointer;appearance:none;transition:border-color .2s,background .2s,transform .25s cubic-bezier(.2,1.4,.4,1),box-shadow .25s;position:relative;box-shadow:0 2px 8px rgba(28,49,40,.04)}
.profile-card:hover{border-color:var(--laiton);transform:translateY(-2px) scale(1.012);box-shadow:0 12px 28px rgba(28,49,40,.14)}
@media(prefers-reduced-motion:reduce){.profile-card{transition:border-color .2s,background .2s}.profile-card:hover{transform:none}}
.profile-card.is-selected{border-color:var(--sapin);background:#fff;box-shadow:0 0 0 1.5px var(--sapin) inset}
.profile-card .spec-icon{width:40px;height:40px;border-radius:50%;background:var(--pierre);display:flex;align-items:center;justify-content:center;margin-bottom:14px;color:var(--sapin)}
.profile-card .spec-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.profile-card h3{font-weight:800;font-size:15.5px;color:var(--encre);margin-bottom:6px}
.profile-card p{font-size:13px;color:var(--doux);margin:0}
.profile-card .arrow{position:absolute;top:22px;right:20px;font-size:15px;color:var(--sapin);opacity:0;transform:translate(-4px,4px);transition:opacity .2s,transform .2s}
.profile-card:hover .arrow{opacity:1;transform:translate(0,0)}
.profile-card.is-selected .arrow{opacity:0}

/* Panneaux de formulaire (un par profil) : meme transition douce que
   .cascade-step (recherche-bien.html), reutilisee telle quelle. */
.profile-panel{transition:opacity .25s ease,transform .25s ease;opacity:0;transform:translateY(-6px)}
.profile-panel.in{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.profile-panel{transition:none}}

/* ---------- CATEGORIES PARTENAIRES (partenaires/index.html) ----------
   Meme squelette que .profile-card (icone/titre/texte), mais ce sont
   toujours de vrais liens vers une page dediee : contrairement au
   selecteur de profil, le signal "cliquable" doit rester visible en
   permanence (chevron), pas seulement au survol, et le survol est plus
   marque (elevation + icone remplie laiton) pour rendre l'interactivite
   evidente au premier coup d'oeil. */
.partner-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:960px){.partner-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.partner-grid{grid-template-columns:1fr}}
.partner-card{display:block;background:var(--blanc);border:1px solid rgba(194,160,92,.35);border-radius:var(--r);padding:24px 22px;position:relative;box-shadow:0 4px 14px rgba(28,49,40,.06);transition:transform .25s cubic-bezier(.2,1.4,.4,1),box-shadow .25s,border-color .25s}
.partner-card:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(28,49,40,.16);border-color:var(--laiton)}
.partner-card .spec-icon{width:40px;height:40px;border-radius:50%;background:var(--pierre);display:flex;align-items:center;justify-content:center;margin-bottom:14px;color:var(--sapin);transition:background .25s,color .25s}
.partner-card:hover .spec-icon{background:var(--laiton);color:var(--encre)}
.partner-card .spec-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.partner-card h3{display:inline-block;font-weight:800;font-size:15.5px;color:var(--encre);margin:0 22px 10px 0;border-bottom:2px solid var(--laiton);padding-bottom:4px}
.partner-card p{font-size:13px;color:var(--doux);margin:0;padding-right:22px}
.partner-card .chevron{position:absolute;top:22px;right:18px;width:26px;height:26px;border-radius:50%;background:var(--laiton);color:var(--encre);display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1;transition:transform .25s,background .25s}
.partner-card:hover .chevron{transform:translateX(4px);background:#D4B26B}
@media(prefers-reduced-motion:reduce){.partner-card,.partner-card .spec-icon,.partner-card .chevron{transition:none}}

/* Textarea (message libre, profils professionnel/ecole/autre) : meme habillage
   que les autres champs texte, .field ne stylait jusqu'ici que les input. */
.field textarea{width:100%;border:1px solid var(--doux);border-radius:10px;padding:14px 16px;font-family:'Archivo',sans-serif;font-size:15px;color:var(--texte);background:#fff;transition:border-color .2s;resize:vertical;min-height:110px}
.field textarea:focus{outline:none;border-color:var(--sapin)}
.field.has-error textarea{border-color:#B0533A}
.field.is-valid textarea{border-color:var(--sapin)}

/* ---------- FOOTER (structure validée le 18/07, appliquée à l'identique) ----------
   .wrap : bloc marque (logo + nom + baseline) puis 3 colonnes de liens
   (Vendre mon bien / Professionnels / La société) sur une grille 1.4fr 1fr 1fr 1fr ;
   .mentions : ligne de bas de page centrée (raison sociale + assurance + liens légaux). */
footer{background:#152720;color:#8B968F;padding:64px 0 36px;font-size:13.5px}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
footer h4{color:#fff;font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:16px}
footer a{display:block;padding:4px 0;transition:color .2s}
footer a:hover{color:var(--laiton)}
/* .mentions porte aussi la classe .wrap : sans display:block explicite,
   elle herite de footer .wrap{display:grid;grid-template-columns:1.4fr...}
   (prevue pour les colonnes de liens juste au-dessus) — ses enfants
   deviennent alors des items de grille, "blockifies" par la spec CSS
   quel que soit le display qu'on leur donne (meme inline!important est
   ignore sur un item de grille/flex, c'est le comportement standard).
   D'ou les liens et separateurs qui se retrouvaient chacun seuls sur
   leur ligne (§4.6-bis). */
.mentions{display:block!important;border-top:1px solid rgba(255,255,255,.08);margin-top:44px;padding-top:22px;text-align:center;font-size:12px;color:#5E6A63}
/* footer a{display:block} est pense pour les colonnes de liens, pas la
   barre mentions legales. Un espace insecable (&nbsp;) avant chaque
   separateur empeche par ailleurs un "·" ou un "|" de se retrouver seul
   en debut de ligne quand un retour est necessaire. */
.mentions a{display:inline!important;padding:0!important}

/* La nav (logo + tag + 5 liens + CTA) a besoin de ~1250px pour tenir sur une
   ligne sans se chevaucher : bascule dédiée, plus haute que le point de
   rupture général des autres composants. */
@media(max-width:1260px){
  .menu,.nav-pill{display:none}
  .burger{display:block}
}

@media(max-width:960px){
  .menu,.nav-pill{display:none}
  .burger{display:block}
  .brand .tag,.brand .sep{display:none}
  .hero h1{font-size:clamp(38px,11vw,70px)}
  .hero-sub{grid-template-columns:1fr;gap:22px}
  .hero-cta{justify-content:flex-start}
  .hero .watermark{height:40vh;right:-16vw;opacity:.04}
  .badge{width:100px;height:100px;top:110px;right:16px}
  .badge .core{font-size:23px}
  .badge .core small{font-size:11px}
  .hero-compact{padding:130px 0 48px}
  .stats .wrap{grid-template-columns:1fr 1fr;gap:34px}
  .bento{grid-template-columns:1fr}
  .card{min-height:auto}
  .sit-list{grid-template-columns:1fr}
  .buyers{grid-template-columns:1fr 1fr}
  .feature-grid{grid-template-columns:1fr 1fr}
  .process .step-row{grid-template-columns:1fr 1fr}
  .reals{grid-template-columns:1fr}
  .preuve .wrap{grid-template-columns:1fr;gap:36px}
  footer .wrap{grid-template-columns:1fr 1fr}
  .sec-head{grid-template-columns:1fr}
  .sec-head p{justify-self:start}
  .sticky-cta{display:block}
}
/* Sur mobile etroit (~375px), l'eyebrow de l'accueil passe sur 3 lignes
   depuis l'ajout d'"Amenageur foncier" et chevauche le badge "72h" —
   on retire ce badge purement decoratif plutot que de raccourcir l'eyebrow
   (le texte doit rester identique a celui valide sur desktop). */
@media(max-width:480px){.hero .badge{display:none}}

.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--laiton);color:var(--encre);padding:14px 22px;font-weight:700;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* ---------- CARTE TERRITORIALE (.territoire-map, reutilisable) ----------
   Fond de carte reel (img/territoire-carte.webp, Bourgogne-Franche-Comte ;
   fond blanc + ombre portee retires a la source par detourage, l'image
   est deja transparente hors des departements). Duotone aux couleurs du
   site (--sapin -> --laiton) applique via un filtre SVG (#tm-duotone,
   defini une fois par page juste avant .territoire-map) plutot qu'un
   ::after en mix-blend-mode : un filtre respecte le canal alpha de
   l'image sans reteindre le fond de .tm-frame la ou elle est transparente.
   Deux usages :
   - Version compacte : juste .tm-frame, sans legende (purement
     illustratif, aria-hidden).
   - Version developpee : .tm-frame + .tm-legend (liste par point, non
     cliquable — de simples reperes textuels, pas des liens de maillage).
   Points positionnes en % (left/top) pour rester alignes sur l'image
   quelle que soit la largeur de rendu. Deliberement larges (anneau blanc
   + ombre portee) pour se detacher nettement des petits reperes carres
   deja imprimes sur le fond de carte (prefectures) — a ne jamais
   confondre : ceux-ci font partie de l'image source, pas de nos donnees.
   Deux types : .tm-op (operations, laiton) et .tm-cx (connexions
   territoriales, sapin, plus petits). Trois etats visuels pour .tm-op,
   portes par un modificateur — jamais invente pour un point precis sans
   preuve (page reelle existante) :
   - .tm-op (par defaut) : realisee, rond plein.
   - .tm-op-cours : en cours, rond semi-transparent.
   - .tm-op-etudiee : etudiee / non signee, contour pointille sans fond
     (systematique pour toute operation non signee, ex. axe non-nomme). */
.tm-frame{position:relative;border-radius:var(--r);overflow:hidden;background:var(--pierre)}
.tm-frame img{width:100%;display:block;filter:url(#tm-duotone);opacity:.88}
.tm-pt{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:2.5px solid #fff;box-shadow:0 2px 7px rgba(0,0,0,.5)}
.tm-op{background:var(--laiton)}
.tm-op-cours{background:var(--laiton);opacity:.6}
.tm-op-etudiee{background:var(--pierre);border:2.5px dashed var(--laiton);box-shadow:0 2px 7px rgba(0,0,0,.3)}
.tm-cx{background:var(--sapin);width:15px;height:15px;margin:-7.5px 0 0 -7.5px}
.tm-legend{display:flex;flex-wrap:wrap;gap:24px 40px;margin-top:28px}
.tm-legend-item{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600;color:var(--texte)}
.tm-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.tm-dot-laiton{background:var(--laiton)}
.tm-dot-sapin{background:var(--sapin)}
.tm-caption{margin-top:20px;font-size:14.5px;color:var(--doux);max-width:720px}

/* Utilitaires — motifs de style repetes sur 5+ pages, extraits des style="..." inline.
   !important : reproduit le comportement de l'inline style remplace (priorite absolue
   sur les regles de composant, ex. .brand img{height:34px}). */
.link-inherit{color:inherit!important;text-decoration:underline!important}
.mb-24{margin-bottom:24px!important}
/* .pt-0 : uniquement entre deux sections de MEME fond (la frontiere est
   invisible, un seul padding suffit). Entre deux fonds differents
   (--encre <-> --pierre/--blanc), NE PAS mettre pt-0 sur la section qui
   suit : chaque cote de la transition doit garder son padding plein,
   sinon le contenu colle a la ligne de couleur (§4.6-bis). */
.pt-0{padding-top:0!important}
.mt-14-max280{margin-top:14px!important;max-width:280px!important}
.h-30{height:30px!important}
.fs-16{font-size:16px!important}
.pill-lg{font-size:16px!important;padding:18px 36px!important}
.mt-18{margin-top:18px!important}
.mb-32{margin-bottom:32px!important}
.mt-32{margin-top:32px!important}
.mt-0{margin-top:0!important}

/* grand-besancon-propriete-familiale : galerie chantier (14 photos telephone,
   cadrages tres heterogenes). Meme principe qu'a besancon-saint-ferjeux :
   object-position quand un recadrage cover reste honnete, object-fit:contain
   des qu'un sujet vertical (escalier, rampant, fondations, jet de pompe a
   beton) serait coupe par le cadre .chantier-main en 16:10. */
.chantier-main img[src*="pendant-escalier-protege"],
.chantier-thumbs img[src*="pendant-escalier-protege"],
.chantier-main img[src*="pendant-rampant-placo"],
.chantier-thumbs img[src*="pendant-rampant-placo"],
.chantier-main img[src*="pendant-fondations"],
.chantier-thumbs img[src*="pendant-fondations"],
.chantier-main img[src*="pendant-parquet"],
.chantier-thumbs img[src*="pendant-parquet"],
.chantier-main img[src*="pendant-sdb-etancheite"],
.chantier-thumbs img[src*="pendant-sdb-etancheite"],
.chantier-main img[src*="pendant-beton-pompe"],
.chantier-thumbs img[src*="pendant-beton-pompe"],
.chantier-main img[src*="pendant-douche-carrelage"],
.chantier-thumbs img[src*="pendant-douche-carrelage"]{object-fit:contain}

/* Mosaique "avant" (4 photos 16:9/4:3 dans des cellules .m-wide 16:10) :
   recadrage cover, position ajustee pour garder le sujet principal en cadre. */
.mosaic img[src*="propriete-avant-combles"]{object-position:center 60%}

/* Comparateurs avant/apres (.compare-slider) : paires ou avant et apres n'ont
   pas la meme orientation source (portrait/paysage). --cs-ratio:1/1 pose en
   inline style attenue l'ecart ; object-position affine le centrage de
   chaque cote pour ne pas couper le sujet principal. */
.compare-slider img[src*="comparatif-combles-avant"]{object-position:center 30%}
.compare-slider img[src*="comparatif-sdb-apres"]{object-position:center 25%}
.compare-slider img[src*="comparatif-cuisine-apres"]{object-position:center 30%}

/* rotonde.html (lots de copropriete generiques) : 3 galeries .chantier
   (avant/pendant/resultat). Sources tres heterogenes (photos telephone
   portrait, exports pendant_ deja recadres en bande tres etroite) :
   object-fit:contain partout ou un cover sur le cadre 16:10 couperait
   le sujet principal, meme principe qu'ailleurs sur le site. */
.chantier-main img[src*="lot-copropriete-avant-03"],
.chantier-thumbs img[src*="lot-copropriete-avant-03"],
.chantier-main img[src*="lot-copropriete-avant-04"],
.chantier-thumbs img[src*="lot-copropriete-avant-04"],
.chantier-main img[src*="lot-copropriete-pendant-01"],
.chantier-thumbs img[src*="lot-copropriete-pendant-01"],
.chantier-main img[src*="lot-copropriete-pendant-02"],
.chantier-thumbs img[src*="lot-copropriete-pendant-02"],
.chantier-main img[src*="lot-copropriete-pendant-03"],
.chantier-thumbs img[src*="lot-copropriete-pendant-03"],
.chantier-main img[src*="lot-copropriete-pendant-04"],
.chantier-thumbs img[src*="lot-copropriete-pendant-04"],
.chantier-main img[src*="lot-copropriete-resultat-01"],
.chantier-thumbs img[src*="lot-copropriete-resultat-01"],
.chantier-main img[src*="lot-copropriete-resultat-02"],
.chantier-thumbs img[src*="lot-copropriete-resultat-02"],
.chantier-main img[src*="lot-copropriete-resultat-04"],
.chantier-thumbs img[src*="lot-copropriete-resultat-04"],
.chantier-main img[src*="lot-copropriete-resultat-05"],
.chantier-thumbs img[src*="lot-copropriete-resultat-05"],
.chantier-main img[src*="lot-copropriete-resultat-06"],
.chantier-thumbs img[src*="lot-copropriete-resultat-06"],
.chantier-main img[src*="lot-copropriete-resultat-07"],
.chantier-thumbs img[src*="lot-copropriete-resultat-07"]{object-fit:contain}