/*! Pages SEO v2 - Tisserin Promotion. GENERE par template-page-seo/tools/generer-css.py depuis
    pages/_refonte-seo-2026/tp-refonte.css : ne pas editer a la main. */
/* ---------- compatibilite apsulis ----------
   Un !important d'apsulis sur un element nu gagne sur un heritage implicite : les
   elements que la maquette laissait heriter declarent donc l'heritage. */
#tpseo h1,#tpseo h2,#tpseo h3,#tpseo h4,#tpseo p,#tpseo a,#tpseo li,#tpseo span,#tpseo strong,#tpseo b,
#tpseo em,#tpseo summary,#tpseo button,#tpseo td,#tpseo th,#tpseo label,#tpseo input,#tpseo select{font-family:inherit!important}
#tpseo p,#tpseo li,#tpseo td,#tpseo th,#tpseo span,#tpseo a,#tpseo strong,#tpseo b,#tpseo em,#tpseo label{font-size:inherit!important;line-height:inherit!important}
#tpseo p,#tpseo li,#tpseo td,#tpseo span,#tpseo strong,#tpseo b,#tpseo em{color:inherit!important}
#tpseo h1,#tpseo h2,#tpseo h3,#tpseo h4,#tpseo p,#tpseo a{text-transform:none!important}
#tpseo h1,#tpseo h2,#tpseo h3,#tpseo h4{margin:0;padding:0;border:0;background:0}
#tpseo ul{margin:0;padding:0}

/* =====================================================================
   Refonte SEO 2026 - feuille commune aux 6 maquettes de pages TP

   DA reprise TELLE QUELLE du modele programme v2 :
   SITES/TISSERIN_PROMOTION/template-programme/mockup.html
   Tokens, boutons et rythme de sections recopies, pas retapes de tete
   (le bouton TP retape de memoire est deja ressorti casse le 2026-08-21).
   ===================================================================== */
#tpseo{--tp:#457275;--tp-fonce:#146264;--tp-nuit:#0F3D40;--menthe:#DFEEEB;--menthe-2:#B6E3E6;--titre:#1E293B;--texte:#475569;--attenue:#64748B;--filet:#E2E8F0;--filet-2:#EBE9E9;--fond:#F1F6F6;--ombre:0 4px 12px rgba(0,0,0,.05);--ombre-forte:0 12px 32px rgba(15,28,28,.10);--sortie:cubic-bezier(.22,.9,.28,1);--raccord:28px}
#tpseo,#tpseo *{box-sizing:border-box;margin:0;padding:0}
/* L'attribut `hidden` ne pese RIEN face a une classe : `.carte{display:flex}` le
   battait, donc un filtre posait bien hidden sur les cartes et aucune ne
   disparaissait. C'etait la cause des filtres « qui ne marchent pas ». */
#tpseo [hidden]{display:none !important}
#tpseo{font-family:Inter,-apple-system,"Segoe UI",sans-serif!important;background:var(--fond);color:var(--texte)!important;font-size:16px!important;line-height:1.75em!important;-webkit-font-smoothing:antialiased}
#tpseo .wrap{max-width:1220px;margin:0 auto;padding-inline:32px}
#tpseo a{color:inherit!important;text-decoration:none}
#tpseo img{display:block;width:100%;height:auto}
#tpseo [id]{scroll-margin-top:72px}
/* le site pose #fixed-top, 36px de haut */
#tpseo h1{font-size:38px!important;font-weight:700;line-height:1.2em!important;letter-spacing:-.4px;color:var(--titre)!important}
#tpseo h2{font-size:26px!important;font-weight:700;line-height:1.3em!important;letter-spacing:-.4px;color:var(--titre)!important}
#tpseo h3{font-size:19px!important;font-weight:600;line-height:1.4em!important;color:var(--titre)!important}
#tpseo h4{font-size:16px!important;font-weight:600;color:var(--titre)!important}
#tpseo .chapo{font-size:17px!important;line-height:1.65em!important;color:var(--texte)!important;max-width:62ch}
#tpseo .tete .chapo{max-width:900px}
#tpseo .corps{font-size:16px!important;line-height:1.75em!important;color:var(--texte)!important;max-width:68ch}
#tpseo .corps p+p,#tpseo .corps ul+p,#tpseo .corps p+ul{margin-top:15px}
#tpseo .corps strong{color:var(--titre)!important;font-weight:600}
#tpseo .corps ul{list-style:none}
#tpseo .corps li{position:relative;padding-left:22px;margin-top:9px}
#tpseo .corps li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;border-radius:4px;background:var(--menthe-2)}
/* bootstrap.css est charge en fin de head sur TP et pose a{color:#f05054} :
   les quatre etats se declarent, toujours. */
#tpseo .corps a:not(.btn){color:var(--tp)!important;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
#tpseo .corps a:not(.btn):visited{color:var(--tp)!important}
#tpseo .corps a:not(.btn):hover,#tpseo .corps a:not(.btn):focus{color:var(--tp-fonce)!important}
/* `--attenue` (#64748B) ne donne que 4,36:1 sur le gris de fond, sous le seuil de
   4,5. Du petit texte est justement ce qu'il ne faut pas laisser limite. */
#tpseo .petit{font-size:13.5px!important;line-height:1.6em!important;color:#55646F!important}
#tpseo .source{color:#55646F!important}
/* --- mentions legales : le panneau des fiches programme, a l'identique ----
   Recopie de template-programme/mockup.html (lui-meme repris de nacarat.com) :
   un filet, le libelle en gras 13,5px suivi d'un chevron de 12px, le corps a
   12px qui se deplie dessous. Pas de carte, pas d'ombre, pas de cadre. */
#tpseo .mentions{font-size:12px!important;color:#94A3B8!important;line-height:1.7em!important}
#tpseo .ml{max-width:820px;border-top:1px solid var(--filet);padding-top:20px}
#tpseo .ml summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none;font-size:13.5px!important;font-weight:700;color:var(--attenue)!important}
#tpseo .ml summary::-webkit-details-marker{display:none}
#tpseo .ml summary:hover{color:var(--tp)!important}
#tpseo .ml summary svg{width:12px;height:12px;flex:0 0 12px;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--sortie)}
#tpseo .ml[open] summary svg{transform:rotate(180deg)}
#tpseo .ml .mentions{margin-top:18px}
#tpseo .ml .mentions sup{color:var(--attenue)!important}
/* --- boutons : copies de mockup.html, chaque variante pose SES deux etats */
#tpseo .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:inherit!important;font-size:14.5px!important;font-weight:600;padding:13px 26px;border:1px solid transparent;border-radius:999px;cursor:pointer;line-height:1.4!important;background:var(--tp);color:#fff!important;border-color:var(--tp);transition:background .3s var(--sortie),border-color .3s var(--sortie),color .3s var(--sortie)}
#tpseo .btn:hover,#tpseo .btn:focus{background:var(--tp-fonce);color:#fff!important;border-color:var(--tp-fonce)}
#tpseo .btn--blanc{background:#fff;color:var(--tp)!important;border-color:#fff}
#tpseo .btn--blanc:hover,#tpseo .btn--blanc:focus{background:var(--menthe);color:var(--tp-fonce)!important;border-color:var(--menthe)}
#tpseo .btn--nu{background:#fff;color:var(--tp)!important;border-color:var(--filet)}
#tpseo .btn--nu:hover,#tpseo .btn--nu:focus{background:var(--menthe);color:var(--tp-fonce)!important;border-color:var(--menthe-2)}
#tpseo .btn--clair{background:0;color:#fff!important;border-color:rgba(255,255,255,.42)}
#tpseo .btn--clair:hover,#tpseo .btn--clair:focus{background:#fff;color:var(--tp-fonce)!important;border-color:#fff}
#tpseo .btn--bloc{width:100%}
#tpseo .btn--bloc.cta{justify-content:space-between}
#tpseo .btn svg{width:17px;height:17px;flex:0 0 17px;stroke:currentColor;fill:none;stroke-width:1.7}
/* le rond a fleche ne va que sur UN bouton quand il y en a deux cote a cote */
#tpseo .cta{padding:7px 9px 7px 24px;gap:15px}
#tpseo .cta .fleche{position:relative;overflow:hidden;flex:0 0 38px;width:38px;height:38px;border-radius:19px;background:rgba(255,255,255,.22)}
#tpseo .btn--blanc.cta .fleche,#tpseo .btn--nu.cta .fleche{background:var(--tp)}
#tpseo .cta .fleche svg{position:absolute;top:11px;left:11px;width:16px;height:16px;flex:0 0 16px;stroke:#fff;stroke-width:2;transition:transform .5s var(--sortie)}
#tpseo .cta .fleche svg+svg{transform:translate(-160%,160%)}
#tpseo .cta:hover .fleche svg,#tpseo .cta:focus .fleche svg{transform:translate(160%,-160%)}
#tpseo .cta:hover .fleche svg+svg,#tpseo .cta:focus .fleche svg+svg{transform:none}
#tpseo .duo{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
/* --- chrome du site (reprise de tp-chrome-header.php) ------------------- */
/* le logo TP est TRES horizontal (469x48, ratio 9,8) : une hauteur fixe avec
   `width:auto` lui donne 527px de large, donc il deborde de tout ecran mobile.
   C'est la largeur qui se pilote, pas la hauteur. */
#tpseo .ariane{font-size:13px!important;color:var(--attenue)!important;padding:18px 0 20px}
#tpseo .ariane a:hover{color:var(--tp)!important}
#tpseo .ariane span[aria-current]{color:var(--titre)!important}
/* --- hero : la photo entaillee en bas a droite du modele programme ------ */
#tpseo .hero{background:#fff;padding:26px 36px 34px}
#tpseo .hero-cadre{position:relative;height:clamp(380px,52vh,520px)}
#tpseo .hero-cadre>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 56%;border-radius:22px}
/* nos perspectives sont en plein jour : sans ce voile la typo blanche ne tient pas */
#tpseo .hero-cadre::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:22px;background:linear-gradient(112deg,rgba(9,32,34,.82) 0%,rgba(9,32,34,.56) 32%,
    rgba(9,32,34,.20) 60%,rgba(9,32,34,.08) 80%,rgba(9,32,34,.18) 100%)}
#tpseo .hero-txt{position:absolute;z-index:2;top:46px;left:52px;max-width:57%}
#tpseo .hero-txt h1{font-size:clamp(34px,4.4vw,60px)!important;font-weight:800;line-height:1.03em!important;letter-spacing:-2px;color:#fff!important;text-wrap:balance}
#tpseo .hero-txt p.accroche{font-size:16px!important;color:rgba(255,255,255,.86)!important;margin-top:18px;line-height:1.7em!important;max-width:52ch}
/* l'entaille : un bloc absolu qui ne fixe que right et bottom se dimensionne
   sur son contenu, donc elle suit le nombre d'infos */
#tpseo .entaille{position:relative;background:#fff;border-top-left-radius:var(--raccord);padding:18px 26px 16px 30px}
/* les deux raccords concaves : un carre moins un quart de disque */
#tpseo .entaille::before,#tpseo .entaille::after{content:"";position:absolute;z-index:3;width:var(--raccord);height:var(--raccord);background:radial-gradient(circle at 0 0,transparent var(--raccord),#fff var(--raccord))}
#tpseo .entaille::before{left:calc(var(--raccord) * -1);bottom:0}
#tpseo .entaille::after{right:0;bottom:100%}
#tpseo .entaille-faits{display:flex;align-items:center;gap:30px}
#tpseo .entaille-faits span{display:block;font-size:11.5px!important;color:var(--attenue)!important;line-height:1.5!important}
#tpseo .entaille-faits b{display:block;font-size:16.5px!important;font-weight:700;color:var(--titre)!important;letter-spacing:-.2px;line-height:1.4!important;white-space:nowrap;margin-top:1px}
#tpseo .entaille-faits .fort b{font-size:23px!important;font-weight:800;color:var(--tp)!important;letter-spacing:-.6px;margin-top:0}
#tpseo .hero-bas{position:absolute;z-index:3;left:0;right:0;bottom:0;display:flex;justify-content:flex-end}
#tpseo .hero-cta{position:absolute;top:0;left:52px;box-shadow:var(--ombre-forte)}
/* --- sections ---------------------------------------------------------- */
#tpseo .bloc{padding:70px 0}
#tpseo .bloc--court{padding:48px 0}
#tpseo .bloc--blanc{background:#fff}
#tpseo .bloc--menthe{background:var(--menthe)}
#tpseo .bloc--sombre{background:var(--tp-nuit);color:rgba(255,255,255,.80)!important}
#tpseo .bloc--sombre h2,#tpseo .bloc--sombre h3,#tpseo .bloc--sombre h4{color:#fff!important}
#tpseo .bloc--sombre .chapo,#tpseo .bloc--sombre .corps{color:rgba(255,255,255,.78)!important}
#tpseo .bloc--sombre .corps strong{color:#fff!important}
/* sur fond sombre, le vert de la charte ne se lit pas : le lien passe en blanc et
   garde son soulignement, c'est lui qui dit « lien » */
#tpseo .bloc--sombre .corps a:not(.btn),#tpseo .bloc--sombre .corps a:not(.btn):visited{color:#fff!important}
#tpseo .bloc--sombre .corps a:not(.btn):hover,#tpseo .bloc--sombre .corps a:not(.btn):focus{color:var(--menthe-2)!important}
/* les cartes restent BLANCHES dans une section sombre : leur texte ne suit donc
   pas la section, sinon on obtient du blanc sur blanc. Deux classes, donc la
   regle bat `.bloc--sombre h3` qui n'en pese qu'une. */
#tpseo .bloc--sombre .sim-card h3,#tpseo .bloc--sombre .sim-card h3 a,#tpseo .bloc--sombre .carte h3,#tpseo .bloc--sombre .carte h3 a,#tpseo .bloc--sombre .etape h3{color:var(--titre)!important}
#tpseo .bloc--sombre .sim-card p,#tpseo .bloc--sombre .carte p,#tpseo .bloc--sombre .etape p{color:var(--texte)!important}
#tpseo .bloc--sombre .sim-card strong,#tpseo .bloc--sombre .carte strong{color:var(--titre)!important}
#tpseo .bloc--sombre .carte .lieu{color:var(--attenue)!important}
/* meme piege sur un tableau : la boite reste blanche, seule la 1re colonne avait
   une couleur explicite, les autres cellules heritaient du blanc de la section */
#tpseo .bloc--sombre .tabl td,#tpseo .bloc--sombre .tabl th{color:var(--texte)!important}
#tpseo .bloc--sombre .tabl td:first-child,#tpseo .bloc--sombre .tabl thead th,#tpseo .bloc--sombre .tabl td b{color:var(--titre)!important}
#tpseo .bloc--sombre .source{color:rgba(255,255,255,.66)!important}
#tpseo .tete{margin-bottom:30px}
#tpseo .tete h2{margin-bottom:10px}
/* --- sections centrees -------------------------------------------------- */
/* Le bloc encadre a filet gauche et les pilules de sommaire ont ete retires :
   ils s'intercalaient entre le hero et la premiere section utile, et le filet
   colore a gauche ne fait pas partie du vocabulaire du site. Le texte de fond
   qu'ils portaient descend en bas de page, dans une section centree. */
#tpseo .tete--centre{text-align:center;margin-inline:auto;max-width:860px}
#tpseo .tete--centre .chapo{margin-inline:auto}
#tpseo .corps--centre{margin-inline:auto;text-align:left;max-width:74ch}
/* --- filtres de la liste (boutons, pas un sommaire) ---------------------- */
#tpseo .filtres{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
#tpseo .filtres a{font-size:13.5px!important;font-weight:600;color:var(--tp)!important;background:#fff;border:1px solid var(--filet);border-radius:999px;padding:8px 16px;transition:border-color .2s var(--sortie),background .2s var(--sortie)}
#tpseo .filtres a:hover,#tpseo .filtres a:focus{background:var(--menthe);border-color:var(--menthe-2);color:var(--tp-fonce)!important}
#tpseo .filtres a[aria-pressed="true"]{background:var(--tp);border-color:var(--tp);color:#fff!important}
/* filet entre les puces par type de bien et les puces par usage (habiter, investir,
   faire construire) : ce sont deux questions differentes, on ne les melange pas */
#tpseo .filtres .filtres-sep{width:1px;align-self:stretch;background:var(--filet);margin:4px 6px}
/* --- bande d'atouts, gabarit de la page L'Oree Blanche ------------------ */
#tpseo .atouts{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;margin-top:16px}
#tpseo .atouts--3{grid-template-columns:repeat(3,1fr)}
#tpseo .atouts svg{width:32px;height:32px;flex:0 0 32px;stroke:var(--tp);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:18px}
#tpseo .bloc--sombre .atouts svg{stroke:var(--menthe-2)}
#tpseo .atouts h3{font-size:15.5px!important;font-weight:700;text-transform:uppercase!important;letter-spacing:.7px;line-height:1.35em!important;color:var(--titre)!important;margin-bottom:11px;text-wrap:balance}
#tpseo .bloc--sombre .atouts h3{color:#fff!important}
#tpseo .atouts p{font-size:14.5px!important;line-height:1.7em!important}
#tpseo .atouts strong{color:var(--titre)!important;font-weight:600}
#tpseo .bloc--sombre .atouts strong{color:#fff!important}
/* --- ligne de dispositifs : ni coche ni pastille, c'est de l'information
   de qualification, pas une liste d'arguments a decorer.
   En FLEX + wrap, les separateurs verticaux tombaient n'importe ou : un filet
   restait pendu en fin de ligne et la 2e ligne demarrait sans alignement. Une
   grille est deterministe, donc on sait exactement qui est en debut de rangee. */
#tpseo .av-line{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}
#tpseo .av-line span{font-size:13.5px!important;font-weight:600;color:var(--titre)!important;line-height:1.55!important;padding:14px 22px;border-left:1px solid var(--filet);border-top:1px solid var(--filet)}
#tpseo .av-line span:nth-child(3n+1){border-left:0;padding-left:0}
#tpseo .av-line span:nth-child(-n+3){border-top:0}
#tpseo .av-line em{display:block;font-style:normal;font-weight:500;color:var(--attenue)!important;margin-top:1px}
/* --- cartes programmes -------------------------------------------------- */
#tpseo .grille{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
#tpseo .grille--4{grid-template-columns:repeat(4,1fr);gap:20px}
#tpseo .grille--2{grid-template-columns:repeat(2,1fr)}
#tpseo .carte{background:#fff;border:1px solid var(--filet);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;position:relative;transition:transform .22s var(--sortie),box-shadow .22s var(--sortie),
    border-color .22s var(--sortie)}
#tpseo .carte:hover{transform:translateY(-4px);box-shadow:var(--ombre-forte);border-color:var(--tp)}
/* conteneur a ratio + image en absolu : la seule recette qui tienne aussi
   quand l'image est un element de flex en colonne */
#tpseo .carte-vue{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--filet-2)}
#tpseo .carte-vue img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#tpseo .carte-corps{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;position:static}
#tpseo .carte h3{font-size:17px!important;margin-bottom:3px;line-height:1.35em!important}
#tpseo .carte .lieu{font-size:13.5px!important;color:var(--attenue)!important;margin-bottom:12px}
#tpseo .carte p{font-size:14px!important;line-height:1.65em!important;margin-bottom:16px}
#tpseo .carte .faits{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px!important;color:var(--texte)!important;margin-bottom:16px}
#tpseo .carte .faits b{color:var(--titre)!important;font-weight:600}
#tpseo .carte .prix{font-size:17px!important;font-weight:800;color:var(--tp)!important;letter-spacing:-.3px}
#tpseo .carte-pied{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--filet-2)}
#tpseo .lien-fleche{display:inline-flex;align-items:center;gap:7px;font-size:14.5px!important;font-weight:600;color:var(--tp)!important}
#tpseo .lien-fleche svg{display:block;width:15px;height:15px;flex:0 0 15px;stroke:currentColor;fill:none;stroke-width:2.4;transition:transform .22s var(--sortie)}
#tpseo .carte:hover .lien-fleche svg,#tpseo .sim-card:hover .lien-fleche svg{transform:translateX(4px)}
/* carte entierement cliquable : on etend le lien DU TITRE, jamais un <a>
   autour du conteneur (le parseur ferme le lien exterieur et vide la carte) */
#tpseo .carte h3 a::after,#tpseo .sim-card h3 a::after{content:"";position:absolute;inset:0;z-index:2}
#tpseo .etat{position:absolute;z-index:3;top:12px;left:12px;background:rgba(255,255,255,.94);color:var(--titre)!important;font-size:12px!important;font-weight:700;border-radius:8px;padding:5px 11px;letter-spacing:.2px}
#tpseo .etat--vert{background:var(--tp);color:#fff!important}
/* --- cartes de parcours et de simulateurs ------------------------------- */
#tpseo .sim-card{background:#fff;border:1px solid var(--filet);border-radius:16px;padding:28px;display:flex;flex-direction:column;position:relative;transition:transform .22s var(--sortie),box-shadow .22s var(--sortie),
    border-color .22s var(--sortie)}
#tpseo .sim-card:hover{transform:translateY(-4px);box-shadow:var(--ombre-forte);border-color:var(--tp)}
#tpseo .sim-card .picto{display:block;width:30px;height:30px;flex:0 0 30px;stroke:var(--tp);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:18px}
#tpseo .sim-card h3{font-size:16.5px!important;margin-bottom:8px;line-height:1.35em!important}
#tpseo .sim-card p{font-size:14px!important;line-height:1.65em!important;margin-bottom:18px}
#tpseo .sim-card .lien-fleche{margin-top:auto}
/* --- etapes : le rang est dans le titre, jamais un gros chiffre decoratif */
#tpseo .etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:10px}
#tpseo .etape{background:#fff;border:1px solid var(--filet);border-radius:16px;padding:24px}
#tpseo .etape h3{font-size:16px!important;margin-bottom:9px;line-height:1.4em!important}
#tpseo .etape p{font-size:14px!important;line-height:1.65em!important}
#tpseo .etape .rang{display:block;height:3px;width:34px;background:var(--menthe-2);border-radius:2px;margin-bottom:16px}
#tpseo .etape:first-child .rang{background:var(--tp)}
/* --- tableaux de donnees ------------------------------------------------ */
#tpseo .tabl-boite{background:#fff;border:1px solid var(--filet);border-radius:16px;overflow:hidden}
/* dans une section centree, le tableau prend la largeur du texte qui l'entoure
   (74ch, comme .corps--centre) au lieu de la pleine largeur de la grille */
#tpseo .tabl-boite--centre{max-width:74ch;margin-inline:auto}
#tpseo .tabl{width:100%;border-collapse:collapse;font-size:14.5px!important}
/* le theme force word-break:break-all sur les cellules : le texte se couperait
   en plein mot, et ca ne se voit que dans un tableau */
#tpseo .tabl th,#tpseo .tabl td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--filet-2);word-break:normal;overflow-wrap:break-word;hyphens:none}
#tpseo .tabl thead th{background:var(--menthe);color:var(--titre)!important;font-weight:700;font-size:13.5px!important;letter-spacing:.2px;border-bottom:1px solid var(--menthe-2)}
#tpseo .tabl tbody tr:last-child td{border-bottom:0}
#tpseo .tabl tbody tr:hover{background:var(--fond)}
#tpseo .tabl td:first-child{color:var(--titre)!important;font-weight:600}
#tpseo .tabl td b{color:var(--titre)!important;font-weight:700}
#tpseo .source{font-size:12.5px!important;color:#55646F!important;margin-top:12px}
/* --- qualification en trois champs ------------------------------------- */
#tpseo .elig{background:#fff;border:1px solid var(--filet);border-radius:18px;padding:30px 32px;box-shadow:var(--ombre)}
#tpseo .elig h3{font-size:18px!important;margin-bottom:6px}
#tpseo .elig>p{font-size:14.5px!important;line-height:1.65em!important;max-width:70ch}
#tpseo .elig .champs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
#tpseo .elig label{display:block;font-size:13px!important;font-weight:600;color:var(--titre)!important;margin-bottom:7px}
#tpseo .elig select,#tpseo .elig input{width:100%;font-family:inherit!important;font-size:14.5px!important;color:var(--titre)!important;background:#fff;border:1px solid var(--filet);border-radius:10px;padding:11px 13px;appearance:none;-webkit-appearance:none}
#tpseo .elig select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23457275' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:38px}
#tpseo .elig select:focus,#tpseo .elig input:focus{outline:2px solid var(--menthe-2);outline-offset:1px;border-color:var(--tp)}
#tpseo .elig-sortie{margin-top:22px;padding:18px 20px;border-radius:12px;background:var(--fond);font-size:15px!important;line-height:1.65em!important;color:var(--texte)!important}
#tpseo .elig-sortie.ok{background:var(--menthe);color:var(--tp-fonce)!important}
#tpseo .elig-sortie.non{background:#FDF2F0;color:#8A3D2E!important}
#tpseo .elig-sortie b{color:inherit!important;font-weight:700}
#tpseo .elig-sortie .btn{margin-top:14px}
/* --- bandeau de conversion ---------------------------------------------- */
#tpseo .bandeau{background:var(--tp);color:#fff!important;border-radius:18px;padding:30px 34px;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
#tpseo .bandeau .t{font-size:22px!important;font-weight:700;letter-spacing:-.3px;line-height:1.3!important;color:#fff!important}
#tpseo .bandeau .c{font-size:14.5px!important;color:rgba(255,255,255,.84)!important;line-height:1.6em!important;margin-top:5px;max-width:62ch}
#tpseo .bandeau .actes{margin-left:auto;display:flex;gap:12px;flex-wrap:wrap}
/* le meme bandeau, pose au milieu de page sous la liste des programmes : c'est
   la que le visiteur a vu les biens et qu'il hesite, donc c'est la que le
   rappel doit etre visible, pas seulement tout en bas */
#tpseo .bandeau--milieu{background:var(--tp-nuit)}
/* etat vide d'une liste de programmes : on l'annonce, on ne laisse pas un trou */
#tpseo .vide{background:#fff;border:1px solid var(--filet);border-radius:16px;padding:30px 32px;text-align:center;max-width:720px;margin-inline:auto}
#tpseo .vide p{font-size:15.5px!important;line-height:1.7em!important;color:var(--texte)!important;max-width:60ch;margin-inline:auto}
#tpseo .vide p b{display:block;font-size:18px!important;color:var(--titre)!important;margin-bottom:8px}
#tpseo .vide .btn{margin-top:20px}
/* le bouton du test d'eligibilite, sous le verdict et non dedans */
#tpseo .elig-cta{margin-top:16px}
/* passerelle vers les constructeurs du groupe, page terrain */
/* texte au-dessus, puis les deux cartes cote a cote sur TOUTE la largeur de la
   section : leurs bords tombent au meme endroit que ceux de la grille des etapes.
   `minmax(0,1fr)` et pas `1fr` : sinon la carte au libelle le plus long s'elargit
   et les deux n'ont plus la meme taille. */
#tpseo .accomp{margin-top:34px;padding-top:30px;border-top:1px solid var(--filet)}
#tpseo .accomp h3{font-size:18px!important;margin-bottom:8px}
#tpseo .accomp p{font-size:14.5px!important;line-height:1.7em!important;max-width:78ch}
#tpseo .accomp p a,#tpseo .accomp p a:visited{color:var(--tp)!important;font-weight:600;text-decoration:underline;text-underline-offset:2px}
#tpseo .accomp p a:hover,#tpseo .accomp p a:focus{color:var(--tp-fonce)!important}
/* deux classes : `.liens-util` seule est declaree plus bas avec 3 colonnes et
   gagnait a egalite, les cartes s'arretaient aux deux tiers de la section */
#tpseo .liens-util.liens-util--2{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:20px}
/* repli quand une famille de biens n'a plus rien en vente */
#tpseo .entaille-faits .epuise{font-style:normal;font-size:13px!important;font-weight:600;color:var(--attenue)!important}
/* --- FAQ : LE design des questions frequentes de TP ----------------------
   Arrete par Louis le 2026-09-23 : les fiches programme n'ont pas de FAQ, donc
   ce gabarit fait reference pour tout le site. Cartes blanches arrondies, filet
   fin, chevron vert a droite, bloc CENTRE. Le gabarit « filet seul » des pages
   Elementor a ete essaye et refuse (« je prefere le design d'avant »). */
#tpseo .faq{max-width:880px;margin-inline:auto}
#tpseo .faq details{background:#fff;border:1px solid var(--filet);border-radius:14px;margin-bottom:10px;overflow:hidden}
#tpseo .faq details[open]{border-color:var(--menthe-2)}
#tpseo .faq summary{list-style:none;cursor:pointer;padding:18px 54px 18px 22px;position:relative;font-size:16px!important;font-weight:600;color:var(--titre)!important;line-height:1.5em!important}
#tpseo .faq summary h3{font-size:inherit!important;font-weight:inherit;color:inherit!important;line-height:inherit!important;display:inline}
#tpseo .faq summary::-webkit-details-marker{display:none}
#tpseo .faq summary::after{content:"";position:absolute;right:22px;top:22px;width:11px;height:11px;border-right:2px solid var(--tp);border-bottom:2px solid var(--tp);transform:rotate(45deg);transition:transform .25s var(--sortie)}
#tpseo .faq details[open] summary::after{transform:rotate(-135deg);top:26px}
#tpseo .faq summary:hover{color:var(--tp)!important}
#tpseo .faq .rep{padding:0 22px 20px;font-size:15px!important;line-height:1.75em!important;color:var(--texte)!important;max-width:74ch}
#tpseo .faq .rep p+p{margin-top:12px}
#tpseo .faq .rep a{color:var(--tp)!important;font-weight:600;text-decoration:underline;text-underline-offset:3px}
#tpseo .faq .rep a:visited{color:var(--tp)!important}
#tpseo .faq .rep a:hover,#tpseo .faq .rep a:focus{color:var(--tp-fonce)!important}
/* --- maillage interne ---------------------------------------------------- */
#tpseo .liens-util{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
#tpseo .lien-util{background:#fff;border:1px solid var(--filet);border-radius:14px;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px;transition:border-color .2s var(--sortie),transform .2s var(--sortie)}
#tpseo .lien-util:hover{border-color:var(--tp);transform:translateY(-2px)}
#tpseo .lien-util b{display:block;font-size:15px!important;color:var(--titre)!important;font-weight:600;line-height:1.4em!important}
#tpseo .lien-util span{display:block;font-size:13px!important;color:var(--attenue)!important;margin-top:3px;line-height:1.5em!important}
#tpseo .lien-util svg{width:16px;height:16px;flex:0 0 16px;stroke:var(--tp);fill:none;stroke-width:2.2}
/* --- pied de page -------------------------------------------------------- */
/* --- bandeau de maquette : ne part PAS en production --------------------- */
/* --- responsive ---------------------------------------------------------- */
@media (max-width:1020px){
#tpseo .atouts,#tpseo .grille,#tpseo .grille--4,#tpseo .etapes{grid-template-columns:repeat(2,1fr)}
#tpseo .liens-util{grid-template-columns:repeat(2,1fr)}
#tpseo .hero-txt{max-width:70%}
#tpseo .faq{max-width:100%}
#tpseo .av-line{grid-template-columns:repeat(2,1fr)}
#tpseo .av-line span:nth-child(3n+1){border-left:1px solid var(--filet);padding-left:22px}
#tpseo .av-line span:nth-child(-n+3){border-top:1px solid var(--filet)}
#tpseo .av-line span:nth-child(2n+1){border-left:0;padding-left:0}
#tpseo .av-line span:nth-child(-n+2){border-top:0}
}
@media (max-width:760px){
#tpseo .wrap{padding-inline:20px}
#tpseo h1{font-size:30px!important}
#tpseo h2{font-size:22px!important}
#tpseo .bloc{padding:48px 0}
#tpseo .hero{padding:16px 16px 24px}
#tpseo .hero-cadre{height:auto;display:flex;flex-direction:column}
#tpseo .hero-cadre>img{position:relative;height:230px;border-radius:18px}
#tpseo .hero-cadre::after{display:none}
#tpseo .hero-txt{position:static;max-width:none;margin-top:20px}
#tpseo .hero-txt h1{color:var(--titre)!important;font-size:29px!important;letter-spacing:-1px;line-height:1.12em!important}
#tpseo .hero-txt p.accroche{color:var(--texte)!important;font-size:15.5px!important}
#tpseo .hero-bas{position:static;margin-top:18px;display:block}
#tpseo .hero-cta{position:static;width:100%}
#tpseo .entaille{padding:18px 0 0;border-radius:0}
#tpseo .entaille::before,#tpseo .entaille::after{display:none}
#tpseo .entaille-faits{gap:22px;flex-wrap:wrap}
#tpseo .atouts,#tpseo .atouts--3,#tpseo .grille,#tpseo .grille--4,#tpseo .grille--2,#tpseo .etapes,#tpseo .liens-util,#tpseo .liens-util.liens-util--2,#tpseo .elig .champs{grid-template-columns:1fr;gap:18px}
#tpseo .bandeau{padding:24px;flex-direction:column;align-items:flex-start}
#tpseo .bandeau .actes{margin-left:0;width:100%}
#tpseo .bandeau .actes .btn{width:100%}
#tpseo .av-line{grid-template-columns:1fr}
#tpseo .av-line span,#tpseo .av-line span:nth-child(3n+1),#tpseo .av-line span:nth-child(2n+1){padding:12px 0;border-left:0;border-top:1px solid var(--filet)}
#tpseo .av-line span:first-child{border-top:0}
/* le tableau passe en cartes : chaque cellule porte son data-label */
#tpseo .tabl-boite{border:0;background:0}
#tpseo .tabl thead{display:none}
#tpseo .tabl,#tpseo .tabl tbody,#tpseo .tabl tr,#tpseo .tabl td{display:block;width:100%}
#tpseo .tabl tr{background:#fff;border:1px solid var(--filet);border-radius:14px;margin-bottom:12px;padding:6px 4px}
#tpseo .tabl td{border-bottom:1px solid var(--filet-2);padding:10px 16px;display:flex;justify-content:space-between;gap:18px;text-align:right}
#tpseo .tabl td:first-child{background:var(--menthe);color:var(--titre)!important;border-radius:10px;display:block;text-align:left;margin:4px 8px 8px;padding:9px 12px}
#tpseo .tabl td:last-child{border-bottom:0}
#tpseo .tabl td:not(:first-child)::before{content:attr(data-label);font-size:13px!important;font-weight:600;color:var(--attenue)!important;text-align:left;flex:1 1 auto}
}
/* telephone COUCHE : 844x390 ou 667x375, moins de 560px de haut. Sans cette
   bande, un hero calibre en vh occupe plus d'un ecran. */
@media (max-height:560px) and (orientation:landscape){
#tpseo .hero{padding:14px 18px 20px}
#tpseo .hero-cadre{height:auto;display:flex;flex-direction:column}
#tpseo .hero-cadre>img{position:relative;height:112px}
#tpseo .hero-cadre::after{display:none}
#tpseo .hero-txt{position:static;max-width:none;margin-top:14px}
#tpseo .hero-txt h1{color:var(--titre)!important;font-size:24px!important;letter-spacing:-.8px;line-height:1.12em!important}
#tpseo .hero-txt p.accroche{color:var(--texte)!important;font-size:14.5px!important;margin-top:10px}
#tpseo .hero-bas{position:static;margin-top:14px;display:block}
#tpseo .hero-cta{position:static}
#tpseo .entaille{padding:12px 0 0;border-radius:0}
#tpseo .entaille::before,#tpseo .entaille::after{display:none}
#tpseo .entaille-faits{gap:20px;flex-wrap:wrap}
#tpseo .entaille-faits b{font-size:15px!important}
#tpseo .entaille-faits .fort b{font-size:19px!important}
#tpseo .bloc{padding:40px 0}
}
@media (prefers-reduced-motion:reduce){
#tpseo,#tpseo *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}