/*! Complements de production - Tisserin Promotion, modele programme v2.
 *
 * Ce qui vit ici ne peut pas venir de tp-programme-v2.css : cette derniere est
 * GENEREE depuis la maquette par _php/extrait-css.py, donc tout ajout manuel y
 * serait perdu a la prochaine regeneration.
 *
 * Trois choses :
 *   1. la compatibilite avec le plugin apsulis ;
 *   2. l'apercu photo de la maquette 3D, qui n'existe pas dans la maquette HTML ;
 *   3. les regles ajoutees a la maquette APRES la derniere generation, en attente
 *      de la prochaine. Celles-la sont a retirer d'ici quand le CSS sera
 *      regenere : elles y seront alors deja.
 *
 * Scope sur l'identifiant #tpv2 : un id (1-0-0) bat n'importe quel nombre de
 * classes, donc le (0-3-1) du plugin. Chargee en DERNIER.
 */

/* ---------- 1. compatibilite apsulis ----------
 *
 * Le plugin impose sa typographie en !important sur des elements NUS. 186 de ses
 * 284 regles portent un !important, dont 72 sur h1, h2, h3, p, a, strong et span.
 * Exemple releve le 2026-08-20 :
 *
 *   .redesign-tisserin:not(.elementor-template-full-width):not(.elementor-template-canvas) h1
 *   { font-family:"Canela Thin"!important; font-size:40px!important; color:#457275!important }
 *
 * On ne neutralise pas un !important par heritage : l'heritage n'entre en jeu que
 * si AUCUNE regle ne cible l'element, et leur regle le cible. Il faut donc
 * declarer la propriete explicitement, meme quand la maquette se contentait de la
 * faire heriter.
 */

#tpv2 h1,
#tpv2 h2,
#tpv2 h3,
#tpv2 h4,
#tpv2 p,
#tpv2 a,
#tpv2 li,
#tpv2 span,
#tpv2 strong,
#tpv2 b,
#tpv2 em,
#tpv2 summary,
#tpv2 button{font-family:inherit!important}

#tpv2 h1,
#tpv2 h2,
#tpv2 h3,
#tpv2 h4,
#tpv2 p,
#tpv2 a{text-transform:none!important}
#tpv2 .atouts h3,
#tpv2 .presta-groupe h3{text-transform:uppercase!important}

#tpv2 h1,
#tpv2 h2,
#tpv2 h3,
#tpv2 h4{margin:0;padding:0;border:0;background:0}

/* Les icones d'atouts en repli sont des SVG inline sans classe. On redonne les
   dimensions en CSS parce qu'un SVG enfant d'un flex peut s'etirer sur l'axe
   transverse meme avec ses attributs width et height. */
#tpv2 .atouts svg{display:block;width:32px;height:32px;flex:0 0 auto}

/* ---------- 2. apercu photo de la maquette 3D ---------- */

/* Un voile sombre, pour que le bouton blanc reste lisible sur la photo aerienne. */
#tpv2 .media-vue--photo::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,32,34,.52) 0%,rgba(9,32,34,.22) 55%,
    rgba(9,32,34,.34) 100%)}

#tpv2 .media-vue--photo .media-charge{z-index:3}

/* CRUCIAL : le voile disparait des que l'iframe est chargee.
   Un pseudo-element est genere APRES tous les enfants dans l'arbre de boites,
   donc a z-index egal il est peint apres l'iframe : il l'assombrit ET capte tous
   les evenements de pointeur. Sur le modele programme de nacarat.com, la maquette
   orbitale s'affichait mais ne tournait pas, sur TOUS les viewports, exactement
   pour cette raison. Un `pointer-events:none` debloquerait le clic mais laisserait
   la vue assombrie : ce n'est donc pas le bon correctif. */
#tpv2 .media-vue--photo.charge::after{display:none}

/* ---------- 3. en attente de la prochaine generation ----------
 *
 * Deja pose dans mockup.html, a retirer d'ici quand le CSS sera regenere.
 * Demandes de Louis le 2026-08-20 sur la grille des disponibilites.
 */

/* Le libelle d'une colonne, au-dessus de sa valeur. Sert aussi sur la colonne des
   typologies, qui etait la seule des trois a ne pas en avoir. */
#tpv2 .typo-col .lib,
#tpv2 .typo-nom .lib{display:block;font-size:12.5px!important;color:var(--attenue)!important;
  line-height:1.5!important;font-weight:500;letter-spacing:0}

/* La mention de stationnement est une precision, pas une donnee du meme rang que
   le prix : 2px de moins que le texte de la colonne, qui est a 15px. */
#tpv2 .typo-col .note{display:block;font-size:13px!important;color:var(--texte)!important;
  line-height:1.5!important}

/* « A partir de » reste SUR la ligne du prix, mais en petit : c'est une amorce de
   phrase, pas une donnee, et en 19px gras elle pesait autant que le montant.
   Inline et jamais en bloc, sinon elle repasse a la ligne et on annule ce qu'on
   vient de corriger. */
#tpv2 .typo-prix .mini{font-size:12.5px!important;font-weight:500;color:var(--attenue)!important;
  letter-spacing:0;margin-right:4px}

/* ---------- 4. la barre d'etat commercial ----------
 *
 * Rendue par tp_v2_bandeau_etat() juste sous le hero. Une BARRE, pas un pave :
 * la nouvelle tient en une phrase et la page continue en dessous. Parti pris
 * repris de Nacarat, tranche le 2026-08-07 apres avoir essaye le pave.
 *
 * Fond vert pale de la charte, pas de rouge ni d'orange : « tout est vendu » est
 * une bonne nouvelle commerciale mal placee, pas une alerte. Un bandeau d'alerte
 * ferait lire la page comme un incident.
 */
#tpv2 .bandeau-etat{display:flex;align-items:center;gap:16px;padding:16px 22px;
  border-radius:14px;background:#DFEEEB;border:1px solid rgba(69,114,117,.22)}
#tpv2 .bandeau-etat>svg{flex:0 0 auto;width:22px;height:22px;stroke:#146264;
  stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
#tpv2 .bandeau-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
#tpv2 .bandeau-txt strong{font-size:16px;font-weight:700;color:#146264;line-height:1.35}
#tpv2 .bandeau-txt span{font-size:14.5px;color:#3f5a5b;line-height:1.5}
#tpv2 .bandeau-etat .btn{flex:0 0 auto}

/* Sous 720px la barre passe en colonne : garder les trois elements sur une ligne
   ecrase le texte a deux mots par ligne, et le bouton finit plus large que lui. */
@media (max-width:720px){
  #tpv2 .bandeau-etat{flex-direction:column;align-items:flex-start;gap:12px}
  #tpv2 .bandeau-etat .btn{width:100%;justify-content:center}
}

/* La note du tableau saisi a la main : des mentions de prix, pas une donnee. */
#tpv2 .grille-note{margin-top:18px;font-size:12.5px;line-height:1.65;color:var(--attenue)}
#tpv2 .grille-note p{margin:0 0 6px;font-size:12.5px!important;line-height:1.65!important;
  color:var(--attenue)!important}

/* Un groupe de prestations qui porte de l'ancien contenu HTML libre : il occupe
   toute la largeur, contrairement aux groupes v2 qui se rangent en colonnes. */
#tpv2 .presta-groupe--large{grid-column:1/-1}
#tpv2 .presta-groupe--large h3{margin-bottom:10px}
#tpv2 .presta-groupe--large ul{margin:0;padding-left:0;list-style:none}
#tpv2 .presta-groupe--large p{margin:0 0 10px;font-size:15px!important;line-height:1.6!important}

/* ---------- 5. nos autres residences ----------
 *
 * Photo en haut, VILLE en gros, nom du programme en petit dessous. L'ordre est
 * demande par Louis : un visiteur cherche un endroit avant un nom commercial.
 *
 * Grille auto-fit et pas un nombre fixe de colonnes : le catalogue varie de 2 a
 * une dizaine de residences selon la periode, et une grille a 3 colonnes fixes
 * laisse un trou beant quand il n'y en a que 4.
 */
#tpv2 .autres-grille{display:grid;gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}

#tpv2 .res-carte{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;
  background:#fff;border:1px solid rgba(69,114,117,.16);text-decoration:none!important;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
#tpv2 .res-carte:hover,#tpv2 .res-carte:focus{transform:translateY(-3px);
  border-color:rgba(69,114,117,.34);box-shadow:0 14px 30px rgba(9,32,34,.10)}

/* Ratio fixe sur le conteneur, image en couverture : les perspectives vont du
   carre (2000x2000 sur Hana) au 16:9, et sans cadre impose les cartes d'une meme
   ligne n'ont pas la meme hauteur de photo. */
#tpv2 .res-photo{aspect-ratio:3/2;background:#DFEEEB;overflow:hidden}
#tpv2 .res-photo img{width:100%;height:100%;object-fit:cover;display:block}

#tpv2 .res-txt{display:flex;flex-direction:column;gap:2px;padding:16px 18px 4px}
#tpv2 .res-ville{font-size:20px!important;font-weight:800;color:#146264!important;
  letter-spacing:-.3px;line-height:1.2}
#tpv2 .res-nom{font-size:13.5px!important;color:var(--attenue)!important;line-height:1.4}
#tpv2 .res-prix{margin-top:6px;font-size:13.5px!important;color:var(--texte)!important}

#tpv2 .res-lien{display:inline-flex;align-items:center;gap:6px;margin:10px 18px 18px;
  font-size:13.5px;font-weight:600;color:#457275!important}
#tpv2 .res-lien svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease}
#tpv2 .res-carte:hover .res-lien svg{transform:translateX(4px)}

/* Un groupe de prestations SANS titre occupe toute la largeur et met sa liste sur
   deux colonnes : la plaquette donne une seule liste, on ne la coupe donc pas en
   deux blocs baptises, mais treize lignes en une colonne font une page trop
   longue. `columns` conserve un seul <ul>, donc un seul objet pour un lecteur
   d'ecran, contrairement a deux listes separees. */
#tpv2 .presta-groupe--sanstitre{grid-column:1/-1}
#tpv2 .presta-groupe--sanstitre ul{columns:2;column-gap:56px}
#tpv2 .presta-groupe--sanstitre li{break-inside:avoid}
@media (max-width:760px){
  #tpv2 .presta-groupe--sanstitre ul{columns:1}
}

/* ---------- 6. la grille saisie a la main, sur une seule ligne ----------
 *
 * Le tableau saisi n'a pas toujours trois colonnes : Douvrin en a quatre (N° Lot,
 * Surfaces, Annexes, Prix), Cysoing trois, Hallennes trois. La grille du v2 est
 * calibree pour trois, donc la quatrieme colonne passait a la ligne et le prix se
 * retrouvait sous le numero de lot.
 *
 * On repasse cette ligne-la en flex : chaque cellule prend sa part de la largeur,
 * et le nombre de colonnes n'a plus d'importance. `min-width:0` est indispensable,
 * sinon une cellule au contenu long refuse de se comprimer et repousse les autres.
 */
#tpv2 .typo-ligne--manuel{display:flex!important;flex-wrap:nowrap;align-items:flex-start;
  gap:24px}
#tpv2 .typo-ligne--manuel>*{flex:1 1 0;min-width:0}
#tpv2 .typo-ligne--manuel .typo-nom{flex:0 0 20%}

@media (max-width:820px){
  #tpv2 .typo-ligne--manuel{flex-wrap:wrap;gap:12px 20px}
  #tpv2 .typo-ligne--manuel>*{flex:1 1 40%}
  #tpv2 .typo-ligne--manuel .typo-nom{flex:1 1 100%}
}

/* ---------- 7. la galerie de photos ----------
 *
 * `columns` et pas `grid` : chaque visuel garde SON format, les colonnes se
 * decalent naturellement et rien n'est recadre. Une grille imposerait un ratio
 * commun, donc le recadrage qu'on vient de corriger sur le puzzle.
 *
 * Demande de Louis : « un peu pinterest, un peu desordonnee ».
 */
#tpv2 .gal-mur{columns:3;column-gap:16px}
#tpv2 .gal-item{display:block;width:100%;margin:0 0 16px;padding:0;border:0;background:0;
  position:relative;overflow:hidden;border-radius:14px;cursor:zoom-in;
  break-inside:avoid;-webkit-column-break-inside:avoid;line-height:0;
  transition:transform .28s ease,box-shadow .28s ease}
#tpv2 .gal-item img{width:100%;height:auto;display:block;border-radius:14px}
#tpv2 .gal-item:hover,#tpv2 .gal-item:focus-visible{transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(9,32,34,.16);outline:0}

/* Le petit plus, en bas a droite. Meme signal que sur Nacarat : un + et rien
   d'autre, pas de legende sur la vignette. */
#tpv2 .gal-plus{position:absolute;right:12px;bottom:12px;width:34px;height:34px;
  border-radius:999px;background:rgba(255,255,255,.94);display:flex;align-items:center;
  justify-content:center;box-shadow:0 3px 10px rgba(9,32,34,.22);
  transition:transform .28s ease,background .28s ease}
#tpv2 .gal-plus svg{width:16px;height:16px;fill:none;stroke:#146264;stroke-width:2.6;
  stroke-linecap:round}
#tpv2 .gal-item:hover .gal-plus{transform:scale(1.12);background:#fff}

@media (max-width:900px){ #tpv2 .gal-mur{columns:2;column-gap:12px} #tpv2 .gal-item{margin-bottom:12px} }
@media (max-width:560px){ #tpv2 .gal-mur{columns:1} }

/* ---------- la visionneuse ----------
 *
 * `max-width` ET `max-height` sur l'image : elle est montree ENTIERE, jamais
 * recadree. C'est tout l'interet du clic pour agrandir, et c'est la regle posee sur
 * Nacarat.
 */
#tpv2 ~ .gal-vue,.gal-vue{position:fixed;inset:0;z-index:9999;display:flex;
  align-items:center;justify-content:center;padding:56px 72px;
  background:rgba(9,32,34,.93);backdrop-filter:blur(3px)}
.gal-vue[hidden]{display:none}
.gal-vue img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:8px;
  box-shadow:0 24px 60px rgba(0,0,0,.5)}

.gal-vue .gal-fermer,.gal-vue .gal-nav{position:absolute;width:46px;height:46px;
  border:0;border-radius:999px;background:rgba(255,255,255,.14);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .2s ease}
.gal-vue .gal-fermer:hover,.gal-vue .gal-nav:hover{background:rgba(255,255,255,.28)}
.gal-vue .gal-fermer svg,.gal-vue .gal-nav svg{width:20px;height:20px;fill:none;
  stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.gal-vue .gal-fermer{top:18px;right:18px}
.gal-vue .gal-prec{left:16px;top:50%;transform:translateY(-50%)}
.gal-vue .gal-suiv{right:16px;top:50%;transform:translateY(-50%)}
.gal-vue .gal-rang{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.78);font-size:13px;letter-spacing:.4px}

/* Sur un ecran etroit, les fleches laterales mangent la photo : on les descend. */
@media (max-width:700px){
  .gal-vue{padding:56px 12px 72px}
  .gal-vue .gal-prec{left:calc(50% - 62px);top:auto;bottom:14px;transform:none}
  .gal-vue .gal-suiv{right:calc(50% - 62px);top:auto;bottom:14px;transform:none}
  .gal-vue .gal-rang{bottom:26px}
}

/* ---------- 8. la galerie repliee sur petit ecran ----------
 *
 * Demande de Louis : sous 900 px, au-dela de quatre photos on n'en montre que
 * quatre, la quatrieme coupee en fondu, avec un bouton pour tout voir. Le reste
 * n'est meme pas telecharge (URL dans `data-src`, promue par le script au clic).
 *
 * La classe `gal-mur--replie` est posee par le script et pas par une media query :
 * une regle CSS ne peut pas empecher un telechargement, et le cache de page sert
 * le meme HTML a tous les appareils.
 */
#tpv2 .gal-mur--replie .gal-item--differe{display:none}

/* La quatrieme est tronquee, et le fondu part du bas de SA vignette. Le degrade
   descend vers la couleur de fond de la section, pas vers du blanc en dur : la
   section est en `bloc--blanc` mais la variable suit le theme. */
#tpv2 .gal-mur--replie .gal-item--coupe{max-height:150px}
#tpv2 .gal-mur--replie .gal-item--coupe::after{content:'';position:absolute;
  left:0;right:0;bottom:0;height:110px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.86) 62%,#fff 100%)}
/* Le « + » n'a pas de sens sur une vignette coupee : le geste attendu la, c'est le
   bouton en dessous. */
#tpv2 .gal-mur--replie .gal-item--coupe .gal-plus{display:none}

#tpv2 .gal-plus-loin{display:flex;justify-content:center;margin-top:-8px}
#tpv2 .gal-plus-loin[hidden]{display:none}
#tpv2 .gal-plus-loin .btn{gap:10px}
#tpv2 .gal-compte{font-size:12.5px;font-weight:500;color:var(--attenue);letter-spacing:0}

/* Le bouton de la galerie porte DEUX libelles, et le CSS choisit lequel montrer.
   Deux libelles dans le balisage plutot qu'un texte reecrit en JS : le second est
   ainsi traduit et relu comme le premier, et il n'y a pas de chaine de caracteres
   en dur dans le script. */
#tpv2 .gal-plus-loin .gal-lib-fermer{display:none}
#tpv2 .gal-plus-loin--ouverte .gal-lib-ouvrir{display:none}
#tpv2 .gal-plus-loin--ouverte .gal-lib-fermer{display:inline}
#tpv2 .gal-lib-ouvrir{display:inline-flex;align-items:center;gap:10px}

/* La coupe en fondu ne depend plus de la largeur : la classe est posee par le
   script, qui connait le seuil du contexte (quatre sur telephone, dix sur
   ordinateur). Les regles ci-dessous valent donc pour les deux. */
#tpv2 .gal-mur--replie .gal-item--coupe{max-height:150px}
#tpv2 .gal-mur--replie .gal-item--coupe::after{content:'';position:absolute;
  left:0;right:0;bottom:0;height:110px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.86) 62%,#fff 100%)}
#tpv2 .gal-mur--replie .gal-item--coupe .gal-plus{display:none}

/* Sur trois colonnes, couper la dixieme vignette laisse les deux autres colonnes
   pleine hauteur a cote : le fondu doit donc courir sur TOUTE la largeur du mur, pas
   sur une seule vignette. */
@media (min-width:900px){
  #tpv2 .gal-mur--replie{position:relative}
  #tpv2 .gal-mur--replie::after{content:'';position:absolute;left:0;right:0;bottom:0;
    height:150px;pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.9) 68%,#fff 100%)}
  #tpv2 .gal-mur--replie .gal-item--coupe{max-height:none}
  #tpv2 .gal-mur--replie .gal-item--coupe::after{display:none}
  #tpv2 .gal-mur--replie .gal-item--coupe .gal-plus{display:flex}
}