/* ============================================================
   COGESTIM — FICHE DE LOT (single-cogestim_projet-lot.php)

   PORTAGE de design/pages/Fiche-lot-projet.html (planche certifiée
   41ff013, AMENDÉE 0a6d8af le 11/09/2026 — la version repo fait foi).

   ─────────────────────────────────────────────────────────────
   CETTE FEUILLE EST UN COMPLÉMENT, PAS UNE FEUILLE AUTONOME.

   Elle est chargée APRÈS cogestim-landing-promo-projets.css, dont elle
   déclare la dépendance (functions.php). La fiche de lot étant un
   singular du projet à gabarit `landing`, <body> porte `lp-page` ET
   `lot-page` : tout ce que la feuille du gabarit fournit déjà est
   RÉUTILISÉ tel quel, jamais redéclaré —
     · les bare selectors rescopés (.lp-page a / img / *, section[id]) ;
     · les tokens --disp/--ui et l'accent projet --acc* (publié en inline
       sur body.lp-page depuis `accent_1`) ;
     · les @font-face Manrope + Source Serif 4 (woff2 self-hosted) ;
     · .s/.white/.paper, .wrap, .kick, .body, .disp, .b/.b--fill/
       .b--out, .ph + .ph > img (cover), .bdg/.dispo/.res, .duo, .gal +
       .gal .more, .contact, .broker, .frow, .fld, .optin, .lb (#lb).

   On ne trouve donc ici QUE : (a) ce que la planche a en propre, et
   (b) les surcharges là où la planche et la landing divergent
   réellement — chacune commentée avec sa raison.

   SCOPE — tout est scopé `.lot-page`. La planche déclare ses règles sur
   des sélecteurs BARE (body{}, a{}, img{}, *{}, html{}, section[id]{}) :
   les porter tels quels écraserait les tokens du site entier et
   supprimerait le soulignement de tous les liens. La classe body est le
   contrat, le nom de la planche est un nom de fichier de design.

   AXE VERTICAL — les `clamp(min, Nvw, max)` de la planche sont portés
   VERBATIM. Ils sont bornés en px aux deux extrémités : la leçon du
   07/09 (« jamais de vw pour l'espacement vertical ») visait le `vw` NU
   sur une hauteur de hero, pas le clamp borné, dont la feuille de la
   landing fait le même usage (.s, .gal-head, .pjf…).
   ============================================================ */


/* ============================================================
   0. UTILITAIRE — masquage visuel accessible
   .lp-sr est CONSOMMÉ par la landing (<caption>) mais n'y est jamais
   défini : le caption s'y affiche donc en clair. Défini ici, sous les
   deux classes, pour corriger l'oubli sans toucher la feuille voisine.
   ============================================================ */
.lot-page .lp-sr,
.lp-page .lp-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}


/* ============================================================
   1. CHROME .pjh — FACTORISÉ (correctif 11/09)

   Le chrome .pjh est désormais un partiel PARTAGÉ avec la landing
   (template-parts/projet-pjh.php) et sa CSS vit intégralement dans
   cogestim-landing-promo-projets.css (base .pjh + registre clair partagé
   `.pjh.scrolled, .pjh--lot`), déjà chargée sur ce gabarit (cf. en-tête du
   fichier PHP). Plus aucune règle propre à `.lot-page .pjh*` ici : la
   duplication qui avait fait diverger tailles de logo et alignements est
   supprimée à la source, pas rescopée une seconde fois.
   ============================================================ */


/* ============================================================
   2. FIL D'ARIANE (écart 12)
   Rendu en <ol> pour la sémantique ; la remise à plat des marges et des
   puces reproduit l'aspect de la planche, qui utilise des <a>/<span> nus.
   ============================================================ */
.lot-page .crumb{padding:20px 0 0;font-size:13px;color:var(--ink-mute)}
.lot-page .crumb ol{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin:0;padding:0;list-style:none;
}
.lot-page .crumb li{display:flex;align-items:center;gap:9px}
.lot-page .crumb a{color:var(--ink-mute)}
.lot-page .crumb a:hover{color:var(--acc)}
.lot-page .crumb .sep{color:#c3c1bb}
.lot-page .crumb .now{color:var(--ink);font-weight:500}


/* ============================================================
   3. HERO — deux colonnes, fond CLAIR

   Surcharge complète : le .hero de la landing est une photo pleine page
   (min-height:90vh, flex, texte on-dark, ::after de voile). Rien de cela
   ne s'applique ici. `position:static` annule le contexte de
   positionnement, sans quoi les règles .hero .bg/.hero .wrap de la
   landing resteraient armées.
   ============================================================ */
.lot-page .hero{
  position:static;min-height:0;overflow:visible;color:var(--ink);
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(36px,5vw,80px);align-items:start;
  padding:clamp(30px,3.6vw,44px) 0 clamp(48px,5vw,68px);
}
.lot-page .hero .lead{display:flex;flex-direction:column;align-items:flex-start}
.lot-page .hero h1.disp{color:var(--ink)}
.lot-page .hero .sub{
  font-family:var(--disp);font-size:clamp(23px,2.1vw,29px);line-height:1.25;
  color:var(--ink-soft);margin:14px 0 0;
}
.lot-page .hero .body{color:var(--ink-soft);margin:26px 0 0;max-width:42ch}
.lot-page .hero .acts{margin-top:26px}
.lot-page .hero .kick{margin:0 0 18px}

/* Badge de statut — la couleur est portée par le point, jamais par le
   badge (règle de la planche : le statut de marché ne prend pas l'accent
   du projet). */
.lot-page .badge{
  display:inline-flex;align-items:center;gap:9px;margin:22px 0 0;
  padding:8px 16px 8px 14px;border:1px solid #d7d5d0;border-radius:24px;
  font-size:13.5px;font-weight:500;color:var(--ink);background:var(--cog-white);
}
.lot-page .badge .dot{width:9px;height:9px;border-radius:50%;background:#4B9B5F;flex:0 0 auto}
.lot-page .badge .dot.res{background:#C9803E}
.lot-page .badge .dot.vendu{background:#9B9B9B}

/* Prix — occurrence canonique UNIQUE de la page (la planche l'a retiré
   des specs). `.price.masked` de la planche n'est pas portée : déclarée
   et jamais utilisée, la planche tranchant pour le remplacement du prix
   (« Prix sur demande » / « — ») et non son grisement. */
.lot-page .hero .price{
  font-family:var(--disp);font-size:clamp(31px,2.9vw,40px);line-height:1;
  color:var(--ink);margin:28px 0 0;font-variant-numeric:tabular-nums;
}

/* Lien de retour — dernier élément de la colonne gauche. */
.lot-page .back{
  display:inline-flex;align-items:center;gap:9px;margin-top:24px;
  font-size:14px;color:var(--ink-soft);
  text-decoration:underline;text-underline-offset:3px;
}
.lot-page .back:hover{color:var(--acc)}
.lot-page .back svg{
  width:15px;height:15px;flex:0 0 auto;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}

/* Colonne du plan. `.ph` (relative, fond stylisé) et `.ph > img`
   (absolute/inset/cover) viennent de la feuille du gabarit : on ne pose
   ici que le format. */
.lot-page .planwrap{position:relative}
.lot-page .planwrap .ph{aspect-ratio:4/3;border:1px solid var(--rule)}

/* `.ph--plan` — variante PLAN (ajout 11/09, arbitrage Luis).
   Le `.ph > img` partagé est en `object-fit:cover` : c'est le bon choix pour
   une PHOTO (elle remplit la tuile, le recadrage est sans conséquence), mais
   destructeur pour un PLAN — un plan d'architecte est un document, pas une
   image d'ambiance : rogné, il devient faux (pièces et cotes hors cadre) et
   donc illisible. Cas réel : le plan du lot A1 est en portrait (1325x1654,
   ratio 0.80) dans une tuile 4/3 — `cover` en amputerait le haut et le bas.
   `contain` préserve le document entier ; le fond passe en blanc cassé plutôt
   que de laisser le motif rayé de `.ph` apparaître dans les bandes latérales
   (le motif, lisible derrière une photo absente, parasite la lecture d'un
   plan). `cover` reste la règle par défaut : cette variante ne s'applique que
   là où le template la pose explicitement, jamais globalement. */
.lot-page .planwrap .ph--plan{background:var(--cog-white)}
.lot-page .planwrap .ph--plan > img{object-fit:contain}

/* Plan cliquable (25/09) — `.ph--plan` est un <a> vers le fichier du plan,
   nouvel onglet : c'est le SEUL visuel cliquable du hero. Bloc plein cadre
   (le cadre reste celui de `.ph`), curseur de lien natif, icône « ouvrir »
   (external-link) discrète révélée au survol/focus, zoom 1.04 / 300 ms de la
   galerie (motif landing) sous prefers-reduced-motion. Sans plan, le hero
   rend la photo du lot ou projet_image dans un `.ph` inerte. */
.lot-page .planwrap a.ph{display:block;text-decoration:none}
.lot-page .planwrap a.ph:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 35%,transparent)}
.lot-page .planwrap .zoom-ic{
  position:absolute;right:12px;bottom:12px;width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.92);border:1px solid var(--rule);
  opacity:0;transition:opacity 300ms;
}
.lot-page .planwrap .zoom-ic svg{
  width:17px;height:17px;stroke:var(--ink-soft);fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.lot-page .planwrap a.ph:hover .zoom-ic,
.lot-page .planwrap a.ph:focus-visible .zoom-ic{opacity:1}
@media (hover:none){.lot-page .planwrap .zoom-ic{opacity:1}}
@media (prefers-reduced-motion:no-preference){
  .lot-page .planwrap a.ph > img{transition:transform 300ms}
  .lot-page .planwrap a.ph:hover > img{transform:scale(1.04)}
}

/* Plan PDF sans image affichable : `.doc-row` (§2.39) à la place du cadre.
   Survol à l'accent du projet (le --red du composant est la couleur de
   marque Cogestim, pas celle d'une landing) ; soulignement de `.lp-page a`
   neutralisé. */
.lot-page .planwrap .doc-row{text-decoration:none;border-top:1px solid var(--rule)}
.lot-page .planwrap .doc-row:hover .doc-title,
.lot-page .planwrap .doc-row:hover .doc-act{color:var(--acc)}

/* Pastille boussole. Surcharge nécessaire : `.chip` de la landing est
   une chip de FILTRE (pilule textuelle) — homonyme sans rapport. Non
   cliquable : ni curseur pointer ni ombre « bouton » (25/09 ; la pastille
   `.chip.zoom` — lien nouvel onglet — est remplacée par le clic du plan). */
.lot-page .planwrap .chip{
  position:absolute;width:44px;height:44px;padding:0;border-radius:50%;
  background:var(--cog-white);border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;cursor:default;
}
.lot-page .planwrap .chip svg{
  width:19px;height:19px;stroke:var(--ink-soft);fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.lot-page .planwrap .chip.compass{top:12px;right:12px;pointer-events:none}
.lot-page .planwrap .chip.compass .n{
  position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  font-size:11px;letter-spacing:.1em;color:var(--ink-soft);
}


/* ============================================================
   4. CARACTÉRISTIQUES — .specs en 3 colonnes filetées
   Le nombre de specs varie (une spec vide est omise, jamais un « — ») :
   les colonnes sont donc équilibrées au rendu, et le filet ne s'appuie
   que sur `.col + .col` — jamais de séparateur orphelin.
   ============================================================ */
.lot-page .specs{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  margin-top:clamp(28px,3vw,40px);
}
.lot-page .specs .col{
  display:flex;flex-direction:column;gap:clamp(18px,2vw,26px);
  padding:0 clamp(20px,2.6vw,40px);
}
.lot-page .specs .col:first-child{padding-left:0}
.lot-page .specs .col:last-child{padding-right:0}
.lot-page .specs .col + .col{border-left:1px solid #ddd9d1}

.lot-page .spec{display:grid;grid-template-columns:34px 1fr;align-items:start;gap:16px}
.lot-page .spec .ic{display:flex;align-items:center;justify-content:center;height:26px}
.lot-page .spec .ic svg{
  width:22px;height:22px;stroke:var(--ink-soft);fill:none;
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}
/* `.tx` et `.k` nomment deux éléments que la planche laisse anonymes
   (un <span> sans classe) ou nomme `.lb` (collision avec le label de
   champ, cf. §1). */
.lot-page .spec .tx{display:flex;flex-direction:column}
.lot-page .spec .k{display:block;font-size:13px;color:var(--ink-mute);line-height:1.4}
.lot-page .spec .v{
  display:block;font-size:15.5px;font-weight:600;color:var(--ink);
  line-height:1.45;font-variant-numeric:tabular-nums;
}
/* Diagnostic 11/09 : « Référence » affichait le slug brut (ex. « a1 »),
   incohérent avec « Lot A1 » au hero. Affichage seul en capitales — la
   donnée reste le slug lowercase (URL/validation inchangées). */
.lot-page .spec .v.ref{text-transform:uppercase}
/* Écart 9 — la pastille SUIT le statut : la planche la fige en vert, ce
   qui afficherait un point vert à côté du mot « Vendu ». */
.lot-page .dot-ic{width:11px;height:11px;border-radius:50%;background:#4B9B5F}
.lot-page .dot-ic.res{background:#C9803E}
.lot-page .dot-ic.vendu{background:#9B9B9B}


/* ============================================================
   5. FINANCEMENT — bandeau conditionnel
   `.s.fin` annule le padding haut : le bandeau se colle visuellement aux
   caractéristiques, avec lesquelles il partage le fond `paper`.
   ============================================================ */
.lot-page .s.fin{padding:0 0 clamp(56px,6vw,88px)}
.lot-page .fin-band{
  display:flex;justify-content:space-between;align-items:center;
  gap:32px;flex-wrap:wrap;
  padding:clamp(24px,2.6vw,32px) clamp(28px,3vw,40px);
  border:1px solid var(--rule);border-radius:4px;background:var(--paper-deep);
}
.lot-page .fin-band .tx{max-width:56ch}
.lot-page .fin-band h3{
  font-family:var(--disp);font-weight:400;font-size:19px;
  margin:0 0 6px;color:var(--ink);
}
.lot-page .fin-band p{font-size:14px;color:var(--ink-soft);margin:0}


/* ============================================================
   6. LE PROJET + GALERIE
   `.duo` et `.gal` existent dans la feuille du gabarit : seules les
   divergences de la planche sont posées ici.
   ============================================================ */
/* La planche cadre le visuel en 4/3 et centre le texte, sans la colonne
   plus étroite de la landing. */
.lot-page .duo{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(36px,4.6vw,80px)}
.lot-page .duo .txt{gap:0}
.lot-page .duo .txt .body{margin:20px 0 0;max-width:52ch}
.lot-page .link-arrow{
  display:inline-flex;align-items:center;gap:9px;margin-top:22px;
  font-size:15px;color:var(--ink);
  text-decoration:underline;text-underline-offset:4px;
}
.lot-page .link-arrow:hover{color:var(--acc)}
.lot-page .link-arrow svg{
  width:16px;height:16px;flex:0 0 auto;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}

.lot-page .gal-head{
  display:flex;justify-content:space-between;align-items:center;gap:32px;
  margin:clamp(52px,5.5vw,80px) 0 clamp(20px,2.2vw,28px);
}
/* Correctif 11/09 (passe corrective) — UNE SEULE LIGNE, plafond 3+« +N »
   (PHP : $cog_lot_gal_cap). `grid-auto-flow:column` + `grid-auto-columns:1fr`
   donne exactement autant de colonnes ÉGALES que de cellules réellement
   rendues (1 à 4), sans jamais retomber sur deux lignes ni sur des colonnes
   fixes qui laisseraient du vide à 1-3 photos. Cellules plus GRANDES que
   l'ancienne grille 5 colonnes (composant existant `.gal > .ph`, seule la
   répartition change — zéro dessin nouveau). Composants inchangés :
   `.gal .more` (overlay « +N »), lightbox #lb. */
.lot-page .gal{gap:12px;display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
.lot-page .gal > .ph{aspect-ratio:1/1;cursor:pointer}
/* Zoom de survol — motif landing (1.04 / 300 ms), désormais sous
   prefers-reduced-motion comme sur la landing (25/09). */
@media (prefers-reduced-motion:no-preference){
  .lot-page .gal > .ph > img{transition:transform 300ms}
  .lot-page .gal > .ph:hover > img{transform:scale(1.04)}
}
.lot-page .gal-cap{margin:16px 0 0;font-size:13px;color:var(--ink-mute)}


/* ============================================================
   7. AUTRES LOGEMENTS — .otl, table compacte
   Version délibérément réduite de la table .lots de la landing : ni
   filtre, ni dépliage, ni colonne Plan. Deux composants distincts.
   ============================================================ */
.lot-page .otl-wrap{overflow-x:auto}
.lot-page .otl{width:100%;border-collapse:collapse;margin-top:28px}
.lot-page .otl thead th{
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-mute);text-align:left;padding:0 18px 12px 0;
  border-bottom:1px solid var(--ink);white-space:nowrap;
}
.lot-page .otl thead th.num{text-align:right}
.lot-page .otl tbody td{
  font-size:14.5px;color:var(--ink);padding:16px 18px 16px 0;
  border-bottom:1px solid #ececea;white-space:nowrap;
}
.lot-page .otl tbody td.num{text-align:right;font-variant-numeric:tabular-nums}
.lot-page .otl .lot{font-weight:600}
.lot-page .otl .lot a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.lot-page .otl .lot a:hover{color:var(--acc)}
.lot-page .otl .price{font-weight:600;font-variant-numeric:tabular-nums}
/* Survol = couleur_fond_1 du projet (--paper surchargée sur body.lp-page),
   même règle que .lots de la landing (25/09 ; était --paper-deep beige). */
.lot-page .otl tbody tr:hover td{background:var(--paper)}
/* Rangée hors marché : atténuée, mais le lien reste lisible et
   cliquable (les variantes de statut existent sur la fiche). */
.lot-page .otl tbody tr.res td{color:var(--ink-mute)}
.lot-page .otl tbody tr.res .lot a{color:var(--ink-soft)}
/* Rangées entières cliquables (correctif 11/09) — même règle que .lots : le
   curseur et le survol ne s'activent que sur une rangée dont la cellule Lot
   porte un vrai lien (référence saisie). */
.lot-page .otl tbody tr:has(td.lot a){cursor:pointer}
.lot-page .otl tbody tr.res:has(td.lot a):hover td{background:var(--paper)}
/* Écart 10 — la planche fait porter Vendu par `.bdg.res` ; le hero, lui,
   distingue les trois états. La table cesse d'être en retard. */
.lot-page .bdg.vendu{color:#8c8c94;border:1px solid #d7d5d0;background:#efeeea}
/* CTA de fin de section « Découvrir le projet » (25/09) — .sec-foot +
   .link.caps du certifié. Le dégradé de marque de `.link` (#cogcta,
   rouge→magenta Cogestim) n'a pas cours sur un gabarit projet (écart 10 de
   la landing) : texte et trait à l'accent du projet (survol accent_2). Forme,
   capitales, flèche et animation de gap inchangées. */
/* Aligné à gauche (décision Luis 25/09) : le composant .sec-foot centre
   par défaut (cogestim-components.css). */
.lot-page .sec-foot{justify-content:flex-start}
/* Audit CTA 25/09 : texte à l'accent (était l'encre), survol --acc-deep —
   même registre que `div.lp-page .lnk` de la landing. */
.lot-page .sec-foot .link{background-image:none;color:var(--acc);-webkit-text-fill-color:currentColor;text-decoration:none}
.lot-page .sec-foot .link::after{background:var(--acc)}
.lot-page .sec-foot .link:hover{color:var(--acc-deep)}
.lot-page .sec-foot .link:hover::after{background:var(--acc-deep)}
.lot-page .sec-foot .link svg path{stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}


/* ============================================================
   7c. CTA CONTOUR — accent projet, jamais l'encre (audit CTA 25/09)
   Copie scopée de `div.lp-page .b--out:not(.on-dark)` (feuille landing) :
   la fiche lot n'a pas de div.lp-page, ses contours restaient à l'encre
   (« Être informé des disponibilités » sur lot réservé/vendu : encre au
   repos, fond encre au survol). Élargi du seul bandeau à TOUS les contours
   de la fiche (hero, bandeau, plan, financement) : bordure + texte accent,
   survol fond accent / texte blanc. Pleins : `.lp-page .b--fill` (accent,
   survol --acc-deep = accent_2) déjà conforme. Focus : feuille landing.
   ============================================================ */
.lot-page .b--out:not(.on-dark){border-color:var(--acc);color:var(--acc)}
.lot-page .b--out:not(.on-dark):hover{background:var(--acc);border-color:var(--acc);color:#fff}


/* ============================================================
   8. CONTACT — registre de formulaire
   `.contact`, `.broker`, `.frow`, `.fld`, `.optin` viennent de la
   feuille du gabarit (registre unifié le 11/09). Ne restent ici que le
   cadrage du formulaire et le titre, que la planche a en propre.
   ============================================================ */
.lot-page .contact{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(36px,5vw,88px)}
.lot-page .form h2.disp{margin-bottom:8px}
.lot-page .form .intro{font-size:14.5px;color:var(--ink-soft);margin:0 0 26px}
/* .lot-page .broker .ph{aspect-ratio:3/4} retiré (25/09) : vignette carrée
   commune landing + fiche lot, portée par la feuille du gabarit. */


/* ============================================================
   9. RESPONSIVE — point de rupture de la planche (1080px)
   Les grilles passent en une colonne ; le filet des specs devient
   horizontal ; les ancres du chrome disparaissent (le chrome garde marque +
   CTA). La galerie N'EST PLUS reflow ici (correctif 11/09) : une seule ligne
   sur toute largeur reste l'exigence, `grid-auto-flow:column` s'adapte déjà
   au nombre de cellules sans réglage par palier.
   ============================================================ */
@media (max-width:1080px){
  .lot-page .hero,
  .lot-page .duo,
  .lot-page .contact,
  .lot-page .specs{grid-template-columns:1fr}

  .lot-page .specs .col{padding:0}
  .lot-page .specs .col + .col{
    border-left:0;border-top:1px solid #ddd9d1;padding-top:24px;
  }

  .lot-page .pjh-nav{display:none}
  .lot-page .fin-band{flex-direction:column;align-items:flex-start}

  /* Le plan repasse sous l'identité du lot : il ne doit plus précéder le
     titre dans l'ordre de lecture. */
  .lot-page .hero .lead{order:1}
  .lot-page .planwrap{order:2}
}